@madie/madie-design-system 1.0.0

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;

package/components/Search/Search.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Search from './index';
+import { withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Search',
+  component: Search,
+  decorators: [withKnobs],
+};
+
+export const ExampleSearch = () => (
+  <Search
+    id="Example id"
+    name="Example name"
+    placeholder="Example placeholder"
+    inputAriaLabel="Example input arial-label"
+    buttonAriaLabel="Example button arial-label"
+  />
+);
+
+ExampleSearch.storyName = 'example Search';

package/components/Search/index.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SearchIcon from '@material-ui/icons/Search';
+
+const Search = ({
+  id,
+  name,
+  placeholder,
+  disableSearchBtn,
+  disabled,
+  inputValue,
+  onClick,
+  onChange,
+  inputAriaLabel,
+  buttonAriaLabel,
+  inputWidth,
+}) => {
+  const inputStyle = {
+    width: inputWidth,
+  };
+  return (
+    <form role="search" className="qpp-c-search qpp-c-search--compact">
+      <label className="qpp-u-visually-hidden" htmlFor={id}>
+        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 classes={{ root: 'qpp-icon-mat' }} />
+        </button>
+      </div>
+    </form>
+  );
+};
+
+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,
+};
+
+Search.defaultProps = {
+  id: 'search-input',
+  name: '',
+  placeholder: '',
+  disableSearchBtn: false,
+  disabled: false,
+  inputValue: '',
+  onClick: () => null,
+  onChange: () => null,
+  inputAriaLabel: '',
+  buttonAriaLabel: '',
+  inputWidth: 'auto',
+};
+
+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
+    );
+  }
+}

package/components/SessionDialogUI.jsx

