skyquake/tests/stories/button.js

   1 import React from 'react';
   2 import { storiesOf, action } from '@kadira/storybook';
   3 import Button from '../../framework/widgets/button/rw.button'
   4 import SqButton from '../../framework/widgets/button/sq-button'
   5 import reactToJsx from 'react-to-jsx';
   6 import StyleGuideItem from 'react-style-guide';
   7 import '../../node_modules/react-style-guide/node_modules/highlight.js/styles/github.css';
   8
   9 let sqButtonHTML = ( <div style={{display: 'flex', padding: '10px'}}>
  10         <SqButton  icon="check" label="Normal" className="dark"/>
  11         <SqButton  label="Medium No Icon" size="medium" className="dark"/>
  12         <SqButton size="large"  icon="check" label="Large" className="dark"/>
  13         <SqButton size="large" primary  icon="check" label="Large" className="dark"/>
  14         <SqButton size="large" disabled icon="check" label="Disabled" className="dark"/>
  15     </div>)
  16
  17 storiesOf('Button', module)
  18   .add('A Light Button', () => (
  19     <Button onClick={action('clicked')} label="A Light Button!" className="light" />
  20   ))
  21   .add('A Dark Button', () => (
  22     <StyleGuideItem>
  23     <Button  label="A Dark Button!" className="dark"/>
  24     </StyleGuideItem>
  25   ))
  26   .add('A Sq Button', () => (
  27                              <StyleGuideItem>
  28    <div style={{display: 'flex', margin: '10px 10px 50px 10px'}}>
  29         <SqButton  icon="check" label="Submit" />
  30         <SqButton  label="Medium No Icon" size="medium" />
  31         <SqButton size="large"  icon="check" label="Large" />
  32         <SqButton size="large" primary  icon="check" label="Large" />
  33         <SqButton size="large" disabled icon="check" label="Disabled" />
  34         </div>
  35     </StyleGuideItem>
  36   ));