UNPKG

1.36 kBJavaScriptView Raw
1import React from 'react';
2import {storiesOf} from '@storybook/html';
3
4import reactDecorator from '../../.storybook/react-decorator';
5import Toggle from '../toggle/toggle';
6
7storiesOf('Components|Toggle', module).
8 addParameters({
9 notes: 'Displays a checkbox as an animated on/off toggle.'
10 }).
11 addDecorator(reactDecorator()).
12 add('basic', () => (
13 <div>
14 <div>
15 <div>Unchecked by default</div>
16 <Toggle/>
17 </div>
18 <div>
19 <div>Checked by default</div>
20 <Toggle defaultChecked/>
21 </div>
22 <div>
23 <div>Disabled unchecked</div>
24 <Toggle disabled/>
25 </div>
26 <div>
27 <div>Disabled checked</div>
28 <Toggle disabled defaultChecked/>
29 </div>
30 <div>
31 <div>Pale unchecked by default</div>
32 <Toggle pale/>
33 </div>
34 <div>
35 <div>Pale checked by default</div>
36 <Toggle pale defaultChecked/>
37 </div>
38 <div>
39 <div>Pale disabled unchecked</div>
40 <Toggle pale disabled/>
41 </div>
42 <div>
43 <div>Pale disabled checked</div>
44 <Toggle pale disabled defaultChecked/>
45 </div>
46 <div>
47 <div>With label</div>
48 <Toggle>Label</Toggle>
49 </div>
50 <div>
51 <div>With label on the left</div>
52 <Toggle leftLabel="Label"/>
53 </div>
54 </div>
55 ));