implement and

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"
   },

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;

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>
+);
+```

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;
+  }
+}

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;

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>
+);
+```

ui/src/components/tabs/style.css

@@ -0,0 +1,6 @@
+.tabs {
+  position: relative;
+  min-height: 200px; /* This part sucks */
+  clear: both;
+  margin: 25px 0;
+}

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')
 };

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')
 };