feat(ui-toolkit): add syntax highlighting to styleguide

fixes #745

packages/ui-toolkit/etc/style.css

@@ -86,4 +86,11 @@ p.rsg--p-32 {
 .rsg--sidebar-4 :-moz-placeholder { /* Firefox 18- */
     color: #494949;
     opacity: 0.5;
-}
+}
+body .cm-s-base16-light.CodeMirror {
+    background: #fafafa;
+    color: #494949;
+    border-color: #d8d8d8;
+    padding: 9px 18px;
+    line-height: 16px;
+}

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

@@ -1,6 +1,6 @@
 ### with text
 
-```
+```jsx
 <span>
   <Button>Inspire the lazy</Button>
   <span> </span>
@@ -10,7 +10,7 @@
 
 ### secondary
 
-```
+```jsx
 <span>
   <Button secondary>Inspire the brave</Button>
   <span> </span>
@@ -20,7 +20,7 @@
 
 ### tertiary
 
-```
+```jsx
 <span>
   <Button tertiary>Inspire the tertiary</Button>
   <span> </span>
@@ -32,7 +32,7 @@
 
 ### disabled
 
-```
+```jsx
 <span>
   <Button disabled>Inspire the liars</Button>
   <span> </span>

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

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import React from 'react';
+import remcalc from 'remcalc';
 
 import BaseToggle from './base/toggle';
 import Baseline from '../baseline';
@@ -20,6 +21,12 @@ const Li = styled.li`
 const Ul = styled.ul`
   margin: 0;
   padding: 0;
+  margin-bottom: ${remcalc(8)};
+
+  + label {
+    margin-left: ${remcalc(26)};
+    font-size: ${remcalc(13)};
+  }
 `;
 
 const RadioItem = BaseInput(({ children, id, ...rest }) => (

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

@@ -63,29 +63,5 @@ const Label = require('./label').default;
       You need to select one
     </FormMeta>
   </FormGroup>
-  <Legend>You can also have validation in each radio button</Legend>
-  <FormGroup name='who-killed'>
-    <Legend>Who killed the radio star?</Legend>
-    <RadioList>
-      <Radio success name="five" value='video'>
-        <Label>Video</Label>
-      </Radio>
-      <FormMeta left success>
-        You are the best !
-      </FormMeta>
-      <Radio warning name="five" value='tv'>
-        <Label>TV</Label>
-      </Radio>
-        <FormMeta left warning>
-          Are you sure ?
-        </FormMeta>
-      <Radio error name="five" value='netflix'>
-        <Label>Netflix</Label>
-      </Radio>
-        <FormMeta left error>
-          No, sorry
-        </FormMeta>
-    </RadioList>
-  </FormGroup>
 </div>
 ```

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

@@ -1,4 +1,4 @@
-```
+```jsx
 const { ToggleList } = require('./toggle');
 const FormGroup = require('./group').default;
 const Legend = require('./legend').default;
@@ -14,7 +14,7 @@ const Legend = require('./legend').default;
 
 #### Toggle > Disabled
 
-```
+```jsx
 const { ToggleList } = require('./toggle');
 const FormGroup = require('./group').default;
 const Legend = require('./legend').default;

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

@@ -1,7 +1,7 @@
 #### Success/Educational
 
-```
+```jsx
-const { Title, Description } = require('.');
+const { Message, Title, Description } = require('.');
 
 <Message>
   <Title>Choosing deployment data center</Title>
@@ -11,8 +11,8 @@ const { Title, Description } = require('.');
 
 #### Error
 
-```
+```jsx
-const { Title, Description } = require('.');
+const { Message, Title, Description } = require('.');
 
 <Message error>
   <Title>Choosing deployment data center</Title>
@@ -22,8 +22,8 @@ const { Title, Description } = require('.');
 
 #### Warning
 
-```
+```jsx
-const { Title, Description } = require('.');
+const { Message, Title, Description } = require('.');
 
 <Message warning>
   <Title>Choosing deployment data center</Title>

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

@@ -46,7 +46,7 @@ const Close = styled(CloseButton)`
   top: ${unitcalc(0.5)};
 `;
 
-const Message = ({ onCloseClick, children, ...type }) => (
+export const Message = ({ onCloseClick, children, ...type }) => (
   <Container>
     <Color {...type} />
     <Outlet>{children}</Outlet>

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

@@ -3,6 +3,7 @@ import { ThemeProvider, injectGlobal } from 'styled-components';
 import theme from '../theme';
 import Base from '../base';
 import { loadedFontFamily } from '../typography';
+import 'react-codemirror2/node_modules/codemirror/mode/jsx/jsx';
 
 const StyledBase = Base.extend`
   /* trick prettier */

packages/ui-toolkit/styleguide.config.js

@@ -5,6 +5,7 @@ const snapguidist = require('snapguidist');
 const path = require('path');
 
 module.exports = {
+  highlightTheme: 'base16-light',
   require: [path.join(__dirname, 'etc/style.css')],
   webpackConfig: Object.assign(webpackConfig, {
     resolve: Object.assign(webpackConfig.resolve, {