aboutsummaryrefslogtreecommitdiffstats
path: root/uidev/src/stories/toggle.stories.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'uidev/src/stories/toggle.stories.tsx')
-rw-r--r--uidev/src/stories/toggle.stories.tsx76
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 @@
1import { observable } from 'mobx';
2import { observer } from 'mobx-react';
3import { v4 as uuid } from 'uuid';
4
5import { Toggle } from '@meetfranz/forms';
6import { storiesOf } from '../stores/stories';
7
8interface IStoreArgs {
9 value?: boolean;
10 checked?: boolean;
11 label?: string;
12 id?: string;
13 name?: string;
14 disabled?: boolean;
15 error?: string;
16}
17
18const 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
30const 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
45storiesOf('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 ));