Mc core style import swap

[micahchiang]

DO NOT MERGE

This PR attempts to swap the core style import from formation to css-library.

Sibling css-library PR - department-of-veterans-affairs/component-library#1359

Note on Injected Header style changes
The swap from formation to css-library introduces a change to how utility classes are given values. Previously in Formation, utility classes used a base multiple of 8px. In css-library, utility classes rely on rem values. This matters because Teamsites still use 10px as a root font size.. What this means is that utility classes needed to be updated for various element class lists. This can be seen in the changes files where for example some elements went from something like vads-u-padding--2 to vads-u-padding--3. The implication here is that computed values for the injected header will be changing by a minuscule value: in most instances, 0.5px. In some cases, 1px.

Are you removing, renaming or moving a folder in this PR?

• No, I'm not changing any folders (skip to TeamSites and delete the rest of this section)
• Yes, I'm removing, renaming or moving a folder

If the folder you changed contains a manifest.json, search for its entryName in the content-build registry.json (the entryName there will match).

If an entry for this folder exists in content-build and you are:

1. Deleting a folder:

   1. First search vets-website for all instances of the entryName in your manifest.json and remove them in a separate PR. Look particularly for references in src/applications/static-pages/static-pages-entry.js and src/platform/forms/constants.js. If you do not do this, other applications will break!
      • Add the link to your merged vets-website PR here
   2. Then, Delete the application entry in registry.json and merge that PR before this one
      • Add the link to your merged content-build PR here

2. Renaming or moving a folder: Update the entry in the registry.json, but do not merge it until your vets-website changes here are merged. The content-build PR must be merged immediately after your vets-website change is merged in to avoid CI errors with content-build (and Tugboat).

Did you change site-wide styles, platform utilities or other infrastructure?

• No
• Yes, and I used the proxy-rewrite steps to test the injected header scenario

Summary

• (Summarize the changes that have been made to the platform)
• (If bug, how to reproduce)
• (What is the solution, why is this the solution)
• (Which team do you work for, does your team own the maintenance of this component?)
• (If using a flipper, what is the end date of the flipper being required/success criteria being targeted)

Related issue(s)

• Formation Deprecation - Core import swap vets-design-system-documentation#3397

Testing done

• Describe what the old behavior was prior to the change
• Describe the steps required to verify your changes are working as expected
• Describe the tests completed and the results
• _Exclusively stating 'Specs and automated tests passing' is NOT acceptable as appropriate testing
• Optionally, provide a link to your test plan and test execution records

Screenshots

Profile

Production:

Local:

Production:

Local:

Production:

Local:

Production:

Local:

Production:

Local:

Production:

Local:

Production:

Local:

Production:

Local:

MHV, local on left, staging on right

Combined Debt Portal, local on left staging on right

Claims Status, local on left, staging on right

Injected header, local left, production right

Mock Form Flow, local left, staging right

	Before	After
Mobile
Desktop

	Before	After
Mobile
Desktop

	Before	After
Mobile
Desktop

	Before	After
Mobile
Desktop

What areas of the site does it impact?

(Describe what parts of the site are impacted if code touched other areas)

Acceptance criteria

Quality Assurance & Testing

• I fixed|updated|added unit tests and integration tests for each feature (if applicable).
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
• Linting warnings have been addressed
• Documentation has been updated (link to documentation *if necessary)
• Screenshot of the developed feature is added
• Accessibility testing has been performed

Error Handling

• Browser console contains no warnings or errors.
• Events are being sent to the appropriate logging solution
• Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

• Did you login to a local build and verify all authenticated routes work as expected with a test user

Requested Feedback

(OPTIONAL) What should the reviewers know in addition to the above. Is there anything specific you wish the reviewer to assist with. Do you have any concerns with this PR, why?

[micahchiang]

needed because we're still relying on uswds v1 grid styles while we get off of Formation the repo.

[micahchiang]

For the sake of keeping the mental model relatively simple, I'm just moving our grid classes into shame for the time being. I know I know, we want to get rid of shame.scss eventually. This makes testing easier. These grid classes will 100% be moved to css-library when we have the capacity to update all of grid.

[micahchiang]

Foundation sets these on the element selector. Without these styles, the image in .va-banner-container right above the footer won't sit flush to the rest of the footer. Also without these, images in promo blocks will create some minor content shift in elements above them.

[micahchiang]

needed because teamsites still has a root font-size of 10px

[micahchiang]

This and the below adjustment are needed because teamsites still has a root font-size of 10px and updating these classes gets us as close as we can get with css-library utilities.

[micahchiang]

It seems like some of the display logic in the mobile injected header was lost when formation core was removed, which led to the expanded gov banner always being displayed. The changes in this file add back in the toggle functionality and update the aria-hidden attribute as needed.