diff options
Diffstat (limited to 'uidev/src/stories/toggle.stories.tsx')
-rw-r--r-- | uidev/src/stories/toggle.stories.tsx | 76 |
1 files changed, 0 insertions, 76 deletions
diff --git a/uidev/src/stories/toggle.stories.tsx b/uidev/src/stories/toggle.stories.tsx deleted file mode 100644 index 021658d21..000000000 --- a/uidev/src/stories/toggle.stories.tsx +++ /dev/null | |||
@@ -1,76 +0,0 @@ | |||
1 | import { observable } from 'mobx'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { v4 as uuid } from 'uuid'; | ||
4 | |||
5 | import { Toggle } from '@meetfranz/forms'; | ||
6 | import { storiesOf } from '../stores/stories'; | ||
7 | |||
8 | interface IStoreArgs { | ||
9 | value?: boolean; | ||
10 | checked?: boolean; | ||
11 | label?: string; | ||
12 | id?: string; | ||
13 | name?: string; | ||
14 | disabled?: boolean; | ||
15 | error?: string; | ||
16 | } | ||
17 | |||
18 | const createStore = (args?: IStoreArgs) => | ||
19 | observable({ | ||
20 | id: `element-${uuid()}`, | ||
21 | name: 'toggle', | ||
22 | label: 'Label', | ||
23 | value: true, | ||
24 | checked: false, | ||
25 | disabled: false, | ||
26 | error: '', | ||
27 | ...args, | ||
28 | }); | ||
29 | |||
30 | const WithStoreToggle = observer(({ store }: { store: any }) => ( | ||
31 | <> | ||
32 | <Toggle | ||
33 | value={store.value} | ||
34 | checked={store.checked} | ||
35 | label={store.label} | ||
36 | id={store.id} | ||
37 | name={store.name} | ||
38 | disabled={store.disabled} | ||
39 | error={store.error} | ||
40 | onChange={() => (store.checked = !store.checked)} | ||
41 | /> | ||
42 | </> | ||
43 | )); | ||
44 | |||
45 | storiesOf('Toggle') | ||
46 | .add('Basic', () => <WithStoreToggle store={createStore()} />) | ||
47 | .add('Checked', () => ( | ||
48 | <WithStoreToggle | ||
49 | store={createStore({ | ||
50 | checked: true, | ||
51 | })} | ||
52 | /> | ||
53 | )) | ||
54 | .add('Disabled', () => ( | ||
55 | <WithStoreToggle | ||
56 | store={createStore({ | ||
57 | checked: true, | ||
58 | disabled: true, | ||
59 | })} | ||
60 | /> | ||
61 | )) | ||
62 | .add('Long label', () => ( | ||
63 | <WithStoreToggle | ||
64 | store={createStore({ | ||
65 | label: | ||
66 | 'Hello world, this is an insanely long label for this toggle. We need to make sure that it will be displayed correctly.', | ||
67 | })} | ||
68 | /> | ||
69 | )) | ||
70 | .add('With error', () => ( | ||
71 | <WithStoreToggle | ||
72 | store={createStore({ | ||
73 | error: 'Something went wrong', | ||
74 | })} | ||
75 | /> | ||
76 | )); | ||