Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

yot-web-components

yearofthedan1891.27.4

I'm tired of rewriting buttons and fields all the time. This is a playground for trying common components and patterns.

readme

YOT 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