Improved dialog and docs + button loading

docs/gatsby-node.js

@@ -1,18 +1,15 @@
 const path = require('path')
 const webpack = require('webpack') // eslint-disable-line import/no-extraneous-dependencies
-const globby = require('globby')
 
 const componentTemplate = path.resolve(`src/templates/component.js`)
-const componentNames = globby
-  .sync(`${__dirname}/../src/*/`, { nodir: false })
-  .map(pathname => path.basename(pathname))
+const componentNames = ['buttons', 'dialog', 'table']
 
 // Implement the Gatsby API “createPages”. This is called once the
 // data layer is bootstrapped to let plugins create pages from data.
 exports.createPages = ({ boundActionCreators }) => {
   const { createPage } = boundActionCreators
 
-  for (const componentName of componentNames) {
+  componentNames.forEach(componentName => {
     const componentPath = `/components/${componentName}`
 
     createPage({
@@ -27,7 +24,7 @@ exports.createPages = ({ boundActionCreators }) => {
         name: componentName
       }
     })
-  }
+  })
 }
 
 exports.modifyWebpackConfig = ({ config }) => {

docs/src/components/ComponentReadme.js

@@ -32,19 +32,17 @@ export default class ComponentReadme extends PureComponent {
       <article className="ComponentReadme" {...props}>
         <div className="Container ComponentReadme-inner">
           <header className="ComponentReadme-header">
-            <h1 className="ComponentReadme-title">{title}</h1>
-            <p className="ComponentReadme-subtitle">{subTitle}</p>
-            <dl>
-              <dt>Links</dt>
-              <dd>
-                <a
-                  href={`https://github.com/segmentio/evergreen/tree/master/src/${name}`}
-                  target="_blank"
-                >
-                  GitHub
-                </a>
-              </dd>
-            </dl>
+            <h1 className="ComponentReadme-title">{title} </h1>
+            <p className="ComponentReadme-subtitle">
+              {subTitle}{' '}
+              <a
+                className="ComponentReadme-githubLink"
+                href={`https://github.com/segmentio/evergreen/tree/master/src/${name}`}
+                target="_blank"
+              >
+                View on GitHub
+              </a>.
+            </p>
           </header>
           <div>
             {designGuidelines && (
@@ -99,8 +97,8 @@ export default class ComponentReadme extends PureComponent {
                 <div className="Content">
                   <h2 id="component-examples">Component Examples</h2>
                   <p>
-                    The <code>{name}</code> package exports the following
-                    documented components:
+                    The following components are exported by Evergreen for this
+                    UI pattern:
                   </p>
                   <ul>
                     {components.map(component => {

docs/src/components/ComponentsSidebar.js

@@ -18,6 +18,10 @@ export default class ComponentsSidebar extends PureComponent {
             label: 'Buttons',
             to: '/components/buttons'
           },
+          {
+            label: 'Dialog',
+            to: '/components/dialog'
+          },
           {
             label: 'Table',
             to: '/components/table'

docs/src/components/prop-types-table/index.js

@@ -31,23 +31,23 @@ export default class PropTypesTable extends PureComponent {
   render() {
     const { componentDocs } = this.state
     const propTypes = Object.keys(componentDocs.props)
-    console.log('componentDocs', componentDocs)
     return (
       <div>
         <div className="Content">
           <h3>Props</h3>
-          {componentDocs.composes.length > 0 && (
-            <div className="PropTypesTable-composes">
-              <p>
-                <strong>This component composes </strong>
-                {componentDocs.composes.map(filePath => (
-                  <code key={filePath}>
-                    {filePath.substring(filePath.indexOf('/') + 1)}
-                  </code>
-                ))}
-              </p>
-            </div>
-          )}
+          {componentDocs.composes &&
+            componentDocs.composes.length > 0 && (
+              <div className="PropTypesTable-composes">
+                <p>
+                  <strong>This component composes </strong>
+                  {componentDocs.composes.map(filePath => (
+                    <code key={filePath}>
+                      {filePath.substring(filePath.indexOf('/') + 1)}
+                    </code>
+                  ))}
+                </p>
+              </div>
+            )}
         </div>
 
         {propTypes.map(propName => {

docs/src/css/appearance-option.css

@@ -1,6 +1,6 @@
 .AppearanceOption {
   background-color: white;
-  box-shadow: inset 0 0 0 1px var(--color-border-muted);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
   padding: 16px;
   margin-bottom: 16px;
 }

docs/src/css/component-readme.css

@@ -23,32 +23,19 @@
 
 .ComponentReadme-header {
   border-bottom: 1px solid var(--neutral-20A);
-  /* padding-bottom: 16px; */
+  padding-bottom: 16px;
   margin-bottom: 24px;
+}
 
-  & dl {
-    font-size: 14px;
-    margin-top: 16px;
-    margin-bottom: px;
-
-    & dt {
-      color: var(--neutral-200);
-      width: 72px;
-      display: inline-block;
-    }
+.ComponentReadme-githubLink {
+  color: var(--blue-500);
 
-    & dd {
-      width: calc(100% - 72px);
-      margin-left: 0;
-      margin-bottom: 16px;
-      display: inline-block;
+  &:hover {
+    text-decoration: underline;
+  }
 
-      & a {
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
+  &:focus {
+    outline: 1px solid var(--blue-500);
   }
 }
 

docs/src/css/content.css

@@ -14,9 +14,14 @@
 
   & a {
     color: var(--blue-500);
+
     &:hover {
       text-decoration: underline;
     }
+
+    &:focus {
+      outline: 1px solid var(--blue-500);
+    }
   }
 
   & h1 {
@@ -67,14 +72,34 @@
     }
   }
 
+  & p {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  & li {
+    margin-top: 0.2em;
+    margin-bottom: 0.2em;
+  }
+
   & p,
   & li {
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
     letter-spacing: -0.05px;
+  }
+
+  & blockquote {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.05px;
     margin-top: 1em;
     margin-bottom: 1em;
+    border-left: 2px solid var(--green-100A);
+    padding: 12px;
+    background-color: var(--green-7A);
   }
 
   & strong {

docs/src/css/main-layout.css

@@ -9,7 +9,6 @@
 .MainLayout-main {
   flex: 1;
   display: flex;
-  background-color: var(--neutral-3);
 
   @media (--range-palm), (--range-hand), (--range-lap) {
     flex-direction: column;

docs/src/css/nav-group.css

@@ -12,6 +12,10 @@
       background-color: var(--neutral-5A);
     }
 
+    &:focus {
+      box-shadow: inset 0 0 0 1px var(--blue-100A);
+    }
+
     &:active,
     &.is-active {
       background-color: var(--blue-10A);

docs/src/css/top-bar.css

@@ -46,10 +46,10 @@
   display: inline-flex;
   align-items: center;
   letter-spacing: 0.4px;
+  border-radius: 3px;
 
   &:hover {
     background-color: var(--neutral-7A);
-    border-radius: 3px;
   }
 
   &:active,
@@ -58,6 +58,10 @@
     color: var(--blue-500);
   }
 
+  &:focus {
+    box-shadow: inset 0 0 0 1px var(--blue-100A);
+  }
+
   & .icon-holder {
     width: 16px;
     height: 16px;

docs/src/utils/getComponent.js

@@ -24,13 +24,14 @@ import buttonsDocs from '../../../src/buttons/docs'
 import tableDocs from '../../../src/table/docs/'
 // import sideSheetDocs from '../../src/side-sheet/docs/'
 // import radioDocs from '../../src/radio/docs/'
-// import dialogDocs from '../../src/dialog/docs/'
+import dialogDocs from '../../../src/dialog/docs/'
 // import cornerDialogDocs from '../../src/corner-dialog/docs/'
 // import alertDocs from '../../src/alert/docs/'
 
 const map = {
   buttons: buttonsDocs,
-  table: tableDocs
+  table: tableDocs,
+  dialog: dialogDocs
 }
 
 export default function getComponent(name) {

src/buttons/docs/LoadingManager.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default class LoadingManager extends React.PureComponent {
+  static propTypes = {
+    children: PropTypes.func
+  }
+
+  state = {
+    isLoading: false
+  }
+
+  setLoading = () => {
+    this.setState({
+      isLoading: true
+    })
+
+    window.setTimeout(() => {
+      this.setState({
+        isLoading: false
+      })
+    }, 2000)
+  }
+
+  render() {
+    return this.props.children({
+      isLoading: this.state.isLoading,
+      setLoading: this.setLoading
+    })
+  }
+}

src/buttons/docs/examples/loading.example

@@ -0,0 +1,13 @@
+<LoadingManager>
+  {({ isLoading, setLoading }) => {
+    return (
+      <Button
+        marginRight={16}
+        isLoading={isLoading}
+        onClick={setLoading}
+      >
+        {isLoading ? 'Loading...' : 'Click to Load'}
+      </Button>
+    )
+  }}
+</LoadingManager>

src/buttons/docs/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import LoadingManager from './LoadingManager'
 import { BackButton, IconButton, Button } from '..'
 /* eslint-disable import/no-unresolved, import/no-webpack-loader-syntax */
 import sourceBackButton from '!raw-loader!../src/BackButton'
@@ -10,14 +11,15 @@ import sourceButton from '!raw-loader!../src/Button'
  * Code examples
  */
 import basicExample from './examples/basic.example'
+import loadingExample from './examples/loading.example'
 import basicWithIconsExample from './examples/basic-with-icons.example'
 import backButtonExample from './examples/back-button.example'
 import triangleExample from './examples/triangle.example'
 import arrowExample from './examples/arrow.example'
 import iconButtonBasicExample from './examples/icon-button-basic.example'
 
 const title = 'Buttons'
-const subTitle = 'A package exporting multiple types of buttons.'
+const subTitle = 'A set of buttons with multiple appearances.'
 
 const designGuidelines = (
   <div>
@@ -129,13 +131,19 @@ const components = [
         codeText: basicExample,
         scope: { Button }
       },
+      {
+        title: 'Loading button',
+        codeText: loadingExample,
+        scope: { Button, LoadingManager }
+      },
       {
         title: 'Buttons with an icon',
         codeText: basicWithIconsExample,
         scope: { Button }
       }
     ]
   },
+
   {
     name: 'BackButton',
     source: sourceBackButton,