remove Close dependency from Modal

ui/src/components/modal/index.js

@@ -4,8 +4,6 @@ const constants = require('../../shared/constants');
 const React = require('react');
 const Styled = require('styled-components');
 
-const Close = require('../close');
-
 const {
   colors
 } = constants;
@@ -19,17 +17,19 @@ const {
 } = Styled;
 
 const StyledModal = styled.div`
-  background: ${colors.brandSecondary};
-  display: block;
-  left: 50%;
-  margin: 0 auto;
-  padding: ${remcalc(20)};
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1;
   max-width: 80%;
   min-width: 50%;
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0 auto;
+  padding: ${remcalc(20)};
+  z-index: 1;
+
+  background: ${colors.brandSecondary};
+  border: ${remcalc(1)} solid ${colors.borderSecondary};
 `;
 
 const StyledOverlay = styled.div`
@@ -39,35 +39,24 @@ const StyledOverlay = styled.div`
   position: absolute;
   top: 0;
   width: 100%;
-  z-index: 0;
+  z-index: 1;
 `;
 
-const Modal = ({
+const Modal = (props) => {
-  active = true,
+  if (!props.active) {
-  children,
-  className,
-  customCloseStyle,
-  handleDismiss,
-  name,
-  style
-}) => {
-  if (!active) {
     return null;
   }
 
   return (
-    <div className={className} style={style}>
+    <div>
       <StyledOverlay
         aria-label='overlay'
+        onClick={props.handleDismiss}
         role='link'
         tabIndex={-2}
       />
-      <StyledModal aria-label={name}>
+      <StyledModal {...props}>
-        <Close
+        {props.children}
-          customStyles={customCloseStyle}
-          onClick={handleDismiss}
-        />
-        {children}
       </StyledModal>
     </div>
   );
@@ -76,11 +65,7 @@ const Modal = ({
 Modal.propTypes = {
   active: React.PropTypes.bool,
   children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  handleDismiss: React.PropTypes.func
-  customCloseStyle: React.PropTypes.string,
-  handleDismiss: React.PropTypes.func,
-  name: React.PropTypes.string,
-  style: React.PropTypes.object
 };
 
 module.exports = Modal;

ui/src/components/modal/story.js

@@ -1,46 +1,19 @@
-const constants = require('../../shared/constants');
-const fns = require('../../shared/functions');
 const React = require('react');
 
-const {
-  colors
-} = constants;
-
-const {
-  remcalc
-} = fns;
-
 const {
   storiesOf
 } = require('@kadira/storybook');
 
-const Base= require('../base');
+const Base = require('../base');
 const Modal = require('./');
-
+const Close = require('../close');
-const _customCloseStyle = `
-  border: solid ${colors.alert} ${remcalc(5)};
-  border-radius: 50%;
-`;
 
 storiesOf('Modal', module)
   .add('Default', () => (
     <Base>
       <Modal>
+        <Close />
         <h2>This is the Modal</h2>
       </Modal>
     </Base>
-  ))
+  ));
-  .add('Custom Styles on Close', () => (
-    <Base>
-      <Modal customCloseStyle={_customCloseStyle}>
-        <h2>This is the Modal</h2>
-      </Modal>
-    </Base>
-  ))
-  .add('Dismiss Function', () => (
-    <Base>
-      <Modal handleDismiss={function noop() {}}>
-        <p>This has a handleDismiss (noop) function</p>
-      </Modal>
-    </Base>
-  ));