feat(ui-toolkit): abstract view-container in the Header implementation

* feat(ui-toolkit): abstract view-container in the Header implementation

* fix(ui-toolkit): import react in triton-beta logo

this fixes a missing import error because svgs are compiled to react components

* style(ui-toolkit): convert px leftovers

packages/my-joy-beta/src/components/navigation/header.js

@@ -1,37 +1,34 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 import {
   Header,
   HeaderBrand,
-  HeaderWrapper,
   TritonBetaIcon,
   DataCenterIconLight,
   UserIconLight,
   HeaderNav,
+  HeaderNavAnchor,
   HeaderItem
 } from 'joyent-ui-toolkit';
 
 export default () => (
   <Header>
-    <HeaderWrapper>
-      <HeaderBrand beta>
-        <Link to="/">
-          <TritonBetaIcon alt="Triton" />
-        </Link>
-      </HeaderBrand>
-      <HeaderNav>
-        <li>
-          <Link to="/">Compute</Link>
-        </li>
-      </HeaderNav>
-      <HeaderItem>Return to existing portal</HeaderItem>
-      <HeaderItem>
-        <DataCenterIconLight />eu-east-1
-      </HeaderItem>
-      <HeaderItem>
-        <UserIconLight />Nicola
-      </HeaderItem>
-    </HeaderWrapper>
+    <HeaderBrand beta>
+      <HeaderNavAnchor to="/">
+        <TritonBetaIcon alt="Triton" />
+      </HeaderNavAnchor>
+    </HeaderBrand>
+    <HeaderNav>
+      <li>
+        <HeaderNavAnchor to="/">Compute</HeaderNavAnchor>
+      </li>
+    </HeaderNav>
+    <HeaderItem>Return to existing portal</HeaderItem>
+    <HeaderItem>
+      <DataCenterIconLight />eu-east-1
+    </HeaderItem>
+    <HeaderItem>
+      <UserIconLight />Nicola
+    </HeaderItem>
   </Header>
 );

packages/ui-toolkit/src/form/base/toggle.js

@@ -40,11 +40,11 @@ const Label = styled.label`
 
   background-color: rgb(255, 255, 255);
   box-shadow: none;
-  border: 1px solid ${props => props.theme.grey};
+  border: ${remcalc(1)} solid ${props => props.theme.grey};
   cursor: pointer;
 
   ${is('checkbox')`
