Sjaakluthart/code examples (#939)

* Added example. * Added example. * Added example. * Added example. * Added example. * Added example. * Added example. * Added example. * Simplified handler. * Changed markup. * Changed syntax. * Added example. * Removed log. * Added example.
anchorchat · Nov 4, 2017 · 77c9b29 · 77c9b29
1 parent 049839f
commit 77c9b29
Show file tree

Hide file tree

Showing 21 changed files with 431 additions and 198 deletions.
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,16 +1,11 @@
 import React from 'react';
 import _ from 'lodash';
-import AdminBadge from '../../../dist/admin-badge';
-import Props from './props';
-import components from '../../components.json';
-import Paper from '../../../dist/paper';
-import Markdown from './markdown';
-
-const usage = `
-  \`\`\`js
-  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');
@@ -32,9 +27,9 @@ const AdminBadgeDoc = () => {
         <h1>Description</h1>
         <p>{componentData.description}</p>
       </section>
-      <Markdown markdown={usage} title="Code example" />
       <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,16 +1,11 @@
 import React from 'react';
 import _ from 'lodash';
-import Props from './props';
-import Alert from '../../../dist/alert';
-import components from '../../components.json';
-import Paper from '../../../dist/paper';
-import Markdown from './markdown';
-
-const usage = `
-  \`\`\`js
-  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');
@@ -32,9 +27,9 @@ const AlertDoc = () => {
         <h1>Description</h1>
         <p>{componentData.description}</p>
       </section>
-      <Markdown markdown={usage} title="Code example" />
       <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,20 +1,15 @@
 import React from 'react';
 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';
-import Markdown from './markdown';
-
-const usage = `
-  \`\`\`js
-  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');
@@ -26,7 +21,10 @@ const AppHeaderDoc = () => {
       margin: 0,
       padding: '20px'
     },
-    appHeader: { margin: '10px' }
+    appHeader: {
+      margin: '10px',
+      zIndex: '0'
+    }
   };
 
   return (
@@ -36,9 +34,9 @@ const AppHeaderDoc = () => {
         <h1>Description</h1>
         <p>{componentData.description}</p>
       </section>
-      <Markdown markdown={usage} title="Code example" />
       <section>
         <h1>Examples</h1>
+        <Markdown markdown={example} title="Code example" />
         <Paper style={style.paper}>
           <AppHeader
             style={style.appHeader}

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,16 +1,11 @@
 import React from 'react';
 import _ from 'lodash';
-import Avatar from '../../../dist/avatar';
-import components from '../../components.json';
-import Props from './props';
-import Paper from '../../../dist/paper';
-import Markdown from './markdown';
-
-const usage = `
-  \`\`\`js
-  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');
@@ -32,15 +27,15 @@ const AvatarDoc = () => {
         <h1>Description</h1>
         <p>{componentData.description}</p>
       </section>
-      <Markdown markdown={usage} title="Code example" />
       <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;
+  \`\`\`
+`;
diff --git a/docs/src/components/badge.jsx → docs/src/components/badge/index.jsx b/docs/src/components/badge.jsx → docs/src/components/badge/index.jsx
@@ -1,16 +1,11 @@
 import React from 'react';
 import _ from 'lodash';
-import Badge from '../../../dist/badge';
-import Props from './props';
-import components from '../../components.json';
-import Paper from '../../../dist/paper';
-import Markdown from './markdown';
-
-const usage = `
-  \`\`\`js
-  import Badge from 'anchor-ui/badge';
-  \`\`\`
-`;
+import Badge from '../../../../dist/badge';
+import Props from '../props';
+import components from '../../../components.json';
+import Paper from '../../../../dist/paper';
+import Markdown from '../markdown';
+import example from './example';
 
 const BadgeDoc = () => {
   const componentData = _.find(components, component => component.displayName === 'Badge');
@@ -32,9 +27,9 @@ const BadgeDoc = () => {
         <h1>Description</h1>
         <p>{componentData.description}</p>
       </section>
-      <Markdown markdown={usage} title="Code example" />
       <section>
         <h1>Examples</h1>
+        <Markdown markdown={example} title="Code example" />
         <Paper style={style.paper}>
           <Badge style={style.badge} value={9} maxValue={9} />
           <Badge style={style.badge} value={10} maxValue={9} />

diff --git a/docs/src/components/button/example.js b/docs/src/components/button/example.js
@@ -0,0 +1,29 @@
+export default `
+  \`\`\`jsx
+  import React from 'react';
+  import Button from 'anchor-ui/button';
+  import IconEmoji from 'anchor-ui/icons/icon-emoji';
+
+  const ButtonExample = () => {
+    <section>
+      <Button>
+        <p>Default</p>
+      </Button>
+      <Button inverted>
+        <p>Inverted</p>
+      </Button>
+      <Button disabled>
+        <p>Disabled</p>
+      </Button>
+      <Button flatButton>
+        <p>Flat button</p>
+      </Button>
+      <Button iconButton>
+        <IconEmoji />
+      </Button>
+    </section>
+  };
+
+  export default ButtonExample;
+  \`\`\`
+`;