feat(tile-layout): adds TileLayout component

[#103851000]

Signed-off-by: August Toman-Yih <atomanyih@pivotal.io>

package.json

@@ -107,11 +107,11 @@
     "pui-css-back-to-top": "2.0.0-alpha.4",
     "pui-css-backgrounds": "2.0.0-alpha.4",
     "pui-css-bootstrap": "2.0.0-alpha.4",
-    "pui-css-buttons": "2.0.0-alpha.4",
     "pui-css-button-group": "2.0.0-alpha.4",
+    "pui-css-buttons": "2.0.0-alpha.4",
     "pui-css-code": "2.0.0-alpha.4",
-    "pui-css-colors": "2.0.0-alpha.4",
     "pui-css-collapse": "2.0.0-alpha.4",
+    "pui-css-colors": "2.0.0-alpha.4",
     "pui-css-deprecated": "2.0.0-alpha.4",
     "pui-css-dividers": "2.0.0-alpha.4",
     "pui-css-dropdowns": "2.0.0-alpha.4",
@@ -135,6 +135,7 @@
     "pui-css-spinners": "2.0.0-alpha.4",
     "pui-css-tables": "2.0.0-alpha.4",
     "pui-css-tabs": "2.0.0-alpha.4",
+    "pui-css-tile-layout": "0.0.1",
     "pui-css-tooltips": "2.0.0-alpha.4",
     "pui-css-traffic-lights": "2.0.0-alpha.4",
     "pui-css-typography": "2.0.0-alpha.4",
@@ -168,6 +169,7 @@
     "pui-react-search-input": "2.0.0-alpha.4",
     "pui-react-sortable-table": "2.0.0-alpha.4",
     "pui-react-tabs": "2.0.0-alpha.4",
+    "pui-react-tile-layout": "2.0.0-alpha.4",
     "pui-react-tooltip": "2.0.0-alpha.4",
     "pui-react-typography": "2.0.0-alpha.4"
   },

spec/pivotal-ui-react/tile-layout/tile-layout_spec.js

@@ -0,0 +1,78 @@
+require('../spec_helper');
+
+describe('TileLayout', () => {
+  const React = require('react/addons');
+  const TileLayout = require('../../../src/pivotal-ui-react/tile-layout/tile-layout');
+  import {itPropagatesAttributes} from '../support/shared_examples';
+
+  it('creates tile-layout', () => {
+    React.render(<TileLayout></TileLayout>, root);
+    expect('#root .tile-layout').toExist();
+  });
+  it('creates tile-items', () => {
+    React.render(
+      <TileLayout>
+        <TileLayout.Item>
+          Item 1
+        </TileLayout.Item>
+        <TileLayout.Item>
+          Item 2
+        </TileLayout.Item>
+      </TileLayout>,
+      root
+    );
+
+    expect('#root .tile-layout .tile-item:eq(0)')
+      .toHaveText('Item 1');
+    expect('#root .tile-layout .tile-item:eq(1)')
+      .toHaveText('Item 2');
+  });
+  describe('columns', () => {
+    it('supports setting number of columns', () => {
+      React.render(<TileLayout columns={4}></TileLayout>, root);
+
+      expect('#root .tile-layout').toHaveClass('tile-layout-xs-4');
+    });
+
+    it('supports supports setting number of columns for different screen sizes', () => {
+      React.render(<TileLayout columns={{sm: 4, md: 3, lg: 2, xl: 1}}></TileLayout>, root);
+
+      expect('#root .tile-layout').toHaveClass('tile-layout-sm-4');
+      expect('#root .tile-layout').toHaveClass('tile-layout-md-3');
+      expect('#root .tile-layout').toHaveClass('tile-layout-lg-2');
+      expect('#root .tile-layout').toHaveClass('tile-layout-xl-1');
+    });
+  });
+
+  describe('gutters', () => {
+    it('supports no gutter', () => {
+      React.render(<TileLayout noGutter></TileLayout>, root);
+
+      expect('#root .tile-layout').not.toHaveClass('tile-gutter');
+    });
+
+    it('supports gutter', () => {
+      React.render(<TileLayout></TileLayout>, root);
+
+      expect('#root .tile-layout').toHaveClass('tile-gutter');
+    })
+  });
+
+  describe('attributes', () => {
+    beforeEach(() => {
+      React.render(
+        <TileLayout className="outer-class" id="outer-id" style={{opacity: '0.5'}}>
+          <TileLayout.Item  className="inner-class" id="inner-id" style={{opacity: '0'}}>
+            Item 1
+          </TileLayout.Item>
+        </TileLayout>,
+        root);
+    });
+    it("doesn't wipe out tile layout classes", () => {
+      expect('#root .tile-layout').toExist();
+      expect('#root .tile-layout > .tile-item').toExist();
+    });
+    itPropagatesAttributes('.tile-layout', {className: 'outer-class', id: 'outer-id', style: {opacity: '0.5'}});
+    itPropagatesAttributes('.tile-item', {className: 'inner-class', id: 'inner-id', style: {opacity: '0'}});
+  });
+});

