create new branch

server/App.js

-const cors = require('cors');
-const express = require('express');
-const app = express();
-const bodyParser = require('body-parser');
-const Login = require('./routes/login');
-const Logout = require('./routes/logout');
-const Menu = require('./routes/menu');
-const SytemName = require('./routes/systemInfo');
+const cors = require('cors')
+const express = require('express')
+const app = express()
+const bodyParser = require('body-parser')
+const Login = require('./routes/login')
+const Logout = require('./routes/logout')
+const Menu = require('./routes/menu')
+const SytemName = require('./routes/systemInfo')
+const ButtonIcon = require('./routes/button/buttonIcon')
 
-app.use(bodyParser.json());
-app.use(cors());
-app.use(express.json());
-app.use(express.urlencoded({ extended: true }));
+app.use(bodyParser.json())
+app.use(cors())
+app.use(express.json())
+app.use(express.urlencoded({ extended: true }))
 
-new Login(app);
-new Logout(app);
-new SytemName(app);
-new Menu(app);
+new Login(app)
+new Logout(app)
+new SytemName(app)
+new Menu(app)
+new ButtonIcon(app)
 
-app.listen('8000', () => console.log('listen on port 8000'));
+app.listen('8000', () => console.log('listen on port 8000'))

server/json/button/buttonIcon.json

+[
+  {
+    "value": "ButtonIcon",
+    "type": "primary",
+    "disabled": false,
+    "icon": "search",
+    "id": "1"
+  },
+  {
+    "value": "ButtonIcon",
+    "type": "default",
+    "disabled": false,
+    "icon": "search",
+    "id": "2"
+  },
+  {
+    "value": "ButtonIcon",
+    "type": "dashed",
+    "disabled": false,
+    "icon": "search",
+    "id": "3"
+  },
+  {
+    "value": "ButtonIcon",
+    "type": "danger",
+    "disabled": false,
+    "icon": "search",
+    "id": "4"
+  },
+  {
+    "value": "",
+    "type": "primary",
+    "disabled": true,
+    "icon": "search",
+    "shape": "circle",
+    "id": "5"
+  }
+]

