diff options
Diffstat (limited to 'packages/ui')
-rw-r--r-- | packages/ui/package.json | 6 | ||||
-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 | 14 | ||||
-rw-r--r-- | packages/ui/src/loader/index.tsx | 4 |
5 files changed, 84 insertions, 5 deletions
diff --git a/packages/ui/package.json b/packages/ui/package.json index 62a1e5a6e..514b2cc7c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/ui", | 2 | "name": "@meetfranz/ui", |
3 | "version": "0.0.4", | 3 | "version": "0.0.8", |
4 | "description": "React UI components for Franz", | 4 | "description": "React UI components for Franz", |
5 | "main": "lib/index.js", | 5 | "main": "lib/index.js", |
6 | "scripts": { | 6 | "scripts": { |
@@ -25,7 +25,7 @@ | |||
25 | "dependencies": { | 25 | "dependencies": { |
26 | "@mdi/js": "^3.3.92", | 26 | "@mdi/js": "^3.3.92", |
27 | "@mdi/react": "^1.1.0", | 27 | "@mdi/react": "^1.1.0", |
28 | "@meetfranz/theme": "^1.0.7", | 28 | "@meetfranz/theme": "^1.0.13", |
29 | "react-loader": "^2.4.5" | 29 | "react-loader": "^2.4.5" |
30 | }, | 30 | }, |
31 | "peerDependencies": { | 31 | "peerDependencies": { |
@@ -34,5 +34,5 @@ | |||
34 | "react-dom": "16.7.0", | 34 | "react-dom": "16.7.0", |
35 | "react-jss": "^8.6.1" | 35 | "react-jss": "^8.6.1" |
36 | }, | 36 | }, |
37 | "gitHead": "14b151cad6a5a849bb476aaa3fc53bf1eead7f4b" | 37 | "gitHead": "e9b9079dc921e85961954727a7b2a8eabe5b9798" |
38 | } | 38 | } |
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 53ed16341..9066a623e 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -11,10 +11,12 @@ 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; |
17 | children: React.ReactNode; | 18 | children: React.ReactNode; |
19 | className: string; | ||
18 | } | 20 | } |
19 | 21 | ||
20 | interface IState { | 22 | interface IState { |
@@ -45,6 +47,7 @@ const styles = (theme: Theme) => ({ | |||
45 | wrapper: { | 47 | wrapper: { |
46 | position: 'relative', | 48 | position: 'relative', |
47 | overflow: 'hidden', | 49 | overflow: 'hidden', |
50 | height: 'auto', | ||
48 | }, | 51 | }, |
49 | infobox: { | 52 | infobox: { |
50 | alignItems: 'center', | 53 | alignItems: 'center', |
@@ -128,6 +131,11 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
128 | }, 3000); | 131 | }, 3000); |
129 | } | 132 | } |
130 | 133 | ||
134 | componentWillUnmount(): void { | ||
135 | const { onUnmount } = this.props; | ||
136 | if (onUnmount) onUnmount(); | ||
137 | } | ||
138 | |||
131 | render() { | 139 | render() { |
132 | const { | 140 | const { |
133 | classes, | 141 | classes, |
@@ -138,6 +146,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
138 | ctaLoading, | 146 | ctaLoading, |
139 | ctaOnClick, | 147 | ctaOnClick, |
140 | dismissable, | 148 | dismissable, |
149 | className, | ||
141 | } = this.props; | 150 | } = this.props; |
142 | 151 | ||
143 | const { | 152 | const { |
@@ -150,7 +159,10 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
150 | } | 159 | } |
151 | 160 | ||
152 | return ( | 161 | return ( |
153 | <div className={classes.wrapper}> | 162 | <div className={classnames({ |
163 | [classes.wrapper]: true, | ||
164 | [`${className}`]: className, | ||
165 | })}> | ||
154 | <div | 166 | <div |
155 | className={classnames({ | 167 | className={classnames({ |
156 | [classes.infobox]: true, | 168 | [classes.infobox]: true, |
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> |