updating org tabs to use UI tabs

frontend/src/components/article/index.js

@@ -1,9 +1,11 @@
 import styled from 'styled-components';
-import { breakpoints } from '@ui/shared/constants';
+import { breakpoints, colors } from '@ui/shared/constants';
+import { remcalc } from '@ui/shared/functions';
 
 // Main Contonent Wrapper Styles
 export default styled.article`
   padding: 2rem;
+  border-top: ${remcalc(1)} solid ${colors.base.grey};
 
   ${breakpoints.large`
     padding: 0;

frontend/src/components/breadcrumb/index.js

@@ -15,6 +15,7 @@ import { colors } from '@ui/shared/constants';
 const StyledDiv = styled.div`
   border-bottom: solid ${remcalc(1)} ${colors.base.grey};
   padding: ${unitcalc(4.5)} 0 ${unitcalc(4.5)} 0;
+  margin-bottom: ${remcalc(18)};
 `;
 
 const BreadcrumbA = styled(NavLink)`

frontend/src/components/navigation/org.js

@@ -8,12 +8,12 @@ import NavLink from '@ui/components/nav-link';
 import { colors } from '@ui/shared/constants';
 import PropTypes from '@root/prop-types';
 import { orgsSelector } from '@state/selectors';
-import Ul from '@ui/components/horizontal-list/ul';
 import { remcalc } from '@ui/shared/functions';
+import Tabs, { Tab } from '@ui/components/tabs';
+
 
 const StyledNav = styled.div`
   background-color: #f2f2f2;