server/json/menu.json

 {
   "success": true,
   "message": "Menu list",
-  "dataList": [{
+  "dataList": [
+    {
       "menuIcon": "https://dl.dropboxusercontent.com/s/5vrgps00p02gsah/ic_menu_home.png",
-      "pageTitle": "Home",
-      "path": "/home",
+      "pageTitle": "Introduction",
+      "path": "/introduction",
       "default": true
     },
     {
+      "menuIcon": "https://dl.dropboxusercontent.com/s/72t3eeh7sjn7kcg/ic_menu_setting.png",
+      "pageTitle": "Button",
+      "path": "/button",
+      "default": false,
+      "submenuList": [
+        {
+          "pageTitle": "Button Type",
+          "path": "/buttonType",
+          "default": false
+        },
+        {
+          "pageTitle": "Button Icon",
+          "path": "/buttonIcon",
+          "default": false
+        }
+      ]
+    },
+    {
       "menuIcon": "https://dl.dropboxusercontent.com/s/5vrgps00p02gsah/ic_menu_home.png",
       "pageTitle": "Content 1",
       "path": "/content1",
@@ -30,7 +49,8 @@
       "pageTitle": "Menu",
       "path": "/menu",
       "default": false,
-      "submenuList": [{
+      "submenuList": [
+        {
           "pageTitle": "Submenu 1",
           "path": "/submenu1",
           "default": false
@@ -43,4 +63,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}

server/routes/button/buttonIcon.js

+const buttonIcon = require('../../json/button/buttonIcon.json')
+
+class ButtonIcon {
+  constructor(app) {
+    app.post('/button/getButtonIcon', (req, res) => {
+      res.send(buttonIcon)
+    })
+  }
+}
+
+module.exports = ButtonIcon

src/App.js

-import React, { Component } from 'react';
+import React, { Component } from 'react'
 
-import './resources/style/css/App.css';
+import './resources/style/css/App.css'
+import './resources/style/css/markdown.css'
 
-import Routing from './routes/mainRoutes';
+import Routing from './routes/mainRoutes'
 
 class App extends Component {
   render() {
     // console.log('App: this.props ', this.props);
-    return <Routing eventEmitter={this.props.eventEmitter} />;
+    return <Routing eventEmitter={this.props.eventEmitter} />
   }
 }
 
-export default App;
+export default App

src/components/button/ButtonIcon.jsx

+import React, { Component, Fragment } from 'react'
+import { Button } from 'antd'
+import PropTypes from 'prop-types'
+
+export default class ButtonIcon extends Component {
+  render() {
+    let { buttonTitle } = this.props
+    return (
+      <Fragment>
+        {buttonTitle &&
+          buttonTitle.map(title => {
+            return (
+              <Button
+                key={title.id}
+                type={title.type}
+                disabled={title.disabled}
+                href={title.href}
+                icon={title.icon}
+                shape={title.shape}
+              >
+                {title.value}
+              </Button>
+            )
+          })}
+      </Fragment>
+    )
+  }
+}
+
+ButtonIcon.propTypes = {
+  titleMenuItem: PropTypes.array.isRequired
+}
+
+// Default values for props
+ButtonIcon.defaultProps = {
+  titleMenuItem: []
+}

src/components/button/ButtonType.jsx

+import React, { Component, Fragment } from 'react'
+import { Button } from 'antd';
+import PropTypes from 'prop-types'
+
+export default class ButtonType extends Component {
+    render() {
+        let { buttonTitle } = this.props
+        return (
+            <Fragment>
+          {buttonTitle &&
+            buttonTitle.map(title => {
+              return (
+                <Button type={title.type} disabled={title.disabled} href={title.href}>
+                 {title.value}
+                </Button>
+                )
+                 })}
+            </Fragment>
+        );
+    }
+}
+
+ButtonType.propTypes = {
+    titleMenuItem: PropTypes.array.isRequired,
+  }
+  
+  // Default values for props
+  ButtonType.defaultProps = {
+    titleMenuItem: [],
+  }
+

src/components/grids/BasicGrid.js

+import React, { Component, Fragment } from 'react'
+import { Row, Col } from 'antd'
+
+class BasicGrid extends Component {
+
+    render() {
+    return (
+        <Fragment>
+            <div>
+            <Row>
+                <Col span={12}>col-12</Col>
+                <Col span={12}>col-12</Col>
+            </Row>
+            <Row>
+                <Col span={8}>col-8</Col>
+                <Col span={8}>col-8</Col>
+                <Col span={8}>col-8</Col>
+            </Row>
+            <Row>
+                <Col span={6}>col-6</Col>
+                <Col span={6}>col-6</Col>
+                <Col span={6}>col-6</Col>
+                <Col span={6}>col-6</Col>
+            </Row>
+            </div>
+        </Fragment>
+    )
+}
+}
+export default BasicGrid
+  
\ No newline at end of file

src/components/grids/ColumnOffset.js

+import React, { Component, Fragment } from 'react'
+import { Row, Col } from 'antd'
+
+class ColumnOffset extends Component {
+
+    render() {
+    return (
+        <Fragment>
+             <div>
+                <Row>
+                    <Col span={8}>col-8</Col>
+                    <Col span={8} offset={8}>col-8</Col>
+                </Row>
+                <Row>
+                    <Col span={6} offset={6}>col-6 col-offset-6</Col>
+                    <Col span={6} offset={6}>col-6 col-offset-6</Col>
+                </Row>
+                <Row>
+                    <Col span={12} offset={6}>col-12 col-offset-6</Col>
+                </Row>
+            </div>
+        </Fragment>
+    )
+}
+}
+export default ColumnOffset
+  
\ No newline at end of file

src/components/grids/FlexAlignment.js

+import React, { Component, Fragment } from 'react'
+import { Row, Col } from 'antd'
+const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
+class FlexAlignment extends Component {
+
+    render() {
+    return (
+        <Fragment>
+<div>
+    <p>Align Top</p>
+    <Row type="flex" justify="center" align="top">
+      <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
+    </Row>
+
+    <p>Align Center</p>
+    <Row type="flex" justify="space-around" align="middle">
+      <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
+    </Row>
+
+    <p>Align Bottom</p>
+    <Row type="flex" justify="space-between" align="bottom">
+      <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
+    </Row>
+  </div>
+        </Fragment>
+    )
+}
+}
+export default FlexAlignment
+  
\ No newline at end of file

src/components/grids/FlexLayout.js

+import React, { Component, Fragment } from 'react'
+import { Row, Col } from 'antd'
+
+class FlexLayout extends Component {
+
+    render() {
+    return (
+        <Fragment>
+            <div>
+    <p>sub-element align left</p>
+    <Row type="flex" justify="start">
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+    </Row>
+
+    <p>sub-element align center</p>
+    <Row type="flex" justify="center">
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+    </Row>
+
+    <p>sub-element align right</p>
+    <Row type="flex" justify="end">
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+    </Row>
+
+    <p>sub-element monospaced arrangement</p>
+    <Row type="flex" justify="space-between">
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+    </Row>
+
+    <p>sub-element align full</p>
+    <Row type="flex" justify="space-around">
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+    </Row>
+  </div>
+        </Fragment>
+    )
+}
+}
+export default FlexLayout
+  
\ No newline at end of file

src/components/grids/FlexOrder.js

+import React, { Component, Fragment } from 'react'
+import { Row, Col } from 'antd'
+
+class FlexOrder extends Component {
+
+    render() {
+    return (
+        <Fragment>
+            <div>
+              <Row type="flex">
+                <Col span={6} order={4}>1 col-order-4</Col>
+                <Col span={6} order={3}>2 col-order-3</Col>
+                <Col span={6} order={2}>3 col-order-2</Col>
+                <Col span={6} order={1}>4 col-order-1</Col>
+              </Row>
+            </div>
+        </Fragment>
+    )
+}
+}
+export default FlexOrder
+  
\ No newline at end of file

src/components/grids/GridGutter.js

+import React, { Component, Fragment } from 'react'
+import { Row, Col } from 'antd'
+
+class GridGutter extends Component {
+
+    render() {
+    return (
+        <Fragment>
+              <div className="gutter-example">
+                <Row gutter={16}>
+                <Col className="gutter-row" span={6}>
+                    <div className="gutter-box">col-6</div>
+                </Col>
+                <Col className="gutter-row" span={6}>
+                    <div className="gutter-box">col-6</div>
+                </Col>
+                <Col className="gutter-row" span={6}>
+                    <div className="gutter-box">col-6</div>
+                </Col>
+                <Col className="gutter-row" span={6}>
+                    <div className="gutter-box">col-6</div>
+                </Col>
+                </Row>
+            </div>
+        </Fragment>
+    )
+}
+}
+export default GridGutter
+  
\ No newline at end of file

src/components/grids/GridSort.js

+import React, { Component, Fragment } from 'react'
+import { Row, Col } from 'antd'
+
+class GridSort extends Component {
+
+    render() {
+    return (
+        <Fragment>
+            <div>
+                <Row>
+                    <Col span={18} push={6}>col-18 col-push-6</Col>
+                    <Col span={6} pull={18}>col-6 col-pull-18</Col>
+                </Row>
+            </div>
+        </Fragment>
+    )
+}
+}
+export default GridSort
+  
\ No newline at end of file

src/components/grids/Playground.js

+import React, { Component, Fragment } from 'react'
+import { Row, Col ,Slider } from 'antd'
+
+class Playground extends Component {
+
+  gutters = {};
+
+  colCounts = {};
+
+  constructor() {
+    super();
+    this.state = {
+      gutterKey: 1,
+      colCountKey: 2,
+    };
+    [8, 16, 24, 32, 40, 48].forEach((value, i) => { this.gutters[i] = value; });
+    [2, 3, 4, 6, 8, 12].forEach((value, i) => { this.colCounts[i] = value; });
+  }
+
+  onGutterChange = (gutterKey) => {
+    this.setState({ gutterKey });
+  }
+
+  onColCountChange = (colCountKey) => {
+    this.setState({ colCountKey });
+  }
+
+  render() {
+    const { gutterKey, colCountKey } = this.state;
+    const cols = [];
+    const colCount = this.colCounts[colCountKey];
+    let colCode = '';
+    for (let i = 0; i < colCount; i++) {
+      cols.push(
+        <Col key={i.toString()} span={24 / colCount}>
+          <div>Column</div>
+        </Col>
+      );
+      colCode += `  <Col span={${24 / colCount}} />\n`;
+    }
+    return (
+      <Fragment>
+      <div>
+        <div style={{ marginBottom: 16 }}>
+          <span style={{ marginRight: 6 }}>Gutter (px): </span>
+          <div style={{ width: '50%' }}>
+            <Slider
+              min={0}
+              max={Object.keys(this.gutters).length - 1}
+              value={gutterKey}
+              onChange={this.onGutterChange}
+              marks={this.gutters}
+              step={null}
+            />
+          </div>
+          <span style={{ marginRight: 6 }}>Column Count:</span>
+          <div style={{ width: '50%' }}>
+            <Slider
+              min={0}
+              max={Object.keys(this.colCounts).length - 1}
+              value={colCountKey}
+              onChange={this.onColCountChange}
+              marks={this.colCounts}
+              step={null}
+            />
+          </div>
+        </div>
+        <Row gutter={this.gutters[gutterKey]}>{cols}</Row>
+        <pre>{`<Row gutter={${this.gutters[gutterKey]}}>\n${colCode}</Row>`}</pre>
+      </div>
+      </Fragment>
+    );
+  }
+}
+
+export default Playground
+  
\ No newline at end of file

src/components/grids/Responsive.js

+import React, { Component, Fragment } from 'react'
+import { Row, Col } from 'antd'
+
+class Responsive extends Component {
+
+    render() {
+    return (
+        <Fragment>
+          <Row>
+              <Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
+              <Col xs={20} sm={16} md={12} lg={8} xl={4}>Col</Col>
+              <Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
+            </Row>
+        </Fragment>
+    )
+}
+}
+export default Responsive
+  
\ No newline at end of file

src/components/menus/CollapsedInlineMenu.js

+import React, { Component, Fragment } from 'react'
+import { Menu, Icon, Button } from 'antd'
+
+const SubMenu = Menu.SubMenu
+
+class CollapsedInlineMenu extends Component {
+  state = {
+    collapsed: false,
+  }
+
+  toggleCollapsed = () => {
+    this.setState({
+      collapsed: !this.state.collapsed,
+    })
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <div style={{ width: 256 }}>
+          <Button
+            type="primary"
+            onClick={this.toggleCollapsed}
+            style={{ marginBottom: 0 }}>
+            <Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} />
+          </Button>
+          <Menu
+            defaultSelectedKeys={['1']}
+            defaultOpenKeys={['sub1']}
+            mode="inline"
+            theme="dark"
+            inlineCollapsed={this.state.collapsed}>
+            <Menu.Item key="1">
+              <Icon type="pie-chart" />
+              <span>Option 1</span>
+            </Menu.Item>
+            <Menu.Item key="2">
+              <Icon type="desktop" />
+              <span>Option 2</span>
+            </Menu.Item>
+            <Menu.Item key="3">
+              <Icon type="inbox" />
+              <span>Option 3</span>
+            </Menu.Item>
+            <SubMenu
+              key="sub1"
+              title={
+                <span>
+                  <Icon type="mail" />
+                  <span>Navigation One</span>
+                </span>
+              }>
+              <Menu.Item key="5">Option 5</Menu.Item>
+              <Menu.Item key="6">Option 6</Menu.Item>
+              <Menu.Item key="7">Option 7</Menu.Item>
+              <Menu.Item key="8">Option 8</Menu.Item>
+            </SubMenu>
+            <SubMenu
+              key="sub2"
+              title={
+                <span>
+                  <Icon type="appstore" />
+                  <span>Navigation Two</span>
+                </span>
+              }>
+              <Menu.Item key="9">Option 9</Menu.Item>
+              <Menu.Item key="10">Option 10</Menu.Item>
+              <SubMenu key="sub3" title="Submenu">
+                <Menu.Item key="11">Option 11</Menu.Item>
+                <Menu.Item key="12">Option 12</Menu.Item>
+              </SubMenu>
+            </SubMenu>
+          </Menu>
+        </div>
+      </Fragment>
+    )
+  }
+}
+
+export default CollapsedInlineMenu

src/components/menus/InlineMenu.js

+import React, { Component, Fragment } from 'react'
+import { Menu, Icon } from 'antd'
+
+const SubMenu = Menu.SubMenu
+const MenuItemGroup = Menu.ItemGroup
+
+class InlineMenu extends Component {
+  handleClick = e => {
+    console.log('click : ', e)
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <Menu
+          onClick={this.handleClick}
+          style={{ width: 256 }}
+          defaultSelectedKeys={['1']}
+          defaultOpenKeys={['sub1']}
+          mode="inline">
+          <SubMenu
+            key="sub1"
+            title={
+              <span>
+                <Icon type="mail" />
+                <span>Navigation One</span>
+              </span>
+            }>
+            <MenuItemGroup key="g1" title="Item 1">
+              <Menu.Item key="1">Option 1</Menu.Item>
+              <Menu.Item key="2">Option 2</Menu.Item>
+            </MenuItemGroup>
+          </SubMenu>
+        </Menu>
+      </Fragment>
+    )
+  }
+}
+
+export default InlineMenu

src/components/menus/MenuThemes.js

+import React, { Component, Fragment } from 'react'
+import { Menu, Icon, Switch } from 'antd'
+
+const SubMenu = Menu.SubMenu
+
+class MenuThemes extends Component {
+  state = {
+    theme: 'dark',
+    current: '1',
+  }
+
+  changeTheme = value => {
+    this.setState({
+      theme: value ? 'dark' : 'light',
+    })
+  }
+
+  handleClick = e => {
+    console.log('click ', e)
+    this.setState({
+      current: e.key,
+    })
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <Switch
+          checked={this.state.theme === 'dark'}
+          onChange={this.changeTheme}
+          checkedChildren="Dark"
+          unCheckedChildren="Light"
+        />
+        <br />
+        <br />
+        <Menu
+          theme={this.state.theme}
+          onClick={this.handleClick}
+          style={{ width: 256 }}
+          defaultOpenKeys={['sub1']}
+          selectedKeys={[this.state.current]}
+          mode="inline">
+          <SubMenu
+            key="sub1"
+            title={
+              <span>
+                <Icon type="mail" />
+                <span>Navigation One</span>
+              </span>
+            }>
+            <Menu.Item key="1">Option 1</Menu.Item>
+            <Menu.Item key="2">Option 2</Menu.Item>
+            <Menu.Item key="3">Option 3</Menu.Item>
+            <Menu.Item key="4">Option 4</Menu.Item>
+          </SubMenu>
+          <SubMenu
+            key="sub2"
+            title={
+              <span>
+                <Icon type="appstore" />
+                <span>Navigtion Two</span>
+              </span>
+            }>
+            <Menu.Item key="5">Option 5</Menu.Item>
+            <Menu.Item key="6">Option 6</Menu.Item>
+            <SubMenu key="sub3" title="Submenu">
+              <Menu.Item key="7">Option 7</Menu.Item>
+              <Menu.Item key="8">Option 8</Menu.Item>
+            </SubMenu>
+          </SubMenu>
+          <SubMenu
+            key="sub4"
+            title={
+              <span>
+                <Icon type="setting" />
+                <span>Navigation Three</span>
+              </span>
+            }>
+            <Menu.Item key="9">Option 9</Menu.Item>
+            <Menu.Item key="10">Option 10</Menu.Item>
+            <Menu.Item key="11">Option 11</Menu.Item>
+            <Menu.Item key="12">Option 12</Menu.Item>
+          </SubMenu>
+        </Menu>
+      </Fragment>
+    )
+  }
+}
+
+export default MenuThemes

src/components/menus/TopMenu.js

+import React, { Component, Fragment } from 'react'
+import { Menu, Icon } from 'antd'
+import PropTypes from 'prop-types'
+
+const SubMenu = Menu.SubMenu
+const MenuItemGroup = Menu.ItemGroup
+
+class TopMenu extends Component {
+  state = {
+    current: 'mail',
+  }
+
+  handleClick = e => {
+    console.log('click : ', e)
+    this.setState({
+      current: e.key,
+    })
+  }
+
+  render() {
+    let { menuTitle } = this.props
+    return (
+      <Fragment>
+        <Menu
+          onClick={this.handleClick}
+          selectedKeys={[this.state.current]}
+          mode="horizontal">
+          {menuTitle &&
+            menuTitle.map(title => {
+              return (
+                <Menu.Item key={title.key} disabled={title.disabled}>
+                  <Icon type={title.iconType} />
+                  {title.name}
+                </Menu.Item>
+              )
+            })}
+          <SubMenu
+            title={
+              <span className="submenu-title-wrapper">
+                <Icon type="setting" />
+                Navigation Three - Submenu
+              </span>
+            }>
+            <MenuItemGroup title="Item 1">
+              <Menu.Item key="setting:1">Option 1</Menu.Item>
+              <Menu.Item key="setting:2">Option 2</Menu.Item>
+            </MenuItemGroup>
+            <MenuItemGroup title="Item 2">
+              <Menu.Item key="setting:3">Option 3</Menu.Item>
+              <Menu.Item key="setting:4">Option 4</Menu.Item>
+            </MenuItemGroup>
+          </SubMenu>
+          <Menu.Item key="alipay">
+            <a
+              href="https://ant.design"
+              target="_blank"
+              rel="noopener noreferrer">
+              Navigation Four - Link
+            </a>
+          </Menu.Item>
+        </Menu>
+      </Fragment>
+    )
+  }
+}
+
+// You can declare that a prop is a specific JS type.
+TopMenu.propTypes = {
+  titleMenuItem: PropTypes.array.isRequired,
+}
+
+// Default values for props
+TopMenu.defaultProps = {
+  titleMenuItem: [],
+}
+export default TopMenu

src/components/menus/VerticalMenu.js

+import React, { Component, Fragment } from 'react'
+import { Menu, Icon } from 'antd'
+
+const SubMenu = Menu.SubMenu
+const MenuItemGroup = Menu.ItemGroup
+
+class VerticalMenu extends Component {
+  handleClick = e => {
+    console.log('click', e)
+  }
+  render() {
+    return (
+      <Fragment>
+        <Menu onClick={this.handleClick} style={{ width: 256 }} mode="vertical">
+          <SubMenu
+            key="sub1"
+            title={
+              <span>
+                <Icon type="mail" />
+                <span>Navigation One</span>
+              </span>
+            }>
+            <MenuItemGroup title="Item 1">
+              <Menu.Item key="1">Option 1</Menu.Item>
+              <Menu.Item key="2">Option 2</Menu.Item>
+            </MenuItemGroup>
+            <MenuItemGroup title="Iteom 2">
+              <Menu.Item key="3">Option 3</Menu.Item>
+              <Menu.Item key="4">Option 4</Menu.Item>
+            </MenuItemGroup>
+          </SubMenu>
+          <SubMenu
+            key="sub2"
+            title={
+              <span>
+                <Icon type="appstore" />
+                <span>Navigation Two</span>
+              </span>
+            }>
+            <Menu.Item key="5">Option 5</Menu.Item>
+            <Menu.Item key="6">Option 6</Menu.Item>
+            <SubMenu key="sub3" title="Submenu">
+              <Menu.Item key="7">Option 7</Menu.Item>
+              <Menu.Item key="8">Option 8</Menu.Item>
+            </SubMenu>
+          </SubMenu>
+          <SubMenu
+            key="sub4"
+            title={
+              <span>
+                <Icon type="setting" />
+                <span>Navigation Three</span>
+              </span>
+            }>
+            <Menu.Item key="9">Option 9</Menu.Item>
+            <Menu.Item key="10">Option 10</Menu.Item>
+            <Menu.Item key="11">Option 11</Menu.Item>
+            <Menu.Item key="12">Option 12</Menu.Item>
+          </SubMenu>
+        </Menu>
+      </Fragment>
+    )
+  }
+}
+
+export default VerticalMenu

src/pages/content/button/ButtonIcon.jsx

+import React, { Component, Fragment } from 'react'
+import ButtonIcon from '../../../components/Button/ButtonIcon'
+import ButtonIconMd from './resources/md/ButtonIcon.md'
+import ReactMarkdown from 'react-markdown'
+import Axios from 'axios'
+import * as UrlConstants from '../../../resources/js/constants/urlConstants'
+
+export default class Button extends Component {
+  state = {
+    buttonTitle: [],
+    terms: null
+  }
+
+  componentDidMount() {
+    this._requestButtonIcon()
+  }
+
+  _requestButtonIcon = async () => {
+    await Axios.post(UrlConstants.URL_GET_BUTTON_ICON).then(response => {
+      this.setState({ buttonTitle: response.data })
+    })
+    await Axios({
+      method: 'get',
+      url: ButtonIconMd,
+      responseType: 'text'
+    }).then(res => {
+      console.log(res)
+      this.setState({ terms: res.data })
+    })
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <ButtonIcon buttonTitle={this.state.buttonTitle} />
+        <ReactMarkdown source={this.state.terms} className={'markdown-body'} />
+      </Fragment>
+    )
+  }
+}

src/pages/content/button/resources/md/ButtonIcon.md

+## React
+
+- Official : `https://github.com/facebook/create-react-app`
+- version : `16.8.1`
+- Installation :
+
+```
+npx create-react-app my-app
+cd my-app
+npm start
+```
+
+![](https://cdn.rawgit.com/facebook/create-react-app/27b42ac/screencast.svg)
+
+## React Redux
+
+React Redux requires **React 16.4 or later**.
+
+- Official : `https://github.com/reduxjs/react-redux`
+- version : `6.0.1`
+- Installation :
+
+```
+npm install --save react-redux
+```
+
+## React Router
+
+- Official : `https://reacttraining.com/react-router/web/guides/quick-start`
+- version : `6.0.1`
+- Installation :
+
+```
+npm install --save react-router-dom
+```
+
+## Ant Design of React
+
+- official : `https://github.com/ant-design/ant-design/`
+- version : `3.13.6`
+- Installation :
+
+```
+npm install antd
+```
+
+```
+yarn add antd
+```
+
+##

src/pages/content/introduction/Introduction.jsx

+import React, { Component, Fragment } from 'react'
+import IntroductionMd from './resources/md/IntroductionMd.md'
+import ReactMarkdown from 'react-markdown'
+
+export default class Introduction extends Component {
+  state = {
+    terms: null
+  }
+
+  componentDidMount() {
+    fetch(IntroductionMd)
+      .then(response => response.text())
+      .then(text => {
+        this.setState({ terms: text })
+      })
+  }
+  render() {
+    return (
+      <Fragment>
+        <ReactMarkdown source={this.state.terms} className={'markdown-body'} />
+      </Fragment>
+    )
+  }
+}

src/pages/content/introduction/resources/md/IntroductionMd.md

+## React
+
+- Official : `https://github.com/facebook/create-react-app`
+- version : `16.8.1`
+- Installation :
+
+```
+npx create-react-app my-app
+cd my-app
+npm start
+```
+
+![](https://cdn.rawgit.com/facebook/create-react-app/27b42ac/screencast.svg)
+
+## React Redux
+
+React Redux requires **React 16.4 or later**.
+
+- Official : `https://github.com/reduxjs/react-redux`
+- version : `6.0.1`
+- Installation :
+
+```
+npm install --save react-redux
+```
+
+## React Router
+
+- Official : `https://reacttraining.com/react-router/web/guides/quick-start`
+- version : `6.0.1`
+- Installation :
+
+```
+npm install --save react-router-dom
+```
+
+## Ant Design of React
+
+- official : `https://github.com/ant-design/ant-design/`
+- version : `3.13.6`
+- Installation :
+
+```
+npm install antd
+```
+
+```
+yarn add antd
+```
+
+##

src/pages/login/LoginPage.jsx

-import React from 'react';
-import Login from '../../templates/form/login/Login';
-import Axios from 'axios';
+import React from 'react'
+import Login from '../../templates/form/login/Login'
+import Axios from 'axios'
 
-import history from '../../history';
-import Logo from './resources/images/logo_login.png';
-import * as UrlConstants from '../../resources/js/constants/urlConstants';
+import history from '../../history'
+import Logo from './resources/images/logo_login.png'
+import * as UrlConstants from '../../resources/js/constants/urlConstants'
 
-import './resources/style/css/login.css';
+import './resources/style/css/login.css'
 
 export default class LoginPage extends React.Component {
   _login = async params => {
-    const results = await Axios.post(UrlConstants.URL_LOGIN, params);
+    const results = await Axios.post(UrlConstants.URL_LOGIN, params)
 
     if (results.data.success) {
-      history.push('/process');
+      history.push('/process/introduction')
     }
-  };
+  }
 
   render() {
     return (
@@ -26,6 +26,6 @@ export default class LoginPage extends React.Component {
         <br />
         <Login getFormSubmitFn={this._login} />
       </div>
-    );
+    )
   }
 }

src/pages/main/MainPage.jsx

-import React from 'react';
-import Axios from 'axios';
-import { Layout } from 'antd';
-import uuid from 'uuid/v4';
+import React from 'react'
+import Axios from 'axios'
+import { Layout } from 'antd'
+import uuid from 'uuid/v4'
 
-import ContentRoutes from '../../routes/contentRoutes';
-import SubmenuRoutes from '../../routes/submenuRoutes';
+import ContentRoutes from '../../routes/contentRoutes'
+import SubmenuRoutes from '../../routes/submenuRoutes'
 
-import Header from '../../templates/layout/header/WDSHeaderTemplate';
-import Sider from '../../templates/layout/sider/WDSSiderTemplate';
-import Breadcrumb from '../../templates/layout/breadcrumb/WDSBreadcrumbTemplate';
-import Footer from '../../templates/layout/footer/WDSFooterTemplate';
+import Header from '../../templates/layout/header/WDSHeaderTemplate'
+import Sider from '../../templates/layout/sider/WDSSiderTemplate'
+import Breadcrumb from '../../templates/layout/breadcrumb/WDSBreadcrumbTemplate'
+import Footer from '../../templates/layout/footer/WDSFooterTemplate'
 
-import * as UrlConstants from '../../resources/js/constants/urlConstants';
-import history from '../../history';
+import * as UrlConstants from '../../resources/js/constants/urlConstants'
+import history from '../../history'
 
-import './resources/style/css/mainPage.css';
+import './resources/style/css/mainPage.css'
 
 const headerAction = {
   setSystemInfo: uuid(),
   logout: uuid()
-};
+}
 
 const mainMenuAction = {
   setMainMenu: uuid(),
   setBreadcrumb: uuid()
-};
+}
 
 const breadcrumbAction = {
   setMainMenu: uuid(),
   setBreadcrumb: uuid()
-};
+}
 
 const footerAction = {
   setFooter: uuid()
-};
+}
 
 export default class MainPage extends React.Component {
   constructor(props) {
-    super(props);
-    this.state = { collapsed: false };
+    super(props)
+    this.state = { collapsed: false }
   }
 
   componentDidMount() {
-    this._requestGetSystemInfoApi();
-    this._requestGetMenuApi();
-    this._handleLogout();
+    this._requestGetSystemInfoApi()
+    this._requestGetMenuApi()
+    this._handleLogout()
   }
 
   componentWillUnmount() {
     this.props.eventEmitter.removeAllListeners(
       headerAction.setSystemInfo,
       headerAction.logout
-    );
+    )
   }
 
   _requestGetSystemInfoApi = async () => {
-    const params = {};
-    const results = await Axios.post(UrlConstants.URL_GET_SYSTEM_INFO, params);
+    const params = {}
+    const results = await Axios.post(UrlConstants.URL_GET_SYSTEM_INFO, params)
 
     if (results.data.success) {
-      const { eventEmitter } = this.props;
-      eventEmitter.emit(headerAction.setSystemInfo, results.data);
+      const { eventEmitter } = this.props
+      eventEmitter.emit(headerAction.setSystemInfo, results.data)
     }
-  };
+  }
 
   _requestGetMenuApi = async () => {
-    const params = {};
-    const results = await Axios.post(UrlConstants.URL_GET_MENU, params);
+    const params = {}
+    const results = await Axios.post(UrlConstants.URL_GET_MENU, params)
 
     if (results.data.success) {
-      const { eventEmitter } = this.props;
-      eventEmitter.emit(mainMenuAction.setMainMenu, results.data.dataList);
+      const { eventEmitter } = this.props
+      eventEmitter.emit(mainMenuAction.setMainMenu, results.data.dataList)
     }
-  };
+  }
 
   _handleLogout = () => {
     this.props.eventEmitter.on(headerAction.logout, async data => {
-      const params = {};
-      const results = await Axios.post(UrlConstants.URL_LOGOUT, params);
+      const params = {}
+      const results = await Axios.post(UrlConstants.URL_LOGOUT, params)
 
       if (results.data.success) {
-        history.push('/login');
+        history.push('/login')
       }
-    });
-  };
+    })
+  }
 
   render() {
     return (
@@ -119,6 +119,6 @@ export default class MainPage extends React.Component {
           />
         </Layout>
       </Layout>
-    );
+    )
   }
 }

