Merge 8749f95 into 438849c

less/notificationdrawer.less

@@ -0,0 +1,8 @@
+.drawer-pf {
+  .panel-group {
+    .panel-body {
+      max-height: 364px;
+      overflow-y: auto;
+    }
+  }
+}

less/patternfly-react.less

@@ -2,7 +2,7 @@
   Patternfly React Specific Extensions
 */
 @import 'card';
-
+@import 'notificationdrawer';
 @import 'utilization-bar';
 @import 'breadcrumb';
-@import "label-remove";
+@import 'label-remove';

sass/patternfly-react/_notificationdrawer.scss

@@ -0,0 +1,8 @@
+.drawer-pf {
+  .panel-group {
+    .panel-body {
+      max-height: 364px; // 4 notifications before scrolling
+      overflow-y: auto;
+    }
+  }
+}

sass/patternfly-react/_patternfly-react.scss

@@ -2,7 +2,7 @@
   Patternfly React Partials
 */
 @import 'card';
-
 @import 'utilization-bar';
 @import 'breadcrumb';
 @import 'label-remove';
+@import 'notificationdrawer';

src/components/Notification/Notification.js

@@ -0,0 +1,44 @@
+import ClassNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Spinner from '../Spinner/Spinner';
+
+const Notification = ({ type, children, seen, className, ...props }) => {
+  const classes = ClassNames(
+    {
+      'drawer-pf-notification': type === 'notification',
+      'drawer-pf-loading text-center': type === 'loading'
+    },
+    { unread: !seen },
+    className
+  );
+
+  return (
+    <div className={classes} {...props}>
+      {type === 'loading'
+        ? [
+            <Spinner key="notification_spinner" inline loading size="xs" />,
+            ' Loading More'
+          ]
+        : children}
+    </div>
+  );
+};
+Notification.propTypes = {
+  /** Child node - contents of the element */
+  children: PropTypes.node,
+  /** Additional element css classes */
+  className: PropTypes.string,
+  /** seen Notification Bool */
+  seen: PropTypes.bool,
+  /** show Loading Notification */
+  type: PropTypes.string
+};
+Notification.defaultProps = {
+  children: null,
+  className: '',
+  seen: false,
+  type: 'notification'
+};
+
+export default Notification;

