just-the-commands-man.md

Adding Storybook HTML

In the directory of your choosing run the following to pull down and install Storybook:
```
 npx -p @storybook/cli sb init --type html
```
After install is done kick it off (should open in localhost:6006):
```
 npm run storybook
```
Open the project in your IDE and open file:
```
 .stories/index.stories.js
```

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>')

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>')

Create styles file at root of project:
```
 .styles.css
```
Paste this guy in for the styles (add your own custom style declarations if you want to)!
```
 .callout {
   font-size: 2em;
   background-color: orange;
 }
```
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';
```
Go back to CSS and add a style for the error story!
```
 .callout.-error {
   background-color: red;
 }
```
All should hot reload and you should see component, story, and styles. Check out your Callout component. Hooray!

From the root in your terminal run:

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

Go into ./storybook in your project root and add a file that Storybook will look for to register add-ons
```
 addons.js
```
Add the following to the addons.js file to import the add-on:
```
 import '@storybook/addon-a11y/register';
```

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)