Add Storybook Knobs

docs/balloons.stories.js

@@ -1,5 +1,15 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, select,
+} from '@storybook/addon-knobs';
 
-storiesOf('Balloons', module)
-  .add('.balloon.from-left', () => '<div class="balloon from-left"> <p>Hello NES.css</p> </div>')
-  .add('.balloon.from-right', () => '<div class="balloon from-right"> <p>Hello NES.css</p> </div>');
+const stories = storiesOf('Ballons', module);
+stories.addDecorator(withKnobs);
+
+stories.add('balloon', () => {
+  const selectedClass = select('class', {
+    'balloon from-left': 'balloon from-left',
+    'balloon from-right': 'balloon from-right',
+  }, 'balloon from-left');
+  return `<div class="${selectedClass}"> <p>Hello NES.css</p> </div>`;
+});

docs/buttons.stories.js

@@ -1,8 +1,18 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, select,
+} from '@storybook/addon-knobs';
 
-storiesOf('Buttons', module)
-  .add('button.btn', () => ' <button type="button" class="btn">Normal</button>')
-  .add('button.btn.is-primary', () => '<button type="button" class="btn is-primary">Primary</button>')
-  .add('button.btn.is-success', () => '<button type="button" class="btn is-success">Success</button>')
-  .add('button.btn.is-warning', () => '<button type="button" class="btn is-warning">Warning</button>')
-  .add('button.btn.is-error', () => '<button type="button" class="btn is-error">Error</button>');
+const stories = storiesOf('Buttons', module);
+stories.addDecorator(withKnobs);
+
+stories.add('button', () => {
+  const extraClass = select('class', {
+    btn: 'btn',
+    'btn is-primary': 'btn is-primary',
+    'btn is-success': 'btn is-success',
+    'btn is-warning': 'btn is-warning',
+    'btn is-error': 'btn is-error',
+  }, 'btn');
+  return `<button type="button" class="btn ${extraClass}">Normal</button>`;
+});

docs/containers.stories.js

@@ -1,35 +1,26 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, select,
+} from '@storybook/addon-knobs';
 
-storiesOf('Containers', module)
-  .add('.container.with-title', () => `<div class="container with-title">
-          <p class="title">Container</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-      </div>`)
-  .add('.container.with-title.is-center', () => `<div class="container with-title is-center">
-          <p class="title">Container.is-center</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-      </div>`)
-  .add('.container.with-title.is-right', () => `<div class="container with-title is-right">
-          <p class="title">Container.is-right</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-        </div>`)
-  .add('.container.with-title.is_dark', () => `<div class="container with-title is-dark">
-          <p class="title">Container</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-      </div>`)
-  .add('.container.with-title.is-center.is-dark', () => `<div class="container with-title is-center is-dark">
-          <p class="title">Container.is-center</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-      </div>`)
-  .add('.container.with-title.is-right.is-dark', () => `<div class="container with-title is-right is-dark">
-          <p class="title">Container.is-right</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-        </div>`)
-  .add('.container.is-rounded', () => `<div class="container is-rounded">
-          <p class="title">Container.is-right</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-        </div>`)
-  .add('.container.is-rounded.is-dark', () => `<div class="container is-rounded is-dark">
-          <p class="title">Container.is-right</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-        </div>`);
+const stories = storiesOf('Containers', module);
+stories.addDecorator(withKnobs);
+
+stories.add('container', () => {
+  const selectedClass = select('class', {
+    container: 'container',
+    'container with-title': 'container with-title',
+    'container with-title is-center': 'container with-title is-center',
+    'container with-title is-right': 'container with-title is-right',
+    'container with-title is-dark': 'container with-title is-dark',
+    'container with-title is-center is-dark': 'container with-title is-center is-dark',
+    'container with-title is-right is-dark': 'container with-title is-right is-dark',
+    'container is-rounded': 'container is-rounded',
+    'container is-rounded is-dark': 'container is-rounded is-dark',
+  }, 'container');
+
+  return `<div class="${selectedClass}">
+      <p class="title">Container</p>
+      <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+  </div>`;
+});

docs/icons.stories.js

@@ -1,26 +1,36 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, select,
+} from '@storybook/addon-knobs';
 
