Various styling tweaks, frontend tech debt refactors, and improvements to align things with Figma that Bob worked on when everyone else was out of office last week. Should result in the results page and the search form being up to date / ahead of design minus unimplemented features (step indicator, search bar on results view).
Of note:
WOULD LOVE OTHER DEVS' OPINIONS ON SCAFFOLDING OUT THIS FOLDER STRUCTURE. The creation of separate designSystem directory for any context-unaware components (the accordion, redirect toast, side nav (newly introduced in this PR) , and site alert components for now). Breaking these out to implement some Atomic Design ideas and to eventually make building something like Storybook or Figma Code Connect easier.
If I could have my way, we'd also have a separate folder for the page / view level, so that we'd have
designSystem for any components that come out of the Figma design system
components for things in the middle and
pages that match the routing / actual pages that map into the URL's people visit.
If we do go down this route, this arch should start to reflect larger design patterns around pushing state away from 1) UI implementation at the designSystem level and 2) page routing at the pages level. This will be explored further in a writeup that I'll work on related to work called out in #2573.
Modularizing a lot of our CSS / putting components into separate folders rather than just living in components.
Seeding out some spacing tokens (specifically $tefca-viewer-smaller-width) that we'll probably want to systematize / dedupe from USWDS settings, which I made a ticket for here.
Aligned the side nav styling and the backlink/new patient search button. Right now, these link back to the same search form, but when we build out the patient search vs the saved query selection, these will link out to their respective locations. Also adds the name of the query in the title section.
PULL REQUEST
Summary
Various styling tweaks, frontend tech debt refactors, and improvements to align things with Figma that Bob worked on when everyone else was out of office last week. Should result in the results page and the search form being up to date / ahead of design minus unimplemented features (step indicator, search bar on results view).
Of note:
designSystem
directory for any context-unaware components (the accordion, redirect toast, side nav (newly introduced in this PR) , and site alert components for now). Breaking these out to implement some Atomic Design ideas and to eventually make building something like Storybook or Figma Code Connect easier.designSystem
for any components that come out of the Figma design systemcomponents
for things in the middle andpages
that match the routing / actual pages that map into the URL's people visit.designSystem
level and 2) page routing at thepages
level. This will be explored further in a writeup that I'll work on related to work called out in #2573.components
.$tefca-viewer-smaller-width
) that we'll probably want to systematize / dedupe from USWDS settings, which I made a ticket for here.Search form
Laid out the dropdowns horizontally rather than vertically and added explainer copy within the query selection body.
Results view
Aligned the side nav styling and the backlink/new patient search button. Right now, these link back to the same search form, but when we build out the patient search vs the saved query selection, these will link out to their respective locations. Also adds the name of the query in the title section.
Related Issue
Fixes #2589
Additional Information
Anything else the review team should know?