From 04d6c2c82b2fb6b71a25aa521435a4251a8a49b0 Mon Sep 17 00:00:00 2001
From: Rory Hunter <roryhunter2@gmail.com>
Date: Wed, 17 Jan 2018 10:37:22 +0000
Subject: [PATCH 1/3] Allow custom components to be rendered in EuiSideNav

---
 .../__snapshots__/side_nav.test.js.snap       | 85 ++++++++++++++++++-
 src/components/side_nav/side_nav.js           |  8 ++
 src/components/side_nav/side_nav.test.js      | 26 +++++-
 src/components/side_nav/side_nav_item.js      | 57 +++++++------
 4 files changed, 147 insertions(+), 29 deletions(-)

diff --git a/src/components/side_nav/__snapshots__/side_nav.test.js.snap b/src/components/side_nav/__snapshots__/side_nav.test.js.snap
index 3b22e955384..6d32e1b6cb5 100644
--- a/src/components/side_nav/__snapshots__/side_nav.test.js.snap
+++ b/src/components/side_nav/__snapshots__/side_nav.test.js.snap
@@ -241,7 +241,90 @@ exports[`EuiSideNav items is rendered 1`] = `
 </nav>
 `;
 
-exports[`EuiSideNav items renders items with are links 1`] = `
+exports[`EuiSideNav items renders items using a custom component 1`] = `
+<nav
+  class="euiSideNav"
+>
+  <button
+    class="euiSideNav__mobileToggle euiLink"
+    type="button"
+  >
+    <span
+      class="euiSideNav__mobileWrap"
+    >
+      <span
+        class="euiSideNav__mobileTitle"
+      />
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiSideNav__mobileIcon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xlink="http://www.w3.org/1999/xlink"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <path
+            d="M2 4V2h2v2H2zm5 0V2h2v2H7zm5 0V2h2v2h-2zM2 9V7h2v2H2zm5 0V7h2v2H7zm5 0V7h2v2h-2zM2 14v-2h2v2H2zm5 0v-2h2v2H7zm5 0v-2h2v2h-2z"
+            id="apps-a"
+          />
+        </defs>
+        <use
+          href="#apps-a"
+        />
+      </svg>
+    </span>
+  </button>
+  <div
+    class="euiSideNav__content"
+  >
+    <div
+      class="euiSideNavItem euiSideNavItem--root"
+    >
+      <div
+        class="euiSideNavItemButton"
+        data-test-id="my-custom-element"
+        href="http://www.elastic.co"
+      >
+        <span
+          class="euiSideNavItemButton__content"
+        >
+          <span
+            class="euiSideNavItemButton__label"
+          >
+            A
+          </span>
+        </span>
+      </div>
+      <div
+        class="euiSideNavItem__items"
+      >
+        <div
+          class="euiSideNavItem euiSideNavItem--trunk"
+        >
+          <div
+            class="euiSideNavItemButton"
+            data-test-id="my-custom-element"
+          >
+            <span
+              class="euiSideNavItemButton__content"
+            >
+              <span
+                class="euiSideNavItemButton__label"
+              >
+                B
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>
+`;
+
+exports[`EuiSideNav items renders items which are links 1`] = `
 <nav
   class="euiSideNav"
 >