-    border-radius: 4px;
+    border-radius: ${remcalc(4)};
     width: ${remcalc(18)};
     height: ${remcalc(18)};
   `};

packages/ui-toolkit/src/header/brand.js

@@ -20,9 +20,7 @@ const Brand = H2.extend`
 const Box = styled.div`
   align-self: stretch;
   order: 0;
-  width: 150px;
-
-  padding: ${remcalc(11)} 0;
+  width: ${remcalc(150)};
 `;
 
 export default ({ children, ...rest }) => (

packages/ui-toolkit/src/header/header-wrapper.js

@@ -1,11 +0,0 @@
-import { ViewContainer } from '../layout';
-import remcalc from 'remcalc';
-
-export default ViewContainer.extend`
-  display: flex;
-  flex-wrap: nowrap;
-  align-content: stretch;
-  align-items: stretch;
-  max-height: ${remcalc(53)};
-  min-height: ${remcalc(53)};
-`;

packages/ui-toolkit/src/header/index.js

@@ -2,6 +2,17 @@ import React from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
 
+import { ViewContainer } from '../layout';
+
+const Container = ViewContainer.extend`
+  display: flex;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: stretch;
+  max-height: ${remcalc(53)};
+  min-height: ${remcalc(53)};
+`;
+
 const Header = styled.div`
   display: flex;
   flex-direction: row;
@@ -18,9 +29,12 @@ const Header = styled.div`
 /**
  * @example ./usage.md
  */
-export default ({ children, ...rest }) => <Header {...rest}>{children}</Header>;
+export default ({ children, ...rest }) => (
+  <Header {...rest}>
+    <Container>{children}</Container>
+  </Header>
+);
 
-export { default as HeaderBrand } from './brand';
 export { default as HeaderItem } from './item';
-export { default as HeaderNav } from './nav';
-export { default as HeaderWrapper } from './header-wrapper';
+export { default as HeaderBrand } from './brand';
+export { default as HeaderNav, Anchor as HeaderNavAnchor } from './nav';

packages/ui-toolkit/src/header/item.js

@@ -28,7 +28,7 @@ const Box = styled.section`
   }
 
   &:not(:last-of-type) {
-    border-right: 1px solid rgba(255, 255, 255, 0.15);
+    border-right: ${remcalc(1)} solid rgba(255, 255, 255, 0.15);
   }
 
   &:first-of-type {

packages/ui-toolkit/src/header/nav.js

@@ -1,32 +1,53 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { Link as BaseLink } from 'react-router-dom';
+import { A } from 'normalized-styled-components';
 import remcalc from 'remcalc';
 
-const UL = styled.ul`
+const Ul = styled.ul`
   padding: 0;
   margin: 0;
   display: flex;
   list-style: none;
+`;
 
-  a {
-    padding: ${remcalc(15)};
-    line-height: ${remcalc(24)};
-    font-size: ${remcalc(15)};
-    color: ${props => props.theme.white};
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 200ms ease;
-    max-height: ${remcalc(53)};
-    min-height: ${remcalc(53)};
-    box-sizing: border-box;
+const style = css`
+  padding: ${remcalc(15)};
+  line-height: ${remcalc(24)};
+  font-size: ${remcalc(15)};
+  color: ${props => props.theme.white};
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 200ms ease;
+  max-height: ${remcalc(53)};
+  min-height: ${remcalc(53)};
+  box-sizing: border-box;
 
-    &:hover,
-    &.active {
-      background: rgba(255, 255, 255, 0.15);
-    }
+  &:hover,
+  &.active {
+    background: rgba(255, 255, 255, 0.15);
   }
 `;
 
-export default ({ children, ...rest }) => <UL {...rest}>{children}</UL>;
+const StyledAnchor = A.extend`
+  /* trick prettier */
+  ${style};
+`;
+
+const StyledLink = styled(BaseLink)`
+  /* trick prettier */
+  ${style};
+`;
+
+export const Anchor = ({ children, ...rest }) => {
+  const { to = '' } = rest;
+
+  const Views = [() => (to ? StyledLink : null), () => StyledAnchor];
+  const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
+
+  return <View {...rest}>{children}</View>;
+};
+
+export default ({ children, ...rest }) => <Ul {...rest}>{children}</Ul>;

packages/ui-toolkit/src/header/usage.md

@@ -2,17 +2,16 @@
 const React = require('react');
 const { default: HeaderBrand } = require('./brand.js');
 const { default: HeaderItem } = require('./item.js');
+const { default: HeaderNav, HeaderNavAnchor } = require('./nav.js');
 
 <Header>
-  <HeaderWrapper>
-    <HeaderBrand beta><TritonBetaIcon/></HeaderBrand>
-    <HeaderNav>
-      <li><a href="#">Compute</a></li>
-      <li><a href="#" class="active">Network</a></li>
-    </HeaderNav>
-    <HeaderItem>Return to existing portal</HeaderItem>
-    <HeaderItem><DataCenterIconLight/>eu-east-1</HeaderItem>
-    <HeaderItem><UserIconLight/>Nicola</HeaderItem>
-  </HeaderWrapper>
+  <HeaderBrand beta><TritonBetaIcon/></HeaderBrand>
+  <HeaderNav>
+    <li><HeaderNavAnchor href="#">Compute</HeaderNavAnchor></li>
+    <li><HeaderNavAnchor href="#" class="active">Network</HeaderNavAnchor></li>
+  </HeaderNav>
+  <HeaderItem>Return to existing portal</HeaderItem>
+  <HeaderItem><DataCenterIconLight/>eu-east-1</HeaderItem>
+  <HeaderItem><UserIconLight/>Nicola</HeaderItem>
 </Header>
 ```

packages/ui-toolkit/src/icons/triton-beta.js

@@ -1,3 +1,6 @@
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+
 import TritonBetaIcon from './svg/triton_beta.svg';
 
 export default TritonBetaIcon;

packages/ui-toolkit/src/index.js

@@ -83,7 +83,7 @@ export {
   HeaderBrand,
   HeaderItem,
   HeaderNav,
-  HeaderWrapper
+  HeaderNavAnchor
 } from './header';
 
 export {

packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx

@@ -9,7 +9,7 @@ const Span = styled.span`
   font-size: ${remcalc(13)};
   position: absolute;
   top: ${remcalc(14)};
-  right: ${props => (props.type === 'max' ? '1px' : 'auto')};
+  right: ${props => (props.type === 'max' ? remcalc(1) : 'auto')};
   color: ${props => (props.greyed ? theme.grey : theme.secondary)};
 `;
 

packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx

@@ -9,7 +9,7 @@ import theme from '../../../theme';
 export const SliderStyled = styled.div`
   appearance: none;
   background: ${theme.white};
-  border: 2px solid ${theme.grey};
+  border: ${remcalc(2)} solid ${theme.grey};
   border-radius: 50%;
   cursor: pointer;
   display: block;
@@ -26,7 +26,7 @@ export const SliderStyled = styled.div`
   }
 
   &::focus {
-    box-shadow: 0 0 0 5px rgba(63, 81, 181, 0.2);
+    box-shadow: 0 0 0 ${remcalc(5)} rgba(63, 81, 181, 0.2);
   }
 `;
 

packages/ui-toolkit/src/theme/colors.js

@@ -12,7 +12,7 @@ const Box = styled.div`
 
 const Data = styled.td`
   padding: ${remcalc(18)} 0;
-  border-bottom: 1px solid ${theme.grey};
+  border-bottom: ${remcalc(1)} solid ${theme.grey};
   max-width: ${remcalc(250)};
 `;
 
@@ -23,8 +23,8 @@ const Table = styled.table`
 
 const InnerBox = styled.div`
   margin-top: ${remcalc(6)};
-  line-height: 24px;
-  font-size: 16px;
+  line-height: ${remcalc(24)};
+  font-size: ${remcalc(16)};
   color: ${theme.text};
 `;
 
@@ -33,8 +33,8 @@ const Preview = styled.div`
   background: ${props => props.hex};
   width: ${remcalc(96)};
   height: ${remcalc(96)};
-  border: 1px solid ${theme.grey};
-  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
+  border: ${remcalc(1)} solid ${theme.grey};
+  box-shadow: 0 ${remcalc(2)} ${remcalc(1)} rgba(0, 0, 0, 0.05);
 `;
 
 const Paragraph = P.extend`