diff --git a/packages/my-joy-beta/src/components/navigation/header.js b/packages/my-joy-beta/src/components/navigation/header.js
index f7ecb6b9..a1e6ccb2 100644
--- a/packages/my-joy-beta/src/components/navigation/header.js
+++ b/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 () => (
-
-
-
-
-
-
-
-
- Compute
-
-
- Return to existing portal
-
- eu-east-1
-
-
- Nicola
-
-
+
+
+
+
+
+
+
+ Compute
+
+
+ Return to existing portal
+
+ eu-east-1
+
+
+ Nicola
+
);
diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js
index 05e25df3..365dd4dc 100644
--- a/packages/ui-toolkit/src/form/base/toggle.js
+++ b/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)};
`};
diff --git a/packages/ui-toolkit/src/header/brand.js b/packages/ui-toolkit/src/header/brand.js
index 73b3fb7a..b11565bd 100644
--- a/packages/ui-toolkit/src/header/brand.js
+++ b/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 }) => (
diff --git a/packages/ui-toolkit/src/header/header-wrapper.js b/packages/ui-toolkit/src/header/header-wrapper.js
deleted file mode 100644
index 34340c12..00000000
--- a/packages/ui-toolkit/src/header/header-wrapper.js
+++ /dev/null
@@ -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)};
-`;
diff --git a/packages/ui-toolkit/src/header/index.js b/packages/ui-toolkit/src/header/index.js
index 362c6324..f53f6364 100644
--- a/packages/ui-toolkit/src/header/index.js
+++ b/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 }) => ;
+export default ({ children, ...rest }) => (
+
+);
-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';
diff --git a/packages/ui-toolkit/src/header/item.js b/packages/ui-toolkit/src/header/item.js
index dcff658b..2768adaa 100644
--- a/packages/ui-toolkit/src/header/item.js
+++ b/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 {
diff --git a/packages/ui-toolkit/src/header/nav.js b/packages/ui-toolkit/src/header/nav.js
index 7b81c2f7..c017b100 100644
--- a/packages/ui-toolkit/src/header/nav.js
+++ b/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 }) =>
;
+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 {children};
+};
+
+export default ({ children, ...rest }) => ;
diff --git a/packages/ui-toolkit/src/header/usage.md b/packages/ui-toolkit/src/header/usage.md
index e36dc07e..8a0230d8 100644
--- a/packages/ui-toolkit/src/header/usage.md
+++ b/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');
-
-
-
- Compute
- Network
-
- Return to existing portal
- eu-east-1
- Nicola
-
+
+
+ Compute
+ Network
+
+ Return to existing portal
+ eu-east-1
+ Nicola
```
diff --git a/packages/ui-toolkit/src/icons/triton-beta.js b/packages/ui-toolkit/src/icons/triton-beta.js
index 8a6098dc..c56c8c1c 100644
--- a/packages/ui-toolkit/src/icons/triton-beta.js
+++ b/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;
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index ed6ed07c..aa92d513 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@@ -83,7 +83,7 @@ export {
HeaderBrand,
HeaderItem,
HeaderNav,
- HeaderWrapper
+ HeaderNavAnchor
} from './header';
export {
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx
index ec8c6f7d..58cba1dc 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx
+++ b/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)};
`;
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx
index 511306d1..c8eef3af 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx
+++ b/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);
}
`;
diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js
index 2e590ad2..a547792e 100644
--- a/packages/ui-toolkit/src/theme/colors.js
+++ b/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`