docs(ComponentExamples): add missing examples message

Semantic-Org · Jul 18, 2016 · 05dcae0 · 05dcae0
1 parent 66e8975
commit 05dcae0
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/docs/app/Components/ComponentDoc/ComponentExamples.js b/docs/app/Components/ComponentDoc/ComponentExamples.js
@@ -1,28 +1,45 @@
 import React, { Component, createElement, PropTypes } from 'react'
 
 import { exampleContext } from 'docs/app/utils'
-import { Divider, Header } from 'stardust'
+import { Divider, Header, Message } from 'stardust'
 
 export default class ComponentExamples extends Component {
   static propTypes = {
     name: PropTypes.string,
   }
 
-  render() {
+  renderExample = () => {
     const { name } = this.props
 
-    const examples = exampleContext.keys()
-      .filter(path => (
-        // TODO only filter index.js files once PRs for old components are merged and
-        // the docs are updated to use the new naming scheme
-        new RegExp(`(${name}Examples|${name}/index).js$`).test(path)
-      ))
-      .map((path, i) => createElement(exampleContext(path).default, { key: i }))
+    // TODO only find index.js files once PRs for old components are merged and
+    // the docs are updated to use the new naming scheme
+    const examplePath = exampleContext.keys()
+      .find(path => new RegExp(`(${name}Examples|${name}/index).js$`).test(path))
+
+    return examplePath && createElement(exampleContext(examplePath).default)
+  }
+
+  renderMissingExamples = () => {
+    const { name } = this.props
+    return (
+      <Message icon='book' className='info'>
+        If there's no
+        <a
+          href='https://github.com/TechnologyAdvice/stardust/pulls'
+        > pull request </a>
+        open for <code>&lt;{name} /&gt;</code> examples, you should
+        <a
+          href='https://github.com/TechnologyAdvice/stardust/blob/master/CONTRIBUTING.md'
+        > contribute</a>!
+      </Message>
+    )
+  }
 
-    return !examples.length ? null : (
+  render() {
+    return (
       <div>
         <Header.H2>Examples</Header.H2>
-        {examples}
+        {this.renderExample() || this.renderMissingExamples()}
         <Divider className='hidden section' />
       </div>
     )

diff --git a/docs/app/Components/ComponentDoc/ExampleSection.js b/docs/app/Components/ComponentDoc/ExampleSection.js
@@ -1,17 +1,18 @@
 import React, { Component, PropTypes } from 'react'
+import { Header } from 'stardust'
 
 export default class ExampleSection extends Component {
   static propTypes = {
     children: PropTypes.node,
     title: PropTypes.string,
-  };
+  }
 
   render() {
     return (
       <div>
-        <h3 className='ui dividing header' style={{ margin: '2em 0' }}>
+        <Header dividing style={{ margin: '2em 0' }}>
           {this.props.title}
-        </h3>
+        </Header>
         {this.props.children}
       </div>
     )