Merge branch 'component/table'

* component/table:
  editing story to pull in react component instead of string
  updating readme
  adding padding to td`s
  starting to style data table
  renaming directories. Table >> Simple Table and Table New >> Data Table
  removing old storybook story
  refactoring, removing comments and unused files for new table
  adding table head to new table
  fixing unassigned object and changing forEach to map, plus fixing linting
  working on table by passing in js object
  implementing simple table component

ui/src/components/table-data-table/index.js

@@ -0,0 +1,46 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const TableContent = require('./table-content');
+
+const {
+  default: styled
+} = Styled;
+
+const StyledTitle = styled.h3`
+  text-align: center
+`;
+
+const StyledTableWrapper = styled.section`
+  font-family: 'LibreFranklin', sans-serif;
+	font-style: normal;
+`;
+
+const Table = ({
+  children,
+  columns = [],
+  data = [],
+  title,
+}) => {
+
+  return (
+
+    <StyledTableWrapper>
+      <StyledTitle>{title}</StyledTitle>
+
+      <TableContent
+        columns={columns}
+        data={data}
+      />
+    </StyledTableWrapper>
+  );
+};
+
+Table.propTypes = {
+  children: React.PropTypes.node,
+  columns: React.PropTypes.array,
+  data: React.PropTypes.array,
+  title: React.PropTypes.string,
+};
+
+module.exports = Table;

ui/src/components/table-data-table/readme.md

@@ -0,0 +1,76 @@
+# `<Avatar>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Table = require('./index.js');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Table
+      columns={columns}
+      data={data}
+      title="This is the table title"
+    />
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Avatar = require('ui/table');
+
+const columns = [{
+  title: 'Memeber',
+  dataID: 'member',
+  dataKey: 'member',
+  width: ''
+}, {
+  title: 'Status',
+  dataID: 'status',
+  dataKey: 'status',
+  width: ''
+}, {
+  title: 'Role',
+  dataID: 'role',
+  dataKey: 'role',
+  width: ''
+}, {
+  title: '',
+  dataID: 'delete',
+  dataKey: 'delete',
+  width: ''
+}];
+
+const data = [{
+  name: 'Nicola',
+  status: 'Active',
+  role: 'Owner',
+  key: 1
+}, {
+  name: 'Alex',
+  status: 'Inactive',
+  role: 'Read Only',
+  key: 2
+}];
+
+module.exports = () => {
+  return (
+    <Base>
+      <Table
+        columns={columns}
+        data={data}
+        title="This is the table title"
+      />
+    </Base>
+  );
+}
+```

ui/src/components/table-data-table/story.js

@@ -0,0 +1,54 @@
+const React = require('react');
+const Base = require('../base');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Table = require('./');
+
+const memberDetail = (name) => {
+  return (
+    <div>
+      <h4>{name}</h4>
+      <small>{name}@biztech.com</small>
+    </div>
+  );
+};
+
+const columns = [{
+  title: 'Memeber',
+  width: '50%'
+}, {
+  title: 'Status',
+  width: '10%'
+}, {
+  title: 'Role',
+  width: '20%'
+}, {
+  title: '',
+  width: '20%'
+}];
+
+const data = [{
+  name: memberDetail('Nicola'),
+  status: 'Active',
+  role: 'Owner',
+  key: 1
+}, {
+  name: memberDetail('Alex'),
+  status: 'Inactive',
+  role: 'Read Only',
+  key: 2
+}];
+
+storiesOf('Table - Data Table', module)
+  .add('Default', () => (
+    <Base>
+      <Table
+        columns={columns}
+        data={data}
+        title="This is the table title"
+      />
+    </Base>
+  ));

ui/src/components/table-data-table/table-body.js

@@ -0,0 +1,25 @@
+const React = require('react');
+
+const Row = require('./table-row');
+
+const TableBody = ({
+  columns,
+  data
+}) => {
+  const rows = columns.map( (column, index) => {
+    return <Row dataItem={data[index]} key={index} />;
+  });
+
+  return (
+    <tbody>
+      {rows}
+    </tbody>
+  );
+};
+
+TableBody.propTypes = {
+  columns: React.PropTypes.array,
+  data: React.PropTypes.array
+};
+
+module.exports = TableBody;

ui/src/components/table-data-table/table-content.js

@@ -0,0 +1,39 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const TableBody = require('./table-body');
+const TableHeader = require('./table-head');
+
+const {
+  default: styled
+} = Styled;
+
+const StyledTable = styled.table`
+  width: 100%;
+`;
+
+const TableContent = ({
+  columns,
+  data,
+  hasHeader = columns.length >= 1,
+  hasBody = data.length >= 1,
+  width = '100%'
+}) => {
+
+  return (
+    <StyledTable>
+      {hasHeader ? <TableHeader columns={columns} /> : null}
+      {hasBody ? <TableBody columns={columns} data={data} /> : null}
+    </StyledTable>
+  );
+};
+
+TableContent.propTypes = {
+  columns: React.PropTypes.array,
+  data: React.PropTypes.array,
+  hasBody: React.PropTypes.bool,
+  hasHeader: React.PropTypes.bool,
+  width: React.PropTypes.string,
+};
+
+module.exports = TableContent;

ui/src/components/table-data-table/table-head.js

@@ -0,0 +1,57 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const fns = require('../../shared/functions');
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const StyledTableHeadItem = styled.td`
+  ${props => `width: ${props.width}`}
+  border-bottom: none;
+  padding: ${remcalc(24)};
+`;
+
+const StyledTableHead = styled.thead`
+  background: #fafafa;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+  border: solid ${remcalc(1)} #d8d8d8;
+`;
+
+const TableHeader = ({
+  columns
+}) => {
+
+  const fallBackWidth = `${100 / parseInt(columns.length)}%`;
+
+  const titles = columns.map( (column, i) => {
+
+    return (
+      <StyledTableHeadItem
+        key={i}
+        width={column.width || fallBackWidth}
+      >
+        {column.title}
+      </StyledTableHeadItem>
+    );
+  });
+
+  return (
+    <StyledTableHead>
+      <tr>
+        {titles}
+      </tr>
+    </StyledTableHead>
+  );
+};
+
+TableHeader.propTypes = {
+  columns: React.PropTypes.array
+};
+
+module.exports = TableHeader;

ui/src/components/table-data-table/table-row.js

@@ -0,0 +1,44 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const fns = require('../../shared/functions');
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const StyledRow = styled.tr`
+  border: solid ${remcalc(1)} #d8d8d8;
+`;
+
+const StyledTableItem = styled.td`
+  padding: ${remcalc(24)};
+`;
+
+const Row = ({
+  dataItem = {}
+}) => {
+  const _dataItem = dataItem;
+
+  const rowItems = Object.keys(_dataItem).map( (item, i) => {
+    const value = _dataItem[item];
+
+    return <StyledTableItem key={i}>{value}</StyledTableItem>;
+  });
+
+  return (
+    <StyledRow>
+      {rowItems}
+    </StyledRow>
+  );
+};
+
+Row.propTypes = {
+  dataItem: React.PropTypes.object
+};
+
+module.exports = Row;

ui/src/components/table-simple-table/index.js

@@ -0,0 +1,8 @@
+module.exports = {
+  Table: require('./table'),
+  TableHead: require('./table-head'),
+  TableBody: require('./table-body'),
+  TableCell: require('./table-cell'),
+  TableRow: require('./table-row'),
+  TableItem: require('./table-item'),
+};

ui/src/components/table-simple-table/readme.md

@@ -0,0 +1,41 @@
+# `<Avatar>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Avatar = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Avatar color='#35a8c0' name='Alex' />
+      </Column>
+      <Column>
+        <Avatar color='#ef6176' name='Alex' src='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Avatar = require('ui/avatar');
+
+module.exports = () => {
+  return (
+    <Avatar color='#35a8c0' name='Alex' />
+    <Avatar color='#ef6176' name='Alex' src='path/to/image.png' />
+  );
+}
+```

ui/src/components/table-simple-table/story.js

@@ -0,0 +1,51 @@
+const React = require('react');
+const Base = require('../base');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const _table = require('./');
+
+const {
+  Table,
+  TableHead,
+  TableItem,
+  TableBody,
+  TableRow
+} = _table;
+
+storiesOf('Table - Simple', module)
+  .add('Default', () => (
+    <Base>
+      <Table>
+        <TableHead>
+          <TableItem>Member</TableItem>
+          <TableItem>Status</TableItem>
+          <TableItem>Role</TableItem>
+          <TableItem>{/*Empty last Column*/}</TableItem>
+        </TableHead>
+
+        <TableBody>
+          <TableRow>
+            <TableItem>
+              <h4>Nicola (You)</h4>
+              <p>nicola@biztech.com</p>
+            </TableItem>
+            <TableItem>Active</TableItem>
+            <TableItem>Owner</TableItem>
+            <TableItem>🗑️</TableItem>
+          </TableRow>
+          <TableRow>
+            <TableItem>
+              <h4>Nicola (You)</h4>
+              <p>nicola@biztech.com</p>
+            </TableItem>
+            <TableItem>Active</TableItem>
+            <TableItem>Owner</TableItem>
+            <TableItem>🗑️</TableItem>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </Base>
+  ));

ui/src/components/table-simple-table/table-body.js

@@ -0,0 +1,39 @@
+const composers = require('../../shared/composers');
+
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled,
+} = Styled;
+
+const {
+  clearfix
+} = composers;
+
+const StyledTableBody = styled.article`
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+  
+  ${clearfix}
+`;
+
+const TableBody = ({
+  children
+}) => {
+
+  const itemCount = children.length;
+
+  if (itemCount <= 1) return;
+
+  return (
+    <StyledTableBody itemCount={itemCount}>
+      {children}
+    </StyledTableBody>
+  );
+};
+
+TableBody.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = StyledTableBody;

ui/src/components/table-simple-table/table-head.js

@@ -0,0 +1,58 @@
+const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
+
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled,
+  css
+} = Styled;
+
+const {
+  clearfix
+} = composers;
+
+const StyledTableHead = styled.header`
+  background: #fafafa;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+  padding: ${remcalc(24)} 0;
+  
+  ${clearfix}
+  
+  & > .table-item {
+    text-align: center;
+    
+    ${props => {
+      const width = 100 / props.itemCount;
+      return css`
+        width: ${width}%;  
+      `;
+    }}
+  }
+`;
+
+const TableHead = ({
+  children
+}) => {
+
+  const itemCount = children.length;
+
+  if (itemCount <= 1) return;
+
+  return (
+    <StyledTableHead itemCount={itemCount}>
+      {children}
+    </StyledTableHead>
+  );
+};
+
+TableHead.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableHead;

ui/src/components/table-simple-table/table-item.js

@@ -0,0 +1,28 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const Item = styled.div`
+  display: inline-block;
+  float: left;
+`;
+
+const TableItem = ({
+  children
+}) => {
+
+  return (
+    <Item className="table-item">
+      {children}
+    </Item>
+  );
+};
+
+TableItem.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableItem;

ui/src/components/table-simple-table/table-row.js

@@ -0,0 +1,54 @@
+const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
+
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled,
+  css
+} = Styled;
+
+const {
+  clearfix
+} = composers;
+
+const {
+  remcalc
+} = fns;
+
+const StyledTableRow = styled.div`
+  ${clearfix}
+  
+  padding: ${remcalc(24)} 0;
+  border-bottom: solid 1px #d8d8d8;
+  
+  & > .table-item {
+    text-align: center;
+    
+    ${props => {
+      const width = 100 / props.itemCount;
+      return css`
+        width: ${width}%;  
+      `;
+    }}
+  }
+`;
+
+const TableRow = ({
+  children
+}) => {
+  const itemCount = children.length;
+
+  return (
+    <StyledTableRow itemCount={itemCount}>
+      {children}
+    </StyledTableRow>
+  );
+};
+
+TableRow.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableRow;

ui/src/components/table-simple-table/table.js

@@ -0,0 +1,49 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const StyledTableWrapper = styled.section`
+  border: solid 1px #d8d8d8
+  font-family: 'LibreFranklin', sans-serif;
+	font-style: normal;
+`;
+
+// const StyledTableHead = styled.thead``;
+// const StyledTableBody = styled.tbody``;
+
+// const renderTable = ({
+//   hasHeader = false,
+//   hasBody = true,
+//   width = '100%'
+// }) => {
+//
+//   const tableBody = () => {
+//
+//     return (
+//       <StyledTableBody />
+//     )
+//   }
+//
+// }
+
+const Table = ({
+  children,
+  title,
+}) => {
+
+  return (
+    <StyledTableWrapper>
+      {children}
+    </StyledTableWrapper>
+  );
+};
+
+Table.propTypes = {
+  children: React.PropTypes.node,
+  title: React.PropTypes.string,
+};
+
+module.exports = Table;

ui/src/shared/composers.js

@@ -47,5 +47,16 @@ module.exports = {
     right: ${positions.right || 'auto'};
     bottom: ${positions.bottom || 'auto'};
     left: ${positions.left || 'auto'};
-  `
+  `,
+  clearfix: css` 
+    &:before,
+    &:after {
+      content:"";
+      display:table;
+    }
+    
+    &:after {
+      clear:both;
+    }
+  `,
 };