src/resources/js/constants/urlConstants.js

-const URI = 'http://localhost:8000/'; // local server
+const URI = 'http://localhost:8000/' // local server
 
-export const URL_LOGIN = URI + 'login';
-export const URL_LOGOUT = URI + 'logout';
+export const URL_LOGIN = URI + 'login'
+export const URL_LOGOUT = URI + 'logout'
 
-export const URL_GET_MENU = URI + 'getMenu';
-export const URL_GET_SYSTEM_INFO = URI + 'getSystemInfo';
+export const URL_GET_MENU = URI + 'getMenu'
+export const URL_GET_SYSTEM_INFO = URI + 'getSystemInfo'
+
+// button
+export const URL_GET_BUTTON_ICON = URI + 'button/getButtonIcon'

src/resources/style/css/App.css

-@import '~antd/dist/antd.css';
\ No newline at end of file
+@import '~antd/dist/antd.css';
+
+/* override background antd */
+.ant-layout {
+  background: none !important;
+}

src/resources/style/css/markdown.css

+@font-face {
+  font-family: octicons-link;
+  src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==)
+    format('woff');
+}
+
+.markdown-body .octicon {
+  display: inline-block;
+  fill: currentColor;
+  vertical-align: text-bottom;
+}
+
+.markdown-body .anchor {
+  float: left;
+  line-height: 1;
+  margin-left: -20px;
+  padding-right: 4px;
+}
+
+.markdown-body .anchor:focus {
+  outline: none;
+}
+
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+  color: #1b1f23;
+  vertical-align: middle;
+  visibility: hidden;
+}
+
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+  text-decoration: none;
+}
+
+.markdown-body h1:hover .anchor .octicon-link,
+.markdown-body h2:hover .anchor .octicon-link,
+.markdown-body h3:hover .anchor .octicon-link,
+.markdown-body h4:hover .anchor .octicon-link,
+.markdown-body h5:hover .anchor .octicon-link,
+.markdown-body h6:hover .anchor .octicon-link {
+  visibility: visible;
+}
+
+.markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  color: #24292e;
+  line-height: 1.5;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  justify-content: left;
+  font-size: calc(1px + 2vmin);
+}
+
+.markdown-body .pl-c {
+  color: #6a737d;
+}
+
+.markdown-body .pl-c1,
+.markdown-body .pl-s .pl-v {
+  color: #005cc5;
+}
+
+.markdown-body .pl-e,
+.markdown-body .pl-en {
+  color: #6f42c1;
+}
+
+.markdown-body .pl-s .pl-s1,
+.markdown-body .pl-smi {
+  color: #24292e;
+}
+
+.markdown-body .pl-ent {
+  color: #22863a;
+}
+
+.markdown-body .pl-k {
+  color: #d73a49;
+}
+
+.markdown-body .pl-pds,
+.markdown-body .pl-s,
+.markdown-body .pl-s .pl-pse .pl-s1,
+.markdown-body .pl-sr,
+.markdown-body .pl-sr .pl-cce,
+.markdown-body .pl-sr .pl-sra,
+.markdown-body .pl-sr .pl-sre {
+  color: #032f62;
+}
+
+.markdown-body .pl-smw,
+.markdown-body .pl-v {
+  color: #e36209;
+}
+
+.markdown-body .pl-bu {
+  color: #b31d28;
+}
+
+.markdown-body .pl-ii {
+  background-color: #b31d28;
+  color: #fafbfc;
+}
+
+.markdown-body .pl-c2 {
+  background-color: #d73a49;
+  color: #fafbfc;
+}
+
+.markdown-body .pl-c2:before {
+  content: '^M';
+}
+
+.markdown-body .pl-sr .pl-cce {
+  color: #22863a;
+  font-weight: 700;
+}
+
+.markdown-body .pl-ml {
+  color: #735c0f;
+}
+
+.markdown-body .pl-mh,
+.markdown-body .pl-mh .pl-en,
+.markdown-body .pl-ms {
+  color: #005cc5;
+  font-weight: 700;
+}
+
+.markdown-body .pl-mi {
+  color: #24292e;
+  font-style: italic;
+}
+
+.markdown-body .pl-mb {
+  color: #24292e;
+  font-weight: 700;
+}
+
+.markdown-body .pl-md {
+  background-color: #ffeef0;
+  color: #b31d28;
+}
+
+.markdown-body .pl-mi1 {
+  background-color: #f0fff4;
+  color: #22863a;
+}
+
+.markdown-body .pl-mc {
+  background-color: #ffebda;
+  color: #e36209;
+}
+
+.markdown-body .pl-mi2 {
+  background-color: #005cc5;
+  color: #f6f8fa;
+}
+
+.markdown-body .pl-mdr {
+  color: #6f42c1;
+  font-weight: 700;
+}
+
+.markdown-body .pl-ba {
+  color: #586069;
+}
+
+.markdown-body .pl-sg {
+  color: #959da5;
+}
+
+.markdown-body .pl-corl {
+  color: #032f62;
+  text-decoration: underline;
+}
+
+.markdown-body details {
+  display: block;
+}
+
+.markdown-body summary {
+  display: list-item;
+}
+
+.markdown-body a {
+  background-color: transparent;
+}
+
+.markdown-body a:active,
+.markdown-body a:hover {
+  outline-width: 0;
+}
+
+.markdown-body strong {
+  font-weight: inherit;
+  font-weight: bolder;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+.markdown-body img {
+  border-style: none;
+}
+
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+.markdown-body hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+.markdown-body input {
+  font: inherit;
+  margin: 0;
+}
+
+.markdown-body input {
+  overflow: visible;
+}
+
+.markdown-body [type='checkbox'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.markdown-body * {
+  box-sizing: border-box;
+}
+
+.markdown-body input {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.markdown-body a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body strong {
+  font-weight: 600;
+}
+
+.markdown-body hr {
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid #dfe2e5;
+  height: 0;
+  margin: 15px 0;
+  overflow: hidden;
+}
+
+.markdown-body hr:before {
+  content: '';
+  display: table;
+}
+
+.markdown-body hr:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.markdown-body table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.markdown-body td,
+.markdown-body th {
+  padding: 0;
+}
+
+.markdown-body details summary {
+  cursor: pointer;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.markdown-body h1 {
+  font-size: 32px;
+}
+
+.markdown-body h1,
+.markdown-body h2 {
+  font-weight: 600;
+}
+
+.markdown-body h2 {
+  font-size: 24px;
+}
+
+.markdown-body h3 {
+  font-size: 20px;
+}
+
+.markdown-body h3,
+.markdown-body h4 {
+  font-weight: 600;
+}
+
+.markdown-body h4 {
+  font-size: 16px;
+}
+
+.markdown-body h5 {
+  font-size: 14px;
+}
+
+.markdown-body h5,
+.markdown-body h6 {
+  font-weight: 600;
+}
+
+.markdown-body h6 {
+  font-size: 12px;
+}
+
+.markdown-body p {
+  margin-bottom: 10px;
+  margin-top: 0;
+}
+
+.markdown-body blockquote {
+  margin: 0;
+}
+
+.markdown-body ol,
+.markdown-body ul {
+  margin-bottom: 0;
+  margin-top: 0;
+  padding-left: 0;
+}
+
+.markdown-body ol ol,
+.markdown-body ul ol {
+  list-style-type: lower-roman;
+}
+
+.markdown-body ol ol ol,
+.markdown-body ol ul ol,
+.markdown-body ul ol ol,
+.markdown-body ul ul ol {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body dd {
+  margin-left: 0;
+}
+
+.markdown-body code,
+.markdown-body pre {
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
+    monospace;
+  font-size: 12px;
+}
+
+.markdown-body pre {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.markdown-body input::-webkit-inner-spin-button,
+.markdown-body input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+.markdown-body .border {
+  border: 1px solid #e1e4e8 !important;
+}
+
+.markdown-body .border-0 {
+  border: 0 !important;
+}
+
+.markdown-body .border-bottom {
+  border-bottom: 1px solid #e1e4e8 !important;
+}
+
+.markdown-body .rounded-1 {
+  border-radius: 3px !important;
+}
+
+.markdown-body .bg-white {
+  background-color: #fff !important;
+}
+
+.markdown-body .bg-gray-light {
+  background-color: #fafbfc !important;
+}
+
+.markdown-body .text-gray-light {
+  color: #6a737d !important;
+}
+
+.markdown-body .mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.markdown-body .my-2 {
+  margin-bottom: 8px !important;
+  margin-top: 8px !important;
+}
+
+.markdown-body .pl-0 {
+  padding-left: 0 !important;
+}
+
+.markdown-body .py-0 {
+  padding-bottom: 0 !important;
+  padding-top: 0 !important;
+}
+
+.markdown-body .pl-1 {
+  padding-left: 4px !important;
+}
+
+.markdown-body .pl-2 {
+  padding-left: 8px !important;
+}
+
+.markdown-body .py-2 {
+  padding-bottom: 8px !important;
+  padding-top: 8px !important;
+}
+
+.markdown-body .pl-3,
+.markdown-body .px-3 {
+  padding-left: 16px !important;
+}
+
+.markdown-body .px-3 {
+  padding-right: 16px !important;
+}
+
+.markdown-body .pl-4 {
+  padding-left: 24px !important;
+}
+
+.markdown-body .pl-5 {
+  padding-left: 32px !important;
+}
+
+.markdown-body .pl-6 {
+  padding-left: 40px !important;
+}
+
+.markdown-body .f6 {
+  font-size: 12px !important;
+}
+
+.markdown-body .lh-condensed {
+  line-height: 1.25 !important;
+}
+
+.markdown-body .text-bold {
+  font-weight: 600 !important;
+}
+
+.markdown-body:before {
+  content: '';
+  display: table;
+}
+
+.markdown-body:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.markdown-body > :first-child {
+  margin-top: 0 !important;
+}
+
+.markdown-body > :last-child {
+  margin-bottom: 0 !important;
+}
+
+.markdown-body a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown-body blockquote,
+.markdown-body dl,
+.markdown-body ol,
+.markdown-body p,
+.markdown-body pre,
+.markdown-body table,
+.markdown-body ul {
+  margin-bottom: 16px;
+  margin-top: 0;
+}
+
+.markdown-body hr {
+  background-color: #e1e4e8;
+  border: 0;
+  height: 0.25em;
+  margin: 24px 0;
+  padding: 0;
+}
+
+.markdown-body blockquote {
+  border-left: 0.25em solid #dfe2e5;
+  color: #6a737d;
+  padding: 0 1em;
+}
+
+.markdown-body blockquote > :first-child {
+  margin-top: 0;
+}
+
+.markdown-body blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body kbd {
+  background-color: #fafbfc;
+  border: 1px solid #c6cbd1;
+  border-bottom-color: #959da5;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #959da5;
+  color: #444d56;
+  display: inline-block;
+  font-size: 11px;
+  line-height: 10px;
+  padding: 3px 5px;
+  vertical-align: middle;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 16px;
+  margin-top: 24px;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+}
+
+.markdown-body h1,
+.markdown-body h2 {
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: 0.3em;
+}
+
+.markdown-body h2 {
+  font-size: 1.5em;
+}
+
+.markdown-body h3 {
+  font-size: 1.25em;
+}
+
+.markdown-body h4 {
+  font-size: 1em;
+}
+
+.markdown-body h5 {
+  font-size: 0.875em;
+}
+
+.markdown-body h6 {
+  color: #6a737d;
+  font-size: 0.85em;
+}
+
+.markdown-body ol,
+.markdown-body ul {
+  padding-left: 2em;
+}
+
+.markdown-body ol ol,
+.markdown-body ol ul,
+.markdown-body ul ol,
+.markdown-body ul ul {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.markdown-body li {
+  word-wrap: break-all;
+}
+
+.markdown-body li > p {
+  margin-top: 16px;
+}
+
+.markdown-body li + li {
+  margin-top: 0.25em;
+}
+
+.markdown-body dl {
+  padding: 0;
+}
+
+.markdown-body dl dt {
+  font-size: 1em;
+  font-style: italic;
+  font-weight: 600;
+  margin-top: 16px;
+  padding: 0;
+}
+
+.markdown-body dl dd {
+  margin-bottom: 16px;
+  padding: 0 16px;
+}
+
+.markdown-body table {
+  display: block;
+  overflow: auto;
+  width: 100%;
+}
+
+.markdown-body table th {
+  font-weight: 600;
+}
+
+.markdown-body table td,
+.markdown-body table th {
+  border: 1px solid #dfe2e5;
+  padding: 6px 13px;
+}
+
+.markdown-body table tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+.markdown-body img {
+  background-color: #fff;
+  box-sizing: content-box;
+  max-width: 100%;
+}
+
+.markdown-body img[align='right'] {
+  padding-left: 20px;
+}
+
+.markdown-body img[align='left'] {
+  padding-right: 20px;
+}
+
+.markdown-body code {
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+  font-size: 85%;
+  margin: 0;
+  padding: 0.2em 0.4em;
+}
+
+.markdown-body pre {
+  word-wrap: normal;
+}
+
+.markdown-body pre > code {
+  background: transparent;
+  border: 0;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  white-space: pre;
+  word-break: normal;
+}
+
+.markdown-body .highlight {
+  margin-bottom: 16px;
+}
+
+.markdown-body .highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+  background-color: #f6f8fa;
+  border-radius: 3px;
+  font-size: 85%;
+  line-height: 1.45;
+  overflow: auto;
+  padding: 16px;
+}
+
+.markdown-body pre code {
+  background-color: transparent;
+  border: 0;
+  display: inline;
+  line-height: inherit;
+  margin: 0;
+  max-width: auto;
+  overflow: visible;
+  padding: 0;
+  word-wrap: normal;
+}
+
+.markdown-body .commit-tease-sha {
+  color: #444d56;
+  display: inline-block;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
+    monospace;
+  font-size: 90%;
+}
+
+.markdown-body .blob-wrapper {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.markdown-body .blob-wrapper-embedded {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.markdown-body .blob-num {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  color: rgba(27, 31, 35, 0.3);
+  cursor: pointer;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
+    monospace;
+  font-size: 12px;
+  line-height: 20px;
+  min-width: 50px;
+  padding-left: 10px;
+  padding-right: 10px;
+  text-align: right;
+  user-select: none;
+  vertical-align: top;
+  white-space: nowrap;
+  width: 1%;
+}
+
+.markdown-body .blob-num:hover {
+  color: rgba(27, 31, 35, 0.6);
+}
+
+.markdown-body .blob-num:before {
+  content: attr(data-line-number);
+}
+
+.markdown-body .blob-code {
+  line-height: 20px;
+  padding-left: 10px;
+  padding-right: 10px;
+  position: relative;
+  vertical-align: top;
+}
+
+.markdown-body .blob-code-inner {
+  color: #24292e;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
+    monospace;
+  font-size: 12px;
+  overflow: visible;
+  white-space: pre;
+  word-wrap: normal;
+}
+
+.markdown-body .pl-token.active,
+.markdown-body .pl-token:hover {
+  background: #ffea7f;
+  cursor: pointer;
+}
+
+.markdown-body kbd {
+  background-color: #fafbfc;
+  border: 1px solid #d1d5da;
+  border-bottom-color: #c6cbd1;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #c6cbd1;
+  color: #444d56;
+  display: inline-block;
+  font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
+    monospace;
+  line-height: 10px;
+  padding: 3px 5px;
+  vertical-align: middle;
+}
+
+.markdown-body :checked + .radio-label {
+  border-color: #0366d6;
+  position: relative;
+  z-index: 1;
+}
+
+.markdown-body .tab-size[data-tab-size='1'] {
+  -moz-tab-size: 1;
+  tab-size: 1;
+}
+
+.markdown-body .tab-size[data-tab-size='2'] {
+  -moz-tab-size: 2;
+  tab-size: 2;
+}
+
+.markdown-body .tab-size[data-tab-size='3'] {
+  -moz-tab-size: 3;
+  tab-size: 3;
+}
+
+.markdown-body .tab-size[data-tab-size='4'] {
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+.markdown-body .tab-size[data-tab-size='5'] {
+  -moz-tab-size: 5;
+  tab-size: 5;
+}
+
+.markdown-body .tab-size[data-tab-size='6'] {
+  -moz-tab-size: 6;
+  tab-size: 6;
+}
+
+.markdown-body .tab-size[data-tab-size='7'] {
+  -moz-tab-size: 7;
+  tab-size: 7;
+}
+
+.markdown-body .tab-size[data-tab-size='8'] {
+  -moz-tab-size: 8;
+  tab-size: 8;
+}
+
+.markdown-body .tab-size[data-tab-size='9'] {
+  -moz-tab-size: 9;
+  tab-size: 9;
+}
+
+.markdown-body .tab-size[data-tab-size='10'] {
+  -moz-tab-size: 10;
+  tab-size: 10;
+}
+
+.markdown-body .tab-size[data-tab-size='11'] {
+  -moz-tab-size: 11;
+  tab-size: 11;
+}
+
+.markdown-body .tab-size[data-tab-size='12'] {
+  -moz-tab-size: 12;
+  tab-size: 12;
+}
+
+.markdown-body .task-list-item {
+  list-style-type: none;
+}
+
+.markdown-body .task-list-item + .task-list-item {
+  margin-top: 3px;
+}
+
+.markdown-body .task-list-item input {
+  margin: 0 0.2em 0.25em -1.6em;
+  vertical-align: middle;
+}
+
+.markdown-body hr {
+  border-bottom-color: #eee;
+}
+
+.markdown-body .pl-0 {
+  padding-left: 0 !important;
+}
+
+.markdown-body .pl-1 {
+  padding-left: 4px !important;
+}
+
+.markdown-body .pl-2 {
+  padding-left: 8px !important;
+}
+
+.markdown-body .pl-3 {
+  padding-left: 16px !important;
+}
+
+.markdown-body .pl-4 {
+  padding-left: 24px !important;
+}
+
+.markdown-body .pl-5 {
+  padding-left: 32px !important;
+}
+
+.markdown-body .pl-6 {
+  padding-left: 40px !important;
+}
+
+.markdown-body .pl-7 {
+  padding-left: 48px !important;
+}
+
+.markdown-body .pl-8 {
+  padding-left: 64px !important;
+}
+
+.markdown-body .pl-9 {
+  padding-left: 80px !important;
+}
+
+.markdown-body .pl-10 {
+  padding-left: 96px !important;
+}
+
+.markdown-body .pl-11 {
+  padding-left: 112px !important;
+}
+
+.markdown-body .pl-12 {
+  padding-left: 128px !important;
+}

src/routes/contentRoutes.js

-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import React from 'react'
+import { Switch, Route } from 'react-router-dom'
 
-import Content1 from '../pages/content/Content1';
-import Content2 from '../pages/content/Content2';
-import Content3 from '../pages/content/Content3';
-import Home from '../pages/content/Home';
+import Content1 from '../pages/content/Content1'
+import Content2 from '../pages/content/Content2'
+import Content3 from '../pages/content/Content3'
+import Introduction from '../pages/content/introduction/Introduction'
 
 export default ({ match }) => {
   return (
     <Switch>
-      <Route path={`${match.url}/home`} component={Home} />
       <Route path={`${match.url}/content1`} component={Content1} />
       <Route path={`${match.url}/content2`} component={Content2} />
       <Route path={`${match.url}/content3`} component={Content3} />
+      <Route path={`${match.url}/introduction`} component={Introduction} />
     </Switch>
-  );
-};
+  )
+}

src/routes/submenuRoutes.js

-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import React from 'react'
+import { Switch, Route } from 'react-router-dom'
 
-import Submenu1 from '../pages/content/Submenu1';
-import Submenu2 from '../pages/content/Submenu2';
+import ButtonIcon from '../pages/content/button/ButtonIcon'
+import Submenu1 from '../pages/content/Submenu1'
+import Submenu2 from '../pages/content/Submenu2'
 
 export default ({ match }) => {
   return (
     <Switch>
+      <Route path={`${match.url}/button/buttonType`} component={ButtonIcon} />
       <Route path={`${match.url}/menu/submenu1`} component={Submenu1} />
       <Route path={`${match.url}/menu/submenu2`} component={Submenu2} />
     </Switch>
-  );
-};
+  )
+}

src/templates/layout/breadcrumb/WDSBreadcrumbTemplate.jsx

-import React from 'react';
-import { Breadcrumb } from 'antd';
-import _ from 'lodash';
+import React from 'react'
+import { Breadcrumb } from 'antd'
+import _ from 'lodash'
 
-import { style } from './resources/style/jsx/breadcrumbStyle';
+import { style } from './resources/style/jsx/breadcrumbStyle'
 
 export default class BreadcrumbComponent extends React.Component {
   constructor(props) {
-    super(props);
+    super(props)
     this.state = {
       menuList: {},
-      breadcrumbList: ['Home']
-    };
+      breadcrumbList: ['Document Component']
+    }
   }
 
   componentDidMount() {
     this.props.eventEmitter.on(this.props.actionEmitter.setMainMenu, data => {
       this.setState({
         menuList: data
-      });
-    });
+      })
+    })
 
     this.props.eventEmitter.on(this.props.actionEmitter.setBreadcrumb, data => {
       switch (data.length) {
         case 1:
-          const pageTitle = this._getPageTitle(data[0]);
+          const pageTitle = this._getPageTitle(data[0])
           this.setState({
             // breadcrumbList: [...this.state.breadcrumbList, pageTitle]
             breadcrumbList: [pageTitle]
-          });
-          break;
+          })
+          break
 
         case 2:
-          const pageTitleList = [];
+          const pageTitleList = []
 
-          pageTitleList.push(this._getPageTitle(data[1]));
-          pageTitleList.push(this._getPageTitleSubmenu(data[0], data[1]));
+          pageTitleList.push(this._getPageTitle(data[1]))
+          pageTitleList.push(this._getPageTitleSubmenu(data[0], data[1]))
 
           this.setState({
             breadcrumbList: pageTitleList
-          });
-          break;
+          })
+          break
 
         default:
-          break;
+          break
       }
