[UI Framework] Reactify actionItem (#12142)

* issue 12137 Reactify ui_framework/components/action_item
* use KuiMenu and KuiMenuItem in the doc_site view

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

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

ui_framework/components/action_item/action_item.js

@@ -0,0 +1,13 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+export const KuiActionItem = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiActionItem', className);
+  return <div className={classes} {...rest} >{children}</div>;
+};
+KuiActionItem.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};

ui_framework/components/action_item/action_item.test.js

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

ui_framework/components/action_item/index.js

@@ -0,0 +1 @@
+export { KuiActionItem } from './action_item';

ui_framework/components/index.js

@@ -1,3 +1,5 @@
+export { KuiActionItem } from './action_item';
+
 export {
   KuiKeyboardAccessible,
 } from './accessibility';

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

@@ -116,6 +116,7 @@ const components = [{
 }, {
   name: 'ActionItem',
   component: ActionItemExample,
+  hasReact: true,
 }, {
   name: 'Badge',
   component: BadgeExample,

ui_framework/doc_site/src/views/action_item/action_item.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {
+  KuiActionItem
+} from '../../../../components';
+
+export default () => (
+  <KuiActionItem>
+    <p className="kuiText">Item</p>
+    <div className="kuiMenuButtonGroup">
+      <button className="kuiMenuButton kuiMenuButton--basic">
+        Acknowledge
+      </button>
+      <button className="kuiMenuButton kuiMenuButton--basic">
+        Silence
+      </button>
+      <button className="kuiMenuButton kuiMenuButton--danger">
+        Delete
+      </button>
+    </div>
+  </KuiActionItem>
+);

ui_framework/doc_site/src/views/action_item/action_item_example.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { renderToHtml } from '../../services';
+
 import {
   GuideDemo,
   GuidePage,
@@ -8,14 +10,22 @@ import {
   GuideText,
 } from '../../components';
 
-const actionItemHtml = require('./action_item.html');
-const inMenuHtml = require('./action_items_in_menu.html');
+import ActionItem from './action_item';
+const actionItemSource = require('!!raw!./action_item');
+const actionItemHtml = renderToHtml(ActionItem);
+
+import ActionItemInMenu from './action_items_in_menu';
+const actionItemInMenuSource = require('!!raw!./action_items_in_menu');
+const actionItemInMenuHtml = renderToHtml(ActionItemInMenu);
 
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="ActionItem"
       source={[{
+        type: GuideSectionTypes.JS,
+        code: actionItemSource,
+      }, {
         type: GuideSectionTypes.HTML,
         code: actionItemHtml,
       }]}
@@ -24,25 +34,28 @@ export default props => (
         Events can represent updates, logs, notifications, and status changes.
       </GuideText>
 
-      <GuideDemo
-        html={actionItemHtml}
-      />
+      <GuideDemo>
+        <ActionItem />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="ActionItems in Menu"
       source={[{
+        type: GuideSectionTypes.JS,
+        code: actionItemInMenuSource,
+      }, {
         type: GuideSectionTypes.HTML,
-        code: inMenuHtml,
+        code: actionItemInMenuHtml,
       }]}
     >
       <GuideText>
         You&rsquo;ll typically want to present them within a Menu.
       </GuideText>
 
-      <GuideDemo
-        html={inMenuHtml}
-      />
+      <GuideDemo>
+        <ActionItemInMenu />
+      </GuideDemo>
     </GuideSection>
   </GuidePage>
 );

ui_framework/doc_site/src/views/action_item/action_items_in_menu.js

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import {
+  KuiActionItem,
+  KuiMenu,
+  KuiMenuItem
+} from '../../../../components';
+
+export default () => (
+<KuiMenu contained>
+  <KuiMenuItem>
+    <KuiActionItem>
+      <p className="kuiText">Item A</p>
+      <div className="kuiMenuButtonGroup">
+        <button className="kuiMenuButton kuiMenuButton--basic">
+          Acknowledge
+        </button>
+        <button className="kuiMenuButton kuiMenuButton--basic">
+          Silence
+        </button>
+        <button className="kuiMenuButton kuiMenuButton--danger">
+          Delete
+        </button>
+      </div>
+    </KuiActionItem>
+  </KuiMenuItem>
+
+  <KuiMenuItem>
+    <KuiActionItem>
+      <p className="kuiText">Item B</p>
+      <div className="kuiMenuButtonGroup">
+        <button className="kuiMenuButton kuiMenuButton--basic">
+          Acknowledge
+        </button>
+        <button className="kuiMenuButton kuiMenuButton--basic">
+          Silence
+        </button>
+        <button className="kuiMenuButton kuiMenuButton--danger">
+          Delete
+        </button>
+      </div>
+    </KuiActionItem>
+  </KuiMenuItem>
+
+  <KuiMenuItem>
+    <KuiActionItem>
+      <p className="kuiText">Item C</p>
+      <div className="kuiMenuButtonGroup">
+        <button className="kuiMenuButton kuiMenuButton--basic">
+          Acknowledge
+        </button>
+        <button className="kuiMenuButton kuiMenuButton--basic">
+          Silence
+        </button>
+        <button className="kuiMenuButton kuiMenuButton--danger">
+          Delete
+        </button>
+      </div>
+    </KuiActionItem>
+  </KuiMenuItem>
+</KuiMenu>
+);