[Feature notification] Add EuiNotificationEvent

src-docs/src/components/guide_components.scss

@@ -241,6 +241,85 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   top: 0;
 }
 
+.guideDemo__notificationEventCircleIndicator {
+  display: inline-block;
+  width: $euiSize;
+  height: $euiSize;
+  background: $euiColorPrimary;
+  color: $euiColorEmptyShade;
+  font-size: $euiSizeM;
+  line-height: $euiSize;
+  text-align: center;
+  border-radius: 50%;
+}
+
+.guideDemo__notificationEventHighlight {
+  background: transparentize($euiColorPrimary, .9);
+  border-radius: $euiBorderRadiusSmall;
+  padding: $euiSizeXS;
+}
+
+.guideDemo__notificationEvent {
+  @include euiFontSizeS;
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    display: flex;
+  }
+
+  .guideDemo__notificationEventCircleIndicator {
+    margin-right: $euiSizeXS;
+  }
+}
+
+.guideDemo__notificationEventTopRow {
+  display: flex;
+
+  > * {
+    position: relative;
+    margin-right: $euiSizeXS;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .guideDemo__notificationEventIcon {
+    margin: 0 $euiSizeXS;
+  }
+
+  .guideDemo__notificationEventCircleIndicator {
+    position: absolute;
+    top: -$euiSizeS;
+    left: 0;
+  }
+}
+
+.guideDemo__notificationEventMeta {
+  display: flex;
+  width: 100%;
+  margin: 0 $euiSizeS;
+
+  .euiNotificationEventMeta {
+    width: 100%;
+  }
+}
+
+.guideDemo__notificationEventSections {
+  margin-left: $euiSizeXL + $euiSizeXS;
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    margin-top: $euiSizeS;
+  }
+}
+
+.guideDemo__notificationEventBadge {
+  flex: 1;
+}
+
 .euiDataGridRowCell--favoriteFranchise {
   background: transparentize($color: #800080, $amount: .95) !important;
 }
@@ -259,6 +338,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   color: $euiColorAccentText;
 }
 
+
 @import '../views/guidelines/index';
 @import 'guide_section/index';
 @import 'guide_rule/index';

src-docs/src/routes.js

@@ -145,7 +145,7 @@ 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 { NotificationEventExample } from './views/notification_event/notification_event_example';
 
 import { OutsideClickDetectorExample } from './views/outside_click_detector/outside_click_detector_example';
 
@@ -393,7 +393,7 @@ const navigation = [
       ImageExample,
       ListGroupExample,
       LoadingExample,
-      NotificationEventsExample,
+      NotificationEventExample,
       ProgressExample,
       StatExample,
       TextExample,

src-docs/src/views/notification_event/notification_event.js

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { EuiPanel } from '../../../../src/components/panel';
+import { EuiContextMenuItem } from '../../../../src/components/context_menu';
+import { EuiNotificationEvent } from '../../../../src/components/notification/notification_event';
+
+export default () => {
+  const [isRead, setIsRead] = useState(false);
+
+  const onRead = (id, isRead) => {
+    setIsRead(!isRead);
+  };
+
+  const onOpenContextMenu = (id) => {
+    return [
+      <EuiContextMenuItem
+        key="contextMenuItemA"
+        onClick={() => onRead(id, isRead)}>
+        {isRead ? 'Mark as unread' : '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 (
+    <EuiPanel paddingSize="none" hasShadow={true} style={{ maxWidth: '540px' }}>
+      <EuiNotificationEvent
+        id="report"
+        type="Report"
+        iconType="logoKibana"
+        iconAriaLabel="Kibana"
+        time="1 min ago"
+        title="[Error Monitoring Report] is generated"
+        primaryAction="Download"
+        primaryActionProps={{
+          iconType: 'download',
+        }}
+        messages={['The reported was generated at 17:12:16 GMT+4']}
+        isRead={isRead}
+        onRead={onRead}
+        onOpenContextMenu={onOpenContextMenu}
+        onClickPrimaryAction={() => {}}
+        onClickTitle={() => {}}
+      />
+    </EuiPanel>
+  );
+};