diff options
Diffstat (limited to 'uidev')
-rw-r--r-- | uidev/src/stories/button.stories.tsx | 6 | ||||
-rw-r--r-- | uidev/src/stories/icon.stories.tsx | 47 | ||||
-rw-r--r-- | uidev/src/stories/infobox.stories.tsx | 17 |
3 files changed, 16 insertions, 54 deletions
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx index f7537895c..5c1c9246d 100644 --- a/uidev/src/stories/button.stories.tsx +++ b/uidev/src/stories/button.stories.tsx | |||
@@ -1,10 +1,10 @@ | |||
1 | import { mdiInformation } from '@mdi/js'; | ||
1 | import { observable } from 'mobx'; | 2 | import { observable } from 'mobx'; |
2 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
3 | import React from 'react'; | 4 | import React from 'react'; |
4 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
5 | 6 | ||
6 | import { Button, Input } from '@meetfranz/forms'; | 7 | import { Button, Input } from '@meetfranz/forms'; |
7 | import { classes } from 'istanbul-lib-coverage'; | ||
8 | import { Classes } from 'jss'; | 8 | import { Classes } from 'jss'; |
9 | import { storiesOf } from '../stores/stories'; | 9 | import { storiesOf } from '../stores/stories'; |
10 | 10 | ||
@@ -92,7 +92,7 @@ storiesOf('Button') | |||
92 | )) | 92 | )) |
93 | .add('With icon', () => ( | 93 | .add('With icon', () => ( |
94 | <WithStoreButton store={createStore({ | 94 | <WithStoreButton store={createStore({ |
95 | icon: 'mdiInformation', | 95 | icon: mdiInformation, |
96 | })} /> | 96 | })} /> |
97 | )) | 97 | )) |
98 | .add('As link', () => ( | 98 | .add('As link', () => ( |
@@ -131,7 +131,7 @@ storiesOf('Button') | |||
131 | <div className={classes.combinedElements}> | 131 | <div className={classes.combinedElements}> |
132 | <Input showLabel={false} className={classes.input} noMargin /> | 132 | <Input showLabel={false} className={classes.input} noMargin /> |
133 | <WithStoreButton store={createStore({ | 133 | <WithStoreButton store={createStore({ |
134 | icon: 'mdiInformation', | 134 | icon: mdiInformation, |
135 | })} /> | 135 | })} /> |
136 | </div> | 136 | </div> |
137 | )), | 137 | )), |
diff --git a/uidev/src/stories/icon.stories.tsx b/uidev/src/stories/icon.stories.tsx index c8e7f8ced..f9aa1635b 100644 --- a/uidev/src/stories/icon.stories.tsx +++ b/uidev/src/stories/icon.stories.tsx | |||
@@ -1,53 +1,14 @@ | |||
1 | import { observable } from 'mobx'; | 1 | import { mdiAccountCircle } from '@mdi/js'; |
2 | import { observer } from 'mobx-react'; | ||
3 | import React from 'react'; | 2 | import React from 'react'; |
4 | import uuid from 'uuid/v4'; | ||
5 | 3 | ||
6 | import { Icon } from '@meetfranz/ui'; | 4 | import { Icon } from '@meetfranz/ui'; |
7 | import { storiesOf } from '../stores/stories'; | 5 | import { storiesOf } from '../stores/stories'; |
8 | 6 | ||
9 | // interface IStoreArgs { | ||
10 | // value?: boolean; | ||
11 | // checked?: boolean; | ||
12 | // label?: string; | ||
13 | // id?: string; | ||
14 | // name?: string; | ||
15 | // disabled?: boolean; | ||
16 | // error?: string; | ||
17 | // } | ||
18 | |||
19 | // const createStore = (args?: IStoreArgs) => { | ||
20 | // return observable(Object.assign({ | ||
21 | // id: `element-${uuid()}`, | ||
22 | // name: 'toggle', | ||
23 | // label: 'Label', | ||
24 | // value: true, | ||
25 | // checked: false, | ||
26 | // disabled: false, | ||
27 | // error: '', | ||
28 | // }, args)); | ||
29 | // }; | ||
30 | |||
31 | // const WithStoreToggle = observer(({ store }: { store: any }) => ( | ||
32 | // <> | ||
33 | // <Toggle | ||
34 | // value={store.value} | ||
35 | // checked={store.checked} | ||
36 | // label={store.label} | ||
37 | // id={store.id} | ||
38 | // name={store.name} | ||
39 | // disabled={store.disabled} | ||
40 | // error={store.error} | ||
41 | // onChange={() => store.checked = !store.checked} | ||
42 | // /> | ||
43 | // </> | ||
44 | // )); | ||
45 | |||
46 | storiesOf('Icon') | 7 | storiesOf('Icon') |
47 | .add('Basic', () => ( | 8 | .add('Basic', () => ( |
48 | <> | 9 | <> |
49 | <Icon icon="mdiAccountCircle" /> | 10 | <Icon icon={mdiAccountCircle} /> |
50 | <Icon icon="mdiAccountCircle" size={2} /> | 11 | <Icon icon={mdiAccountCircle} size={2} /> |
51 | <Icon icon="mdiAccountCircle" size={3} /> | 12 | <Icon icon={mdiAccountCircle} size={3} /> |
52 | </> | 13 | </> |
53 | )); | 14 | )); |
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx index 967c610aa..b0416b844 100644 --- a/uidev/src/stories/infobox.stories.tsx +++ b/uidev/src/stories/infobox.stories.tsx | |||
@@ -1,3 +1,4 @@ | |||
1 | import { mdiEarth } from '@mdi/js'; | ||
1 | import { observable } from 'mobx'; | 2 | import { observable } from 'mobx'; |
2 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
3 | import React from 'react'; | 4 | import React from 'react'; |
@@ -44,7 +45,7 @@ storiesOf('Infobox') | |||
44 | .add('Icon + Dismissable', () => ( | 45 | .add('Icon + Dismissable', () => ( |
45 | <WithStoreInfobox | 46 | <WithStoreInfobox |
46 | store={createStore({ | 47 | store={createStore({ |
47 | icon: 'mdiEarth', | 48 | icon: mdiEarth, |
48 | dismissable: true, | 49 | dismissable: true, |
49 | })} | 50 | })} |
50 | > | 51 | > |
@@ -54,7 +55,7 @@ storiesOf('Infobox') | |||
54 | .add('With CTA', () => ( | 55 | .add('With CTA', () => ( |
55 | <WithStoreInfobox | 56 | <WithStoreInfobox |
56 | store={createStore({ | 57 | store={createStore({ |
57 | icon: 'mdiEarth', | 58 | icon: mdiEarth, |
58 | ctaLabel: 'Ok, hi!', | 59 | ctaLabel: 'Ok, hi!', |
59 | })} | 60 | })} |
60 | > | 61 | > |
@@ -64,7 +65,7 @@ storiesOf('Infobox') | |||
64 | .add('With long text', () => ( | 65 | .add('With long text', () => ( |
65 | <WithStoreInfobox | 66 | <WithStoreInfobox |
66 | store={createStore({ | 67 | store={createStore({ |
67 | icon: 'mdiEarth', | 68 | icon: mdiEarth, |
68 | ctaLabel: 'Ok, hi!', | 69 | ctaLabel: 'Ok, hi!', |
69 | })} | 70 | })} |
70 | > | 71 | > |
@@ -74,7 +75,7 @@ storiesOf('Infobox') | |||
74 | .add('Secondary', () => ( | 75 | .add('Secondary', () => ( |
75 | <WithStoreInfobox | 76 | <WithStoreInfobox |
76 | store={createStore({ | 77 | store={createStore({ |
77 | icon: 'mdiEarth', | 78 | icon: mdiEarth, |
78 | ctaLabel: 'Ok, hi!', | 79 | ctaLabel: 'Ok, hi!', |
79 | type: 'secondary', | 80 | type: 'secondary', |
80 | })} | 81 | })} |
@@ -85,7 +86,7 @@ storiesOf('Infobox') | |||
85 | .add('Success', () => ( | 86 | .add('Success', () => ( |
86 | <WithStoreInfobox | 87 | <WithStoreInfobox |
87 | store={createStore({ | 88 | store={createStore({ |
88 | icon: 'mdiEarth', | 89 | icon: mdiEarth, |
89 | ctaLabel: 'Ok, hi!', | 90 | ctaLabel: 'Ok, hi!', |
90 | type: 'success', | 91 | type: 'success', |
91 | })} | 92 | })} |
@@ -96,7 +97,7 @@ storiesOf('Infobox') | |||
96 | .add('Warning', () => ( | 97 | .add('Warning', () => ( |
97 | <WithStoreInfobox | 98 | <WithStoreInfobox |
98 | store={createStore({ | 99 | store={createStore({ |
99 | icon: 'mdiEarth', | 100 | icon: mdiEarth, |
100 | ctaLabel: 'Ok, hi!', | 101 | ctaLabel: 'Ok, hi!', |
101 | type: 'warning', | 102 | type: 'warning', |
102 | })} | 103 | })} |
@@ -107,7 +108,7 @@ storiesOf('Infobox') | |||
107 | .add('Danger', () => ( | 108 | .add('Danger', () => ( |
108 | <WithStoreInfobox | 109 | <WithStoreInfobox |
109 | store={createStore({ | 110 | store={createStore({ |
110 | icon: 'mdiEarth', | 111 | icon: mdiEarth, |
111 | ctaLabel: 'Ok, hi!', | 112 | ctaLabel: 'Ok, hi!', |
112 | type: 'danger', | 113 | type: 'danger', |
113 | })} | 114 | })} |
@@ -118,7 +119,7 @@ storiesOf('Infobox') | |||
118 | .add('Inverted', () => ( | 119 | .add('Inverted', () => ( |
119 | <WithStoreInfobox | 120 | <WithStoreInfobox |
120 | store={createStore({ | 121 | store={createStore({ |
121 | icon: 'mdiEarth', | 122 | icon: mdiEarth, |
122 | ctaLabel: 'Ok, hi!', | 123 | ctaLabel: 'Ok, hi!', |
123 | type: 'inverted', | 124 | type: 'inverted', |
124 | })} | 125 | })} |