aboutsummaryrefslogtreecommitdiffstats
path: root/uidev/src/stories/infobox.stories.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'uidev/src/stories/infobox.stories.tsx')
-rw-r--r--uidev/src/stories/infobox.stories.tsx53
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
17const createStore = (args?: IStoreArgs) => observable({ type: 'primary', 17const 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
23const WithStoreInfobox = observer(({ store, children }: { store: any, children: string | React.ReactNode }) => ( 26const 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
38storiesOf('Infobox') 43storiesOf('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>