diff --git a/src/components/side_nav/side_nav.js b/src/components/side_nav/side_nav.js
index 63339254f9a..f57a83c9926 100644
--- a/src/components/side_nav/side_nav.js
+++ b/src/components/side_nav/side_nav.js
@@ -26,6 +26,8 @@ export class EuiSideNav extends Component {
   };
 
   renderTree = (items, depth = 0) => {
+    const { component } = this.props;
+
     return items.map((item) => {
       const {
         id,
@@ -35,6 +37,7 @@ export class EuiSideNav extends Component {
         icon,
         onClick,
         href,
+        ...rest
       } = item;
 
       // Root items are always open.
@@ -57,6 +60,8 @@ export class EuiSideNav extends Component {
           items={renderedItems}
           key={id}
           depth={depth}
+          component={component}
+          {...rest}
         >
           {name}
         </EuiSideNavItem>
@@ -71,6 +76,8 @@ export class EuiSideNav extends Component {
       toggleOpenOnMobile,
       isOpenOnMobile,
       mobileTitle,
+      // Extract this one out so it isn't passed to <nav>
+      component, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
@@ -125,6 +132,7 @@ EuiSideNav.propTypes = {
   isOpenOnMobile: PropTypes.bool,
   mobileTitle: PropTypes.node,
   items: PropTypes.array,
+  component: PropTypes.func,
 };
 
 EuiSideNav.defaultProps = {
diff --git a/src/components/side_nav/side_nav.test.js b/src/components/side_nav/side_nav.test.js
index 6c06430ca3c..15487ef0043 100644
--- a/src/components/side_nav/side_nav.test.js
+++ b/src/components/side_nav/side_nav.test.js
@@ -63,7 +63,7 @@ describe('EuiSideNav', () => {
         .toMatchSnapshot();
     });
 
-    test('renders items with are links', () => {
+    test('renders items which are links', () => {
       const sideNav = [{
         name: 'A',
         id: 0,
@@ -92,6 +92,30 @@ describe('EuiSideNav', () => {
         .toMatchSnapshot();
     });
 
+    test('renders items using a custom component', () => {
+      const sideNav = [{
+        name: 'A',
+        id: 0,
+        href: 'http://www.elastic.co',
+        items: [{
+          name: 'B',
+          id: 1,
+        }],
+      }];
+
+      const MyNavButton = ({ href, className, children }) => (
+        <div data-test-id="my-custom-element" href={href} className={className}>
+          {children}
+        </div>);
+
+      const component = render(
+        <EuiSideNav items={sideNav} component={MyNavButton} />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
     test('renders selected item and automatically opens parent items', () => {
       const sideNav = [{
         name: 'A',
diff --git a/src/components/side_nav/side_nav_item.js b/src/components/side_nav/side_nav_item.js
index 8d63b00a98a..ea42c70ec62 100644
--- a/src/components/side_nav/side_nav_item.js
+++ b/src/components/side_nav/side_nav_item.js
@@ -8,6 +8,30 @@ import {
   EuiIcon,
 } from '../icon';
 
+const EuiSideNavButton = ({ href, onClick, className, children, ...rest }) => {
+  if (href) {
+    return (
+      <a
+        className={className}
+        href={href}
+        {...rest}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      className={className}
+      onClick={onClick}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
 export const EuiSideNavItem = ({
   isOpen,
   isSelected,
@@ -18,6 +42,7 @@ export const EuiSideNavItem = ({
   items,
   children,
   depth,
+  component: ButtonComponent = EuiSideNavButton,
   ...rest,
 }) => {
   let childItems;
@@ -60,9 +85,7 @@ export const EuiSideNavItem = ({
     <span className="euiSideNavItemButton__content">
       {buttonIcon}
 
-      <span
-        className="euiSideNavItemButton__label"
-      >
+      <span className="euiSideNavItemButton__label">
         {children}
       </span>
 
@@ -70,31 +93,11 @@ export const EuiSideNavItem = ({
     </span>
   );
 
-  let button;
-
-  if (href) {
-    button = (
-      <a
-        className={buttonClasses}
-        href={href}
-      >
-        {buttonContent}
-      </a>
-    );
-  } else {
-    button = (
-      <button
-        className={buttonClasses}
-        onClick={onClick}
-      >
-        {buttonContent}
-      </button>
-    );
-  }
-
   return (
-    <div className={classes} {...rest}>
-      {button}
+    <div className={classes}>
+      <ButtonComponent href={href} onClick={onClick} className={buttonClasses} {...rest}>
+        {buttonContent}
+      </ButtonComponent>
       {childItems}
     </div>
   );

From 64097179ec80793b0661e94c7b03e9c6f334328b Mon Sep 17 00:00:00 2001
From: Rory Hunter <roryhunter2@gmail.com>
Date: Wed, 17 Jan 2018 10:47:23 +0000
Subject: [PATCH 2/3] Update changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7dd3f984830..448b19d2f32 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.13`.
+- In `EuiSideNav`, allow a component prop to be passed that will be used to render the individual items in the navigation. This makes interoperability with e.g. `react-router` easier. [#310](https://github.com/elastic/eui/pull/310)
 
 # [`0.0.13`](https://github.com/elastic/eui/tree/v0.0.13)
 

From ffaecf78c58bcf15e054c4e2a7700684af2f22c0 Mon Sep 17 00:00:00 2001
From: Rory Hunter <roryhunter2@gmail.com>
Date: Thu, 18 Jan 2018 11:30:59 +0000
Subject: [PATCH 3/3] Switch to using a callback instead of a component to
 render side nav items

---
 CHANGELOG.md                                           |  2 +-
 .../side_nav/__snapshots__/side_nav.test.js.snap       | 10 +++++-----
 src/components/side_nav/side_nav.js                    |  8 ++++----
 src/components/side_nav/side_nav.test.js               | 10 +++++-----
 src/components/side_nav/side_nav_item.js               |  9 ++++-----
 5 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 448b19d2f32..72b38b6e37d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-- In `EuiSideNav`, allow a component prop to be passed that will be used to render the individual items in the navigation. This makes interoperability with e.g. `react-router` easier. [#310](https://github.com/elastic/eui/pull/310)
+- In `EuiSideNav`, allow a callback to be passed that renders the individual items in the navigation. This makes interoperability with e.g. `react-router` easier. [#310](https://github.com/elastic/eui/pull/310)
 
 # [`0.0.13`](https://github.com/elastic/eui/tree/v0.0.13)
 
diff --git a/src/components/side_nav/__snapshots__/side_nav.test.js.snap b/src/components/side_nav/__snapshots__/side_nav.test.js.snap
index 6d32e1b6cb5..93cf92eb247 100644
--- a/src/components/side_nav/__snapshots__/side_nav.test.js.snap
+++ b/src/components/side_nav/__snapshots__/side_nav.test.js.snap
@@ -241,7 +241,7 @@ exports[`EuiSideNav items is rendered 1`] = `
 </nav>
 `;
 
-exports[`EuiSideNav items renders items using a custom component 1`] = `
+exports[`EuiSideNav items renders items using a specified callback 1`] = `
 <nav
   class="euiSideNav"
 >
@@ -282,7 +282,7 @@ exports[`EuiSideNav items renders items using a custom component 1`] = `
     <div
       class="euiSideNavItem euiSideNavItem--root"
     >
-      <div
+      <a
         class="euiSideNavItemButton"
         data-test-id="my-custom-element"
         href="http://www.elastic.co"
@@ -296,14 +296,14 @@ exports[`EuiSideNav items renders items using a custom component 1`] = `
             A
           </span>
         </span>
-      </div>
+      </a>
       <div
         class="euiSideNavItem__items"
       >
         <div
           class="euiSideNavItem euiSideNavItem--trunk"
         >
-          <div
+          <a
             class="euiSideNavItemButton"
             data-test-id="my-custom-element"
           >
@@ -316,7 +316,7 @@ exports[`EuiSideNav items renders items using a custom component 1`] = `
                 B
               </span>
             </span>
-          </div>
+          </a>
         </div>
       </div>
     </div>
diff --git a/src/components/side_nav/side_nav.js b/src/components/side_nav/side_nav.js
index f57a83c9926..286705aecbc 100644
--- a/src/components/side_nav/side_nav.js
+++ b/src/components/side_nav/side_nav.js
@@ -26,7 +26,7 @@ export class EuiSideNav extends Component {
   };
 
   renderTree = (items, depth = 0) => {
-    const { component } = this.props;
+    const { renderItem } = this.props;
 
     return items.map((item) => {
       const {
@@ -60,7 +60,7 @@ export class EuiSideNav extends Component {
           items={renderedItems}
           key={id}
           depth={depth}
-          component={component}
+          renderItem={renderItem}
           {...rest}
         >
           {name}
@@ -77,7 +77,7 @@ export class EuiSideNav extends Component {
       isOpenOnMobile,
       mobileTitle,
       // Extract this one out so it isn't passed to <nav>
-      component, // eslint-disable-line no-unused-vars
+      renderItem, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
@@ -132,7 +132,7 @@ EuiSideNav.propTypes = {
   isOpenOnMobile: PropTypes.bool,
   mobileTitle: PropTypes.node,
   items: PropTypes.array,
-  component: PropTypes.func,
+  renderItem: PropTypes.func,
 };
 
 EuiSideNav.defaultProps = {
diff --git a/src/components/side_nav/side_nav.test.js b/src/components/side_nav/side_nav.test.js
index 15487ef0043..0639c14eb8e 100644
--- a/src/components/side_nav/side_nav.test.js
+++ b/src/components/side_nav/side_nav.test.js
@@ -92,7 +92,7 @@ describe('EuiSideNav', () => {
         .toMatchSnapshot();
     });
 
-    test('renders items using a custom component', () => {
+    test('renders items using a specified callback', () => {
       const sideNav = [{
         name: 'A',
         id: 0,
@@ -103,13 +103,13 @@ describe('EuiSideNav', () => {
         }],
       }];
 
-      const MyNavButton = ({ href, className, children }) => (
-        <div data-test-id="my-custom-element" href={href} className={className}>
+      const renderItem = ({ href, className, children }) => (
+        <a data-test-id="my-custom-element" href={href} className={className}>
           {children}
-        </div>);
+        </a>);
 
       const component = render(
-        <EuiSideNav items={sideNav} component={MyNavButton} />
+        <EuiSideNav items={sideNav} renderItem={renderItem} />
       );
 
       expect(component)
diff --git a/src/components/side_nav/side_nav_item.js b/src/components/side_nav/side_nav_item.js
index ea42c70ec62..0d35f695503 100644
--- a/src/components/side_nav/side_nav_item.js
+++ b/src/components/side_nav/side_nav_item.js
@@ -8,7 +8,7 @@ import {
   EuiIcon,
 } from '../icon';
 
-const EuiSideNavButton = ({ href, onClick, className, children, ...rest }) => {
+const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => {
   if (href) {
     return (
       <a
@@ -42,7 +42,7 @@ export const EuiSideNavItem = ({
   items,
   children,
   depth,
-  component: ButtonComponent = EuiSideNavButton,
+  renderItem = defaultRenderItem,
   ...rest,
 }) => {
   let childItems;
@@ -95,9 +95,7 @@ export const EuiSideNavItem = ({
 
   return (
     <div className={classes}>
-      <ButtonComponent href={href} onClick={onClick} className={buttonClasses} {...rest}>
-        {buttonContent}
-      </ButtonComponent>
+      {renderItem({ href, onClick, className: buttonClasses, children: buttonContent, ...rest })}
       {childItems}
     </div>
   );
@@ -113,4 +111,5 @@ EuiSideNavItem.propTypes = {
   items: PropTypes.node,
   children: PropTypes.node,
   depth: PropTypes.number,
+  renderItem: PropTypes.func,
 };