fix(ui-toolkit): small fixes

- Adds sidebar design
 - Adds correct spacing to headers and text
 - Changes color design to look more like spec
 - Fixes papyrus font
 - Adds Roboto Mono as default code font

packages/ui-toolkit/etc/style.css

@@ -0,0 +1,89 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
+
+body .rsg--sidebar-4 {
+    padding: 36px 30px;
+}
+
+body h1.rsg--root-10, h2.rsg--root-10, h3.rsg--root-10, h3.rsg--para-24 {
+    margin-bottom: 0;
+    padding-bottom: 24px;
+}
+
+main.rsg--content-3 {
+    padding-top: 60px;
+}
+
+h4.rsg--h4-29,
+h6.rsg--h6-31 {
+    margin-bottom: 0;
+    font-weight: 600;
+    padding-bottom: 12px;
+}
+
+li.rsg--li-35 {
+    padding-bottom: 6px;
+}
+
+p.rsg--p-32 {
+    margin-bottom: 0;
+    padding-bottom: 36px;
+}
+
+.rsg--sidebar-4 a.rsg--link-72 {
+    color: #fff;
+    font-size: 15px;
+}
+
+.rsg--sidebar-4 a.rsg--heading-71 {
+    font-size: 17px;
+    margin-bottom: 12px;
+    display: block;
+}
+
+.rsg--sidebar-4 .rsg--logo-5 {
+    border: none;
+    padding: 0;
+}
+
+.rsg--sidebar-4 .rsg--search-66 {
+    padding: 30px 0;
+}
+
+.rsg--sidebar-4 .rsg--isChild-70 {
+    padding-left: 16px;
+}
+
+.rsg--sidebar-4 .rsg--input-67 {
+    background: #FFFFFF;
+    border: 1px solid #D8D8D8;
+    box-sizing: border-box;
+    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05), inset 0px 3px 0px rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+    box-shadow: none;
+    padding: 8px 16px;
+    width: 240px;
+    color: #494949;
+    height: 48px;
+}
+
+.rsg--sidebar-4 .rsg--list-68 {
+    padding: 0;
+}
+
+
+.rsg--sidebar-4 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: #494949;
+    opacity: 0.5;
+}
+.rsg--sidebar-4 ::-moz-placeholder { /* Firefox 19+ */
+    color: #494949;
+    opacity: 0.5;
+}
+.rsg--sidebar-4 :-ms-input-placeholder { /* IE 10+ */
+    color: #494949;
+    opacity: 0.5;
+}
+.rsg--sidebar-4 :-moz-placeholder { /* Firefox 18- */
+    color: #494949;
+    opacity: 0.5;
+}

packages/ui-toolkit/src/base/global.js

@@ -1,11 +1,7 @@
 import { css } from 'styled-components';
-import { fonts, loadedFontFamily, unloadedFontFamily } from '../typography';
+import { loadedFontFamily } from '../typography';
 
 export default ({ theme }) => css`
-  ${fonts.libreFranklin.normal};
-  ${fonts.libreFranklin.medium};
-  ${fonts.libreFranklin.semibold};
-
   [hidden] {
     display: none;
   }
@@ -21,7 +17,7 @@ export default ({ theme }) => css`
     padding: 0;
     background: ${theme.background};
 
-    ${unloadedFontFamily};
+    ${loadedFontFamily};
   }
 
   html,
@@ -30,10 +26,6 @@ export default ({ theme }) => css`
     height: 100%;
   }
 
-  .fonts-loaded body {
-    ${loadedFontFamily};
-  }
-
   .CodeMirror,
   .ReactCodeMirror {
     height: 100% !important;

packages/ui-toolkit/src/close-button/usage.md

@@ -1,3 +0,0 @@
-```
-<CloseButton />
-```

packages/ui-toolkit/src/index.js

@@ -30,14 +30,6 @@ export {
   Container as Breadcrumb
 } from './breadcrumb';
 
-export {
-  Tooltip,
-  TooltipButton,
-  TooltipDivider,
-  TooltipList,
-  TooltipLabel
-} from './tooltip';
-
 export {
   default as Progressbar,
   ProgressbarButton,

packages/ui-toolkit/src/layout/root-container.js

@@ -1,8 +1,9 @@
 import { Component } from 'react';
-import { injectGlobal, withTheme } from 'styled-components';
+import { injectGlobal } from 'styled-components';
 import FontFaceObserver from 'fontfaceobserver';
-import { global } from '../base';
 import { fontFaces } from '../typography/fonts';
+import theme from '../theme';
+import { loadedFontFamily } from '../typography';
 
 const families = Object.keys(
   Object.values(fontFaces)
@@ -16,7 +17,38 @@ class RootContainer extends Component {
   componentWillMount() {
     // eslint-disable-next-line no-unused-expressions
     injectGlobal`
