Merge branch 'develop' into issue-#552-button

anchorchat · Nov 6, 2017 · 756aa83 · 756aa83
2 parents c9e0517 + 77c9b29
commit 756aa83
Show file tree

Hide file tree

Showing 72 changed files with 1,566 additions and 852 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -47,12 +47,13 @@
     "emojione": "^2.2.7",
     "escape-html": "^1.0.3",
     "lodash": "^4.17.4",
+    "marked": "^0.3.6",
+    "prismjs": "^1.8.3",
     "prop-types": "^15.5.6",
     "radium": "^0.19.1",
     "react": "^15.5.3",
     "react-dom": "^15.5.3",
     "react-jss": "^5.3.0",
-    "react-markdown": "^2.4.4",
     "react-router": "^3.0.2",
     "uuid": "^3.0.1"
   },

diff --git a/docs/src/assets/fonts/Lato/Lato-Bold.ttf b/docs/src/assets/fonts/Lato/Lato-Bold.ttf
diff --git a/docs/src/assets/fonts/Lato/Lato-Light.ttf b/docs/src/assets/fonts/Lato/Lato-Light.ttf
diff --git a/docs/src/assets/fonts/Lato/Lato-Regular.ttf b/docs/src/assets/fonts/Lato/Lato-Regular.ttf
diff --git a/docs/src/components/admin-badge/example.js b/docs/src/components/admin-badge/example.js
@@ -0,0 +1,16 @@
+export default `
+  \`\`\`jsx
+  import React from 'react';
+  import AdminBadge from 'anchor-ui/admin-badge';
+
+  const AdminBadgeExample = () => (
+    <section>
+      <AdminBadge />
+      <AdminBadge text="Custom Text" />
+      <AdminBadge text="Inverted" inverted />
+    </section>
+  );
+
+  export default AdminBadgeExample;
+  \`\`\`
+`;
diff --git a/docs/src/components/admin-badge.jsx → docs/src/components/admin-badge/index.jsx b/docs/src/components/admin-badge.jsx → docs/src/components/admin-badge/index.jsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
 import _ from 'lodash';