src/pivotal-ui-react/tile-layout/package.json

@@ -0,0 +1,10 @@
+{
+  "version": "2.0.0-alpha.4",
+  "description": "React tile layout component",
+  "homepage": "http://styleguide.pivotal.io/react.html#tile_layout",
+  "dependencies": {
+    "classnames": "^1.2.0",
+    "pui-css-tile-layout": "0.0.1",
+    "pui-react-helpers": "^2.0.0-alpha.4"
+  }
+}

src/pivotal-ui-react/tile-layout/tile-layout.js

@@ -0,0 +1,150 @@
+const React = require('react');
+const classnames = require('classnames');
+import {mergeProps} from 'pui-react-helpers';
+
+const TileLayout = React.createClass({
+  propTypes: {
+    columns: React.PropTypes.oneOfType([
+      React.PropTypes.number,
+      React.PropTypes.object
+    ]),
+    noGutter: React.PropTypes.bool
+  },
+  getColumnClasses(columns) {
+    if (columns instanceof Object) {
+      const classes = [];
+
+      for (let breakpoint in columns) {
+        if (columns.hasOwnProperty(breakpoint)) {
+          classes.push(`tile-layout-${breakpoint}-${columns[breakpoint]}`);
+        }
+      }
+
+      return classes;
+    } else {
+      return `tile-layout-xs-${columns}`;
+    }
+  },
+  render() {
+    const {children, columns, noGutter, ...others} = this.props;
+
+
+    const classes = classnames(
+      this.getColumnClasses(columns),
+      noGutter ? null : 'tile-gutter',
+      'tile-layout'
+    );
+    const props = mergeProps({className: classes}, ...others);
+    return (
+      <div {...props}>
+        {children}
+      </div>
+    );
+  }
+});
+
+TileLayout.Item = React.createClass({
+  render() {
+    return (
+      <div {...mergeProps({className: 'tile-item'}, this.props)}></div>
+    );
+  }
+});
+
+export default TileLayout;
+
+/*doc
+ ---
+ title: Tile Layout
+ name: tile_layout_react
+ categories:
+ - React
+ ---
+
+ <code class="pam">
+ <i class="fa fa-download" alt="Install the Component">
+ npm install pui-react-tile-layout --save
+ </i>
+ </code>
+
+ Require the component:
+
+ ```
+ var TileLayout = require('pui-react-tile-layout');
+ ```
+
+ For the example, you also need to require `ClickableAltPanel` from [Panels](#panel_react).
+
+
+ ```react_example
+ <TileLayout columns={3}>
+   <TileLayout.Item>
+     <ClickableAltPanel>Hey</ClickableAltPanel>
+   </TileLayout.Item>
+   <TileLayout.Item>
+     <ClickableAltPanel>What</ClickableAltPanel>
+   </TileLayout.Item>
+   <TileLayout.Item>
+     <ClickableAltPanel>Hello</ClickableAltPanel>
+   </TileLayout.Item>
+   <TileLayout.Item>
+     <ClickableAltPanel>What</ClickableAltPanel>
+   </TileLayout.Item>
+ </TileLayout>
+ ```
+*/
+
+/*doc
+ ---
+ title: Responsive Breakpoints
+ name: 01_tile_layout_responsive
+ parent: tile_layout_react
+ ---
+
+ You can also pass an object setting the number of columns for responsive
+ breakpoints to the columns prop. You can set separate column values
+ (from 1 - 12 columns) for some or all of xs, sm, md, lg, and xl screen sizes.
+
+ ```react_example
+ <TileLayout columns={{xs: 1, sm: 2, md: 3}}>
+   <TileLayout.Item>
+     <ClickableAltPanel>Hey</ClickableAltPanel>
+   </TileLayout.Item>
+   <TileLayout.Item>
+     <ClickableAltPanel>What</ClickableAltPanel>
+   </TileLayout.Item>
+   <TileLayout.Item>
+     <ClickableAltPanel>Hello</ClickableAltPanel>
+   </TileLayout.Item>
+   <TileLayout.Item>
+     <ClickableAltPanel>What</ClickableAltPanel>
+   </TileLayout.Item>
+ </TileLayout>
+ ```
+
+*/
+
+/*doc
+ ---
+ title: Gutters
+ name: 02_tile_layout_gutters
+ parent: tile_layout_react
+ ---
+
+  You can make a TileLayout without gutters by passing noGutter as a prop.
+
+ ```react_example
+ <TileLayout noGutter columns={3}>
+ <TileLayout.Item>
+ <ClickableAltPanel>Hey</ClickableAltPanel>
+ </TileLayout.Item>
+ <TileLayout.Item>
+ <ClickableAltPanel>What</ClickableAltPanel>
+ </TileLayout.Item>
+ <TileLayout.Item>
+ <ClickableAltPanel>Hello</ClickableAltPanel>
+ </TileLayout.Item>
+ </TileLayout>
+ ```
+
+ */

