Adding modal to side nav and refactoring

ui/src/components/modal/index.js

@@ -8,6 +8,7 @@ const Modal = React.createClass({
     children: React.PropTypes.node,
     className: React.PropTypes.string,
     name: React.PropTypes.string,
+    trigger: React.PropTypes.func.isRequired
   },
 
   getInitialState: function() {
@@ -19,7 +20,7 @@ const Modal = React.createClass({
   handleReveal: function(e) {
     e.preventDefault();
     this.setState({
-      active: true
+      active: this.state.active ? false : true
     });
   },
 
@@ -27,37 +28,68 @@ const Modal = React.createClass({
     const {
       children,
       className,
-      name
+      name,
+      trigger
     } = this.props;
 
+    const {
+      active
+    } = this.state;
+
+    const {
+      handleReveal
+    } = this;
+
+    const triggerClass = classNames(
+      className,
+      styles.trigger
+    );
+
     const modal = classNames(
       className,
       styles.modal,
-      this.state.active ? styles['modal-active'] : ''
     );
 
     const overlay = classNames(
       className,
       styles.overlay,
-      this.state.active ? styles['overlay-active'] : ''
     );
 
     return (
       <div>
-        <a
+        <span
           aria-label={name}
-          onClick={this.handleReveal}
+          className={triggerClass}
+          href="#"
+          onClick={handleReveal}
+          role="link"
           tabIndex={0}
         >
-          Click me to reveal modal
+          {trigger()}
-        </a>
+        </span>
 
-        <div className={overlay} />
+        { active ? (
-        <section aria-label={name} className={modal} >
+          <div
-          <span className={styles.close}>X</span>
+            aria-label="overlay"
-          <h2>This is the Modal</h2>
+            className={overlay}
-          {children}
+            onClick={handleReveal}
-        </section>
+            role="link"
+            tabIndex={-2}
+          />
+        ) : null }
+
+        { active ? (
+          <div aria-label={name} className={modal} >
+            <button
+              className={styles.close}
+              href='#'
+              onClick={handleReveal}
+              role="dialog"
+              tabIndex={-1}
+            >X</button>
+            {children}
+          </div>
+        ) : null }
       </div>
     );
   }

ui/src/components/modal/readme.md

@@ -12,15 +12,21 @@ const Column = require('../column');
 const Modal = require('./index.js');
 const styles = require('./style.css');
 
+const trigger = () => {
+  return (
+    <p>This is the trigger</p>
+  )
+};
+
 nmodule.exports = ReactDOM.renderToString(
   <Base>
     <Row>
       <Column>  
-        <Modal active name="modal1" >
+        <Modal name="modal1" trigger={trigger} >
-          Create an Instance
+          <h2>This is the Modal</h2>
         </Modal>
       </Column>
-    </Row>
+    </Row>  
   </Base>
 );
 ```
@@ -31,10 +37,16 @@ nmodule.exports = ReactDOM.renderToString(
 const React = require('react');
 const Modal = require('ui/button');
 
+const trigger = () => {
+  return (
+    <p>This is the trigger</p>
+  )
+};
+
 module.exports = () => {
   return (
-    <Modal>
+    <Modal name="modal1" trigger={trigger} >
-      Hello World
+      <h2>This is the Modal</h2>
     </Modal>
   );
 }

ui/src/components/modal/style.css

@@ -1,4 +1,4 @@
-.overlay-active {
+.overlay {
   background: rgba(0, 0, 0, 0.4);
   height: 100%;
   left: 0;
@@ -10,7 +10,7 @@
 
 .modal {
   background: white;
-  display: none;
+  display: block;
   left: 50%;
   margin: 0 auto;
   padding: 20px;
@@ -20,17 +20,24 @@
   z-index: 1;
 }
 
-.modal-active {
-  display: block;
-}
-
 .close {
-  background: red;
+  background-color: #FFFFFF;
+  border: solid 1px #D8D8D8;
+  border-radius: 4px;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
   color: black;
-  font-size: 24px;
+  cursor: #000000;
+  font-size: 20px;
   padding: 0 10px;
   position: absolute;
   right: -20px;
   text-align: center;
+  text-decoration: none;
   top: -15px;
 }
+
+.trigger {
+  cursor: pointer;
+  display: inline-block;
+  outline: none;
+}

ui/src/docs.js

@@ -21,7 +21,8 @@ module.exports = {
     Tab: require('./components/tab/readme.md'),
     Tabs: require('./components/tabs/readme.md'),
     Widget: require('./components/widget/readme.md'),
-    Pagination: require('./components/pagination/readme.md')
+    Pagination: require('./components/pagination/readme.md'),
+    Modal: require('./components/modal/readme.md')
   },
   FAQ: require('./faq.md')
 };

ui/src/index.js

@@ -15,5 +15,6 @@ module.exports = {
   RadioGroup: require('./components/radio-group'),
   Select: require('./components/select'),
   Widget: require('./components/widget'),
-  Pagination: require('./components/pagination')
+  Pagination: require('./components/pagination'),
+  Modal: require('./components/modal')
 };