From 96a8305b4a029f8e4c52e195a3733c8a6837bbae Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Tue, 22 Nov 2016 16:45:22 +0000
Subject: [PATCH] adding in modal

---
 ui/src/components/modal/index.js  | 66 +++++++++++++++++++++++++++++++
 ui/src/components/modal/readme.md | 41 +++++++++++++++++++
 ui/src/components/modal/style.css | 36 +++++++++++++++++
 3 files changed, 143 insertions(+)
 create mode 100644 ui/src/components/modal/index.js
 create mode 100644 ui/src/components/modal/readme.md
 create mode 100644 ui/src/components/modal/style.css

diff --git a/ui/src/components/modal/index.js b/ui/src/components/modal/index.js
new file mode 100644
index 00000000..239ca02c
--- /dev/null
+++ b/ui/src/components/modal/index.js
@@ -0,0 +1,66 @@
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const Modal = React.createClass({
+
+  propTypes: {
+    children: React.PropTypes.node,
+    className: React.PropTypes.string,
+    name: React.PropTypes.string,
+  },
+
+  getInitialState: function() {
+    return {
+      active: false
+    };
+  },
+
+  handleReveal: function(e) {
+    e.preventDefault();
+    this.setState({
+      active: true
+    });
+  },
+
+  render: function() {
+    const {
+      children,
+      className,
+      name
+    } = this.props;
+
+    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
+          aria-label={name}
+          onClick={this.handleReveal}
+          tabIndex={0}
+        >
+          Click me to reveal modal
+        </a>
+
+        <div className={overlay} />
+        <section aria-label={name} className={modal} >
+          <span className={styles.close}>X</span>
+          <h2>This is the Modal</h2>
+          {children}
+        </section>
+      </div>
+    );
+  }
+});
+
+module.exports = Modal;
diff --git a/ui/src/components/modal/readme.md b/ui/src/components/modal/readme.md
new file mode 100644
index 00000000..bb6cc58a
--- /dev/null
+++ b/ui/src/components/modal/readme.md
@@ -0,0 +1,41 @@
+# `<Modal>    `
+
+## 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 Modal = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>  
+        <Modal active name="modal1" >
+          Create an Instance
+        </Modal>
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Modal = require('ui/button');
+
+module.exports = () => {
+  return (
+    <Modal>
+      Hello World
+    </Modal>
+  );
+}
+```
diff --git a/ui/src/components/modal/style.css b/ui/src/components/modal/style.css
new file mode 100644
index 00000000..8ce79f52
--- /dev/null
+++ b/ui/src/components/modal/style.css
@@ -0,0 +1,36 @@
+.overlay-active {
+  background: rgba(0, 0, 0, 0.4);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+
+.modal {
+  background: white;
+  display: none;
+  left: 50%;
+  margin: 0 auto;
+  padding: 20px;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+.modal-active {
+  display: block;
+}
+
+.close {
+  background: red;
+  color: black;
+  font-size: 24px;
+  padding: 0 10px;
+  position: absolute;
+  right: -20px;
+  text-align: center;
+  top: -15px;
+}