qpp-style 0.0.8 → 0.0.10

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
+    );
+  }
+}

package/components/SessionDialogUI.jsx

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
-import InfoModal from './InfoModal';
 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';
@@ -203,38 +204,45 @@ export default class SessionDialogUI extends Component {
     this.handleCloseModal();
   }
 
-  /**
-   * Renders a ReactModal component.
-   * See: https://reactcommunity.org/react-modal/
-   */
   render() {
     return (
       <React.Fragment>
-        <InfoModal
-          appElement={this.props.appElement}
+        <Modal
+          useDesignSystem
+          title="You will be signed out within two minutes"
           isOpen={this.state.showModal}
-          primaryAction="Keep me signed in"
-          primaryCallback={this.refreshSession}
-          secondaryAction="Sign me out now"
-          secondaryCallback={this.signOut}
+          primary={{
+            title: 'Keep me signed in',
+            onClick: this.refreshSession,
+          }}
+          secondary={{
+            title: 'Sign me out now',
+            onClick: this.signOut,
+          }}
           onRequestClose={this.handleCloseModal}
-          closeXAction={this.handleCloseModal}
-          titleText="You will be signed out within two minutes"
-          bodyText={`You have been inactive for thirty minutes. For
-                    your security, we will sign you out automatically.`}
-        />
-        <InfoModal
-          appElement={this.props.appElement}
+        >
+          <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}
-          primaryAction="Sign out"
-          primaryCallback={this.signOut}
+          primary={{
+            title: 'Sign Out',
+            onClick: this.signOut,
+          }}
           onRequestClose={this.signOut}
-          closeXAction={this.signOut}
-          titleText="Technical Difficulties"
-          bodyText={`We're experiencing technical difficulties. Please log in again
-                    to continue. For your security, we will sign you out automatically within
-                    two minutes.`}
-        />
+        >
+          <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>
     );
   }

package/components/SideNav/AnimationGroup/AnimationGroup.jsx

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

package/components/SideNav/Chart/ScoreChart.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import { pie, arc } from 'd3-shape';
 import { select, event } from 'd3-selection';
 import PropTypes from 'prop-types';
@@ -8,51 +8,27 @@ const HEIGHT = 210;
 const RADIUS = Math.min(WIDTH, HEIGHT) / 2;
 const GAP_VALUE = 2.5;
 
-export default class ScoreChart extends Component {
-  constructor(props) {
-    super(props);
-    this.draw = this.draw.bind(this);
-    this.toggleLegend = this.toggleLegend.bind(this);
-    this.getAdvancingCareLabel = this.getAdvancingCareLabel.bind(this);
-    this.state = {
-      legend: false,
-      titleMapping: {
-        quality: 'Quality Measures',
-        aci: 'Advancing Care Info',
-        pi: 'Promoting Interoperability',
-        ia: 'Improvement Activities',
-        cost: 'Cost',
-      },
-    };
-  }
+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',
+  });
 
-  componentDidMount() {
-    const { chartData } = this.props;
-    if (chartData && chartData.finalScore) {
-      this.draw(chartData);
-      this.getAdvancingCareLabel();
-    }
-  }
+  const { categories } = chartData;
+  let legendToggler;
+  let legend;
 
-  UNSAFE_componentWillReceiveProps({ chartData }) {
-    if (chartData && chartData.finalScore) {
-      this.draw(chartData);
-      this.getAdvancingCareLabel();
+  const getAdvancingCareLabel = () => {
+    if (performanceYear > 2017) {
+      setTitleMapping({ ...titleMapping, aci: 'Promoting Interoperability' });
     }
-  }
+  };
 
-  getAdvancingCareLabel() {
-    if (this.props.performanceYear > 2017) {
-      const newState = Object.assign({}, this.state.titleMapping);
-      newState.aci = 'Promoting Interoperability';
-
-      this.setState({
-        titleMapping: newState,
-      });
-    }
-  }
-
-  redirectToCategory(link, categoryId) {
+  const redirectToCategory = (link, categoryId) => {
     if (!link) {
       return;
     }
@@ -66,14 +42,14 @@ export default class ScoreChart extends Component {
       });
     }
 
-    if (this.props.linkCallback) {
-      this.props.linkCallback(link);
+    if (linkCallback) {
+      linkCallback(link);
     } else {
       window.location.href = link;
     }
-  }
+  };
 
