Refactor ItineraryBody so it can be formatted like the original ItineraryBody in otp-react-redux

[evansiroky]

This PR adds and refactors a bunch of stuff so that the ItineraryBody component can be styled and rendered as close as possible to the original ItineraryBody component in otp-react-redux. This also introduces some breaking changes to improve code maintenance and avoid loading unnecessary components.

• Creates stories for each of the mock itineraries with otp-rr styling
• Extracts some individual components into single files to better organize things
• Adds new props to the root component:
  • LineColumnContent
  • showLegIcon
  • showMapButtonColumn
  • TransitLegSubheader
• Places all default components for slots into the defaults folder
• BREAKING: does not automatically use the default components for each slot. It is now expected for the developer to include these on their own. Doing this allows the application to not have to load potentially unnecessary components and code.
• Adds meaningful arguments when calling the frameLeg function (fixes Pass the leg index into frameLeg callback #94).

[fpurcell]

Hey Evan...the last leg of the itinerary has some null frameLeg info. Otherwise, this is great.

[fpurcell]

BTW, seems pretty consistent across itins that that last leg has nulls...

[fpurcell]

Could you add / adjust Storys to demonstrate 3 things:
a) rewrite 'Ride 3 min / 2 stops ▼ | Trip Viewer' as '3-minute ride (2 stops) ▼'
(or 'Ride 3 min (2 stops) ▼' ... btw, bold used here to differentiate desired to be state)
b) remove the MA from the bubble
c) align the time near the leg circle

[fpurcell]

BTW, of the 3 asks above, item 'a' would be the priority. This is what is being asked for the trimet.org redesign:

https://xd.adobe.com/view/cef25753-fbd1-4e9d-7bf1-c5bc3bff8219-b8c3/screen/867915f3-2160-4c66-8f92-01fde40bdbeb/Planner-Itinerary

So for item a, there is a trip viewer with time and number of stops, but just no '| trip viewer' wording to the right of that. Also, the number of stops are in parens. My $0.02 is that parens are an improvement over the 'Ride 15 min / 13 stops' format in terms of readability. So desired Story would have '15-minute ride (13 stops) ▼' to match the mockup above (btw, 'Ride 15 min (13 stops)' would also be okay). Please feel free to use all wording / formatting from the design mockup, if you like .. or make changes based on potential translation / localization issues.

[evansiroky]

@fpurcell, the null values occurring while clicking on the destination happen because there isn't another leg that continues after the destination. Maybe I'll include another parameter that indicates that the item clicked is the destination.

[binh-dam-ibigroup]

Would it be possible to remove the custom font from the unstyled steps?

[fpurcell]

@fpurcell, the null values occurring while clicking on the destination happen because there isn't another leg that continues after the destination. Maybe I'll include another parameter that indicates that the item clicked is the destination.

Yeah something. The clicking on that map icon in the itinerary is going to then be used to move the map to that location. So having a record with coords (or the leg index into the itinerary at least) available in the frameLeg() callback would be helpful, me thinks....

[binh-dam-ibigroup]

Capital W

[randolphjones]

@fpurcell Thanks for pointing that out. Yes, we are trying to frame the selected leg on the map.
Two ways we can implement this: We can get the entire leg object as an argument and frame the view based on that or we can get the index and use that to select the leg from the user's active itinerary. Either way, we use the existing bound utilities with a leg object and frame up the view that way. Whether we get the entire leg from the get-go or the index of the leg... we can be flexible on that.

Taking a glance at the code in Evan's earlier commits, looks like we get both? I think we can definitely work w that 👍

[binh-dam-ibigroup]

What is theotp-react-redux subfolder for? Is it a mock folder?

[binh-dam-ibigroup]

For now, there is one comment on the rental vehicle description that should be moved. Other comments are more formatting/style related.

[evansiroky]

Would it be possible to remove the custom font from the unstyled steps?

@binh-dam-ibigroup, there is no custom font present. The differences in font are due to default browser styling rules. It is generally expected that implementers will define fonts at a higher level than just this component.

[evansiroky]

I believe I've addressed most of the comments here. @fpurcell, regarding your requests, here is what I have done:

a) rewrite 'Ride 3 min / 2 stops ▼ | Trip Viewer' as '3-minute ride (2 stops) ▼'
(or 'Ride 3 min (2 stops) ▼' ... btw, bold used here to differentiate desired to be state)

See story titled ItineraryBody with walk-transit-walk itinerary with custom view trip button activated and custom route abbreviation and corresponding code.

b) remove the MA from the bubble

See story titled ItineraryBody with walk-transit-walk itinerary with custom view trip button activated and custom route abbreviation and corresponding code.

c) align the time near the leg circle

See story titled Styled ItineraryBody with walk-transit-walk itinerary and corresponding code.

frameLeg() callback

The frameLeg callback now also sends the isDestination and place values in callbacks.

[fpurcell]

Fabulous work, Evan. Thanks for all the work, and demo'ing different style options in the Stories.

[binh-dam-ibigroup]

This case producing a validation error. Is that intended?

[binh-dam-ibigroup]

Just one last validation error then I think it should be good to go.

[evansiroky]

@binh-dam-ibigroup, see latest commit.