feat(react): add unstable_Grid components

packages/react/package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@carbon/icons-react": "10.5.0",
+    "@carbon/layout": "10.4.0",
     "classnames": "2.2.6",
     "downshift": "^1.31.14",
     "flatpickr": "4.6.1",

packages/react/src/__tests__/index-test.js

@@ -181,6 +181,9 @@ describe('Carbon Components React', () => {
         "TooltipDefinition",
         "TooltipIcon",
         "UnorderedList",
+        "unstable_Column",
+        "unstable_Grid",
+        "unstable_Row",
       ]
     `);
   });

packages/react/src/components/Layout/Column.js

@@ -0,0 +1,129 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { breakpoints as gridBreakpoints } from '@carbon/layout';
+import { settings } from 'carbon-components';
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const { prefix } = settings;
+
+function unstable_Column({
+  as = 'div',
+  className: customClassName,
+  offset = [],
+  span = [],
+  noGutter,
+  noGutterLeft,
+  noGutterRight,
+  ...rest
+}) {
+  const columnsPerBreakpoint = mapBreakpointsToArray(span).map(
+    (columnCount, i) => {
+      return `${prefix}--col-${breakpoints[i]}-${columnCount}`;
+    }
+  );
+  const offsetsPerBreakpoint = mapBreakpointsToArray(offset).map(
+    (offsetCount, i) => {
+      return `${prefix}--offset-${breakpoints[i]}-${offsetCount}`;
+    }
+  );
+  const className = cx(
+    {
+      // By default, we'll want to use an auto-column if no span or offset is
+      // given
+      [`${prefix}--col`]:
+        columnsPerBreakpoint.length === 0 && offsetsPerBreakpoint.length === 0,
+      [`${prefix}--no-gutter`]: noGutter,
+      [`${prefix}--no-gutter--left`]: noGutterLeft,
+      [`${prefix}--no-gutter--right`]: noGutterRight,
+    },
+    ...columnsPerBreakpoint,
+    ...offsetsPerBreakpoint,
+    customClassName
+  );
+
+  return React.createElement(as, {
+    ...rest,
+    className,
+  });
+}
+
+const breakpointPropType = PropTypes.oneOfType([
+  PropTypes.arrayOf(PropTypes.number),
+  PropTypes.shape({
+    sm: PropTypes.number,
+    md: PropTypes.number,
+    lg: PropTypes.number,
+    xlg: PropTypes.number,
+    max: PropTypes.number,
+  }),
+]);
+
+unstable_Column.propTypes = {
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+
+  /**
+   * Provide a custom className to be applied to the containing node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the number of columns to offset in either an object syntax or in an
+   * array syntax
+   */
+  offset: breakpointPropType,
+
+  /**
+   * Specify the number of columns to span in either an object syntax or in an
+   * array syntax
+   */
+  span: breakpointPropType,
+
+  /**
+   * Specify if the column should have no gutter
+   */
+  noGutter: PropTypes.bool,
+
+  /**
+   * Specify if the column should have no left gutter
+   */
+  noGutterLeft: PropTypes.bool,
+
+  /**
+   * Specify if the column should have no right gutter
+   */
+  noGutterRight: PropTypes.bool,
+};
+
+const breakpoints = Object.keys(gridBreakpoints);
+
+/**
+ * Map a given object or array that represents breakpoint options to an array
+ * that will be used to specify column count classes. This should transform a
+ * given object in the shape: `{ sm: 4, md: 8, lg: 16}` into: `[4, 8, 16]`. Any
+ * gaps between breakpoints will be considered holes in the resulting array.
+ *
+ * @param {Array|object} object
+ * @returns {Array}
+ */
+function mapBreakpointsToArray(object) {
+  if (Array.isArray(object)) {
+    return object;
+  }
+  return Object.keys(object).reduce((acc, key) => {
+    const index = breakpoints.indexOf(key);
+    acc[index] = object[key];
+    return acc;
+  }, []);
+}
+
+export default unstable_Column;