fix(ui-toolkit): fix small bugs

packages/ui-toolkit/etc/style.css

@@ -1,102 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
-@import url('https://fonts.googleapis.com/css?family=Libre+Franklin');
-
-body {
-    overflow-x: hidden;
-}
-
-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;
-    max-width: 1400px;
-}
-
-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-48 {
-    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;
-}
-body .cm-s-base16-light.CodeMirror {
-    background: #fafafa;
-    color: #494949;
-    border-color: #d8d8d8;
-    padding: 9px 18px;
-    line-height: 16px;
-}

packages/ui-toolkit/package.json

@@ -7,17 +7,20 @@
   "jsnext:main": "dist/es/index.js",
   "module": "dist/es/index.js",
   "scripts": {
-    "lint-ci": "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+    "lint-ci":
-    "lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+      "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+    "lint":
+      "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
     "test-ci": "echo 0",
     "test": "echo 0",
     "test:visual": "run-p serve jest",
     "jest": "jest",
     "serve": "http-server styleguide -p 6060 -s",
-    "compile:es": "babel src --out-dir dist/es",
+    "compile:es": "NODE_ENV='production' babel src --out-dir dist/es",
     "compile:umd": "UMD=1 babel src --out-dir dist/umd",
     "compile": "redrun -p compile:*",
-    "dev": "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
+    "dev":
+      "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
     "styleguide:build": "NODE_ENV=production styleguidist build",
     "styleguide": "NODE_ENV=development styleguidist server",
     "prepublish": "NODE_ENV=production npm run compile"

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

@@ -11,7 +11,7 @@ const { Message, Title, Description } = require('.');
     sure that you choose the data center that suits your requirements. Learn
     more
   </Description>
-</Message>;
+</Message>
 ```
 
 #### Error

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

@@ -43,7 +43,7 @@ const Outlet = styled.div`
 const Close = styled(CloseButton)`
   position: absolute;
   right: ${unitcalc(0.5)};
-  top: ${unitcalc(0.5)};
+  margin: 0;
 `;
 
 export const Message = ({ onCloseClick, children, ...type }) => (

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

@@ -3,7 +3,7 @@ const React = require('react');
 const { default: Popover, Container, Target, Item, Divider } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');
 
-<Row center="xs" between="xs">
+<Row center="xs" between="xs" style={{marginTop: 80}}>
   <Col xs={2}>
     <Container>
       <Target>Hello</Target>

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

@@ -1,20 +1,16 @@
 import React, { Component } from 'react';
-import remcalc from 'remcalc';
 import is, { isNot } from 'styled-is';
 import PropTypes from 'prop-types';
-
+import styled from 'styled-components';
-import { H4 as BaseH4 } from '../text/headings';
+import remcalc from 'remcalc';
 import Baseline from '../baseline';
 
-const BaseItem = BaseH4.extend`
+const BaseItem = styled.span`
-  font-size: ${remcalc(16)};
+  display: block;
-  text-align: left;
 
-  font-style: normal;
+  &:not(:last-child) {
-  font-weight: normal;
+    margin-bottom: ${remcalc(12)};
-  line-height: normal;
+  }
-
-  color: ${props => props.theme.secondary};
 
   ${isNot('disabled')`
     cursor: pointer;

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

@@ -19,7 +19,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/section.js

@@ -33,7 +33,7 @@ export default allProps => {
   const Tag = depth === 2 ? CardStyled : 'div';
   const TagMain = depth === 2 ? Main : 'div';
   return (
-    <Tag>
+    <Tag id={name.replace(/\s+/g, '-').toLowerCase()}>
       {name &&
         depth !== 1 && (
           <Header>

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

@@ -1,11 +1,24 @@
 import React from 'react';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider, injectGlobal } from 'styled-components';
 
 import theme from '../theme';
 import Base from '../base';
 import { RootContainer } from '../layout';
 import 'codemirror/mode/jsx/jsx';
 
+injectGlobal`
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
+@import url('https://fonts.googleapis.com/css?family=Libre+Franklin');
+
+  button {
+    cursor: pointer;
+  }
+
+  code, .CodeMirror-line * {
+   font-family: 'Roboto Mono'; 
+  }
+`;
+
 const StyledBase = Base.extend`
   /* trick prettier */
   background-color: transparent;

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

@@ -3,7 +3,7 @@ const React = require('react');
 const { default: Tooltip, Container, Target } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');
 
-<Row center="xs" between="xs">
+<Row center="xs" between="xs" style={{marginTop: 60}}>
   <Col xs={2}>
     <Container>
       <Target>Hello</Target>
@@ -47,7 +47,7 @@ const { default: Tooltip, Container, Target } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');
 
 <Row center="xs" between="xs">
-  <Col xs={2}>
+  <Col xs={3}>
     <Container hoverable>
       <Target>Hover here</Target>
       <Tooltip placement="top">

packages/ui-toolkit/styleguide.config.js

@@ -10,7 +10,6 @@ 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, {
       alias: Object.assign(webpackConfig.resolve.alias, {