convert tab/tabs

ui/src/components/tabs/index.js

@@ -1,19 +1,32 @@
-const classNames = require('classnames');
 const React = require('react');
-const styles = require('./style.css');
+const fns = require('../../shared/functions');
+const Styled = require('styled-components');
+
+const {
+  rndId
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const StyledTabs = styled.div`
+  font-size: 0;
+
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+`;
 
 const Tabs = ({
   className,
   children, // array of <Tab>
-  id,
+  id = rndId(),
   name = '',
   style
 }) => {
-  const cn = classNames(
-    className,
-    styles.tabs
-  );
-
   const _children = React.Children.map(children, (child, i) => {
     return React.cloneElement(child, {
       defaultChecked: i === 0,
@@ -22,14 +35,14 @@ const Tabs = ({
   });
 
   return (
-    <div
+    <StyledTabs
-      className={cn}
+      className={className}
       id={id}
       role='tablist'
       style={style}
     >
       {_children}
-    </div>
+    </StyledTabs>
   );
 };
 

ui/src/components/tabs/tab/index.js

@@ -1,46 +1,130 @@
+const composers = require('../../../shared/composers');
+const constants = require('../../../shared/constants');
+const fns = require('../../../shared/functions');
 const paramCase = require('param-case');
-const classNames = require('classnames');
 const React = require('react');
-const styles = require('./style.css');
+const Styled = require('styled-components');
+
+const {
+  moveZ
+} = composers;
+
+const {
+  boxes,
+  colors
+} = constants;
+
+const {
+  remcalc,
+  rndId
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const classNames = {
+  label: rndId(),
+  panel: rndId()
+};
+
+const StyledTab = styled.div`
+  display: inline;
+`;
+
+const StyledRadio = styled.input`
+  clip: rect(0 0 0 0);
+  height: 1px;
+  opacity: 0;
+  width: 1px;
+
+  ${moveZ({
+    position: 'fixed',
+    amount: -1
+  })}
+
+  &:checked {
+    & + .${classNames.label} {
+      background: #FAFAFA;
+      border-bottom-width: 0;
+      padding-bottom: ${remcalc(11)};
+
+      ${moveZ({
+        amount: 1
+      })}
+    }
+
+    & ~ .${classNames.panel} {
+      display: inline;
+    }
+  }
+`;
+
+const StyledLabel = styled.label`
+  background: #F2F2F2;
+  border: ${boxes.border.unchecked};
+  color: #646464;
+  display: inline-block;
+  font-size: ${remcalc(20)};
+  left: 1px;
+  margin-left: -1px;
+  padding: ${remcalc(10)};
+  position: relative;
+  vertical-align: bottom;
+`;
+
+const StyledPanel = styled.div`
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  position: relative;
+  width: 0;
+`;
+
+const StyledContent = styled.div`
+  background: #FAFAFA;
+  border: ${boxes.border.unchecked};
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  font-size: ${remcalc(16)};
+  margin-top: ${remcalc(-1)};
+  padding: ${remcalc('0 20')};
+  width: 100%;
+`;
 
 const Tab = ({
   className,
   children,
   checked,
-  defaultChecked = true,
+  defaultChecked = false,
   disabled = false,
   id,
   name,
   title = '',
   style
 }) => {
-  const cn = classNames(
-    className,
-    styles.tab
-  );
-
   const tabId = paramCase(title);
 
   return (
-    <div className={cn}>
+    <StyledTab className={className}>
-      <input
+      <StyledRadio
         checked={checked}
-        className={styles.radio_input}
         defaultChecked={defaultChecked}
         disabled={disabled}
         id={tabId}
         name={name}
         type='radio'
       />
-      <label className={styles.label} htmlFor={tabId}>
+      <StyledLabel className={classNames.label} htmlFor={tabId}>
         {title}
-      </label>
+      </StyledLabel>
-      <div className={styles.panel}>
+      <StyledPanel className={classNames.panel}>
-        <div className={styles.content}>
+        <StyledContent>
           {children}
-        </div>
+        </StyledContent>
-      </div>
+      </StyledPanel>
-    </div>
+    </StyledTab>
   );
 };
 

ui/src/index.js

@@ -7,8 +7,8 @@ module.exports = {
   Column: require('./components/column'),
   Container: require('./components/container'),
   Row: require('./components/row'),
-  // Tab: require('./components/tabs/tab'),
+  Tab: require('./components/tabs/tab'),
-  // Tabs: require('./components/tabs'),
+  Tabs: require('./components/tabs'),
   Toggle: require('./components/toggle'),
   // Notificaton: require('./components/notification'),
   // Input: require('./components/input'),

ui/src/shared/composers.js

@@ -1,12 +1,17 @@
+const constants = require('./constants');
 const Styled = require('styled-components');
 
+const {
+  boxes
+} = constants;
+
 const {
   css
 } = Styled;
 
 module.exports = {
   verticallyAlignCenter: css`
-    /* Need to palce position:relative on parent */
+    /* Need to place position:relative on parent */
     left: 50%;
     position: absolute;
     top: 50%;
@@ -16,5 +21,21 @@ module.exports = {
     display: block;
     content: "";
     clear: both;
+  `,
+  moveZ: ({
+    amount = 0,
+    position = 'relative'
+  }) => css`
+    position: ${position};
+    z-index: ${amount};
+  `,
+  baseBox: ({
+    radius = boxes.borderRadius,
+    border = boxes.border.unchecked,
+    shadow = boxes.bottomShaddow
+  }) => css`
+    border: ${border};
+    border-radius: ${radius};
+    box-shadow: ${shadow};
   `
 };

ui/stories/index.js

@@ -13,6 +13,8 @@ const {
   Row,
   Column,
   Avatar,
+  Tabs,
+  Tab,
   Toggle,
   Widget
 } = require('../src/');
@@ -126,6 +128,18 @@ storiesOf('Checkbox', module)
     <Checkbox disabled />
   ));
 
+storiesOf('Tabs', module)
+  .add('Default', () => (
+    <Tabs name='my-tab-group'>
+      <Tab title='Containers'>
+        <h1>Containers</h1>
+      </Tab>
+      <Tab title='Users'>
+        <h1>User</h1>
+      </Tab>
+    </Tabs>
+  ))
+
 storiesOf('Toggle', module)
   .add('checked', () => (
     <Toggle checked />

ui/yarn.lock

@@ -1551,6 +1551,10 @@ circular-json@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"
 
+clamp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
+
 clap@^1.0.9:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.2.tgz#316545bf22229225a2cecaa6824cd2f56a9709ed"
@@ -1806,13 +1810,6 @@ create-error-class@^3.0.1:
   dependencies:
     capture-stack-trace "^1.0.0"
 
-cross-spawn-async@^2.0.0:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
-  dependencies:
-    lru-cache "^4.0.0"
-    which "^1.2.8"
-
 cross-spawn@^4, cross-spawn@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
@@ -1820,12 +1817,13 @@ cross-spawn@^4, cross-spawn@^4.0.0:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
-cross-spawn@2.0.x:
+cross-spawn@^5.0.1:
-  version "2.0.1"
+  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-2.0.1.tgz#ab6fd893a099759d9b85220e3a64397de946b0f6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.0.1.tgz#a3bbb302db2297cbea3c04edf36941f4613aa399"
   dependencies:
-    cross-spawn-async "^2.0.0"
+    lru-cache "^4.0.1"
-    spawn-sync "1.0.13"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
 
 cryptiles@2.x.x:
   version "2.0.5"
@@ -1907,8 +1905,8 @@ cssesc@^0.1.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
 
 "cssnano@>=2.6.1 <4":
-  version "3.8.1"
+  version "3.8.2"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.8.1.tgz#008a482148ee948cf0af2ee6e44bd97c53f886ec"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.8.2.tgz#318551275d965956876847c16534e0ffe37bb5e6"
   dependencies:
     autoprefixer "^6.3.1"
     decamelize "^1.1.2"
@@ -3183,6 +3181,10 @@ is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
     jsonpointer "^4.0.0"
     xtend "^4.0.0"
 
+is-nil@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-nil/-/is-nil-1.0.1.tgz#2daba29e0b585063875e7b539d071f5b15937969"
+
 is-npm@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
@@ -3197,6 +3199,10 @@ is-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
 
+is-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
+
 is-observable@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-0.2.0.tgz#b361311d83c6e5d726cabf5e250b0237106f5ae2"
@@ -3639,10 +3645,6 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
-lodash.isarray@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-4.0.0.tgz#2aca496b28c4ca6d726715313590c02e6ea34403"
-
 lodash.isequal@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.4.0.tgz#6295768e98e14dc15ce8d362ef6340db82852031"
@@ -3773,6 +3775,10 @@ math-expression-evaluator@^1.2.14:
   dependencies:
     lodash.indexof "^4.0.5"
 
+max-safe-int@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/max-safe-int/-/max-safe-int-1.0.0.tgz#44fba8ec993ded91fb2c5a35e71cf9c9f369ce52"
+
 max-timeout@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/max-timeout/-/max-timeout-1.0.0.tgz#b68f69a2f99e0b476fd4cb23e2059ca750715e1f"
@@ -3899,8 +3905,8 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, "mkdirp@>=0.5 0", mkdirp@~0.5.0, mkdirp@~0.5.1:
     minimist "0.0.8"
 
 mobx@^2.3.4:
-  version "2.6.5"
+  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-2.6.5.tgz#9ea2a7f049c886b943981ea491bfcfba301dec49"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-2.7.0.tgz#cf3d82d18c0ca7f458d8f2a240817b3dc7e54a01"
 
 ms@^0.7.1, ms@0.7.2:
   version "0.7.2"
@@ -4724,10 +4730,11 @@ power-assert-util-string-width@^1.1.1:
     eastasianwidth "^0.1.1"
 
 pre-commit@^1.1.3:
-  version "1.1.3"
+  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.1.3.tgz#6d5ed90740472072958c711a15f676aa2c231377"
+  resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.2.0.tgz#16a1a218861c778d1a1498719c9763717913d5b8"
   dependencies:
-    cross-spawn "2.0.x"
+    cross-spawn "^5.0.1"
+    spawn-sync "^1.0.15"
     which "1.2.x"
 
 prelude-ls@~1.1.2:
@@ -4839,6 +4846,21 @@ randexp@^0.4.2:
     discontinuous-range "1.0.0"
     ret "~0.1.10"
 
+random-integral@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/random-integral/-/random-integral-1.0.3.tgz#8ff3c117565c9a04b66ddd559f3aed29bd0f0f6c"
+  dependencies:
+    clamp "^1.0.1"
+    max-safe-int "^1.0.0"
+    to-integer "^1.0.1"
+
+random-natural@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/random-natural/-/random-natural-1.0.3.tgz#ef28615b03c2cb71aaebf7f24f487266a443c5c0"
+  dependencies:
+    max-safe-int "^1.0.0"
+    random-integral "^1.0.3"
+
 randomatic@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
@@ -5334,6 +5356,16 @@ shallowequal@^0.2.2, shallowequal@0.2.x:
   dependencies:
     lodash.keys "^3.1.2"
 
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+
 shelljs@^0.7.4, shelljs@^0.7.5:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.5.tgz#2eef7a50a21e1ccf37da00df767ec69e30ad0675"
@@ -5400,9 +5432,9 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, sour
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
-spawn-sync@1.0.13:
+spawn-sync@^1.0.15:
-  version "1.0.13"
+  version "1.0.15"
-  resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.13.tgz#904091b9ad48a0f3afb0e84752154c01e82fd8d8"
+  resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"
   dependencies:
     concat-stream "^1.4.7"
     os-shim "^0.1.2"
@@ -5739,6 +5771,15 @@ to-fast-properties@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
 
+to-integer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-integer/-/to-integer-1.0.1.tgz#511ad41dce6a93730a8f3b6e35a164fd829464da"
+  dependencies:
+    is-function "^1.0.1"
+    is-nil "^1.0.0"
+    is-object "^1.0.1"
+    is-symbol "^1.0.1"
+
 tough-cookie@~2.3.0:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
@@ -5910,14 +5951,14 @@ utils-merge@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
 
-uuid, uuid@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
-
 uuid@^2.0.1, uuid@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
 
+uuid@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
+
 v8flags@^2.0.10:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.0.11.tgz#bca8f30f0d6d60612cc2c00641e6962d42ae6881"
@@ -6016,7 +6057,7 @@ which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
 
-which@^1.2.4, which@^1.2.8, which@^1.2.9, which@1.2.x:
+which@^1.2.4, which@^1.2.9, which@1.2.x:
   version "1.2.12"
   resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
   dependencies: