creating close icon component

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;

ui/src/components/close/readme.md

@@ -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>
-  );
-}
-```

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'),

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 />