diff options
Diffstat (limited to 'uidev/src/stories/infobox.stories.tsx')
-rw-r--r-- | uidev/src/stories/infobox.stories.tsx | 53 |
1 files changed, 32 insertions, 21 deletions
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx index 166150606..b5f86e37d 100644 --- a/uidev/src/stories/infobox.stories.tsx +++ b/uidev/src/stories/infobox.stories.tsx | |||
@@ -14,30 +14,37 @@ interface IStoreArgs { | |||
14 | className?: string; | 14 | className?: string; |
15 | } | 15 | } |
16 | 16 | ||
17 | const createStore = (args?: IStoreArgs) => observable({ type: 'primary', | 17 | const createStore = (args?: IStoreArgs) => |
18 | observable({ | ||
19 | type: 'primary', | ||
18 | ctaOnClick: () => { | 20 | ctaOnClick: () => { |
19 | alert('on click handler'); | 21 | alert('on click handler'); |
20 | }, | 22 | }, |
21 | ...args }); | 23 | ...args, |
24 | }); | ||
22 | 25 | ||
23 | const WithStoreInfobox = observer(({ store, children }: { store: any, children: string | React.ReactNode }) => ( | 26 | const WithStoreInfobox = observer( |
24 | <> | 27 | ({ store, children }: { store: any; children: string | React.ReactNode }) => ( |
25 | <Infobox | 28 | <> |
26 | icon={store.icon} | 29 | <Infobox |
27 | ctaLabel={store.ctaLabel} | 30 | icon={store.icon} |
28 | type={store.type} | 31 | ctaLabel={store.ctaLabel} |
29 | ctaOnClick={store.ctaOnClick} | 32 | type={store.type} |
30 | dismissable={store.dismissable} | 33 | ctaOnClick={store.ctaOnClick} |
31 | className={store.className} | 34 | dismissable={store.dismissable} |
32 | > | 35 | className={store.className} |
33 | {children} | 36 | > |
34 | </Infobox> | 37 | {children} |
35 | </> | 38 | </Infobox> |
36 | )); | 39 | </> |
40 | ), | ||
41 | ); | ||
37 | 42 | ||
38 | storiesOf('Infobox') | 43 | storiesOf('Infobox') |
39 | .add('Basic', () => ( | 44 | .add('Basic', () => ( |
40 | <WithStoreInfobox store={createStore()}>Welcome to the world of tomorrow</WithStoreInfobox> | 45 | <WithStoreInfobox store={createStore()}> |
46 | Welcome to the world of tomorrow | ||
47 | </WithStoreInfobox> | ||
41 | )) | 48 | )) |
42 | .add('Icon + Dismissable', () => ( | 49 | .add('Icon + Dismissable', () => ( |
43 | <WithStoreInfobox | 50 | <WithStoreInfobox |
@@ -66,7 +73,10 @@ storiesOf('Infobox') | |||
66 | ctaLabel: 'Ok, hi!', | 73 | ctaLabel: 'Ok, hi!', |
67 | })} | 74 | })} |
68 | > | 75 | > |
69 | Ferdi is your messaging app / former Emperor of Austria and combines chat & messaging services into one application. Ferdi currently supports Slack, WhatsApp, WeChat, HipChat, Facebook Messenger, Telegram, Google Hangouts,GroupMe, Skype and many more. | 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. | ||
70 | </WithStoreInfobox> | 80 | </WithStoreInfobox> |
71 | )) | 81 | )) |
72 | .add('Secondary', () => ( | 82 | .add('Secondary', () => ( |
@@ -125,9 +135,10 @@ storiesOf('Infobox') | |||
125 | </WithStoreInfobox> | 135 | </WithStoreInfobox> |
126 | )) | 136 | )) |
127 | .add('With className', () => ( | 137 | .add('With className', () => ( |
128 | <WithStoreInfobox store={createStore({ | 138 | <WithStoreInfobox |
129 | className: 'franz-is-awesome', | 139 | store={createStore({ |
130 | })} | 140 | className: 'franz-is-awesome', |
141 | })} | ||
131 | > | 142 | > |
132 | Welcome to the world of tomorrow | 143 | Welcome to the world of tomorrow |
133 | </WithStoreInfobox> | 144 | </WithStoreInfobox> |