elastic#87 Converted .euiHeader__notification into `EuiHeaderNotifi…

…cation`

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>
     );
 

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>
+`;

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;
+}

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';

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>
+  );
+};

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();
+  });
+});

src/components/header/index.js

@@ -16,6 +16,10 @@ export {
   EuiHeaderLogo,
 } from './header_logo';
 
+export {
+  EuiHeaderNotification,
+} from './header_notification';
+
 export {
   EuiHeaderSection,
   EuiHeaderSectionItem,

src/components/index.js

@@ -121,6 +121,7 @@ export {
   EuiHeaderBreadcrumbCollapsed,
   EuiHeaderBreadcrumbs,
   EuiHeaderLogo,
+  EuiHeaderNotification,
   EuiHeaderSection,
   EuiHeaderSectionItem,
   EuiHeaderSectionItemButton,