@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/src/Modal/_ModalDialog.scss

@@ -1,41 +1,49 @@
 .pgn__modal {
-  background: var(--pgn-color-modal-content-bg);
-  border-radius: calc(var(--pgn-size-modal-content-border-radius) - var(--pgn-size-modal-content-border-width));
+  background: $modal-content-bg;
+  border-radius: $modal-content-inner-border-radius;
   display: flex;
   flex-direction: column;
-  margin: 0 var(--pgn-spacing-modal-dialog-margin);
+  margin: 0 $modal-dialog-margin;
   max-height: 80vh;
-  max-width: var(--pgn-size-modal-md);
+  max-width: $modal-md;
   overflow: auto;
   width: 100vw;
-  box-shadow: var(--pgn-elevation-modal-content-box-shadow-sm-up);
-  border: solid var(--pgn-size-modal-content-border-width) var(--pgn-color-modal-content-border);
+  box-shadow: $modal-content-box-shadow-sm-up;
+  border: solid $modal-content-border-width $modal-content-border-color;
   position: relative;
 
   &:not(.pgn__modal-fullscreen) > *:first-child {
-    border-top-left-radius: var(--pgn-size-modal-content-border-radius);
-    border-top-right-radius: var(--pgn-size-modal-content-border-radius);
+    border-top-left-radius: $modal-content-border-radius;
+    border-top-right-radius: $modal-content-border-radius;
   }
 
   &:not(.pgn__modal-fullscreen) > *:last-child {
-    border-bottom-left-radius: var(--pgn-size-modal-content-border-radius);
-    border-bottom-right-radius: var(--pgn-size-modal-content-border-radius);
+    border-bottom-left-radius: $modal-content-border-radius;
+    border-bottom-right-radius: $modal-content-border-radius;
   }
 
   &.pgn__modal-scroll-fullscreen {
     max-height: none;
-    margin: var(--pgn-spacing-modal-dialog-margin);
+    margin: $modal-dialog-margin;
   }
 
   .pgn__modal-header {
-    padding-bottom: calc(var(--pgn-spacing-modal-inner-padding-base) / 2);
+    padding-bottom: calc(#{$modal-inner-padding} / 2);
   }
 
   .pgn__modal-body {
-    padding: calc(var(--pgn-spacing-modal-inner-padding-base) / 2) var(--pgn-spacing-modal-inner-padding-base);
+    padding: calc(#{$modal-inner-padding} / 2) $modal-inner-padding;
 
     &::before {
-      top: calc(var(--pgn-spacing-modal-inner-padding-base) / 2 * -1);
+      top: calc(#{$modal-inner-padding} / 2 * -1);
+    }
+  }
+
+  &.pgn__modal-visible-overflow {
+    overflow: visible;
+
+    .pgn__modal-body {
+      overflow: visible;
     }
   }
 }
@@ -43,19 +51,19 @@
 // Sizes
 
 .pgn__modal-sm {
-  max-width: var(--pgn-size-modal-sm);
+  max-width: $modal-sm;
 }
 
 .pgn__modal-lg {
-  max-width: var(--pgn-size-modal-lg);
+  max-width: $modal-lg;
 }
 
 .pgn__modal-md {
-  max-width: var(--pgn-size-modal-md);
+  max-width: $modal-md;
 }
 
 .pgn__modal-xl {
-  max-width: var(--pgn-size-modal-xl);
+  max-width: $modal-xl;
 }
 
 .pgn__modal-fullscreen {
@@ -65,8 +73,8 @@
   max-width: none;
 
   .pgn__modal-footer {
-    border-top: solid 1px var(--pgn-color-light-base);
-    padding-top: var(--pgn-spacing-modal-footer-padding-y);
+    border-top: solid 1px $light;
+    padding-top: $modal-footer-padding-y;
   }
 }
 
@@ -84,8 +92,8 @@
 .pgn__modal-close-container {
   position: absolute;
   z-index: 10;
-  top: var(--pgn-spacing-dropdown-close-container-top);
-  inset-inline-end: var(--pgn-spacing-modal-header-padding-y);
+  top: $modal-close-container-top;
+  inset-inline-end: $modal-header-padding-y;
 }
 
 .pgn__modal-header {
@@ -94,8 +102,10 @@
   justify-content: center;
   position: sticky;
   top: 0;
-  padding: var(--pgn-spacing-modal-header-padding-base);
-  background-color: var(--pgn-color-modal-content-bg);
+  border-top-left-radius: $modal-content-border-radius;
+  border-top-right-radius: $modal-content-border-radius;
+  padding: $modal-header-padding;
+  background-color: $modal-content-bg;
   transition: box-shadow 150ms ease;
   min-height: 2rem; // height of the icon close button
   box-sizing: content-box;
@@ -108,14 +118,14 @@
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: $h3-font-size;
     margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn
     text-align: start;
   }
 }
 
 .pgn__modal-hero {
-  padding: var(--pgn-spacing-modal-header-padding-base);
+  padding: $modal-header-padding;
   position: relative;
   display: flex;
   align-items: center;
@@ -141,9 +151,7 @@
 
 .pgn__modal-body {
   flex-grow: 1;
-  padding:
-    var(--pgn-spacing-modal-inner-padding-base)
-    var(--pgn-spacing-modal-inner-padding-base) calc(var(--pgn-spacing-modal-inner-padding-base) / 2);
+  padding: $modal-inner-padding $modal-inner-padding calc(#{$modal-inner-padding} / 2);
   overflow: auto;
   position: relative;
 
@@ -154,10 +162,10 @@
     display: block;
     height: 20px;
     position: sticky;
-    top: calc(var(--pgn-spacing-modal-inner-padding-base) * -1);
-    margin-top: calc(var(--pgn-spacing-modal-inner-padding-base) * -1);
-    margin-left: calc(var(--pgn-spacing-modal-inner-padding-base) * -1);
-    margin-right: calc(var(--pgn-spacing-modal-inner-padding-base) * -1);
+    top: -$modal-inner-padding;
+    margin-top: -$modal-inner-padding;
+    margin-left: -$modal-inner-padding;
+    margin-right: -$modal-inner-padding;
     opacity: .5;
     z-index: 2;
   }
@@ -175,10 +183,10 @@
     display: block;
     height: 20px;
     position: sticky;
-    bottom: calc(var(--pgn-spacing-modal-inner-padding-base) / 2 * -1);
-    margin-bottom: calc(var(--pgn-spacing-modal-inner-padding-bottom) * -1);
-    margin-left: calc(var(--pgn-spacing-modal-inner-padding-base) * -1);
-    margin-right: calc(var(--pgn-spacing-modal-inner-padding-base) * -1);
+    bottom: calc(#{$modal-inner-padding} / 2 * -1);
+    margin-bottom: -$modal-inner-padding-bottom;
+    margin-left: -$modal-inner-padding;
+    margin-right: -$modal-inner-padding;
     opacity: .5;
   }
 
@@ -236,10 +244,10 @@
   bottom: 0;
   display: flex;
   justify-content: flex-end;
-  background-color: var(--pgn-color-modal-content-bg);
+  background-color: $modal-content-bg;
   transition: box-shadow 150ms ease;
-  padding: var(--pgn-spacing-modal-footer-padding-base);
-  padding-top: calc(var(--pgn-spacing-modal-inner-padding-base) / 2);
+  padding: $modal-footer-padding;
+  padding-top: calc(#{$modal-inner-padding} / 2);
 }
 
 // Color Variants
@@ -247,8 +255,8 @@
 .pgn__modal-dark {
   .pgn__modal-header,
   .pgn__modal-hero {
-    background-color: var(--pgn-color-dark-base);
-    color: var(--pgn-color-white);
+    background-color: $dark;
+    color: $white;
 
     * {
       color: inherit;
@@ -257,15 +265,15 @@
 }
 
 .pgn__modal-warning .pgn__modal-header {
-  background-color: var(--pgn-color-warning-100);
+  background-color: $warning-100;
 }
 
 .pgn__modal-danger .pgn__modal-header {
-  background-color: var(--pgn-color-danger-100);
+  background-color: $danger-100;
 }
 
 .pgn__modal-success .pgn__modal-header {
-  background-color: var(--pgn-color-success-100);
+  background-color: $success-100;
 }
 
 // Modal types
@@ -279,31 +287,31 @@
 
   &.pgn__modal-warning {
     .pgn__alert-modal__title_icon {
-      color: var(--pgn-color-warning-500);
+      color: $warning-500;
     }
   }
 
   &.pgn__modal-success {
     .pgn__alert-modal__title_icon {
-      color: var(--pgn-color-success-500);
+      color: $success-500;
     }
   }
 
   &.pgn__modal-danger {
     .pgn__alert-modal__title_icon {
-      color: var(--pgn-color-danger-500);
+      color: $danger-500;
     }
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h4);
+    font-size: $h4-font-size;
     display: flex;
     flex-grow: 1;
     align-items: center;
 
     .pgn__alert-modal__title_icon {
       flex-shrink: 0;
-      margin-right: var(--pgn-spacing-spacer-2-5);
+      margin-right: map-get($spacers, 2\.5);
     }
   }
 }

package/src/Modal/_variables.scss

@@ -0,0 +1,50 @@
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding:               1.5rem !default;
+$modal-inner-padding-bottom:        .7rem !default;
+
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between:       .5rem !default;
+
+$modal-dialog-margin:               1.5rem !default;
+$modal-dialog-margin-y-sm-up:       1.75rem !default;
+
+$modal-title-line-height:           $line-height-base !default;
+
+$modal-content-color:               null !default;
+$modal-content-bg:                  $white !default;
+$modal-content-border-color:        rgba($black, .2) !default;
+$modal-content-border-width:        0 !default;
+$modal-content-border-radius:       $border-radius-lg !default;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
+$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
+$modal-content-box-shadow-sm-up:    0 10px 20px rgba($black, .15), 0 8px 20px rgba($black, .15) !default;
+
+$modal-backdrop-bg:                 $black !default;
+$modal-backdrop-opacity:            .5 !default;
+$modal-header-border-color:         $border-color !default;
+$modal-footer-border-color:         $modal-header-border-color !default;
+$modal-header-border-width:         $modal-content-border-width !default;
+$modal-footer-border-width:         $modal-header-border-width !default;
+$modal-header-padding-y:            1rem !default;
+$modal-header-padding-x:            1.5rem !default;
+$modal-close-container-top:         .625rem !default;
+
+// Keep this for backwards compatibility
+$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default;
+$modal-footer-padding-y:            1rem !default;
+$modal-footer-padding-x:            1.5rem !default;
+
+// Keep this for backwards compatibility
+$modal-footer-padding:              $modal-footer-padding-y $modal-footer-padding-x !default;
+
+$modal-xl:                          1140px !default;
+$modal-lg:                          800px !default;
+$modal-md:                          500px !default;
+$modal-sm:                          400px !default;
+
+$modal-fade-transform:              translate(0, -50px) !default;
+$modal-show-transform:              none !default;
+$modal-transition:                  transform .3s ease-out !default;
+$modal-scale-transform:             scale(1.02) !default;

package/src/Modal/index.jsx

@@ -0,0 +1,319 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { FocusOn } from 'react-focus-on';
+import { tabbable } from 'tabbable';
+
+import { Close } from '../../icons';
+import Button from '../Button';
+import Icon from '../Icon';
+import newId from '../utils/newId';
+import Variant from '../utils/constants';
+
+class Modal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.close = this.close.bind(this);
+
+    this.headerId = newId();
+    this.modalBodyRef = React.createRef();
+
+    if (typeof document !== 'undefined') {
+      this.el = document.createElement('div');
+      // Sets true for IE11, false otherwise: https://stackoverflow.com/a/22082397/6620612
+      this.isIE11 = !!global.MSInputMethodContext && !!document.documentMode;
+    }
+
+    this.state = {
+      open: props.open,
+    };
+  }
+
+  componentDidMount() {
+    const { parentSelector } = this.props;
+    this.parentElement = document.querySelector(parentSelector);
+    if (this.parentElement === null) {
+      throw new Error(`Modal received invalid parentSelector: ${parentSelector}, no matching element found`);
+    }
+    this.parentElement.appendChild(this.el);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { open } = this.props;
+    if (open !== prevProps.open || open !== prevState.open) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({ open });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.parentElement) {
+      ReactDOM.unmountComponentAtNode(this.parentElement);
+    }
+  }
+
+  getVariantIconClassName() {
+    const { variant } = this.props;
+    let variantIconClassName;
+
+    switch (variant.status) {
+      case Variant.status.WARNING:
+        variantIconClassName = classNames(
+          'fa',
+          'fa-exclamation-triangle',
+          'fa-3x',
+          `text-${variant.status.toLowerCase()}`,
+        );
+        break;
+      default:
+        break;
+    }
+
+    return variantIconClassName;
+  }
+
+  getVariantGridBody(body) {
+    const { variant } = this.props;
+
+    return (
+      <div className="container-fluid">
+        <div className="row">
+          <div className="col-md-10">
+            <div>
+              {body}
+            </div>
+          </div>
+          <div className="col-md-2" data-testid="modal-icon">
+            <Icon
+              id={newId(`Modal-${variant.status}`)}
+              className={this.getVariantIconClassName()}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  getTabbableBodyElements() {
+    if (this.modalBodyRef?.current) {
+      return tabbable(this.modalBodyRef.current);
+    }
+    return [];
+  }
+
+  isValidVariantStatus() {
+    const { variant } = this.props;
+    return Object.values(Variant.status).includes(variant.status);
+  }
+
+  close(e) {
+    if (e) {
+      e.stopPropagation();
+    }
+
+    this.setState({ open: false });
+    this.props.onClose();
+  }
+
+  renderButtons() {
+    return this.props.buttons.map((button) => {
+      // button is either a React component that we want clone or a set of props
+      if (React.isValidElement(button)) {
+        return React.cloneElement(button, {
+          key: button.props.children,
+        });
+      }
+
+      const { label, ...buttonProps } = button;
+
+      return (
+        <Button.Deprecated
+          {...buttonProps}
+          key={label}
+        >
+          {label}
+        </Button.Deprecated>
+      );
+    });
+  }
+
+  renderBody() {
+    let { body } = this.props;
+
+    if (typeof body === 'string') {
+      body = <p>{body}</p>;
+    }
+
+    if (this.isValidVariantStatus()) {
+      body = this.getVariantGridBody(body);
+    }
+
+    return body;
+  }
+
+  renderModal() {
+    const { open } = this.state;
+    const {
+      dialogClassName,
+      renderDefaultCloseButton,
+      renderHeaderCloseButton,
+      buttons,
+      closeText,
+      title,
+    } = this.props;
+
+    const hasTabbableElements = (
+      renderDefaultCloseButton
+      || renderHeaderCloseButton
+      || buttons.length > 0
+      || this.getTabbableBodyElements().length > 0
+    );
+    const renderModalFooter = renderDefaultCloseButton || buttons.length > 0;
+
+    return (
+      <>
+        <div
+          className={classNames({
+            'modal-backdrop': open,
+            show: open,
+            fade: !open,
+          })}
+          role="presentation"
+          data-testid="modal-backdrop"
+        />
+        <div
+          className={classNames(
+            'modal',
+            {
+              show: open,
+              fade: !open,
+              'd-block': open,
+              'is-ie11': this.isIE11,
+            },
+          )}
+          role="presentation"
+          data-testid="modal"
+        >
+          <div
+            className={classNames(
+              {
+                'modal-dialog': open,
+              },
+              dialogClassName,
+            )}
+            role="dialog"
+            aria-modal
+            aria-labelledby={this.headerId}
+          >
+            <FocusOn
+              enabled={open}
+              onClickOutside={this.close}
+              onEscapeKey={this.close}
+            >
+              <div
+                className="modal-content"
+                data-testid="modal-content"
+                // if the modal doesn't contain any tabbable elements, make this element programmatically focusable.
+                {...(!hasTabbableElements ? { tabIndex: -1 } : {})}
+              >
+                <div className="modal-header">
+                  <h2 className="modal-title" id={this.headerId}>{title}</h2>
+                  {renderHeaderCloseButton && (
+                    <Button.Deprecated
+                      className="p-1"
+                      onClick={this.close}
+                      data-testid="modal-header-btn"
+                    >
+                      <Icon src={Close} screenReaderText={closeText} />
+                    </Button.Deprecated>
+                  )}
+                </div>
+                <div className="modal-body" ref={this.modalBodyRef} data-testid="modal-body">
+                  {this.renderBody()}
+                </div>
+                {renderModalFooter && (
+                  <div className="modal-footer">
+                    {renderDefaultCloseButton && (
+                      <Button
+                        variant="link"
+                        onClick={this.close}
+                        data-testid="modal-footer-btn"
+                      >
+                        {closeText}
+                      </Button>
+                    )}
+                    {this.renderButtons()}
+                  </div>
+                )}
+              </div>
+            </FocusOn>
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  render() {
+    if (!this.el) {
+      return null;
+    }
+
+    return ReactDOM.createPortal(
+      this.renderModal(),
+      this.el,
+    );
+  }
+}
+
+Modal.propTypes = {
+  /** specifies whether the modal renders open or closed on the initial render. It defaults to false. */
+  open: PropTypes.bool,
+  /** is the selector for an element in the dom which the modal should be rendered under.
+   * It uses querySelector to find the first element that matches that selector,
+   * and then creates a React portal to a div underneath the parent element.
+   */
+  parentSelector: PropTypes.string,
+  /** a string or an element that is rendered inside of the modal title, above the modal body. */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  /** a string or an element that is rendered inside of the modal body, between the title and the footer. */
+  body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  /** an array of either elements or shapes that take the form of the buttonPropTypes.
+   * See the [buttonPropTypes](https://github.com/openedx/paragon/blob/master/src/Button/index.jsx#L40)
+   * for a list of acceptable props to pass as part of a button. */
+  buttons: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.shape({}), // TODO: Only accept nodes in the future
+  ])),
+  /** specifies the display text of the default Close button. It defaults to "Close". */
+  closeText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  /** a function that is called on close. It can be used to perform actions upon closing of the modal,
+   * such as restoring focus to the previous logical focusable element. */
+  onClose: PropTypes.func.isRequired,
+  variant: PropTypes.shape({
+    status: PropTypes.string,
+  }),
+  /** specifies whether the default close button is rendered in the footer. It defaults to true. */
+  renderDefaultCloseButton: PropTypes.bool,
+  /** specifies whether a close button is rendered in the modal header. It defaults to true. */
+  renderHeaderCloseButton: PropTypes.bool,
+  /**
+   * Specifies optional classes to add to the element with the '.modal-dialog' class.
+   * See Bootstrap documentation for possible classes.  Some options: modal-lg, modal-sm, modal-dialog-centered
+   */
+  dialogClassName: PropTypes.string,
+};
+
+Modal.defaultProps = {
+  open: false,
+  parentSelector: 'body',
+  buttons: [],
+  closeText: 'Close',
+  variant: {},
+  renderDefaultCloseButton: true,
+  renderHeaderCloseButton: true,
+  dialogClassName: undefined,
+};
+
+export default Modal;