diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/ui/FeatureItem.js | 38 | ||||
-rw-r--r-- | src/components/ui/FeatureList.js | 99 | ||||
-rw-r--r-- | src/components/ui/Input.js | 10 |
3 files changed, 5 insertions, 142 deletions
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js deleted file mode 100644 index 646cf56ca..000000000 --- a/src/components/ui/FeatureItem.js +++ /dev/null | |||
@@ -1,38 +0,0 @@ | |||
1 | import React from 'react'; | ||
2 | import injectSheet from 'react-jss'; | ||
3 | import { Icon } from '@meetfranz/ui'; | ||
4 | import classnames from 'classnames'; | ||
5 | import { mdiCheckCircle } from '@mdi/js'; | ||
6 | |||
7 | const styles = (theme) => ({ | ||
8 | featureItem: { | ||
9 | borderBottom: [1, 'solid', theme.defaultContentBorder], | ||
10 | padding: [8, 0], | ||
11 | display: 'flex', | ||
12 | alignItems: 'center', | ||
13 | textAlign: 'left', | ||
14 | }, | ||
15 | featureIcon: { | ||
16 | fill: theme.brandSuccess, | ||
17 | marginRight: 10, | ||
18 | }, | ||
19 | }); | ||
20 | |||
21 | export const FeatureItem = injectSheet(styles)(({ | ||
22 | classes, className, name, icon, | ||
23 | }) => ( | ||
24 | <li className={classnames({ | ||
25 | [classes.featureItem]: true, | ||
26 | [className]: className, | ||
27 | })} | ||
28 | > | ||
29 | {icon ? ( | ||
30 | <span className={classes.featureIcon}>{icon}</span> | ||
31 | ) : ( | ||
32 | <Icon icon={mdiCheckCircle} className={classes.featureIcon} size={1.5} /> | ||
33 | )} | ||
34 | {name} | ||
35 | </li> | ||
36 | )); | ||
37 | |||
38 | export default FeatureItem; | ||
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js deleted file mode 100644 index 14e7ec3c4..000000000 --- a/src/components/ui/FeatureList.js +++ /dev/null | |||
@@ -1,99 +0,0 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { defineMessages, injectIntl } from 'react-intl'; | ||
4 | |||
5 | import { FeatureItem } from './FeatureItem'; | ||
6 | |||
7 | const messages = defineMessages({ | ||
8 | availableRecipes: { | ||
9 | id: 'pricing.features.recipes', | ||
10 | defaultMessage: 'Choose from more than 70 Services', // TODO: Make this dynamic | ||
11 | }, | ||
12 | accountSync: { | ||
13 | id: 'pricing.features.accountSync', | ||
14 | defaultMessage: 'Account Synchronisation', | ||
15 | }, | ||
16 | desktopNotifications: { | ||
17 | id: 'pricing.features.desktopNotifications', | ||
18 | defaultMessage: 'Desktop Notifications', | ||
19 | }, | ||
20 | unlimitedServices: { | ||
21 | id: 'pricing.features.unlimitedServices', | ||
22 | defaultMessage: 'Add unlimited services', | ||
23 | }, | ||
24 | spellchecker: { | ||
25 | id: 'pricing.features.spellchecker', | ||
26 | defaultMessage: 'Spellchecker support', | ||
27 | }, | ||
28 | workspaces: { | ||
29 | id: 'pricing.features.workspaces', | ||
30 | defaultMessage: 'Workspaces', | ||
31 | }, | ||
32 | customWebsites: { | ||
33 | id: 'pricing.features.customWebsites', | ||
34 | defaultMessage: 'Add Custom Websites', | ||
35 | }, | ||
36 | onPremise: { | ||
37 | id: 'pricing.features.onPremise', | ||
38 | defaultMessage: 'On-premise & other Hosted Services', | ||
39 | }, | ||
40 | thirdPartyServices: { | ||
41 | id: 'pricing.features.thirdPartyServices', | ||
42 | defaultMessage: 'Install 3rd party services', | ||
43 | }, | ||
44 | serviceProxies: { | ||
45 | id: 'pricing.features.serviceProxies', | ||
46 | defaultMessage: 'Service Proxies', | ||
47 | }, | ||
48 | teamManagement: { | ||
49 | id: 'pricing.features.teamManagement', | ||
50 | defaultMessage: 'Team Management', | ||
51 | }, | ||
52 | }); | ||
53 | |||
54 | export class FeatureList extends Component { | ||
55 | static propTypes = { | ||
56 | className: PropTypes.string, | ||
57 | featureClassName: PropTypes.string, | ||
58 | }; | ||
59 | |||
60 | static defaultProps = { | ||
61 | className: '', | ||
62 | featureClassName: '', | ||
63 | }; | ||
64 | |||
65 | render() { | ||
66 | const { className, featureClassName } = this.props; | ||
67 | const { intl } = this.props; | ||
68 | |||
69 | const features = [ | ||
70 | messages.availableRecipes, | ||
71 | messages.accountSync, | ||
72 | messages.desktopNotifications, | ||
73 | |||
74 | messages.spellchecker, | ||
75 | |||
76 | messages.workspaces, | ||
77 | messages.customWebsites, | ||
78 | messages.thirdPartyServices, | ||
79 | |||
80 | messages.unlimitedServices, | ||
81 | messages.onPremise, | ||
82 | messages.serviceProxies, | ||
83 | messages.teamManagement, | ||
84 | ]; | ||
85 | |||
86 | return ( | ||
87 | <ul className={className}> | ||
88 | {features.map(feature => ( | ||
89 | <FeatureItem | ||
90 | name={intl.formatMessage(feature)} | ||
91 | className={featureClassName} | ||
92 | /> | ||
93 | ))} | ||
94 | </ul> | ||
95 | ); | ||
96 | } | ||
97 | } | ||
98 | |||
99 | export default injectIntl(FeatureList); | ||
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js index 335367f03..43fab10ee 100644 --- a/src/components/ui/Input.js +++ b/src/components/ui/Input.js | |||
@@ -42,7 +42,7 @@ class Input extends Component { | |||
42 | passwordScore: 0, | 42 | passwordScore: 0, |
43 | }; | 43 | }; |
44 | 44 | ||
45 | inputElement = null; | 45 | inputElement; |
46 | 46 | ||
47 | componentDidMount() { | 47 | componentDidMount() { |
48 | if (this.props.focus) { | 48 | if (this.props.focus) { |
@@ -133,10 +133,10 @@ class Input extends Component { | |||
133 | {/* <progress value={this.state.passwordScore} max="100" /> */} | 133 | {/* <progress value={this.state.passwordScore} max="100" /> */} |
134 | <meter | 134 | <meter |
135 | value={passwordScore < 5 ? 5 : passwordScore} | 135 | value={passwordScore < 5 ? 5 : passwordScore} |
136 | low="30" | 136 | low={30} |
137 | high="75" | 137 | high={75} |
138 | optimum="100" | 138 | optimum={100} |
139 | max="100" | 139 | max={100} |
140 | /> | 140 | /> |
141 | </div> | 141 | </div> |
142 | )} | 142 | )} |