fix(ui-toolkit): orrect components in UI Toolkit

packages/ui-toolkit/.eslintrc

@@ -3,6 +3,7 @@
   "rules": {
     "no-console": 1,
     "new-cap": 0,
-    "jsx-a11y/href-no-hash": 0
+    "jsx-a11y/href-no-hash": 0,
+    "no-negated-condition": 0
   }
 }

packages/ui-toolkit/package.json

@@ -45,6 +45,7 @@
     "unitcalc": "^1.2.3"
   },
   "devDependencies": {
+    "apr-for-each": "^3.0.3",
     "babel-cli": "^6.26.0",
     "babel-preset-joyent-portal": "^7.0.1",
     "classnames": "^2.2.5",

packages/ui-toolkit/src/button/Readme.md

@@ -4,12 +4,20 @@ Primary button to be used once per page. Only use to indicate main action per pa
 Min. width: 120px
 
 ```jsx
+// Name: Active
 const React = require('react');
 const { default: Button } = require('./');
 
 <span>
   <Button>Inspire the lazy</Button>
-</span>;
+</span>
+
+// Tab: Disabled
+const React = require('react');
+const { default: Button } = require('./');
+<span>
+  <Button disabled>Inspire the brave</Button>
+</span>
 ```
 
 #### Secondary Button
@@ -18,43 +26,20 @@ Secondary buttons can be used freely to indicate other actions on patterns.
 Min. width: 120px
 
 ```jsx
+// Name: Active
 const React = require('react');
 const { default: Button } = require('./');
 
 <span>
   <Button secondary>Inspire the brave</Button>
 </span>;
-```
 
-#### Disabled Button
+// Tab: Disabled
-
-Disabled buttons can be used freely to indicate that no action is permitted in this button.
-Min. width: 120px
-
-```jsx
 const React = require('react');
 const { default: Button } = require('./');
-
 <span>
-  <Button secondary disabled>
+  <Button secondary disabled>Inspire the brave</Button>
-    Inspire the brave
+</span>
-  </Button>
-</span>;
-```
-
-#### Small Button
-
-Small buttons are supporters of the secondary button. They can be used within cluttered or complex patterns to free up space.
-
-```jsx
-const React = require('react');
-const { default: Button } = require('./');
-
-<span>
-  <Button secondary small>
-    Inspire the brave
-  </Button>
-</span>;
 ```
 
 #### Loading Button
@@ -75,14 +60,22 @@ const { default: Button } = require('./');
 Quick action buttons can be embedded in components to give additional functionality. They can be used in either primary or secondary color palettes, depending on importance.
 
 ```jsx
+// Name: Active
 const React = require('react');
 const { default: Button } = require('./');
 const { Actions } = require('../icons');
 <span>
-  <Button secondary icon rect>
+  <Button secondary icon actions>
     <Actions />
   </Button>
-  <Button secondary icon rect disabled>
+</span>
+
+// Tab: Disabled
+const React = require('react');
+const { default: Button } = require('./');
+const { Actions } = require('../icons');
+<span>
+  <Button secondary icon actions disabled>
     <Actions />
   </Button>
 </span>;
@@ -99,47 +92,6 @@ const Anchor = require('../text').Anchor;
 <Anchor href="https://joyent.com">Inspire the lazy</Anchor>;
 ```
 
-#### Reversed
-
-Reversed anchors is used on dark backgrounds, where a default anchor would not
-provide enough contrast.
-
-```jsx
-const React = require('react');
-const Anchor = require('../text').Anchor;
-
-<span
-  style={{
-    'background-color': '#3B46CC',
-    height: 80,
-    width: 250,
-    display: 'flex',
-    'align-items': 'center',
-    'justify-content': 'center'
-  }}
->
-  <Anchor href="https://joyent.com" reversed>
-    Inspire the lazy secondary
-  </Anchor>
-</span>;
-```
-
-#### In-paragraph anchor
-
-In-paragraph anchor is a link that sits inside a text components. The default
-state does not have an underline. The underline appears on hover and click.
-
-```jsx
-const React = require('react');
-const Anchor = require('../text').Anchor;
-
-<p>
-  Body text. Crack that whip. Give the past a slip. Step on a crack. Break your
-  momma's back. When a problem comes along.You must whip it.
-  <Anchor href="#">Learn More</Anchor>
-</p>;
-```
-
 #### Disabled
 
 Disabled anchors cannot be actioned and the cursor is disabled.

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

@@ -219,10 +219,20 @@ const Button = styled(BaseButton)`
     border-radius: 0;
   `};
 
