From f0798b4a9098e1ad620a27646a0576264256b8cf Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 20 Mar 2018 15:13:36 -0400
Subject: [PATCH] #87 Converted `.euiHeader__notification` into
 `EuiHeaderNotification`

---
 src-docs/src/views/header/header_user_menu.js  |  5 ++---
 .../header_notification.test.js.snap           | 11 +++++++++++
 .../header/_header_notification.scss           | 12 ++++++++++++
 src/components/header/_index.scss              |  1 +
 src/components/header/header_notification.js   | 15 +++++++++++++++
 .../header/header_notification.test.js         | 18 ++++++++++++++++++
 src/components/header/index.js                 |  4 ++++
 src/components/index.js                        |  1 +
 8 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 src/components/header/__snapshots__/header_notification.test.js.snap
 create mode 100644 src/components/header/_header_notification.scss
 create mode 100644 src/components/header/header_notification.js
 create mode 100644 src/components/header/header_notification.test.js

diff --git a/src-docs/src/views/header/header_user_menu.js b/src-docs/src/views/header/header_user_menu.js
index 41b882b50072..f1bb8b3380e6 100644
--- a/src-docs/src/views/header/header_user_menu.js
+++ b/src-docs/src/views/header/header_user_menu.js
@@ -8,6 +8,7 @@ import {
   EuiFlexItem,
   EuiHeaderAlert,
   EuiHeaderSectionItemButton,
+  EuiHeaderNotification,
   EuiIcon,
   EuiLink,
   EuiText,
@@ -44,9 +45,7 @@ export default class extends Component {
           size="m"
         />
 
-        <span className="euiHeader__notification">
-          3
-        </span>
+        <EuiHeaderNotification>3</EuiHeaderNotification>
       </EuiHeaderSectionItemButton>
     );
 
diff --git a/src/components/header/__snapshots__/header_notification.test.js.snap b/src/components/header/__snapshots__/header_notification.test.js.snap
new file mode 100644
index 000000000000..0bbd22842cb0
--- /dev/null
+++ b/src/components/header/__snapshots__/header_notification.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiHeaderNotification is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="euiHeaderNotification testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  Content
+</span>
+`;
diff --git a/src/components/header/_header_notification.scss b/src/components/header/_header_notification.scss
new file mode 100644
index 000000000000..26ddc2601f00
--- /dev/null
+++ b/src/components/header/_header_notification.scss
@@ -0,0 +1,12 @@
+
+.euiHeaderNotification {
+  display: inline-block;
+  border-radius: $euiBorderRadius;
+  background: $euiHeaderNotificationBackgroundColor;
+  color: $euiColorEmptyShade;
+  font-size: $euiFontSizeXS;
+  line-height: $euiSize;
+  height: $euiSize;
+  min-width: $euiSize;
+  vertical-align: middle;
+}
diff --git a/src/components/header/_index.scss b/src/components/header/_index.scss
index e7c153c054c0..e2e258df9407 100644
--- a/src/components/header/_index.scss
+++ b/src/components/header/_index.scss
@@ -11,6 +11,7 @@ $euiHeaderChildSize: $euiSizeXXL + $euiSizeL;
 @import 'header_popover';
 @import 'header_profile';
 @import 'header_logo';
+@import 'header_notification';
 @import 'header_alert/index';
 @import 'header_breadcrumbs/index';
 @import 'header_section/index';
diff --git a/src/components/header/header_notification.js b/src/components/header/header_notification.js
new file mode 100644
index 000000000000..a9fe22e87a7b
--- /dev/null
+++ b/src/components/header/header_notification.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const EuiHeaderNotification = ({ children, className, ...rest }) => {
+  const classes = classNames('euiHeaderNotification', className);
+
+  return (
+    <span
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+};
diff --git a/src/components/header/header_notification.test.js b/src/components/header/header_notification.test.js
new file mode 100644
index 000000000000..df6377c23c18
--- /dev/null
+++ b/src/components/header/header_notification.test.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiHeaderNotification } from './header_notification';
+
+describe('EuiHeaderNotification', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiHeaderNotification {...requiredProps}>
+        Content
+      </EuiHeaderNotification>
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/src/components/header/index.js b/src/components/header/index.js
index 2d956a0154dc..cc3d92c38696 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -16,6 +16,10 @@ export {
   EuiHeaderLogo,
 } from './header_logo';
 
+export {
+  EuiHeaderNotification,
+} from './header_notification';
+
 export {
   EuiHeaderSection,
   EuiHeaderSectionItem,
diff --git a/src/components/index.js b/src/components/index.js
index 5581642a6334..bfb1de5524de 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -121,6 +121,7 @@ export {
   EuiHeaderBreadcrumbCollapsed,
   EuiHeaderBreadcrumbs,
   EuiHeaderLogo,
+  EuiHeaderNotification,
   EuiHeaderSection,
   EuiHeaderSectionItem,
   EuiHeaderSectionItemButton,