yot-web-components

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