@madie/madie-design-system 1.0.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/Modal.stories.js

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import Modal from './index';
+import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Modal',
+  component: Modal,
+  decorators: [withKnobs],
+};
+
+const useModal = () => {
+  const [open, setOpen] = useState(false);
+  const openModal = () => setOpen(true);
+  const closeModal = () => setOpen(false);
+  return [open, openModal, closeModal];
+};
+
+export const WithDesignSystem = () => {
+  const [open, openModal, closeModal] = useModal();
+  const knobIsOpen = boolean('isOpen', false);
+  return (
+    <div className="qpp-u-padding--12">
+      <button className="qpp-c-button" onClick={openModal}>
+        Open Modal
+      </button>
+      <Modal
+        useDesignSystem
+        isOpen={open || knobIsOpen}
+        title={text('Title text', 'Title Text')}
+        onRequestClose={closeModal}
+      >
+        <p>
+          {text(
+            'bodyText',
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris.'
+          )}
+        </p>
+      </Modal>
+    </div>
+  );
+};
+
+export const WithDesignSystemDialog = () => {
+  const [open, openModal, closeModal] = useModal();
+  const knobIsOpen = boolean('isOpen', false);
+  return (
+    <div className="qpp-u-padding--12">
+      <button className="qpp-c-button" onClick={openModal}>
+        Open Modal
+      </button>
+      <Modal
+        useDesignSystem
+        isOpen={open || knobIsOpen}
+        title={text('Title text', 'Title Text')}
+        onRequestClose={closeModal}
+        primary={{
+          title: 'Yes, go for it',
+          onClick: () => {
+            console.log('submit');
+            closeModal();
+          },
+        }}
+        secondary={{
+          title: 'No, take me back',
+        }}
+      >
+        <p>
+          {text(
+            'bodyText',
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris.'
+          )}
+        </p>
+      </Modal>
+    </div>
+  );
+};
+
+export const WithDesignSystemOverflow = () => {
+  const [open, openModal, closeModal] = useModal();
+  const knobIsOpen = boolean('isOpen', false);
+  return (
+    <div className="qpp-u-padding--12">
+      <button className="qpp-c-button" onClick={openModal}>
+        Open Modal
+      </button>
+      <Modal
+        useDesignSystem
+        isOpen={open || knobIsOpen}
+        title={text('Title text', 'Title Text')}
+        onRequestClose={closeModal}
+        primary={{
+          title: 'Yes, go for it',
+          onClick: () => {
+            console.log('submit');
+            closeModal();
+          },
+        }}
+        secondary={{
+          title: 'No, take me back',
+        }}
+      >
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac
+          pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper
+          vitae lorem ullamcorper, blandit fringilla mauris. Aenean odio nulla,
+          dapibus convallis est ac, tempor congue lorem. Aliquam facilisis
+          tortor eget lectus gravida bibendum. Suspendisse vel posuere risus.
+          Etiam condimentum sollicitudin est, eget auctor lectus suscipit nec.
+          Duis efficitur vitae risus at malesuada. Mauris tempus turpis sed
+          lacus lacinia, et mattis tortor eleifend. In sit amet felis vel quam
+          egestas ultricies ac ac nisl. Morbi elementum dui libero, non
+          convallis risus ornare vel. Maecenas posuere ipsum ut sem aliquet,
+          quis maximus dolor cursus. Praesent vulputate orci tellus, sed
+          fringilla arcu mollis sit amet. Phasellus eros turpis, consequat sit
+          amet placerat sed, mollis ac justo.
+        </p>
+        <p>
+          Cras quis pharetra elit. Mauris lacinia quam quis metus mattis
+          lobortis vel nec arcu. Fusce nec tellus vel nunc cursus vestibulum.
+          Quisque pretium, arcu at sagittis posuere, leo magna tempus nunc, vel
+          malesuada nunc mauris ac ante. Donec arcu velit, imperdiet vitae purus
+          nec, imperdiet auctor nisi. Cras ornare, elit sit amet viverra
+          bibendum, justo dolor congue mi, quis pretium erat orci a lorem. Sed
+          rhoncus quam ut tellus hendrerit accumsan.
+        </p>
+        <p>
+          Donec varius elit vitae elit efficitur fermentum. Vestibulum ante
+          ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+          curae; Nulla facilisi. Ut malesuada venenatis varius. Nunc libero
+          massa, luctus sagittis sapien ultrices, pulvinar venenatis purus. In
+          nec orci ac nibh sagittis lobortis vel sed massa. Morbi pretium odio
+          vitae malesuada ullamcorper. Pellentesque facilisis posuere
+          consectetur. Nam maximus finibus ante, non eleifend neque euismod et.
+        </p>
+        <p>
+          Pellentesque vehicula nec massa nec accumsan. Pellentesque non odio eu
+          felis hendrerit pellentesque non sed neque. Morbi dui nisl, facilisis
+          id gravida non, vehicula at dui. In eleifend suscipit imperdiet.
+          Quisque facilisis augue et mi lobortis tristique. Praesent auctor
+          dictum erat, non mollis ante tempus id. Integer et libero iaculis,
+          imperdiet neque at, pharetra nisl. Suspendisse diam massa, vehicula eu
+          varius ullamcorper, semper vel velit. Morbi consequat mattis nisi, id
+          dignissim est bibendum non. Suspendisse semper laoreet neque, ac
+          tincidunt tortor. Ut posuere urna a convallis consectetur. Mauris
+          varius cursus libero sed molestie. Duis id dignissim arcu. Mauris
+          tincidunt egestas congue.
+        </p>
+        <p>
+          Donec rutrum erat vitae nulla ultricies, quis laoreet orci consequat.
+          Nunc et justo volutpat dolor feugiat convallis. Vivamus efficitur nisi
+          quis risus eleifend, ut tincidunt turpis volutpat. Nam commodo turpis
+          dolor, dapibus rutrum erat facilisis a. Ut a dictum urna. Maecenas vel
+          egestas odio. Ut venenatis est dolor, eget ullamcorper diam finibus
+          et. Proin tincidunt porta pellentesque.
+        </p>
+      </Modal>
+    </div>
+  );
+};

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/NotificationBanner.stories.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import NotificationBanner from './index';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'NotificationBanner',
+  component: NotificationBanner,
+  decorators: [withKnobs],
+};
+
+export const ExampleNotificationBanner = () => (
+  <NotificationBanner
+    result={{
+      content: 'CONTENT',
+      label: 'Label',
+      name: 'name',
+      color: 'blue',
+      dismissable: boolean('dismissable', false),
+    }}
+  />
+);
+
+ExampleNotificationBanner.storyName = 'example NotificationBanner';

