creating notification component and adding in shared values and new composer

ui/docs/root.js

@@ -2,7 +2,6 @@ const React = require('react');
 const ReactHotLoader = require('react-hot-loader');
 const ReactRouter = require('react-router');
 
-// const App = require('../src/components/icon/');
 const App = require('./containers/app/');
 
 const {

ui/src/components/icon/index.js

@@ -17,8 +17,8 @@ const Icon = ({
   );
 
   return (
-    <div>
+    <div className={cn}>
-      <Component className={cn} style={style} />
+      <Component style={style} />
     </div>
   );
 };

ui/src/components/notification/index.js

@@ -0,0 +1,54 @@
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+const Icon = require('../icon');
+
+const Notificaton = ({
+  children,
+  className,
+  style,
+  type = '',
+  icon = ''
+}) => {
+
+  const cn = classNames(
+    className,
+    styles[`notification__${type}`],
+    styles.notification
+  );
+
+  const iconClass = classNames(
+    className,
+    styles.notification__icon,
+    styles[`notification__icon--${type}`]
+  );
+
+  return (
+    <div
+      className={cn}
+      style={style}
+      type={type}
+    >
+      { icon ? (
+        <Icon
+          className={iconClass}
+          iconSet="fa"
+          name={icon}
+        />
+      ) : null }
+      <div className={styles.notification__content}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+Notificaton.propTypes = {
+  children: React.PropTypes.object,
+  className: React.PropTypes.str,
+  icon: React.PropTypes.str,
+  style: React.PropTypes.object,
+  type: React.PropTypes.str
+};
+
+module.exports = Notificaton;

ui/src/components/notification/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='warning' icon='question'>
+          <p style={style}>This is the question content</p>   
+        </Notificaton>
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Notificaton = require('ui/avatar');
+
+module.exports = () => {
+  return (
+    <Notificaton type='warning' icon='exclamation'>  
+      <p>This is the warning content</p>
+    </Notificaton>
+    <Notificaton type='warning' icon='question'>
+      <p>This is the warning content</p>
+    </Notificaton>
+    <Notificaton type='warning' icon='question'>
+      <p>This is the warning content</p>
+    </Notificaton>
+  );
+}
+```

ui/src/components/notification/style.css

@@ -0,0 +1,54 @@
+~colors: "../../shared/constants.js";
+
+@define-mixin block-decoration $background, $color {
+  background-color: $background;
+  border: solid 1px $color;
+}
+
+@define-mixin icon-decoration $background, $color {
+  background: $background;
+  color: $color;
+}
+
+.notification {
+  border-radius: 4px;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+  composes: clearfix from "../../shared/composers.css";
+  height: 100%;
+
+  &__warning {
+    @add-mixin block-decoration ~colors.warningLight, ~colors.warning;
+  }
+
+  &__alert {
+    @add-mixin block-decoration ~colors.alertLight, red;
+  }
+
+  &__content {
+    float: left;
+    padding: remcalc(20);
+  }
+
+  &__icon {
+    display: inline-block;
+    float: left;
+    height: 100%;
+    min-height: 100%;
+    padding: remcalc(15);
+    text-align: center;
+
+    & svg {
+      position: relative;
+      top: 50%;
+      transform: translateY(-100%);
+    }
+
+    &--warning {
+      @add-mixin icon-decoration ~colors.warning, white;
+    }
+
+    &--alert {
+      @add-mixin icon-decoration ~colors.alert, white;
+    }
+  }
+}

ui/src/docs.js

@@ -19,6 +19,7 @@ module.exports = {
     'Button Icon': require('./components/button-icon/readme.md'),
     'Range Slider': require('./components/range-slider/readme.md'),
     Toggle: require('./components/toggle/readme.md'),
+    Notificaton: require('./components/notification/readme.md'),
     Checkbox: require('./components/checkbox/readme.md'),
     Tab: require('./components/tab/readme.md'),
     Tabs: require('./components/tabs/readme.md'),

ui/src/index.js

@@ -10,6 +10,7 @@ module.exports = {
   Tab: require('./components/tab'),
   Tabs: require('./components/tabs'),
   Toggle: require('./components/toggle'),
+  Notificaton: require('./components/notification'),
   Input: require('./components/input'),
   Icon: require('./components/icon'),
   RangeSlider: require('./components/range-slider'),

ui/src/shared/composers.css

@@ -5,3 +5,19 @@
   top: 50%;
   transform: translate(-50%, -50%);
 }
+
+.clear {
+  clear: both;
+}
+
+.clearfix {
+  &::before,
+  &::after {
+    content: "";
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}

ui/src/shared/constants.js

@@ -88,7 +88,11 @@ const colors = {
   confirmation: '#38C647',
   background: '#ffffff',
   border: '#D8D8D8',
-  borderSelected: '#1D35BC'
+  borderSelected: '#1D35BC',
+  warning: '#e4a800',
+  warningLight: '#fffaed',
+  alert: '#D0011B',
+  alertLight: '#ffc7c7'
 };
 
 const typography = {