Merge pull request #18 from edx/sarahkf/add-knobs

Setting up storybook knobs

.storybook/addons.js

 import '@storybook/addon-options/register';
+import '@storybook/addon-knobs/register';

.storybook/config.js

@@ -7,7 +7,7 @@ import CssJail from '../src/CssJail';
 setOptions({
   name: '💎 PARAGON',
   url: 'https://github.com/edx/paragon',
-  showDownPanel: false,
+  showDownPanel: true,
 });
 
 const req = require.context('../src', true, /\.stories\.jsx$/);

package.json

@@ -25,6 +25,7 @@
     "react-transition-group": "^1.1.2"
   },
   "devDependencies": {
+    "@storybook/addon-knobs": "^3.2.0",
     "@storybook/addon-options": "^3.1.6",
     "@storybook/addon-storyshots": "^3.1.7",
     "@storybook/react": "3.1.9",

src/CheckBox/CheckBox.stories.jsx

@@ -2,10 +2,12 @@
 /* eslint-disable no-console */
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 
 import CheckBox from './index';
 
 storiesOf('CheckBox', module)
+  .addDecorator(withKnobs)
   .add('basic usage', () => (
     <CheckBox
       name="checkbox"
@@ -20,7 +22,7 @@ storiesOf('CheckBox', module)
       describedBy="checkbox"
       label="you cannot check me out"
       checked="false"
-      disabled
+      disabled={boolean('disabled', true)}
     />
   ))
   .add('default checked', () => (

src/InputText/InputText.stories.jsx

 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { withKnobs, text } from '@storybook/addon-knobs';
 
 import InputText from './index';
 
 storiesOf('InputText', module)
+  .addDecorator(withKnobs)
   .add('minimal usage', () => (
     <InputText
       name="name"
-      label="First Name"
+      label={text('label', 'First Name')}
       value="Foo Bar"
     />
   ))
@@ -16,7 +18,7 @@ storiesOf('InputText', module)
     <InputText
       name="username"
       label="Username"
-      description="The unique name that identifies you throughout the site."
+      description={text('description', 'The unique name that identifies you throughout the site.')}
       validator={(value) => {
         let feedback = { isValid: true };
         if (value.length < 3) {