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