diff options
Diffstat (limited to 'packages/ui')
-rw-r--r-- | packages/ui/package-lock.json | 122 | ||||
-rw-r--r-- | packages/ui/package.json | 10 | ||||
-rw-r--r-- | packages/ui/src/badge/ProBadge.tsx | 13 | ||||
-rw-r--r-- | packages/ui/src/badge/index.tsx | 11 | ||||
-rw-r--r-- | packages/ui/src/headline/index.tsx | 17 | ||||
-rw-r--r-- | packages/ui/src/icon/index.tsx | 9 | ||||
-rw-r--r-- | packages/ui/src/index.ts | 2 | ||||
-rw-r--r-- | packages/ui/src/infobox/index.tsx | 64 | ||||
-rw-r--r-- | packages/ui/src/loader/index.tsx | 10 | ||||
-rw-r--r-- | packages/ui/src/typings/generic.ts | 3 | ||||
-rw-r--r-- | packages/ui/tslint.json | 3 |
11 files changed, 59 insertions, 205 deletions
diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json deleted file mode 100644 index a432404b1..000000000 --- a/packages/ui/package-lock.json +++ /dev/null | |||
@@ -1,122 +0,0 @@ | |||
1 | { | ||
2 | "name": "@meetfranz/ui", | ||
3 | "version": "1.1.0", | ||
4 | "lockfileVersion": 1, | ||
5 | "requires": true, | ||
6 | "dependencies": { | ||
7 | "@mdi/react": { | ||
8 | "version": "1.1.0", | ||
9 | "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.1.0.tgz", | ||
10 | "integrity": "sha512-c0+avMYEZ6i7Pg1ULLFs+p7k8bDPiie9rrgGYs8VWQhw2tUUYz7r0lIPVzD3bzMghWfyhfkArj88K5Of0WTMNw==" | ||
11 | }, | ||
12 | "@meetfranz/theme": { | ||
13 | "version": "file:../theme", | ||
14 | "requires": { | ||
15 | "color": "^3.1.0" | ||
16 | }, | ||
17 | "dependencies": { | ||
18 | "color": { | ||
19 | "version": "3.1.0", | ||
20 | "resolved": "https://registry.npmjs.org/color/-/color-3.1.0.tgz", | ||
21 | "integrity": "sha512-CwyopLkuRYO5ei2EpzpIh6LqJMt6Mt+jZhO5VI5f/wJLZriXQE32/SSqzmrh+QB+AZT81Cj8yv+7zwToW8ahZg==", | ||
22 | "requires": { | ||
23 | "color-convert": "^1.9.1", | ||
24 | "color-string": "^1.5.2" | ||
25 | } | ||
26 | }, | ||
27 | "color-convert": { | ||
28 | "version": "1.9.3", | ||
29 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", | ||
30 | "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", | ||
31 | "requires": { | ||
32 | "color-name": "1.1.3" | ||
33 | } | ||
34 | }, | ||
35 | "color-name": { | ||
36 | "version": "1.1.3", | ||
37 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", | ||
38 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" | ||
39 | }, | ||
40 | "color-string": { | ||
41 | "version": "1.5.5", | ||
42 | "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.5.tgz", | ||
43 | "integrity": "sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==", | ||
44 | "requires": { | ||
45 | "color-name": "^1.0.0", | ||
46 | "simple-swizzle": "^0.2.2" | ||
47 | } | ||
48 | }, | ||
49 | "is-arrayish": { | ||
50 | "version": "0.3.2", | ||
51 | "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", | ||
52 | "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" | ||
53 | }, | ||
54 | "simple-swizzle": { | ||
55 | "version": "0.2.2", | ||
56 | "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", | ||
57 | "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", | ||
58 | "requires": { | ||
59 | "is-arrayish": "^0.3.1" | ||
60 | } | ||
61 | } | ||
62 | } | ||
63 | }, | ||
64 | "create-react-class": { | ||
65 | "version": "15.7.0", | ||
66 | "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz", | ||
67 | "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==", | ||
68 | "requires": { | ||
69 | "loose-envify": "^1.3.1", | ||
70 | "object-assign": "^4.1.1" | ||
71 | } | ||
72 | }, | ||
73 | "js-tokens": { | ||
74 | "version": "4.0.0", | ||
75 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", | ||
76 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" | ||
77 | }, | ||
78 | "loose-envify": { | ||
79 | "version": "1.4.0", | ||
80 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", | ||
81 | "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", | ||
82 | "requires": { | ||
83 | "js-tokens": "^3.0.0 || ^4.0.0" | ||
84 | } | ||
85 | }, | ||
86 | "object-assign": { | ||
87 | "version": "4.1.1", | ||
88 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", | ||
89 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" | ||
90 | }, | ||
91 | "prop-types": { | ||
92 | "version": "15.7.2", | ||
93 | "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", | ||
94 | "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", | ||
95 | "requires": { | ||
96 | "loose-envify": "^1.4.0", | ||
97 | "object-assign": "^4.1.1", | ||
98 | "react-is": "^16.8.1" | ||
99 | } | ||
100 | }, | ||
101 | "react-is": { | ||
102 | "version": "16.13.1", | ||
103 | "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", | ||
104 | "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" | ||
105 | }, | ||
106 | "react-loader": { | ||
107 | "version": "2.4.7", | ||
108 | "resolved": "https://registry.npmjs.org/react-loader/-/react-loader-2.4.7.tgz", | ||
109 | "integrity": "sha512-pNW5xoSt0Q7HdmQh/EaIeeFbG0Ii74y6Le8gPdDyWyEFNgCiY1NcreQxMioQGjQ4Jo4EenQGKN/qMbxW+dpZkQ==", | ||
110 | "requires": { | ||
111 | "create-react-class": "^15.5.2", | ||
112 | "prop-types": "^15.5.8", | ||
113 | "spin.js": "2.x" | ||
114 | } | ||
115 | }, | ||
116 | "spin.js": { | ||
117 | "version": "2.3.2", | ||
118 | "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz", | ||
119 | "integrity": "sha1-bKpW1SBnNFD9XPvGlx5tB3LDeho=" | ||
120 | } | ||
121 | } | ||
122 | } | ||
diff --git a/packages/ui/package.json b/packages/ui/package.json index 5cbe0a58d..2b24803f5 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json | |||
@@ -23,15 +23,15 @@ | |||
23 | "author": "Stefan Malzner <stefan@adlk.io>", | 23 | "author": "Stefan Malzner <stefan@adlk.io>", |
24 | "license": "Apache-2.0", | 24 | "license": "Apache-2.0", |
25 | "dependencies": { | 25 | "dependencies": { |
26 | "@mdi/react": "^1.1.0", | 26 | "@mdi/react": "1.5.0", |
27 | "@meetfranz/theme": "file:../theme", | 27 | "@meetfranz/theme": "file:../theme", |
28 | "react-loader": "2.4.7" | 28 | "react-loader": "2.4.7" |
29 | }, | 29 | }, |
30 | "peerDependencies": { | 30 | "peerDependencies": { |
31 | "classnames": "^2.2.6", | 31 | "classnames": "2.3.1", |
32 | "react": "^16.7.0", | 32 | "react": "16.14.0", |
33 | "react-dom": "16.7.0", | 33 | "react-dom": "16.14.0", |
34 | "react-jss": "^8.6.1" | 34 | "react-jss": "8.6.1" |
35 | }, | 35 | }, |
36 | "gitHead": "254da30f801169fac376bda1439b46cabbb491ad" | 36 | "gitHead": "254da30f801169fac376bda1439b46cabbb491ad" |
37 | } | 37 | } |
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx index 5cc41f5b2..63d5d673a 100644 --- a/packages/ui/src/badge/ProBadge.tsx +++ b/packages/ui/src/badge/ProBadge.tsx | |||
@@ -1,10 +1,10 @@ | |||
1 | import { mdiStar } from '@mdi/js'; | 1 | import { mdiStar } from '@mdi/js'; |
2 | import { Theme } from '@meetfranz/theme'; | ||
3 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
4 | import React, { Component } from 'react'; | 3 | import React, { Component } from 'react'; |
5 | import injectStyle from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
6 | 5 | ||
7 | import { Badge, Icon } from '../'; | 6 | import { Badge, Icon } from '..'; |
7 | import { Theme } from '../../../theme'; | ||
8 | import { IWithStyle } from '../typings/generic'; | 8 | import { IWithStyle } from '../typings/generic'; |
9 | 9 | ||
10 | interface IProps extends IWithStyle { | 10 | interface IProps extends IWithStyle { |
@@ -34,13 +34,8 @@ const styles = (theme: Theme) => ({ | |||
34 | 34 | ||
35 | class ProBadgeComponent extends Component<IProps> { | 35 | class ProBadgeComponent extends Component<IProps> { |
36 | render() { | 36 | render() { |
37 | const { | 37 | const { classes, badgeClasses, iconClasses, inverted, className } = |
38 | classes, | 38 | this.props; |
39 | badgeClasses, | ||
40 | iconClasses, | ||
41 | inverted, | ||
42 | className, | ||
43 | } = this.props; | ||
44 | 39 | ||
45 | return ( | 40 | return ( |
46 | <Badge | 41 | <Badge |
diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx index fc52ecc73..5dd735879 100644 --- a/packages/ui/src/badge/index.tsx +++ b/packages/ui/src/badge/index.tsx | |||
@@ -1,8 +1,8 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | ||
2 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
3 | import React, { Component } from 'react'; | 2 | import React, { Component } from 'react'; |
4 | import injectStyle from 'react-jss'; | 3 | import injectStyle from 'react-jss'; |
5 | 4 | ||
5 | import { Theme } from '../../../theme'; | ||
6 | import { IWithStyle } from '../typings/generic'; | 6 | import { IWithStyle } from '../typings/generic'; |
7 | 7 | ||
8 | interface IProps extends IWithStyle { | 8 | interface IProps extends IWithStyle { |
@@ -13,7 +13,7 @@ interface IProps extends IWithStyle { | |||
13 | 13 | ||
14 | const badgeStyles = (theme: Theme) => { | 14 | const badgeStyles = (theme: Theme) => { |
15 | const styles = {}; | 15 | const styles = {}; |
16 | Object.keys(theme.styleTypes).map((style) => { | 16 | Object.keys(theme.styleTypes).map(style => { |
17 | Object.assign(styles, { | 17 | Object.assign(styles, { |
18 | [style]: { | 18 | [style]: { |
19 | background: theme.styleTypes[style].accent, | 19 | background: theme.styleTypes[style].accent, |
@@ -51,12 +51,7 @@ class BadgeComponent extends Component<IProps> { | |||
51 | }; | 51 | }; |
52 | 52 | ||
53 | render() { | 53 | render() { |
54 | const { | 54 | const { classes, children, type, className } = this.props; |
55 | classes, | ||
56 | children, | ||
57 | type, | ||
58 | className, | ||
59 | } = this.props; | ||
60 | 55 | ||
61 | return ( | 56 | return ( |
62 | <div | 57 | <div |
diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx index 7eabfcf80..bf3d4418c 100644 --- a/packages/ui/src/headline/index.tsx +++ b/packages/ui/src/headline/index.tsx | |||
@@ -1,8 +1,8 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | ||
2 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
3 | import React, { Component } from 'react'; | 2 | import React, { Component } from 'react'; |
4 | import injectStyle from 'react-jss'; | 3 | import injectStyle from 'react-jss'; |
5 | 4 | ||
5 | import { Theme } from '../../../theme'; | ||
6 | import { IWithStyle, Omit } from '../typings/generic'; | 6 | import { IWithStyle, Omit } from '../typings/generic'; |
7 | 7 | ||
8 | interface IProps extends IWithStyle { | 8 | interface IProps extends IWithStyle { |
@@ -37,13 +37,7 @@ const styles = (theme: Theme) => ({ | |||
37 | 37 | ||
38 | class HeadlineComponent extends Component<IProps> { | 38 | class HeadlineComponent extends Component<IProps> { |
39 | render() { | 39 | render() { |
40 | const { | 40 | const { classes, level, className, children, id } = this.props; |
41 | classes, | ||
42 | level, | ||
43 | className, | ||
44 | children, | ||
45 | id, | ||
46 | } = this.props; | ||
47 | 41 | ||
48 | return React.createElement( | 42 | return React.createElement( |
49 | `h${level}`, | 43 | `h${level}`, |
@@ -63,7 +57,12 @@ class HeadlineComponent extends Component<IProps> { | |||
63 | 57 | ||
64 | const Headline = injectStyle(styles)(HeadlineComponent); | 58 | const Headline = injectStyle(styles)(HeadlineComponent); |
65 | 59 | ||
66 | const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) => <Headline level={level} {...props}>{props.children}</Headline>; | 60 | const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) => |
61 | ( | ||
62 | <Headline level={level} {...props}> | ||
63 | {props.children} | ||
64 | </Headline> | ||
65 | ); | ||
67 | 66 | ||
68 | export const H1 = createH(1); | 67 | export const H1 = createH(1); |
69 | export const H2 = createH(2); | 68 | export const H2 = createH(2); |
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx index af467c085..b644a9234 100644 --- a/packages/ui/src/icon/index.tsx +++ b/packages/ui/src/icon/index.tsx | |||
@@ -1,9 +1,9 @@ | |||
1 | import MdiIcon from '@mdi/react'; | 1 | import MdiIcon from '@mdi/react'; |
2 | import { Theme } from '@meetfranz/theme'; | ||
3 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
4 | import React, { Component } from 'react'; | 3 | import React, { Component } from 'react'; |
5 | import injectStyle from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
6 | 5 | ||
6 | import { Theme } from '../../../theme'; | ||
7 | import { IWithStyle } from '../typings/generic'; | 7 | import { IWithStyle } from '../typings/generic'; |
8 | 8 | ||
9 | interface IProps extends IWithStyle { | 9 | interface IProps extends IWithStyle { |
@@ -24,12 +24,7 @@ class IconComponent extends Component<IProps> { | |||
24 | }; | 24 | }; |
25 | 25 | ||
26 | render() { | 26 | render() { |
27 | const { | 27 | const { classes, icon, size, className } = this.props; |
28 | classes, | ||
29 | icon, | ||
30 | size, | ||
31 | className, | ||
32 | } = this.props; | ||
33 | 28 | ||
34 | if (!icon) { | 29 | if (!icon) { |
35 | console.warn('No Icon specified'); | 30 | console.warn('No Icon specified'); |
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 666495ce9..bab3fc27b 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts | |||
@@ -1,6 +1,6 @@ | |||
1 | export { Icon } from './icon'; | 1 | export { Icon } from './icon'; |
2 | export { Infobox } from './infobox'; | 2 | export { Infobox } from './infobox'; |
3 | export * from './headline'; | 3 | export { H1, H2, H3, H4 } 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'; | 6 | export { ProBadge } from './badge/ProBadge'; |
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx index e4c2c5a3e..88cfdb620 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -1,10 +1,10 @@ | |||
1 | import { mdiClose } from '@mdi/js'; | 1 | import { mdiClose } from '@mdi/js'; |
2 | import { Theme } from '@meetfranz/theme'; | ||
3 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
4 | import React, { Component } from 'react'; | 3 | import React, { Component } from 'react'; |
5 | import injectStyle from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
6 | 5 | ||
7 | import { Icon } from '../'; | 6 | import { Icon } from '..'; |
7 | import { Theme } from '../../../theme'; | ||
8 | import { IWithStyle } from '../typings/generic'; | 8 | import { IWithStyle } from '../typings/generic'; |
9 | 9 | ||
10 | interface IProps extends IWithStyle { | 10 | interface IProps extends IWithStyle { |
@@ -27,7 +27,7 @@ interface IState { | |||
27 | 27 | ||
28 | const buttonStyles = (theme: Theme) => { | 28 | const 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, |
@@ -44,6 +44,15 @@ const buttonStyles = (theme: Theme) => { | |||
44 | return styles; | 44 | return styles; |
45 | }; | 45 | }; |
46 | 46 | ||
47 | const infoBoxTransition: string = 'none'; | ||
48 | const ctaTransition: string = 'none'; | ||
49 | |||
50 | // TODO: Not sure why, but this location alone, the `dinwo` is not defined - and it throws an error thus aborting the startup sequence of ferdi | ||
51 | // if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
52 | // infoBoxTransition = 'all 0.5s'; | ||
53 | // ctaTransition = 'opacity 0.3s'; | ||
54 | // } | ||
55 | |||
47 | const styles = (theme: Theme) => ({ | 56 | const styles = (theme: Theme) => ({ |
48 | wrapper: { | 57 | wrapper: { |
49 | position: 'relative', | 58 | position: 'relative', |
@@ -58,7 +67,7 @@ const styles = (theme: Theme) => ({ | |||
58 | height: 'auto', | 67 | height: 'auto', |
59 | padding: '15px 20px', | 68 | padding: '15px 20px', |
60 | top: 0, | 69 | top: 0, |
61 | transition: 'all 0.5s', | 70 | transition: infoBoxTransition, |
62 | opacity: 1, | 71 | opacity: 1, |
63 | }, | 72 | }, |
64 | dismissing: { | 73 | dismissing: { |
@@ -73,22 +82,25 @@ const styles = (theme: Theme) => ({ | |||
73 | marginRight: 10, | 82 | marginRight: 10, |
74 | }, | 83 | }, |
75 | close: { | 84 | close: { |
76 | color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, | 85 | color: (props: IProps) => |
86 | theme.styleTypes[props.type ? props.type : 'primary'].contrast, | ||
77 | marginRight: -5, | 87 | marginRight: -5, |
78 | border: 0, | 88 | border: 0, |
79 | background: 'none', | 89 | background: 'none', |
80 | }, | 90 | }, |
81 | cta: { | 91 | cta: { |
82 | borderColor: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, | 92 | borderColor: (props: IProps) => |
93 | theme.styleTypes[props.type ? props.type : 'primary'].contrast, | ||
83 | borderRadius: theme.borderRadiusSmall, | 94 | borderRadius: theme.borderRadiusSmall, |
84 | borderStyle: 'solid', | 95 | borderStyle: 'solid', |
85 | borderWidth: 1, | 96 | borderWidth: 1, |
86 | background: 'none', | 97 | background: 'none', |
87 | color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast, | 98 | color: (props: IProps) => |
99 | theme.styleTypes[props.type ? props.type : 'primary'].contrast, | ||
88 | marginLeft: 15, | 100 | marginLeft: 15, |
89 | padding: [4, 10], | 101 | padding: [4, 10], |
90 | fontSize: theme.uiFontSize, | 102 | fontSize: theme.uiFontSize, |
91 | transition: 'opacity 0.3s', | 103 | transition: ctaTransition, |
92 | 104 | ||
93 | '&:hover': { | 105 | '&:hover': { |
94 | opacity: 0.6, | 106 | opacity: 0.6, |
@@ -113,9 +125,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
113 | }; | 125 | }; |
114 | 126 | ||
115 | dismiss() { | 127 | dismiss() { |
116 | const { | 128 | const { onDismiss } = this.props; |
117 | onDismiss, | ||
118 | } = this.props; | ||
119 | 129 | ||
120 | this.setState({ | 130 | this.setState({ |
121 | isDismissing: true, | 131 | isDismissing: true, |
@@ -129,7 +139,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
129 | this.setState({ | 139 | this.setState({ |
130 | dismissed: true, | 140 | dismissed: true, |
131 | }); | 141 | }); |
132 | }, 3000); | 142 | }, 3000); |
133 | } | 143 | } |
134 | 144 | ||
135 | componentWillUnmount(): void { | 145 | componentWillUnmount(): void { |
@@ -144,26 +154,24 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
144 | icon, | 154 | icon, |
145 | type, | 155 | type, |
146 | ctaLabel, | 156 | ctaLabel, |
147 | ctaLoading, | ||
148 | ctaOnClick, | 157 | ctaOnClick, |
149 | dismissable, | 158 | dismissable, |
150 | className, | 159 | className, |
151 | } = this.props; | 160 | } = this.props; |
152 | 161 | ||
153 | const { | 162 | const { isDismissing, dismissed } = this.state; |
154 | isDismissing, | ||
155 | dismissed, | ||
156 | } = this.state; | ||
157 | 163 | ||
158 | if (dismissed) { | 164 | if (dismissed) { |
159 | return null; | 165 | return null; |
160 | } | 166 | } |
161 | 167 | ||
162 | return ( | 168 | return ( |
163 | <div className={classnames({ | 169 | <div |
164 | [classes.wrapper]: true, | 170 | className={classnames({ |
165 | [`${className}`]: className, | 171 | [classes.wrapper]: true, |
166 | })}> | 172 | [`${className}`]: className, |
173 | })} | ||
174 | > | ||
167 | <div | 175 | <div |
168 | className={classnames({ | 176 | className={classnames({ |
169 | [classes.infobox]: true, | 177 | [classes.infobox]: true, |
@@ -172,18 +180,10 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
172 | })} | 180 | })} |
173 | data-type="franz-infobox" | 181 | data-type="franz-infobox" |
174 | > | 182 | > |
175 | {icon && ( | 183 | {icon && <Icon icon={icon} className={classes.icon} />} |
176 | <Icon icon={icon} className={classes.icon} /> | 184 | <div className={classes.content}>{children}</div> |
177 | )} | ||
178 | <div className={classes.content}> | ||
179 | {children} | ||
180 | </div> | ||
181 | {ctaLabel && ( | 185 | {ctaLabel && ( |
182 | <button | 186 | <button className={classes.cta} onClick={ctaOnClick} type="button"> |
183 | className={classes.cta} | ||
184 | onClick={ctaOnClick} | ||
185 | type="button" | ||
186 | > | ||
187 | {ctaLabel} | 187 | {ctaLabel} |
188 | </button> | 188 | </button> |
189 | )} | 189 | )} |
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx index 4a3c8274f..244aa9dc9 100644 --- a/packages/ui/src/loader/index.tsx +++ b/packages/ui/src/loader/index.tsx | |||
@@ -1,4 +1,3 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | ||
2 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
3 | import React, { Component } from 'react'; | 2 | import React, { Component } from 'react'; |
4 | import injectStyle, { withTheme } from 'react-jss'; | 3 | import injectStyle, { withTheme } from 'react-jss'; |
@@ -11,7 +10,7 @@ interface IProps extends IWithStyle { | |||
11 | color?: string; | 10 | color?: string; |
12 | } | 11 | } |
13 | 12 | ||
14 | const styles = (theme: Theme) => ({ | 13 | const styles = () => ({ |
15 | container: { | 14 | container: { |
16 | position: 'relative', | 15 | position: 'relative', |
17 | height: 60, | 16 | height: 60, |
@@ -20,12 +19,7 @@ const styles = (theme: Theme) => ({ | |||
20 | 19 | ||
21 | class LoaderComponent extends Component<IProps> { | 20 | class LoaderComponent extends Component<IProps> { |
22 | render() { | 21 | render() { |
23 | const { | 22 | const { classes, className, color, theme } = this.props; |
24 | classes, | ||
25 | className, | ||
26 | color, | ||
27 | theme, | ||
28 | } = this.props; | ||
29 | 23 | ||
30 | return ( | 24 | return ( |
31 | <div | 25 | <div |
diff --git a/packages/ui/src/typings/generic.ts b/packages/ui/src/typings/generic.ts index d5f953b9f..a2b9c041c 100644 --- a/packages/ui/src/typings/generic.ts +++ b/packages/ui/src/typings/generic.ts | |||
@@ -1,6 +1,7 @@ | |||
1 | import { Theme } from '@meetfranz/theme/lib'; | ||
2 | import { Classes } from 'jss'; | 1 | import { Classes } from 'jss'; |
3 | 2 | ||
3 | import { Theme } from '../../../theme'; | ||
4 | |||
4 | export interface IWithStyle { | 5 | export interface IWithStyle { |
5 | classes: Classes; | 6 | classes: Classes; |
6 | theme: Theme; | 7 | theme: Theme; |
diff --git a/packages/ui/tslint.json b/packages/ui/tslint.json deleted file mode 100644 index 0946f2096..000000000 --- a/packages/ui/tslint.json +++ /dev/null | |||
@@ -1,3 +0,0 @@ | |||
1 | { | ||
2 | "extends": "../../tslint.json" | ||
3 | } | ||