-storiesOf('Icons', module)
-  .add('icon.twitter', () => '<i class="icon twitter"></i>')
-  .add('icon.twitter.is-medium', () => '<i class="icon twitter is-medium"></i>')
-  .add('icon.twitter.is-large', () => '<i class="icon twitter is-large"></i>')
-  .add('icon.facebook', () => '<i class="icon facebook"></i>')
-  .add('icon.facebook.is-medium', () => '<i class="icon facebook is-medium"></i>')
-  .add('icon.facebook.is-large', () => '<i class="icon facebook is-large"></i>')
-  .add('icon.github', () => '<i class="icon github"></i>')
-  .add('icon.github.is-medium', () => '<i class="icon github is-medium"></i>')
-  .add('icon.github.is-large', () => '<i class="icon github is-large"></i>')
-  .add('icon.youtube', () => '<i class="icon youtube"></i>')
-  .add('icon.youtube.is-medium', () => '<i class="icon youtube is-medium"></i>')
-  .add('icon.youtube.is-large', () => '<i class="icon youtube is-large"></i>')
-  .add('icon.close', () => '<i class="icon close"></i>')
-  .add('icon.close.is-medium', () => '<i class="icon close is-medium"></i>')
-  .add('icon.close.is-large', () => '<i class="icon close is-large"></i>')
-  .add('octocat animate', () => '<i class="octocat animate"></i>')
-  .add('icon.trophy', () => '<i class="icon trophy"></i>')
-  .add('icon.trophy is-medium', () => '<i class="icon trophy is-medium"></i>')
-  .add('icon.trophy is-large', () => '<i class="icon trophy is-large"></i>')
-  .add('nes-logo', () => '<i class="nes-logo"></i>')
-  .add('nes-jp-logo', () => '<i class="nes-jp-logo"></i>')
-  .add('snes-logo', () => '<i class="snes-logo"></i>')
-  .add('snes-jp-logo', () => '<i class="snes-jp-logo"></i>');
+const stories = storiesOf('Icons', module);
+stories.addDecorator(withKnobs);
+
+stories.add('icon', () => {
+  const selectedClass = select('class', {
+    'icon twitter': 'icon twitter',
+    'icon twitter is-medium': 'icon twitter is-medium',
+    'icon twitter is-large': 'icon twitter is-large',
+    'icon facebook': 'icon facebook',
+    'icon facebook is-medium': 'icon facebook is-medium',
+    'icon facebook is-large': 'icon facebook is-large',
+    'icon github': 'icon github',
+    'icon github is-medium': 'icon github is-medium',
+    'icon github is-large': 'icon github is-large',
+    'icon youtube': 'icon youtube',
+    'icon youtube is-medium': 'icon youtube is-medium',
+    'icon youtube is-large': 'icon youtube is-large',
+    'icon close': 'icon close',
+    'icon close is-medium': 'icon close is-medium',
+    'icon close is-large': 'icon close is-large',
+    'octocat animate': 'octocat animate',
+    'icon trophy': 'icon trophy',
+    'icon trophy is-medium': 'icon trophy is-medium',
+    'icon trophy is-large': 'icon trophy is-large',
+    'nes-logo': 'nes-logo',
+    'nes-jp-logo': 'nes-jp-logo',
+    'snes-logo': 'snes-logo',
+    'snes-jp-logo': 'snes-jp-logo',
+  }, 'icon twitter');
+  return `<i class="${selectedClass}"></i>`;
+});

docs/inputs.stories.js

@@ -1,7 +1,12 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, select,
+} from '@storybook/addon-knobs';
 
-storiesOf('Inputs', module)
-  .add('input.radio', () => `
+const stories = storiesOf('Inputs', module);
+stories.addDecorator(withKnobs);
+
+stories.add('input.radio', () => `
       <label>
         <input type="radio" class="radio" name="answer" checked />
         <span>Yes</span>
@@ -14,11 +19,13 @@ storiesOf('Inputs', module)
         <input type="checkbox" class="checkbox" checked />
         <span>Enable</span>
       </label>`)
-  .add('input.input', () => `
-        <input type="text" id="name_field" class="input">`)
-  .add('input.input.is-success', () => `
-        <input type="text" class="input is-success" placeholder="NES.css">`)
-  .add('input.input.is-warning', () => `
-        <input type="text" class="input is-warning" placeholder="8bit.css">`)
-  .add('input.input.is-error', () => `
-        <input type="text" class="input is-error" placeholder="awesome.css">`);
+  .add('input', () => {
+    const selectedClass = select('class', {
+      input: 'input',
+      'input is-success': 'input is-success',
+      'input is-warning': 'input is-warning',
+      'input is-error': 'input is-error',
+    }, 'input');
+
+    return `<input type="text" id="name_field" class="${selectedClass}" placeholder="NES.css">`;
+  });

docs/table.stories.js

@@ -1,8 +1,18 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, select,
+} from '@storybook/addon-knobs';
 
-storiesOf('Tables', module)
-  .add('table.table', () => `
-      <table class="table" style="margin:15px 4px 5px 4px">
+const stories = storiesOf('Tables', module);
+stories.addDecorator(withKnobs);
+
+stories.add('table', () => {
+  const selectedClass = select('class', {
+    'table is-bordered': 'table is-bordered',
+    'table is-bordered is-centered': 'table is-bordered is-centered',
+  }, 'table is-bordered');
+
+  return `<table class="${selectedClass}" style="margin:15px 4px 5px 4px">
         <thead>
           <tr>
             <th>Table</th>
@@ -22,49 +32,5 @@ storiesOf('Tables', module)
             <td>Thou hast had a good night</td>
           </tr>
         </tbody>
-      </table>`)
-  .add('table.table.is-bordered', () => `
-      <table class="table is-bordered" style="margin:15px 4px 5px 4px">
-        <thead>
-          <tr>
-            <th>Table</th>
-            <th>Table.is-bordered</th>
-            <th>Table.is-centered</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-            <td>Thou hast had a good night</td>
-          </tr>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-            <td>Thou hast had a good night</td>
-          </tr>
-        </tbody>
-      </table>`)
-  .add('table.table.is-bordered.is-centered', () => `
-      <table class="table is-bordered is-centered" style="margin:15px 4px 5px 4px">
-        <thead>
-          <tr>
-            <th>Table</th>
-            <th>Table.is-bordered</th>
-            <th>Table.is-centered</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-            <td>Thou hast had a good night</td>
-          </tr>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-            <td>Thou hast had a good night</td>
-          </tr>
-        </tbody>
-      </table>
-  `);
+      </table>`;
+});