[WIP] feat: add dialog component

demo/Demo/index.js

@@ -29,21 +29,21 @@ class Demo extends Component {
             <h2>Examples</h2>
             {/* setting children to null in the key to avoid stringify choking on potential jsx children */}
             {states.map(state => {
-              const { renderAfter, ...thinState } = state;
+              const {
+                DEMO_renderAfter,
+                DEMO_renderBefore,
+                ...thinState
+              } = state;
               const componentMarkup = this.renderState(thinState);
               const afterMarkup =
-                renderAfter && jsxStringify(renderAfter, stringifyConfig);
+                DEMO_renderAfter &&
+                jsxStringify(DEMO_renderAfter, stringifyConfig);
 
               return (
-                <div
-                  key={JSON.stringify({
-                    ...thinState,
-                    children:
-                      typeof state.children === 'string' ? state.children : null
-                  })}
-                >
+                <div key={componentMarkup}>
+                  {DEMO_renderBefore}
                   <Component {...thinState} />
-                  {renderAfter}
+                  {DEMO_renderAfter}
                   <Highlight>
                     {`${componentMarkup}${
                       afterMarkup ? `\n${afterMarkup}` : ''

demo/index.js

@@ -37,7 +37,8 @@ const componentsList = [
   'Card',
   'ExpandCollapsePanel',
   'TextField',
-  'Link'
+  'Link',
+  'Dialog'
 ].sort();
 
 class App extends Component {

demo/patterns/components/Dialog/index.js

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogHeading,
+  DialogContent,
+  DialogFooter,
+  DialogActions,
+  Button
+} from 'src/';
+import DemoComponent from 'demo/Demo';
+
+const Demo = () => {
+  const [modalShow, setModalShow] = useState(false);
+  const onModalClose = () => setModalShow(false);
+  const onModalLauncherClick = () => setModalShow(true);
+  const [alertShow, setAlertShow] = useState(false);
+  const onAlertClose = () => setAlertShow(false);
+  const onAlertLauncherClick = () => setAlertShow(true);
+
+  return (
+    <DemoComponent
+      component={Dialog}
+      states={[
+        {
+          DEMO_renderBefore: <h3>Modal Dialog</h3>,
+          children: (
+            <div>
+              <DialogContent>Hello worlds</DialogContent>
+              <DialogFooter>
+                <Button onClick={onModalClose}>ok</Button>
+                <Button variant="secondary" onClick={onModalClose}>
+                  cancel
+                </Button>
+              </DialogFooter>
+            </div>
+          ),
+          onClose: onModalClose,
+          show: modalShow,
+          heading: <DialogHeading>Hello</DialogHeading>,
+          DEMO_renderAfter: (
+            <Button onClick={onModalLauncherClick}>Launch Modal Dialog!</Button>
+          )
+        },
+        {
+          DEMO_renderBefore: <h3>Alert Dialog</h3>,
+          alert: true,
+          show: alertShow,
+          onClose: onAlertClose,
+          children: (
+            <div>
+              Do you accept the terms?
+              <DialogActions>
+                <Button onClick={onAlertClose}>Accept</Button>
+                <Button onClick={onAlertClose} variant="secondary">
+                  Decline
+                </Button>
+              </DialogActions>
+            </div>
+          ),
+          DEMO_renderAfter: (
+            <Button variant="secondary" onClick={onAlertLauncherClick}>
+              Launch Alert Dialog!
+            </Button>
+          )
+        }
+      ]}
+      propDocs={{}}
+    />
+  );
+};
+
+export default Demo;
+
+/*
+<div>
+        <Dialog
+          show={modalShow}
+          onClose={onModalClose}
+          heading={<DialogHeading>Testing123</DialogHeading>}
+        >
+          <DialogContent>
+            <p>Hello worlds</p>
+          </DialogContent>
+          <DialogFooter>
+            <Button onClick={onModalClose}>ok</Button>
+            <Button variant="secondary" onClick={onModalClose}>
+              cancel
+            </Button>
+          </DialogFooter>
+        </Dialog>
+        <Button onClick={onModalLauncherClick}>Launch Modal Dialog!</Button>
+      </div>
+      <div>
+        <Dialog
+          alert
+          show={alertShow}
+          onClose={onAlertClose}
+          heading={<DialogHeading>Testing123</DialogHeading>}
+        >
+          Do you accept the terms?
+          <DialogActions>
+            <Button onClick={onAlertClose}>Accept</Button>
+            <Button onClick={onAlertClose} variant="secondary">
+              Decline
+            </Button>
+          </DialogActions>
+        </Dialog>
+        <Button variant="secondary" onClick={onAlertLauncherClick}>
+          Launch Alert Dialog!
+        </Button>
+      </div>
+*/

demo/patterns/components/Toast/index.js

@@ -44,7 +44,7 @@ export default class Demo extends Component {
             show: type === 'confirmation',
             autoHide: 5000,
             onDismiss: () => this.onToastDismiss('confirmation'),
-            renderAfter: (
+            DEMO_renderAfter: (
               <Button
                 onClick={() => this.onTriggerClick('confirmation')}
                 buttonRef={el => (this.confirmation = el)}
@@ -58,7 +58,7 @@ export default class Demo extends Component {
             children: 'The toast is getting toasty...',
             onDismiss: () => this.onToastDismiss('caution'),
             show: type === 'caution',
-            renderAfter: (
+            DEMO_renderAfter: (
               <Button
                 variant="secondary"
                 onClick={() => this.onTriggerClick('caution')}
@@ -73,7 +73,7 @@ export default class Demo extends Component {
             children:
               'You burnt the toast! Check yourself before you wreck yourself...',
             show: false,
-            renderAfter: (
+            DEMO_renderAfter: (
               <Button
                 variant="error"
                 onClick={() => this.onTriggerClick('action-needed')}

src/components/Dialog/Dialog.js

@@ -0,0 +1,105 @@
+import React, { useEffect, useState, createRef } from 'react';
+import FocusTrap from 'focus-trap-react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Offscreen from '../Offscreen';
+import Scrim from '../Scrim';
+import AriaIsolate from '../../utils/aria-isolate';
+
+const Dialog = ({
+  show,
+  onClose,
+  forceAction,
+  className,
+  closeButtonText,
+  children,
+  heading,
+  alert,
+  ...other
+}) => {
+  const dialog = createRef();
+  const [deactivate, setDeactivate] = useState();
+  useEffect(
+    () => {
+      if (show) {
+        const isolator = new AriaIsolate(dialog.current);
+        setDeactivate(() => isolator.deactivate.bind(isolator));
+        isolator.activate();
+        return;
+      }
+
+      if (!deactivate) {
+        return;
+      }
+
+      deactivate();
+    },
+    [show]
+  );
+
+  return show ? (
+    <FocusTrap
+      focusTrapOptions={{
+        clickOutsideDeactivates: true,
+        onDeactivate: onClose,
+        escapeDeactivates: !forceAction,
+        initialFocus: alert
+          ? '.dqpl-dialog-inner'
+          : '.dqpl-dialog-show .dqpl-modal-heading',
+        allowOutsideClick: () => false
+      }}
+    >
+      <div
+        role={alert ? 'alertdialog' : 'dialog'}
+        className={classNames(className, {
+          'dqpl-modal': !alert,
+          'dqpl-alert': alert,
+          'dqpl-dialog-show': show
+        })}
+        ref={dialog}
+        {...other}
+      >
+        <div className="dqpl-dialog-inner" tabIndex={-1}>
+          {alert ? (
+            <div className="dqpl-content">{children}</div>
+          ) : (
+            <>
+              <div className="dqpl-modal-header">
+                {heading}
+                {!forceAction && (
+                  <button
+                    className="dqpl-close dqpl-icon"
+                    type="button"
+                    onClick={onClose}
+                  >
+                    <div className="fa fa-close" aria-hidden="true" />
+                    <Offscreen>{closeButtonText}</Offscreen>
+                  </button>
+                )}
+              </div>
+              {children}
+            </>
+          )}
+        </div>
+      </div>
+      <Scrim show={show} />
+    </FocusTrap>
+  ) : null;
+};
+
+Dialog.displayName = 'Dialog';
+Dialog.defaultProps = {
+  closeButtonText: 'Close'
+};
+Dialog.propTypes = {
+  children: PropTypes.node.isRequired,
+  onClose: PropTypes.func.isRequired,
+  show: PropTypes.bool,
+  forceAction: PropTypes.bool,
+  className: PropTypes.string,
+  closeButtonText: PropTypes.string,
+  heading: PropTypes.node,
+  alert: PropTypes.bool
+};
+
+export default Dialog;

src/components/Dialog/DialogActions.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const DialogActions = ({ className, ...other }) => (
+  <div className={classNames('dqpl-buttons', className)} {...other} />
+);
+DialogActions.displayName = 'DialogActions';
+DialogActions.propTypes = {
+  className: PropTypes.string
+};
+export default DialogActions;

src/components/Dialog/DialogContent.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const DialogContent = ({ className, ...other }) => (
+  <div className={classNames('dqpl-content', className)} {...other} />
+);
+DialogContent.displayName = 'DialogContent';
+DialogContent.propTypes = {
+  className: PropTypes.string
+};
+export default DialogContent;

src/components/Dialog/DialogFooter.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const DialogFooter = ({ className, ...other }) => (
+  <div className={classNames('dqpl-modal-footer', className)} {...other} />
+);
+DialogFooter.displayName = 'DialogFooter';
+DialogFooter.propTypes = {
+  className: PropTypes.string
+};
+export default DialogFooter;

src/components/Dialog/DialogHeading.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const DialogHeading = ({ level, className, ...other }) => {
+  const Heading = `h${level}`;
+  return (
+    <Heading
+      tabIndex={-1}
+      className={classNames('dqpl-modal-heading', className)}
+      {...other}
+    />
+  );
+};
+
+DialogHeading.displayName = 'DialogHeading';
+DialogHeading.defaultProps = {
+  level: 2
+};
+DialogHeading.propTypes = {
+  level: PropTypes.number,
+  className: PropTypes.string
+};
+
+export default DialogHeading;

src/components/Dialog/index.js

@@ -0,0 +1,5 @@
+export default from './Dialog';
+export { default as DialogHeading } from './DialogHeading';
+export { default as DialogContent } from './DialogContent';
+export { default as DialogFooter } from './DialogFooter';
+export { default as DialogActions } from './DialogActions';

src/index.js

@@ -45,6 +45,13 @@ export {
   default as ExpandCollapsePanel,
   PanelTrigger
 } from './components/ExpandCollapsePanel';
+export {
+  default as Dialog,
+  DialogHeading,
+  DialogFooter,
+  DialogContent,
+  DialogActions
+} from './components/Dialog';
 /**
  * Helpers / Utils
  */