[UI Framework] Reactify menu (#12135)

* Reactify ui_framework/components/menu

ui_framework/components/index.js

@@ -33,3 +33,8 @@ export {
   KuiPager,
   KuiPagerButtonGroup
 } from './pager';
+
+export {
+  KuiMenu,
+  KuiMenuItem
+} from './menu';

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`contained prop 1`] = `
+<ul
+  class="kuiMenu kuiMenu--contained"
+>
+  children
+</ul>
+`;
+
+exports[`renders KuiMenu 1`] = `
+<ul
+  aria-label="aria-label"
+  class="kuiMenu testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</ul>
+`;

ui_framework/components/menu/__snapshots__/menu_item.test.js.snap

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

ui_framework/components/menu/index.js

@@ -0,0 +1,2 @@
+export { KuiMenu } from './menu';
+export { KuiMenuItem } from './menu_item';

ui_framework/components/menu/menu.js

@@ -0,0 +1,30 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+export const KuiMenu = ({
+  contained,
+  className,
+  children,
+  ...rest
+}) => {
+  const classes = classNames('kuiMenu', className, {
+    'kuiMenu--contained': contained
+  });
+
+  return (
+    <ul
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </ul>
+  );
+};
+
+KuiMenu.propTypes = {
+  contained: PropTypes.bool,
+  className: PropTypes.string,
+  children:  PropTypes.node
+};

ui_framework/components/menu/menu.test.js

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

ui_framework/components/menu/menu_item.js

@@ -0,0 +1,25 @@
+import React, {
+  PropTypes,
+} from 'react';
+
+import classNames from 'classnames';
+
+export const KuiMenuItem = ({
+  className,
+  children,
+  ...rest
+}) => {
+  return (
+    <li
+      className={classNames('kuiMenuItem', className)}
+      {...rest}
+    >
+      {children}
+    </li>
+  );
+};
+
+KuiMenuItem.propTypes = {
+  className: React.PropTypes.string,
+  children:  PropTypes.node
+};

ui_framework/components/menu/menu_item.test.js

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

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

@@ -173,6 +173,7 @@ const components = [{
 }, {
   name: 'Menu',
   component: MenuExample,
+  hasReact: true,
 }, {
   name: 'MenuButton',
   component: MenuButtonExample,

ui_framework/doc_site/src/views/menu/menu.html

@@ -1,13 +0,0 @@
-<ul class="kuiMenu">
-  <li class="kuiMenuItem">
-    <p class="kuiText">Item A</p>
-  </li>
-
-  <li class="kuiMenuItem">
-    <p class="kuiText">Item B</p>
-  </li>
-
-  <li class="kuiMenuItem">
-    <p class="kuiText">Item C</p>
-  </li>
-</ul>

ui_framework/doc_site/src/views/menu/menu.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {
+  KuiMenu,
+  KuiMenuItem,
+} from '../../../../components';
+
+export default () => (
+  <div>
+    <KuiMenu>
+      <KuiMenuItem>
+        <p className="kuiText">Item A</p>
+      </KuiMenuItem>
+
+      <KuiMenuItem>
+        <p className="kuiText">Item B</p>
+      </KuiMenuItem>
+
+      <KuiMenuItem>
+        <p className="kuiText">Item C</p>
+      </KuiMenuItem>
+    </KuiMenu>
+  </div>
+);

ui_framework/doc_site/src/views/menu/menu_contained.html

@@ -1,13 +0,0 @@
-<ul class="kuiMenu kuiMenu--contained">
-  <li class="kuiMenuItem">
-    <p class="kuiText">Item A</p>
-  </li>
-
-  <li class="kuiMenuItem">
-    <p class="kuiText">Item B</p>
-  </li>
-
-  <li class="kuiMenuItem">
-    <p class="kuiText">Item C</p>
-  </li>
-</ul>

ui_framework/doc_site/src/views/menu/menu_contained.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {
+  KuiMenu,
+  KuiMenuItem,
+} from '../../../../components';
+
+export default () => (
+  <div>
+    <KuiMenu contained>
+      <KuiMenuItem>
+        <p className="kuiText">Item A</p>
+      </KuiMenuItem>
+
+      <KuiMenuItem>
+        <p className="kuiText">Item B</p>
+      </KuiMenuItem>
+
+      <KuiMenuItem>
+        <p className="kuiText">Item C</p>
+      </KuiMenuItem>
+    </KuiMenu>
+  </div>
+);

ui_framework/doc_site/src/views/menu/menu_example.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { renderToHtml } from '../../services';
+
 import {
   GuideDemo,
   GuidePage,
@@ -7,33 +9,44 @@ import {
   GuideSectionTypes,
 } from '../../components';
 
-const menuHtml = require('./menu.html');
-const menuContainedHtml = require('./menu_contained.html');
+import Menu from './menu';
+const menuSource = require('!!raw!./menu');
+const menuHtml = renderToHtml(Menu);
+
+import MenuContained from './menu_contained';
+const menuContainedSource = require('!!raw!./menu_contained');
+const menuContainedHtml = renderToHtml(MenuContained);
 
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Menu"
       source={[{
+        type: GuideSectionTypes.JS,
+        code: menuSource,
+      }, {
         type: GuideSectionTypes.HTML,
         code: menuHtml,
       }]}
     >
-      <GuideDemo
-        html={menuHtml}
-      />
+      <GuideDemo>
+        <Menu />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="Menu, contained"
       source={[{
+        type: GuideSectionTypes.JS,
+        code: menuContainedSource,
+      }, {
         type: GuideSectionTypes.HTML,
         code: menuContainedHtml,
       }]}
     >
-      <GuideDemo
-        html={menuContainedHtml}
-      />
+      <GuideDemo>
+        <MenuContained />
+      </GuideDemo>
     </GuideSection>
   </GuidePage>
 );