add a modal component

.storybook/addons.js

@@ -1 +1,2 @@
 import '@storybook/addon-options/register';
+import '@storybook/addon-actions/register';

.storybook/config.js

@@ -7,7 +7,7 @@ import CssJail from '../src/CssJail';
 setTimeout(() => setOptions({
   name: '💎 PARAGON',
   url: 'https://github.com/edx/paragon',
-  showDownPanel: false,
+  showDownPanel: true,
 }), 1000);
 
 const req = require.context('../src', true, /\.stories\.jsx$/);

package.json

@@ -24,6 +24,7 @@
     "react-dom": "^15.5.4"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^3.2.12",
     "@storybook/addon-options": "^3.2.6",
     "@storybook/addon-storyshots": "^3.2.8",
     "@storybook/react": "3.2.8",

src/Button/index.jsx

@@ -37,7 +37,7 @@ function Button(props) {
   );
 }
 
-Button.propTypes = {
+export const buttonPropTypes = {
   buttonType: PropTypes.string,
   className: PropTypes.arrayOf(PropTypes.string),
   display: PropTypes.string.isRequired,
@@ -48,6 +48,8 @@ Button.propTypes = {
   type: PropTypes.string,
 };
 
+Button.propTypes = buttonPropTypes;
+
 Button.defaultProps = {
   buttonType: undefined,
   className: [],

src/Dropdown/Dropdown.test.jsx

@@ -149,16 +149,46 @@ describe('<Dropdown />', () => {
       });
     });
 
+    describe('invalid key in open menu', () => {
+      it('test', () => {
+        menuOpen(true, wrapper);
+        expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true);
+        wrapper.find('a').at(0).simulate('keyDown', { key: 'q' });
+        menuOpen(true, wrapper);
+        expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true);
+      });
+    });
+
     it('first menu item after looping through', () => {
       wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] });
       wrapper.find('a').at(1).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] });
       wrapper.find('a').at(2).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] });
       expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true);
     });
 
-    it('toggle on close', () => {
-      wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.CLOSE_MENU[0] });
-      expect(wrapper.find('[type="button"]').matchesElement(document.activeElement)).toEqual(true);
+    describe('toggle', () => {
+      it('toggle on close', () => {
+        wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.CLOSE_MENU[0] });
+        expect(wrapper.find('[type="button"]').matchesElement(document.activeElement)).toEqual(true);
+      });
+
+      it('does not toggle with invalid key', () => {
+        wrapper = mount(
+          <Dropdown
+            {...props}
+          />,
+        );
+
+        menuOpen(false, wrapper);
+        // open and close button to get focus on button
+        wrapper.find('[type="button"]').simulate('click');
+        wrapper.find('[type="button"]').simulate('click');
+        expect(wrapper.find('[type="button"]').matchesElement(document.activeElement)).toEqual(true);
+
+        wrapper.find('[type="button"]').simulate('keyDown', { key: 'q' });
+        menuOpen(false, wrapper);
+        expect(wrapper.find('[type="button"]').matchesElement(document.activeElement)).toEqual(true);
+      });
     });
   });
 });

src/Modal/Modal.scss

@@ -0,0 +1,5 @@
+@import "~bootstrap/scss/_modal";
+
+.modal-open {
+    display: block;
+}

src/Modal/Modal.stories.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import PropTypes from 'prop-types';
+
+import Modal from './index';
+import Button from '../Button';
+import InputText from '../InputText';
+
+class ModalWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.openModal = this.openModal.bind(this);
+    this.resetModalWrapperState = this.resetModalWrapperState.bind(this);
+
+    this.state = { open: false };
+  }
+
+  openModal() {
+    this.setState({ open: true });
+  }
+
+  resetModalWrapperState() {
+    this.setState({ open: false });
+    this.button.focus();
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          open={this.state.open}
+          title={this.props.title}
+          body={this.props.body}
+          onClose={this.resetModalWrapperState}
+        />
+        <Button
+          onClick={this.openModal}
+          display="Click me to open a modal!"
+          buttonType="light"
+          inputRef={(input) => { this.button = input; }}
+        />
+      </div>
+    );
+  }
+}
+
+ModalWrapper.propTypes = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+};
+
+ModalWrapper.defaultProps = {
+  open: false,
+};
+
+storiesOf('Modal', module)
+  .add('basic usage', () => (
+    <Modal
+      open
+      title="Modal title."
+      body="Modal body."
+      onClose={() => {}}
+    />
+  ))
+  .add('configurable buttons', () => (
+    <Modal
+      open
+      title="Modal title."
+      body="Modal body."
+      buttons={[
+        <Button
+          display="Blue button!"
+          buttonType="primary"
+        />,
+        {
+          display: 'Red button!',
+          buttonType: 'danger',
+        },
+        <Button
+          display="Green button!"
+          buttonType="success"
+        />,
+      ]}
+      onClose={() => {}}
+    />
+  ))
+  .add('configurable title and body', () => (
+    <Modal
+      open
+      title="Custom title!"
+      body="Custom body!"
+      buttons={[
+        <Button
+          display="Dark button!"
+          buttonType="dark"
+        />,
+      ]}
+      onClose={() => {}}
+    />
+  ))
+  .add('configurable buttons that perform actions', () => (
+    <Modal
+      open
+      title="Modal title."
+      body="Modal body."
+      buttons={[
+        <Button
+          display="Click me and check the console!"
+          buttonType="light"
+          onClick={action('button-click')}
+        />,
+      ]}
+      onClose={() => {}}
+    />
+  ))
+  .add('configurable close button', () => (
+    <Modal
+      open
+      title="Modal title."
+      body="Modal body."
+      closeText="SHOO!"
+      onClose={() => {}}
+    />
+  ))
+  .add('modal invoked via a button', () => (
+    <ModalWrapper
+      title="I am the modal!"
+      body="I was invoked by a button!"
+    />
+  ))
+  .add('modal with element body', () => (
+    <Modal
+      open
+      title="Modal title."
+      body={(
+        <div>
+          <p>Enter your e-mail address to receive free cat facts!</p>
+          <InputText
+            name="e-mail"
+            label="E-Mail Address"
+          />
+          <Button
+            display="Get my facts!"
+          />
+        </div>
+      )}
+      onClose={() => {}}
+    />
+  ));