From f23747cad88c2295657ca40ad77e00552c4e2420 Mon Sep 17 00:00:00 2001
From: Ilari Sinkkonen <ilari.sinkkonen@taitounited.fi>
Date: Mon, 5 Jun 2017 12:15:22 +0300
Subject: [PATCH] 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 | 31 +++++++++++++++++++++++++++++++
 src/index.js            |  1 +
 2 files changed, 32 insertions(+)
 create mode 100644 src/components/Table.js

diff --git a/src/components/Table.js b/src/components/Table.js
new file mode 100644
index 0000000..545706d
--- /dev/null
+++ b/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;'}
+`;
diff --git a/src/index.js b/src/index.js
index bccaa4b..a993d3d 100644
--- a/src/index.js
+++ b/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';