-    });
+    })
   }
 
   /**
@@ -52,12 +52,12 @@ export default class BreadcrumbComponent extends React.Component {
    * @return {string}
    */
   _getPageTitle = path => {
-    let menu;
+    let menu
     menu = _.find(this.state.menuList, function(o) {
-      return o.path === path;
-    });
-    return !_.isEmpty(menu) ? menu.pageTitle : null;
-  };
+      return o.path === path
+    })
+    return !_.isEmpty(menu) ? menu.pageTitle : null
+  }
 
   /**
    * @param {string} path
@@ -65,18 +65,18 @@ export default class BreadcrumbComponent extends React.Component {
    * @return {string}
    */
   _getPageTitleSubmenu = (path, submenuPath) => {
-    let menu;
+    let menu
 
     _.find(this.state.menuList, o => {
       if (submenuPath === o.path) {
         menu = _.find(o.submenuList, function(o) {
-          return o.path === path;
-        });
+          return o.path === path
+        })
       }
-    });
+    })
 
-    return !_.isEmpty(menu) ? menu.pageTitle : null;
-  };
+    return !_.isEmpty(menu) ? menu.pageTitle : null
+  }
 
   render() {
     return (
@@ -94,7 +94,7 @@ export default class BreadcrumbComponent extends React.Component {
                 >
                   {breadcrumb}
                 </Breadcrumb.Item>
-              );
+              )
             } else if (index > 0) {
               // breadcrumb > 1 item but not has last breadcrumb
               return (
@@ -102,15 +102,15 @@ export default class BreadcrumbComponent extends React.Component {
                   {/* href=""> */}
                   {breadcrumb}
                 </Breadcrumb.Item>
-              );
+              )
             } else {
               // breadcrumb 1 item
               return (
                 <Breadcrumb.Item key={breadcrumb}>{breadcrumb}</Breadcrumb.Item>
-              );
+              )
             }
           })}
       </Breadcrumb>
-    );
+    )
   }
 }