+  ${is('actions') `
+    border-radius: 0;
+    width: ${remcalc(48)};
+    min-width: ${remcalc(0)};
+    min-height: ${remcalc(0)};
+    height: ${remcalc(48)};
+  `};
+
   ${is('small')`
     padding: ${remcalc(9)} ${remcalc(18)};
     font-size: ${remcalc(13)};
     min-width: ${remcalc(0)};
+    min-height: ${remcalc(0)};
+    height: auto;
   `};
 
   ${is('icon')`

packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap

@@ -114,6 +114,11 @@ exports[`Form Checkbox 1`] = `
   margin-bottom: 0.75rem;
 }
 
+.c4 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
 .c0 {
   list-style-type: none;
   display: -webkit-box;
@@ -245,6 +250,7 @@ exports[`Form FormMeta 1`] = `
   color: rgb(210,67,58);
   -webkit-text-fill-color: currentcolor;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -261,6 +267,7 @@ exports[`Form FormMeta 1`] = `
   color: rgb(227,130,0);
   -webkit-text-fill-color: currentcolor;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -277,6 +284,7 @@ exports[`Form FormMeta 1`] = `
   color: rgb(0,152,88);
   -webkit-text-fill-color: currentcolor;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -306,7 +314,7 @@ exports[`Form Input 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -502,6 +510,11 @@ exports[`Form Radio 1`] = `
   margin-bottom: 0.75rem;
 }
 
+.c4 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
 .c5 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
@@ -601,7 +614,7 @@ exports[`Form Select 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -705,7 +718,7 @@ exports[`Form Textarea 1`] = `
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

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

@@ -28,7 +28,7 @@ const style = css`
   height: ${height};
   min-height: ${height};
 
-  padding: ${paddingTop} ${remcalc(18)};
+  padding: ${paddingTop} ${remcalc(12)};
 
   border-radius: ${props => props.theme.borderRadius};
   background-color: ${props => props.theme.white};

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

@@ -46,7 +46,6 @@ const Label = styled.label`
   box-sizing: border-box;
   top: 0;
   right: 0;
-
   cursor: pointer;
 
   background-color: rgb(255, 255, 255);
@@ -127,6 +126,12 @@ const InnerContainer = styled.div`
 const Container = styled.div`
   margin-left: ${remcalc(12)};
 
+  label {
+    font-weight: normal;
+    font-size: ${remcalc(15)};
+  }
+
+
   ${isNot('noMargin')`
     margin-bottom: ${remcalc(12)};
   `};

packages/ui-toolkit/src/form/meta.js

@@ -27,7 +27,13 @@ const StyledLabel = Label.extend`
     -webkit-text-fill-color: currentcolor;
   `};
 
+  ${is('top')`
+    margin-top: ${remcalc(0)};
+    margin-bottom: ${remcalc(6)};
+  `};
+
   font-size: ${remcalc(13)};
+  margin-top: ${remcalc(6)};
   float: none;
   width: ${remcalc(300)};
 
@@ -64,8 +70,7 @@ const Meta = props => {
         error={hasError}
         warning={hasWarning}
         success={hasSuccess}
-        right={isRight}
+        right={isRight}>
-      >
         {msg}
       </StyledLabel>
     );

packages/ui-toolkit/src/form/usage-input.md

@@ -1,6 +1,7 @@
-#### Input > Email
+#### Text Entry
 
 ```jsx
+// Name: Active
 const React = require('react');
 const { default: FormGroup } = require('./group');
 const { default: Label } = require('./label');
@@ -8,13 +9,11 @@ const { default: Input } = require('./input');
 
 <FormGroup>
   <Label>Username</Label>
-  <Input placeholder="Example: JarJarBinks" type="email" />
+  <Input placeholder="Example: JarJarBinks" type="text" />
-</FormGroup>;
+</FormGroup>
-```
 
-#### Input > Disabled
 
-```jsx
+// Tab: Disabled
 const React = require('react');
 const { default: FormGroup } = require('./group');
 const { default: Label } = require('./label');
@@ -22,13 +21,10 @@ const { default: Input } = require('./input');
 
 <FormGroup>
   <Label disabled>Username</Label>
-  <Input disabled placeholder="Example: JarJarBinks" type="email" />
+  <Input disabled placeholder="Example: JarJarBinks" type="text" />
-</FormGroup>;
+</FormGroup>
-```
 
-#### Input > Error
+// Tab: Error
-
-```jsx
 const React = require('react');
 const { default: FormGroup } = require('./group');
 const { default: Label } = require('./label');
@@ -36,40 +32,8 @@ const { default: FormMeta } = require('./meta');
 const { default: Input } = require('./input');
 
 <FormGroup>
-  <Label>Email Address</Label>
+  <Label>Username</Label>
-  <Input placeholder="Enter email" type="email" />
+  <Input value="anton/s" error type="text" />
-  <FormMeta error>Unexpected children error!</FormMeta>
+  <FormMeta error>Something’s wrong</FormMeta>
-</FormGroup>;
+</FormGroup>
-```
-
-#### Input > Warning
-
-```jsx
-const React = require('react');
-const { default: FormGroup } = require('./group');
-const { default: Label } = require('./label');
-const { default: FormMeta } = require('./meta');
-const { default: Input } = require('./input');
-
-<FormGroup>
-  <Label>Email Address</Label>
-  <Input placeholder="Enter email" type="email" />
-  <FormMeta warning>Unexpected children warning!</FormMeta>
-</FormGroup>;
-```
-
-#### Input > Success
-
-```jsx
-const React = require('react');
-const { default: FormGroup } = require('./group');
-const { default: Label } = require('./label');
-const { default: FormMeta } = require('./meta');
-const { default: Input } = require('./input');
-
-<FormGroup>
-  <Label>Email Address</Label>
-  <Input placeholder="Enter email" type="email" />
-  <FormMeta success>Unexpected children success!</FormMeta>
-</FormGroup>;
 ```

packages/ui-toolkit/src/form/usage-select.md

@@ -1,9 +1,15 @@
+#### Select
+This is the standard dropdown menu to be used in forms and for multiple choice selections.
+
 ```jsx
+// Name: Active
 const React = require('react');
 const { default: Select } = require('./select');
+const { default: Label } = require('./label');
 const { default: FormGroup } = require('./group');
 
 <FormGroup>
+  <Label>Your location</Label>
   <Select>
     <option selected disabled>
       Select a datacenter
@@ -14,11 +20,8 @@ const { default: FormGroup } = require('./group');
     <option>Tokyo, Japan</option>
   </Select>
 </FormGroup>;
-```
 
-#### Select > Disabled
+// Tab: Disabled
-
-```jsx
 const React = require('react');
 const { default: FormGroup } = require('./group');
 const { default: Label } = require('./label');
@@ -35,68 +38,27 @@ const { default: Select } = require('./select');
     <option>Seoul, South Korea</option>
     <option>Tokyo, Japan</option>
   </Select>
-</FormGroup>;
+</FormGroup>
-```
 
-#### Select > Warning
 
-```jsx
+// Tab: Error
 const React = require('react');
 const { default: FormMeta } = require('./meta');
 const { default: FormGroup } = require('./group');
 const { default: Label } = require('./label');
+const { default: Flex } = require('styled-flex-component');
 const { default: Select } = require('./select');
 
 <FormGroup>
-  <Label>Your location</Label>
+  <Flex alignCenter justifyBetween>
+    <Label>Your location</Label>
+    <FormMeta top error>Unexpected children error!</FormMeta>
+  </Flex>
   <Select>
     <option>Amsterdam, EU</option>
     <option>San Francisco, USA</option>
     <option>Seoul, South Korea</option>
     <option>Tokyo, Japan</option>
   </Select>
-  <FormMeta warning>Unexpected children warning!</FormMeta>
+</FormGroup>
-</FormGroup>;
-```
-
-#### Select > Error
-
-```jsx
-const React = require('react');
-const { default: FormMeta } = require('./meta');
-const { default: FormGroup } = require('./group');
-const { default: Label } = require('./label');
-const { default: Select } = require('./select');
-
-<FormGroup>
-  <Label>Your location</Label>
-  <Select>
-    <option>Amsterdam, EU</option>
-    <option>San Francisco, USA</option>
-    <option>Seoul, South Korea</option>
-    <option>Tokyo, Japan</option>
-  </Select>
-  <FormMeta error>Unexpected children error!</FormMeta>
-</FormGroup>;
-```
-
-#### Select > Success
-
-```jsx
-const React = require('react');
-const { default: FormMeta } = require('./meta');
-const { default: FormGroup } = require('./group');
-const { default: Label } = require('./label');
-const { default: Select } = require('./select');
-
-<FormGroup>
-  <Label>Your location</Label>
-  <Select>
-    <option>Amsterdam, EU</option>
-    <option>San Francisco, USA</option>
-    <option>Seoul, South Korea</option>
-    <option>Tokyo, Japan</option>
-  </Select>
-  <FormMeta success>Unexpected children success!</FormMeta>
-</FormGroup>;
 ```

packages/ui-toolkit/src/popover/Readme.md

@@ -4,17 +4,15 @@ const { default: Popover, Container, Target, Item, Divider } = require('./');
 const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 
 <Row center="xs" between="xs" style={{ marginTop: 80 }}>
-  <Col xs={2}>
+  <Container>
-    <Container>
+    <Target>Hello</Target>
-      <Target>Hello</Target>
+    <Popover placement="right">
-      <Popover placement="right">
+      <Item>Scale</Item>
-        <Item>Scale</Item>
+      <Item>Restart</Item>
-        <Item>Restart</Item>
+      <Item>Stop</Item>
-        <Item>Stop</Item>
+      <Divider />
-        <Divider />
+      <Item>Delete</Item>
-        <Item>Delete</Item>
+    </Popover>
-      </Popover>
+  </Container>
-    </Container>
-  </Col>
 </Row>;
 ```

packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap

@@ -32,6 +32,8 @@ Array [
 
 .c1 {
   display: block;
+  -webkit-text-align: left;
+  text-align: left;
   cursor: pointer;
 }
 

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

@@ -7,6 +7,7 @@ import Baseline from '../baseline';
 
 const BaseItem = styled.span`
   display: block;
+  text-align: left;
 
   &:not(:last-child) {
     margin-bottom: ${remcalc(12)};

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

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import is from 'styled-is';
+import ForEach from 'apr-for-each';
 import remcalc from 'remcalc';
 
 const Wrapper = styled.section`
@@ -63,6 +64,8 @@ const Tab = styled.div`
   ${is('active')`
     height: auto;
     opacity: 1;
+    transition-delay: 150ms;
+    transition: opacity 150ms ease-in;
   `};
 
   .CodeMirror-wrap {
@@ -72,9 +75,60 @@ const Tab = styled.div`
 `;
 
 class Playground extends Component {
-  state = {
+  constructor(props) {
-    tab: 'component'
+    super(props);
-  };
+
+    this.state = {
+      tab: 'component',
+      states: []
+    };
+  }
+
+  componentDidMount() {
+    const code = this.props.preview.props.code;
+    const regex = /\/\/ Tab: \w+/g;
+    let m;
+    while ((m = regex.exec(code)) !== null) {
+      // This is necessary to avoid infinite loops with zero-width matches
+      if (m.index === regex.lastIndex) {
+        regex.lastIndex++;
+      }
+
+      m.forEach((match, groupIndex) => {
+        // MAKE THIS SYNCRONOUS
+        window.setTimeout(() =>
+          this.setState({
+            states: [...this.state.states, match.split(':')[1].trim()]
+          })
+        );
+      });
+    }
+  }
+
+  // async componentDidMount() {
+  //   const code = this.props.preview.props.code;
+
+  //   const matches = (/Tab:\s*?(.*)/gi).exec(code)
+
+  //   if (!matches) {
+  //     return;
+  //   }
+
+  //   matches.unshift();
+
+  //   await ForEach(
+  //     matches,
+  //     match =>
+  //       new Promise(resolve =>
+  //         this.setState(
+  //           {
+  //             states: [...this.state.states, match.trim()]
+  //           },
+  //           resolve
+  //         )
+  //       )
+  //   );
+  // }
 
   changeTab = tab => {
     this.setState({
@@ -82,33 +136,61 @@ class Playground extends Component {
     });
   };
 
+  showPreview = (preview, code) => ({
+    ...preview,
+    props: {
+      ...preview.props,
+      code
+    }
+  });
+
   render() {
     const { name, preview, tabBody } = this.props;
+    const { tab, states } = this.state;
+    const propCode = this.props.preview.props.code;
+    const regex = /\/\/ Tab: \w+/g;
+    const nameRegex = /\/\/ Name: /g;
+
     return (
       <Wrapper>
         <Tabs>
-          <TabHeader active={this.state.tab === 'component'}>
+          <TabHeader active={tab === 'component'}>
             <Button
-              active={this.state.tab === 'component'}
+              active={tab === 'component'}
-              onClick={() => this.changeTab('component')}
+              onClick={() => this.changeTab('component')}>
-            >
+              {(propCode.split(nameRegex)[1] || 'Component').split(/\s/g)[0]}
-              Example
             </Button>
           </TabHeader>
-          <TabHeader active={this.state.tab === 'code'}>
+          {states.length
+            ? states.map(state => (
+                <TabHeader active={tab === state}>
+                  <Button
+                    active={tab === state}
+                    onClick={() => this.changeTab(state)}>
+                    {state}
+                  </Button>
+                </TabHeader>
+              ))
+            : null}
+          <TabHeader active={tab === 'code'}>
             <Button
-              active={this.state.tab === 'code'}
+              active={tab === 'code'}
-              onClick={() => this.changeTab('code')}
+              onClick={() => this.changeTab('code')}>
-            >
               Code
             </Button>
           </TabHeader>
         </Tabs>
-
+        <Tab active={tab === 'component'} data-preview={name}>
-        <Tab active={this.state.tab === 'component'} data-preview={name}>
+          {this.showPreview(preview, propCode.split(regex)[0])}
-          {preview}
         </Tab>
-        <Tab active={this.state.tab === 'code'}>{tabBody}</Tab>
+        {states.length
+          ? states.map((state, i) => (
+              <Tab active={tab === state} data-preview={name}>
+                {this.showPreview(preview, propCode.split(regex)[i + 1])}
+              </Tab>
+            ))
+          : null}
+        <Tab active={tab === 'code'}>{tabBody}</Tab>
       </Wrapper>
     );
   }

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

@@ -16,7 +16,7 @@ const Header = styled.header`
 const Main = styled.div`
   padding: ${remcalc(50)} ${remcalc(120)};
 
-  h4 {
+  h4[class*='rsg--heading'] {
     margin: 0;
     line-height: ${remcalc(26)};
     font-size: ${remcalc(21)};

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

@@ -55,7 +55,6 @@ export function TabButtonRenderer({
   return (
     <button type="button" name={name} className={classNames} onClick={onClick}>
       {children}
-      sup
     </button>
   );
 }

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

@@ -2,14 +2,13 @@
 
 ```jsx
 const React = require('react');
-const remcalc = require('remcalc');
 const { FormGroup, Checkbox } = require('../form');
 const { default: Table, Thead, Tr, Th, Tbody } = require('./');
 
 <Table>
   <Thead>
     <Tr>
-      <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
+      <Th xs="32" padding="0" paddingLeft="12" middle left>
         <FormGroup style={{ display: 'flex', alignItems: 'center' }}>
           <Checkbox noMargin />
         </FormGroup>
@@ -34,14 +33,13 @@ const { default: Table, Thead, Tr, Th, Tbody } = require('./');
 
 ```jsx
 const React = require('react');
-const remcalc = require('remcalc');
 const { FormGroup, Checkbox } = require('../form');
 const { default: Table, Tfoot, Tr, Th } = require('./');
 
 <Table>
   <Tfoot>
     <Tr>
-      <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
+      <Th xs="32" padding="0" paddingLeft="12" middle left>
         <FormGroup style={{ display: 'flex', alignItems: 'center' }}>
           <Checkbox noMargin />
         </FormGroup>
@@ -65,7 +63,6 @@ const { default: Table, Tfoot, Tr, Th } = require('./');
 
 ```jsx
 const React = require('react');
-const remcalc = require('remcalc');
 const { FormGroup, Checkbox } = require('../form');
 const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
 const { Dot, Actions } = require('../icons');
@@ -73,7 +70,7 @@ const { Dot, Actions } = require('../icons');
 <Table>
   <Thead>
     <Tr>
-      <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
+      <Th xs="32" padding="0" paddingLeft="12" middle left>
         <FormGroup>
           <Checkbox noMargin />
         </FormGroup>
@@ -92,8 +89,8 @@ const { Dot, Actions } = require('../icons');
   </Thead>
   <Tbody>
     <Tr>
-      <Td padding="0" paddingLeft={remcalc(12)} middle left>
+      <Td padding="0" paddingLeft="12" middle left>
-        <FormGroup paddingTop={remcalc(4)}>
+        <FormGroup paddingTop={(4)}>
           <Checkbox noMargin checked />
         </FormGroup>
       </Td>
@@ -103,9 +100,9 @@ const { Dot, Actions } = require('../icons');
       <Td middle left>
         <span>
           <Dot
-            width={remcalc(11)}
+            width={(11)}
-            height={remcalc(11)}
+            height={(11)}
-            borderRadius={remcalc(11)}
+            borderRadius={(11)}
             color="primary"
           />{' '}
           Provisioning
@@ -119,8 +116,8 @@ const { Dot, Actions } = require('../icons');
       </Td>
     </Tr>
     <Tr>
-      <Td padding="0" paddingLeft={remcalc(12)} middle left>
+      <Td padding="0" paddingLeft="12" middle left>
-        <FormGroup paddingTop={remcalc(4)}>
+        <FormGroup paddingTop={(4)}>
           <Checkbox noMargin />
         </FormGroup>
       </Td>
@@ -130,9 +127,9 @@ const { Dot, Actions } = require('../icons');
       <Td middle left>
         <span>
           <Dot
-            width={remcalc(11)}
+            width={(11)}
-            height={remcalc(11)}
+            height={(11)}
-            borderRadius={remcalc(11)}
+            borderRadius={(11)}
             color="green"
           />{' '}
           Running
@@ -153,7 +150,6 @@ const { Dot, Actions } = require('../icons');
 
 ```jsx
 const React = require('react');
-const remcalc = require('remcalc');
 const { FormGroup, Radio } = require('../form');
 const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
 const { Dot } = require('../icons');
@@ -161,7 +157,7 @@ const { Dot } = require('../icons');
 <Table>
   <Thead>
     <Tr>
-      <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left />
+      <Th xs="32" padding="0" paddingLeft="12" middle left />
       <Th sortOrder="asc" showSort left middle selected actionable>
         <span>Name </span>
       </Th>
@@ -175,8 +171,8 @@ const { Dot } = require('../icons');
   </Thead>
   <Tbody>
     <Tr>
-      <Td padding="0" paddingLeft={remcalc(12)} middle left selected>
+      <Td padding="0" paddingLeft="12" middle left selected>
-        <FormGroup paddingTop={remcalc(4)}>
+        <FormGroup paddingTop={(4)}>
           <Radio noMargin checked />
         </FormGroup>
       </Td>
@@ -186,9 +182,9 @@ const { Dot } = require('../icons');
       <Td middle left selected>
         <span>
           <Dot
-            width={remcalc(11)}
+            width={(11)}
-            height={remcalc(11)}
+            height={(11)}
-            borderRadius={remcalc(11)}
+            borderRadius={(11)}
             color="primary"
           />{' '}
           Provisioning
@@ -199,8 +195,8 @@ const { Dot } = require('../icons');
       </Td>
     </Tr>
     <Tr>
-      <Td padding="0" paddingLeft={remcalc(12)} middle left>
+      <Td padding="0" paddingLeft="12" middle left>
-        <FormGroup paddingTop={remcalc(4)}>
+        <FormGroup paddingTop={(4)}>
           <Radio noMargin />
         </FormGroup>
       </Td>
@@ -210,9 +206,9 @@ const { Dot } = require('../icons');
       <Td middle left>
         <span>
           <Dot
-            width={remcalc(11)}
+            width={(11)}
-            height={remcalc(11)}
+            height={(11)}
-            borderRadius={remcalc(11)}
+            borderRadius={(11)}
             color="green"
           />{' '}
           Running

packages/ui-toolkit/styleguide.config.js

@@ -9,7 +9,9 @@ const dnHandler = require('react-docgen-displayname-handler');
 const path = require('path');
 
 module.exports = {
-  highlightTheme: 'base16-light',
+  editorConfig: {
+    theme: 'base16-light'
+  },
   webpackConfig: Object.assign(webpackConfig, {
     resolve: Object.assign(webpackConfig.resolve, {
       alias: Object.assign(webpackConfig.resolve.alias, {

yarn.lock

@@ -562,7 +562,7 @@ apr-filter@^3.0.2:
     apr-engine-sum "^3.0.3"
     apr-map "^3.0.3"
 
-apr-for-each@^3.0.2, apr-for-each@^3.0.3:
+apr-for-each@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/apr-for-each/-/apr-for-each-3.0.3.tgz#2efa6834bcac3ac8a7ecda4642edd318b7708580"
   dependencies: