refactor: Usagebar stories (#41)

* refactor: Usagebar stories

* update

.storybook/config.ts

@@ -1,6 +1,6 @@
 import { configure, addDecorator } from '@storybook/react';
 import { withOptions } from '@storybook/addon-options';
-import 'bootstrap-sass/assets/stylesheets/_bootstrap.scss';
+import '../src/style/index.scss';
 import './style.scss';
 
 addDecorator (

README.md

@@ -13,11 +13,15 @@
 - [Documentation With  Gatsby (WIP)](https://xsky-fe.github.io/wizard-ui/)
 
 ## Install and Usage
+
+### Dev and webpack setting
 Add in package.json
 ```bash
 yarn add wizard-ui
 # sass dep && loader
 yarn add --dev node-sass style-loader css-loader sass-loader
+# react bootstrap font dev
+yarn add --dev url-loader file-loader
 ```
 if you not use [create-react-app](https://github.com/facebook/create-react-app), you need set webpack config:
 ```js
@@ -28,24 +32,37 @@ if you not use [create-react-app](https://github.com/facebook/create-react-app),
     'css-loader',
     'sass-loader'
   ]
+},
+{
+  test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
+  use: ['file-loader']
+},
+{
+  test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+  use: 'url-loader?limit=100000'
 }
 ```
 
-and then you can use like this:
-### commonjs
+### Global style
+```
+import 'wizard-ui/lib/style/index.scss';
+```
+
+### Usage
+> UMD
 ```jsx
 import { Icon } from 'wizard-ui';
 
 export default () => <Icon type="os-search-role" />
 ```
-### es
+> ES
 ```jsx
 import { Icon } from 'wizard-ui/esm';
 
 export default () => <Icon type="os-search-role" />
 ```
 
-### dist file analysis
+### Dist file analysis
 ```bash
 yarn dist-stats
 ```

docs/content/layout/font.mdx

@@ -27,11 +27,11 @@ font-family: "Helvetica Neue","Helvetica","PingFang SC","Arial","Microsoft YaHei
 ## 字重
 字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 regular 以及 medium 的两种字体重量。
 
-## 使用规范	
+## 使用规范
 - H1：大小 36px，行高 44px
 - H2：大小 28px，行高 36px
 - H3：大小 20px，行高 28px
-- 4：大小 16px，行高 24x
+- H4：大小 16px，行高 24x
 - 正文（标题）：大小 14px，行高 22px
 - 正文：大小 13px，行高 22px
 - 提示：大小 12px，行高 20px

docs/src/Layout/bootstrap-custom.scss

@@ -1,3 +1,5 @@
+@import './variables.scss';
+
 $bootstrap-sass-asset-helper: false !default;
 //
 // Variables
@@ -15,13 +17,6 @@ $gray:                   lighten($gray-base, 33.5%) !default; // #555
 $gray-light:             lighten($gray-base, 46.7%) !default; // #777
 $gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee
 
-$brand-primary:         #6b58c4 !default;
-$brand-success:         #5cb85c !default;
-$brand-info:            #5bc0de !default;
-$brand-warning:         #f0ad4e !default;
-$brand-danger:          #d9534f !default;
-
-
 //== Scaffolding
 //
 //## Settings for some of the most global styles.
@@ -43,7 +38,7 @@ $link-hover-decoration: underline !default;
 //
 //## Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-sans-serif:  "Helvetica Neue", Helvetica, "PingFang SC", Arial, "Microsoft YaHei", "微软雅黑", sans-serif !default;
 $font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
@@ -54,8 +49,8 @@ $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
 $font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
 
 $font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
-$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
-$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
+$font-size-h2:            floor(($font-size-base * 2)) !default; // ~28px
+$font-size-h3:            ceil($font-size-base * 1.43) !default; // ~20px
 $font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
 $font-size-h5:            $font-size-base !default;
 $font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
@@ -651,9 +646,9 @@ $alert-danger-border:         $state-danger-border !default;
 //##
 
 //** Background color of the whole progress component
-$progress-bg:                 #f5f5f5 !default;
+$progress-bg:                 $gray-medium-8 !default;
 //** Progress bar text color
-$progress-bar-color:          #fff !default;
+$progress-bar-color:          $white !default;
 //** Variable for setting rounded corners on progress bar.
 $progress-border-radius:      $border-radius-base !default;
 

docs/src/Layout/style.scss

@@ -24,20 +24,6 @@
   border-radius: 4px;
   margin-bottom: 10px;
 }
-h1 {
-  margin-top: 8px;
-  margin-bottom: 20px;
-  font-weight: 500;
-  font-size: 30px;
-}
-h2 {
-  font-size: 24px;
-  line-height: 32px;
-}
-h3 {
-  font-size: 20px;
-  line-height: 28px;
-}
 table {
   width: 100%;
   margin: 8px 0 16px;

docs/src/components/Header/index.js

@@ -12,7 +12,7 @@ export default ({ post }) => {
   return (
     <div className="Header">
       <SEO title={title} />
-      <h1>
+      <h2>
         {title}
         <OverlayTrigger
           placement="top"
@@ -31,7 +31,7 @@ export default ({ post }) => {
             <Glyphicon glyph="pencil" />
           </a>
         </OverlayTrigger>
-      </h1>
+      </h2>
       <div className="Header__Sub">
         {date && <b>{post.frontmatter.date}</b>}
         {author && (

docs/src/templates/components-post.js

@@ -11,9 +11,9 @@ import Toc from '../components/Toc';
 import MDXRenderer from 'gatsby-mdx/mdx-renderer';
 
 const components = {
-  h2: props => <LinkedHeading h="2" {...props} />,
-  h3: props => <LinkedHeading h="3" {...props} />,
-  h4: props => <LinkedHeading h="4" {...props} />,
+  h2: props => <LinkedHeading h="3" {...props} />,
+  h3: props => <LinkedHeading h="4" {...props} />,
+  h4: props => <LinkedHeading h="5" {...props} />,
   code: Playground,
   pre: props => <div className="pre" {...props} />,
 };