elastic · cjcenizal · Aug 2, 2016 · Jul 21, 2016 · Jul 21, 2016 · Jul 21, 2016
diff --git a/src/framework/components/local_nav/_index.scss b/src/framework/components/local_nav/_index.scss
@@ -0,0 +1,9 @@
+
+$localNavSideSpacing: 10px;
+
+@import "local_breadcrumbs";
+@import "local_dropdown";
+@import "local_menu";
+@import "local_nav";
+@import "local_search";
+@import "local_tabs";
diff --git a/src/framework/components/local_nav/_local_breadcrumbs.scss b/src/framework/components/local_nav/_local_breadcrumbs.scss
@@ -0,0 +1,38 @@
+
+/**
+ * 1. Breadcrumbs are placed in the top-left corner and need to be bumped over
+ *    a bit.
+ */
+.localBreadcrumbs {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-left: $localNavSideSpacing; /* 1 */
+}
+
+  .localBreadcrumb {
+    & + & {
+      margin-left: 6px;
+
+      &:before {
+        content: '/';
+        user-select: none;
+        margin-right: 4px;
+        color: #5a5a5a;
+      }
+    }
+  }
+
+    .localBreadcrumb__link {
+      font-size: 14px;
+      color: #5a5a5a;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    .localBreadcrumb__emphasis {
+      font-weight: 700;
+    }
diff --git a/src/framework/components/local_nav/_local_dropdown.scss b/src/framework/components/local_nav/_local_dropdown.scss
@@ -0,0 +1,5 @@
+
+.localDropdown {
+  padding: 0 $localNavSideSpacing;
+  background-color: #f6f6f6;
+}
diff --git a/src/framework/components/local_nav/_local_menu.scss b/src/framework/components/local_nav/_local_menu.scss
@@ -0,0 +1,32 @@
+
+.localMenu {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+  .localMenuItem {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 $localNavSideSpacing;
+    font-size: 14px;
+    background-color: transparent;
+    color: #5a5a5a;
+    border: 0;
+    cursor: pointer;
+
+    &:hover {
+      background-color: rgba(#000000, 0.1);
+      color: #000000;
+    }
+
+    &.localMenuItem-is-selected {
+      background-color: #f6f6f6;
+    }
+  }
+
+    .localMenuItem__icon {
+      margin-right: 5px;
+      margin-bottom: -1px;
+    }
diff --git a/src/framework/components/local_nav/_local_nav.scss b/src/framework/components/local_nav/_local_nav.scss
@@ -0,0 +1,28 @@
+
+/**
+ * 1. Match height of logo in side bar, but allow it to expand to accommodate
+ *    dropdown.
+ */
+.localNav {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 70px; /* 1 */
+  background-color: #e4e4e4;
+}
+
+.localNavRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+}
+
+  .localNavRow__section {
+    height: 100%;
+  }
+
+.localNavRow--secondary {
+  height: 38px;
+  padding: 0 $localNavSideSpacing;
+}
diff --git a/src/framework/components/local_nav/_local_search.scss b/src/framework/components/local_nav/_local_search.scss
@@ -0,0 +1,33 @@
+
+$localSearchHeight: 30px;
+
+.localSearch {
+  display: flex;
+  width: 100%;
+  height: $localSearchHeight;
+}
+
+  .localSearch__input {
+    flex: 1 1 100%;
+    padding: 5px 15px;
+    font-size: 14px;
+    color: #2d2d2d;
+    border: 0;
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .localSearch__button {
+    width: 43px;
+    height: $localSearchHeight;
+    font-size: 14px;
+    background-color: #9c9c9c;
+    color: #ffffff;
+    border: 0;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+  }
diff --git a/src/framework/components/local_nav/_local_tabs.scss b/src/framework/components/local_nav/_local_tabs.scss
@@ -0,0 +1,26 @@
+
+.localTabs {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+  /**
+   * 1. Make sure the bottom border is flush with the bottom of the LocalNav.
+   */
+  .localTab {
+    padding: 5px 0 6px 0;
+    font-size: 18px;
+    line-height: 22px; /* 1 */
+    color: #2d2d2d;
+    border-bottom: 2px solid transparent;
+    text-decoration: none;
+
+    &.localTab-is-selected {
+      border-bottom-color: #2d2d2d;
+    }
+
+    & + & {
+      margin-left: 8px;
+    }
+  }
diff --git a/src/framework/components/top_nav/_index.scss b/src/framework/components/top_nav/_index.scss
diff --git a/src/framework/framework.scss b/src/framework/framework.scss
@@ -1 +1 @@
-@import "components/top_nav/index";
+@import "components/local_nav/index";
diff --git a/src/guide/components/guide_example/guide_example.jsx b/src/guide/components/guide_example/guide_example.jsx
@@ -70,6 +70,7 @@ GuideExample.propTypes = {
   route: PropTypes.object.isRequired,
   sections: PropTypes.arrayOf(React.PropTypes.shape({
     title: React.PropTypes.string.isRequired,
+    description: React.PropTypes.any,
     html: React.PropTypes.string.isRequired,
     js: React.PropTypes.string,
   })),

diff --git a/src/guide/components/guide_page_section/_guide_page_section.scss b/src/guide/components/guide_page_section/_guide_page_section.scss
@@ -39,3 +39,12 @@
         inset 0 2px 8px rgba(black, 0.2);
     }
   }
+
+  .guidePageSection__description {
+    font-size: 14px;
+    line-height: 21px;
+  }
+
+  .guidePageSection__example--standalone {
+    margin-top: 10px;
+  }
diff --git a/src/guide/components/guide_page_section/guide_page_section.jsx b/src/guide/components/guide_page_section/guide_page_section.jsx
@@ -4,14 +4,12 @@ import React, {
   PropTypes,
 } from 'react';
 
+import classNames from 'classnames';
+
 import {
   JsInjector,
 } from '../../services';
 
-import {
-  Html,
-} from '../';
-
 export default class GuidePageSection extends Component {
 
   constructor(props) {
@@ -38,6 +36,16 @@ export default class GuidePageSection extends Component {
       // the component DOM is available for the JS to manipulate.
       JsInjector.inject(this.props.js, this.scriptId);
     }
+
+    function trimChildren(node) {
+      if (node.children.length > 0) {
+        [...node.children].forEach(trimChildren);
+        return;
+      }
+      node.textContent = node.textContent.trim();
+    }
+
+    trimChildren(this.refs.html);
   }
 
   componentWillUnmount() {
@@ -50,6 +58,20 @@ export default class GuidePageSection extends Component {
   }
 
   render() {
+    let description;
+
+    if (this.props.children) {
+      description = (
+        <div className="guidePageSection__description">
+          {this.props.children}
+        </div>
+      );
+    }
+
+    const exampleClasses = classNames({
+      'guidePageSection__example--standalone': !this.props.children,
+    });
+
     return (
       <div
         id={this.props.slug}
@@ -65,11 +87,13 @@ export default class GuidePageSection extends Component {
           />
         </div>
 
-        <div>
-          {this.props.children}
-        </div>
+        {description}
 
-        <Html>{this.props.html}</Html>
+        <div
+          ref="html"
+          className={exampleClasses}
+          dangerouslySetInnerHTML={{ __html: this.props.html }}
+        />
       </div>
     );
   }

diff --git a/src/guide/components/html/Html.jsx b/src/guide/components/html/Html.jsx
diff --git a/src/guide/components/index.js b/src/guide/components/index.js
@@ -19,6 +19,3 @@ export { default as GuidePageSideNav } from './guide_page_side_nav/guide_page_si
 
 export * from './guide_page_side_nav/guide_page_side_nav_item.jsx';
 export { default as GuidePageSideNavItem } from './guide_page_side_nav/guide_page_side_nav_item.jsx';
-
-export * from './html/html.jsx';
-export { default as Html } from './html/html.jsx';
diff --git a/src/guide/services/example/createExample.js b/src/guide/services/example/createExample.js
@@ -0,0 +1,16 @@
+
+import {
+  GuideExample,
+} from '../../components';
+
+export default function creatExample(examples) {
+  class Example extends GuideExample {
+    constructor(props) {
+      super(props, examples);
+    }
+  }
+
+  Example.propTypes = Object.assign({}, GuideExample.propTypes);
+
+  return Example;
+}
diff --git a/src/guide/services/index.js b/src/guide/services/index.js
@@ -1,4 +1,7 @@
 
+export * from './example/createExample';
+export { default as createExample } from './example/createExample';
+
 export * from './js_injector/js_injector';
 export { default as JsInjector } from './js_injector/js_injector';
 

diff --git a/src/guide/services/routes/Routes.js b/src/guide/services/routes/Routes.js
@@ -1,13 +1,13 @@
 
 import Slugify from '../string/slugify';
 
-import TopNavExample
-  from '../../views/top_nav/top_nav_example.jsx';
+import LocalNavExample
+  from '../../views/local_nav/local_nav_example.jsx';
 
 // Component route names should match the component name exactly.
 const components = [{
-  name: 'TopNav',
-  component: TopNavExample,
+  name: 'LocalNav',
+  component: LocalNavExample,
 }];
 
 export default {

diff --git a/src/guide/variables.scss b/src/guide/variables.scss
@@ -4,7 +4,7 @@ $guideNavHeight: 60px;
 $guideSideNavWidth: 400px;
 $guideSideNavSmallWidth: 220px;
 $guideCodeViewerWidth: 700px;
-$guideCodeViewerSmallWidth: 400px;
+$guideCodeViewerSmallWidth: 580px;
 $guideCodeViewerTransition: 0.2s ease;
 
 $normalBreakpoint: 1900px;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		@import "components/top_nav/index";
		@import "components/local_nav/index";