[UI Framework] Add several kuiLocalNav-related components (#11725)

This adds several `LocalNav`-related React components and converts their usage in the docs to React:

* `KuiLocalNav`
* `KuiLocalNavRow`
* `KuiLocalNavRowSection`
* `KuiLocalNavTab`
* `KuiLocalNavTabs`
* `KuiLocalNavTitle`

ui_framework/components/index.js

@@ -6,6 +6,15 @@ export {
   KuiSubmitButton,
 } from './button';
 
+export {
+  KuiLocalNav,
+  KuiLocalNavRow,
+  KuiLocalNavRowSection,
+  KuiLocalTab,
+  KuiLocalTabs,
+  KuiLocalTitle,
+} from './local_nav';
+
 export {
   KuiToolBarSearchBox,
   KuiToolBar,

ui_framework/components/local_nav/__snapshots__/local_nav.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiLocalNav 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiLocalNav testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/local_nav/__snapshots__/local_nav_row.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`property isSecondary renders the secondary modifier 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiLocalNavRow testClass1 testClass2 kuiLocalNavRow--secondary"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;
+
+exports[`renders KuiLocalNavRow 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiLocalNavRow testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/local_nav/__snapshots__/local_nav_row_section.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiLocalNavRowSection 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiLocalNavRow__section testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/local_nav/__snapshots__/local_tab.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`property isDisabled renders the isDisabled modifier 1`] = `
+<a
+  aria-label="aria-label"
+  class="kuiLocalTab testClass1 testClass2 kuiLocalTab-isDisabled"
+  data-test-subj="test subject string"
+>
+  children
+</a>
+`;
+
+exports[`property isSelected renders the isSelected modifier 1`] = `
+<a
+  aria-label="aria-label"
+  class="kuiLocalTab testClass1 testClass2 kuiLocalTab-isSelected"
+  data-test-subj="test subject string"
+>
+  children
+</a>
+`;
+
+exports[`renders KuiLocalTab 1`] = `
+<a
+  aria-label="aria-label"
+  class="kuiLocalTab testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</a>
+`;

ui_framework/components/local_nav/__snapshots__/local_tabs.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiLocalTabs 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiLocalTabs testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/local_nav/__snapshots__/local_title.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiLocalTitle 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiLocalTitle testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/local_nav/index.js

@@ -0,0 +1,6 @@
+export { KuiLocalNav } from './local_nav';
+export { KuiLocalNavRow } from './local_nav_row';
+export { KuiLocalNavRowSection } from './local_nav_row_section';
+export { KuiLocalTab } from './local_tab';
+export { KuiLocalTabs } from './local_tabs';
+export { KuiLocalTitle } from './local_title';

ui_framework/components/local_nav/local_nav.js

@@ -0,0 +1,17 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export function KuiLocalNav({ className, children, ...rest }) {
+  const classes = classnames('kuiLocalNav', className);
+  return (
+    <div className={ classes } { ...rest }>
+      { children }
+    </div>
+  );
+}
+
+KuiLocalNav.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};

ui_framework/components/local_nav/local_nav.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiLocalNav } from './local_nav';
+
+test('renders KuiLocalNav', () => {
+  const component = <KuiLocalNav { ...requiredProps }>children</KuiLocalNav>;
+  expect(render(component)).toMatchSnapshot();
+});

ui_framework/components/local_nav/local_nav_row.js

@@ -0,0 +1,24 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export function KuiLocalNavRow({ className, children, isSecondary, ...rest }) {
+  const classes = classnames('kuiLocalNavRow', className, {
+    'kuiLocalNavRow--secondary': isSecondary,
+  });
+  return (
+    <div className={ classes } { ...rest }>
+      { children }
+    </div>
+  );
+}
+
+KuiLocalNavRow.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  isSecondary: PropTypes.bool,
+};
+
+KuiLocalNavRow.defaultProps = {
+  isSecondary: false,
+};

ui_framework/components/local_nav/local_nav_row.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiLocalNavRow } from './local_nav_row';
+
+test('renders KuiLocalNavRow', () => {
+  const component = <KuiLocalNavRow { ...requiredProps }>children</KuiLocalNavRow>;
+  expect(render(component)).toMatchSnapshot();
+});
+
+describe('property isSecondary', () => {
+  test('renders the secondary modifier', () => {
+    const component = <KuiLocalNavRow isSecondary { ...requiredProps }>children</KuiLocalNavRow>;
+    expect(render(component)).toMatchSnapshot();
+  });
+});

ui_framework/components/local_nav/local_nav_row_section.js

@@ -0,0 +1,17 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export function KuiLocalNavRowSection({ className, children, ...rest }) {
+  const classes = classnames('kuiLocalNavRow__section', className);
+  return (
+    <div className={ classes } { ...rest }>
+      { children }
+    </div>
+  );
+}
+
+KuiLocalNavRowSection.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};

ui_framework/components/local_nav/local_nav_row_section.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiLocalNavRowSection } from './local_nav_row_section';
+
+test('renders KuiLocalNavRowSection', () => {
+  const component = <KuiLocalNavRowSection { ...requiredProps }>children</KuiLocalNavRowSection>;
+  expect(render(component)).toMatchSnapshot();
+});

ui_framework/components/local_nav/local_tab.js

@@ -0,0 +1,27 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export function KuiLocalTab({ className, children, isDisabled, isSelected, ...rest }) {
+  const classes = classnames('kuiLocalTab', className, {
+    'kuiLocalTab-isDisabled': isDisabled,
+    'kuiLocalTab-isSelected': isSelected,
+  });
+  return (
+    <a className={ classes } { ...rest }>
+      { children }
+    </a>
+  );
+}
+
+KuiLocalTab.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  isDisabled: PropTypes.bool,
+  isSelected: PropTypes.bool,
+};
+
+KuiLocalTab.defaultProps = {
+  isDisabled: false,
+  isSelected: false,
+};

