Storybook

Storybook is an open source tool for building UI components in isolation.

It is an integral part of our component-library maintenance process and is invaluable for consumers of the component library to quickly see what combination of props are available at a component level.

Storybook can be run locally when developing the system, and is also deployed to our test environment for each branch pushed to GitHub. This allows for sharing a preview of what an upcoming change might look like with team members and other interested parties.

Plugins

There is a whole ecosystem of plugins and add-ons to further improve the offering of storybook. We have added a number of storybook add-ons to our instance including basic accessibility checks, colour blindness simulation and responsive screen size previews.

At the top of each component detail page in the Mesh docs site, there is a link to its storybook page, as well as Playroom, GitHub and npm.

Theme support

Our storybook supports each of the brands defined in our Theme component. To preview how a component looks for a different brand, click the Pencil icon to choose from our supported brands. This selection is persisted as you navigate from story to story.