Merge pull request #23 from SparkPost/modal

FAD-5266 Add Modal

9 files changed, 147 insertions, 1 deletions

diff --git a/src/components/Grid/Column.js b/src/components/Grid/Column.js
index 450c69a..a4988e6 100644
--- a/src/components/Grid/Column.js
+++ b/src/components/Grid/Column.js
@@ -33,6 +33,7 @@ class Column extends Component {
     const colClasses = classnames(
       styles.Column,
       xs && styles[`xs-${xs}`],
+      sm && styles[`sm-${sm}`],
       md && styles[`md-${md}`],
       lg && styles[`lg-${lg}`],
       xl && styles[`xl-${xl}`],
diff --git a/src/components/Grid/Grid.js b/src/components/Grid/Grid.js
index f1cea0e..4c35a76 100644
--- a/src/components/Grid/Grid.js
+++ b/src/components/Grid/Grid.js
@@ -28,7 +28,8 @@ class Grid extends Component {
       children,
       start, center, end,
       top, middle, bottom,
-      around, between
+      around, between,
+      className
     } = this.props;
 
     const gridClasses = classnames(
@@ -41,6 +42,7 @@ class Grid extends Component {
       bottom && styles[`bottom-${bottom}`],
       around && styles[`around-${around}`],
       between && styles[`between-${between}`],
+      className
     );
 
     return <div className={gridClasses}>{ children }</div>;
diff --git a/src/components/Grid/Grid.module.scss b/src/components/Grid/Grid.module.scss
index d10a537..f01c1a8 100644
--- a/src/components/Grid/Grid.module.scss
+++ b/src/components/Grid/Grid.module.scss
@@ -103,6 +103,7 @@ $grid-columns: 12;
   box-sizing: border-box;
   flex: 0 0 auto;
   padding-left: $gutter-width;
+  text-align: left;
 }
 
 // Column
diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js
new file mode 100644
index 0000000..7278a33
--- /dev/null
+++ b/src/components/Modal/Modal.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import { Grid } from '../Grid';
+import styles from './Modal.module.scss';
+
+class Modal extends Component {
+  static propTypes = {
+    open: PropTypes.bool,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node
+    ])
+  };
+
+  render() {
+    const {
+      open,
+      children
+    } = this.props;
+
+    const modalClasses = classnames(
+      styles.Modal,
+      open && styles.open
+    );
+
+    return (
+      <div className={modalClasses}>
+        <Grid center='xs' middle='xs' className={styles.Grid}>
+          <Grid.Column xs={11} md={7} xl={5}>
+            <div className={styles.Content}>
+              { children }
+            </div>
+          </Grid.Column>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default Modal;
diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
new file mode 100644
index 0000000..fb9ed5f
--- /dev/null
+++ b/src/components/Modal/Modal.module.scss
@@ -0,0 +1,33 @@
+@import '../../styles/config';
+
+.Modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(color(gray, 2), 0.6);
+
+  opacity: 0;
+  pointer-events: none;
+  transition: 0.1s
+}
+
+.open {
+  opacity: 1;
+  pointer-events: auto;
+
+  .Content {
+    transform: translate(0, 0);
+  }
+}
+
+.Content {
+  max-width: breakpoint(small);
+  transform: translate(0, 9px);
+  transition: 0.1s ease-out;
+}
+
+.Grid {
+  height: 100%;
+}
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
new file mode 100644
index 0000000..c6b3568
--- /dev/null
+++ b/src/components/Modal/index.js
@@ -0,0 +1 @@
+export { default as Modal } from './Modal';
diff --git a/src/components/index.js b/src/components/index.js
index 5ea6430..6730f21 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,6 +4,7 @@ export * from './Checkbox';
 export * from './Datepicker';
 export * from './Grid';
 export * from './Icon';
+export * from './Modal';
 export * from './Page';
 export * from './Pagination';
 export * from './Panel';
diff --git a/stories/Modal.js b/stories/Modal.js
new file mode 100644
index 0000000..3dac3a5
--- /dev/null
+++ b/stories/Modal.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { StoryContainer } from './helpers';
+
+import { Modal, Panel, Button, Grid } from '../src';
+
+class ModalDemo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false
+    }
+  }
+
+  handleChange() {
+    this.setState({ open: !this.state.open });
+  }
+
+  render() {
+    const { label } = this.props;
+    return (
+      <div>
+        <a onClick={() => this.handleChange()}>Open modal</a>
+        <Modal open={this.state.open}>
+          <Panel title="Delete Template" sectioned accent>
+            <p>Are you sure you want to delete your template?</p>
+            <Button style={{ marginRight: '1rem' }} primary onClick={() => this.handleChange()}>Delete</Button>
+            <Button onClick={() => this.handleChange()}>Cancel</Button>
+          </Panel>
+        </Modal>
+      </div>
+
+    )
+  }
+};
+
+export default storiesOf('Modal', module)
+  .addDecorator((getStory) => (
+    <StoryContainer>{ getStory() }</StoryContainer>
+  ))
+
+  .addWithInfo('Open', () => {
+    return (
+      <Modal open>
+        <Panel title="Delete Template" sectioned accent>
+          <p>Are you sure you want to delete your template?</p>
+          <Button style={{ marginRight: '1rem' }} primary>Delete</Button>
+          <Button>Cancel</Button>
+        </Panel>
+      </Modal>
+    )
+  })
+
+  .addWithInfo('Toggle Example', () => {
+    return (
+      <span>
+        <ModalDemo />
+
+        {/* This is only here to display props below */}
+        <Modal/>
+      </span>
+    )
+  });
diff --git a/stories/index.js b/stories/index.js
index 87f80b4..31f6a8e 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -13,5 +13,6 @@ import './ProgressBar';
 import './Datepicker';
 import './Tooltip';
 import './Table';
+import './Modal';
 import './Icons';
 import './Grid';