qpp-style 2.0.1 → 2.0.2-sm.2

package/components/Search/index.js

@@ -0,0 +1,98 @@
+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,
+  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 classes={{ root: 'qpp-icon-mat' }} />
+          </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
+    );
+  }
+}

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;

package/components/SideNav/Chart/ScoreChart.jsx

@@ -0,0 +1,268 @@
+import React, { useState, useEffect } from 'react';
+import { pie, arc } from 'd3-shape';
+import { select, event } from 'd3-selection';
+import PropTypes from 'prop-types';
+
+const WIDTH = 210;
+const HEIGHT = 210;
+const RADIUS = Math.min(WIDTH, HEIGHT) / 2;
+const GAP_VALUE = 2.5;
+
+const ScoreChart = ({ performanceYear, chartData, linkCallback }) => {
+  const [hasLegend, setHasLegend] = useState(false);
+  const [titleMapping, setTitleMapping] = useState({
+    quality: 'Quality Measures',
+    aci: 'Advancing Care Info',
+    pi: 'Promoting Interoperability',
+    ia: 'Improvement Activities',
+    cost: 'Cost',
+  });
+
+  const { categories } = chartData;
+  let legendToggler;
+  let legend;
+
+  const getAdvancingCareLabel = () => {
+    if (performanceYear > 2017) {
+      setTitleMapping({ ...titleMapping, aci: 'Promoting Interoperability' });
+    }
+  };
+
+  const redirectToCategory = (link, categoryId) => {
+    if (!link) {
+      return;
+    }
+
+    // track explicitly chart legends
+    if (window.utag) {
+      window.utag.track('link', {
+        ga_event_category: 'SidebarNav',
+        ga_event_action: `GoTo${categoryId}`,
+        ga_event_label: categoryId,
+      });
+    }
+
+    if (linkCallback) {
+      linkCallback(link);
+    } else {
+      window.location.href = link;
+    }
+  };
+
+  const draw = (chartData) => {
+    const scorePie = pie().sort(null);
+
+    // Removing invalid categories
+    const categories = chartData.categories.filter(
+      ({ maxContribution }) => !!maxContribution
+    );
+
+    // Calculating the sum of valid categories in order to calculate ratios
+    const categorySum = categories
+      .map(({ maxContribution }) => maxContribution)
+      .reduce((sum, current) => sum + current);
+
+    if (!categorySum) {
+      return;
+    }
+
+    select('.score-chart').selectAll('*').remove();
+
+    const svg = select('.score-chart')
+      .attr('width', WIDTH)
+      .attr('height', HEIGHT);
+
+    const chartArc = arc()
+      .innerRadius(RADIUS - 1.5)
+      .outerRadius(RADIUS - 25);
+
+    // Preparing the data structure with ratios: [ FILLED, EMPTY, TRANSPARENT, FILLED, EMPTY, ... ]
+    let data;
+    if (categories.length === 0) {
+      data = [];
+    } else if (categories.length === 1) {
+      const { value, maxContribution } = categories[0];
+      data = [value || 0, maxContribution - value];
+    } else {
+      data = categories
+        .map(({ value, maxContribution }) => [
+          value || 0,
+          maxContribution - value,
+          GAP_VALUE * (categorySum / 100),
+        ])
+        .reduce((a, b) => a.concat(b), []);
+    }
+
+    svg.append('title').attr('id', 'titleID').text('Your submission score');
+
+    svg
+      .append('desc')
+      .attr('id', 'descID')
+      .text(`${chartData.finalScore} out of 100`);
+
+    // Setting up the arcs
+    let arcs = svg
+      .append('g')
+      .attr('class', 'arcs')
+      .attr('role', 'presentation')
+      .selectAll('g.arc')
+      .data(scorePie(data))
+      .enter()
+      .append('g')
+      .attr('class', (d, i) => {
+        let role;
+        if (i % 3 === 0) {
+          role = 'filled';
+        } else if (i % 3 === 1) {
+          role = 'empty';
+        } else {
+          role = 'transparent';
+        }
+        return `arc ${categories[parseInt(i / 3)].name} ${role}`;
+      })
+      .attr('transform', `translate(${RADIUS}, ${RADIUS})`)
+      // For accessibility, we add keyboard access to the filled slices
+      .attr('tabindex', (d, i) => {
+        let tabindex = -1;
+        if (i % 3 === 0) {
+          tabindex = 0;
+        }
+        return tabindex;
+      })
+      // IE for for focusable svg elements
+      .attr('focusable', (d, i) => {
+        if (i % 3 === 0) {
+          return true;
+        }
+      })
+      // For accessibility, we add keyboard access to the filled slices
+      .on('keyup', (d, i) => {
+        const code = event.keyCode || event.which;
+        if (code === 13) {
+          const { name, link } = categories[parseInt(i / 3)];
+          redirectToCategory(link, name);
+        }
+      })
+      // On click - go to category page
+      .on('click', (d, i) => {
+        const { name, link } = categories[parseInt(i / 3)];
+        redirectToCategory(link, name);
+      });
+
+    // Add accessibility description
+    arcs.append('desc').text((d, i) => {
+      if (i % 3 === 0) {
+        const { name, value, maxContribution } = categories[parseInt(i / 3)];
+        return `${titleMapping[name]} ${value} out of ${maxContribution}`;
+      }
+    });
+
+    arcs
+      .append('path')
+      .attr('d', chartArc)
+      // On mouse over - show category tooltip
+      .on('mouseover', (d, i) => {
+        const { name, value, maxContribution } = categories[parseInt(i / 3)];
+        select('.chart-tooltip')
+          .style('opacity', 1)
+          .text(`${titleMapping[name]} ${value}/${maxContribution}`);
+      })
+      // On mouse move - move category tooltip
+      .on('mousemove', () => {
+        select('.chart-tooltip')
+          .style('top', event.clientY - HEIGHT + 10 + 'px')
+          .style('left', event.clientX + 'px');
+      })
+      // On mouse out - hide category tooltip
+      .on('mouseout', () => {
+        select('.chart-tooltip').style('opacity', 0);
+      });
+
+    // Adding title and subtitle
+    const text = svg
+      .append('g')
+      .attr('text-anchor', 'middle')
+      .attr('transform', `translate(${WIDTH / 2}, ${HEIGHT / 2})`);
+
+    // Adding title - X%
+    text
+      .append('text')
+      .attr('y', 4)
+      .attr('class', 'chart-title')
+      .text(chartData.finalScore);
+
+    // Adding subtitle - OUT OF 100
+    text
+      .append('text')
+      .attr('y', 24)
+      .attr('class', 'chart-subtitle')
+      .text('OUT OF 100');
+  };
+
+  const toggleLegend = () => {
+    setHasLegend(!hasLegend);
+  };
+
+  useEffect(() => {
+    if (chartData?.finalScore) {
+      draw(chartData);
+      getAdvancingCareLabel();
+    }
+  }, [chartData?.finalScore]);
+
+  if (hasLegend) {
+    legendToggler = (
+      <button className="open" type="button" aria-pressed="true">
+        Hide Legend
+        <svg
+          className="right-icon rotated"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <use xlinkHref="#chevron-down" />
+        </svg>
+      </button>
+    );
+    legend = categories.map(({ name, value, maxContribution, link }, index) => {
+      return (
+        <li key={name} className="legend-axis">
+          <button onClick={() => redirectToCategory(link, name)}>
+            <span className={`legend-axis-color ${name}`} />
+            &nbsp;
+            <span className="legend-axis-title">{titleMapping[name]}</span>
+            &nbsp;
+            <span className="legend-axis-value">{`${value}/${maxContribution}`}</span>
+          </button>
+        </li>
+      );
+    });
+  } else {
+    legendToggler = (
+      <button type="button" aria-pressed="false">
+        Show Legend
+        <svg className="right-icon" aria-hidden="true" focusable="false">
+          <use xlinkHref="#chevron-down" />
+        </svg>
+      </button>
+    );
+  }
+
+  return (
+    <div className="chart">
+      <svg className="score-chart" focusable="false" />
+      <div className="chart-tooltip off" />
+      <div className="chart-legend-toggler" onClick={toggleLegend}>
+        {legendToggler}
+      </div>
+      <ul className="chart-legend">{legend}</ul>
+    </div>
+  );
+};
+
+ScoreChart.propTypes = {
+  chartData: PropTypes.object,
+  linkCallback: PropTypes.func,
+  performanceYear: PropTypes.number,
+};
+
+export default ScoreChart;

package/components/SideNav/Chart/__tests__/ScoreChart.test.js

@@ -0,0 +1,22 @@
+/* global expect */
+import React from 'react';
+import { render } from '@testing-library/react';
+import ScoreChart from '../ScoreChart';
+
+const CHART_DATA = {
+  finalScore: 50,
+  submissionId: 'x',
+  categories: [
+    { name: 'quality', value: 30, maxContribution: 60 },
+    { name: 'aci', value: 15, maxContribution: 30 },
+    { name: 'ia', value: 5, maxContribution: 10 },
+  ],
+};
+
+describe('ScoreChart component', () => {
+  it('should match snapshot', () => {
+    const { container } = render(<ScoreChart chartData={CHART_DATA} />);
+
+    expect(container).toMatchSnapshot();
+  });
+});