[FE] 10-10CG - Facilities selection: Search Results and "show more" link

[hdjustice]

Background

To improve the Facility Selection experience, we are implementing new functionality to allow users to input their city, state or postal code and get a list of results from which they can choose. We need to create the results list that contains radio cards to allow for the selection of a single facility.

The cards should contain the facility name and address as shown in the Sketch designs listed below. Based on consultation with design system and accessibility experts, we can omit any pagination for this list. We should show all results on the same screen.

NOTE: To get appropriate styling between the facility name and facility description, we may need to request for the Design System team to add a CSS part attribute to that markup in the web component to allow us to target those items for styling.

Resources

• Initiative brief
• Figma designs
  • Search Input
  • Search Error
  • Search Results
  • Search Selection
  • Search Selection - error
  • Confirmation - different

Tasks

• [x] Create accessible list of 5 search results using radio cards
• [x] Add a link that allows the user to click and "show more" facilities in the list
• [x] Ensure all work is implemented behind feature flag and not visible in production

Acceptance Criteria

• Facility selection search results component successfully renders a list of 5 facilities with a "Show more" link, which allows additional 5 facilities to load each time the link is clicked.
• All created components match the provided designs from the UX team

[hdjustice]

Update design links @hdjustice

[hdjustice]

design links updated

[coope93]

Looking into an issue @allanto-ah found in regards to the facilities api returns a 500 error when the facilities list that is returned is nil.