[WIP] Use default theme values if not passed in responsive object (#52)

* refactor: support using theme value if does not exist in gutter object

* test: update to use default theme options when value doe snot exist in prop

* refactor: gutter logic to be simpler

* docs: update readme on default responsive behaviour

* chore: bump version number

README.md

@@ -127,6 +127,16 @@ class Component extends React.Component {
 
 This will now generate CSS with `min-width` media queries for the responsive values. **Note:** a media query is not set for any value assigned to `xs` due to mobile first min-width media query structure.
 
+#### Default values when using responsive objects
+
+Props such as `gutter` by will use the default value from the ThemeProvider if not set within the object. For example:
+
+```js
+<Row gutter={{ xs: 1, lg: 2 }}>
+```
+
+Will take the `sm` and `md` gutter values set by default in the ThemeProvider. To remove these simple set them as `0` to these within the responsive object.
+
 ## Theming
 
 ### Default Theme

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flexa",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React flexbox grid system using styled components",
   "main": "dist/index.js",
   "scripts": {

src/helpers/gutter/gutter.js

@@ -9,11 +9,17 @@ import { themeProvider } from '../../theme';
 const { theme } = themeProvider;
 
 export const gutterWidth = (props, breakpoint) => {
-  if (has(props, 'gutter')) {
-    return isObject(props.gutter) ? props.gutter[breakpoint] : props.gutter;
+  if (isObject(props.gutter) && has(props, `gutter.${breakpoint}`)) {
+    return props.gutter[breakpoint];
   }
 
-  return isObject(theme(props).gutter) ? theme(props).gutter[breakpoint] : theme(props).gutter;
+  if (!isObject(props.gutter) && has(props, 'gutter')) {
+    return props.gutter;
+  }
+
+  return isObject(theme(props).gutter)
+    ? theme(props).gutter[breakpoint]
+    : theme(props).gutter;
 };
 
 export const row = (props, breakpoint) => {

src/helpers/gutter/gutter.spec.js

@@ -19,6 +19,14 @@ describe('gutterWidth', () => {
     expect(gutterWidth(mockProps, 'lg')).toEqual(9);
   });
 
+  test('should use default breakpoint for if a value is not used within the object', () => {
+    const mockProps = { xs: 1, lg: 4, gutter: { sm: 7, lg: 9 } };
+    expect(gutterWidth(mockProps, 'xs')).toEqual(0.5);
+    expect(gutterWidth(mockProps, 'sm')).toEqual(7);
+    expect(gutterWidth(mockProps, 'md')).toEqual(1);
+    expect(gutterWidth(mockProps, 'lg')).toEqual(9);
+  });
+
   test('should work with strings and numbers', () => {
     const mockProps = { xs: 1, lg: 4, gutter: { sm: '12rem', lg: 42 } };
     expect(gutterWidth(mockProps, 'sm')).toEqual('12rem');
@@ -41,9 +49,16 @@ describe('row', () => {
     expect(rowGutter).toContain('margin-left: calc(-12px / 2);');
   });
 
-  test('should return null if breakpoint does not exist', () => {
+  test('should return theme value if breakpoint does not exist in gutter', () => {
     const mockProps = { xs: 1, gutter: { sm: '12px' } };
-    const rowGutter = row(mockProps, 'lg');
+    const rowGutter = row(mockProps, 'lg').join('');
+    expect(rowGutter).toContain('margin-right: calc(-1rem / 2);');
+    expect(rowGutter).toContain('margin-left: calc(-1rem / 2);');
+  });
+
+  test('should return null if breakpoint does not exist in theme and gutter', () => {
+    const mockProps = { xs: 1, gutter: { sm: '12px' } };
+    const rowGutter = row(mockProps, 'xlg');
     expect(rowGutter).toEqual(null);
   });
 });
@@ -63,9 +78,16 @@ describe('col', () => {
     expect(colGutter).toContain('padding-left: calc(12px / 2);');
   });
 
-  test('should return null if breakpoint does not exist', () => {
+  test('should return null if breakpoint does not exist in gutter', () => {
+    const mockProps = { xs: 1, gutter: { sm: '12px' } };
+    const colGutter = col(mockProps, 'lg').join('');
+    expect(colGutter).toContain('padding-right: calc(1rem / 2);');
+    expect(colGutter).toContain('padding-left: calc(1rem / 2);');
+  });
+
+  test('should return null if breakpoint does not exist in theme and gutter', () => {
     const mockProps = { xs: 1, gutter: { sm: '12px' } };
-    const colGutter = col(mockProps, 'lg');
+    const colGutter = col(mockProps, 'xlg');
     expect(colGutter).toEqual(null);
   });
 });