fix(atoms): change constants for the checkbox colors

8base · May 21, 2018 · a84ad72 · a84ad72
1 parent 7492e40
commit a84ad72
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/atoms/dataEntry/Checkbox/Checkbox.js b/src/atoms/dataEntry/Checkbox/Checkbox.js
@@ -11,7 +11,7 @@ type CheckboxProps = {
   /** checkbox label */
   label?: string,
   /** color of the check */
-  color?: 'green' | 'blue' | 'primary',
+  color?: 'primary' | 'secondary',
   /** checked state */
   checked?: boolean,
   /** when error then show error styles */
@@ -46,8 +46,8 @@ class Checkbox extends PureComponent<CheckboxProps> {
     return (
       <CheckboxWrapperTag { ...rest } tagName="label">
         <CheckboxSquareTag hasError={ hasError } disabled={ disabled } tagName="div">
-          <CheckboxIconTag checked={ checked } tagName="div">
-            <Icon name="Check" color="primary" size="xs" />
+          <CheckboxIconTag checked={ checked } color={ color } tagName="div">
+            <Icon name="Check" size="xs" />
           </CheckboxIconTag>
         </CheckboxSquareTag>
         <CheckboxTag checked={ checked } onChange={ this.onChange } type="checkbox" tagName="input" />

diff --git a/src/atoms/dataEntry/Checkbox/Checkbox.stories.js b/src/atoms/dataEntry/Checkbox/Checkbox.stories.js
@@ -29,6 +29,9 @@ export default (asStory: *) => {
       .add('without label', () => (
         <Checkbox checked />
       ))
+      .add('without secondary color', () => (
+        <Checkbox color="secondary" label="Checkbox" checked />
+      ))
       .add('with state', () => (
         <CheckboxState>
           {

diff --git a/src/atoms/dataEntry/Checkbox/Checkbox.theme.js b/src/atoms/dataEntry/Checkbox/Checkbox.theme.js
@@ -1,3 +1,5 @@
+// @flow
+
 import { createStyledTag, createTheme, getThemeColors } from 'utils';
 
 const name = 'checkbox';
@@ -10,6 +12,10 @@ const theme = createTheme(name, (colors: *): * => ({
     disabled: {
       backgroundColor: colors.LIGHT_GRAY4,
     },
+    color: {
+      primary: { color: colors.PRIMARY },
+      secondary: { color: colors.SECONDARY },
+    },
   },
 }));