Each component should have a folder that contains multiple files. For example, a button component might contain the following files:
To create a new component, create a new folder with the component’s name within the storybook/src/components directory and add the above files. Next, add your markup, styles, and logic to the relevant files. Where applicable be sure to use the SCSS variables generated by the design tokens.
To display a component in the UI Library, add a story to the component’s stories.js file. A story is a function that returns component markup - either a framework component or HTML markup. Storybook will see this and automatically add it to the UI. Stories should show examples of a component’s different states, functionalities, etc. For more information on writing stories check out the Storybook CSF documentation