qpp-style 2.1.13 → 2.2.0-sm.0

package/components/Modal/LegacyModal.jsx

@@ -0,0 +1,72 @@
+import React, { Component } from "react";
+import { render } from "react-dom";
+import ReactModal from "react-modal";
+import { CloseXIcon } from "../../lib/SvgComponents.jsx";
+import SanitizedContent from "../SanitizedContent";
+import PropTypes from "prop-types";
+
+class Modal extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      showModal: true,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+
+    ReactModal.setAppElement("body > *:not(.ReactModalPortal)");
+  }
+
+  handleOpenModal() {
+    this.setState({ showModal: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ showModal: false });
+  }
+
+  UNSAFE_componentWillReceiveProps(newProps) {
+    this.setState({
+      showModal: newProps.showModal,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <ReactModal
+          role="alertdialog"
+          contentLabel={this.props.contentLabel || "Informational Modal Dialog"}
+          isOpen={this.state.showModal}
+          className="info-modal-content"
+          overlayClassName="info-modal-overlay"
+          onRequestClose={this.handleCloseModal}
+        >
+          <button
+            className="closeModal"
+            aria-label="Close modal"
+            onClick={this.handleCloseModal}
+          >
+            <svg className="close-icon" aria-hidden="true">
+              <CloseXIcon />
+            </svg>
+          </button>
+          <SanitizedContent html={this.props.content} />
+        </ReactModal>
+      </div>
+    );
+  }
+}
+
+const displayModal = ({ content, main }) => {
+  render(<Modal content={content} showModal={true} />, main);
+};
+
+Modal.propTypes = {
+  contentLabel: PropTypes.string,
+  content: PropTypes.string,
+};
+
+export default displayModal;

package/components/Modal/Modal.jsx

@@ -0,0 +1,140 @@
+import React, { useRef, useState, useEffect } from "react";
+import ReactModal from "react-modal";
+import PropTypes from "prop-types";
+
+import { CloseXIcon2 } from "../../lib/SvgComponents.jsx";
+
+const Modal = ({
+  children,
+  onRequestClose,
+  title,
+  primary,
+  secondary,
+  appElement,
+  isOpen,
+  ...props
+}) => {
+  const [overflowSeparator, setOverflowSeparator] = useState(false);
+  const closeButtonRef = useRef(null);
+  const contentRef = useRef(null);
+
+  useEffect(() => {
+    ReactModal.setAppElement(appElement);
+  }, []);
+
+  return (
+    <ReactModal
+      onRequestClose={onRequestClose}
+      portalClassName="qpp-c-modal"
+      className="qpp-c-modal__content"
+      overlayClassName="qpp-c-modal__overlay"
+      bodyOpenClassName="qpp-c-modal__body-open"
+      isOpen={isOpen}
+      onAfterOpen={() => {
+        // Add heading separator based on overflow
+        if (
+          contentRef.current?.scrollHeight >
+          document.documentElement.clientHeight * 0.6
+        ) {
+          setOverflowSeparator(true);
+        } else {
+          setOverflowSeparator(false);
+        }
+
+        // Set default focus
+        if (closeButtonRef?.current) {
+          closeButtonRef.current.focus();
+        }
+      }}
+      aria={{
+        labelledby: "modal-heading",
+        describedby: "modal-body",
+      }}
+      {...props}
+    >
+      <div
+        className={`qpp-c-modal__header ${
+          overflowSeparator ? "qpp-c-modal__header-sep" : ""
+        }`}
+      >
+        <h3 id="modal-heading">{title}</h3>
+        <button
+          className="closex qpp-c-button qpp-c-button--text qpp-u-color--black"
+          aria-label="close modal"
+          data-testid="modal-close-btn"
+          onClick={onRequestClose}
+          ref={closeButtonRef}
+        >
+          <CloseXIcon2 />
+        </button>
+      </div>
+      <div
+        id="modal-body"
+        className="qpp-c-modal__body"
+        ref={contentRef}
+        tabIndex={overflowSeparator ? "0" : undefined}
+      >
+        {children}
+      </div>
+      {(primary || secondary) && (
+        <div className="qpp-c-modal__footer">
+          {secondary && (
+            <button
+              className={`qpp-c-button qpp-c-button--secondary ${
+                primary ? "qpp-u-margin-right--16" : ""
+              }`}
+              loading={secondary.loading}
+              onClick={secondary.onClick || onRequestClose}
+              aria-label={secondary.title}
+              data-testid="modal-secondary-btn"
+            >
+              {secondary.title}
+            </button>
+          )}
+          {primary && (
+            <button
+              className="qpp-c-button"
+              loading={primary.loading}
+              onClick={primary.onClick}
+              data-testid="modal-primary-btn"
+              aria-label={primary.title}
+            >
+              {primary.title}
+            </button>
+          )}
+        </div>
+      )}
+    </ReactModal>
+  );
+};
+
+Modal.propTypes = {
+  title: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  primary: PropTypes.shape({
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    onClick: PropTypes.func,
+    loading: PropTypes.bool,
+    loadingText: PropTypes.string,
+  }),
+  secondary: PropTypes.shape({
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    onClick: PropTypes.func,
+    loading: PropTypes.bool,
+    loadingText: PropTypes.string,
+  }),
+  onRequestClose: PropTypes.func,
+  appElement: PropTypes.string,
+  isOpen: PropTypes.bool,
+};
+
+Modal.defaultProps = {
+  onRequestClose: () => {},
+  title: undefined,
+  primary: null,
+  secondary: null,
+  appElement: "body > *:not(.qpp-c-modal)",
+  isOpen: false,
+};
+
+export default Modal;

