feat(Notification Badge): Adds the notification badge component (#2342)

* Added notification badge

* feat(react-core): Added Notification Badge Component

Added the notificatoin badge component.  Currently adding the typescript integreation tests.  Will
update the PR when they are done.

"fix #2021"

* Added integration tests.

packages/patternfly-4/react-core/src/components/NotificationBadge/NotificationBadge.md

@@ -0,0 +1,40 @@
+---
+title: 'NotificationBadge'
+cssPrefix: 'pf-c-notification-badge'
+typescript: true
+propComponents: ['NotificationBadge']
+---
+
+import { NotificationBadge } from '@patternfly/react-core';
+import { BellIcon } from '@patternfly/react-icons';
+
+## Simple notification badge
+
+```js
+import React from 'react';
+import { NotificationBadge } from '@patternfly/react-core';
+import { BellIcon } from '@patternfly/react-icons';
+
+class SimpleNotificationBadge extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isRead: false
+    };
+    this.onClick = () => {
+      this.setState({
+        isRead: true
+      });
+    };
+  }
+
+  render() {
+    const { isRead } = this.state;
+    return (
+      <NotificationBadge isRead={isRead} onClick={this.onClick} aria-label="Notifications">
+        <BellIcon />
+      </NotificationBadge>
+    );
+  }
+}
+```

packages/patternfly-4/react-core/src/components/NotificationBadge/NotificationBadge.test.tsx

@@ -0,0 +1,10 @@
+import { NotificationBadge } from './NotificationBadge';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+Object.values([true, false]).forEach(isRead => {
+  test(`${isRead} NotificationBadge`, () => {
+    const view = shallow(<NotificationBadge isRead={isRead}>{isRead ? 'read' : 'unread'} Badge</NotificationBadge>);
+    expect(view).toMatchSnapshot();
+  });
+});

packages/patternfly-4/react-core/src/components/NotificationBadge/NotificationBadge.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Button, ButtonVariant, ButtonProps } from '../Button';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/NotificationBadge/notification-badge';
+
+export interface NotificationBadgeProps extends ButtonProps {
+  /**  Adds styling to the notification badge to indicate it has been read */
+  isRead?: boolean;
+  /** content rendered inside the Notification Badge */
+  children?: React.ReactNode;
+  /** additional classes added to the Notification Badge */
+  className?: string;
+  /** Adds accessible text to the Notification Badge. */
+  'aria-label'?: string;
+}
+
+export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps> = ({
+  isRead = false,
+  className,
+  children,
+  ...props
+}: NotificationBadgeProps) => (
+  <Button variant={ButtonVariant.plain} className={className} {...props}>
+    <span className={css(styles.notificationBadge, isRead ? styles.modifiers.read : styles.modifiers.unread)}>
+      {children}
+    </span>
+  </Button>
+);

packages/patternfly-4/react-core/src/components/NotificationBadge/__snapshots__/NotificationBadge.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`false NotificationBadge 1`] = `
+<Component
+  variant="plain"
+>
+  <span
+    className="pf-c-notification-badge pf-m-unread"
+  >
+    unread
+     Badge
+  </span>
+</Component>
+`;
+
+exports[`true NotificationBadge 1`] = `
+<Component
+  variant="plain"
+>
+  <span
+    className="pf-c-notification-badge pf-m-read"
+  >
+    read
+     Badge
+  </span>
+</Component>
+`;

packages/patternfly-4/react-core/src/components/NotificationBadge/index.ts

@@ -0,0 +1 @@
+export * from './NotificationBadge';

packages/patternfly-4/react-core/src/components/index.ts

@@ -27,6 +27,7 @@ export * from './List';
 export * from './LoginPage';
 export * from './Modal';
 export * from './Nav';
+export * from './NotificationBadge';
 export * from './OptionsMenu';
 export * from './Page';
 export * from './Pagination';

packages/patternfly-4/react-integration/cypress/integration/notificationbadge.spec.ts

@@ -0,0 +1,16 @@
+describe('Notification Badge Demo Test', () => {
+    it('Navigate to notificatoin badge demo section', () => {
+      cy.visit('http://localhost:3000/');
+      cy.get('#notification-badge-demo-nav-item-link').click(); 
+      cy.url().should('eq', 'http://localhost:3000/notification-badge-demo-nav-link');
+    }); 
+
+    it('Verify notification badge is unread', () => {
+      cy.get('.pf-c-notification-badge').should('have.class', 'pf-m-unread');
+    });
+
+    it('Verify notification badge is read after click', () => {
+      cy.get('#notification-demo-badge').click();
+      cy.get('.pf-c-notification-badge').should('have.class', 'pf-m-read');
+    }); 
+  })

packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts

@@ -140,6 +140,11 @@ export const Demos: DemoInterface[] = [
     name: 'Nav Demo',
     componentType: Examples.NavDemo
   },
+  {
+    id: 'notification-badge-demo',
+    name: 'Notification Badge Demo',
+    componentType: Examples.NotificationBadgeDemo
+  },
   {
     id: 'options-menu-demo',
     name: 'Options Menu Demo',

packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/NotificationBadgeDemo/NotificationBadgeDemo.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { NotificationBadge, NotificationBadgeProps } from '@patternfly/react-core';
+import { BellIcon } from '@patternfly/react-icons';
+
+interface NotificationBadgeDemoState {
+    isRead: boolean;
+}
+
+export class NotificationBadgeDemo extends React.Component <NotificationBadgeProps, NotificationBadgeDemoState>{
+  constructor(props) {
+    super(props);
+    this.state = {
+      isRead: false
+    };
+  }
+  onClick = () => {
+    this.setState({
+      isRead: true
+    });
+  };
+
+  render() {
+    const { isRead } = this.state;
+    return (
+      <NotificationBadge id="notification-demo-badge" isRead={isRead} onClick={this.onClick} aria-label="Notifications">
+        <BellIcon />
+      </NotificationBadge>
+    );
+  }
+}

packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts

@@ -25,6 +25,7 @@ export * from './ListDemo/ListDemo';
 export * from './LoginPageDemo/LoginPageDemo';
 export * from './ModalDemo/ModalDemo';
 export * from './NavDemo/NavDemo';
+export * from './NotificationBadgeDemo/NotificationBadgeDemo';
 export * from './OptionsMenuDemo/OptionsMenuDemo';
 export * from './PopoverDemo/PopoverDemo';
 export * from './PageDemo/PageDemo';