diff options
Diffstat (limited to 'uidev/src/stories')
-rw-r--r-- | uidev/src/stories/badge.stories.tsx | 12 | ||||
-rw-r--r-- | uidev/src/stories/button.stories.tsx | 5 | ||||
-rw-r--r-- | uidev/src/stories/infobox.stories.tsx | 9 | ||||
-rw-r--r-- | uidev/src/stories/input.stories.tsx | 8 |
4 files changed, 33 insertions, 1 deletions
diff --git a/uidev/src/stories/badge.stories.tsx b/uidev/src/stories/badge.stories.tsx index 6de2034bf..d7b4d55b5 100644 --- a/uidev/src/stories/badge.stories.tsx +++ b/uidev/src/stories/badge.stories.tsx | |||
@@ -1,6 +1,6 @@ | |||
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | 2 | ||
3 | import { Badge } from '@meetfranz/ui'; | 3 | import { Badge, ProBadge } from '@meetfranz/ui'; |
4 | import { storiesOf } from '../stores/stories'; | 4 | import { storiesOf } from '../stores/stories'; |
5 | 5 | ||
6 | storiesOf('Badge') | 6 | storiesOf('Badge') |
@@ -18,4 +18,14 @@ storiesOf('Badge') | |||
18 | <Badge type="danger">danger</Badge> | 18 | <Badge type="danger">danger</Badge> |
19 | <Badge type="inverted">inverted</Badge> | 19 | <Badge type="inverted">inverted</Badge> |
20 | </> | 20 | </> |
21 | )) | ||
22 | .add('Pro Badge', () => ( | ||
23 | <> | ||
24 | <ProBadge /> | ||
25 | </> | ||
26 | )) | ||
27 | .add('Pro Badge inverted', () => ( | ||
28 | <> | ||
29 | <ProBadge inverted /> | ||
30 | </> | ||
21 | )); | 31 | )); |
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx index d81808530..c8e9bcbf3 100644 --- a/uidev/src/stories/button.stories.tsx +++ b/uidev/src/stories/button.stories.tsx | |||
@@ -76,6 +76,11 @@ storiesOf('Button') | |||
76 | busy: true, | 76 | busy: true, |
77 | })} /> | 77 | })} /> |
78 | )) | 78 | )) |
79 | .add('With icon', () => ( | ||
80 | <WithStoreButton store={createStore({ | ||
81 | icon: 'mdiInformation', | ||
82 | })} /> | ||
83 | )) | ||
79 | .add('As link', () => ( | 84 | .add('As link', () => ( |
80 | <WithStoreButton store={createStore({ | 85 | <WithStoreButton store={createStore({ |
81 | href: 'https://meetfranz.com', | 86 | href: 'https://meetfranz.com', |
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx index 2a5e8b0d5..144855376 100644 --- a/uidev/src/stories/infobox.stories.tsx +++ b/uidev/src/stories/infobox.stories.tsx | |||
@@ -10,6 +10,7 @@ interface IStoreArgs { | |||
10 | ctaLabel?: string; | 10 | ctaLabel?: string; |
11 | type?: string; | 11 | type?: string; |
12 | dismissable?: boolean; | 12 | dismissable?: boolean; |
13 | className?: string; | ||
13 | } | 14 | } |
14 | 15 | ||
15 | const createStore = (args?: IStoreArgs) => { | 16 | const createStore = (args?: IStoreArgs) => { |
@@ -29,6 +30,7 @@ const WithStoreInfobox = observer(({ store, children }: { store: any, children: | |||
29 | type={store.type} | 30 | type={store.type} |
30 | ctaOnClick={store.ctaOnClick} | 31 | ctaOnClick={store.ctaOnClick} |
31 | dismissable={store.dismissable} | 32 | dismissable={store.dismissable} |
33 | className={store.className} | ||
32 | > | 34 | > |
33 | {children} | 35 | {children} |
34 | </Infobox> | 36 | </Infobox> |
@@ -123,4 +125,11 @@ storiesOf('Infobox') | |||
123 | > | 125 | > |
124 | Welcome to the world of tomorrow | 126 | Welcome to the world of tomorrow |
125 | </WithStoreInfobox> | 127 | </WithStoreInfobox> |
128 | )) | ||
129 | .add('With className', () => ( | ||
130 | <WithStoreInfobox store={createStore({ | ||
131 | className: 'franz-is-awesome', | ||
132 | })}> | ||
133 | Welcome to the world of tomorrow | ||
134 | </WithStoreInfobox> | ||
126 | )); | 135 | )); |
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx index c522a10c7..af5e791d0 100644 --- a/uidev/src/stories/input.stories.tsx +++ b/uidev/src/stories/input.stories.tsx | |||
@@ -66,6 +66,14 @@ storiesOf('Input') | |||
66 | value="faulty input" | 66 | value="faulty input" |
67 | error="This is a generic error message." | 67 | error="This is a generic error message." |
68 | /> | 68 | /> |
69 | )) | ||
70 | .add('Type number with min & max', () => ( | ||
71 | <Input | ||
72 | {...defaultProps()} | ||
73 | type="number" | ||
74 | min={1} | ||
75 | max={10} | ||
76 | /> | ||
69 | )); | 77 | )); |
70 | 78 | ||
71 | storiesOf('Password') | 79 | storiesOf('Password') |