feat(Table): Add components for tables (Table, Head, Row, Cell)

Four new simple components for creating nice tables. These components have only style, and as such you should create your own component which holds state. The components are:
Table
    - no props
    - wraps all other table components
Head
    - first child of Table, contains column headings as Cells
    - no props
Row
    - The active prop will highlight a row.
Cell
    - The active prop will underline Cell text and change pointer. Use
      this with a clickable cell

src/components/Table.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+import colorGetter from './colorGetter';
+import { Layout, Box } from './Layout';
+
+export const Table = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 16px;
+`;
+export const Row = styled(Layout)`
+  font-size: 0.9rem;
+  ${props => props.active &&
+    `background-color: ${colorGetter(props, 'primaryColorLightest')};`}
+
+  &:nth-child(odd) {
+    background-color: ${props => colorGetter(props, 'greyLightest')};
+    ${props => props.active &&
+      `background-color: ${colorGetter(props, 'primaryColorLightest')};`}
+  }
+`;
+export const Head = styled(Layout)`
+  border-bottom: 1px solid ${props => colorGetter(props, 'greyLight')};
+  font-size: 0.9rem;
+  color: ${props => colorGetter(props, 'primaryColor')};
+`;
+export const Cell = styled(Box)`
+  padding: 16px 8px;
+  ${props => props.active && 'text-decoration: underline;'}
+  ${props => props.active && 'cursor: pointer;'}
+`;

src/index.js

@@ -25,3 +25,4 @@ export { default as Heading } from './components/Heading';
 export { Layout, Box } from './components/Layout';
 export { default as media } from './components/media';
 export { default as withRipple } from './components/withRipple';
+export { Table, Head, Row, Cell } from './components/Table';