Convert SideNav to Typescript (#2818)

* Convert SideNav to Typescript

* up changelog

* PR updates

* Update props and nap

* Add proper typing for EuiSubNav's renderItem

* Small type cleanup

* PR feedback

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Added optional `key` attribute to `EuiContextMenu` items and relaxed `name` attribute to allow any React node ([#2817](https://github.com/elastic/eui/pull/2817))
 - Converted `EuiColorPicker` color conversion functions to `chroma-js` methods ([#2805](https://github.com/elastic/eui/pull/2805))
 - Added `direction` parameter to `euiPaletteColorBlind()` for specifiying lighter or darker (or both) alternates ([#2822](https://github.com/elastic/eui/pull/2822))
+- Converted `EuiSideNav` to TypeScript ([#2818](https://github.com/elastic/eui/issues/2818))
 
 **Bug fixes**
 

src-docs/src/views/side_nav/props.tsx

@@ -0,0 +1,6 @@
+import React, { FunctionComponent } from 'react';
+import { EuiSideNavItemType } from '../../../../src/components/side_nav/side_nav_types';
+
+export const SideNavItem: FunctionComponent<EuiSideNavItemType<any>> = () => (
+  <div />
+);

src-docs/src/views/side_nav/side_nav_example.js

@@ -18,6 +18,8 @@ import SideNavForceOpen from './side_nav_force_open';
 const sideNavForceOpenSource = require('!!raw-loader!./side_nav_force_open');
 const sideNavForceOpenHtml = renderToHtml(SideNavForceOpen);
 
+import { SideNavItem } from './props';
+
 export const SideNavExample = {
   title: 'Side Nav',
   sections: [
@@ -48,7 +50,7 @@ export const SideNavExample = {
           </p>
         </div>
       ),
-      props: { EuiSideNav },
+      props: { EuiSideNav, EuiSideNavItem: SideNavItem },
       demo: <SideNav />,
     },
     {

src/components/side_nav/__snapshots__/side_nav_item.test.js.snap → src/components/side_nav/__snapshots__/side_nav_item.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`EuiSideNavItem is rendered 1`] = `
 <div
-  class="euiSideNavItem"
+  class="euiSideNavItem euiSideNavItem--root"
 >
   <div
     class="euiSideNavItemButton"
@@ -26,7 +26,7 @@ exports[`EuiSideNavItem is rendered 1`] = `
 
 exports[`EuiSideNavItem isSelected defaults to false 1`] = `
 <div
-  class="euiSideNavItem"
+  class="euiSideNavItem euiSideNavItem--root"
 >
   <div
     class="euiSideNavItemButton"
@@ -46,7 +46,7 @@ exports[`EuiSideNavItem isSelected defaults to false 1`] = `
 
 exports[`EuiSideNavItem isSelected is rendered when specified as true 1`] = `
 <div
-  class="euiSideNavItem"
+  class="euiSideNavItem euiSideNavItem--root"
 >
   <div
     class="euiSideNavItemButton euiSideNavItemButton-isSelected"
@@ -66,7 +66,7 @@ exports[`EuiSideNavItem isSelected is rendered when specified as true 1`] = `
 
 exports[`EuiSideNavItem preserves child's classes 1`] = `
 <div
-  class="euiSideNavItem"
+  class="euiSideNavItem euiSideNavItem--root"
 >
   <div
     class="euiSideNavItemButton"

src/components/side_nav/index.js → src/components/side_nav/index.ts

@@ -1 +1,3 @@
 export { EuiSideNav } from './side_nav';
+
+export * from './side_nav_types';

src/components/side_nav/side_nav.test.js → src/components/side_nav/side_nav.test.tsx

@@ -3,6 +3,7 @@ import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
 import { EuiSideNav } from './side_nav';
+import { RenderItem } from './side_nav_item';
 
 describe('EuiSideNav', () => {
   test('is rendered', () => {
@@ -109,7 +110,7 @@ describe('EuiSideNav', () => {
           },
         ];
 
-        const renderItem = ({ href, className, children }) => (
+        const renderItem: RenderItem<{}> = ({ href, className, children }) => (
           <a data-test-id="my-custom-element" href={href} className={className}>
             {children}
           </a>