1 | import React from 'react';
|
2 | import {storiesOf} from '@storybook/html';
|
3 |
|
4 | import reactDecorator from '../../.storybook/react-decorator';
|
5 | import Toggle from '../toggle/toggle';
|
6 |
|
7 | storiesOf('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 | ));
|