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';
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"/>
17 storiesOf('Button', module
)
18 .add('A Light Button', () => (
19 <Button onClick
={action('clicked')} label
="A Light Button!" className
="light" />
21 .add('A Dark Button', () => (
23 <Button label
="A Dark Button!" className
="dark"/>
26 .add('A Sq Button', () => (
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" />