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