From 4c80ca619f5f885a2368ba9571dde37fe23a66cf Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Tue, 10 Jan 2017 17:13:54 +0000
Subject: [PATCH] making notifcations closable by adding function to props

---
 ui/src/components/close/index.js        | 8 ++++++++
 ui/src/components/notification/index.js | 9 ++++++++-
 ui/stories/index.js                     | 7 +++++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/close/index.js b/ui/src/components/close/index.js
index 2380337d..8ff69263 100644
--- a/ui/src/components/close/index.js
+++ b/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 = ({
diff --git a/ui/src/components/notification/index.js b/ui/src/components/notification/index.js
index 88e3258c..619b559f 100644
--- a/ui/src/components/notification/index.js
+++ b/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
 };
diff --git a/ui/stories/index.js b/ui/stories/index.js
index 2974161e..9298b137 100644
--- a/ui/stories/index.js
+++ b/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>
   ))