making notifcations closable by adding function to props

ui/src/components/close/index.js

@@ -1,14 +1,22 @@
 const React = require('react');
 const Styled = require('styled-components');
 const closeIcon = require('../../shared/assets/close.png');
+const fns = require('../../shared/functions');
 
 const {
   default: styled
 } = Styled;
 
+const {
+  remcalc
+} = fns;
+
 const StyledButton = styled.button`
   background: none;
   border: none;
+  position: absolute;
+  top: ${remcalc(16)};
+  right: ${remcalc(16)};
 `;
 
 const Close = ({

ui/src/components/notification/index.js

@@ -3,6 +3,7 @@ const fns = require('../../shared/functions');
 const composers = require('../../shared/composers');
 const React = require('react');
 const Styled = require('styled-components');
+const Close = require('../close');
 
 const {
   colors
@@ -51,14 +52,19 @@ const Notificaton = ({
   children,
   className,
   style,
-  type
+  type,
+  close
 }) => {
+  const renderClose = close ? (<Close onClick={close} />) : null;
+
   return (
     <StyledNotification
       className={className}
       style={style}
       type={type}
     >
+      { renderClose  }
+
       <StyledContent>
         {children}
       </StyledContent>
@@ -69,6 +75,7 @@ const Notificaton = ({
 Notificaton.propTypes = {
   children: React.PropTypes.object,
   className: React.PropTypes.str,
+  close: React.PropTypes.func,
   style: React.PropTypes.object,
   type: React.PropTypes.string
 };

ui/stories/index.js

@@ -260,8 +260,11 @@ storiesOf('Notificaton', module)
   ))
   .add('Success', () => (
     <Base>
-      <Notificaton type="success">
-        <span>This is the success content</span>
+      <Notificaton
+        close={function noop() {}}
+        type="success"
+      >
+        <span>This is a success notification that is closable</span>
       </Notificaton>
     </Base>
   ))