📍Release stable beta versions of key Web Components

brunerae commented 1 year ago

What

To make it easier to stay up-to-date with the Design System, we'll implement Web Components. In these first four months, we'll lay the groundwork for doing so.

Done when

We understand the security implications to providing web components
We've identified which framework we want to use
We've established beta partners who can help us test
We have a sequencing plan for how this is applied to Components
We've alpha tested with one Component

What we're looking for

Use the USWDS Product values to influence our approach.

Native or as close to native as possible. Helps us avoid tie in to a specific framework or paradigm.
Lightweight and performant.
Track record of reliable maintenance. For reliability & security.
Easy for users to stay up-to-date with the design system. Minimize markup changes.
SCSS support. For theme settings.

2 months

Based on internal mural board FY24 Feb-May Product Increment Planning 🔒.

Jan-Feb

[x] uswds/uswds-team#305
[x] uswds/uswds#5719
[x] uswds/uswds#5639

4 months

Mar-Apr

[x] uswds/uswds#5640
[x] Create a separate repo for alpha/beta of web components.
[x] uswds/uswds#5874
[ ] uswds/uswds-sandbox#134
[x] uswds/uswds#5895
[x] uswds/uswds#5896
[x] uswds/uswds#5706
[x] uswds/uswds#5729
[x] uswds/uswds#5862
[ ] uswds/uswds-proposals#7
[x] Create new repo for Web Components - uswds/web-components

6 months

[ ] uswds/web-components#39
[ ] uswds/web-components#42
[ ] Prototype form input uswds/web-components#17
[ ] uswds/web-components#16
[x] uswds/web-components#49
[x] uswds/web-components#50
[ ] uswds/web-components#51

8 months

TK

12 months

TK

anselmbradford commented 1 year ago

Hello, I work on the CFPB design system. How might I follow your work on this issue? Will updates be posted here? Also, are you leaning toward Stencil.js for the framework? Thanks!

mejiaj commented 9 months ago

@anselmbradford appreciate your interest. Are you also using web components? StencilJS is one of the tools we're looking at.

We'll be using this issue to capture all related work. There's also the USWDS Public Roadmap if you're interested in seeing all of the things we're working on.

anselmbradford commented 9 months ago

Are you also using web components?

Not currently, but we've looked into it and are looking to align with your work as it develops. Thanks!

smorrisods commented 8 months ago

Hi there, Scott from the Ontario Design System team here. We're working on web components for our Design System and it has been quite a journey but the tl;dr; is they are pretty awesome! If anyone is interested I'd be happy to connect over this. For more information see:

We're constantly improving our documentation, adding more components, refining our patterns and design, and squishing bugs. We're using Stencil.JS as our toolchain and release everything as NPM packages that target HTML, Angular, and React.

Cheers!

mejiaj commented 7 months ago

Hi there, Scott from the Ontario Design System team here. We're working on web components for our Design System and it has been quite a journey but the tl;dr; is they are pretty awesome! If anyone is interested I'd be happy to connect over this. For more information see:

Web components | Ontario Design System

Ontario Design System Web Component Docs

We're constantly improving our documentation, adding more components, refining our patterns and design, and squishing bugs. We're using Stencil.JS as our toolchain and release everything as NPM packages that target HTML, Angular, and React.

Cheers!

Hello @smorrisods,

Absolutely, we'd be interesting in connecting! Would you kindly email uswds@gsa.gov so we can get something set up?

shaal commented 7 months ago

Great article by Cory LaViska, author of Shoelace web components library, on Lit - https://www.abeautifulsite.net/posts/building-custom-elements-with-a-library/

uswds / uswds-team