[Feature Notification] Add EuiNotificationEventMeta

src-docs/src/routes.js

@@ -144,6 +144,8 @@ import { ModalExample } from './views/modal/modal_example';
 
 import { MutationObserverExample } from './views/mutation_observer/mutation_observer_example';
 
+import { NotificationEventsExample } from './views/notification_events/notification_events_example';
+
 import { OutsideClickDetectorExample } from './views/outside_click_detector/outside_click_detector_example';
 
 import { OverlayMaskExample } from './views/overlay_mask/overlay_mask_example';
@@ -389,9 +391,9 @@ const navigation = [
       ImageExample,
       ListGroupExample,
       LoadingExample,
+      NotificationEventsExample,
       ProgressExample,
       StatExample,
-
       TextExample,
       TitleExample,
       ToastExample,

src-docs/src/views/notification_events/notification_events.js

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+
+import {
+  EuiPanel,
+  EuiSpacer,
+  EuiTitle,
+  EuiContextMenuItem,
+} from '../../../../src/components';
+
+import { EuiNotificationEventMeta } from '../../../../src/components/notification/notification_event_meta';
+
+export default () => {
+  const [isRead, setIsRead] = useState(false);
+
+  const onRead = () => {
+    setIsRead(!isRead);
+  };
+
+  const panelStyle = { maxWidth: '400px' };
+
+  const contextMenuItems = [
+    <EuiContextMenuItem key="contextMenuItemA" onClick={onRead}>
+      Mark as read
+    </EuiContextMenuItem>,
+
+    <EuiContextMenuItem key="contextMenuItemB" onClick={() => {}}>
+      View messages like this
+    </EuiContextMenuItem>,
+
+    <EuiContextMenuItem key="contextMenuItemC" onClick={() => {}}>
+      Don’t notify me about this
+    </EuiContextMenuItem>,
+  ];
+
+  return (
+    <>
+      <EuiTitle size="s">
+        <h2>EuiNotificationEventMeta</h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiTitle size="xs">
+        <h3>All props</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiPanel paddingSize="s" hasShadow={true} style={{ ...panelStyle }}>
+        <EuiNotificationEventMeta
+          type="This is a very long type"
+          severity="And a very long severity"
+          badgeColor="danger"
+          iconType="logoCloud"
+          time="2 min ago"
+          isRead={isRead}
+          onRead={onRead}
+          contextMenuItems={contextMenuItems}
+        />
+      </EuiPanel>
+      <EuiSpacer />
+
+      <EuiTitle size="xs">
+        <h3>No Severity</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiPanel paddingSize="s" hasShadow={true} style={{ ...panelStyle }}>
+        <EuiNotificationEventMeta
+          type="Cloud "
+          badgeColor="warning"
+          iconType="logoCloud"
+          time={<span>2 min ago</span>}
+          isRead={isRead}
+          onRead={onRead}
+        />
+      </EuiPanel>
+      <EuiSpacer />
+
+      <EuiTitle size="xs">
+        <h3>Only required props</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiPanel paddingSize="s" hasShadow={true} style={{ ...panelStyle }}>
+        <EuiNotificationEventMeta type="Cloud" time={<span>2 min ago</span>} />
+      </EuiPanel>
+    </>
+  );
+};

src-docs/src/views/notification_events/notification_events_example.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { renderToHtml } from '../../services';
+import { GuideSectionTypes } from '../../components';
+import { EuiNotificationEventMeta } from '../../../../src/components/notification/notification_event_meta';
+import { EuiContextMenuItem } from '../../../../src/components/context_menu/';
+
+import Notification from './notification_events';
+const notificationSource = require('!!raw-loader!./notification_events');
+const notificationHtml = renderToHtml(Notification);
+
+export const NotificationEventsExample = {
+  title: 'Notification events',
+  isNew: true,
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: notificationSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: notificationHtml,
+        },
+      ],
+      props: {
+        EuiNotificationEventMeta,
+        EuiContextMenuItem,
+      },
+      demo: <Notification />,
+    },
+  ],
+};

src/components/context_menu/index.ts

@@ -30,6 +30,7 @@ export {
 
 export {
   EuiContextMenuItem,
+  EuiContextMenuItemProps,
   EuiContextMenuItemIcon,
   EuiContextMenuItemLayoutAlignment,
 } from './context_menu_item';

src/components/index.js

@@ -240,6 +240,8 @@ export {
 
 export { EuiMutationObserver } from './observer/mutation_observer';
 
+export { EuiNotificationEventReadButton } from './notification';
+
 export { EuiOutsideClickDetector } from './outside_click_detector';
 
 export { EuiOverlayMask } from './overlay_mask';

src/components/index.scss

@@ -44,6 +44,7 @@
 @import 'markdown_editor/index';
 @import 'mark/index';
 @import 'modal/index';
+@import 'notification/index';
 @import 'overlay_mask/index';
 @import 'page/index';
 @import 'pagination/index';