From 0cc21f83d931c78b0e14b5aac636c98df0af8294 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Tue, 10 Jan 2017 17:00:23 +0000
Subject: [PATCH] creating close icon component

---
 ui/src/components/close/index.js  |  29 ++++++-------
 ui/src/components/close/readme.md |  65 ------------------------------
 ui/src/index.js                   |   1 +
 ui/src/shared/assets/close.png    | Bin 0 -> 345 bytes
 ui/stories/index.js               |   6 +++
 5 files changed, 20 insertions(+), 81 deletions(-)
 delete mode 100644 ui/src/components/close/readme.md
 create mode 100644 ui/src/shared/assets/close.png

diff --git a/ui/src/components/close/index.js b/ui/src/components/close/index.js
index 2f1c6aec..2380337d 100644
--- a/ui/src/components/close/index.js
+++ b/ui/src/components/close/index.js
@@ -1,39 +1,36 @@
-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 closeIcon = require('../../shared/assets/close.png');
 
 const {
   default: styled
 } = Styled;
 
+const StyledButton = styled.button`
+  background: none;
+  border: none;
+`;
+
 const Close = ({
   style,
   onClick
 }) => {
   return (
     <StyledButton
-      style={style}
       onClick={onClick}
+      style={style}
     >
-      <img src={closeIcon} alt="Close"/>
+      <img
+        alt="Close"
+        src={closeIcon}
+      />
     </StyledButton>
   );
 };
 
 Close.propTypes = {
-  style: React.PropTypes.object,
-  onClick: React.PropTypes.func
+  onClick: React.PropTypes.func,
+  style: React.PropTypes.object
 };
 
 module.exports = Close;
diff --git a/ui/src/components/close/readme.md b/ui/src/components/close/readme.md
deleted file mode 100644
index a114f555..00000000
--- a/ui/src/components/close/readme.md
+++ /dev/null
@@ -1,65 +0,0 @@
-# `<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>
-  );
-}
-```
diff --git a/ui/src/index.js b/ui/src/index.js
index 86b9c453..b638bdc6 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -7,6 +7,7 @@ module.exports = {
   Checkbox: require('./components/checkbox'),
   Column: require('./components/column'),
   Container: require('./components/container'),
+  Close: require('./components/close'),
   Input: require('./components/input'),
   List: require('./components/list'),
   Modal: require('./components/modal'),
diff --git a/ui/src/shared/assets/close.png b/ui/src/shared/assets/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..94fca5fadc9930a49dbe73bd5231eb6707370e3d
GIT binary patch
literal 345
zcmV-f0jB<mP)<h;3K|Lk000e1NJLTq000aC000aK1^@s6R&`wG00001b5ch_0Itp)
z=>Px$6G=otR45f={{R0!<MZdwtF5f8Zk#%G>Kg+VkeZrmU~Fvcb?)4`^NeX}Y1RM!
z{cB-lWW373!QnW0^5oaZdO(VShVBK52?Eu4GqJO?&jKk13TprO@ne5(ZmuXy1CnAP
zpqfoUyoV7a2~q@74AKPB46+Hxmxh`QQoIp}LubvJ^&6}KT@#Rh9f-w&7)3Ei9b5y5
z1G4G+_wNUROid6UXzCUq4g#4B;)4Jago2PDX8>6slVLy+=tlt<2Smd)pm`8vGS+|q
zYd}*B@?a3i<JdGYVo?kZ4UqNNLJwqv5fFnS1s-%D#UKERL}q4YC#X#dzkdBv0ZRaF
r@dU;=E0}|Y$jHbLOHWU?1W5q^@AaVxzwRjh00000NkvXXu0mjfBlw5k

literal 0
HcmV?d00001

diff --git a/ui/stories/index.js b/ui/stories/index.js
index e255249b..2974161e 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -12,6 +12,7 @@ const {
   Checkbox,
   Row,
   Column,
+  Close,
   AddMetric: {
     AddMetricButton,
     AddMetricDescription,
@@ -353,6 +354,11 @@ storiesOf('Tabs', module)
     </Tabs>
   ));
 
+storiesOf('Close', module)
+  .add('Default', () => (
+    <Close onClick={function noop() {}} />
+  ));
+
 storiesOf('Toggle', module)
   .add('default', () => (
     <Toggle checked />