Shannon/lg 6089 select location page -Draft pr

[svalexander]

This pr sets up the in-person-location-step. This step is added to the javascript app and is reached when a user chooses to verify their identity in person at a USPS location after their id verification fails.

This pr adds two components to the javascript components - the LocationCollectionItem and LocationCollection. Both are based off of USWDS components but customized to match the UI design for this step in Figma.

• LocationCollectionItem displays a single post office location. It includes strings for text that doesn't change - the button text, the addition of the words "Post Office" to the heading, the title "Retail Hours" and strings for the weekday/weekend hours.

• Location-collection-item.scss is similar to the usa-collection-item css class available in USWDS but adjusted to follow our figma design (moves the border to the bottom of the component and makes it light grey). This class is applied to the LocationCollectionItem.

• LocationCollection displays a list of LocationCollectionItems.

In the location step a fetch is made to a route defined in routes.rb. This endpoint (http://localhost:3000/verify/in_person/usps_locations) hosts json for the locations returned from the controller. In the step the a helper function named formatLocation() formats the address so that city, state and zip code form a single string. The step then displays the locations within the components described above.

It is important to note that the data currently being displayed is not from the USPS api, but rather from a json file in the repo. For the pilot the data that will be displayed will be for the pilot locations.

Things that need to be completed:

• Passing the selected location to the next step when a user clicks the select button
• Need the pilot location json added rather than the dummy json currently used
• Fix button on mobile view

Web Screenshots

Mobile Screenshots

[lizzieamanning]

Overall looks good! A few comments/questions:

• On the "Your ready to verify page," we also include the post office meta data. We found that the screen reader reads the retail hours "Mon-Fri" as MonFri, so we decided to update this text to "Monday to Friday" to be more accessible. Can we do the same here? The details of that are in the conversation of this PR for reference
• Can we set a max width for longer post office location names so the title wraps instead of running into the button, like with "Dr Martin Luther King Jr?" We didn't show any wrapped titles in the design, so let me know if it'd be helpful to have a mock up for this

Saw a note that the button on mobile is still being worked on so happy to give another visual review when thats ready! Can also test out the functionality if you have this in a sandbox

[svalexander]

"Can we set a max width for longer post office location names"

• Sounds good, any guidance as to what the max width should be?

[lizzieamanning]

Looks like we are using 338px in Figma, but if there is a more natural breakpoint around there, that works too.