From 08dd269769f9c77585f466a42bc5735bdb9c1c0f Mon Sep 17 00:00:00 2001
From: Abdallah Samman <sammanabdallah@gmail.com>
Date: Tue, 4 Dec 2018 23:17:02 +0200
Subject: [PATCH] add checkboxes instead of select input to table and
 containers stories

---
 docs/containers.stories.js | 21 ++++++++-------------
 docs/table.stories.js      | 12 ++++++------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/docs/containers.stories.js b/docs/containers.stories.js
index 9b92e60..aacf45a 100644
--- a/docs/containers.stories.js
+++ b/docs/containers.stories.js
@@ -1,25 +1,20 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, select,
+  withKnobs, boolean,
 } from '@storybook/addon-knobs';
 
 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');
+  const withTitle = boolean('with-title', false) ? 'with-title' : '';
+  const isCenter = boolean('is-center', false) ? 'is-center' : '';
+  const isRight = boolean('is-right', false) ? 'is-right' : '';
+  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
+  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
+  const selectedClasses = [withTitle, isCenter, isRight, isDark, isRounded];
 
-  return `<div class="${selectedClass}">
+  return `<div class="container ${selectedClasses.join(' ')}">
       <p class="title">Container</p>
       <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
   </div>`;
diff --git a/docs/table.stories.js b/docs/table.stories.js
index 082120a..fdd571e 100644
--- a/docs/table.stories.js
+++ b/docs/table.stories.js
@@ -1,18 +1,18 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, select,
+  withKnobs, boolean,
 } from '@storybook/addon-knobs';
 
 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');
+  const isBordered = boolean('is-bordered', true) ? 'is-bordered' : '';
+  const isCentered = boolean('is-centered', false) ? 'is-centered' : '';
 
-  return `<table class="${selectedClass}" style="margin:15px 4px 5px 4px">
+  const selectedClasses = [isBordered, isCentered];
+
+  return `<table class="table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
         <thead>
           <tr>
             <th>Table</th>