-import AdminBadge from '../../../dist/admin-badge';
-import Props from './props';
-import components from '../../components.json';
-import Paper from '../../../dist/paper';
-
-const usage = '```js\n import AdminBadge from \'anchor-ui/admin-badge\';';
+import AdminBadge from '../../../../dist/admin-badge';
+import Props from '../props';
+import components from '../../../components.json';
+import Paper from '../../../../dist/paper';
+import Markdown from '../markdown';
+import example from './example';
 
 const AdminBadgeDoc = () => {
   const componentData = _.find(components, component => component.displayName === 'AdminBadge');
@@ -22,18 +21,15 @@ const AdminBadgeDoc = () => {
   };
 
   return (
-    <article className="doc">
+    <article className="page">
       <h1>AdminBadge</h1>
       <section>
         <h1>Description</h1>
         <p>{componentData.description}</p>
       </section>
-      <section>
-        <h1>Usage</h1>
-        <ReactMarkdown source={usage} className="markdown" />
-      </section>
       <section>
         <h1>Examples</h1>
+        <Markdown markdown={example} title="Code example" />
         <Paper style={style.paper}>
           <AdminBadge style={style.adminBadge} />
           <AdminBadge text="Custom Text" style={style.adminBadge} />

diff --git a/docs/src/components/alert/example.js b/docs/src/components/alert/example.js
@@ -0,0 +1,17 @@
+export default `
+  \`\`\`jsx
+  import React from 'react';
+  import Alert from 'anchor-ui/alert';
+
+  const AlertExample = ({ hideAlert }) => (
+    <section>
+      <Alert text="Success!" type="success" hideAlert={hideAlert} />
+      <Alert text="Info!" type="info" hideAlert={hideAlert} />
+      <Alert text="Warning!" type="warning" hideAlert={hideAlert} />
+      <Alert text="Error!" type="error" hideAlert={hideAlert} />
+    </section>
+  );
+
+  export default AlertExample;
+  \`\`\`
+`;
diff --git a/docs/src/components/alert.jsx → docs/src/components/alert/index.jsx b/docs/src/components/alert.jsx → docs/src/components/alert/index.jsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
 import _ from 'lodash';
-import Props from './props';
-import Alert from '../../../dist/alert';
-import components from '../../components.json';
-import Paper from '../../../dist/paper';
-
-const usage = '```js\n import Alert from \'anchor-ui/alert\';';
+import Props from '../props';
+import Alert from '../../../../dist/alert';
+import components from '../../../components.json';
+import Paper from '../../../../dist/paper';
+import Markdown from '../markdown';
+import example from './example';
 
 const AlertDoc = () => {
   const componentData = _.find(components, component => component.displayName === 'Alert');
@@ -22,18 +21,15 @@ const AlertDoc = () => {
   };
 
   return (
-    <article className="doc">
+    <article className="page">
       <h1>Alert</h1>
       <section>
         <h1>Description</h1>
         <p>{componentData.description}</p>
       </section>
-      <section>
-        <h1>Usage</h1>
-        <ReactMarkdown source={usage} className="markdown" />
-      </section>
       <section>
         <h1>Examples</h1>
+        <Markdown markdown={example} title="Code example" />
         <Paper style={style.paper}>
           <Alert style={style.alert} text="Success!" type="success" hideAlert={() => {}} onClick={() => {}} />
           <Alert style={style.alert} text="Info!" type="info" hideAlert={() => {}} onClick={() => {}} />

diff --git a/docs/src/components/app-header/example.js b/docs/src/components/app-header/example.js
@@ -0,0 +1,24 @@
+export default `
+  \`\`\`jsx
+  import React from 'react';
+  import AppHeader from 'anchor-ui/app-header';
+  import Button from 'anchor-ui/button';
+  import colors from 'anchor-ui/settings/colors';
+  import IconExit from 'anchor-ui/icons/icon-exit';
+  import logo from '../../assets/images/logo.svg';
+
+  const AppHeaderExample = () => (
+    <AppHeader
+      text="Anchor UI"
+      icon={<img src={logo} alt="Anchor Chat" />}
+      rightButton={
+        <Button iconButton>
+          <IconExit color={colors.white} />
+        </Button>
+      }
+    />
+  );
+
+  export default AppHeaderExample;
+  \`\`\`
+`;
diff --git a/docs/src/components/app-header.jsx → docs/src/components/app-header/index.jsx b/docs/src/components/app-header.jsx → docs/src/components/app-header/index.jsx
@@ -1,16 +1,15 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
 import _ from 'lodash';
-import AppHeader from '../../../dist/app-header';
-import Button from '../../../dist/button';
-import { colors } from '../../../dist/settings';
-import { IconExit } from '../../../dist/icons';
-import Props from './props';
-import components from '../../components.json';
-import logo from '../assets/images/logo.svg';
-import Paper from '../../../dist/paper';
-
-const usage = '```js\n import AppHeader from \'anchor-ui/app-header\';';
+import AppHeader from '../../../../dist/app-header';
+import Button from '../../../../dist/button';
+import { colors } from '../../../../dist/settings';
+import IconExit from '../../../../dist/icons/icon-exit';
+import Props from '../props';
+import components from '../../../components.json';
+import logo from '../../assets/images/logo.svg';
+import Paper from '../../../../dist/paper';
+import Markdown from '../markdown';
+import example from './example';
 
 const AppHeaderDoc = () => {
   const componentData = _.find(components, component => component.displayName === 'AppHeader');
@@ -22,22 +21,22 @@ const AppHeaderDoc = () => {
       margin: 0,
       padding: '20px'
     },
-    appHeader: { margin: '10px' }
+    appHeader: {
+      margin: '10px',
+      zIndex: '0'
+    }
   };
 
   return (
-    <article className="doc">
+    <article className="page">
       <h1>AppHeader</h1>
       <section>
         <h1>Description</h1>
         <p>{componentData.description}</p>
       </section>
-      <section>
-        <h1>Usage</h1>
-        <ReactMarkdown source={usage} className="markdown" />
-      </section>
       <section>
         <h1>Examples</h1>
+        <Markdown markdown={example} title="Code example" />
         <Paper style={style.paper}>
           <AppHeader
             style={style.appHeader}

diff --git a/docs/src/components/app.jsx b/docs/src/components/app.jsx
@@ -7,20 +7,39 @@ import logo from '../assets/images/logo.svg';
 import github from '../assets/images/github.svg';
 import ThemeProvider from '../../../dist/theme-provider';
 import colors from '../../../dist/settings/colors';
+import Media from '../../../dist/media';
+import IconMenu from '../../../dist/icons/icon-menu';
 
 class App extends Component {
   constructor() {
     super();
 
     this.state = {
-      color: colors.theme
+      color: colors.theme,
+      media: {
+        medium: false
+      },
+      menu: false
     };
   }
 
   setColor = color => this.setState({ color })
 
+  setMedia = (matches) => {
+    this.setState({
+      media: matches
+    });
+  }
+
+  toggleMenu = () => {
+    this.setState({
+      menu: !this.state.menu
+    });
+  }
+
   render() {
     const { children } = this.props;
+    const { media, menu } = this.state;
 
     const childrenWithProps = React.Children.map(
       children, child => React.cloneElement(
@@ -31,9 +50,19 @@ class App extends Component {
       )
     );
 
+    const query = {
+      medium: '(min-width: 768px)'
+    };
+
+    const leftButton = (
+      <Button iconButton onClick={this.toggleMenu}>
+        <IconMenu color="#FEFEFE" />
+      </Button>
+    );
+
     return (
       <ThemeProvider color={this.state.color}>
-        <main className="app">
+        <main>
           <AppHeader
             text="Anchor UI"
             icon={
@@ -45,6 +74,11 @@ class App extends Component {
                 <img src={logo} alt="Anchor Chat" />
               </a>
             }
+            leftButton={
+              !media.medium
+                ? leftButton
+                : null
+            }
             rightButton={
               <a
                 href="https://github.com/anchorchat/anchor-ui"
@@ -57,10 +91,11 @@ class App extends Component {
               </a>
             }
           />
-          <article className="doc">
-            <Nav />
+          <article className="docs">
+            <Nav media={media} open={menu} toggleMenu={this.toggleMenu} />
             {childrenWithProps}
           </article>
+          <Media query={query} onChange={this.setMedia} />
         </main>
       </ThemeProvider>
     );

diff --git a/docs/src/components/avatar/example.js b/docs/src/components/avatar/example.js
@@ -0,0 +1,18 @@
+export default `
+  \`\`\`jsx
+  import React from 'react';
+  import Avatar from 'anchor-ui/avatar';
+
+  const AvatarExample = () => (
+    <section>
+      <Avatar image="https://avatars2.githubusercontent.com/u/3033357?s=120&v=4" />
+      <Avatar image="https://avatars3.githubusercontent.com/u/10127707?s=120&v=4" />
+      <Avatar image="https://avatars2.githubusercontent.com/u/16486197?v=3&s=120" status="online" />
+      <Avatar image="https://avatars1.githubusercontent.com/u/6596471?v=3&s=120" status="away" />
+      <Avatar image="https://avatars0.githubusercontent.com/u/14125280?v=3&s=120" status="offline" />
+    </section>
+  );
+
+  export default AvatarExample;
+  \`\`\`
+`;
diff --git a/docs/src/components/avatar.jsx → docs/src/components/avatar/index.jsx b/docs/src/components/avatar.jsx → docs/src/components/avatar/index.jsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
 import _ from 'lodash';
-import Avatar from '../../../dist/avatar';
-import components from '../../components.json';
-import Props from './props';
-import Paper from '../../../dist/paper';
-
-const usage = '```js\n import Avatar from \'anchor-ui/avatar\';';
+import Avatar from '../../../../dist/avatar';
+import components from '../../../components.json';
+import Props from '../props';
+import Paper from '../../../../dist/paper';
+import Markdown from '../markdown';
+import example from './example';
 
 const AvatarDoc = () => {
   const componentData = _.find(components, component => component.displayName === 'Avatar');
@@ -22,24 +21,21 @@ const AvatarDoc = () => {
   };
 
   return (
-    <article className="doc">
+    <article className="page">
       <h1>Avatar</h1>
       <section>
         <h1>Description</h1>
         <p>{componentData.description}</p>
       </section>
-      <section>
-        <h1>Usage</h1>
-        <ReactMarkdown source={usage} className="markdown" />
-      </section>
       <section>
         <h1>Examples</h1>
+        <Markdown markdown={example} title="Code example" />
         <Paper style={style.paper}>
-          <Avatar style={style.avatar} image="https://avatars1.githubusercontent.com/u/6596471?v=3&s=400" />
-          <Avatar style={style.avatar} image="https://avatars0.githubusercontent.com/u/14125280?v=3&s=400" />
-          <Avatar style={style.avatar} image="https://avatars2.githubusercontent.com/u/16486197?v=3&s=400" status="online" />
-          <Avatar style={style.avatar} image="https://avatars1.githubusercontent.com/u/6596471?v=3&s=400" status="away" />
-          <Avatar style={style.avatar} image="https://avatars0.githubusercontent.com/u/14125280?v=3&s=400" status="offline" />
+          <Avatar style={style.avatar} image="https://avatars2.githubusercontent.com/u/3033357?s=120&v=4" />
+          <Avatar style={style.avatar} image="https://avatars3.githubusercontent.com/u/10127707?s=120&v=4" />
+          <Avatar style={style.avatar} image="https://avatars2.githubusercontent.com/u/16486197?v=3&s=120" status="online" />
+          <Avatar style={style.avatar} image="https://avatars1.githubusercontent.com/u/6596471?v=3&s=120" status="away" />
+          <Avatar style={style.avatar} image="https://avatars0.githubusercontent.com/u/14125280?v=3&s=120" status="offline" />
         </Paper>
       </section>
       <Props props={componentData.props} />

diff --git a/docs/src/components/badge/example.js b/docs/src/components/badge/example.js
@@ -0,0 +1,19 @@
+export default `
+  \`\`\`jsx
+  import React from 'react';
+  import Badge from 'anchor-ui/badge';
+
+  const BadgeExample = () => (
+    <section>
+      <Badge value={9} maxValue={9} />
+      <Badge value={10} maxValue={9} />
+      <Badge value={10} maxValue={9} inverted />
+      <Badge value={100} />
+      <Badge value={100} maxValue={99} />
+      <Badge value={1000} />
+    </section>
+  );
+
+  export default BadgeExample;
+  \`\`\`
+`;