-      ${global(this.props)}
+      [hidden] {
+        display: none;
+      }
+
+      html {
+        line-height: 1.15;
+        text-size-adjust: 100%;
+      }
+
+      body {
+        font-size: 15px;
+        margin: 0;
+        padding: 0;
+        background: ${theme.background};
+
+        ${loadedFontFamily};
+      }
+
+      html,
+      body,
+      #root {
+        height: 100%;
+      }
+
+      .CodeMirror,
+      .ReactCodeMirror {
+        height: 100% !important;
+      }
+
+      .CodeMirror {
+        border: solid 1px ${theme.grey};
+      }
     `;
 
     Promise.all(observers.map(obs => obs.load())).then(() => {

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

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import { ThemeProvider, injectGlobal } from 'styled-components';
 import theme from '../theme';
-import Base, { global } from '../base';
+import Base from '../base';
+import { loadedFontFamily } from '../typography';
 
 const StyledBase = Base.extend`
   /* trick prettier */
@@ -12,7 +13,38 @@ export default class Wrapper extends Component {
   componentWillMount() {
     // eslint-disable-next-line no-unused-expressions
     injectGlobal`
-      ${global}
+      [hidden] {
+        display: none;
+      }
+
+      html {
+        line-height: 1.15;
+        text-size-adjust: 100%;
+      }
+
+      body {
+        font-size: 15px;
+        margin: 0;
+        padding: 0;
+        background: ${theme.background};
+
+        ${loadedFontFamily};
+      }
+
+      html,
+      body,
+      #root {
+        height: 100%;
+      }
+
+      .CodeMirror,
+      .ReactCodeMirror {
+        height: 100% !important;
+      }
+
+      .CodeMirror {
+        border: solid 1px ${theme.grey};
+      }
     `;
   }
 

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

@@ -1,25 +1,23 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Strong } from 'normalized-styled-components';
-import { Col, Row } from 'react-styled-flexboxgrid';
+import { Row } from 'react-styled-flexboxgrid';
 import remcalc from 'remcalc';
 import titleCase from 'title-case';
 import tinycolor from 'tinycolor2';
-import { bottomShaddow } from '../boxes';
 import P from '../text/p';
-import theme from './';
+import theme, { base } from './';
 
 const Box = styled.div`
-  margin-bottom: ${remcalc(10)};
+  width: ${remcalc(130)};
-  box-shadow: ${bottomShaddow};
+  margin-bottom: ${remcalc(46)};
-  border: solid ${remcalc(1)} ${props => props.border};
 `;
 
 const InnerBox = styled.div`
-  padding: ${remcalc(18)};
+  margin-top: ${remcalc(6)};
-  margin-top: ${remcalc(-7)};
+  line-height: 24px;
-  background: ${props => props.background};
+  font-size: 16px;
-  color: ${props => props.text};
+  color: ${theme.text};
 `;
 // Border: solid ${remcalc(1)} ${props => props.border};
 // border-top-width: 0;
@@ -27,8 +25,9 @@ const InnerBox = styled.div`
 const Preview = styled.div`
   display: inline-block;
   background: ${props => props.hex};
-  height: ${remcalc(100)};
+  width: ${remcalc(96)};
-  width: 100%;
+  height: ${remcalc(96)};
+  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
 `;
 
 const Paragraph = P.extend`
@@ -36,50 +35,20 @@ const Paragraph = P.extend`
   margin: 0;
 `;
 
