qpp-style 2.0.1 → 2.0.2-sm.2

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">
+        <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: {},
+});

package/components/SanitizedContent/index.jsx

@@ -0,0 +1,200 @@
+import React from 'react';
+import xss from 'xss';
+import PropTypes from 'prop-types';
+
+// Override the default allowed HTML tags
+const defaultAllowedTags = [
+  'a',
+  'abbr',
+  'address',
+  'article',
+  'aside',
+  'b',
+  'blockquote',
+  'br',
+  'button',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hr',
+  'i',
+  'img',
+  'input',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'mark',
+  'meter',
+  'nav',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'section',
+  'select',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'sub',
+  'summary',
+  'sup',
+  'table',
+  'tbody',
+  'td',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'tr',
+  'ul',
+  'svg',
+  'use',
+  'polygon',
+  'circle',
+  'g',
+  'path',
+];
+
+// Override the default allowed HTML attributes for all tags
+const defaultAllowedAttributes = {
+  '*': [
+    'action',
+    'alt',
+    'aria-*',
+    'autocomplete',
+    'cite',
+    'class',
+    'cols',
+    'colspan',
+    'data-*',
+    'datetime',
+    'disabled',
+    'download',
+    'for',
+    'headers',
+    'height',
+    'hidden',
+    'href',
+    'hreflang',
+    'id',
+    'lang',
+    'list',
+    'max',
+    'maxlength',
+    'minlength',
+    'media',
+    'method',
+    'min',
+    'multiple',
+    'name',
+    'novalidate',
+    'open',
+    'pattern',
+    'placeholder',
+    'readonly',
+    'rel',
+    'required',
+    'reversed',
+    'rows',
+    'rowspan',
+    'sandbox',
+    'scope',
+    'scoped',
+    'selected',
+    'size',
+    'sizes',
+    'span',
+    'spellcheck',
+    'src',
+    'srcset',
+    'start',
+    'step',
+    'style',
+    'summary',
+    'tabindex',
+    'target',
+    'title',
+    'type',
+    'value',
+    'width',
+    'wrap',
+    'fill',
+    'stroke',
+    ' stroke-width',
+    'd',
+    'points',
+    'viewbox',
+    'x',
+    'y',
+    'cx',
+    'cy',
+    'r',
+    'xmlns',
+    'xmlns:xlink',
+    'xlink:href',
+    'version',
+    'preserveaspectratio',
+    'enable-background',
+  ],
+};
+
+const SanitizedContent = ({
+  html = '<div/>',
+  customClassName = null,
+  allowedTags = defaultAllowedTags,
+  allowedAttributes = defaultAllowedAttributes,
+}) => {
+  const whiteList = allowedTags.reduce((map, tag) => {
+    map[tag] = allowedAttributes['*'];
+    return map;
+  }, {});
+  const sanitizedHTML = xss(html, { whiteList });
+  return (
+    <div
+      {...(customClassName && { className: customClassName })}
+      dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
+    />
+  );
+};
+
+SanitizedContent.propTypes = {
+  html: PropTypes.string,
+  customClassName: PropTypes.string,
+  allowedTags: PropTypes.array,
+  allowedAttributes: PropTypes.array,
+};
+
+export default SanitizedContent;