qpp-style 0.0.9 → 0.0.10

package/components/Modal/Modal.jsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import ReactModal from 'react-modal';
 import PropTypes from 'prop-types';
 
-import { CloseXIcon } from '../../lib/SvgComponents.jsx';
+import { CloseXIcon2 } from '../../lib/SvgComponents.jsx';
 
 const Modal = ({
   children,
@@ -15,7 +15,8 @@ const Modal = ({
   ...props
 }) => {
   const [overflowSeparator, setOverflowSeparator] = useState(false);
-  let contentRef = null;
+  const closeButtonRef = useRef(null);
+  const contentRef = useRef(null);
 
   useEffect(() => {
     ReactModal.setAppElement(appElement);
@@ -24,19 +25,30 @@ const Modal = ({
   return (
     <ReactModal
       onRequestClose={onRequestClose}
-      portalClassName='qpp-c-modal'
-      className='qpp-c-modal__content'
-      overlayClassName='qpp-c-modal__overlay'
+      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.scrollHeight >
+          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}
     >
@@ -45,51 +57,52 @@ const Modal = ({
           overflowSeparator ? 'qpp-c-modal__header-sep' : ''
         }`}
       >
-        <h3>{title}</h3>
+        <h3 id="modal-heading">{title}</h3>
         <button
           className="closex qpp-c-button qpp-c-button--text qpp-u-color--black"
-          aria-label="Close modal"
+          aria-label="close modal"
           data-testid="modal-close-btn"
           onClick={onRequestClose}
+          ref={closeButtonRef}
         >
-          <svg className="close-icon" aria-hidden="true">
-            <CloseXIcon />
-          </svg>
+          <CloseXIcon2 />
         </button>
       </div>
       <div
+        id="modal-body"
         className="qpp-c-modal__body"
-        ref={(_content) => (contentRef = _content)}
+        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}
-                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"
-              >
-                {primary.title}
-              </button>
-            )}
-          </div>
-        </>
+        <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>
   );
@@ -120,7 +133,7 @@ Modal.defaultProps = {
   title: undefined,
   primary: null,
   secondary: null,
-  appElement: 'body > *:not(.ReactModalPortal)',
+  appElement: 'body > *:not(.qpp-c-modal)',
   isOpen: false,
 };
 

package/components/Modal/index.jsx

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

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

package/components/Search/index.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SearchIcon } from '../../lib/SvgComponents';
+
+const Search = ({
+  id,
+  name,
+  placeholder,
+  disableSearchBtn,
+  disabled,
+  inputValue,
+  onClick,
+  onChange,
+  inputAriaLabel,
+  buttonAriaLabel,
+  inputWidth,
+  label,
+  parentElement,
+}) => {
+  const ContainerElement = parentElement || 'span';
+  const inputStyle = {
+    width: inputWidth,
+  };
+  return (
+    <ContainerElement className="qppds">
+      <form role="search" className="qpp-c-search qpp-c-search--compact">
+        <label
+          className={label ? 'qpp-u-margin-bottom--8' : 'qpp-u-visually-hidden'}
+          htmlFor={id}
+        >
+          {label ? label : 'Search'}
+        </label>
+
+        <div className="qpp-c-search__wrap">
+          <input
+            style={inputStyle}
+            className="qpp-c-text-input"
+            type="search"
+            id={id}
+            name={name}
+            placeholder={placeholder}
+            value={inputValue}
+            disabled={disabled}
+            onChange={onChange}
+            aria-label={inputAriaLabel}
+          />
+
+          <button
+            data-testid="search-btn"
+            aria-label={buttonAriaLabel}
+            onClick={onClick}
+            disabled={disableSearchBtn}
+            id={`${id}-submit`}
+            type="submit"
+            className="qpp-c-search__submit qpp-c-button qpp-c-button--text"
+          >
+            <span className="qpp-u-visually-hidden">Search</span>
+            <SearchIcon viewBox="0 0 45 50" />
+          </button>
+        </div>
+      </form>
+    </ContainerElement>
+  );
+};
+
+Search.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  disableSearchBtn: PropTypes.bool,
+  disabled: PropTypes.bool,
+  inputValue: PropTypes.string,
+  onClick: PropTypes.func,
+  onChange: PropTypes.func,
+  inputAriaLabel: PropTypes.string,
+  buttonAriaLabel: PropTypes.string,
+  inputWidth: PropTypes.string,
+  label: PropTypes.string,
+  parentElement: PropTypes.string,
+};
+
+Search.defaultProps = {
+  label: null,
+  id: 'search-input',
+  name: '',
+  placeholder: '',
+  disableSearchBtn: false,
+  disabled: false,
+  inputValue: '',
+  onClick: () => null,
+  onChange: () => null,
+  inputAriaLabel: '',
+  buttonAriaLabel: '',
+  inputWidth: 'auto',
+  parentElement: 'span',
+};
+
+export default Search;

package/components/SessionDialog/sessionDialog.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from 'react-dom';
+import SessionDialogUI from '../SessionDialogUI';
+
+/**
+ * Renders the Session Dialog UI content.
+ */
+export default class SessionDialog {
+  /**
+   * @param {Object} options - An object containing content and config data
+   * @param {Boolean} options.showImmediate
+   * @param {Number} options.warningTimeout
+   * @param {String} options.appElement
+   * @param {HTMLElement} options.rootElement - Elem inside which to render
+   */
+  constructor(options) {
+    render(
+      <SessionDialogUI
+        showImmediate={options.showImmediate}
+        warningTimeout={options.warningTimeout}
+        appElement={options.appElement}
+      />,
+      options.rootElement
+    );
+  }
+}