src/pivotal-ui/components/tile-layout/README.md

@@ -0,0 +1 @@
+This contains styles used only in `pui-react-tile-layout`

src/pivotal-ui/components/tile-layout/package.json

@@ -0,0 +1,5 @@
+{
+  "homepage": "http://styleguide.pivotal.io/react.html#tile_layout",
+  "dependencies": {},
+  "version": "0.0.1"
+}

src/pivotal-ui/components/tile-layout/tile-layout.scss

@@ -0,0 +1,49 @@
+@import "../pui-variables";
+@import '../mixins';
+
+.tile-layout {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.tile-layout .tile-item {
+  display: flex;
+  box-sizing: border-box;
+
+  > * {
+    flex-grow: 1;
+  }
+}
+
+$breakpoints: (xs, 0),
+  (sm, $screen-sm-min),
+  (md, $screen-md-min),
+  (lg, $screen-lg-min),
+  (xl, $screen-xl-min);
+
+@each $breakpoint-name, $breakpoint-variable in $breakpoints {
+  @media only screen and (min-width: $breakpoint-variable) {
+    @for $numCols from 1 to 13 {
+
+      .tile-layout.tile-layout-#{$breakpoint-name}-#{$numCols} {
+        .tile-item {
+          width: 100% / $numCols;
+        }
+
+        &.tile-gutter .tile-item {
+          &:nth-child(n) {
+            padding: $grid-gutter-width / 2;
+          }
+
+          &:nth-child(#{$numCols}n) {
+            padding-right: 0;
+          }
+
+          &:nth-child(#{$numCols}n + 1) {
+            padding-left: 0;
+          }
+        }
+      }
+    }
+  }
+}

src/pivotal-ui/javascripts/components.js

@@ -1,5 +1,6 @@
 import selectFancy from 'pui-react-select-fancy';
 import autocomplete from 'pui-react-autocomplete';
+import TileLayout from 'pui-react-tile-layout';
 
 module.exports = {
   DefaultH1: require('pui-react-typography').DefaultH1,
@@ -127,4 +128,5 @@ module.exports = {
   TableCell: require('pui-react-sortable-table').TableCell,
   TableRow: require('pui-react-sortable-table').TableRow,
   ...autocomplete,
-  ...selectFancy};
+  ...selectFancy,
+  TileLayout: TileLayout};