-  border-bottom: ${remcalc(1)} solid ${colors.base.grey};
 
   & ul {
     height: ${remcalc(60)};
@@ -21,18 +21,17 @@ const StyledNav = styled.div`
   }
 `;
 
-// TODO: refactor colours into constants in UI
 const NavigationLinkContainer = styled.div`
   position: relative;
-  padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)};
-  color: ${colors.base.secondaryDark};
-  border: ${remcalc(1)} solid ${colors.base.grey};
+  color: ${colors.base.grey};
   height: ${remcalc(24)};
-  background-color: #f2f2f2;
+  padding: ${remcalc(14)};
+
+  border: ${remcalc(1)} solid ${colors.base.grey};
+  border-bottom-width: 0;
 
   &.active {
     background-color: ${colors.base.background};
-    border-bottom: solid ${remcalc(1)} ${colors.base.grey};
   }
 `;
 
@@ -47,31 +46,16 @@ const OrgAvatar = styled(Avatar)`
 const OrgName = styled.span`
   margin-left: ${remcalc(12)};
   margin-top: ${remcalc(3)};
+  color: ${colors.base.text}
 `;
 
-const NavLi = styled.li`
+const NavLi = styled(NavLink)`
   display: inline-block;
-  padding-top: ${remcalc(12)};
-  padding-left: ${remcalc(3)};
-
-  & a {
   text-decoration: none;
-  }
 `;
 
-const Shadow = styled.div`
-  z-index: 1;
-  position: absolute;
-  height: ${remcalc(5)};
-  width: 100%;
-  left: 0;
-  bottom: 0;
-  background-image:
-    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
-`;
-
-const StyledUL = styled(Ul)`
-  padding: 0;
+const StyledTabs = styled(Tabs)`
+  padding-top: ${remcalc(12)}
 `;
 
 const OrgNavigation = ({
@@ -83,14 +67,11 @@ const OrgNavigation = ({
     image
   }) => {
     const to = `/${id}`;
-
-    return (
-      <NavLi key={to}>
-        <NavLink activeClassName='active' to={to}>{({
+    const content = () => (
+      <NavLi activeClassName='active' to={to}>{({
         isActive
       }) =>
         <NavigationLinkContainer className={isActive ? 'active' : ''}>
-            { !isActive && <Shadow />}
           <OrgImage>
             <OrgAvatar
               height={remcalc(26)}
@@ -103,17 +84,20 @@ const OrgNavigation = ({
             {name}
           </OrgName>
         </NavigationLinkContainer>
-        }</NavLink>
-      </NavLi>
+      }</NavLi>
+    );
+
+    return (
+      <Tab title={content()} key={to} />
     );
   });
 
   return (
     <StyledNav>
       <Container>
-        <StyledUL>
+        <StyledTabs name='organisation-navigation-group'>
           {navLinks}
-        </StyledUL>
+        </StyledTabs>
       </Container>
     </StyledNav>
   );

ui/src/components/tabs/index.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { rndId } from '../../shared/functions';
+import { Baseline } from '../../shared/composers';
+import React from 'react';
+import Tab from './tab';
+
+const StyledTabs = styled.div`
+  font-size: 0;
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+`;
+
+const Tabs = ({
+  className,
+  children, // array of <Tab>
+  id = rndId(),
+  name = '',
+  style
+}) => {
+  const _children = React.Children.map(children, (child, i) => {
+    return React.cloneElement(child, {
+      defaultChecked: i === 0,
+      name
+    });
+  });
+
+  return (
+    <StyledTabs
+      className={className}
+      id={id}
+      role='tablist'
+      style={style}
+    >
+      {_children}
+    </StyledTabs>
+  );
+};
+
+Tabs.propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  id: React.PropTypes.string,
+  name: React.PropTypes.string.isRequired,
+  style: React.PropTypes.object
+};
+
+export default Baseline(
+  Tabs
+);
+
+export {
+  Tab
+};

ui/src/components/tabs/story.js

@@ -0,0 +1,16 @@
+import { storiesOf } from '@kadira/storybook';
+import React from 'react';
+import Tabs from './';
+import Tab from './tab';
+
+storiesOf('Tabs', module)
+  .add('Default', () => (
+    <Tabs name='my-tab-group'>
+      <Tab title='Your Dashboard'>
+        <h1>Containers</h1>
+      </Tab>
+      <Tab title='YLD'>
+        <h1>User</h1>
+      </Tab>
+    </Tabs>
+  ));

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

@@ -0,0 +1,118 @@
+import styled from 'styled-components';
+import { Baseline } from '../../../shared/composers';
+import { boxes, colors } from '../../../shared/constants';
+import { remcalc, rndId } from '../../../shared/functions';
+import React from 'react';
+
+const classNames = {
+  label: rndId(),
+  panel: rndId()
+};
+
+const StyledTab = styled.div`
+  display: inline;
+`;
+
+const StyledRadio = styled.input`
+  clip: rect(0 0 0 0);
+  height: ${remcalc(1)};
+  opacity: 0;
+  width: ${remcalc(1)};
+
+  &:checked {
+    & + .${classNames.label} {
+      border-bottom-width: 0;
+      box-shadow: none;
+    }
+
+    & ~ .${classNames.panel} {
+      display: inline;
+    }
+  }
+`;
+
+const StyledLabel = styled.label`
+  background: transparent;
+  display: inline-block;
+  font-size: ${remcalc(20)};
+  margin: 0 0.5rem 0 0;
+  vertical-align: bottom;
+  box-shadow: inset ${remcalc(2)} -6px 10px 0px rgba(0,0,0,0.06);
+`;
+
+const StyledPanel = styled.div`
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  position: relative;
+  width: 0;
+`;
+
+const StyledContent = styled.div`
+  background: ${colors.inactive.default};
+  border: ${boxes.border.unchecked};
+  box-sizing: border-box;
+  box-shadow: 0 ${remcalc(-1)} ${remcalc(26)} 0 rgba(0, 0, 0, 0.2);
+  display: block;
+  float: left;
+  font-size: ${remcalc(16)};
+  margin-top: ${remcalc(-9)};
+  padding: ${remcalc(20)} ${remcalc(25)};
+  width: 100%;
+`;
+
+const Tab = ({
+  className,
+  children,
+  checked,
+  defaultChecked = false,
+  disabled = false,
+  id,
+  name,
+  title = '',
+  style
+}) => {
+  const tabId = rndId();
+
+  return (
+    <StyledTab className={className}>
+      <StyledRadio
+        checked={checked}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        id={tabId}
+        name={name}
+        type='radio'
+      />
+      <StyledLabel
+        className={classNames.label}
+        htmlFor={tabId}
+      >
+        {title}
+      </StyledLabel>
+      {children ? (
+        <StyledPanel className={classNames.panel}>
+          <StyledContent>
+            {children}
+          </StyledContent>
+        </StyledPanel>
+      ) : null}
+    </StyledTab>
+  );
+};
+
+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
+};
+
+export default Baseline(
+  Tab
+);