package/components/Modal/index.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import LegacyModal from "./LegacyModal";
+import DsModal from "./Modal";
+
+const Modal = ({ useDesignSystem, ...rest }) => {
+  if (useDesignSystem) {
+    return <DsModal {...rest} />;
+  }
+  return <LegacyModal {...rest} />;
+};
+
+Modal.propTypes = {
+  useDesignSystem: PropTypes.bool,
+};
+Modal.defaultProps = {
+  useDesignSystem: false,
+};
+Modal.displayName = "Modal";
+
+export default Modal;

package/components/NotificationBanner/CollapsedView.js

@@ -0,0 +1,39 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+import { BellOutline } from "../../lib/SvgComponents.jsx";
+
+const CollapsedView = forwardRef(
+  (
+    { expandNotification, label },
+    { collapsedWrapperRef, collapsedBannerRef }
+  ) => {
+    return (
+      <div
+        ref={collapsedWrapperRef}
+        className={`notification-banner-wrapper collapsed-view`}
+        onClick={expandNotification}
+      >
+        <button
+          ref={collapsedBannerRef}
+          className={`notification-banner-label`}
+        >
+          {label}
+          <span className="bell-icon">
+            <svg aria-hidden="true" focusable="false">
+              <BellOutline />
+            </svg>
+          </span>
+        </button>
+      </div>
+    );
+  }
+);
+
+CollapsedView.displayName = "CollapsedView";
+
+CollapsedView.propTypes = {
+  expandNotification: PropTypes.func,
+  label: PropTypes.string,
+};
+
+export default CollapsedView;

package/components/NotificationBanner/ExpandedView.js

@@ -0,0 +1,45 @@
+import React from "react";
+import PropTypes from "prop-types";
+import SanitizedContent from "../SanitizedContent";
+import { CloseXIcon } from "../../lib/SvgComponents.jsx";
+
+const ExpandedView = ({
+  label,
+  expanded,
+  content,
+  dismissable,
+  collapseNotification,
+}) => {
+  return (
+    <div className={`notification-banner-wrapper expanded-view`}>
+      <div className="notification-banner-label">{label}</div>
+      <div className="notification-banner-content qppds">
+        <SanitizedContent
+          html={expanded ? content : "<p>No notifications to display</p>"}
+        />
+      </div>
+      {expanded && dismissable && (
+        <button
+          onClick={collapseNotification}
+          type="button"
+          className="notification-banner-close"
+        >
+          <svg className="close-icon" aria-hidden="true" focusable="false">
+            <CloseXIcon />
+          </svg>
+          <span className="sr-only">Close</span>
+        </button>
+      )}
+    </div>
+  );
+};
+
+ExpandedView.propTypes = {
+  label: PropTypes.string,
+  expanded: PropTypes.bool,
+  content: PropTypes.string,
+  dismissable: PropTypes.bool,
+  collapseNotification: PropTypes.func,
+};
+
+export default ExpandedView;

package/components/NotificationBanner/index.js

