openecomp-ui/src/nfvo-components/icon/SVGIcon.stories.js

   1 import React from 'react';
   2 import {storiesOf, action} from '@kadira/storybook';
   3 import {select, text, withKnobs} from '@kadira/storybook-addon-knobs';
   4 import SVGIcon from './SVGIcon.jsx';
   5
   6 const stories = storiesOf('SVGIcon', module);
   7
   8 const iconNames = ['locked',
   9     'pencil',
  10     'plus-circle',
  11     'plus',
  12     'search',
  13     'sliders',
  14     'trash-o',
  15     'unlocked',
  16     'vendor',
  17     'version-controller-lock-closed',
  18     'version-controller-lock-open',
  19     'version-controller-revert',
  20     'version-controller-save',
  21     'version-controller-submit',
  22     'vlm',
  23     'vsp' ];
  24
  25 function colorChanger() {
  26     return {fill: text('Color', '')};
  27 }
  28
  29 function iconName() {
  30     return select('Icon name' , iconNames, iconNames[0]);
  31 }
  32
  33 stories.addDecorator(withKnobs);
  34
  35 stories
  36     .add('icon', () => {
  37         return (
  38             <SVGIcon name={iconName()} style={colorChanger()}/>
  39         );
  40     })
  41     .add('icon with label', () => {
  42         return (
  43             <SVGIcon name={iconName()} label={iconName()} style={colorChanger()}/>
  44         );
  45     })
  46     .add('locked clickable', () => {
  47         return (
  48             <SVGIcon name={iconName()} onClick={action('clicked')} style={colorChanger()}/>
  49         );
  50     });