chore(ZNTA-2119): add storybook knobs addon

Includes a button builder story that demonstrates use of the knobs addon.
zanata · Aug 8, 2017 · 2367adf · 2367adf
1 parent 4c8fbd0
commit 2367adf
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git a/server/zanata-frontend/src/frontend/.storybook-editor/addons.js b/server/zanata-frontend/src/frontend/.storybook-editor/addons.js
@@ -1 +1,2 @@
 import '@storybook/addon-actions/register'
+import '@storybook/addon-knobs/register'
diff --git a/server/zanata-frontend/src/frontend/app/editor/components/Button/Button.story.js b/server/zanata-frontend/src/frontend/app/editor/components/Button/Button.story.js
@@ -1,13 +1,16 @@
 import React from 'react'
+import cx from 'classnames'
 import { storiesOf, action } from '@storybook/react'
 import { withInfo } from '@storybook/addon-info'
 import { host } from 'storybook-host'
+import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'
 import Button from '.'
 
 /*
  * See .storybook/README.md for info on the component storybook.
  */
 storiesOf('Button', module)
+  .addDecorator(withKnobs)
   .addDecorator(host({
     title: 'Button',
     align: 'center middle'
@@ -64,5 +67,38 @@ storiesOf('Button', module)
       Button Button--small u-rounded Button--primary
     </Button>
   )))
+  .add('BUTTON BUILDER', withInfo({
+    text: 'Use KNOBS tab to adjust the settings, ' +
+      'then copy your code from Story Source',
+    maxPropsIntoLine: 1,
+    maxPropStringLength: 500
+  })(() => {
+    return (
+      <Button title={text('title (tooltip)', 'Click Me')}
+        disabled={boolean('disabled', false)}
+        onClick={action('onClick')}
+        className={cx('Button',
+          select('colour style', [
+            'Button--default',
+            'Button--primary',
+            'Button--secondary',
+            'Button--success',
+            'Button--unsure',
+            'Button--neutral',
+            'Button--warning',
+            'Button--danger'
+          ], 'Button--default'),
+          {
+            'is-active': boolean('.is-active', false),
+            'u-rounded': boolean('.u-rounded', false),
+            'Button--snug': boolean('.Button--snug', false),
+            'Button--small': boolean('.Button--small', false),
+            'Button--invisible': boolean('.Button--invisible', false)
+          }
+        )}>
+          {text('Content', 'Click Me')}
+      </Button>
+    )
+  }))
 
 // TODO add more variety of styles. See if there is a stylesheet to compare to
diff --git a/server/zanata-frontend/src/frontend/package.json b/server/zanata-frontend/src/frontend/package.json
@@ -29,6 +29,7 @@
   "devDependencies": {
     "@storybook/addon-actions": "3.2.0",
     "@storybook/addon-info": "3.2.0",
+    "@storybook/addon-knobs": "3.2.0",
     "@storybook/addons": "3.2.0",
     "@storybook/react": "3.2.3",
     "autoprefixer-loader": "3.2.0",

diff --git a/server/zanata-frontend/src/frontend/yarn.lock b/server/zanata-frontend/src/frontend/yarn.lock
@@ -25,7 +25,7 @@
     react-addons-create-fragment "^15.5.3"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-knobs@^3.0.0":
+"@storybook/addon-knobs@3.2.0", "@storybook/addon-knobs@^3.0.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-3.2.0.tgz#675b6648034996b1c2aa57fd6d318155d7e511bc"
   dependencies: