(#1421) Update to latest storybook

[olitharp-nci]

Pull Request Details

• Replaces webpack 4 with vite
• Changes commonjs file extensions to .cjs from .js
• Touches uswds search, paginagtion, collection, and icon list twig files
• Adds ncids webfonts to css - to help with loading issues when rendering backstop
• Fixes @use when it should be @forward and reference the package name correctly
• Setup static folders in main.js
• Wait for network requests to be done before starting tests.
• Removed footer form cgov_home content
• Removed page options from template without side nav to match current

Closes #1421

Author PR Checklist

Items that the author of the PR is responsible for checking before submitted the PR.

General:

• I have reviewed the acceptance criteria defined in the ticket and ensured the work has been completed.
• The commit message passes all quality commit message standards.
• Unit tests have been updated or created to reflect any javascript changes.
• Storybook scenarios have been updated or created to reflect any html/css/js changes.

Accessibility:

• WCAG 2.1 Level AA requirements have been met.

Development:

• Any new or updated javascript code has 100% unit test coverage.
• New or updated breakpoints have regression images.
• Breaking changes have been thoroughly documented in the PR.

Product Reviewer PR Checklist

Items the product team is responsible for reviewing.

General:

• There are no unexpected or unapproved regression image changes.

• Functionality of interactive elements meet the acceptance criteria.
• The product is visually and functionally the same across the different browsers.

Accessibility:

• AxeDev Tools: there are no new or outstanding accessibility issues introduced in this PR.
• Lighthouse: scores have not noticeably decreased during this PR.
• Wave: there are no new errors or contrast errors introduced in this PR.

Design Reviewer PR Checklist

Items the design team is responsible for reviewing. 


General:

• New or updated features introduced in this PR are developed mobile-first.
• Breakpoint changes and regression images match those breakpoints.
• This PR has been tested in all supported browsers at all breakpoints.

Developer Reviewer PR Checklist

Items the development team is responsible for reviewing.

General:

• New code passes code quality standards set by industry standards.
• The expected Storybook stories have been added or updated for the new or updated feature.
• The expected unit tests have been added or updated for the new or updated feature.

Accessibility:

• VoiceOver: Described content matches with what was expected.
• Keyboard navigation: new or updated features and content are navigable via the keyboard.

[github-actions]

Viewing Information

• The documentation site
• NCIDS JS Documentation
• The storybook site
• The example site

[bryanpizzillo]

Something between the Docker container were tests run, the new Storybook and the Site-wide search text input has introduced a visual difference. The text input is now a bit wider in screen captures. We can see this both in GitHub Actions and locally running within a container. The newest Backstop does not seem to fix it. This difference cannot be seen in the browser when comparing the existing header stories against the updated storybook stories. (They both look exactly the same)

Here is what the bad looks like:

Additionally, testing locally, without Docker, produces the following comparison which shows the two images as basically the same. Running on a Mac vs Docker/Linux will always have slight visual differences, which is why we use Docker so that is why there is a lot of magenta in the diff.

So for now, we are just going to have to accept the updates to the reference images that show the input as a little longer. This means that from a visual regression standpoint any changes accidentally introduced should still cause some change to the input, which would be then be confirmed on the front-end.

There will probably be some edge case where a change to the input would yield the same image with the wider input and pass tests, but visually in a browser would have differences. The chance of this happening will be very low and acceptable given the time spent trying to debug this issue.

[olitharp-nci]

pushes after dev review were only some clean up things and also i wanted to run the backstop workflow a couple more times anyway

[andyvanavery31]

Passes Product review.