reworking notification component

ui/src/components/close/index.js

@@ -0,0 +1,39 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
+const React = require('react');
+const Styled = require('styled-components');
+const closeIcon = require('../../shared/assets/close');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const Close = ({
+  style,
+  onClick
+}) => {
+  return (
+    <StyledButton
+      style={style}
+      onClick={onClick}
+    >
+      <img src={closeIcon} alt="Close"/>
+    </StyledButton>
+  );
+};
+
+Close.propTypes = {
+  style: React.PropTypes.object,
+  onClick: React.PropTypes.func
+};
+
+module.exports = Close;

ui/src/components/close/readme.md

@@ -0,0 +1,65 @@
+# `<Notification>`
+
+## demo
+
+```embed  
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Notificaton = require('./index.js');
+const styles = require('./style.css');
+
+const style = {
+  marginBottom: 0
+}
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Notificaton type='warning' icon='exclamation'>
+          <p style={style}>This is the warning content</p>
+        </Notificaton>
+      </Column>
+    </Row>
+    <Row>
+      <Column>
+        <Notificaton type='warning' icon='question'>
+          <p style={style}>This is the question content</p>   
+        </Notificaton>
+      </Column>
+    </Row>
+    <Row>
+      <Column>
+        <Notificaton type='alert' icon='exclamation'>
+          <p style={style}>This is the alert content</p>   
+        </Notificaton>
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Notificaton = require('ui/avatar');
+
+module.exports = () => {
+  return (
+    <Notificaton type='warning' icon='question'>  
+      <p>This is the warning content</p>
+    </Notificaton>
+    <Notificaton type='warning' icon='question'>
+      <p>This is the question content</p>
+    </Notificaton>
+    <Notificaton type='alert' icon='exclamation'>
+      <p>This is the alert content</p>
+    </Notificaton>
+  );
+}
+```

ui/src/components/notification/index.js

@@ -1,6 +1,6 @@
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
-const match = require('../../shared/match');
+const composers = require('../../shared/composers');
 const React = require('react');
 const Styled = require('styled-components');
 
@@ -12,44 +12,46 @@ const {
   remcalc
 } = fns;
 
-const {
-  prop: matchProp
-} = match;
-
 const {
   default: styled
 } = Styled;
 
-const background = matchProp({
-  warning: colors.warningLight,
-  alert: colors.alertLight,
-}, 'transparent');
+const {
+  baseBox,
+  pseudoEl
+} = composers;
 
-const border = matchProp({
-  warning: colors.warning,
-  alert: 'red',
-}, 'none');
+const decorationWidth = remcalc(108);
 
 const StyledNotification = styled.div`
-  border-radius: 4px;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
   display: inline-block;
-  height: 100%;
+  min-height: 100%;
+  position: relative;
+  width: 100%;
 
-  background-color: ${background('type')};
-  border: ${border('type')};
+  ${baseBox(0)}
+  
+  &::before {
+    background-color: ${props => colors[props.type] || colors.brandPrimary}
+    width: ${decorationWidth};
+    height: 100%;
+    
+    ${pseudoEl()}
+  }
 `;
 
 const StyledContent = styled.div`
   float: left;
-  padding: ${remcalc(20)};
+  padding: ${remcalc(18)} 20% ${remcalc(18)} ${remcalc(18)};
+  margin-left: ${decorationWidth};
+  width: 100%;
 `;
 
 const Notificaton = ({
   children,
   className,
   style,
-  type = ''
+  type
 }) => {
   return (
     <StyledNotification
@@ -68,7 +70,7 @@ Notificaton.propTypes = {
   children: React.PropTypes.object,
   className: React.PropTypes.str,
   style: React.PropTypes.object,
-  type: React.PropTypes.str
+  type: React.PropTypes.string
 };
 
 module.exports = Notificaton;

ui/src/shared/constants/colors.js

@@ -33,6 +33,7 @@ const notifications = {
   alert: '#DA4B42',
   alertLight: '#FFC7C7',
   confirmation: '#00AF66',
+  success: '#00AF66',
   warning: '#E4A800',
   warningLight: '#FFFAED',
 };

ui/stories/index.js

@@ -242,19 +242,25 @@ storiesOf('Modal', module)
 
 storiesOf('Notificaton', module)
   .add('Default', () => (
-    <Notificaton>
-      <span>This is the default content</span>
-    </Notificaton>
+    <Base>
+      <Notificaton>
+        <span>This is the default content</span>
+      </Notificaton>
+    </Base>
   ))
-  .add('warning', () => (
-    <Notificaton type='warning'>
-      <span>This is the warning content</span>
-    </Notificaton>
+  .add('Success', () => (
+    <Base>
+      <Notificaton type="success">
+        <span>This is the success content</span>
+      </Notificaton>
+    </Base>
   ))
-  .add('alert', () => (
-    <Notificaton type='alert'>
-      <span>This is the alert content</span>
-    </Notificaton>
+  .add('Alert', () => (
+    <Base>
+      <Notificaton type="alert">
+        <span>This is the alert content</span>
+      </Notificaton>
+    </Base>
   ));
 
 storiesOf('Pagination', module)