@@ -0,0 +1,221 @@
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import ExpandedView from "./ExpandedView";
+import CollapsedView from "./CollapsedView";
+import { withGetConfig } from "../hooks/useGetConfig";
+
+function debounce(fn, ms) {
+  let timer;
+  return () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      fn.apply(this, arguments);
+    }, ms);
+  };
+}
+
+const NotificationBanner = ({ result }) => {
+  const {
+    color = "blue",
+    content,
+    dismissable,
+    enabled,
+    label = "Update",
+  } = result.content;
+
+  const bannerContainerRef = useRef(null);
+  const collapsedWrapperRef = useRef(null);
+  const collapsedBannerRef = useRef(null);
+  const VIEW_BREAKPOINT = 767;
+  const [height, setHeight] = useState("100%");
+  const [expanded, setExpanded] = useState();
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const cssDeterminesBannerView = expanded ? "expanded" : "collapsed";
+
+  useEffect(() => {
+    //setBannerHeight on Load & Resize
+    setBannerHeight();
+
+    if (window.innerWidth <= VIEW_BREAKPOINT) {
+      setExpanded(false);
+    }
+
+    const debounceBrowserResizeHandler = debounce(() => {
+      return setWindowWidth(window.innerWidth);
+    }, 600);
+
+    window.addEventListener("resize", debounceBrowserResizeHandler);
+
+    return () => {
+      window.removeEventListener("resize", debounceBrowserResizeHandler);
+    };
+  }, [windowWidth]);
+
+  useEffect(() => {
+    //  setExpanded => updates cssDeterminesBannerView
+    if (Object.keys(result).length > 0) {
+      setExpanded(isNotificationExpanded());
+    }
+  }, [result]);
+
+  const isNotificationExpanded = () => {
+    const dateDismissed = new Date(result.content.dateDismissed);
+    const dateUpdated = new Date(result.content.dateUpdated);
+    const notDismissed =
+      (isDateValid(dateUpdated) &&
+        isDateValid(dateDismissed) &&
+        dateUpdated >= dateDismissed) ||
+      !isDateValid(dateDismissed);
+    return notDismissed;
+  };
+
+  const setBannerHeight = () => {
+    if (content) {
+      bannerContainerRef.current.style.transition = "none";
+      expanded
+        ? collapsedBannerRef.current.setAttribute("tabIndex", "-1")
+        : collapsedBannerRef.current.setAttribute("tabIndex", " ");
+
+      setHeight(
+        expanded ? "100%" : `${collapsedWrapperRef.current.offsetHeight}px`
+      );
+    }
+  };
+
+  /**
+   * Whether the date is valid, i.e. not null
+   *
+   * @param {Date} date
+   * @return {Boolean}
+   */
+
+  const isDateValid = (date) => {
+    return !isNaN(Date.parse(date));
+  };
+  /**
+   * Try to find this NotificationBanner instance in localStorage, or else add
+   * a minimal version of it, and mark it with a dateDismissed, then update
+   * localStorage.
+   */
+
+  const markNotificationClosed = () => {
+    const dateDismissed = new Date().toISOString();
+    const storageNotification = result || {};
+
+    if (storageNotification && Object.keys(storageNotification).length > 0) {
+      window.localStorage.setItem(
+        "notifications",
+        JSON.stringify({
+          ...storageNotification,
+          content: {
+            ...storageNotification.content,
+            dateDismissed,
+          },
+        })
+      );
+    } else {
+      window.localStorage.setItem(
+        "notifications",
+        JSON.stringify({
+          ...storageNotification,
+          content: {
+            name: "header-notification",
+            dateDismissed,
+          },
+        })
+      );
+    }
+  };
+
+  /**
+   * Callback when the user dimisses a notification. Mark it as dismissed in
+   * localStorage, empty the contents, and dispatch a custom event to notify
+   * any observers that it has been dismissed.
+   */
+
+  const collapseNotification = (e) => {
+    e.stopPropagation();
+    markNotificationClosed();
+    collapsedBannerRef.current.setAttribute("tabIndex", " ");
+    bannerContainerRef.current.style.transition = "height .2s ease-out";
+
+    setExpanded(false);
+    setHeight(`${collapsedWrapperRef.current.offsetHeight}px`);
+  };
+
+  const expandNotification = () => {
+    collapsedBannerRef.current.setAttribute("tabIndex", "-1");
+    bannerContainerRef.current.style.transition = "height .2s ease-out";
+    setExpanded(true);
+    setHeight("100%");
+  };
+
+  /**
+   * Render the notification if it has any contents.
+   *
+   * @return {String} HTML content
+   */
+
+  return (
+    <>
+      {!content || !enabled ? (
+        <div id="notification-banner" />
+      ) : (
+        <div
+          ref={bannerContainerRef}
+          style={{ height }}
+          className={`notification-banner notification-banner-${color} ${cssDeterminesBannerView}`}
+        >
+          <ExpandedView
+            label={label}
+            expanded={expanded}
+            content={content}
+            dismissable={dismissable}
+            collapseNotification={collapseNotification}
+          />
+
+          <CollapsedView
+            expandNotification={expandNotification}
+            label={label}
+            ref={{ collapsedWrapperRef, collapsedBannerRef }}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+NotificationBanner.propTypes = {
+  result: PropTypes.shape({
+    content: PropTypes.shape({
+      color: PropTypes.string,
+      content: PropTypes.string,
+      dateDismissed: PropTypes.string,
+      dateUpdated: PropTypes.string,
+      dismissable: PropTypes.bool,
+      enabled: PropTypes.bool,
+      label: PropTypes.string,
+    }),
+  }),
+};
+
+NotificationBanner.defaultProps = {
+  result: {
+    content: {
+      color: "blue",
+      content: null,
+      dismissable: true,
+      enabled: true,
+      label: "Update",
+    },
+  },
+};
+
+export default withGetConfig(NotificationBanner, {
+  timeout: 5,
+  url: "/config/notification",
+  localStorageName: "active_notification",
+  equalityCheckExclude: ["dateDismissed", "dateUpdated"],
+  defaultContent: {},
+});