ui_framework/components/local_nav/local_tab.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiLocalTab } from './local_tab';
+
+test('renders KuiLocalTab', () => {
+  const component = <KuiLocalTab { ...requiredProps }>children</KuiLocalTab>;
+  expect(render(component)).toMatchSnapshot();
+});
+
+describe('property isSelected', () => {
+  test('renders the isSelected modifier', () => {
+    const component = <KuiLocalTab isSelected { ...requiredProps }>children</KuiLocalTab>;
+    expect(render(component)).toMatchSnapshot();
+  });
+});
+
+describe('property isDisabled', () => {
+  test('renders the isDisabled modifier', () => {
+    const component = <KuiLocalTab isDisabled { ...requiredProps }>children</KuiLocalTab>;
+    expect(render(component)).toMatchSnapshot();
+  });
+});

ui_framework/components/local_nav/local_tabs.js

@@ -0,0 +1,17 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export function KuiLocalTabs({ className, children, ...rest }) {
+  const classes = classnames('kuiLocalTabs', className);
+  return (
+    <div className={ classes } { ...rest }>
+      { children }
+    </div>
+  );
+}
+
+KuiLocalTabs.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};

ui_framework/components/local_nav/local_tabs.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiLocalTabs } from './local_tabs';
+
+test('renders KuiLocalTabs', () => {
+  const component = <KuiLocalTabs { ...requiredProps }>children</KuiLocalTabs>;
+  expect(render(component)).toMatchSnapshot();
+});

ui_framework/components/local_nav/local_title.js

@@ -0,0 +1,17 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export function KuiLocalTitle({ className, children, ...rest }) {
+  const classes = classnames('kuiLocalTitle', className);
+  return (
+    <div className={ classes } { ...rest }>
+      { children }
+    </div>
+  );
+}
+
+KuiLocalTitle.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};

ui_framework/components/local_nav/local_title.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiLocalTitle } from './local_title';
+
+test('renders KuiLocalTitle', () => {
+  const component = <KuiLocalTitle { ...requiredProps }>children</KuiLocalTitle>;
+  expect(render(component)).toMatchSnapshot();
+});

ui_framework/doc_site/src/services/routes/routes.js

