Allows hiding of columns at various breakpoints (#64)

* Allows hiding of columns at various breakpoints

* Simplify and add tests for isHidden

Author: joeruello

README.md

@@ -83,10 +83,10 @@ These are the **available** and **reserved** props that can be used on the `Col`
 
 | Prop          | Valid types                                                 | Valid values                                                                            | Default value | Description                                                                                                                                                                                                                                               |
 |:--------------|:------------------------------------------------------------|:----------------------------------------------------------------------------------------|:--------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `xs`          | integer                                                     | `1`-`12`<br>(based on default columns)                                                  | nill          | Sets the width of the col based the column configuration (12 by default) for the XS breakpoint and up.                                                                                                                                                    |
-| `sm`          | integer                                                     | `1`-`12`<br>(based on default columns)                                                  | nill          | Sets the width of the col based the column configuration (12 by default) for the SM breakpoint and up.                                                                                                                                                    |
-| `md`          | integer                                                     | `1`-`12`<br>(based on default columns)                                                  | nill          | Sets the width of the col based the column configuration (12 by default) for the MD breakpoint and up.                                                                                                                                                    |
-| `lg`          | integer                                                     | `1`-`12`<br>(based on default columns)                                                  | nill          | Sets the width of the col based the column configuration (12 by default) for the LG breakpoint and up.                                                                                                                                                    |
+| `xs`          | integer                                                     | `0`-`12`<br>(based on default columns)<br>`hidden`                                                  | nill          | Sets the width of the col based the column configuration (12 by default) for the XS breakpoint and up.                                                                                                                                                    |
+| `sm`          | integer                                                     | `0`-`12`<br>(based on default columns)<br>`hidden`                                                  | nill          | Sets the width of the col based the column configuration (12 by default) for the SM breakpoint and up.                                                                                                                                                    |
+| `md`          | integer                                                     | `0`-`12`<br>(based on default columns)<br>`hidden`                                                  | nill          | Sets the width of the col based the column configuration (12 by default) for the MD breakpoint and up.                                                                                                                                                    |
+| `lg`          | integer                                                     | `0`-`12`<br>(based on default columns)<br>`hidden`                                                   | nill          | Sets the width of the col based the column configuration (12 by default) for the LG breakpoint and up.                                                                                                                                                    |
 | `gutter`      | integer, string,<br>[object](#responsive-api-using-objects) | `'1rem'`<br>`'12px'`<br>`4`                                                             | `'1rem'`      | Sets the width of the gutter to be used between columns. For correct positioning you must set the same value (if custom) on the parent Row                                                                                                                |
 | `order`       | string,<br>[object](#responsive-api-using-objects)          | `-1`<br>`0`<br>`1`<br>(etc)                                                             | `0`           | By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container. [Read more about order.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-9) |
 | `alignSelf`   | string,<br>[object](#responsive-api-using-objects)          | `'auto'`<br>`'flex‑start'`<br>`'flex‑end'`<br>`'center'`<br>`'baseline'`<br>`'stretch'` | `'auto'`      | This allows the default alignment (or the one specified by align‑items) to be overridden for individual flex items. [Read more about align-self.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-14)                           |

src/components/Col/Col.js

@@ -35,10 +35,10 @@ Col.defaultProps = {
 export const alignSelfOptions = ['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'];
 
 Col.propTypes = {
-  xs: PropTypes.number,
-  sm: PropTypes.number,
-  md: PropTypes.number,
-  lg: PropTypes.number,
+  xs: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['hidden'])]),
+  sm: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['hidden'])]),
+  md: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['hidden'])]),
+  lg: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['hidden'])]),
 
   gutter: PropTypes.oneOfType([
     PropTypes.number,

src/helpers/columnWidth/columnWidth.js

@@ -8,12 +8,22 @@ const { theme } = themeProvider;
 export const percentage = (props, breakpoint) =>
   (Math.abs(props[breakpoint]) / theme(props).columns) * 100;
 
+export const isHidden = (props, breakpoint) =>
+  (props[breakpoint] === 0 || props[breakpoint] === 'hidden');
+
 const columnWidth = (props, breakpoint) => {
+  if (isHidden(props, breakpoint)) {
+    return css`
+      display:none;
+    `;
+  }
+
   const width = percentage(props, breakpoint);
 
   return has(props, `${breakpoint}`) ? css`
     flex-basis: ${width}%;
     max-width: ${width}%;
+    display: block;
   ` : null;
 };
 export default columnWidth;

src/helpers/columnWidth/columnWidth.spec.js

@@ -1,4 +1,4 @@
-import columnWidth, { percentage } from './columnWidth';
+import columnWidth, { percentage, isHidden } from './columnWidth';
 
 const mockProps = { xs: -1, sm: 2, md: 0, lg: 6 };
 
@@ -14,6 +14,15 @@ describe('percentage', () => {
   });
 });
 
+describe('isHidden', () => {
+  test('should return hidden if a given breakpoint is explicitly "0" or "hidden"', () => {
+    expect(isHidden({ xs: 0 }, 'xs')).toEqual(true);
+    expect(isHidden({ xs: 'hidden' }, 'xs')).toEqual(true);
+    expect(isHidden({ xs: undefined }, 'xs')).toEqual(false);
+    expect(isHidden({ xs: 12 }, 'xs')).toEqual(false);
+  });
+});
+
 describe('columnWidth', () => {
   test('should generate column width css', () => {
     const width = columnWidth(mockProps, 'sm').join('');
@@ -25,4 +34,15 @@ describe('columnWidth', () => {
     const width = columnWidth(mockProps, 'xl');
     expect(width).toEqual(null);
   });
+
+  test('should return "display:none" if breakpoint is explicity set to 0', () => {
+    const width = columnWidth(mockProps, 'md').join('');
+    expect(width).toContain('display:none');
+  });
+
+  test('should return "display:none" if breakpoint is explicity set to "hidden"', () => {
+    const hiddenMockProps = { xs: -1, sm: 2, md: 'hidden', lg: 6 };
+    const width = columnWidth(hiddenMockProps, 'md').join('');
+    expect(width).toContain('display:none');
+  });
 });