src/components/Notification/Notification.test.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Notification } from './index';
+
+test('Notification is working properly', () => {
+  const component = mount(
+    <Notification>
+      <div>Child</div>
+    </Notification>
+  );
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('Notification Content is working properly', () => {
+  const component = mount(
+    <Notification.Content>
+      <div>Child</div>
+    </Notification.Content>
+  );
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('Notification Info is working properly', () => {
+  const component = mount(<Notification.Info />);
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('Notification Info Right is working properly', () => {
+  const component = mount(<Notification.InfoRight text="right" />);
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('Notification Info Left is working properly', () => {
+  const component = mount(<Notification.InfoLeft text="left" />);
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('Notification Message is working properly', () => {
+  const component = mount(
+    <Notification.Message>
+      <div>Child</div>
+    </Notification.Message>
+  );
+  expect(component.render()).toMatchSnapshot();
+});

src/components/Notification/NotificationContent.js

@@ -0,0 +1,24 @@
+import ClassNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const NotificationContent = ({ children, className, ...props }) => {
+  const classes = ClassNames('drawer-pf-notification-content', className);
+
+  return (
+    <div className={classes} {...props}>
+      {children}
+    </div>
+  );
+};
+NotificationContent.propTypes = {
+  /** Child node - contents of the element */
+  children: PropTypes.node.isRequired,
+  /** Additional element css classes */
+  className: PropTypes.string
+};
+NotificationContent.defaultProps = {
+  className: ''
+};
+
+export default NotificationContent;

src/components/Notification/NotificationDrawer/NotificationDrawer.js

@@ -0,0 +1,40 @@
+import ClassNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const NotificationDrawer = ({
+  hide,
+  expanded,
+  children,
+  className,
+  ...props
+}) => {
+  const classes = ClassNames(
+    'drawer-pf drawer-pf-notifications',
+    { 'drawer-pf-expanded': expanded },
+    { hide },
+    className
+  );
+  return (
+    <div className={classes} {...props}>
+      {children}
+    </div>
+  );
+};
+NotificationDrawer.propTypes = {
+  /** Child node - contents of the element */
+  children: PropTypes.node.isRequired,
+  /** Additional element css classes */
+  className: PropTypes.string,
+  /** Expanded bool */
+  expanded: PropTypes.bool,
+  /** Hide Bool */
+  hide: PropTypes.bool
+};
+NotificationDrawer.defaultProps = {
+  className: '',
+  expanded: false,
+  hide: false
+};
+
+export default NotificationDrawer;

src/components/Notification/NotificationDrawer/NotificationDrawer.test.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { NotificationDrawer } from './index';
+
+test('NotificationDrawer is working properly', () => {
+  const component = mount(
+    <NotificationDrawer>
+      <div>Child</div>
+    </NotificationDrawer>
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('NotificationDrawer Title is working properly', () => {
+  const component = mount(<NotificationDrawer.Title />);
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('NotificationDrawer Accordion is working properly', () => {
+  const component = mount(
+    <NotificationDrawer.Accordion>
+      <div>Child</div>
+    </NotificationDrawer.Accordion>
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('NotificationDrawer Toggle is working properly', () => {
+  const component = mount(<NotificationDrawer.Toggle />);
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('NotificationDrawer Dropdown is working properly', () => {
+  const component = mount(
+    <NotificationDrawer.Dropdown id="1">
+      <div>Child</div>
+    </NotificationDrawer.Dropdown>
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('NotificationDrawer Panel is working properly', () => {
+  const component = mount(
+    <NotificationDrawer.Panel>
+      <div>Child</div>
+    </NotificationDrawer.Panel>
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('NotificationDrawer Panel Action and Link is working properly', () => {
+  const component = mount(
+    <NotificationDrawer.PanelAction>
+      <NotificationDrawer.PanelActionLink>
+        <div>Child</div>
+      </NotificationDrawer.PanelActionLink>
+    </NotificationDrawer.PanelAction>
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('NotificationDrawer Panel Body is working properly', () => {
+  const component = mount(
+    <NotificationDrawer.PanelBody>
+      <div>Child</div>
+    </NotificationDrawer.PanelBody>
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('NotificationDrawer Panel Counter is working properly', () => {
+  const component = mount(
+    <NotificationDrawer.PanelCounter>
+      <div>Child</div>
+    </NotificationDrawer.PanelCounter>
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('NotificationDrawer Panel Heading is working properly', () => {
+  const component = mount(
+    <NotificationDrawer.PanelHeading>
+      <div>Child</div>
+    </NotificationDrawer.PanelHeading>
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('NotificationDrawer Panel Title is working properly', () => {
+  const component = mount(<NotificationDrawer.PanelTitle />);
+
+  expect(component.render()).toMatchSnapshot();
+});

src/components/Notification/NotificationDrawer/NotificationDrawerAccordion/NotificationDrawerAccordion.js

@@ -0,0 +1,24 @@
+import ClassNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const NotificationDrawerAccordion = ({ children, className, ...props }) => {
+  const classes = ClassNames('panel-group', className);
+
+  return (
+    <div className={classes} id="notification-drawer-accordion" {...props}>
+      {children}
+    </div>
+  );
+};
+NotificationDrawerAccordion.propTypes = {
+  /** Child node - contents of the element */
+  children: PropTypes.node.isRequired,
+  /** Additional element css classes */
+  className: PropTypes.string
+};
+NotificationDrawerAccordion.defaultProps = {
+  className: ''
+};
+
+export default NotificationDrawerAccordion;

src/components/Notification/NotificationDrawer/NotificationDrawerAccordion/NotificationDrawerDropDown.js

@@ -0,0 +1,45 @@
+import ClassNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown } from '../../../Dropdown';
+import { Icon } from '../../../Icon';
+
+const NotificationDrawerDropDown = ({
+  id,
+  children,
+  className,
+  pullRight,
+  ...props
+}) => {
+  const classes = ClassNames(
+    'dropdown',
+    { 'pull-right': pullRight },
+    'dropdown-kebab-pf',
+    className
+  );
+
+  return (
+    <Dropdown className={classes} id={id}>
+      <Dropdown.Toggle bsStyle="link" noCaret>
+        <Icon name="ellipsis-v" />
+      </Dropdown.Toggle>
+      <Dropdown.Menu className="dropdown-menu-right">{children}</Dropdown.Menu>
+    </Dropdown>
+  );
+};
+NotificationDrawerDropDown.propTypes = {
+  /** dropdown button id */
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Child node - contents of the element */
+  children: PropTypes.node.isRequired,
+  /** Additional element css classes */
+  className: PropTypes.string,
+  /** menu right aligned */
+  pullRight: PropTypes.bool
+};
+NotificationDrawerDropDown.defaultProps = {
+  pullRight: true,
+  id: null,
+  className: ''
+};
+export default NotificationDrawerDropDown;

src/components/Notification/NotificationDrawer/NotificationDrawerAccordion/NotificationDrawerPanel.js

@@ -0,0 +1,24 @@
+import ClassNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const NotificationDrawerPanel = ({ children, className, ...props }) => {
+  const classes = ClassNames('panel panel-default', className);
+
+  return (
+    <div className={classes} {...props}>
+      {children}
+    </div>
+  );
+};
+NotificationDrawerPanel.propTypes = {
+  /** Child node - contents of the element */
+  children: PropTypes.node.isRequired,
+  /** Additional element css classes */
+  className: PropTypes.string
+};
+NotificationDrawerPanel.defaultProps = {
+  className: ''
+};
+
+export default NotificationDrawerPanel;