From e91c28ad8125f79966d7894419ae0f9d1aecfd26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 26 Oct 2016 17:31:15 +0100
Subject: [PATCH] =?UTF-8?q?implement=20=20and=20=0D=1B[3g=1BH=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=1BH=20=20=20=20=20=20=20=20=1BH=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=1BH=20=20=20=20=20=20=20=20=1BH=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=1BH=20=20=20=20=20=20=20=20=1BH=20=20=20=20=20=20=20=20=1BH=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=1BH=20=20=20=20=20=20=20=20=1BH=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=1BH=20=20=20=20=20=20=20=20=1BH=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=1BH=20=20=20=20=20=20=20=20=1BH=0D=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/package.json                  |  1 +
 ui/src/components/tab/index.js   | 57 ++++++++++++++++++++++++++++++++
 ui/src/components/tab/readme.md  | 32 ++++++++++++++++++
 ui/src/components/tab/style.css  | 38 +++++++++++++++++++++
 ui/src/components/tabs/index.js  | 44 ++++++++++++++++++++++++
 ui/src/components/tabs/readme.md | 31 +++++++++++++++++
 ui/src/components/tabs/style.css |  6 ++++
 ui/src/docs.js                   |  4 ++-
 ui/src/index.js                  |  4 ++-
 9 files changed, 215 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/components/tab/index.js
 create mode 100644 ui/src/components/tab/readme.md
 create mode 100644 ui/src/components/tab/style.css
 create mode 100644 ui/src/components/tabs/index.js
 create mode 100644 ui/src/components/tabs/readme.md
 create mode 100644 ui/src/components/tabs/style.css

diff --git a/ui/package.json b/ui/package.json
index 63407399..b6f96318 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "lodash.flatten": "^4.4.0",
+    "param-case": "^2.1.0",
     "react": "^15.3.2",
     "react-a11y": "^0.3.3"
   },
