[Layout]: Add new Layout components

docs/site/src/demos/layout/LayoutColumn.js

@@ -0,0 +1,26 @@
+// @flow weak
+
+import React, { PropTypes } from 'react';
+import { createStyleSheet } from 'jss-theme-reactor';
+import Block from 'material-ui/Layout';
+import { darkWhite, teal, deepPurple } from 'material-ui/styles/colors';
+
+const styleSheet = createStyleSheet('LayoutColumn', () => ({
+  root: { height: 150, width: '50%', backgroundColor: darkWhite },
+  cell1: { backgroundColor: teal[300] },
+  cell2: { backgroundColor: deepPurple[300] },
+}));
+
+export default function LayoutColumn(props, context) {
+  const { root, cell1, cell2 } = context.styleManager.render(styleSheet);
+  return (
+    <Block className={root} layout="column">
+      <Block flex className={cell1}>First item</Block>
+      <Block flex="20" className={cell2}>Second item</Block>
+    </Block>
+  );
+}
+
+LayoutColumn.contextTypes = {
+  styleManager: PropTypes.object.isRequired,
+};

docs/site/src/demos/layout/LayoutInteractive.js

@@ -0,0 +1,178 @@
+// @flow weak
+
+import React, { Component, PropTypes } from 'react';
+import { createStyleSheet } from 'jss-theme-reactor';
+import Block from 'material-ui/Layout';
+import { Radio, RadioGroup } from 'material-ui/Radio';
+import Switch from 'material-ui/Switch';
+import Text from 'material-ui/Text';
+import Button from 'material-ui/Button';
+import IconButton from 'material-ui/IconButton';
+import { teal, deepPurple } from 'material-ui/styles/colors';
+
+const styleSheet = createStyleSheet('LayoutInteractive', ({ shadows, palette }) => ({
+  root: { width: 750, backgroundColor: palette.background.paper, position: 'relative' },
+  add: { position: 'absolute', top: '42%', right: 0 },
+  demo: {
+    height: 300,
+    boxShadow: shadows[1],
+  },
+  zone: {
+    '& > div': {
+      '&:nth-child(even)': { backgroundColor: teal[300] },
+      '&:nth-child(odd)': { backgroundColor: deepPurple[300] },
+    },
+  },
+}));
+
+export default class Interactive extends Component {
+  static contextTypes = {
+    styleManager: PropTypes.object.isRequired,
+  }
+  state = {
+    block: {
+      direction: 'row',
+      justification: 'center',
+      alignment: 'center',
+      padding: false,
+      margin: false,
+      fill: false,
+      wrap: false,
+    },
+    cells: [{ flex: false }, { flex: false }, { flex: false }],
+  }
+  handleChange = (key) => (e, val) => {
+    const { block } = this.state;
+    this.setState({ block: { ...block, [key]: val } });
+  }
+  setCell = (idx) => () => {
+    const { cells } = this.state;
+    if (idx === undefined && cells.length < 30) {
+      this.setState({ cells: [...cells, { flex: false }] });
+      return;
+    }
+    if (cells.length > 1) {
+      const cellSlice = cells.slice();
+      cellSlice.splice(idx, 1);
+      this.setState({ cells: cellSlice });
+    }
+  }
+  render() {
+    const { root, add, demo, zone } = this.context.styleManager.render(styleSheet);
+    const {
+      block: { direction, justification, alignment, padding, margin, fill, wrap },
+      cells,
+    } = this.state;
+
+    return (
+      <Block className={root} layout="column" margin>
+        <Block flex="none" layout="row">
+          <Block flex layout="column">
+            <Text type="title">Direction</Text>
+            <RadioGroup
+              aria-label="Direction"
+              selectedValue={direction}
+              onChange={this.handleChange('direction')}
+            >
+              <Radio label="Row" value="row" />
+              <Radio label="Column" value="column" />
+            </RadioGroup>
+          </Block>
+          <Block flex>
+            <Block layout="row" align="center">
+              <Text type="subheading">Padding</Text>
+              <Switch
+                checked={padding}
+                onChange={this.handleChange('padding')}
+                aria-label="padding"
+              />
+            </Block>
+            <Block layout="row" align="center">
+              <Text type="subheading">Margin</Text>
+              <Switch
+                checked={margin}
+                onChange={this.handleChange('margin')}
+                aria-label="margin"
+              />
+            </Block>
+            <Block layout="row" align="center">
+              <Text type="subheading">Fill</Text>
+              <Switch
+                checked={fill}
+                onChange={this.handleChange('fill')}
+                aria-label="fill"
+              />
+            </Block>
+            <Block layout="row" align="center">
+              <Text type="subheading">Wrap</Text>
+              <Switch
+                checked={wrap}
+                onChange={this.handleChange('wrap')}
+                aria-label="wrap"
+              />
+            </Block>
+          </Block>
+          <Block flex>
+            <Text type="title">Justification</Text>
+            <RadioGroup
+              aria-label="Justification"
+              selectedValue={justification}
+              onChange={this.handleChange('justification')}
+            >
+              <Radio label="Start" value="start" />
+              <Radio label="Center" value="center" />
+              <Radio label="End" value="end" />
+              <Radio label="Space Between" value="space-between" />
+              <Radio label="Space Around" value="space-around" />
+            </RadioGroup>
+          </Block>
+          <Block flex>
+            <Text type="title">Alignment</Text>
+            <RadioGroup
+              aria-label="Alignment"
+              selectedValue={alignment}
+              onChange={this.handleChange('alignment')}
+            >
+              <Radio label="Start" value="start" />
+              <Radio label="Center" value="center" />
+              <Radio label="End" value="end" />
+              <Radio label="Stretch" value="stretch" />
+            </RadioGroup>
+          </Block>
+        </Block>
+        <Button
+          fab
+          accent
+          disabled={cells.length >= 30}
+          onClick={this.setCell()}
+          className={add}
+        >
+          <span className="material-icons">add</span>
+        </Button>
+        <Block flex className={demo} layout="row">
+          <Block
+            scroll
+            className={zone}
+            flex
+            layout={direction}
+            justify={justification}
+            align={alignment}
+            padding={padding}
+            margin={margin}
+            fill={fill}
+            wrap={wrap}
+          >
+            {
+              cells.map((cell, i) => (
+                <Block {...cell} layout="row" align="center">
+                  <IconButton accent onClick={this.setCell(i)}>delete</IconButton>
+                  <Button>{`Cell ${i + 1}`}</Button>
+                </Block>
+              ))
+            }
+          </Block>
+        </Block>
+      </Block>
+    );
+  }
+}

