qpp-style 0.0.8 → 0.0.10

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

@@ -1,72 +1,22 @@
-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 React from 'react';
 import PropTypes from 'prop-types';
 
-class Modal extends Component {
-  constructor() {
-    super();
+import LegacyModal from './LegacyModal';
+import DsModal from './Modal';
 
-    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 });
+const Modal = ({ useDesignSystem, ...rest }) => {
+  if (useDesignSystem) {
+    return <DsModal {...rest} />;
   }
-
-  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);
+  return <LegacyModal {...rest} />;
 };
 
 Modal.propTypes = {
-  contentLabel: PropTypes.string,
-  content: PropTypes.string,
+  useDesignSystem: PropTypes.bool,
+};
+Modal.defaultProps = {
+  useDesignSystem: false,
 };
+Modal.displayName = 'Modal';
 
-export default displayModal;
+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">
+        <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

@@ -1,32 +1,221 @@
-import React from 'react';
-import { render } from 'react-dom';
-import NotificationBannerUI from './NotificationBannerUI';
-
-/**
- * Renders the QPP NotificationBanner content.
- */
-export default class NotificationBanner {
+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`
+      );
+    }
+  };
+
   /**
-   * @param {Object} options - An object containing content and config data
-   * @param {Boolean} options.dismissable - Whether to render a close button
-   * @param {String} options.content - An HTML string of content
-   * @param {String} options.name - The unique name of this NotificationBanner
-   * @param {Boolean} options.fromStorage - Whether to load content from
-   * localStorage
-   * @param {String} options.type - Can be 'info' or 'warning'
-   * @param {HTMLElement} options.rootElement - Elem inside which to render
+   * Whether the date is valid, i.e. not null
+   *
+   * @param {Date} date
+   * @return {Boolean}
    */
-  constructor(options) {
-    render(
-      <NotificationBannerUI
-        dismissable={options.dismissable}
-        label={options.label}
-        content={options.content}
-        name={options.name}
-        fromStorage={options.fromStorage}
-        color={options.color}
-      />,
-      options.rootElement
-    );
-  }
-}
+
+  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: {},
+});