fix(ui): Updating @cmsgov/design-system v.4 to v.11

[andieswift]

Overview

Story: https://qmacbis.atlassian.net/browse/OY2-29495
Endpoint: See github-actions bot comment

Details

Upgrade @cmsgov/design-system v.4 to v.11

Important Notes

🚫 DONT MERGE 🚫
This change effects the whole frontend, so it cannot be merged until thorough testing takes place.

Implementation Notes

Package Updates

upgraded packages

Name	Old	New	Why
cmsgov/design-system	3.8	11.0	Main Task
bootstrap	3.3	5.3	outdated
react	16	18	design-system req
react-dom	16	18	design-system req
react-router-dom	5.1	5.3	to fix router ts errors
babel/plugin-prop...	7.0	7.12	tried to remove & added back
@types/react...	n/a	n/a	updated types to match their pkg

deleted packages
I removed a number of packages because they are not being used and/or no longer needed due to the upgrades. I used depcheck to find these packages and have tested on the frontend.

Key Differences to Note

Top Nav Bar
Prior there was a purple line if the page had been visited before:

This is no more due to changes in cms-design

Media Queries
The sizes of media queries (screen-xl) has changed slightly. These 2 are screenshots of the same window but you can see the newer on is slightly narrower
Before:

After:

Typology
The sizes for headings, paragraphs and such have changed slightly. I matched the code, but that resulted in some components looking different. (if it was H1 I used the new equivalent heading-3xl, etc)

Example Package Dashboard Text before:

After:

Example Package details before:

After:

Accordions
Padding was removed on the accordion components
here is the FAQ before:

and after:

Test Plan

NOTE before we begin, the styling has changed slightly! In verifying this we don't need to check that the style matches EXACTLY (i.e. this font is 14px and it used to be 16px); but we want to ensure the look is similar and functions the same. i.e. If a button was blue before, it should still be blue

  1. Compare Home Page against Dev home page 
         a. ensure all the same content remains
         b. check the headings are still heading, solid buttons still solid etc
         c. double check the usa banner on the top and footer to make sure they match
         d. check all functionality remains the same
 2. Compare FAQ against Dev FAQ
         a. ensure all the same content remains
         b. check the headings are still heading, solid buttons still solid etc
         c. check all functionality remains the same
 3. login as state user and compare against dev dashboard
          a. ensure all the same content remains 
         b. check the headings are still heading, solid buttons still solid etc
         d. check all functionality remains the same
 4. check package details and compare against dev (repeating same checks as above)
 5. Repeat the same for cms users.

Future Thoughts

We are using @material-ui/core" which is no longer in use; they changed their name to mui. We may want to consider upgrading these components to use mui instead, or see if we can use the cms/design-system in place of them.

[github-actions]

Endpoint URL - Environment not yet deployed, delete this comment and run the Pull Request workflow again after deploy is complete

[anyoussefinia]

New formatting looks better IMO