package/components/NotificationBanner/index.js

@@ -0,0 +1,265 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import SanitizedContent from '../SanitizedContent';
+import { CloseXIcon, BellOutline } from '../../lib/SvgComponents.jsx';
+import { withGetConfig } from '../hooks/useGetConfig';
+
+class NotificationBanner extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      height: '100%',
+      expanded: true,
+    };
+
+    this._renderCloseButton = this.renderCloseButton.bind(this);
+    this._collapseNotification = this.collapseNotification.bind(this);
+    this._expandNotification = this.expandNotification.bind(this);
+    this._setBannerHeight = this.setBannerHeight.bind(this);
+  }
+
+  componentDidMount() {
+    if (window.innerWidth <= 767) {
+      this.setState({
+        expanded: false,
+      });
+    }
+
+    window.addEventListener('load', this._setBannerHeight);
+    window.addEventListener('resize', this._setBannerHeight);
+  }
+
+  // Populate state with notification from localStorage
+  componentDidUpdate(prevProps) {
+    if (prevProps.result !== this.props?.result) {
+      const { result: notifications } = this.props;
+      if (Object.keys(notifications).length > 0) {
+        this.setState({
+          expanded: this.isNotificationExpanded(notifications.content),
+        });
+      }
+    }
+  }
+
+  setBannerHeight() {
+    const {
+      result: {
+        content: { content },
+      },
+    } = this.props;
+    if (content) {
+      this.bannerContainer.style.transition = 'none';
+
+      this.state.expanded
+        ? this.collapsedBanner.setAttribute('tabIndex', '-1')
+        : this.collapsedBanner.setAttribute('tabIndex', ' ');
+
+      this.setState({
+        height: this.state.expanded
+          ? '100%'
+          : this.collapsedWrapper.offsetHeight + 'px',
+      });
+    }
+  }
+
+  isNotificationExpanded(notification) {
+    const dateDismissed = new Date(notification.dateDismissed);
+    const dateUpdated = new Date(notification.dateUpdated);
+    const notDismissed =
+      (this.isDateValid(dateUpdated) &&
+        this.isDateValid(dateDismissed) &&
+        dateUpdated >= dateDismissed) ||
+      !this.isDateValid(dateDismissed);
+
+    return notDismissed;
+  }
+
+  /**
+   * Whether the date is valid, i.e. not null
+   *
+   * @param {Date} date
+   * @return {Boolean}
+   */
+  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.
+   */
+  markNotificationClosed() {
+    const { result } = this.props;
+    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.
+   */
+  collapseNotification(e) {
+    e.stopPropagation();
+    this.markNotificationClosed();
+    this.collapsedBanner.setAttribute('tabIndex', ' ');
+    this.bannerContainer.style.transition = 'height .2s ease-out';
+    this.setState({
+      expanded: false,
+      height: this.collapsedWrapper.offsetHeight + 'px',
+    });
+  }
+
+  expandNotification() {
+    if (!this.state.expanded) {
+      this.collapsedBanner.setAttribute('tabIndex', '-1');
+      this.bannerContainer.style.transition = 'height .2s ease-out';
+      this.setState({
+        expanded: true,
+        height: '100%',
+      });
+    }
+  }
+
+  /**
+   * Renders the close button if the notification instance is dismissable.
+   *
+   * @return {String} HTML content
+   */
+  renderCloseButton() {
+    const {
+      result: {
+        content: { dismissable },
+      },
+    } = this.props;
+    if (dismissable) {
+      return (
+        <button
+          onClick={this._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>
+      );
+    } else {
+      return '';
+    }
+  }
+
+  /**
+   * Render the notification if it has any contents.
+   *
+   * @return {String} HTML content
+   */
+  render() {
+    const { expanded, height } = this.state;
+    const { result: { content: { enabled, content } = {} } = {} } = this.props;
+    if (!content || !enabled) {
+      return <div id="notification-banner" />;
+    } else {
+      const notificationStatus = expanded ? 'expanded' : 'collapsed';
+      const { color = 'blue', label = 'Update' } = content;
+      const className = `notification-banner  notification-banner-${color} ${notificationStatus}`;
+
+      return (
+        <div
+          style={{ height }}
+          ref={(elem) => (this.bannerContainer = elem)}
+          className={className}
+        >
+          <div
+            ref={(elem) => (this.expandedWrapper = elem)}
+            className={`notification-banner-wrapper expanded-view`}
+          >
+            <div className="notification-banner-label">{label}</div>
+            <div className="notification-banner-content">
+              <SanitizedContent
+                html={expanded ? content : '<p>Nothing to see here</p>'}
+              />
+            </div>
+            {expanded && this._renderCloseButton()}
+          </div>
+
+          <div
+            ref={(elem) => (this.collapsedWrapper = elem)}
+            className={`notification-banner-wrapper collapsed-view`}
+            onClick={this._expandNotification}
+          >
+            <button
+              ref={(elem) => (this.collapsedBanner = elem)}
+              className={`notification-banner-label`}
+            >
+              {label}
+              <span className="bell-icon">
+                <svg aria-hidden="true" focusable="false">
+                  <BellOutline />
+                </svg>
+              </span>
+            </button>
+          </div>
+        </div>
+      );
+    }
+  }
+}
+
+NotificationBanner.propTypes = {
+  result: PropTypes.shape({
+    content: PropTypes.shape({
+      content: PropTypes.string,
+      label: PropTypes.string,
+      color: PropTypes.string,
+      dismissable: PropTypes.bool,
+    }),
+  }),
+};
+
+NotificationBanner.defaultProps = {
+  result: {
+    content: {
+      content: null,
+      label: 'Update',
+      color: 'blue',
+      dismissable: true,
+    },
+  },
+};
+
+export default withGetConfig(NotificationBanner, {
+  timeout: 5,
+  url: '/config/notification',
+  localStorageName: 'active_notification',
+  equalityCheckExclude: ['dateDismissed', 'dateUpdated'],
+  defaultContent: {},
+});