aboutsummaryrefslogtreecommitdiffstats
path: root/packages/ui/src/infobox/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/ui/src/infobox/index.tsx')
-rw-r--r--packages/ui/src/infobox/index.tsx49
1 files changed, 20 insertions, 29 deletions
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index bd62fc4ea..961262001 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -3,8 +3,8 @@ import classnames from 'classnames';
3import React, { Component } from 'react'; 3import React, { Component } from 'react';
4import injectStyle from 'react-jss'; 4import injectStyle from 'react-jss';
5 5
6import { Icon } from '..';
6import { Theme } from '../../../theme'; 7import { Theme } from '../../../theme';
7import { Icon } from '../';
8import { IWithStyle } from '../typings/generic'; 8import { IWithStyle } from '../typings/generic';
9 9
10interface IProps extends IWithStyle { 10interface IProps extends IWithStyle {
@@ -27,7 +27,7 @@ interface IState {
27 27
28const buttonStyles = (theme: Theme) => { 28const buttonStyles = (theme: Theme) => {
29 const styles = {}; 29 const styles = {};
30 Object.keys(theme.styleTypes).map((style) => { 30 Object.keys(theme.styleTypes).map(style => {
31 Object.assign(styles, { 31 Object.assign(styles, {
32 [style]: { 32 [style]: {
33 background: theme.styleTypes[style].accent, 33 background: theme.styleTypes[style].accent,
@@ -73,18 +73,21 @@ const styles = (theme: Theme) => ({
73 marginRight: 10, 73 marginRight: 10,
74 }, 74 },
75 close: { 75 close: {
76 color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, 76 color: (props: IProps) =>
77 theme.styleTypes[props.type ? props.type : 'primary'].contrast,
77 marginRight: -5, 78 marginRight: -5,
78 border: 0, 79 border: 0,
79 background: 'none', 80 background: 'none',
80 }, 81 },
81 cta: { 82 cta: {
82 borderColor: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, 83 borderColor: (props: IProps) =>
84 theme.styleTypes[props.type ? props.type : 'primary'].contrast,
83 borderRadius: theme.borderRadiusSmall, 85 borderRadius: theme.borderRadiusSmall,
84 borderStyle: 'solid', 86 borderStyle: 'solid',
85 borderWidth: 1, 87 borderWidth: 1,
86 background: 'none', 88 background: 'none',
87 color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, 89 color: (props: IProps) =>
90 theme.styleTypes[props.type ? props.type : 'primary'].contrast,
88 marginLeft: 15, 91 marginLeft: 15,
89 padding: [4, 10], 92 padding: [4, 10],
90 fontSize: theme.uiFontSize, 93 fontSize: theme.uiFontSize,
@@ -113,9 +116,7 @@ class InfoboxComponent extends Component<IProps, IState> {
113 }; 116 };
114 117
115 dismiss() { 118 dismiss() {
116 const { 119 const { onDismiss } = this.props;
117 onDismiss,
118 } = this.props;
119 120
120 this.setState({ 121 this.setState({
121 isDismissing: true, 122 isDismissing: true,
@@ -129,7 +130,7 @@ class InfoboxComponent extends Component<IProps, IState> {
129 this.setState({ 130 this.setState({
130 dismissed: true, 131 dismissed: true,
131 }); 132 });
132 }, 3000); 133 }, 3000);
133 } 134 }
134 135
135 componentWillUnmount(): void { 136 componentWillUnmount(): void {
@@ -144,26 +145,24 @@ class InfoboxComponent extends Component<IProps, IState> {
144 icon, 145 icon,
145 type, 146 type,
146 ctaLabel, 147 ctaLabel,
147 ctaLoading,
148 ctaOnClick, 148 ctaOnClick,
149 dismissable, 149 dismissable,
150 className, 150 className,
151 } = this.props; 151 } = this.props;
152 152
153 const { 153 const { isDismissing, dismissed } = this.state;
154 isDismissing,
155 dismissed,
156 } = this.state;
157 154
158 if (dismissed) { 155 if (dismissed) {
159 return null; 156 return null;
160 } 157 }
161 158
162 return ( 159 return (
163 <div className={classnames({ 160 <div
164 [classes.wrapper]: true, 161 className={classnames({
165 [`${className}`]: className, 162 [classes.wrapper]: true,
166 })}> 163 [`${className}`]: className,
164 })}
165 >
167 <div 166 <div
168 className={classnames({ 167 className={classnames({
169 [classes.infobox]: true, 168 [classes.infobox]: true,
@@ -172,18 +171,10 @@ class InfoboxComponent extends Component<IProps, IState> {
172 })} 171 })}
173 data-type="franz-infobox" 172 data-type="franz-infobox"
174 > 173 >
175 {icon && ( 174 {icon && <Icon icon={icon} className={classes.icon} />}
176 <Icon icon={icon} className={classes.icon} /> 175 <div className={classes.content}>{children}</div>
177 )}
178 <div className={classes.content}>
179 {children}
180 </div>
181 {ctaLabel && ( 176 {ctaLabel && (
182 <button 177 <button className={classes.cta} onClick={ctaOnClick} type="button">
183 className={classes.cta}
184 onClick={ctaOnClick}
185 type="button"
186 >
187 {ctaLabel} 178 {ctaLabel}
188 </button> 179 </button>
189 )} 180 )}