feat(ui): add Notification component

app/components/UI/Notification.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Card, Flex, Text } from 'rebass'
+import MdClose from 'react-icons/lib/md/close'
+import SystemSuccess from 'components/Icon/SystemSuccess'
+import SystemWarning from 'components/Icon/SystemWarning'
+import SystemError from 'components/Icon/SystemError'
+import Spinner from './Spinner'
+
+/**
+ * @render react
+ * @name Notification
+ * @example
+ * <Notification variant="success">Success message</Success/>
+ */
+class Notification extends React.Component {
+  static displayName = 'Notification'
+
+  static defaultProps = {
+    processing: false,
+    variant: 'success'
+  }
+
+  static propTypes = {
+    children: PropTypes.node,
+    processing: PropTypes.bool,
+    variant: PropTypes.string
+  }
+
+  render() {
+    const { children, processing, variant } = this.props
+    return (
+      <Card px={3} py={3} borderRadius="5px" {...this.props}>
+        <Flex justifyContent="space-between">
+          <Flex>
+            {processing && <Spinner size="2em" mr="0.5em" />}
+            {!processing && variant === 'success' && <SystemSuccess />}
+            {!processing && variant === 'warning' && <SystemWarning />}
+            {!processing && variant === 'error' && <SystemError />}
+            <Text ml={2}>{children}</Text>
+          </Flex>
+          <MdClose />
+        </Flex>
+      </Card>
+    )
+  }
+}
+
+export default Notification

stories/components/notification.stories.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Notification from 'components/UI/Notification'
+
+storiesOf('Components.Notification', module)
+  .add('Success', () => <Notification variant="success">Success message</Notification>)
+  .add('Warning', () => <Notification variant="warning">Warning message</Notification>)
+  .add('Error', () => <Notification variant="error">Error message</Notification>)
+  .add('Processing', () => <Notification processing>Processing message</Notification>)

test/unit/components/UI/Notification.spec.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import Notification from 'components/UI/Notification'
+import renderer from 'react-test-renderer'
+import { configure, shallow } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import SystemSuccess from 'components/Icon/SystemSuccess'
+import SystemWarning from 'components/Icon/SystemWarning'
+import SystemError from 'components/Icon/SystemError'
+import Spinner from 'components/UI/Spinner'
+
+configure({ adapter: new Adapter() })
+
+describe('component.UI.Notification', () => {
+  it('should render correctly', () => {
+    const tree = renderer.create(<Notification />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  describe('variant = success', () => {
+    it('should render with the success icon', () => {
+      const wrapper = shallow(<Notification variant="success" />)
+      expect(wrapper.find(SystemSuccess)).toHaveLength(1)
+    })
+  })
+
+  describe('variant = warning', () => {
+    it('should render with the warning icon', () => {
+      const wrapper = shallow(<Notification variant="warning" />)
+      expect(wrapper.find(SystemWarning)).toHaveLength(1)
+    })
+  })
+
+  describe('variant = error', () => {
+    it('should render with the error icon', () => {
+      const wrapper = shallow(<Notification variant="error" />)
+      expect(wrapper.find(SystemError)).toHaveLength(1)
+    })
+  })
+
+  describe('processing', () => {
+    it('should render with the spinner', () => {
+      const wrapper = shallow(<Notification processing />)
+      expect(wrapper.find(Spinner)).toHaveLength(1)
+    })
+  })
+})

test/unit/components/UI/__snapshots__/Notification.spec.js.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.Notification should render correctly 1`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  margin-left: 8px;
+}
+
+.c0 {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  border-radius: 5px;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        preserveAspectRatio="xMidYMid meet"
+        style={
+          Object {
+            "color": undefined,
+            "verticalAlign": "middle",
+          }
+        }
+        viewBox="0 0 40 40"
+        width="1em"
+      >
+        <g>
+          <path
+            d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z"
+          />
+        </g>
+      </svg>
+      <div
+        className="c3"
+      />
+    </div>
+    <svg
+      fill="currentColor"
+      height="1em"
+      preserveAspectRatio="xMidYMid meet"
+      style={
+        Object {
+          "color": undefined,
+          "verticalAlign": "middle",
+        }
+      }
+      viewBox="0 0 40 40"
+      width="1em"
+    >
+      <g>
+        <path
+          d="m31.6 10.7l-9.3 9.3 9.3 9.3-2.3 2.3-9.3-9.3-9.3 9.3-2.3-2.3 9.3-9.3-9.3-9.3 2.3-2.3 9.3 9.3 9.3-9.3z"
+        />
+      </g>
+    </svg>
+  </div>
+</div>
+`;