summaryrefslogtreecommitdiffstats
path: root/uidev/src/stories/toggle.stories.tsx
diff options
context:
space:
mode:
authorLibravatar Vijay A <avijayr@protonmail.com>2021-08-16 23:13:06 +0530
committerLibravatar Vijay A <avijayr@protonmail.com>2021-08-16 23:13:06 +0530
commitbbed06e2ba255199703343625129712ef7707697 (patch)
tree19a525fbd1d621a6e561b1a687195269e54f43d5 /uidev/src/stories/toggle.stories.tsx
parentchore: update outdated node_modules (#1807) (diff)
downloadferdium-app-bbed06e2ba255199703343625129712ef7707697.tar.gz
ferdium-app-bbed06e2ba255199703343625129712ef7707697.tar.zst
ferdium-app-bbed06e2ba255199703343625129712ef7707697.zip
Revert "chore: update outdated node_modules (#1807)"
Diffstat (limited to 'uidev/src/stories/toggle.stories.tsx')
-rw-r--r--uidev/src/stories/toggle.stories.tsx46
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 @@
1import { observable } from 'mobx'; 1import { observable } from 'mobx';
2import { observer } from 'mobx-react'; 2import { observer } from 'mobx-react';
3import React from 'react'; 3import React from 'react';
4import { v4 as uuid } from 'uuid'; 4import uuid from 'uuid/v4';
5 5
6import { Toggle } from '@meetfranz/forms'; 6import { Toggle } from '@meetfranz/forms';
7import { storiesOf } from '../stores/stories'; 7import { storiesOf } from '../stores/stories';
@@ -16,17 +16,14 @@ interface IStoreArgs {
16 error?: string; 16 error?: string;
17} 17}
18 18
19const createStore = (args?: IStoreArgs) => 19const 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
31const WithStoreToggle = observer(({ store }: { store: any }) => ( 28const 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
46storiesOf('Toggle') 43storiesOf('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 ));