feat: Checkbox color updates & Extending theme based styling to varia…

…nts (#46)

* Allow for color props for CheckboxGroup

* Modify to support better nested styling

* Update to support another style syntax, Address feedback

* Major version bump

* Revert "Major version bump"

This reverts commit fba7a2b.

* Remove extra pattern

* Add toplevel styles instead of components

* Add util tests

src/Form/Checkbox.js

@@ -58,14 +58,14 @@ class Checkbox extends React.Component {
     iconOff: PropTypes.string,
     iconSize: PropTypes.number,
     fontSize: PropTypes.number,
-    color: PropTypes.string,
     horizontal: PropTypes.bool,
     disabled: PropTypes.bool,
     styles: PropTypes.shape(),
+    colorOn: PropTypes.string,
+    colorOff: PropTypes.string,
   };
 
   static defaultProps = {
-    color: 'primary',
     iconOn: 'checkbox-marked',
     iconOff: 'checkbox-blank-outline',
     valueTrue: true,

src/Form/CheckboxGroup.js

@@ -9,7 +9,6 @@ import { createEasyInput } from './EasyInput';
 class CheckboxGroup extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
-    color: PropTypes.string,
     horizontal: PropTypes.bool,
     value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
     choices: PropTypes.arrayOf(
@@ -20,13 +19,15 @@ class CheckboxGroup extends Component {
       })
     ).isRequired,
     onChange: PropTypes.func,
+    colorOn: PropTypes.string,
+    colorOff: PropTypes.string,
   };
 
   static defaultProps = {
-    defaultValue: [],
-    color: 'primary',
     horizontal: false,
     onChange() {},
+    colorOn: 'primary',
+    colorOff: 'grayMid',
   };
 
   state = {
@@ -60,7 +61,7 @@ class CheckboxGroup extends Component {
   };
 
   render() {
-    const { name, color, choices, error, horizontal } = this.props;
+    const { name, choices, error, horizontal, colorOn, colorOff } = this.props;
     const { selected } = this.state;
 
     return (
@@ -77,7 +78,8 @@ class CheckboxGroup extends Component {
                   id={key}
                   name={key}
                   label={choice.label}
-                  color={color}
+                  colorOn={colorOn}
+                  colorOff={colorOff}
                   horizontal={horizontal}
                   value={selected && selected.includes(value) ? value : null}
                   valueTrue={value}

src/__snapshots__/utils.spec.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#utils #getComponentStyle should return top-level component style from theme 1`] = `
+"
+      background-color: tomato;
+    "
+`;
+
+exports[`#utils #getComponentVariant should return primary variant from theme 1`] = `
+Object {
+  "style": "
+          background-color: blue;
+        ",
+}
+`;
+
+exports[`#utils #getComponentVariant should throw error if variant not found 1`] = `[Error: Molekule: "foobar" variant not found in theme...]`;
+
+exports[`#utils #getVariantStyles should return variant style for component from theme 1`] = `
+"
+          background-color: blue;
+        "
+`;
+
+exports[`#utils #themeGet should fallback when theme config not found 1`] = `
+Object {
+  "primary": Object {
+    "style": "background-color: green",
+  },
+}
+`;
+
+exports[`#utils #themeGet should return theme config 1`] = `
+Object {
+  "primary": Object {
+    "style": "
+          background-color: blue;
+        ",
+  },
+}
+`;

src/utils.js

@@ -4,14 +4,17 @@ import styled from 'styled-components';
 export const themeGet = (lookup, fallback) => ({ theme } = {}) => get(theme, lookup, fallback);
 
 export const getComponentVariant = (theme, componentName, variant) => {
-  const config = themeGet(`components.${componentName}.variants.${variant}`, theme.variants[componentName][variant])({
+  const config = themeGet(`variants.${componentName}.${variant}`)({
     theme,
   });
+
   if (!config) throw new Error(`Molekule: "${variant}" variant not found in theme...`);
   return config;
 };
 
-export const getComponentStyle = componentName => themeGet(`components.${componentName}.style`);
+export const getComponentStyle = componentName => themeGet(`styles.${componentName}`, {});
+
+export const getVariantStyles = (componentName, variant) => themeGet(`variants.${componentName}.${variant}.style`, {});
 
 const getComponentClassName = ({ className, theme: { classPrefix }, variant }, name) =>
   `${className || ''} ${classPrefix}-${name} ${variant ? `${classPrefix}-${name}-${variant}` : ''}`.trim();
@@ -32,10 +35,11 @@ export const createComponent = ({ name, tag = 'div', as, style, props: getBasePr
       className: getComponentClassName(finalProps, kebabCase(name)),
     };
   })`
-    ${style}
-    ${getComponentStyle(name)}
-    ${({ styles = {} }) => styles[name] || {}}
-  `;
+  ${style}
+  ${getComponentStyle(name)}
+  ${p => getVariantStyles(name, p.variant)}
+  ${({ styles = {} }) => styles[name] || {}}
+`;
 };
 
 // eslint-disable-next-line

src/utils.spec.js

@@ -0,0 +1,58 @@
+import { getComponentStyle, getVariantStyles, getComponentVariant, themeGet } from './utils';
+
+const MOCK_THEME = {
+  variants: {
+    Element: {
+      primary: {
+        style: `
+          background-color: blue;
+        `,
+      },
+    },
+  },
+  styles: {
+    Element: `
+      background-color: tomato;
+    `,
+  },
+};
+
+describe('#utils', () => {
+  describe('#themeGet', () => {
+    it('should return theme config', () => {
+      expect(themeGet('variants.Element')({ theme: MOCK_THEME })).toMatchSnapshot();
+    });
+
+    it('should fallback when theme config not found', () => {
+      expect(
+        themeGet('variants.foobar', { primary: { style: `background-color: green` } })({ theme: MOCK_THEME })
+      ).toMatchSnapshot();
+    });
+  });
+
+  describe('#getComponentVariant', () => {
+    it('should return primary variant from theme', () => {
+      expect(getComponentVariant(MOCK_THEME, 'Element', 'primary')).toMatchSnapshot();
+    });
+
+    it('should throw error if variant not found', () => {
+      try {
+        getComponentVariant(MOCK_THEME, 'Element', 'foobar');
+      } catch (error) {
+        expect(error).toMatchSnapshot();
+      }
+    });
+  });
+
+  describe('#getComponentStyle', () => {
+    it('should return top-level component style from theme', () => {
+      expect(getComponentStyle('Element')({ theme: MOCK_THEME })).toMatchSnapshot();
+    });
+  });
+
+  describe('#getVariantStyles', () => {
+    it('should return variant style for component from theme', () => {
+      expect(getVariantStyles('Element', 'primary')({ theme: MOCK_THEME })).toMatchSnapshot();
+    });
+  });
+});