Adding Storybook HTML

1. In the directory of your choosing run the following to pull down and install Storybook:

    npx -p @storybook/cli sb init --type html
   

2. After install is done kick it off (should open in localhost:6006):

    npm run storybook
   

3. Open the project in your IDE and open file:

    .stories/index.stories.js
   

4. Add a new component and story in your stories file (after the other storiesOf() on a new line):

    storiesOf('Callout', module)
      .add('default', () => '<div class="callout"><p>Important information</p></div>')
   

5. Add another story for errors (after the .add() so it's chained)!

    .add('error', () => '<div class="callout"><p>Important information oops an error</p></div>')
   

6. Create styles file at root of project:

    .styles.css
   

7. Paste this guy in for the styles (add your own custom style declarations if you want to)!

    .callout {
      font-size: 2em;
      background-color: orange;
    }
   

8. Go back to your ./stories/index.stories.js and make sure to import the CSS at the top of the page via:

    // from local path
    import './../styles.css';
   

9. Go back to CSS and add a style for the error story!

    .callout.-error {
      background-color: red;
    }
   

10. All should hot reload and you should see component, story, and styles. Check out your Callout component. Hooray!

---

Add an add-on (Bonus round)

1. Add an accessibility add-on. First stop your project if running (Ctrl-C yo).

2. From the root in your terminal run:

     npm install @storybook/addons @storybook/addon-a11y
   

3. Go into ./storybook in your project root and add a file that Storybook will look for to register add-ons

    addons.js
   

4. Add the following to the addons.js file to import the add-on:

    import '@storybook/addon-a11y/register';
   

5. Back in your index.stories.js add the following modify to look like so (the only difference on the first line is adding addDecorator):

    import { storiesOf, addDecorator } from '@storybook/html';
    import { withA11y } from '@storybook/addon-a11y';
    addDecorator(withA11y)
   

6. Restart server! Check it out. Accessibility info now in right bottom pane.

7. Bonus bonus round try to break accessibility with a new style or two!