feat(Header): rename HeaderBar to Header and add color prop

BREAKING CHANGE: HeaderBar was obsoleted and use Header instead

site/apps/Chrome/index.js

@@ -1,5 +1,5 @@
 import { Link } from '@reach/router'
-import HeaderBar from 'earth-ui/lib/HeaderBar'
+import Header from 'earth-ui/lib/Header'
 import Icon from 'earth-ui/lib/Icon'
 import { Nav, NavItem, NavItemGroup, SubNav } from 'earth-ui/lib/Nav'
 import { Tab, TabList, Tabs } from 'earth-ui/lib/Tabs'
@@ -108,9 +108,9 @@ class Components extends React.Component {
     const tabs = getTabsByComponentName(components, name)
     return (
       <div>
-        <HeaderBar
+        <Header
           className="components__title"
-          icon="./svg/appLogo.svg"
+          icon="./svg/app_logo_bg_blue.svg"
           title={title}
         />
         {!!tabs && (

site/apps/Chrome/index.less

@@ -92,7 +92,7 @@
     }
   }
   &__title {
-    .earthui-headerbar__bars-tool-item-title {
+    .earthui-header__bars-tool-item-title {
       text-transform: capitalize;
     }
   }

site/apps/apps.json

@@ -47,11 +47,11 @@
         "cn":"图标",
         "tabs":[
           {
-            "label":"Usage",
+            "label":"使用",
             "doc":"Icon-usage"
           },
           {
-            "label":"All Icons",
+            "label":"所有图标",
             "doc":"Icon-all-icons"
           }
         ]
@@ -95,7 +95,17 @@
       },
       {
         "name":"Header",
-        "cn":"顶栏"
+        "cn":"顶栏",
+        "tabs":[
+          {
+            "label":"使用",
+            "doc":"Header-usage"
+          },
+          {
+            "label":"画廊",
+            "doc":"Header-gallery"
+          }
+        ]
       },
       {
         "name":"Footer",

site/router.js

@@ -22,7 +22,6 @@ const asyncComponent = path =>
   })
 
 const WIP = [
-  'Header',
   'Footer',
   'SideBar',
   'Form',

src/components/Header/docs/Header-gallery.dox

@@ -0,0 +1,41 @@
+/**
+ * @title Header 背景色画廊
+ * @renderModel full
+ */
+import Header from 'earth-ui/lib/Header'
+
+const ColorfulHeader = () => {
+  const colors = [
+    'white',
+    'blue',
+    'red',
+    'orange',
+    'yellow',
+    'green',
+    'purple',
+    'pink',
+    'gray',
+    'slate',
+    'black'
+  ]
+  const ul = {
+    // marginTop: -20
+  }
+  const li = {
+    width: '100%',
+    listStyle: 'none',
+    marginBottom: 20
+  }
+  if (window.matchMedia('(min-width:1800px)').matches) {
+    ul.columnCount = 6
+  }
+  return (
+    <ul style={ul}>
+      {colors.map(color =>
+        <li style={li} key={color}>
+          <Header icon={`./svg/app_logo_bg_${color === 'blue' ? 'white' : 'blue'}.svg`} title={color} color={color} />
+        </li>
+      )}
+    </ul>
+  )
+}

src/components/Header/docs/Header-usage.dox

@@ -0,0 +1,25 @@
+/**
+ * @title 基本功能
+ * @renderModel right
+ */
+import Header from 'earth-ui/lib/Header'
+
+const HeaderBasic = () => {
+  return (
+    <Header icon="./svg/app_logo_bg_blue.svg" title="Header" />
+  )
+}
+
+/**
+ * @title 更换背景色
+ * @renderModel right
+ */
+import Header from 'earth-ui/lib/Header'
+
+const ColorfulHeader = () => {
+  return (
+    <Header icon="./svg/app_logo_bg_white.svg" title="Header" color="blue" />
+  )
+}
+
+@component Header

src/components/Header/index.js

@@ -0,0 +1,67 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import './index.less'
+
+class Header extends React.Component {
+  render () {
+    const { className, children, icon, title, color, ...other } = this.props
+    return (
+      <header
+        className={cx(
+          `${prefixCls}-header`,
+          `${prefixCls}-header--${color}`,
+          className
+        )}
+        {...other}
+      >
+        <ul className={`${prefixCls}-header__bars`}>
+          <li className={`${prefixCls}-header__bars-tool`}>
+            <menu className={`${prefixCls}-header__bars-tool-item`}>
+              <li className={`${prefixCls}-header__bars-tool-item-icon`}>
+                <img src={icon} alt="icon" width={40} height={40} />
+              </li>
+              <li className={`${prefixCls}-header__bars-tool-item-title`}>
+                <label>{title}</label>
+              </li>
+            </menu>
+          </li>
+          {children && <li>{children}</li>}
+        </ul>
+      </header>
+    )
+  }
+}
+
+Header.propTypes = {
+  className: PropTypes.string,
+
+  children: PropTypes.node,
+
+  // Header 左侧的 icon
+  icon: PropTypes.string,
+
+  // Header 标题
+  title: PropTypes.string,
+
+  // Header 背景色，默认 white
+  color: PropTypes.oneOf([
+    'blue',
+    'red',
+    'orange',
+    'yellow',
+    'green',
+    'purple',
+    'pink',
+    'gray',
+    'slate',
+    'black',
+    'white'
+  ])
+}
+
+Header.defaultProps = {
+  color: 'white'
+}
+
+export default Header

src/components/HeaderBar/index.less → src/components/Header/index.less

@@ -4,12 +4,46 @@
 @width: 100%;
 @height: @ui-unit-triple;
 
-.@{prefix-cls}-headerbar {
+.@{prefix-cls}-header {
   position: relative;
   z-index: @ui-zindex-topbar;
   width: 100%;
-  background-color: @ui-color-white;
+  color: @ui-color-white;
   border-bottom: 1px solid @ui-color-gray-light;
+  &--white {
+    color: @ui-color-black;
+    background-color: @ui-color-white;
+  }
+  &--blue {
+    background-color: @ui-color-blue;
+  }
+  &--red {
+    background-color: @ui-color-red;
+  }
+  &--orange {
+    background-color: @ui-color-orange;
+  }
+  &--yellow {
+    background-color: @ui-color-yellow;
+  }
+  &--green {
+    background-color: @ui-color-green;
+  }
+  &--purple {
+    background-color: @ui-color-purple;
+  }
+  &--pink {
+    background-color: @ui-color-pink;
+  }
+  &--gray {
+    background-color: @ui-color-gray;
+  }
+  &--slate {
+    background-color: @ui-color-slate;
+  }
+  &--black {
+    background-color: @ui-color-black;
+  }
   .ui-mixin-transition(opacity);
   &__bars {
     &-tool {

src/components/index.js

@@ -11,7 +11,7 @@ import './ClearableInput'
 import './dialog'
 import './Dropdown'
 import './Form'
-import './HeaderBar'
+import './Header'
 import './Icon'
 import './Input'
 import './Layout'