@@ -146,6 +146,7 @@ const components = [{
 }, {
   name: 'LocalNav',
   component: LocalNavExample,
+  hasReact: true,
 }, {
   name: 'Menu',
   component: MenuExample,

ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.html

@@ -1,38 +0,0 @@
-<div class="kuiLocalNav">
-  <div class="kuiLocalNavRow">
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalBreadcrumbs">
-        <div class="kuiLocalBreadcrumb">
-          <a class="kuiLocalBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="kuiLocalBreadcrumb">
-          <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
-        </div>
-      </div>
-    </div>
-
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalMenu">
-        <div class="kuiLocalMenuItem">
-          New
-        </div>
-
-        <div class="kuiLocalMenuItem">
-          Save
-        </div>
-
-        <div class="kuiLocalMenuItem">
-          Open
-        </div>
-
-        <button class="kuiLocalMenuItem">
-          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-</div>

ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {
+  KuiLocalNav,
+  KuiLocalNavRow,
+  KuiLocalNavRowSection,
+} from '../../../../components';
+
+export function LocalNavWithBreadcrumbs() {
+  return (
+    <KuiLocalNav>
+      <KuiLocalNavRow>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalBreadcrumbs">
+            <div className="kuiLocalBreadcrumb">
+              <a className="kuiLocalBreadcrumb__link" href="#">
+                Discover
+              </a>
+            </div>
+            <div className="kuiLocalBreadcrumb">
+              <span className="kuiLocalBreadcrumb__emphasis">0</span> hits
+            </div>
+          </div>
+        </KuiLocalNavRowSection>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalMenu">
+            <div className="kuiLocalMenuItem">New</div>
+            <div className="kuiLocalMenuItem">Save</div>
+            <div className="kuiLocalMenuItem">Open</div>
+            <button className="kuiLocalMenuItem">
+              <div className="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+              Last 5 minutes
+            </button>
+          </div>
+        </KuiLocalNavRowSection>
+      </KuiLocalNavRow>
+    </KuiLocalNav>
+  );
+}

ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.html

@@ -1,124 +0,0 @@
-<div class="kuiLocalNav">
-  <div class="kuiLocalNavRow">
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalBreadcrumbs">
-        <div class="kuiLocalBreadcrumb">
-          <a class="kuiLocalBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="kuiLocalBreadcrumb">
-          <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
-        </div>
-      </div>
-    </div>
-
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalMenu">
-        <div class="kuiLocalMenuItem kuiLocalMenuItem-isSelected">
-          New
-        </div>
-
-        <div class="kuiLocalMenuItem">
-          Save
-        </div>
-
-        <div class="kuiLocalMenuItem">
-          Open
-        </div>
-
-        <button class="kuiLocalMenuItem">
-          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="kuiLocalDropdown">
-    <!-- Dropdown close button -->
-    <button class="kuiLocalDropdownCloseButton">
-      <span class="fa fa-chevron-circle-up"></span>
-    </button>
-
-    <!-- Title -->
-    <div class="kuiLocalDropdownTitle">Dropdown title</div>
-
-    <!-- Help text -->
-    <div class="kuiLocalDropdownHelpText">
-      Here's some help text to explain the purpose of the dropdown.
-    </div>
-
-    <!-- Warning -->
-    <div class="kuiLocalDropdownWarning">
-      Here's some warning text in case the user has something misconfigured.
-    </div>
-
-    <div class="kuiLocalDropdownSection">
-      <!-- Header -->
-      <div class="kuiLocalDropdownHeader">
-        <div class="kuiLocalDropdownHeader__label">
-          Header for a section of content
-        </div>
-      </div>
-
-       <!-- Input -->
-      <input
-        class="kuiLocalDropdownInput"
-        type="text"
-        placeholder="Input something here"
-      />
-    </div>
-
-    <div class="kuiLocalDropdownSection">
-      <!-- Header -->
-      <div class="kuiLocalDropdownHeader">
-        <div class="kuiLocalDropdownHeader__label">
-          Header for another section of content
-        </div>
-        <div class="kuiLocalDropdownHeader__actions">
-          <a
-            class="kuiLocalDropdownHeader__action"
-            href=""
-          >
-            Action A
-          </a>
-          <a
-            class="kuiLocalDropdownHeader__action"
-            href=""
-          >
-            Action B
-          </a>
-        </div>
-      </div>
-
-      <!-- Input -->
-      <input
-        class="kuiLocalDropdownInput"
-        type="text"
-        readonly
-        value="This is some text inside of a read-only input"
-      />
-
-      <!-- Notes -->
-      <div class="kuiLocalDropdownFormNote">
-        Here are some notes to explain the purpose of this section of the dropdown.
-      </div>
-    </div>
-  </div>
-
-  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
-    <div class="kuiLocalSearch">
-      <input
-        class="kuiLocalSearchInput"
-        type="text"
-        placeholder="Filter..."
-        autocomplete="off"
-      >
-      <button class="kuiLocalSearchButton">
-        <span class="kuiIcon fa-search"></span>
-      </button>
-    </div>
-  </div>
-</div>

ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.js

@@ -0,0 +1,122 @@
+import React from 'react';
+
+import {
+  KuiLocalNav,
+  KuiLocalNavRow,
+  KuiLocalNavRowSection,
+} from '../../../../components';
+
+export function LocalNavWithDropdown() {
+  return (
+    <KuiLocalNav>
+      <KuiLocalNavRow>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalBreadcrumbs">
+            <div className="kuiLocalBreadcrumb">
+              <a className="kuiLocalBreadcrumb__link" href="#">
+                Discover
+              </a>
+            </div>
+            <div className="kuiLocalBreadcrumb">
+              <span className="kuiLocalBreadcrumb__emphasis">0</span> hits
+            </div>
+          </div>
+        </KuiLocalNavRowSection>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalMenu">
+            <div className="kuiLocalMenuItem kuiLocalMenuItem-isSelected">New</div>
+            <div className="kuiLocalMenuItem">Save</div>
+            <div className="kuiLocalMenuItem">Open</div>
+            <button className="kuiLocalMenuItem">
+              <div className="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+              Last 5 minutes
+            </button>
+          </div>
+        </KuiLocalNavRowSection>
+      </KuiLocalNavRow>
+      <div className="kuiLocalDropdown">
+        {/* Dropdown close button */}
+        <button className="kuiLocalDropdownCloseButton">
+          <span className="fa fa-chevron-circle-up"></span>
+        </button>
+
+        {/* Title */}
+        <div className="kuiLocalDropdownTitle">Dropdown title</div>
+
+        {/* Help text */}
+        <div className="kuiLocalDropdownHelpText">
+          Here's some help text to explain the purpose of the dropdown.
+        </div>
+
+        {/* Warning */}
+        <div className="kuiLocalDropdownWarning">
+          Here's some warning text in case the user has something misconfigured.
+        </div>
+
+        <div className="kuiLocalDropdownSection">
+          {/* Header */}
+          <div className="kuiLocalDropdownHeader">
+            <div className="kuiLocalDropdownHeader__label">
+              Header for a section of content
+            </div>
+          </div>
+
+          {/* Input */}
+          <input
+            className="kuiLocalDropdownInput"
+            type="text"
+            placeholder="Input something here"
+          />
+        </div>
+
+        <div className="kuiLocalDropdownSection">
+          {/* Header */}
+          <div className="kuiLocalDropdownHeader">
+            <div className="kuiLocalDropdownHeader__label">
+              Header for another section of content
+            </div>
+            <div className="kuiLocalDropdownHeader__actions">
+              <a
+                className="kuiLocalDropdownHeader__action"
+                href=""
+              >
+                Action A
+              </a>
+              <a
+                className="kuiLocalDropdownHeader__action"
+                href=""
+              >
+                Action B
+              </a>
+            </div>
+          </div>
+
+          <input
+            className="kuiLocalDropdownInput"
+            type="text"
+            readOnly
+            value="This is some text inside of a read-only input"
+          />
+
+          {/* Notes */}
+          <div className="kuiLocalDropdownFormNote">
+            Here are some notes to explain the purpose of this section of the dropdown.
+          </div>
+        </div>
+      </div>
+      <KuiLocalNavRow isSecondary>
+        <div className="kuiLocalSearch">
+          <input
+            className="kuiLocalSearchInput"
+            type="text"
+            placeholder="Filter..."
+            autoComplete="off"
+          />
+          <button className="kuiLocalSearchButton">
+            <span className="kuiIcon fa-search"></span>
+          </button>
+        </div>
+      </KuiLocalNavRow>
+    </KuiLocalNav>
+  );
+}

ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.html

@@ -1,83 +0,0 @@
-<div class="kuiLocalNav">
-  <div class="kuiLocalNavRow">
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalBreadcrumbs">
-        <div class="kuiLocalBreadcrumb">
-          <a class="kuiLocalBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="kuiLocalBreadcrumb">
-          <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
-        </div>
-      </div>
-    </div>
-
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalMenu">
-        <div class="kuiLocalMenuItem kuiLocalMenuItem-isSelected">
-          New
-        </div>
-
-        <div class="kuiLocalMenuItem">
-          Save
-        </div>
-
-        <div class="kuiLocalMenuItem">
-          Open
-        </div>
-
-        <button class="kuiLocalMenuItem">
-          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="kuiLocalDropdown">
-    <!-- Dropdown close button -->
-    <button class="kuiLocalDropdownCloseButton">
-      <span class="fa fa-chevron-circle-up"></span>
-    </button>
-
-    <div class="kuiLocalDropdownPanels">
-      <!-- Left panel -->
-      <div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--left">
-        <!-- Title -->
-        <div class="kuiLocalDropdownTitle">Left panel</div>
-
-        <!-- Help text -->
-        <div class="kuiLocalDropdownHelpText">
-          Here's some help text to explain the purpose of the dropdown.
-        </div>
-      </div>
-
-      <!-- Right panel -->
-      <div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--left">
-        <!-- Title -->
-        <div class="kuiLocalDropdownTitle">Right panel</div>
-
-        <!-- Help text -->
-        <div class="kuiLocalDropdownHelpText">
-          Here's some help text to explain the purpose of the dropdown.
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
-    <div class="kuiLocalSearch">
-      <input
-        class="kuiLocalSearchInput"
-        type="text"
-        placeholder="Filter..."
-        autocomplete="off"
-      >
-      <button class="kuiLocalSearchButton">
-        <span class="kuiIcon fa-search"></span>
-      </button>
-    </div>
-  </div>
-</div>

ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.js

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import {
+  KuiLocalNav,
+  KuiLocalNavRow,
+  KuiLocalNavRowSection,
+} from '../../../../components';
+
+export function LocalNavWithDropdownPanels() {
+  return (
+    <KuiLocalNav>
+      <KuiLocalNavRow>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalBreadcrumbs">
+            <div className="kuiLocalBreadcrumb">
+              <a className="kuiLocalBreadcrumb__link" href="#">
+                Discover
+              </a>
+            </div>
+            <div className="kuiLocalBreadcrumb">
+              <span className="kuiLocalBreadcrumb__emphasis">0</span> hits
+            </div>
+          </div>
+        </KuiLocalNavRowSection>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalMenu">
+            <div className="kuiLocalMenuItem kuiLocalMenuItem-isSelected">New</div>
+            <div className="kuiLocalMenuItem">Save</div>
+            <div className="kuiLocalMenuItem">Open</div>
+            <button className="kuiLocalMenuItem">
+              <div className="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+              Last 5 minutes
+            </button>
+          </div>
+        </KuiLocalNavRowSection>
+      </KuiLocalNavRow>
+      <div className="kuiLocalDropdown">
+        {/* Dropdown close button */}
+        <button className="kuiLocalDropdownCloseButton">
+          <span className="fa fa-chevron-circle-up"></span>
+        </button>
+
+        <div className="kuiLocalDropdownPanels">
+          {/* Left panel */}
+          <div className="kuiLocalDropdownPanel kuiLocalDropdownPanel--left">
+            {/* Title */}
+            <div className="kuiLocalDropdownTitle">Left panel</div>
+
+            {/* Help text */}
+            <div className="kuiLocalDropdownHelpText">
+              Here's some help text to explain the purpose of the dropdown.
+            </div>
+          </div>
+
+          {/* Right panel */}
+          <div className="kuiLocalDropdownPanel kuiLocalDropdownPanel--left">
+            {/* Title */}
+            <div className="kuiLocalDropdownTitle">Right panel</div>
+
+            {/* Help text */}
+            <div className="kuiLocalDropdownHelpText">
+              Here's some help text to explain the purpose of the dropdown.
+            </div>
+          </div>
+        </div>
+      </div>
+      <KuiLocalNavRow isSecondary>
+        <div className="kuiLocalSearch">
+          <input
+            className="kuiLocalSearchInput"
+            type="text"
+            placeholder="Filter..."
+            autoComplete="off"
+          />
+          <button className="kuiLocalSearchButton">
+            <span className="kuiIcon fa-search"></span>
+          </button>
+        </div>
+      </KuiLocalNavRow>
+    </KuiLocalNav>
+  );
+}

ui_framework/doc_site/src/views/local_nav/local_nav_example.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { renderToHtml } from '../../services';
+
 import {
   GuideDemo,
   GuidePage,
@@ -8,104 +10,154 @@ import {
   GuideText,
 } from '../../components';
 
-const simpleHtml = require('./local_nav_simple.html');
-const breadcrumbsHtml = require('./local_nav_breadcrumbs.html');
-const searchHtml = require('./local_nav_search.html');
-const searchErrorHtml = require('./local_nav_search_error.html');
-const menuItemStatesHtml = require('./local_nav_menu_item_states.html');
-const dropdownHtml = require('./local_nav_dropdown.html');
-const dropdownPanelsHtml = require('./local_nav_dropdown_panels.html');
-const tabsHtml = require('./local_nav_tabs.html');
+import { SimpleLocalNav } from './local_nav_simple';
+import simpleLocalNavSource from '!!raw!./local_nav_simple';
+const SimpleLocalNavHtml = renderToHtml(SimpleLocalNav);
+
+import { LocalNavWithBreadcrumbs } from './local_nav_breadcrumbs';
+import localNavWithBreadcrumbsSource from '!!raw!./local_nav_breadcrumbs';
+const localNavWithBreadcrumbsHtml = renderToHtml(LocalNavWithBreadcrumbs);
+
+import { LocalNavWithSearch } from './local_nav_search';
+import localNavWithSearchSource from '!!raw!./local_nav_search';
+const localNavWithSearchHtml = renderToHtml(LocalNavWithSearch);
+
+import { LocalNavWithSearchError } from './local_nav_search_error';
+import localNavWithSearchErrorSource from '!!raw!./local_nav_search_error';
+const localNavWithSearchErrorHtml = renderToHtml(LocalNavWithSearchError);
+
+import { LocalNavWithMenuItemStates } from './local_nav_menu_item_states';
+import localNavWithMenuItemStatesSource from '!!raw!./local_nav_menu_item_states';
+const localNavWithMenuItemStatesHtml = renderToHtml(LocalNavWithMenuItemStates);
+
+import { LocalNavWithDropdown } from './local_nav_dropdown';
+import localNavWithDropdownSource from '!!raw!./local_nav_dropdown';
+const localNavWithDropdownHtml = renderToHtml(LocalNavWithDropdown);
+
+import { LocalNavWithDropdownPanels } from './local_nav_dropdown_panels';
+import localNavWithDropdownPanelsSource from '!!raw!./local_nav_dropdown_panels';
+const localNavWithDropdownPanelsHtml = renderToHtml(LocalNavWithDropdownPanels);
+
+import { LocalNavWithTabs } from './local_nav_tabs';
+import localNavWithTabsSource from '!!raw!./local_nav_tabs';
+const localNavWithTabsHtml = renderToHtml(LocalNavWithTabs);
+
 const datePickerHtml = require('./local_nav_date_picker.html');
 
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Simple"
-      source={[{
-        type: GuideSectionTypes.HTML,
-        code: simpleHtml,
-      }]}
+      source={[
+        {
+          type: GuideSectionTypes.JS,
+          code: simpleLocalNavSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: SimpleLocalNavHtml,
+        },
+      ]}
     >
       <GuideText>
         Here's a simple LocalNav with a Title in the top left corner and Menu in the top right.
       </GuideText>
 
-      <GuideDemo
-        html={simpleHtml}
-      />
+      <GuideDemo>
+        <SimpleLocalNav />
+      </GuideDemo>
 
-      <GuideDemo
-        html={simpleHtml}
-        isDarkTheme={true}
-      />
+      <GuideDemo isDarkTheme={true}>
+        <SimpleLocalNav />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="Breadcrumbs"
-      source={[{
-        type: GuideSectionTypes.HTML,
-        code: breadcrumbsHtml,
-      }]}
+      source={[
+        {
+          type: GuideSectionTypes.JS,
+          code: localNavWithBreadcrumbsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: localNavWithBreadcrumbsHtml,
+        },
+      ]}
     >
       <GuideText>
         You can replace the Title with Breadcrumbs.
       </GuideText>
 
-      <GuideDemo
-        html={breadcrumbsHtml}
-      />
+      <GuideDemo>
+        <LocalNavWithBreadcrumbs />
+      </GuideDemo>
 
-      <GuideDemo
-        html={breadcrumbsHtml}
-        isDarkTheme={true}
-      />
+      <GuideDemo isDarkTheme={true}>
+        <LocalNavWithBreadcrumbs />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="Search"
-      source={[{
-        type: GuideSectionTypes.HTML,
-        code: searchHtml,
-      }]}
+      source={[
+        {
+          type: GuideSectionTypes.JS,
+          code: localNavWithSearchSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: localNavWithSearchHtml,
+        },
+      ]}
     >
       <GuideText>
         You can add a Search component for filtering results.
       </GuideText>
 
-      <GuideDemo
-        html={searchHtml}
-      />
+      <GuideDemo>
+        <LocalNavWithSearch />
+      </GuideDemo>
 
-      <GuideDemo
-        html={searchHtml}
-        isDarkTheme={true}
-      />
+      <GuideDemo isDarkTheme={true}>
+        <LocalNavWithSearch />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="Invalid Search"
-      source={[{
-        type: GuideSectionTypes.HTML,
-        code: searchErrorHtml,
-      }]}
+      source={[
+        {
+          type: GuideSectionTypes.JS,
+          code: localNavWithSearchErrorSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: localNavWithSearchErrorHtml,
+        },
+      ]}
     >
-      <GuideDemo
-        html={searchErrorHtml}
-      />
+      <GuideDemo>
+        <LocalNavWithSearchError />
+      </GuideDemo>
 
-      <GuideDemo
-        html={searchErrorHtml}
-        isDarkTheme={true}
-      />
+      <GuideDemo isDarkTheme={true}>
+        <LocalNavWithSearchError />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="Selected and disabled Menu Item states"
-      source={[{
-        type: GuideSectionTypes.HTML,
-        code: menuItemStatesHtml,
-      }]}
+      source={[
+        {
+          type: GuideSectionTypes.JS,
+          code: localNavWithMenuItemStatesSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: localNavWithMenuItemStatesHtml,
+        },
+      ]}
     >
       <GuideText>
         When the user selects a Menu Item, additional content can be displayed inside of a Dropdown.
@@ -115,77 +167,91 @@ export default props => (
         Menu Items can also be disabled, in which case they become non-interactive.
       </GuideText>
 
-      <GuideDemo
-        html={menuItemStatesHtml}
-      />
+      <GuideDemo>
+        <LocalNavWithMenuItemStates />
+      </GuideDemo>
 
-      <GuideDemo
-        html={menuItemStatesHtml}
-        isDarkTheme={true}
-      />
+      <GuideDemo isDarkTheme={true}>
+        <LocalNavWithMenuItemStates />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="Dropdown"
-      source={[{
-        type: GuideSectionTypes.HTML,
-        code: dropdownHtml,
-      }]}
+      source={[
+        {
+          type: GuideSectionTypes.JS,
+          code: localNavWithDropdownSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: localNavWithDropdownHtml,
+        },
+      ]}
     >
       <GuideText>
         Selecting a Menu Item will commonly result in an open Dropdown.
       </GuideText>
 
-      <GuideDemo
-        html={dropdownHtml}
-      />
+      <GuideDemo>
+        <LocalNavWithDropdown />
+      </GuideDemo>
 
-      <GuideDemo
-        html={dropdownHtml}
-        isDarkTheme={true}
-      />
+      <GuideDemo isDarkTheme={true}>
+        <LocalNavWithDropdown />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="Dropdown panels"
-      source={[{
-        type: GuideSectionTypes.HTML,
-        code: dropdownPanelsHtml,
-      }]}
+      source={[
+        {
+          type: GuideSectionTypes.JS,
+          code: localNavWithDropdownPanelsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: localNavWithDropdownPanelsHtml,
+        },
+      ]}
     >
       <GuideText>
         You can split the Dropdown into side-by-side Panels.
       </GuideText>
 
-      <GuideDemo
-        html={dropdownPanelsHtml}
-      />
+      <GuideDemo>
+        <LocalNavWithDropdownPanels />
+      </GuideDemo>
 
-      <GuideDemo
-        html={dropdownPanelsHtml}
-        isDarkTheme={true}
-      />
+      <GuideDemo isDarkTheme={true}>
+        <LocalNavWithDropdownPanels />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="Tabs"
-      source={[{
-        type: GuideSectionTypes.HTML,
-        code: tabsHtml,
-      }]}
+      source={[
+        {
+          type: GuideSectionTypes.JS,
+          code: localNavWithTabsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: localNavWithTabsHtml,
+        },
+      ]}
     >
       <GuideText>
         You can display Tabs for navigating local content.
       </GuideText>
 
-      <GuideDemo
-        html={tabsHtml}
-      />
+      <GuideDemo>
+        <LocalNavWithTabs />
+      </GuideDemo>
 
-      <GuideDemo
-        html={tabsHtml}
-        isDarkTheme={true}
-      />
+      <GuideDemo isDarkTheme={true}>
+        <LocalNavWithTabs />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection

ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states.html

@@ -1,52 +0,0 @@
-<div class="kuiLocalNav">
-  <div class="kuiLocalNavRow">
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalBreadcrumbs">
-        <div class="kuiLocalBreadcrumb">
-          <a class="kuiLocalBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="kuiLocalBreadcrumb">
-          <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
-        </div>
-      </div>
-    </div>
-
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalMenu">
-        <div class="kuiLocalMenuItem kuiLocalMenuItem-isSelected">
-          New
-        </div>
-
-        <div class="kuiLocalMenuItem">
-          Save
-        </div>
-
-        <div class="kuiLocalMenuItem kuiLocalMenuItem-isDisabled">
-          Open
-        </div>
-
-        <button class="kuiLocalMenuItem">
-          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
-    <div class="kuiLocalSearch">
-      <input
-        class="kuiLocalSearchInput"
-        type="text"
-        placeholder="Filter..."
-        autocomplete="off"
-      >
-      <button class="kuiLocalSearchButton">
-        <span class="kuiIcon fa-search"></span>
-      </button>
-    </div>
-  </div>
-</div>

ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import {
+  KuiLocalNav,
+  KuiLocalNavRow,
+  KuiLocalNavRowSection,
+} from '../../../../components';
+
+export function LocalNavWithMenuItemStates() {
+  return (
+    <KuiLocalNav>
+      <KuiLocalNavRow>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalBreadcrumbs">
+            <div className="kuiLocalBreadcrumb">
+              <a className="kuiLocalBreadcrumb__link" href="#">
+                Discover
+              </a>
+            </div>
+            <div className="kuiLocalBreadcrumb">
+              <span className="kuiLocalBreadcrumb__emphasis">0</span> hits
+            </div>
+          </div>
+        </KuiLocalNavRowSection>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalMenu">
+            <div className="kuiLocalMenuItem kuiLocalMenuItem-isSelected">New</div>
+            <div className="kuiLocalMenuItem">Save</div>
+            <div className="kuiLocalMenuItem kuiLocalMenuItem-isDisabled">Open</div>
+            <button className="kuiLocalMenuItem">
+              <div className="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+              Last 5 minutes
+            </button>
+          </div>
+        </KuiLocalNavRowSection>
+      </KuiLocalNavRow>
+      <KuiLocalNavRow isSecondary>
+        <div className="kuiLocalSearch">
+          <input
+            className="kuiLocalSearchInput"
+            type="text"
+            placeholder="Filter..."
+            autoComplete="off"
+          />
+          <button className="kuiLocalSearchButton">
+            <span className="kuiIcon fa-search"></span>
+          </button>
+        </div>
+      </KuiLocalNavRow>
+    </KuiLocalNav>
+  );
+}

ui_framework/doc_site/src/views/local_nav/local_nav_search.html

@@ -1,75 +0,0 @@
-<div class="kuiLocalNav">
-  <div class="kuiLocalNavRow">
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalBreadcrumbs">
-        <div class="kuiLocalBreadcrumb">
-          <a class="kuiLocalBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="kuiLocalBreadcrumb">
-          <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
-        </div>
-      </div>
-    </div>
-
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalMenu">
-        <button class="kuiLocalMenuItem">
-          New
-        </button>
-
-        <button class="kuiLocalMenuItem">
-          Save
-        </button>
-
-        <button class="kuiLocalMenuItem">
-          Open
-        </button>
-
-        <button class="kuiLocalMenuItem">
-          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
-    <div class="kuiLocalSearch">
-      <div class="kuiLocalSearchAssistedInput">
-        <input
-          style="padding-right: 5.5em"
-          class="kuiLocalSearchInput"
-          type="text"
-          placeholder="Filter..."
-          autocomplete="off"
-        >
-        <div class="kuiLocalSearchAssistedInput__assistance">
-          <p class="kuiText">
-            <a class="kuiLink" href="#">API docs</a>
-          </p>
-        </div>
-      </div>
-
-      <input
-        class="kuiLocalSearchInput kuiLocalSearchInput--secondary"
-        type="text"
-        placeholder="Another input"
-        autocomplete="off"
-        style="width: 150px"
-      >
-
-      <select class="kuiLocalSearchSelect">
-        <option>Alligator</option>
-        <option>Balaclava</option>
-        <option>Castanets</option>
-      </select>
-
-      <button class="kuiLocalSearchButton">
-        <span class="kuiIcon fa-search"></span>
-      </button>
-    </div>
-  </div>
-</div>

ui_framework/doc_site/src/views/local_nav/local_nav_search.js

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import {
+  KuiLocalNav,
+  KuiLocalNavRow,
+  KuiLocalNavRowSection,
+} from '../../../../components';
+
+export function LocalNavWithSearch() {
+  return (
+    <KuiLocalNav>
+      <KuiLocalNavRow>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalBreadcrumbs">
+            <div className="kuiLocalBreadcrumb">
+              <a className="kuiLocalBreadcrumb__link" href="#">
+                Discover
+              </a>
+            </div>
+            <div className="kuiLocalBreadcrumb">
+              <span className="kuiLocalBreadcrumb__emphasis">0</span> hits
+            </div>
+          </div>
+        </KuiLocalNavRowSection>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalMenu">
+            <div className="kuiLocalMenuItem">New</div>
+            <div className="kuiLocalMenuItem">Save</div>
+            <div className="kuiLocalMenuItem">Open</div>
+            <button className="kuiLocalMenuItem">
+              <div className="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+              Last 5 minutes
+            </button>
+          </div>
+        </KuiLocalNavRowSection>
+      </KuiLocalNavRow>
+      <KuiLocalNavRow isSecondary>
+        <div className="kuiLocalSearch">
+          <div className="kuiLocalSearchAssistedInput">
+            <input
+              style={{ paddingRight: '5.5em' }}
+              className="kuiLocalSearchInput"
+              type="text"
+              placeholder="Filter..."
+              autoComplete="off"
+            />
+            <div className="kuiLocalSearchAssistedInput__assistance">
+              <p className="kuiText">
+                <a className="kuiLink" href="#">API docs</a>
+              </p>
+            </div>
+          </div>
+
+          <input
+            className="kuiLocalSearchInput kuiLocalSearchInput--secondary"
+            type="text"
+            placeholder="Another input"
+            autoComplete="off"
+            style={{ width: 150 }}
+          />
+
+          <select className="kuiLocalSearchSelect">
+            <option>Alligator</option>
+            <option>Balaclava</option>
+            <option>Castanets</option>
+          </select>
+
+          <button className="kuiLocalSearchButton">
+            <span className="kuiIcon fa-search"></span>
+          </button>
+        </div>
+      </KuiLocalNavRow>
+    </KuiLocalNav>
+  );
+}

ui_framework/doc_site/src/views/local_nav/local_nav_search_error.html

@@ -1,52 +0,0 @@
-<div class="kuiLocalNav">
-  <div class="kuiLocalNavRow">
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalBreadcrumbs">
-        <div class="kuiLocalBreadcrumb">
-          <a class="kuiLocalBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="kuiLocalBreadcrumb">
-          <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
-        </div>
-      </div>
-    </div>
-
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalMenu">
-        <button class="kuiLocalMenuItem">
-          New
-        </button>
-
-        <button class="kuiLocalMenuItem">
-          Save
-        </button>
-
-        <button class="kuiLocalMenuItem">
-          Open
-        </button>
-
-        <button class="kuiLocalMenuItem">
-          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
-    <div class="kuiLocalSearch">
-      <input
-        class="kuiLocalSearchInput kuiLocalSearchInput-isInvalid"
-        type="text"
-        placeholder="Filter..."
-        autocomplete="off"
-      >
-      <button class="kuiLocalSearchButton">
-        <span class="kuiIcon fa-search"></span>
-      </button>
-    </div>
-  </div>
-</div>

ui_framework/doc_site/src/views/local_nav/local_nav_search_error.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import {
+  KuiLocalNav,
+  KuiLocalNavRow,
+  KuiLocalNavRowSection,
+} from '../../../../components';
+
+export function LocalNavWithSearchError() {
+  return (
+    <KuiLocalNav>
+      <KuiLocalNavRow>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalBreadcrumbs">
+            <div className="kuiLocalBreadcrumb">
+              <a className="kuiLocalBreadcrumb__link" href="#">
+                Discover
+              </a>
+            </div>
+            <div className="kuiLocalBreadcrumb">
+              <span className="kuiLocalBreadcrumb__emphasis">0</span> hits
+            </div>
+          </div>
+        </KuiLocalNavRowSection>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalMenu">
+            <div className="kuiLocalMenuItem">New</div>
+            <div className="kuiLocalMenuItem">Save</div>
+            <div className="kuiLocalMenuItem">Open</div>
+            <button className="kuiLocalMenuItem">
+              <div className="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+              Last 5 minutes
+            </button>
+          </div>
+        </KuiLocalNavRowSection>
+      </KuiLocalNavRow>
+      <KuiLocalNavRow isSecondary>
+        <div className="kuiLocalSearch">
+          <input
+            className="kuiLocalSearchInput kuiLocalSearchInput-isInvalid"
+            type="text"
+            placeholder="Filter..."
+            autoComplete="off"
+          />
+          <button className="kuiLocalSearchButton">
+            <span className="kuiIcon fa-search"></span>
+          </button>
+        </div>
+      </KuiLocalNavRow>
+    </KuiLocalNav>
+  );
+}

ui_framework/doc_site/src/views/local_nav/local_nav_simple.html

@@ -1,30 +0,0 @@
-<div class="kuiLocalNav">
-  <div class="kuiLocalNavRow">
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalTitle">
-        Untitled Document
-      </div>
-    </div>
-
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalMenu">
-        <div class="kuiLocalMenuItem">
-          New
-        </div>
-
-        <div class="kuiLocalMenuItem">
-          Save
-        </div>
-
-        <div class="kuiLocalMenuItem">
-          Open
-        </div>
-
-        <button class="kuiLocalMenuItem">
-          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-</div>

ui_framework/doc_site/src/views/local_nav/local_nav_simple.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {
+  KuiLocalNav,
+  KuiLocalNavRow,
+  KuiLocalNavRowSection,
+  KuiLocalTitle,
+} from '../../../../components';
+
+export function SimpleLocalNav() {
+  return (
+    <KuiLocalNav>
+      <KuiLocalNavRow>
+        <KuiLocalNavRowSection>
+          <KuiLocalTitle>
+            Untitled Document
+          </KuiLocalTitle>
+        </KuiLocalNavRowSection>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalMenu">
+            <div className="kuiLocalMenuItem">New</div>
+            <div className="kuiLocalMenuItem">Save</div>
+            <div className="kuiLocalMenuItem">Open</div>
+            <button className="kuiLocalMenuItem">
+              <div className="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+              Last 5 minutes
+            </button>
+          </div>
+        </KuiLocalNavRowSection>
+      </KuiLocalNavRow>
+    </KuiLocalNav>
+  );
+}

ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html

@@ -1,54 +0,0 @@
-<div class="kuiLocalNav">
-  <div class="kuiLocalNavRow">
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalBreadcrumbs">
-        <div class="kuiLocalBreadcrumb">
-          <a class="kuiLocalBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="kuiLocalBreadcrumb">
-          <span class="kuiLocalBreadcrumb__emphasis">0</span> <span>hits</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="kuiLocalNavRow__section">
-      <div class="kuiLocalMenu">
-        <button class="kuiLocalMenuItem">
-          New
-        </button>
-
-        <button class="kuiLocalMenuItem">
-          Save
-        </button>
-
-        <button class="kuiLocalMenuItem">
-          Open
-        </button>
-
-        <button class="kuiLocalMenuItem">
-          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
-    <div class="kuiLocalTabs">
-      <a class="kuiLocalTab kuiLocalTab-isSelected" href="#">
-        Overview
-      </a>
-
-      <a class="kuiLocalTab" href="#">
-        Your Documents
-      </a>
-
-      <a class="kuiLocalTab kuiLocalTab-isDisabled" href="#">
-        Another Tab
-      </a>
-    </div>
-  </div>
-</div>

ui_framework/doc_site/src/views/local_nav/local_nav_tabs.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import {
+  KuiLocalNav,
+  KuiLocalNavRow,
+  KuiLocalNavRowSection,
+  KuiLocalTab,
+  KuiLocalTabs,
+} from '../../../../components';
+
+export function LocalNavWithTabs() {
+  return (
+    <KuiLocalNav>
+      <KuiLocalNavRow>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalBreadcrumbs">
+            <div className="kuiLocalBreadcrumb">
+              <a className="kuiLocalBreadcrumb__link" href="#">
+                Discover
+              </a>
+            </div>
+            <div className="kuiLocalBreadcrumb">
+              <span className="kuiLocalBreadcrumb__emphasis">0</span> hits
+            </div>
+          </div>
+        </KuiLocalNavRowSection>
+        <KuiLocalNavRowSection>
+          <div className="kuiLocalMenu">
+            <div className="kuiLocalMenuItem">New</div>
+            <div className="kuiLocalMenuItem">Save</div>
+            <div className="kuiLocalMenuItem">Open</div>
+            <button className="kuiLocalMenuItem">
+              <div className="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+              Last 5 minutes
+            </button>
+          </div>
+        </KuiLocalNavRowSection>
+      </KuiLocalNavRow>
+      <KuiLocalNavRow isSecondary>
+        <KuiLocalTabs>
+          <KuiLocalTab href="#" isSelected>
+            Overview
+          </KuiLocalTab>
+          <KuiLocalTab href="#">
+            Your Documents
+          </KuiLocalTab>
+          <KuiLocalTab href="#" isDisabled>
+            Another Tab
+          </KuiLocalTab>
+        </KuiLocalTabs>
+      </KuiLocalNavRow>
+    </KuiLocalNav>
+  );
+}