feat: Add a nicer summary view for trip planner output

[joshlarson]

Before

After

---

Parent Ticket: Trip Planner Preview | Output summary view
Subtask Ticket: Add mode icons (not worrying about the smushed icons for now) to the summary view

---

General checks

• Are the changes organized into self-contained commits with descriptive and well-formatted commit messages? This is a good practice that can facilitate easier reviews.
• Testing. Do the changes include relevant passing updates to tests? This includes updating screenshots. Preferably tests are run locally to verify that there are no test failures created by these changes, before opening a PR.
• Tech debt. Have you checked for tech debt you can address in the area you're working in? This can be a good time to address small issues, or create Asana tickets for larger issues.

New UI, or substantial UI changes

• Cross-browser compatibility is less of an issue now that we're no longer supporting IE, but changes still need to work as expected in Safari, Chrome, and Firefox.
• Are interactive elements accessible? This includes at minimum having relevant keyboard interactions and visible focus, but can also include verification with screen reader testing.
• Other accessibility checks such as sufficient color constrast, or whether the layout holds up at 200% zoom level.

New endpoints, or non-trivial changes to current endpoints

• Have we load-tested any new pages or internal API endpoints that will receive significant traffic? See load testing docs
• If this change involves routes, does it work correctly with pertinent "unusual" routes such as the combined Green Line, Silver Line, Foxboro commuter rail, and single-direction bus routes like the 170?

---

Assorted Implementation Notes

• This does not fully solve the parent ticket - there are some elements missing, and the icons won't always be right. I'm treating those as follow-up tasks.
• Smushed icons are a follow-up ticket. Showing icons side-by-side will be part of this ticket, but also a follow-up PR. This will require changing the ItineraryGroups algorithm to group the legs within itineraries as well as grouping similar itineraries themselves.
• I wasn't able to use the Metro badges for this because they rendered incorrectly. Happy to fix that now if it's easy, but otherwise I don't want to block the functionality here on fixing the library, especially since the icons I had already built do do the job correctly.
  

[thecristen]

Feel free to do some refactoring as it makes sense for you! Left a few comments.

[anthonyshull]

I don't think any of those badge or icon components are necessary.

[anthonyshull]

Can definitely use metro now to put thos SVGs into a directory and turn them into metro icons. Then put that icon into a circle badge.

[joshlarson]

Non-blocking, partly because I think my ideal outcome here might be a fairly large restructuring of how routes and modes are represented in dotcom (which is definitely too much scope for this PR), but I feel like there are a lot of places where I have to memorize what type: 2/type: 4/etc mean in order to understand our code.

[joshlarson]

Something is going wonky with respect to the spacing. It looks like for whatever reason, the wrapping div thinks that each bus pill is a bit larger than it is (hence the fact that the weird empty space to the right is bigger when there are three routes versus when there are two).

What's especially weird is that it looks like this is only happening in Firefox. It looks great in Chrome.