-const baseColorNames = Object.keys(theme).filter(
-  name => typeof theme[name] === 'string'
-);
-
-const mostReadable = hex =>
-  tinycolor
-    .mostReadable(hex, baseColorNames.map(name => theme[name]))
-    .toHexString();
-
-const borderColor = hex =>
-  tinycolor
-    .mostReadable(hex, [
-      theme.text,
-      theme.topologyBackground,
-      theme.secondaryActive,
-      theme.secondaryHover,
-      theme.secondary
-    ])
-    .toHexString();
-
 const Color = ({ name, hex }) => (
-  <Box border={borderColor(hex)}>
+  <Box>
     <Preview hex={hex} />
-    <InnerBox background={hex} text={mostReadable(hex)}>
+    <InnerBox background={hex}>
       <Paragraph>
-        <Strong>Name</Strong>: <br />
+        <Strong>{titleCase(name)}</Strong>
-        {titleCase(name)}
-      </Paragraph>
-      <br />
-      <Paragraph>
-        <Strong>Property</Strong>: <br />
-        <code>{name}</code>
-      </Paragraph>
-      <br />
-      <Paragraph>
-        <Strong>Hex</Strong>: <br />
-        <code>{hex.toUpperCase()}</code>
       </Paragraph>
+      <Paragraph>{hex.toUpperCase()}</Paragraph>
     </InnerBox>
   </Box>
 );
 
 export default () => {
-  const colors = Object.keys(theme)
+  const colors = Object.keys(base)
     .filter(name => typeof theme[name] === 'string')
     .sort((a, b) => {
       const _a = tinycolor(theme[a]).toHsl().h;
@@ -87,11 +56,7 @@ export default () => {
 
       return _a >= _b ? -1 : 1;
     })
-    .map(name => (
+    .map(name => <Color key={name} name={name} hex={theme[name]} />);
-      <Col key={name} xs={4}>
-        <Color name={name} hex={theme[name]} />
-      </Col>
-    ));
 
   return <Row>{colors}</Row>;
 };

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

@@ -18,7 +18,6 @@ const primary = {
   primaryHover: '#475AD1',
   primaryActive: '#2D3884',
   primaryDesaturated: '#3B4AAF',
-  primaryDesaturatedHover: '#475AD1',
   primaryDesaturatedActive: '#2D3884'
 };
 
@@ -50,17 +49,16 @@ export const base = {
   ...tertiary,
   text: '#494949', // used
   grey: '#D8D8D8', // used
-  greyDark: '#CCC',
   greyLight: '#bdbdbd', // used
   greyTransparent: 'rgba(73,73,73, 0.8)',
   disabled: '#FAFAFA', // used
   background: '#FAFAFA', // used
   green: '#00AF66', // used
-  greenDark: '#009858', // not used - BORDER
+  greenDark: '#009858', // used
   orange: '#E38200', // used
-  orangeDark: '#CB7400', // not used - BORDER
+  orangeDark: '#CB7400', // used
   red: '#DA4B42', // used
-  redDark: '#CD251B', // not used - BORDER
+  redDark: '#CD251B', // used
   blue: '#364ACD'
 };
 
@@ -114,8 +112,6 @@ export default {
   notifications,
   inputError,
   inputWarning,
-  // miniBackground,
-  // seperator,
   topologyBackground,
   brandBackground
 };

packages/ui-toolkit/src/tooltip/button.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import unitcalc from 'unitcalc';
-import is from 'styled-is';
-import theme from '../theme';
-import Button from '../button';
-
-const StyledButton = styled(Button)`
-  width: 100%;
-  padding: ${unitcalc(1)} ${unitcalc(3)};
-  background-color: ${theme.white};
-  color: ${theme.secondary};
-  text-align: left;
-  border: none;
-  box-shadow: none;
-
-  &:focus {
-    background-color: ${theme.white};
-    color: ${theme.primary};
-    border: none;
-  }
-
-  &:hover {
-    background-color: ${theme.white};
-    color: ${theme.primary};
-    border: none;
-  }
-
-  &:active,
-  &:active:hover,
-  &:active:focus {
-    background-color: ${theme.white};
-    color: ${theme.primary};
-    border: none;
-  }
-
-  &[disabled] {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  ${is('disabled')`
-    color: ${props => props.theme.grey};
-  `};
-`;
-
-const TooltipButton = props => <StyledButton {...props} />;
-
-export default TooltipButton;

packages/ui-toolkit/src/tooltip/divider.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-import unitcalc from 'unitcalc';
-import { border } from '../boxes';
-
-const TooltipDivider = styled.div`
-  border-top: ${border.unchecked};
-  margin: ${unitcalc(1)} 0 ${unitcalc(1.5)} 0;
-`;
-
-export default TooltipDivider;

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

@@ -1,5 +0,0 @@
-export { default as Tooltip } from './tooltip';
-export { default as TooltipButton } from './button';
-export { default as TooltipDivider } from './divider';
-export { default as TooltipList } from './list';
-export { default as TooltipLabel } from './label';

packages/ui-toolkit/src/tooltip/label.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-import remcalc from 'remcalc';
-import P from '../text/p';
-
-export default styled(P)`
-  margin: 0 ${remcalc(18)};
-  color: ${props => props.theme.white};
-  white-space: nowrap;
-`;

packages/ui-toolkit/src/tooltip/list.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-export default styled.ul`
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-`;

packages/ui-toolkit/src/tooltip/tooltip.js

@@ -1,131 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import unitcalc from 'unitcalc';
-import remcalc from 'remcalc';
-import theme from '../theme';
-import { border, borderRadius, tooltipShadow } from '../boxes';
-
-const StyledContainer = styled.div`
-  position: absolute;
-  top: ${props => props.top};
-  left: ${props => props.left};
-  bottom: ${props => props.bottoms};
-  right: ${props => props.right};
-
-  &:focus {
-    outline: none;
-  }
-`;
-
-const StyledInnerContainer = styled.div`
-  position: relative;
-  display: inline-block;
-  top: ${remcalc(5)};
-  left: -50%;
-  margin: 0;
-  padding: ${unitcalc(2)} 0;
-  background-color: ${props =>
-    props.secondary ? props.theme.secondary : props.theme.white};
-  border: ${props => (props.secondary ? border.secondary : border.unchecked)};
-  box-shadow: ${tooltipShadow};
-  border-radius: ${borderRadius};
-  z-index: 1000;
-
-  &:after,
-  &:before {
-    content: '';
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    height: 0;
-    width: 0;
-    border: solid transparent;
-  }
-
-  &:after {
-    border-bottom-color: ${props =>
-      props.secondary ? props.theme.secondary : theme.white};
-    border-width: ${remcalc(3)};
-    margin-left: ${remcalc(-3)};
-  }
-
-  &:before {
-    border-bottom-color: ${props =>
-      props.secondary ? props.theme.secondaryActive : theme.grey};
-    border-width: ${remcalc(5)};
-    margin-left: ${remcalc(-5)};
-  }
-`;
-
-/**
- * @example ./usage.md
- */
-class Tooltip extends Component {
-  componentDidMount() {
-    this.windowClickHandler = this.handleWindowClick.bind(this);
-    this.windowClickCounter = 0;
-    window.addEventListener('click', this.windowClickHandler);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.windowClickCounter = 0;
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('click', this.windowClickHandler);
-  }
-
-  handleWindowClick(evt) {
-    if (this.windowClickCounter) {
-      if (this.props.onBlur) {
-        this.props.onBlur();
-      }
-    }
-    this.windowClickCounter++;
-  }
-
-  render() {
-    let {
-      children,
-      top = 'auto',
-      left = 'auto',
-      bottom = 'auto',
-      right = 'auto',
-      secondary
-    } = this.props;
-
-    if (typeof top === 'number') {
-      top = `${top}px`;
-    }
-    if (typeof left === 'number') {
-      left = `${left}px`;
-    }
-    if (typeof bottom === 'number') {
-      bottom = `${bottom}px`;
-    }
-    if (typeof right === 'number') {
-      right = `${right}px`;
-    }
-
-    return (
-      <StyledContainer top={top} left={left} bottom={bottom} right={right}>
-        <StyledInnerContainer secondary={secondary}>
-          {children}
-        </StyledInnerContainer>
-      </StyledContainer>
-    );
-  }
-}
-
-Tooltip.propTypes = {
-  children: PropTypes.node,
-  top: PropTypes.string,
-  left: PropTypes.string,
-  bottom: PropTypes.string,
-  right: PropTypes.string,
-  onBlur: PropTypes.func,
-  secondary: PropTypes.boolean
-};
-
-export default Tooltip;

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

@@ -1,15 +0,0 @@
-```
-const Tooltip = require('./tooltip').default;
-const TooltipButton = require('./button').default;
-const TooltipDivider = require('./divider').default;
-
-<div style={{ position: 'relative', height: '175px' }}>
-  <Tooltip top='5px' left='55px'>
-    <TooltipButton>Scale</TooltipButton>
-    <TooltipButton>Restart</TooltipButton>
-    <TooltipButton>Stop</TooltipButton>
-    <TooltipDivider />
-    <TooltipButton>Delete</TooltipButton>
-  </Tooltip>
-</div>
-```

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

@@ -1,4 +1,94 @@
 ```
-const data = require('./data/wp.json');
+<Topology services=
-<Topology services={data} />
+{[
-```
+    {
+      "index": 0,
+      "id": "af6a5cd2-291f-490b-bf3b-141b010635db",
+      "name": "frontend",
+      "slug": "frontend",
+      "status": "ACTIVE",
+      "__typename": "Service",
+      "branches": [],
+      "connections": [
+        "aea06a05-830a-46d3-bdc1-9dcba97303de"
+      ],
+      "instances": [
+        {
+          "id": "f1fb3c1d-9e0e-4538-b2ad-1124bce2459e",
+          "status": "RUNNING",
+          "healthy": "UNKNOWN",
+          "__typename": "Instance"
+        },
+        {
+          "id": "c5c7ae33-cfe1-43cc-9e9b-6f453de3888d",
+          "status": "FAILED",
+          "healthy": "UNAVAILABLE",
+          "__typename": "Instance"
+        }
+      ],
+      "instanceStatuses": [
+        {
+          "status": "RUNNING",
+          "count": 1
+        },
+        {
+          "status": "FAILED",
+          "count": 1
+        }
+      ],
+      "instancesActive": true,
+      "instancesHealthy": {
+        "total": 2,
+        "healthy": 0
+      },
+      "transitionalStatus": false,
+      "isConsul": false,
+      "connected": true
+    },
+    {
+      "index": 1,
+      "id": "af6a5cd2-291f-490b-bf3b-asdasads",
+      "name": "consul",
+      "slug": "consul",
+      "status": "ACTIVE",
+      "__typename": "Service",
+      "branches": [],
+      "connections": [
+        "aea06a05-830a-46d3-bdc1-9dcba97303de"
+      ],
+      "instances": [
+        {
+          "id": "f1fb3c1d-9e0e-4538-b2ad-1124bce2459e",
+          "status": "RUNNING",
+          "healthy": "UNKNOWN",
+          "__typename": "Instance"
+        },
+        {
+          "id": "c5c7ae33-cfe1-43cc-9e9b-6f453de3888d",
+          "status": "FAILED",
+          "healthy": "UNAVAILABLE",
+          "__typename": "Instance"
+        }
+      ],
+      "instanceStatuses": [
+        {
+          "status": "RUNNING",
+          "count": 1
+        },
+        {
+          "status": "RUNNING",
+          "count": 1
+        }
+      ],
+      "instancesActive": true,
+      "instancesHealthy": {
+        "total": 2,
+        "healthy": 2
+      },
+      "transitionalStatus": false,
+      "isConsul": true,
+      "connected": true
+    }
+  ]
+} />
+```

packages/ui-toolkit/styleguide.config.js

@@ -5,6 +5,7 @@ const snapguidist = require('snapguidist');
 const path = require('path');
 
 module.exports = {
+  require: [path.join(__dirname, 'etc/style.css')],
   webpackConfig: Object.assign(webpackConfig, {
     resolve: Object.assign(webpackConfig.resolve, {
       alias: Object.assign(webpackConfig.resolve.alias, {
@@ -89,9 +90,7 @@ module.exports = {
         'src/slider/index.js',
         'src/form/toggle.js',
         'src/topology/index.js',
-        'src/form/number-input.js',
+        'src/form/number-input.js'
-        'src/dropdown/index.js',
-        'src/tooltip/tooltip.js'
       ]
     }
   ],
@@ -99,7 +98,8 @@ module.exports = {
     color: {
       base: '#494949',
       link: '#3B46CC',
-      linkHover: '#5a62c5'
+      linkHover: '#5a62c5',
+      sidebarBackground: '#1E313B'
     },
     fontSize: {
       base: 15,
@@ -113,11 +113,26 @@ module.exports = {
       h6: 12
     },
     fontFamily: {
-      base: '"Libre Franklin", -apple-system, sans-serif'
+      base: ['"Libre Franklin", -apple-system, sans-serif'],
-    }
+      monospace: [
+        'Roboto Mono',
+        'Consolas',
+        '"Liberation Mono"',
+        'Menlo',
+        'monospace'
+      ]
+    },
+    sidebarWidth: 300,
+    spaceFactor: 6
   },
   styles: {
+    Styleguide: {
+      sidebar: {
+        color: '#FFFFFF'
+      }
+    },
     Logo: {
+      border: 'none',
       logo: {
         'text-indent': -999,
         'background-image': 'url("./etc/joyent-white.png")',
@@ -126,7 +141,7 @@ module.exports = {
         'background-position': 0,
         height: 39,
         padding: 0,
-        margin: 0
+        margin: '0 auto'
       }
     }
   },