diff --git a/ui/src/components/tab/index.js b/ui/src/components/tab/index.js
new file mode 100644
index 00000000..a3831599
--- /dev/null
+++ b/ui/src/components/tab/index.js
@@ -0,0 +1,57 @@
+const paramCase = require('param-case');
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const Tab = ({
+  className,
+  children,
+  checked,
+  defaultChecked = true,
+  disabled = false,
+  id,
+  name,
+  title = '',
+  style
+}) => {
+  const cn = classNames(
+    className,
+    styles.tab
+  );
+
+  const tabId = paramCase(title);
+
+  return (
+    <div className={cn}>
+      <input
+        checked={checked}
+        className={styles.input}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        id={tabId}
+        name={name}
+        type='radio'
+      />
+      <label className={styles.label} htmlFor={tabId}>
+        {title}
+      </label>
+      <div className={styles.content}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+Tab.propTypes = {
+  checked: React.PropTypes.bool,
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  defaultChecked: React.PropTypes.bool,
+  disabled: React.PropTypes.bool,
+  id: React.PropTypes.string,
+  name: React.PropTypes.string,
+  style: React.PropTypes.object,
+  title: React.PropTypes.string
+};
+
+module.exports = Tab;
diff --git a/ui/src/components/tab/readme.md b/ui/src/components/tab/readme.md
new file mode 100644
index 00000000..83bafbed
--- /dev/null
+++ b/ui/src/components/tab/readme.md
@@ -0,0 +1,32 @@
+# `<Tab>`
+
+## 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 Tabs = require('../tabs');
+const Tab = require('./index');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column xs={12}>
+        <Tabs name='my-tab-group'>
+          <Tab title='Containers'>
+            <h1>Containers</h1>
+          </Tab>
+          <Tab title='Users'>
+            <h1>User</h1>
+          </Tab>
+        </Tabs>
+      </Column>
+    </Row>
+  </Base>
+);
+```
diff --git a/ui/src/components/tab/style.css b/ui/src/components/tab/style.css
new file mode 100644
index 00000000..acf9fec0
--- /dev/null
+++ b/ui/src/components/tab/style.css
@@ -0,0 +1,38 @@
+.tab {
+  float: left;
+
+  & .label {
+    background: #eee;
+    padding: 10px;
+    border: 1px solid #ccc;
+    margin-left: -1px;
+    position: relative;
+    left: 1px;
+  }
+
+  & .input[type=radio] {
+    visibility: hidden;
+    display: none;
+  }
+
+  & .content {
+    position: absolute;
+    top: 28px;
+    left: 0;
+    background: white;
+    right: 0;
+    bottom: 0;
+    padding: 20px;
+    border: 1px solid #ccc;
+  }
+
+  & .input[type=radio]:checked ~ .label {
+    background: white;
+    border-bottom: 1px solid white;
+    z-index: 2;
+  }
+
+  & .input[type=radio]:checked ~ .label ~ .content {
+    z-index: 1;
+  }
+}
diff --git a/ui/src/components/tabs/index.js b/ui/src/components/tabs/index.js
new file mode 100644
index 00000000..cab078da
--- /dev/null
+++ b/ui/src/components/tabs/index.js
@@ -0,0 +1,44 @@
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const Tabs = ({
+  className,
+  children, // array of <Tab>
+  id,
+  name = '',
+  style
+}) => {
+  const cn = classNames(
+    className,
+    styles.tabs
+  );
+
+  const _children = React.Children.map(children, (child, i) => {
+    return React.cloneElement(child, {
+      defaultChecked: i === 0,
+      name
+    });
+  });
+
+  return (
+    <div
+      className={cn}
+      id={id}
+      role='tablist'
+      style={style}
+    >
+      {_children}
+    </div>
+  );
+};
+
+Tabs.propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  id: React.PropTypes.string,
+  name: React.PropTypes.string.isRequired,
+  style: React.PropTypes.object
+};
+
+module.exports = Tabs;
diff --git a/ui/src/components/tabs/readme.md b/ui/src/components/tabs/readme.md
new file mode 100644
index 00000000..25334479
--- /dev/null
+++ b/ui/src/components/tabs/readme.md
@@ -0,0 +1,31 @@
+# `<Tabs>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Row = require('../row');
+const Column = require('../column');
+const Tabs = require('./index');
+const Tab = require('../tab');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column xs={12}>
+        <Tabs name='my-tab-group'>
+          <Tab title='Containers'>
+            <h1>Containers</h1>
+          </Tab>
+          <Tab title='Users'>
+            <h1>User</h1>
+          </Tab>
+        </Tabs>
+      </Column>
+    </Row>
+  </Base>
+);
+```
diff --git a/ui/src/components/tabs/style.css b/ui/src/components/tabs/style.css
new file mode 100644
index 00000000..68922e51
--- /dev/null
+++ b/ui/src/components/tabs/style.css
@@ -0,0 +1,6 @@
+.tabs {
+  position: relative;
+  min-height: 200px; /* This part sucks */
+  clear: both;
+  margin: 25px 0;
+}
diff --git a/ui/src/docs.js b/ui/src/docs.js
index 00c55c78..fcea1f02 100644
--- a/ui/src/docs.js
+++ b/ui/src/docs.js
@@ -11,7 +11,9 @@ module.exports = {
     Column: require('./components/column/readme.md'),
     Button: require('./components/button/readme.md'),
     Toggle: require('./components/toggle/readme.md'),
-    Checkbox: require('./components/checkbox/readme.md')
+    Checkbox: require('./components/checkbox/readme.md'),
+    Tab: require('./components/tab/readme.md'),
+    Tabs: require('./components/tabs/readme.md')
   },
   FAQ: require('./faq.md')
 };
diff --git a/ui/src/index.js b/ui/src/index.js
index 3de7a107..c41bc86c 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -5,5 +5,7 @@ module.exports = {
   Column: require('./components/column'),
   Container: require('./components/container'),
   Row: require('./components/row'),
-  Toggle: require('./components/toggle')
+  Toggle: require('./components/toggle'),
+  Tab: require('./components/tab'),
+  Tabs: require('./components/tabs')
 };