Add BannerNotification component

components.json

@@ -35,6 +35,7 @@
   {
     "name": "Design System UI",
     "components": [
+      "BannerNotification",
       "BannerNotifications"
     ]
   },

src/components/BannerNotification/README.md

@@ -0,0 +1,9 @@
+By default its rendered without close button:
+```js
+<BannerNotification type={'message'} text={'lorem ipsum - messge'} />
+```
+
+But it can be rendered with close buttton:
+```js
+<BannerNotification type={'alert'} text={'lorem ipsum - alert'} onClose={() => alert('Click')} />
+```

src/components/BannerNotifications/Notification/__snapshots__/index.spec.js.snap → src/components/BannerNotification/__snapshots__/index.spec.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Notification renders correctly 1`] = `
+exports[`BannerNotification renders correctly 1`] = `
 <div
-  className="wds-banner-notification wds-message"
+  className="wds-banner-notification wds-message "
 >
   <div
     className="wds-banner-notification__icon"
@@ -33,9 +33,9 @@ exports[`Notification renders correctly 1`] = `
 </div>
 `;
 
-exports[`Notification renders correctly 2`] = `
+exports[`BannerNotification renders correctly 2`] = `
 <div
-  className="wds-banner-notification wds-success"
+  className="wds-banner-notification wds-success "
 >
   <div
     className="wds-banner-notification__icon"
@@ -66,9 +66,9 @@ exports[`Notification renders correctly 2`] = `
 </div>
 `;
 
-exports[`Notification renders correctly 3`] = `
+exports[`BannerNotification renders correctly 3`] = `
 <div
-  className="wds-banner-notification wds-warning"
+  className="wds-banner-notification wds-warning "
 >
   <div
     className="wds-banner-notification__icon"
@@ -99,9 +99,9 @@ exports[`Notification renders correctly 3`] = `
 </div>
 `;
 
-exports[`Notification renders correctly 4`] = `
+exports[`BannerNotification renders correctly 4`] = `
 <div
-  className="wds-banner-notification wds-alert"
+  className="wds-banner-notification wds-alert "
 >
   <div
     className="wds-banner-notification__icon"
@@ -131,3 +131,99 @@ exports[`Notification renders correctly 4`] = `
   </svg>
 </div>
 `;
+
+exports[`BannerNotification renders correctly without action 1`] = `
+<div
+  className="wds-banner-notification wds-message "
+>
+  <div
+    className="wds-banner-notification__icon"
+  >
+    <svg
+      className="wds-icon wds-icon-small"
+    >
+      <use
+        xlinkHref="#wds-icons-flag-small"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      />
+    </svg>
+  </div>
+  <span
+    className="wds-banner-notification__text"
+  >
+    lorem ipsum - messge
+  </span>
+</div>
+`;
+
+exports[`BannerNotification renders correctly without action 2`] = `
+<div
+  className="wds-banner-notification wds-success "
+>
+  <div
+    className="wds-banner-notification__icon"
+  >
+    <svg
+      className="wds-icon wds-icon-small"
+    >
+      <use
+        xlinkHref="#wds-icons-checkmark-circle-small"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      />
+    </svg>
+  </div>
+  <span
+    className="wds-banner-notification__text"
+  >
+    lorem ipsum - success
+  </span>
+</div>
+`;
+
+exports[`BannerNotification renders correctly without action 3`] = `
+<div
+  className="wds-banner-notification wds-warning "
+>
+  <div
+    className="wds-banner-notification__icon"
+  >
+    <svg
+      className="wds-icon wds-icon-small"
+    >
+      <use
+        xlinkHref="#wds-icons-alert-small"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      />
+    </svg>
+  </div>
+  <span
+    className="wds-banner-notification__text"
+  >
+    lorem ipsum - warning
+  </span>
+</div>
+`;
+
+exports[`BannerNotification renders correctly without action 4`] = `
+<div
+  className="wds-banner-notification wds-alert "
+>
+  <div
+    className="wds-banner-notification__icon"
+  >
+    <svg
+      className="wds-icon wds-icon-small"
+    >
+      <use
+        xlinkHref="#wds-icons-error-small"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      />
+    </svg>
+  </div>
+  <span
+    className="wds-banner-notification__text"
+  >
+    lorem ipsum - alert
+  </span>
+</div>
+`;

src/components/BannerNotifications/Notification/index.js → src/components/BannerNotification/index.js

@@ -27,24 +27,35 @@ function getClassName(type) {
   }
 }
 
-const Notification = ({type, message, onClose}) => (
-  <div className={`wds-banner-notification ${getClassName(type)}`}>
+/**
+ * This is a single component used in `BannerNotifications` component.
+ */
+const BannerNotification = ({className, type, text, onClose}) => (
+  <div className={`wds-banner-notification ${getClassName(type)} ${className}`}>
     <div className="wds-banner-notification__icon">
       <svg className="wds-icon wds-icon-small">
         <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref={getIcon(type)} />
       </svg>
     </div>
-    <span className="wds-banner-notification__text">{message}</span>
-    <svg className="wds-icon wds-icon-tiny wds-banner-notification__close" onClick={onClose}>
-      <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#wds-icons-cross-tiny" />
-    </svg>
+    <span className="wds-banner-notification__text">{text}</span>
+    {onClose && (
+      <svg className="wds-icon wds-icon-tiny wds-banner-notification__close" onClick={onClose}>
+        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#wds-icons-cross-tiny" />
+      </svg>
+    )}
   </div>
 );
 
-Notification.propTypes = {
+BannerNotification.propTypes = {
+  className: PropTypes.string,
   type: PropTypes.oneOf(['alert', 'warning', 'success', 'message']).isRequired,
-  message: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
+  text: PropTypes.string.isRequired,
+  onClose: PropTypes.func,
+};
+
+BannerNotification.defaultProps = {
+  className: '',
+  onClose: null,
 };
 
-export default Notification;
+export default BannerNotification;

src/components/BannerNotification/index.spec.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {shallow} from 'enzyme';
+import sinon from 'sinon';
+
+import BannerNotification from './index';
+
+const noop = () => {};
+
+/* eslint-disable no-alert */
+test('BannerNotification renders correctly', () => {
+  let component = renderer.create(
+    <BannerNotification type={'message'} text={'lorem ipsum - messge'} onClose={noop} />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+
+  component = renderer.create(
+    <BannerNotification type={'success'} text={'lorem ipsum - success'} onClose={noop} />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+
+  component = renderer.create(
+    <BannerNotification type={'warning'} text={'lorem ipsum - warning'} onClose={noop} />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+
+  component = renderer.create(
+    <BannerNotification type={'alert'} text={'lorem ipsum - alert'} onClose={noop} />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('BannerNotification renders correctly without action', () => {
+  let component = renderer.create(
+    <BannerNotification type={'message'} text={'lorem ipsum - messge'} />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+
+  component = renderer.create(
+    <BannerNotification type={'success'} text={'lorem ipsum - success'} />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+
+  component = renderer.create(
+    <BannerNotification type={'warning'} text={'lorem ipsum - warning'} />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+
+  component = renderer.create(
+    <BannerNotification type={'alert'} text={'lorem ipsum - alert'} />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('BannerNotification onClose hander is invoked', () => {
+  const mockOnClick = sinon.spy();
+  const wrapper = shallow(
+    <BannerNotification type={'message'} text={'lorem ipsum - messge'} onClose={mockOnClick} />
+  );
+
+  wrapper.find('.wds-banner-notification__close').simulate('click');
+
+  expect(mockOnClick.calledOnce).toBe(true);
+});

src/components/BannerNotifications/README.md

@@ -8,22 +8,23 @@ But with proper data it can display all the messages:
 const messages4 = [
   {
     type: 'message',
-    message: 'this is a message',
+    text: 'this is a permanent message',
     id: '1',
+    permanent: true,
   },
   {
     type: 'success',
-    message: 'this is a success',
+    text: 'this is a success',
     id: '2',
   },
   {
     type: 'warning',
-    message: 'this is a warning',
+    text: 'this is a warning',
     id: '3',
   },
   {
     type: 'alert',
-    message: 'this is an alert',
+    text: 'this is an alert',
     id: '4',
   },
 ];<BannerNotifications messages={messages4} onClose={() => {}} />