Skip to content

Instantly share code, notes, and snippets.

@bessfernandez
Last active March 26, 2019 18:18
Show Gist options
  • Save bessfernandez/9dd8475fd2a4faf25dbac84a3b01fd9a to your computer and use it in GitHub Desktop.
Save bessfernandez/9dd8475fd2a4faf25dbac84a3b01fd9a to your computer and use it in GitHub Desktop.

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment