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 | )); | ||