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 ? () : null;
+
return (
+ { renderClose }
+
{children}
@@ -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', () => (
-
- This is the success content
+
+ This is a success notification that is closable
))