yearofthedanYOT Web Components
I'm tired of rewriting buttons and fields all the time. This is a playground for trying common components and patterns.
Tasks
Testing / Quality
| cmd | description |
|---|---|
yarn lint |
lints the src and storybook |
yarn format |
prettier the code |
yarn test |
runs component tests |
yarn storybook |
runs the storybook |
yarn build-storybook |
builds the storybook site for deploying |
yarn deploy-storybook |
publishes the storybook site as a github page |
Note on testing
The goal is to use the dom testing library due to its strong conventions which help to enforce accessible semantic design. Plus this is a standard in multiple front end libraries, so following the same syntax reduces mental overhead.
That being said, support for web components is early days and the package we're using, while a great start, has some limitations (some of this is likely jsdom issues). So far most issues have been pretty minor. Mostly the feedback from failing tests isn't as clear.
To demo
WIP, but for now yarn storybook. I'll get something deployed soon too.
Inspiration
- Stumbled across Duetds in a search for different Heading patterns to toy with.
Palette
Background Colour Accent Text on Background Colour Text on Background Colour
Surface Colour Accent Text on Background Colour Text on Surface Colour
Accent Colour Second Accent Colour
Alert Colour Text On Alert Colour
Disabled Colour Text On Disabled Colour