align search form and results page with designs

[fzhao99]

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:

• 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 Standardize the handling of state variables, the passing of setters, and the use of constants in the TEFCA viewer #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.

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?

[fzhao99]

The diff here is struggling a bit but the only thing added here was lifting up <SiteAlert> up a level and adding main-container to the first div

[fzhao99]

Adding this check based on a conversation I had with @mikang as documented here

[robertandremitchell]

Overall, I really like this format. I'm gonna read through more of the docs on the principles today, but I think it makes a lot of sense and will make managing UI and backend changes a lot more seamless than it has been.

Thanks so much for your work in starting this refactoring.

[m-goggins]

I'm taking a look at this PR, just taking my time to read through the docs to make sure I understand the changes you are proposing.