From da67d89c17b093a0af3fdb6e3810219a76390ec8 Mon Sep 17 00:00:00 2001
From: John <john.elric@gmail.com>
Date: Wed, 6 Dec 2017 11:26:52 +0100
Subject: [PATCH] improve breakpoint props (#8)

---
 .../__snapshots__/columns.test.js.snap        |  32 ++++
 .../columns/__test__/columns.test.js          |  17 ++
 src/components/columns/columns.js             |  12 ++
 src/components/columns/columns.story.js       |  20 ++-
 src/components/columns/components/column.js   | 153 +++++++++++++++---
 5 files changed, 210 insertions(+), 24 deletions(-)

diff --git a/src/components/columns/__test__/__snapshots__/columns.test.js.snap b/src/components/columns/__test__/__snapshots__/columns.test.js.snap
index 5a7b2af1..d3871282 100644
--- a/src/components/columns/__test__/__snapshots__/columns.test.js.snap
+++ b/src/components/columns/__test__/__snapshots__/columns.test.js.snap
@@ -89,3 +89,35 @@ exports[`Columns component Should have columns one column half width, other narr
   </div>
 </div>
 `;
+
+exports[`Columns component Should have throw warning if deprecated prop is used but render it anyway 1`] = `
+<div
+  className="columns is-multiline"
+  style={Object {}}
+>
+  <div
+    className="column is-half-mobile"
+    style={Object {}}
+  >
+    1
+  </div>
+  <div
+    className="column is-narrow"
+    style={Object {}}
+  >
+    2
+  </div>
+  <div
+    className="column"
+    style={Object {}}
+  >
+    3
+  </div>
+  <div
+    className="column"
+    style={Object {}}
+  >
+    4
+  </div>
+</div>
+`;
diff --git a/src/components/columns/__test__/columns.test.js b/src/components/columns/__test__/columns.test.js
index d3a34286..af350591 100644
--- a/src/components/columns/__test__/columns.test.js
+++ b/src/components/columns/__test__/columns.test.js
@@ -3,6 +3,12 @@ import renderer from 'react-test-renderer';
 import Columns from '..';
 
 describe('Columns component', () => {
+  beforeEach(() => {
+    console.warn = jest.genMockFn();
+  });
+  afterAll(() => {
+    console.warn.mockRestore();
+  });
   it('Should have columns classname', () => {
     const component = renderer.create(
       <Columns>
@@ -32,4 +38,15 @@ describe('Columns component', () => {
       </Columns>);
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should have throw warning if deprecated prop is used but render it anyway', () => {
+    const component = renderer.create(
+      <Columns>
+        <Columns.Column mobileSize="half">1</Columns.Column>
+        <Columns.Column narrow>2</Columns.Column>
+        <Columns.Column>3</Columns.Column>
+        <Columns.Column>4</Columns.Column>
+      </Columns>);
+    expect(global.console.warn).toBeCalled();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/src/components/columns/columns.js b/src/components/columns/columns.js
index 287ad078..a2508f16 100644
--- a/src/components/columns/columns.js
+++ b/src/components/columns/columns.js
@@ -12,9 +12,21 @@ export default class Columns extends PureComponent {
     children: PropTypes.node,
     className: PropTypes.string,
     style: PropTypes.object,
+    /**
+     * Breakpoint where columns become stacked.
+     */
     breakpoint: PropTypes.oneOf(breakpoints),
+    /**
+     * `true` to remove space between columns
+     */
     gapless: PropTypes.bool,
+    /**
+     * `true` if you want to use more than one line if you add more column elements that would fit in a single row.
+     */
     multiline: PropTypes.bool,
+    /**
+     * `true` you want the columns inside to be horizontaly centered
+     */
     centered: PropTypes.bool,
   }
 
diff --git a/src/components/columns/columns.story.js b/src/components/columns/columns.story.js
index 419c12c7..09dedca0 100644
--- a/src/components/columns/columns.story.js
+++ b/src/components/columns/columns.story.js
@@ -449,11 +449,21 @@ storiesOf('Columns', module)
   .add('Different column size per breakpoint', withInfo('')(() => (
     <Columns breakpoint="mobile">
       <Columns.Column
-        mobileSize="three-quarters"
-        tabletSize="two-thirds"
-        desktopSize="half"
-        widescreenSize="one-third"
-        fullhfSize="one-quarter"
+        mobile={{
+          size: 'three-quarters',
+        }}
+        tablet={{
+          size: 'two-thirds',
+        }}
+        desktop={{
+          size: 'half',
+        }}
+        widescreen={{
+          size: 'one-third',
+        }}
+        fullhd={{
+          size: 'one-quarter',
+        }}
       >
         <p className="bd-notification is-success">
           is-three-quarters-mobile<br />
diff --git a/src/components/columns/components/column.js b/src/components/columns/components/column.js
index 6a9c8a2d..7e90091d 100644
--- a/src/components/columns/components/column.js
+++ b/src/components/columns/components/column.js
@@ -3,32 +3,106 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import CONSTANTS from '../constants';
 
-
-import GLOBAL_CONSTANTS from '../../../constants';
-
 const sizes = [null, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
   .concat(Object.keys(CONSTANTS.SIZES).map(key => CONSTANTS.SIZES[key]));
 
-const breakpoints = [true, false]
-  .concat(Object.keys(GLOBAL_CONSTANTS.BREAKPOINTS).map(key => GLOBAL_CONSTANTS.BREAKPOINTS[key]));
-
 export default class Column extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     style: PropTypes.object,
+    /**
+     * The size of the column. the maximun size of a row is 12
+     */
     size: PropTypes.oneOf(sizes),
+    /**
+     * Create horizontal space around Column elements
+     */
     offset: PropTypes.oneOf(sizes),
-    narrow: PropTypes.oneOf(breakpoints),
+    /**
+     * If you want a column to only take the space it needs, use the narrow modifier. The other column(s) will fill up the remaining space.
+     */
+    narrow: PropTypes.bool,
+    /**
+     * Size, Offset and Narrow props for Mobile devices (Up to 768px)
+     */
+    mobile: PropTypes.shape({
+      size: PropTypes.oneOf(sizes),
+      offset: PropTypes.oneOf(sizes),
+      narrow: PropTypes.bool,
+    }),
+    /**
+     * Size, Offset and Narrow props for Tablet devices (Between 769px and 1023px)
+     */
+    tablet: PropTypes.shape({
+      size: PropTypes.oneOf(sizes),
+      offset: PropTypes.oneOf(sizes),
+      narrow: PropTypes.bool,
+    }),
+    /**
+    * Size, Offset and Narrow props for Desktop devices (Between 1024px and 1215px)
+    */
+    desktop: PropTypes.shape({
+      size: PropTypes.oneOf(sizes),
+      offset: PropTypes.oneOf(sizes),
+      narrow: PropTypes.bool,
+    }),
+    /**
+    * Size, Offset and Narrow props for WideScreen devices (Between 1216px and 1407px)
+    */
+    widescreen: PropTypes.shape({
+      size: PropTypes.oneOf(sizes),
+      offset: PropTypes.oneOf(sizes),
+      narrow: PropTypes.bool,
+    }),
+    /**
+    * Size, Offset and Narrow props for FullHD devices (1408px and above)
+    */
+    fullhd: PropTypes.shape({
+      size: PropTypes.oneOf(sizes),
+      offset: PropTypes.oneOf(sizes),
+      narrow: PropTypes.bool,
+    }),
+    /**
+     * @deprecated Please use mobile.size prop
+     */
     mobileSize: PropTypes.oneOf(sizes),
+
+    /**
+     * @deprecated Please use table.size prop
+     */
     tabletSize: PropTypes.oneOf(sizes),
+    /**
+     * @deprecated Please use desktop.size prop
+     */
     desktopSize: PropTypes.oneOf(sizes),
+    /**
+     * @deprecated Please use widescreen.size prop
+     */
     widescreenSize: PropTypes.oneOf(sizes),
+    /**
+     * @deprecated Please use fullhd.size prop
+     */
     fullhdSize: PropTypes.oneOf(sizes),
+    /**
+     * @deprecated Please use mobile.offset prop
+     */
     mobileOffset: PropTypes.oneOf(sizes),
+    /**
+     * @deprecated Please use tablet.offset prop
+     */
     tabletOffset: PropTypes.oneOf(sizes),
+    /**
+     * @deprecated Please use desktop.offset prop
+     */
     desktopOffset: PropTypes.oneOf(sizes),
+    /**
+     * @deprecated Please use widescreen.offset prop
+     */
     widescreenOffset: PropTypes.oneOf(sizes),
+    /**
+     * @deprecated Please use fullhd.offset prop
+     */
     fullhdOffset: PropTypes.oneOf(sizes),
   }
 
@@ -38,7 +112,32 @@ export default class Column extends PureComponent {
     style: {},
     size: null,
     offset: null,
-    narrow: null,
+    narrow: false,
+    mobile: {
+      size: null,
+      offset: null,
+      narrow: false,
+    },
+    tablet: {
+      size: null,
+      offset: null,
+      narrow: false,
+    },
+    desktop: {
+      size: null,
+      offset: null,
+      narrow: false,
+    },
+    widescreen: {
+      size: null,
+      offset: null,
+      narrow: false,
+    },
+    fullhd: {
+      size: null,
+      offset: null,
+      narrow: false,
+    },
     mobileSize: null,
     tabletSize: null,
     desktopSize: null,
@@ -59,6 +158,12 @@ export default class Column extends PureComponent {
       size,
       offset,
       narrow,
+      mobile,
+      tablet,
+      desktop,
+      widescreen,
+      fullhd,
+
       mobileSize,
       tabletSize,
       desktopSize,
@@ -70,22 +175,32 @@ export default class Column extends PureComponent {
       widescreenOffset,
       fullhdOffset,
     } = this.props;
+
+    if (mobileSize || tabletSize || desktopSize || widescreenSize || fullhdSize || mobileOffset || tabletOffset || desktopOffset || widescreenOffset || fullhdOffset) {
+      console.warn('DEPRECATION Warning: The props: mobileSize tabletSize desktopSize widescreenSize fullhdSize mobileOffset tabletOffset desktopOffset widescreenOffset fullhdOffset are deprecated, please use the mobile.size... alternatives');
+    }
+
     return (
       <div
         className={classNames(className, 'column', {
         [`is-${size}`]: size,
-        [`is-${mobileSize}-mobile`]: mobileSize,
-        [`is-${tabletSize}-tablet`]: tabletSize,
-        [`is-${desktopSize}-desktop`]: desktopSize,
-        [`is-${widescreenSize}-widescreen`]: widescreenSize,
-        [`is-${fullhdSize}-fullhd`]: fullhdSize,
-        [`is-${mobileOffset}-mobile`]: mobileOffset,
-        [`is-${tabletOffset}-tablet`]: tabletOffset,
-        [`is-${desktopOffset}-desktop`]: desktopOffset,
-        [`is-${widescreenOffset}-widescreen`]: widescreenOffset,
-        [`is-${fullhdOffset}-fullhd`]: fullhdOffset,
+        [`is-${mobile.size || mobileSize}-mobile`]: mobile.size || mobileSize,
+        [`is-${tablet.size || tabletSize}-tablet`]: tablet.size || tabletSize,
+        [`is-${desktop.size || desktopSize}-desktop`]: desktop.size || desktopSize,
+        [`is-${widescreen.size || widescreenSize}-widescreen`]: widescreen.size || widescreenSize,
+        [`is-${fullhd.size || fullhdSize}-fullhd`]: fullhd.size || fullhdSize,
+        [`is-offset-${mobile.offset || mobileOffset}-mobile`]: mobile.offset || mobileOffset,
+        [`is-offset-${tablet.offset || tabletOffset}-tablet`]: tablet.offset || tabletOffset,
+        [`is-offset-${desktop.offset || desktopOffset}-desktop`]: desktop.offset || desktopOffset,
+        [`is-offset-${widescreen.offset || widescreenOffset}-widescreen`]: widescreen.offset || widescreenOffset,
+        [`is-offset-${fullhd.offset || fullhdOffset}-fullhd`]: fullhd.offset || fullhdOffset,
         [`is-offset-${offset}`]: offset,
-        [`is-narrow${typeof narrow !== 'boolean' ? `-${narrow}` : ''}`]: narrow,
+        'is-narrow': narrow,
+        'is-narrow-mobile': mobile.narrow,
+        'is-narrow-tablet': tablet.narrow,
+        'is-narrow-desktop': desktop.narrow,
+        'is-narrow-widescreen': widescreen.narrow,
+        'is-narrow-fullhd': fullhd.narrow,
       })}
         style={style}
       >