-  draw(chartData) {
+  const draw = (chartData) => {
     const scorePie = pie().sort(null);
 
     // Removing invalid categories
@@ -164,20 +140,20 @@ export default class ScoreChart extends Component {
         const code = event.keyCode || event.which;
         if (code === 13) {
           const { name, link } = categories[parseInt(i / 3)];
-          this.redirectToCategory(link, name);
+          redirectToCategory(link, name);
         }
       })
       // On click - go to category page
       .on('click', (d, i) => {
         const { name, link } = categories[parseInt(i / 3)];
-        this.redirectToCategory(link, name);
+        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 `${this.state.titleMapping[name]} ${value} out of ${maxContribution}`;
+        return `${titleMapping[name]} ${value} out of ${maxContribution}`;
       }
     });
 
@@ -189,7 +165,7 @@ export default class ScoreChart extends Component {
         const { name, value, maxContribution } = categories[parseInt(i / 3)];
         select('.chart-tooltip')
           .style('opacity', 1)
-          .text(`${this.state.titleMapping[name]} ${value}/${maxContribution}`);
+          .text(`${titleMapping[name]} ${value}/${maxContribution}`);
       })
       // On mouse move - move category tooltip
       .on('mousemove', () => {
@@ -221,76 +197,72 @@ export default class ScoreChart extends Component {
       .attr('y', 24)
       .attr('class', 'chart-subtitle')
       .text('OUT OF 100');
-  }
-
-  toggleLegend() {
-    this.setState({ legend: !this.state.legend });
-  }
+  };
 
-  render() {
-    const { categories } = this.props.chartData;
-    let legendToggler;
-    let legend;
+  const toggleLegend = () => {
+    setHasLegend(!hasLegend);
+  };
 
-    if (this.state.legend) {
-      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={() => this.redirectToCategory(link, name)}>
-                <span className={`legend-axis-color ${name}`} />
-                &nbsp;
-                <span className="legend-axis-title">
-                  {this.state.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>
-      );
+  useEffect(() => {
+    if (chartData?.finalScore) {
+      draw(chartData);
+      getAdvancingCareLabel();
     }
+  }, [chartData?.finalScore]);
 
-    return (
-      <div className="chart">
+  if (hasLegend) {
+    legendToggler = (
+      <button className="open" type="button" aria-pressed="true">
+        Hide Legend
         <svg
-          className="score-chart"
+          className="right-icon rotated"
+          aria-hidden="true"
           focusable="false"
-        />
-        <div className="chart-tooltip off" />
-        <div className="chart-legend-toggler" onClick={this.toggleLegend}>
-          {legendToggler}
-        </div>
-        <ul className="chart-legend">{legend}</ul>
-      </div>
+        >
+          <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

@@ -1,7 +1,6 @@
 /* global expect */
 import React from 'react';
-import { mount } from 'enzyme';
-import { shallowToJson } from 'enzyme-to-json';
+import { render } from '@testing-library/react';
 import ScoreChart from '../ScoreChart';
 
 const CHART_DATA = {
@@ -15,17 +14,9 @@ const CHART_DATA = {
 };
 
 describe('ScoreChart component', () => {
-  const wrapper = mount(<ScoreChart chartData={CHART_DATA} />);
-
   it('should match snapshot', () => {
-    const tree = shallowToJson(wrapper);
-
-    expect(tree).toMatchSnapshot();
-  });
-
-  it.skip('should render svg', () => {
-    const target = wrapper.find('svg');
+    const { container } = render(<ScoreChart chartData={CHART_DATA} />);
 
-    expect(target).toHaveLength(1);
+    expect(container).toMatchSnapshot();
   });
 });