Add Guidelines section with a stub for writing guidelines. (#175)

src-docs/src/components/guide_page/guide_page_chrome.js

@@ -93,6 +93,42 @@ export class GuidePageChrome extends Component {
     }));
   }
 
+  renderGuidelineNavItems() {
+    const matchingItems = this.props.guidelines.filter(item => (
+      item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
+    ));
+
+    // Build links to subsections if there's more than 1.
+    if (this.props.sections.length > 1) {
+      const currentSectionIndex = matchingItems.findIndex(item => item.name === this.props.currentRouteName);
+      if (currentSectionIndex !== -1) {
+        matchingItems[currentSectionIndex].subSections = this.props.sections.map(section => {
+          return { ...section };
+        });
+      }
+    }
+
+    return {
+      name: 'Guidelines',
+      id: 'guidelines',
+      items: matchingItems.map(item => {
+        const {
+          name,
+          path,
+          subSections,
+        } = item;
+
+        return {
+          id: `guideline-${path}`,
+          name,
+          href: `#/${path}`,
+          items: this.renderSubSections(subSections),
+          isSelected: name === this.props.currentRouteName,
+        };
+      }),
+    };
+  }
+
   renderComponentNavItems() {
     const matchingItems = this.props.components.filter(item => (
       item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
@@ -155,6 +191,7 @@ export class GuidePageChrome extends Component {
 
   render() {
     const sideNav = [
+      this.renderGuidelineNavItems(),
       this.renderComponentNavItems(),
       this.renderSandboxNavItems(),
     ];

src-docs/src/services/routes/routes.js

@@ -3,6 +3,11 @@ import createHashHistory from 'history/lib/createHashHistory';
 
 import Slugify from '../string/slugify';
 
+// Guidelines
+
+import WritingGuidelines
+  from '../../views/guidelines/writing';
+
 // Component examples
 
 import AccordionExample
@@ -115,6 +120,11 @@ import WatchesSandbox
 import TextScalingSandbox
   from '../../views/text_scaling/text_scaling_sandbox';
 
+const guidelines = [{
+  name: 'Writing',
+  component: WritingGuidelines,
+}];
+
 // Component route names should match the component name exactly.
 const components = [{
   name: 'Accordion',
@@ -230,10 +240,15 @@ const sandboxes = [{
 
 sandboxes.forEach(sandbox => { sandbox.isSandbox = true; });
 
-const allRoutes = components.concat(sandboxes);
+const allRoutes = [
+  ...guidelines,
+  ...components,
+  ...sandboxes,
+];
 
 export default {
   history: useRouterHistory(createHashHistory)(),
+  guidelines: Slugify.each(guidelines, 'name', 'path'),
   components: Slugify.each(components, 'name', 'path'),
   sandboxes: Slugify.each(sandboxes, 'name', 'path'),
 

src-docs/src/views/app_view.js

@@ -72,6 +72,7 @@ export class AppView extends Component {
                 currentRouteName={this.props.currentRouteName}
                 onToggleTheme={this.props.toggleTheme}
                 routes={this.props.routes}
+                guidelines={Routes.guidelines}
                 components={Routes.components}
                 sandboxes={Routes.sandboxes}
                 sections={this.props.sections}

src-docs/src/views/guidelines/writing.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {
+  GuidePage,
+} from '../../components';
+
+import {
+  EuiText,
+} from '../../../../src/components';
+
+export default () => (
+  <GuidePage title="Writing guidelines">
+    <EuiText>
+      <h1>
+        Writing guidelines
+      </h1>
+
+      <p>
+        (To-do)
+      </p>
+    </EuiText>
+  </GuidePage>
+);