some usdws research.

usdwsresearch.md

U.S. Web Design System (USWDS) Research

My favorite component so far from USWDS

https://designsystem.digital.gov/components/in-page-navigation/

Templates: (404) (Documentation) (Landing) (Authentication) (Form) (Landing page)

https://designsystem.digital.gov/templates/authentication-pages/create-account

Fork your own instance of the publicly published USWDS figma:

https://www.figma.com/community/file/836611771720754351

USWDS implementation section:

USWDS is compatible with many ui frameworks.
You can see some different open source frameworks implemented in here: link

Storybook implementations using react

• Comet has a storybook charts and data vis built in.
• TrussWorks has the most built out storybook

Trussworks lets you npm install with a few code change updates.

• changes you need to make when you set it up

Comet, the alternative storybook has a starter project that also lets you import and it has other stuff included. https://github.com/MetroStar/comet-starter

USWDS is ultimately not about its code

The underlying concepts are most important:
https://designsystem.digital.gov/maturity-model
https://designsystem.digital.gov/design-principles

Below are things that stood out reading design principles:

1. Add the USWDS banner component. This component shows your site is an official government website and explains the benefits of secure connections.
2. https://playbook.cio.gov/
3. https://designsystem.digital.gov/patterns/complete-a-complex-form/

Other links:

1. How to find out what 508 compliance is needed:
   https://www.section508.gov/art/#/ict-listing-page
   video - https://www.section508.gov/training/art/introducing-art
2. they have monthly calls! https://designsystem.digital.gov/about/monthly-calls

More Info:

run accessability testing from terminal
npx pa11y http://localhost:5173

Workflow:

1. design system - uswds-figma
2. components (should comply) - https://designsystem.digital.gov/components/accordion/
3. framework specific - https://designsystem.digital.gov/documentation/implementations
4. storybook (should comply) - https://trussworks.github.io/react-uswds/?path=/docs/components-accordion--docs

Below is stuck out because maintaining versions and whatnot possibly expensive
5. Your own fork version of the figma. - or make your own storybook and compose storybooks
6. Your own fork version of the story book packaged as an npm package. Warning Apache 2.0 license.
7. chromatic storybook figma integration is an option if no figma exists, but has a cost for deploying to chromatic.

Starter project with trussworks/react-uswds hookedup: https://github.com/MichaelDimmitt/trussworks-storybook-starter

Pros and Cons

1. images / assets
2. javascriptify

What are the maintenance costs of what is being proposed here?
Consider composing storybooks: https://storybook.js.org/docs/sharing/storybook-composition