feat(all components): use new design and add some new components (#27)

* use new less variable and design style

* use 24 cols to replace 12 cols

* upgrade npm run create template

* add dox.less

* add svg icon

* add prism

* rename Header in site

* use new icon

* refactor lots of files cuz new ui

* add renderModel full in doc-loader

* add all icons doc and fix icon button style

* optimize navbar style

* add bottom user in navbar

* small tweaks

* refactor router and pages

* add color in design page

* revamp color design

* use new logo and other small tweaks

* optimize logo and color name

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,7 +4,6 @@ Please makes sure that these checkboxes are checked before submitting your PR, t
 
 * [ ] Make sure that you propose PR to right branch: bugfix for `master`, feature for latest active branch `feature-x.x`.
 * [ ] Make sure that you follow earth-ui's [code convention](https://github.com/G-Explorer/earth-ui/wiki/Code-convention).
-* [ ] Rebase before creating a PR to keep commit history clear.
 * [ ] Add some descriptions and refer relative issues for you PR.
 
 Extra checklist:
@@ -17,4 +16,4 @@ Extra checklist:
 
   * [ ] Update API docs for the component.
   * [ ] Update/Add demo to demonstrate new feature.
-  * [ ] Add unit tests for the feature.
+  * [ ] Add unit tests for the feature.

bin/template/index.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 import './index.less'
 
-class <%= name %> extends Component {
+class <%= name %> extends React.Component {
   constructor () {
     super()
     this.state = {
@@ -14,7 +14,7 @@ class <%= name %> extends Component {
   render () {
     const { className, ...other } = this.props
     return (
-      <div className={cx('cmui-<%= className %>', className)} {...other}>
+      <div className={cx(`${prefixCls}-<%= className %>`, className)} {...other}>
         something...
       </div>
     )

bin/template/index.less

@@ -1,3 +1,5 @@
-.cmui-<%= className %> {
-
-}
+@import '~ui-variables';
+
+.@{prefix-cls}-<%= className %> {
+
+}

config/webpack.config.js

@@ -42,9 +42,8 @@ const config = {
   },
   resolve: {
     alias: {
-      'variable.less': `${sourcePath}/styles/variable.less`,
-      'mixin.less': `${sourcePath}/styles/mixin.less`,
-      'core.less': `${sourcePath}/styles/core.less`
+      'ui-variables.less': `${sourcePath}/styles/ui-variables.less`,
+      'ui-mixins.less': `${sourcePath}/styles/ui-mixins.less`
     }
   },
   externals: {

config/webpack.config.site.js

@@ -64,9 +64,10 @@ const config = {
       'earth-ui/lib': `${sourcePath}/components`,
       'widgets': `${sitePath}/widgets`,
       'doc': `${sitePath}/loaders/doc`,
-      'variable.less': `${sourcePath}/styles/variable.less`,
-      'mixin.less': `${sourcePath}/styles/mixin.less`,
-      'core.less': `${sourcePath}/styles/core.less`
+      'ui-variables.less': `${sourcePath}/styles/ui-variables.less`,
+      'ui-mixins.less': `${sourcePath}/styles/ui-mixins.less`,
+      'ui.less': `${sourcePath}/styles/index.less`,
+      'dox.less': `${sitePath}/styles/index.less`
     }
   },
   externals: {

package.json

@@ -110,6 +110,7 @@
     "postcss-loader": "^2.0.8",
     "prop-types": "^15.6.1",
     "react": "^15.6.2",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^15.6.2",
     "react-hot-loader": "^4.0.0-rc.0",

site/3rdParty/prism/prism.css

@@ -0,0 +1,141 @@
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+jsx+typescript+tsx */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+