Add <Dialog> element

.storybook/config.js

@@ -2,6 +2,7 @@ import { configure } from '@storybook/react';
 
 function loadStories() {
   require('../stories/button.jsx');
+  require('../stories/dialog.jsx');
   require('../stories/header.jsx');
 }
 

.storybook/preview-head.html

@@ -0,0 +1 @@
+<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default"></script>

assets/components/dialog/dialog.jsx

@@ -0,0 +1,115 @@
+// @flow
+
+// ----- Imports ----- //
+
+import React, { Component, type Node } from 'react';
+
+import { type Option } from 'helpers/types/option';
+import { classNameWithModifiers } from 'helpers/utilities';
+
+import './dialog.scss';
+
+
+// ----- Props ----- //
+
+export type PropTypes = {|
+  onStatusChange: (boolean) => void,
+  modal: boolean,
+  open: boolean,
+  'aria-label': Option<string>,
+  dismissOnBackgroundClick: boolean,
+  children: Node
+|};
+
+
+// ----- Component ----- //
+
+class Dialog extends Component<PropTypes> {
+
+  static defaultProps = {
+    onStatusChange: () => {},
+    modal: true,
+    open: false,
+    dismissOnBackgroundClick: false,
+  }
+
+  componentDidMount() {
+    if (this.props.open) {
+      this.open();
+    }
+  }
+
+  componentDidUpdate(prevProps: PropTypes) {
+    if (prevProps.open === true && this.props.open === false) {
+      this.close();
+    } else if (prevProps.open === false && this.props.open === true) {
+      this.open();
+    }
+  }
+
+  open() {
+    if (this.ref && this.ref.showModal) {
+      if (this.props.modal) {
+        this.ref.showModal();
+      } else {
+        this.ref.show();
+      }
+    }
+    requestAnimationFrame(() => {
+      if (this.ref) {
+        this.ref.focus();
+      }
+    });
+  }
+
+  close() {
+    if (this.ref && this.ref.close) {
+      this.ref.close();
+    }
+  }
+
+  ref: ?(HTMLDialogElement & {focus: Function});
+
+  render() {
+    const {
+      open, modal, children, onStatusChange, dismissOnBackgroundClick, ...otherProps
+    } = this.props;
+
+    return (
+      <dialog // eslint-disable-line jsx-a11y/no-redundant-roles
+        className={classNameWithModifiers('component-dialog', [modal ? 'modal' : null, open ? 'open' : null])}
+        aria-modal={modal}
+        aria-hidden={!open}
+        tabIndex="-1"
+        role="dialog"
+        onOpen={() => { onStatusChange(true); }}
+        onCancel={() => { onStatusChange(false); }}
+        ref={(d) => { this.ref = (d: any); }}
+        {...otherProps}
+      >
+        <div className="component-dialog__contents">
+          {children}
+          <div
+            tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+            onFocus={() => {
+              /* this acts as a cheap focus trap */
+              if (this.ref) { this.ref.focus(); }
+            }}
+          />
+        </div>
+        {modal &&
+          <div
+            className="component-dialog__backdrop"
+            aria-hidden
+            onClick={() => dismissOnBackgroundClick && onStatusChange(false)}
+          />
+        }
+      </dialog>
+    );
+  }
+}
+
+
+// ----- Exports ----- //
+
+export default Dialog;

assets/components/dialog/dialog.scss

@@ -0,0 +1,43 @@
+.component-dialog {
+  all: initial;
+  position: absolute;
+  visibility: hidden;
+  height: 0;
+  width: 0;
+  overflow: hidden;
+}
+
+.component-dialog--open {
+  visibility: visible;
+  position: fixed;
+  height: auto;
+  width: auto;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  contain: content;
+}
+
+.component-dialog--modal.component-dialog--open {
+  display: flex;
+  bottom: 0;
+  right: 0;
+  justify-content: center;
+  align-items: center;
+  contain: strict;
+}
+
+.component-dialog__contents {
+  position: relative;
+  z-index: 10;
+}
+
+.component-dialog--modal .component-dialog__backdrop {
+  background: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 9;
+}

stories/dialog.jsx

@@ -0,0 +1,71 @@
+// @flow
+
+import React, { Component } from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import Dialog from 'components/dialog/dialog';
+import Button from 'components/button/button';
+import ProductPageTextBlock from 'components/productPage/productPageTextBlock/productPageTextBlock';
+import { withCenterAlignment } from '../.storybook/decorators/withCenterAlignment';
+
+// This is a barebones stateful wrapper - <Dialog/> needs to be controlled just like inputs
+class ControlledDialogButton extends Component<{modal: boolean}, {open: boolean}> {
+  state = {
+    open: false,
+  }
+  render() {
+    return (
+      <div>
+        <Button
+          aria-haspopup="dialog"
+          aria-label={null}
+          appearance="greyHollow"
+          onClick={() => { this.setState({ open: true }); }}
+        >Open it up
+        </Button>
+        <Dialog
+          aria-label="Modal dialog"
+          modal={this.props.modal}
+          onStatusChange={(status) => { this.setState({ open: status }); }}
+          open={this.state.open}
+        >
+          <div style={{ padding: '1em', background: '#121212', color: '#fff' }}>
+            <ProductPageTextBlock title={'I\'m a dialog!'}>
+              I don&#39;t do much on my own :(
+            </ProductPageTextBlock>
+            <Button
+              icon={null}
+              aria-label={null}
+              appearance="primary"
+              onClick={() => { this.setState({ open: false }); }}
+            >Close
+            </Button>
+          </div>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+const stories = storiesOf('Dialogs', module)
+  .addDecorator(withCenterAlignment);
+
+stories.add('Modal dialog', () => (
+  <ControlledDialogButton modal />
+));
+
+stories.add('Non-modal dialog', () => (
+  <div>
+    <ProductPageTextBlock title="This is a non-modal dialog example">
+      <p>It opens up but lets you interact
+        with the page under it while it is open
+      </p>
+      <p>You probably do not actually want this,
+        as this dialog does not have the click outside behaviour
+        and makes for a confusing experience for screen readers
+      </p>
+      <ControlledDialogButton modal={false} />
+    </ProductPageTextBlock>
+  </div>
+));