diff options
Diffstat (limited to 'uidev/src/stories/infobox.stories.tsx')
-rw-r--r-- | uidev/src/stories/infobox.stories.tsx | 145 |
1 files changed, 0 insertions, 145 deletions
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx deleted file mode 100644 index b5f86e37d..000000000 --- a/uidev/src/stories/infobox.stories.tsx +++ /dev/null | |||
@@ -1,145 +0,0 @@ | |||
1 | import { mdiEarth } from '@mdi/js'; | ||
2 | import { observable } from 'mobx'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import * as React from 'react'; | ||
5 | |||
6 | import { Infobox } from '@meetfranz/ui'; | ||
7 | import { storiesOf } from '../stores/stories'; | ||
8 | |||
9 | interface IStoreArgs { | ||
10 | icon?: string; | ||
11 | ctaLabel?: string; | ||
12 | type?: string; | ||
13 | dismissable?: boolean; | ||
14 | className?: string; | ||
15 | } | ||
16 | |||
17 | const createStore = (args?: IStoreArgs) => | ||
18 | observable({ | ||
19 | type: 'primary', | ||
20 | ctaOnClick: () => { | ||
21 | alert('on click handler'); | ||
22 | }, | ||
23 | ...args, | ||
24 | }); | ||
25 | |||
26 | const WithStoreInfobox = observer( | ||
27 | ({ store, children }: { store: any; children: string | React.ReactNode }) => ( | ||
28 | <> | ||
29 | <Infobox | ||
30 | icon={store.icon} | ||
31 | ctaLabel={store.ctaLabel} | ||
32 | type={store.type} | ||
33 | ctaOnClick={store.ctaOnClick} | ||
34 | dismissable={store.dismissable} | ||
35 | className={store.className} | ||
36 | > | ||
37 | {children} | ||
38 | </Infobox> | ||
39 | </> | ||
40 | ), | ||
41 | ); | ||
42 | |||
43 | storiesOf('Infobox') | ||
44 | .add('Basic', () => ( | ||
45 | <WithStoreInfobox store={createStore()}> | ||
46 | Welcome to the world of tomorrow | ||
47 | </WithStoreInfobox> | ||
48 | )) | ||
49 | .add('Icon + Dismissable', () => ( | ||
50 | <WithStoreInfobox | ||
51 | store={createStore({ | ||
52 | icon: mdiEarth, | ||
53 | dismissable: true, | ||
54 | })} | ||
55 | > | ||
56 | Welcome to the world of tomorrow | ||
57 | </WithStoreInfobox> | ||
58 | )) | ||
59 | .add('With CTA', () => ( | ||
60 | <WithStoreInfobox | ||
61 | store={createStore({ | ||
62 | icon: mdiEarth, | ||
63 | ctaLabel: 'Ok, hi!', | ||
64 | })} | ||
65 | > | ||
66 | Welcome to the world of tomorrow | ||
67 | </WithStoreInfobox> | ||
68 | )) | ||
69 | .add('With long text', () => ( | ||
70 | <WithStoreInfobox | ||
71 | store={createStore({ | ||
72 | icon: mdiEarth, | ||
73 | ctaLabel: 'Ok, hi!', | ||
74 | })} | ||
75 | > | ||
76 | Ferdi is your messaging app / former Emperor of Austria and combines chat | ||
77 | & messaging services into one application. Ferdi currently supports Slack, | ||
78 | WhatsApp, WeChat, HipChat, Facebook Messenger, Telegram, Google | ||
79 | Hangouts,GroupMe, Skype and many more. | ||
80 | </WithStoreInfobox> | ||
81 | )) | ||
82 | .add('Secondary', () => ( | ||
83 | <WithStoreInfobox | ||
84 | store={createStore({ | ||
85 | icon: mdiEarth, | ||
86 | ctaLabel: 'Ok, hi!', | ||
87 | type: 'secondary', | ||
88 | })} | ||
89 | > | ||
90 | Welcome to the world of tomorrow | ||
91 | </WithStoreInfobox> | ||
92 | )) | ||
93 | .add('Success', () => ( | ||
94 | <WithStoreInfobox | ||
95 | store={createStore({ | ||
96 | icon: mdiEarth, | ||
97 | ctaLabel: 'Ok, hi!', | ||
98 | type: 'success', | ||
99 | })} | ||
100 | > | ||
101 | Welcome to the world of tomorrow | ||
102 | </WithStoreInfobox> | ||
103 | )) | ||
104 | .add('Warning', () => ( | ||
105 | <WithStoreInfobox | ||
106 | store={createStore({ | ||
107 | icon: mdiEarth, | ||
108 | ctaLabel: 'Ok, hi!', | ||
109 | type: 'warning', | ||
110 | })} | ||
111 | > | ||
112 | Welcome to the world of tomorrow | ||
113 | </WithStoreInfobox> | ||
114 | )) | ||
115 | .add('Danger', () => ( | ||
116 | <WithStoreInfobox | ||
117 | store={createStore({ | ||
118 | icon: mdiEarth, | ||
119 | ctaLabel: 'Ok, hi!', | ||
120 | type: 'danger', | ||
121 | })} | ||
122 | > | ||
123 | Welcome to the world of tomorrow | ||
124 | </WithStoreInfobox> | ||
125 | )) | ||
126 | .add('Inverted', () => ( | ||
127 | <WithStoreInfobox | ||
128 | store={createStore({ | ||
129 | icon: mdiEarth, | ||
130 | ctaLabel: 'Ok, hi!', | ||
131 | type: 'inverted', | ||
132 | })} | ||
133 | > | ||
134 | Welcome to the world of tomorrow | ||
135 | </WithStoreInfobox> | ||
136 | )) | ||
137 | .add('With className', () => ( | ||
138 | <WithStoreInfobox | ||
139 | store={createStore({ | ||
140 | className: 'franz-is-awesome', | ||
141 | })} | ||
142 | > | ||
143 | Welcome to the world of tomorrow | ||
144 | </WithStoreInfobox> | ||
145 | )); | ||