diff options
author | 2019-03-19 16:24:18 +0100 | |
---|---|---|
committer | 2019-03-19 16:24:18 +0100 | |
commit | 24533f13df234b347a4065d8148896d530237959 (patch) | |
tree | 027ea85df5f48253aa526613ec96816cb549a5d0 | |
parent | Merge branch 'master' into develop (diff) | |
download | ferdium-app-24533f13df234b347a4065d8148896d530237959.tar.gz ferdium-app-24533f13df234b347a4065d8148896d530237959.tar.zst ferdium-app-24533f13df234b347a4065d8148896d530237959.zip |
Add support for custom className
-rw-r--r-- | packages/ui/src/infobox/index.tsx | 7 | ||||
-rw-r--r-- | uidev/src/stories/infobox.stories.tsx | 9 |
2 files changed, 15 insertions, 1 deletions
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx index 53ed16341..1a442a733 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -15,6 +15,7 @@ interface IProps extends IWithStyle { | |||
15 | ctaLabel?: string; | 15 | ctaLabel?: string; |
16 | ctaLoading?: boolean; | 16 | ctaLoading?: boolean; |
17 | children: React.ReactNode; | 17 | children: React.ReactNode; |
18 | className: string; | ||
18 | } | 19 | } |
19 | 20 | ||
20 | interface IState { | 21 | interface IState { |
@@ -138,6 +139,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
138 | ctaLoading, | 139 | ctaLoading, |
139 | ctaOnClick, | 140 | ctaOnClick, |
140 | dismissable, | 141 | dismissable, |
142 | className, | ||
141 | } = this.props; | 143 | } = this.props; |
142 | 144 | ||
143 | const { | 145 | const { |
@@ -150,7 +152,10 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
150 | } | 152 | } |
151 | 153 | ||
152 | return ( | 154 | return ( |
153 | <div className={classes.wrapper}> | 155 | <div className={classnames({ |
156 | [classes.wrapper]: true, | ||
157 | [`${className}`]: className, | ||
158 | })}> | ||
154 | <div | 159 | <div |
155 | className={classnames({ | 160 | className={classnames({ |
156 | [classes.infobox]: true, | 161 | [classes.infobox]: true, |
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 | )); |