docs/site/src/demos/layout/LayoutRow.js

@@ -0,0 +1,26 @@
+// @flow weak
+
+import React, { PropTypes } from 'react';
+import { createStyleSheet } from 'jss-theme-reactor';
+import Block from 'material-ui/Layout';
+import { darkWhite, teal, deepPurple } from 'material-ui/styles/colors';
+
+const styleSheet = createStyleSheet('LayoutRow', () => ({
+  root: { height: 150, width: '50%', backgroundColor: darkWhite },
+  cell1: { backgroundColor: teal[300] },
+  cell2: { backgroundColor: deepPurple[300] },
+}));
+
+export default function LayoutRow(props, context) {
+  const { root, cell1, cell2 } = context.styleManager.render(styleSheet);
+  return (
+    <Block className={root} layout="row">
+      <Block className={cell1} flex>First item</Block>
+      <Block className={cell2} flex="20">Second item</Block>
+    </Block>
+  );
+}
+
+LayoutRow.contextTypes = {
+  styleManager: PropTypes.object.isRequired,
+};

docs/site/src/demos/layout/layout.md

@@ -0,0 +1,17 @@
+# Layout
+
+Layout is based on [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) and inspired by [angular material](https://material.angularjs.org/latest/layout/introduction)
+
+
+## Row layout
+
+{{demo='demos/layout/LayoutRow.js'}}
+
+## Column layout
+
+{{demo='demos/layout/LayoutColumn.js'}}
+
+
+## Play
+
+{{demo='demos/layout/LayoutInteractive.js'}}

src/Layout/Block.js

@@ -0,0 +1,7 @@
+// @flow weak
+import withLayout from './with-layout';
+
+/*
+* This is the Base <Block /> Element
+*/
+export default withLayout('div');

src/Layout/Block.spec.js

@@ -0,0 +1,126 @@
+// @flow weak
+/* eslint-env mocha */
+/* eslint react/prop-types: off */
+import React from 'react';
+import { assert } from 'chai';
+import { createShallowWithContext, createMountWithContext } from 'test/utils';
+import Block from './Block';
+import { styleSheet } from './with-layout';
+
+describe('<Block /> component', () => {
+  let shallow;
+  let mount;
+  let classes;
+  before(() => {
+    shallow = createShallowWithContext();
+    mount = createMountWithContext();
+    classes = shallow.context.styleManager.render(styleSheet);
+  });
+  it('Renders a div', () => {
+    const wrapper = shallow(<Block />);
+    assert.isTrue(wrapper.is('div'), 'should be a div');
+  });
+
+  it('should render with layout classes', () => {
+    const wrapper = shallow(<Block layout="row" />);
+    const className = wrapper.prop('className');
+    assert.isOk(className, 'should have className prop');
+    const classNames = className.split(' ');
+    const expected = [
+      classes.layoutRow,
+      classes.alignStretch,
+      classes.justifyStart,
+    ];
+    assert.sameMembers(classNames, expected, `should have className prop be ${expected.join(' ')}`);
+  });
+  it('should create layout algin and justify property', () => {
+    const wrapper = shallow(
+      <Block
+        layout="row"
+        fill
+        align="start"
+        justify="start"
+      />,
+      );
+    const className = wrapper.prop('className');
+    assert.isOk(className, 'should have className prop');
+    const classNames = className.split(' ');
+    const expected = [
+      classes.layoutRow,
+      classes.layoutFill,
+      classes.justifyStart,
+      classes.alignStart,
+    ];
+    assert.sameMembers(classNames, expected, `should have className prop be ${expected.join(' ')}`);
+  });
+
+  it('should render child component.', () => {
+    const wrapper = shallow(<Block layout="row"><span>Hello</span></Block>);
+    assert.isTrue(wrapper.childAt(0).is('span'), 'should be a `span`');
+  });
+
+  it('should include the existing className', () => {
+    const wrapper = shallow(<Block className="someClass" layout="row"><span>Hello</span></Block>);
+    const className = wrapper.prop('className');
+    assert.isOk(className, 'should have className prop');
+    assert.include(className, 'someClass', '`someClass` class name be part of `className` prop');
+  });
+
+  describe('flex props', () => {
+    let wrapper;
+    before(() => {
+      wrapper = mount(
+        <Block layout="row">
+          <Block flex>just flex</Block>
+          <Block flex={33}>flex 33%</Block>
+          <Block flex={50}>flex 50%</Block>
+          <Block flex="none">flex none</Block>
+          <Block flex="grow">flex none</Block>
+          <Block flex order={3}>flex none</Block>
+          <Block flex order={-10}>flex none</Block>
+          <Block flex offset={2}>flex none</Block>
+        </Block>,
+      );
+    });
+    it('should have .flex class', () => {
+      const actual = wrapper.childAt(0).find('div').prop('className');
+      const expected = classes.flex;
+      assert.strictEqual(actual, expected);
+    });
+    it('should have .flex33 class', () => {
+      const actual = wrapper.childAt(1).find('div').prop('className');
+      const expected = classes.flex33;
+      assert.strictEqual(actual, expected);
+    });
+    it('should have .flex50 class', () => {
+      const actual = wrapper.childAt(2).find('div').prop('className');
+      const expected = classes.flex50;
+      assert.strictEqual(actual, expected);
+    });
+    it('should have .flexNone class', () => {
+      const actual = wrapper.childAt(3).find('div').prop('className');
+      const expected = classes.flexNone;
+      assert.strictEqual(actual, expected);
+    });
+    it('should have .flexGrow class', () => {
+      const actual = wrapper.childAt(4).find('div').prop('className');
+      const expected = classes.flexGrow;
+      assert.strictEqual(actual, expected);
+    });
+    it('should have .flexOrder3 class', () => {
+      const actual = wrapper.childAt(5).find('div').prop('className');
+      const expected = classes.flexOrder3;
+      assert.include(actual, expected);
+    });
+    it('should have .flexOrder-10 class', () => {
+      const actual = wrapper.childAt(6).find('div').prop('className');
+      const expected = classes['flexOrder-10'];
+      assert.include(actual, expected);
+    });
+    it('should have .flexOffset2 class', () => {
+      const actual = wrapper.childAt(7).find('div').prop('className');
+      const expected = classes.flexOffset2;
+      assert.include(actual, expected);
+    });
+  });
+});

src/Layout/index.js

@@ -0,0 +1,5 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+export default from './Block';
+export Block from './Block';
+export withLayout from './with-layout';