[UI Framework] Reactify kuiEvent and related CSS components (#12226) (#12228)

* Implement KuiEvent,KuiEventSymbol,KuiEventBody,
            KuiEventBodyMessage,KuiEventBodyMetadata
            and theirs tests

* Update docs examples

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

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

ui_framework/components/event/__snapshots__/event_body.test.js.snap

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

ui_framework/components/event/__snapshots__/event_body_message.test.js.snap

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

ui_framework/components/event/__snapshots__/event_body_metadata.test.js.snap

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

ui_framework/components/event/__snapshots__/event_symbol.test.js.snap

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

ui_framework/components/event/event.js

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

ui_framework/components/event/event.test.js

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

ui_framework/components/event/event_body.js

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

ui_framework/components/event/event_body.test.js

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

ui_framework/components/event/event_body_message.js

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

ui_framework/components/event/event_body_message.test.js

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

ui_framework/components/event/event_body_metadata.js

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

ui_framework/components/event/event_body_metadata.test.js

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

ui_framework/components/event/event_symbol.js

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

ui_framework/components/event/event_symbol.test.js

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

ui_framework/components/event/index.js

@@ -0,0 +1,5 @@
+export { KuiEvent } from './event';
+export { KuiEventSymbol } from './event_symbol';
+export { KuiEventBody } from './event_body';
+export { KuiEventBodyMessage } from './event_body_message';
+export { KuiEventBodyMetadata } from './event_body_metadata';

ui_framework/components/index.js

@@ -10,6 +10,14 @@ export {
   KuiSubmitButton,
 } from './button';
 
+export {
+  KuiEvent,
+  KuiEventSymbol,
+  KuiEventBody,
+  KuiEventBodyMessage,
+  KuiEventBodyMetadata,
+} from './event';
+
 export { KuiInfoButton } from './info_button';
 
 export {

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

@@ -138,6 +138,7 @@ const components = [{
 }, {
   name: 'Event',
   component: EventExample,
+  hasReact: true,
 }, {
   name: 'Expression',
   component: ExpressionExample,

ui_framework/doc_site/src/views/event/event.html

@@ -1,15 +0,0 @@
-<div class="kuiEvent">
-  <div class="kuiEventSymbol">
-    <span class="kuiIcon kuiIcon--error fa-warning"></span>
-  </div>
-
-  <div class="kuiEventBody">
-    <div class="kuiEventBody__message">
-    minimum_master_nodes setting of 1 is less than quorum of 2
-    </div>
-
-    <div class="kuiEventBody__metadata">
-      August 4, 2021
-    </div>
-  </div>
-</div>

ui_framework/doc_site/src/views/event/event.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {
+  KuiEvent,
+  KuiEventSymbol,
+  KuiEventBody,
+  KuiEventBodyMessage,
+  KuiEventBodyMetadata,
+} from '../../../../components';
+
+export default () => (
+  <KuiEvent>
+    <KuiEventSymbol>
+      <span className="kuiIcon kuiIcon--error fa-warning"></span>
+    </KuiEventSymbol>
+
+    <KuiEventBody>
+      <KuiEventBodyMessage>
+      minimum_master_nodes setting of 1 is less than quorum of 2
+      </KuiEventBodyMessage>
+
+      <KuiEventBodyMetadata>
+        August 4, 2021
+      </KuiEventBodyMetadata>
+    </KuiEventBody>
+  </KuiEvent>
+);

ui_framework/doc_site/src/views/event/event_example.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { renderToHtml } from '../../services';
 
 import {
   GuideDemo,
@@ -8,14 +9,22 @@ import {
   GuideText,
 } from '../../components';
 
-const eventHtml = require('./event.html');
-const eventMenuHtml = require('./event_menu.html');
+import Event from './event';
+const eventSource = require('!!raw!./event');
+const eventHtml = renderToHtml(Event);
+
+import EventMenu from './event_menu';
+const eventMenuSource = require('!!raw!./event_menu');
+const eventMenuHtml = renderToHtml(EventMenu);
 
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Event"
       source={[{
+        type: GuideSectionTypes.JS,
+        code: eventSource,
+      }, {
         type: GuideSectionTypes.HTML,
         code: eventHtml,
       }]}
@@ -24,14 +33,17 @@ export default props => (
         Events can represent updates, logs, notifications, and status changes.
       </GuideText>
 
-      <GuideDemo
-        html={eventHtml}
-      />
+      <GuideDemo>
+        <Event />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="Event Menu"
       source={[{
+        type: GuideSectionTypes.JS,
+        code: eventMenuSource,
+      }, {
         type: GuideSectionTypes.HTML,
         code: eventMenuHtml,
       }]}
@@ -40,9 +52,9 @@ export default props => (
         You&rsquo;ll typically want to present them within a Menu.
       </GuideText>
 
-      <GuideDemo
-        html={eventMenuHtml}
-      />
+      <GuideDemo>
+        <EventMenu />
+      </GuideDemo>
     </GuideSection>
   </GuidePage>
 );

ui_framework/doc_site/src/views/event/event_menu.html

@@ -1,55 +0,0 @@
-<div class="kuiMenu">
-  <div class="kuiMenuItem">
-    <div class="kuiEvent">
-      <div class="kuiEventSymbol">
-        <span class="kuiIcon kuiIcon--error fa-warning"></span>
-      </div>
-
-      <div class="kuiEventBody">
-        <div class="kuiEventBody__message">
-          minimum_master_nodes setting of 1 is less than quorum of 2
-        </div>
-
-        <div class="kuiEventBody__metadata">
-          August 4, 2021 02:23:28
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="kuiMenuItem">
-    <div class="kuiEvent">
-      <div class="kuiEventSymbol">
-        <span class="kuiIcon kuiIcon--error fa-warning"></span>
-      </div>
-
-      <div class="kuiEventBody">
-        <div class="kuiEventBody__message">
-          Cluster state is red because 17 primary shards are unassigned
-        </div>
-
-        <div class="kuiEventBody__metadata">
-          August 3, 2021 12:00:54
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="kuiMenuItem">
-    <div class="kuiEvent">
-      <div class="kuiEventSymbol">
-        <span class="kuiIcon kuiIcon--warning fa-bolt"></span>
-      </div>
-
-      <div class="kuiEventBody">
-        <div class="kuiEventBody__message">
-          Elasticsearch node version mismatches detected: 5.1.0
-        </div>
-
-        <div class="kuiEventBody__metadata">
-          July 27, 2021 11:20:09
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

ui_framework/doc_site/src/views/event/event_menu.js

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import {
+  KuiEvent,
+  KuiEventSymbol,
+  KuiEventBody,
+  KuiEventBodyMessage,
+  KuiEventBodyMetadata,
+  KuiMenu,
+  KuiMenuItem,
+} from '../../../../components';
+
+export default () => (
+  <KuiMenu>
+    <KuiMenuItem>
+      <KuiEvent>
+        <KuiEventSymbol>
+          <span className="kuiIcon kuiIcon--error fa-warning"></span>
+        </KuiEventSymbol>
+
+        <KuiEventBody>
+          <KuiEventBodyMessage>
+            minimum_master_nodes setting of 1 is less than quorum of 2
+          </KuiEventBodyMessage>
+
+          <KuiEventBodyMetadata>
+            August 4, 2021 02:23:28
+          </KuiEventBodyMetadata>
+        </KuiEventBody>
+      </KuiEvent>
+    </KuiMenuItem>
+
+    <KuiMenuItem>
+      <KuiEvent>
+        <KuiEventSymbol>
+          <span className="kuiIcon kuiIcon--error fa-warning"></span>
+        </KuiEventSymbol>
+
+        <KuiEventBody>
+          <KuiEventBodyMessage>
+            Cluster state is red because 17 primary shards are unassigned
+          </KuiEventBodyMessage>
+
+          <KuiEventBodyMetadata>
+            August 3, 2021 12:00:54
+          </KuiEventBodyMetadata>
+        </KuiEventBody>
+      </KuiEvent>
+    </KuiMenuItem>
+
+    <KuiMenuItem>
+      <KuiEvent>
+        <KuiEventSymbol>
+          <span className="kuiIcon kuiIcon--warning fa-bolt"></span>
+        </KuiEventSymbol>
+
+        <KuiEventBody>
+          <KuiEventBodyMessage>
+            Elasticsearch node version mismatches detected: 5.1.0
+          </KuiEventBodyMessage>
+
+          <KuiEventBodyMetadata>
+            July 27, 2021 11:20:09
+          </KuiEventBodyMetadata>
+        </KuiEventBody>
+      </KuiEvent>
+    </KuiMenuItem>
+  </KuiMenu>
+);

ui_framework/doc_site/src/views/event/events_sandbox.html

@@ -1,78 +0,0 @@
-<div class="kuiView">
-  <!-- Constrained width, centered content -->
-  <div class="kuiViewContent kuiViewContent--constrainedWidth">
-    <div class="kuiViewContentItem">
-
-      <div class="kuiHeaderBar">
-        <div class="kuiHeaderBarSection">
-          <h2 class="kuiSubTitle">
-            Cluster of Almonds
-          </h2>
-        </div>
-
-        <div class="kuiHeaderBarSection">
-          <div class="kuiText">
-            <a class="kuiLink" href="#">View all 21 almonds</a>
-          </div>
-        </div>
-      </div>
-
-      <ul class="kuiMenu kuiVerticalRhythm">
-        <li class="kuiMenuItem">
-          <div class="kuiEvent">
-            <div class="kuiEventSymbol">
-              <span class="kuiIcon kuiIcon--info fa-info"></span>
-            </div>
-
-            <div class="kuiEventBody">
-              <div class="kuiEventBody__message">
-                margarine_masher_toad sitting of 1 is less than opossum of 2
-              </div>
-
-              <div class="kuiEventBody__metadata">
-                August 4, 2021 02:23:28
-              </div>
-            </div>
-          </div>
-        </li>
-
-        <li class="kuiMenuItem">
-          <div class="kuiEvent">
-            <div class="kuiEventSymbol">
-              <span class="kuiIcon kuiIcon--error fa-warning"></span>
-            </div>
-
-            <div class="kuiEventBody">
-              <div class="kuiEventBody__message">
-                Cluster stork is red because 17 pillory stars are unenamored
-              </div>
-
-              <div class="kuiEventBody__metadata">
-                August 3, 2021 12:00:54
-              </div>
-            </div>
-          </div>
-        </li>
-
-        <li class="kuiMenuItem">
-          <div class="kuiEvent">
-            <div class="kuiEventSymbol">
-              <span class="kuiIcon kuiIcon--warning fa-bolt"></span>
-            </div>
-
-            <div class="kuiEventBody">
-              <div class="kuiEventBody__message">
-                Elastic band nematode vision marshmallow directed: 50,100
-              </div>
-
-              <div class="kuiEventBody__metadata">
-                July 27, 2021 11:20:09
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
-
-    </div>
-  </div>
-</div>

ui_framework/doc_site/src/views/event/events_sandbox.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { renderToHtml } from '../../services';
 
 import {
   GuideDemo,
@@ -7,19 +8,24 @@ import {
   GuideSectionTypes,
 } from '../../components';
 
-const html = require('./events_sandbox.html');
+import EventsSandboxContent from './events_sandbox_content';
+const eventsSandboxContentSource = require('!!raw!./events_sandbox_content');
+const eventsSandboxContentHtml = renderToHtml(EventsSandboxContent);
 
 export default props => (
   <GuideSandbox>
     <GuideDemo
       isFullScreen={true}
-      html={html}
+      html={eventsSandboxContentHtml}
     />
 
     <GuideSandboxCodeToggle
       source={[{
+        type: GuideSectionTypes.JS,
+        code: eventsSandboxContentSource,
+      }, {
         type: GuideSectionTypes.HTML,
-        code: html,
+        code: eventsSandboxContentHtml,
       }]}
       title={props.route.name}
     />

ui_framework/doc_site/src/views/event/events_sandbox_content.js

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import {
+  KuiEvent,
+  KuiEventSymbol,
+  KuiEventBody,
+  KuiEventBodyMessage,
+  KuiEventBodyMetadata,
+  KuiMenu,
+  KuiMenuItem,
+} from '../../../../components';
+
+export default () => (
+  <div className="kuiView">
+    {/* Constrained width, centered content */}
+    <div className="kuiViewContent kuiViewContent--constrainedWidth">
+      <div className="kuiViewContentItem">
+
+        <div className="kuiHeaderBar">
+          <div className="kuiHeaderBarSection">
+            <h2 className="kuiSubTitle">
+              Cluster of Almonds
+            </h2>
+          </div>
+
+          <div className="kuiHeaderBarSection">
+            <div className="kuiText">
+              <a className="kuiLink" href="#">View all 21 almonds</a>
+            </div>
+          </div>
+        </div>
+
+        <KuiMenu className="kuiVerticalRhythm">
+          <KuiMenuItem>
+            <KuiEvent>
+              <KuiEventSymbol>
+                <span className="kuiIcon kuiIcon--info fa-info"></span>
+              </KuiEventSymbol>
+
+              <KuiEventBody>
+                <KuiEventBodyMessage>
+                  margarine_masher_toad sitting of 1 is less than opossum of 2
+                </KuiEventBodyMessage>
+
+                <KuiEventBodyMetadata>
+                  August 4, 2021 02:23:28
+                </KuiEventBodyMetadata>
+              </KuiEventBody>
+            </KuiEvent>
+          </KuiMenuItem>
+
+          <KuiMenuItem>
+            <KuiEvent>
+              <KuiEventSymbol>
+                <span className="kuiIcon kuiIcon--error fa-warning"></span>
+              </KuiEventSymbol>
+
+              <KuiEventBody>
+                <KuiEventBodyMessage>
+                  Cluster stork is red because 17 pillory stars are unenamored
+                </KuiEventBodyMessage>
+
+                <KuiEventBodyMetadata>
+                  August 3, 2021 12:00:54
+                </KuiEventBodyMetadata>
+              </KuiEventBody>
+            </KuiEvent>
+          </KuiMenuItem>
+
+          <KuiMenuItem>
+            <KuiEvent>
+              <KuiEventSymbol>
+                <span className="kuiIcon kuiIcon--warning fa-bolt"></span>
+              </KuiEventSymbol>
+
+              <KuiEventBody>
+                <KuiEventBodyMessage>
+                  Elastic band nematode vision marshmallow directed: 50,100
+                </KuiEventBodyMessage>
+
+                <KuiEventBodyMetadata>
+                  July 27, 2021 11:20:09
+                </KuiEventBodyMetadata>
+              </KuiEventBody>
+            </KuiEvent>
+          </KuiMenuItem>
+        </KuiMenu>
+      </div>
+    </div>
+  </div>
+);