diff options
author | 2019-01-15 11:59:39 +0100 | |
---|---|---|
committer | 2019-01-15 11:59:39 +0100 | |
commit | e31248830eb63c8bff3d9add3baa4ca8916b74e1 (patch) | |
tree | 5424634ccd5861fdf53340ad3f1001922394c5a9 | |
parent | Publish (diff) | |
download | ferdium-app-e31248830eb63c8bff3d9add3baa4ca8916b74e1.tar.gz ferdium-app-e31248830eb63c8bff3d9add3baa4ca8916b74e1.tar.zst ferdium-app-e31248830eb63c8bff3d9add3baa4ca8916b74e1.zip |
Button, add missing success state
-rw-r--r-- | packages/forms/src/button/index.tsx | 12 | ||||
-rw-r--r-- | packages/theme/package-lock.json | 2 | ||||
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 1 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 4 | ||||
-rw-r--r-- | uidev/src/stories/button.stories.tsx | 5 |
5 files changed, 22 insertions, 2 deletions
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index d2c5ad96d..784ead04c 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -10,7 +10,7 @@ import Loader from 'react-loader'; | |||
10 | 10 | ||
11 | import { IFormField, IWithStyle } from '../typings/generic'; | 11 | import { IFormField, IWithStyle } from '../typings/generic'; |
12 | 12 | ||
13 | type ButtonType = 'primary' | 'secondary' | 'danger' | 'warning' | 'inverted'; | 13 | type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'inverted'; |
14 | 14 | ||
15 | interface IProps extends React.InputHTMLAttributes<HTMLButtonElement>, IFormField, IWithStyle { | 15 | interface IProps extends React.InputHTMLAttributes<HTMLButtonElement>, IFormField, IWithStyle { |
16 | buttonType?: ButtonType; | 16 | buttonType?: ButtonType; |
@@ -61,6 +61,14 @@ const styles = (theme: Theme) => ({ | |||
61 | fill: theme.buttonSecondaryTextColor, | 61 | fill: theme.buttonSecondaryTextColor, |
62 | }, | 62 | }, |
63 | }, | 63 | }, |
64 | success: { | ||
65 | background: theme.buttonSuccessBackground, | ||
66 | color: theme.buttonSuccessTextColor, | ||
67 | |||
68 | '& svg': { | ||
69 | fill: theme.buttonSuccessTextColor, | ||
70 | }, | ||
71 | }, | ||
64 | danger: { | 72 | danger: { |
65 | background: theme.buttonDangerBackground, | 73 | background: theme.buttonDangerBackground, |
66 | color: theme.buttonDangerTextColor, | 74 | color: theme.buttonDangerTextColor, |
@@ -144,6 +152,7 @@ class ButtonComponent extends Component<IProps> { | |||
144 | render() { | 152 | render() { |
145 | const { | 153 | const { |
146 | classes, | 154 | classes, |
155 | className, | ||
147 | theme, | 156 | theme, |
148 | disabled, | 157 | disabled, |
149 | id, | 158 | id, |
@@ -185,6 +194,7 @@ class ButtonComponent extends Component<IProps> { | |||
185 | [`${classes.button}`]: true, | 194 | [`${classes.button}`]: true, |
186 | [`${classes[buttonType as ButtonType]}`]: true, | 195 | [`${classes[buttonType as ButtonType]}`]: true, |
187 | [`${classes.disabled}`]: disabled, | 196 | [`${classes.disabled}`]: disabled, |
197 | [`${className}`]: className, | ||
188 | })} | 198 | })} |
189 | disabled={disabled} | 199 | disabled={disabled} |
190 | > | 200 | > |
diff --git a/packages/theme/package-lock.json b/packages/theme/package-lock.json index f188e8d98..a1673ffe8 100644 --- a/packages/theme/package-lock.json +++ b/packages/theme/package-lock.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/theme", | 2 | "name": "@meetfranz/theme", |
3 | "version": "1.0.1", | 3 | "version": "1.0.2", |
4 | "lockfileVersion": 1, | 4 | "lockfileVersion": 1, |
5 | "requires": true, | 5 | "requires": true, |
6 | "dependencies": { | 6 | "dependencies": { |
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index bc2db5ca0..58ef63217 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -43,6 +43,7 @@ export const buttonWarningTextColor = legacyStyles.darkThemeTextColor; | |||
43 | export const buttonLoaderColor = { | 43 | export const buttonLoaderColor = { |
44 | primary: '#FFF', | 44 | primary: '#FFF', |
45 | secondary: buttonSecondaryTextColor, | 45 | secondary: buttonSecondaryTextColor, |
46 | success: '#FFF', | ||
46 | warning: '#FFF', | 47 | warning: '#FFF', |
47 | danger: '#FFF', | 48 | danger: '#FFF', |
48 | inverted: defaultStyles.brandPrimary, | 49 | inverted: defaultStyles.brandPrimary, |
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index 92b82cff1..0f78928c3 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -58,6 +58,9 @@ export const buttonPrimaryTextColor = '#FFF'; | |||
58 | export const buttonSecondaryBackground = legacyStyles.themeGrayLighter; | 58 | export const buttonSecondaryBackground = legacyStyles.themeGrayLighter; |
59 | export const buttonSecondaryTextColor = legacyStyles.themeGray; | 59 | export const buttonSecondaryTextColor = legacyStyles.themeGray; |
60 | 60 | ||
61 | export const buttonSuccessBackground = brandSuccess; | ||
62 | export const buttonSuccessTextColor = '#FFF'; | ||
63 | |||
61 | export const buttonDangerBackground = brandDanger; | 64 | export const buttonDangerBackground = brandDanger; |
62 | export const buttonDangerTextColor = '#FFF'; | 65 | export const buttonDangerTextColor = '#FFF'; |
63 | 66 | ||
@@ -71,6 +74,7 @@ export const buttonInvertedBorder = `1px solid ${brandPrimary}`; | |||
71 | export const buttonLoaderColor = { | 74 | export const buttonLoaderColor = { |
72 | primary: '#FFF', | 75 | primary: '#FFF', |
73 | secondary: buttonSecondaryTextColor, | 76 | secondary: buttonSecondaryTextColor, |
77 | success: '#FFF', | ||
74 | warning: '#FFF', | 78 | warning: '#FFF', |
75 | danger: '#FFF', | 79 | danger: '#FFF', |
76 | inverted: brandPrimary, | 80 | inverted: brandPrimary, |
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx index 21778e081..b5906211a 100644 --- a/uidev/src/stories/button.stories.tsx +++ b/uidev/src/stories/button.stories.tsx | |||
@@ -42,6 +42,11 @@ storiesOf('Button') | |||
42 | buttonType: 'secondary', | 42 | buttonType: 'secondary', |
43 | })} /> | 43 | })} /> |
44 | )) | 44 | )) |
45 | .add('Success', () => ( | ||
46 | <WithStoreButton store={createStore({ | ||
47 | buttonType: 'success', | ||
48 | })} /> | ||
49 | )) | ||
45 | .add('Warning', () => ( | 50 | .add('Warning', () => ( |
46 | <WithStoreButton store={createStore({ | 51 | <WithStoreButton store={createStore({ |
47 | buttonType: 'warning', | 52 | buttonType: 'warning', |