@@ -0,0 +1,261 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import cookie from 'cookie';
+import retry from 'retry';
+import jwtDecode from 'jwt-decode';
+
+import Modal from './Modal';
+import RefreshSession from '../session/refresh';
+import LogoutSession from '../session/logout';
+import fetchTtl from '../session/ttl';
+
+const fetchTtlIntervalMs = 60000;
+
+export default class SessionDialogUI extends Component {
+  /**
+   * Create a SessionDialogUI component.
+   * @param {object} props - Configuration options. See SessionDialog for more
+   */
+  constructor(props) {
+    super(props);
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+    this.refreshSession = this.refreshSession.bind(this);
+    this.signOut = this.signOut.bind(this);
+    this.startTimer = this.startTimer.bind(this);
+    this.shouldShowDialog = this.shouldShowDialog.bind(this);
+    this.shouldSignOut = this.shouldSignOut.bind(this);
+    this.minutesUntil = this.minutesUntil.bind(this);
+    this.checkExpiry = this.checkExpiry.bind(this);
+    this.onInterval = this.onInterval.bind(this);
+
+    if (props.showImmediate === true) {
+      this.state = {
+        showModal: true,
+        showError: false,
+      };
+    } else {
+      this.state = {
+        showModal: false,
+        showError: false,
+      };
+
+      this.startTimer();
+    }
+  }
+
+  /**
+   * Extracts the token exp value as a JavaScript date.
+   * @param {Object} cookies - An object representation of the cookie store
+   * @returns {(date|null)} The token expiration date, if found
+   */
+  getTokenExpiry(cookies) {
+    let expiry = null;
+
+    if (cookies.hasOwnProperty('qpp_auth_token') && cookies.qpp_auth_token) {
+      // See https://tools.ietf.org/html/rfc7519
+      // `exp` is a NumericDate representing "seconds since the epoch"
+      // and it needs to be milliseconds to get a JavaScript date from it.
+      const { exp } = jwtDecode(cookies.qpp_auth_token);
+      expiry = new Date(exp * 1000);
+    }
+
+    return expiry;
+  }
+
+  checkExpiry(expiry) {
+    if (expiry) {
+      if (this.shouldShowDialog(expiry)) {
+        this.handleOpenModal();
+      } else if (this.shouldSignOut(expiry)) {
+        this.signOut();
+        clearInterval(this.warningInterval);
+      }
+    } else {
+      clearInterval(this.warningInterval);
+    }
+  }
+
+  onInterval() {
+    const cookies = cookie.parse(document.cookie);
+
+    if (cookies.hasOwnProperty('qpp_auth_token') && cookies.qpp_auth_token) {
+      const operation = retry.operation({
+        retries: 5,
+        factor: 1,
+        minTimeout: 1000,
+        maxTimeout: 1000,
+      });
+
+      operation.attempt(() => {
+        fetchTtl(cookies.qpp_auth_token)
+          .then(this.checkExpiry)
+          .catch((error) => {
+            if (operation.retry(error)) {
+              // try again before giving up
+              return;
+            }
+            clearInterval(this.warningInterval);
+            // sign an inactive user out
+            this.forceTimeoutHandle = setTimeout(this.signOut, 120 * 1000);
+            this.setState({
+              showModal: false,
+              showError: true,
+            });
+          });
+      });
+    }
+  }
+
+  /**
+   * Checks whether the user is within a specified number of minutes before
+   * their session token expires. If so, show a warning dialog. If the
+   * expiration has been reached, sign the user out.
+   */
+  startTimer() {
+    clearInterval(this.warningInterval);
+
+    this.warningInterval = setInterval(this.onInterval, fetchTtlIntervalMs);
+  }
+
+  /**
+   * Returns whether the current time is within the timeout range of expiry.
+   * @param {date|number} expiry - Expiration date to check against
+   * @returns {boolean}
+   */
+  shouldShowDialog(expiry) {
+    if (typeof expiry === 'number') {
+      const minutesLeft = expiry / 60;
+
+      return !this.state.showModal && minutesLeft <= this.props.warningTimeout;
+    } else {
+      return (
+        !this.state.showModal &&
+        this.minutesUntil(expiry) <= this.props.warningTimeout
+      );
+    }
+  }
+
+  /**
+   * Returns whether the current time has reached the expiration date.
+   * @param {date|number} expiry - Expiration date to check against
+   * @returns {boolean}
+   */
+  shouldSignOut(expiry) {
+    if (typeof expiry === 'number') {
+      return expiry <= 1;
+    } else {
+      return this.minutesUntil(expiry) <= 0;
+    }
+  }
+
+  /**
+   * Returns number of minutes until the expiration date.
+   * @param {date} expiry - Expiration date to check against
+   * @returns {number}
+   */
+  minutesUntil(expiry) {
+    return (expiry - new Date().getTime()) / 60000;
+  }
+
+  /**
+   * Sets the modal state to visible.
+   */
+  handleOpenModal() {
+    this.setState({
+      showModal: true,
+      showError: false,
+    });
+  }
+
+  /**
+   * Sets the modal state to hidden.
+   */
+  handleCloseModal() {
+    this.setState({
+      showModal: false,
+      showError: false,
+    });
+  }
+
+  /**
+   * Handles the user requesting their session be extended.
+   */
+  refreshSession() {
+    RefreshSession({
+      window,
+      onSuccess: () => {
+        this.startTimer();
+      },
+    });
+
+    this.handleCloseModal();
+  }
+
+  /**
+   * Handles the user requesting their session be ended.
+   */
+  signOut() {
+    if (this.forceTimeoutHandle) {
+      clearTimeout(this.forceTimeoutHandle);
+    }
+    LogoutSession(window);
+    this.handleCloseModal();
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <Modal
+          useDesignSystem
+          title="You will be signed out within two minutes"
+          isOpen={this.state.showModal}
+          primary={{
+            title: 'Keep me signed in',
+            onClick: this.refreshSession,
+          }}
+          secondary={{
+            title: 'Sign me out now',
+            onClick: this.signOut,
+          }}
+          onRequestClose={this.handleCloseModal}
+        >
+          <p>
+            You have been inactive for thirty minutes. For your security, we
+            will sign you out automatically.
+          </p>
+        </Modal>
+
+        <Modal
+          useDesignSystem
+          title="Technical Difficulties"
+          isOpen={this.state.showError}
+          primary={{
+            title: 'Sign Out',
+            onClick: this.signOut,
+          }}
+          onRequestClose={this.signOut}
+        >
+          <p>
+            We’re experiencing technical difficulties. Please log in again to
+            continue. For your security, we will sign you out automatically
+            within two minutes.
+          </p>
+        </Modal>
+      </React.Fragment>
+    );
+  }
+}
+
+SessionDialogUI.propTypes = {
+  showImmediate: PropTypes.bool,
+  warningTimeout: PropTypes.number,
+  appElement: PropTypes.string,
+};
+
+SessionDialogUI.defaultProps = {
+  showImmediate: false,
+  warningTimeout: 2,
+  appElement: undefined,
+};

package/components/SideNav/AnimationGroup/AnimationGroup.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const hasDarkerBackground = (darkerBackground) => {
+  return darkerBackground ? 'background-highlight' : '';
+}
+
+const AnimationGroup = ({ display, className, children, darkerBackground }) => {
+  return (
+    <div
+      className={`animation-group animation-group-${className || 'default'}${
+        display ? ' animation-group-enter' : ' animation-group-exit'
+      } ${hasDarkerBackground(darkerBackground)}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+AnimationGroup.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  display: PropTypes.bool,
+  darkerBackground: PropTypes.bool
+};
+
+export default AnimationGroup;