Component status

The sidebar labels a component In Progress or In Review. With neither label, the component is done and the sidebar shows the name alone.

The labels come from Storybook tags. Hosted Storybook hides In Progress, In Review, and local-only entries. Local Storybook and the npm package still include the component at either status.

In progress

A component starts here. It inherits in-progress from .storybook/preview.js, so leave tags unset while you build it and write the guidelines.

Move it to In Review when the checks on Contribute are complete. Set the same tags on the stories meta and on the guidelines <Meta>:

tags: ['!in-progress', 'in-review']

!in-progress removes the inherited tag. The sidebar label becomes In Review.

In review

An engineer checks the component in the Easol app. Install this branch, render the component on a real page, and confirm it matches Storybook.

When the check passes, remove in-review in both places and keep in-progress removed:

tags: ['!in-progress']

The sidebar then shows the name alone. If the check fails, comment on the pull request and leave the tags unchanged.

To move it back to In Progress, delete that tags line in both places.