diff options
Diffstat (limited to 'packages/ui')
-rw-r--r-- | packages/ui/src/badge/ProBadge.tsx | 64 | ||||
-rw-r--r-- | packages/ui/src/index.ts | 1 | ||||
-rw-r--r-- | packages/ui/src/infobox/index.tsx | 7 | ||||
-rw-r--r-- | packages/ui/src/loader/index.tsx | 4 |
4 files changed, 75 insertions, 1 deletions
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx new file mode 100644 index 000000000..612e23210 --- /dev/null +++ b/packages/ui/src/badge/ProBadge.tsx | |||
@@ -0,0 +1,64 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | ||
2 | import classnames from 'classnames'; | ||
3 | import React, { Component } from 'react'; | ||
4 | import injectStyle from 'react-jss'; | ||
5 | |||
6 | import { Icon, Badge } from '../'; | ||
7 | import { IWithStyle } from '../typings/generic'; | ||
8 | |||
9 | interface IProps extends IWithStyle { | ||
10 | badgeClasses?: string; | ||
11 | iconClasses?: string; | ||
12 | inverted?: boolean; | ||
13 | } | ||
14 | |||
15 | const styles = (theme: Theme) => ({ | ||
16 | badge: { | ||
17 | height: 'auto', | ||
18 | padding: [4, 6, 2, 7], | ||
19 | borderRadius: theme.borderRadiusSmall, | ||
20 | }, | ||
21 | invertedBadge: { | ||
22 | background: theme.styleTypes.primary.contrast, | ||
23 | color: theme.styleTypes.primary.accent, | ||
24 | }, | ||
25 | icon: { | ||
26 | fill: theme.styleTypes.primary.contrast, | ||
27 | }, | ||
28 | invertedIcon: { | ||
29 | fill: theme.styleTypes.primary.accent, | ||
30 | }, | ||
31 | }); | ||
32 | |||
33 | class ProBadgeComponent extends Component<IProps> { | ||
34 | render() { | ||
35 | const { | ||
36 | classes, | ||
37 | badgeClasses, | ||
38 | iconClasses, | ||
39 | inverted, | ||
40 | } = this.props; | ||
41 | |||
42 | return ( | ||
43 | <Badge | ||
44 | type="primary" | ||
45 | className={classnames([ | ||
46 | classes.badge, | ||
47 | inverted && classes.invertedBadge, | ||
48 | badgeClasses, | ||
49 | ])} | ||
50 | > | ||
51 | <Icon | ||
52 | icon="mdiStar" | ||
53 | className={classnames([ | ||
54 | classes.icon, | ||
55 | inverted && classes.invertedIcon, | ||
56 | iconClasses, | ||
57 | ])} | ||
58 | /> | ||
59 | </Badge> | ||
60 | ); | ||
61 | } | ||
62 | } | ||
63 | |||
64 | export const ProBadge = injectStyle(styles)(ProBadgeComponent); | ||
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 1eeec5144..666495ce9 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts | |||
@@ -3,3 +3,4 @@ export { Infobox } from './infobox'; | |||
3 | export * from './headline'; | 3 | export * from './headline'; |
4 | export { Loader } from './loader'; | 4 | export { Loader } from './loader'; |
5 | export { Badge } from './badge'; | 5 | export { Badge } from './badge'; |
6 | export { ProBadge } from './badge/ProBadge'; | ||
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx index 1a442a733..9066a623e 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -11,6 +11,7 @@ interface IProps extends IWithStyle { | |||
11 | type?: string; | 11 | type?: string; |
12 | dismissable?: boolean; | 12 | dismissable?: boolean; |
13 | onDismiss?: () => void; | 13 | onDismiss?: () => void; |
14 | onUnmount?: () => void; | ||
14 | ctaOnClick?: () => void; | 15 | ctaOnClick?: () => void; |
15 | ctaLabel?: string; | 16 | ctaLabel?: string; |
16 | ctaLoading?: boolean; | 17 | ctaLoading?: boolean; |
@@ -46,6 +47,7 @@ const styles = (theme: Theme) => ({ | |||
46 | wrapper: { | 47 | wrapper: { |
47 | position: 'relative', | 48 | position: 'relative', |
48 | overflow: 'hidden', | 49 | overflow: 'hidden', |
50 | height: 'auto', | ||
49 | }, | 51 | }, |
50 | infobox: { | 52 | infobox: { |
51 | alignItems: 'center', | 53 | alignItems: 'center', |
@@ -129,6 +131,11 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
129 | }, 3000); | 131 | }, 3000); |
130 | } | 132 | } |
131 | 133 | ||
134 | componentWillUnmount(): void { | ||
135 | const { onUnmount } = this.props; | ||
136 | if (onUnmount) onUnmount(); | ||
137 | } | ||
138 | |||
132 | render() { | 139 | render() { |
133 | const { | 140 | const { |
134 | classes, | 141 | classes, |
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx index 46545c786..4a3c8274f 100644 --- a/packages/ui/src/loader/index.tsx +++ b/packages/ui/src/loader/index.tsx | |||
@@ -8,6 +8,7 @@ import { IWithStyle } from '../typings/generic'; | |||
8 | 8 | ||
9 | interface IProps extends IWithStyle { | 9 | interface IProps extends IWithStyle { |
10 | className?: string; | 10 | className?: string; |
11 | color?: string; | ||
11 | } | 12 | } |
12 | 13 | ||
13 | const styles = (theme: Theme) => ({ | 14 | const styles = (theme: Theme) => ({ |
@@ -22,6 +23,7 @@ class LoaderComponent extends Component<IProps> { | |||
22 | const { | 23 | const { |
23 | classes, | 24 | classes, |
24 | className, | 25 | className, |
26 | color, | ||
25 | theme, | 27 | theme, |
26 | } = this.props; | 28 | } = this.props; |
27 | 29 | ||
@@ -37,7 +39,7 @@ class LoaderComponent extends Component<IProps> { | |||
37 | loaded={false} | 39 | loaded={false} |
38 | width={4} | 40 | width={4} |
39 | scale={0.75} | 41 | scale={0.75} |
40 | color={theme.colorText} | 42 | color={color || theme.colorText} |
41 | parentClassName={classes.loader} | 43 | parentClassName={classes.loader} |
42 | /> | 44 | /> |
43 | </div> | 45 | </div> |