qpp-style 0.0.9 → 0.0.10

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

package/components/SideNav/Chart/ScoreChart.jsx

@@ -265,4 +265,4 @@ ScoreChart.propTypes = {
   performanceYear: PropTypes.number,
 };
 
-export default ScoreChart
+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();
   });
 });

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

@@ -1,44 +1,153 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ScoreChart component should match snapshot 1`] = `
-<ScoreChart
-  chartData={
-    Object {
-      "categories": Array [
-        Object {
-          "maxContribution": 60,
-          "name": "quality",
-          "value": 30,
-        },
-        Object {
-          "maxContribution": 30,
-          "name": "aci",
-          "value": 15,
-        },
-        Object {
-          "maxContribution": 10,
-          "name": "ia",
-          "value": 5,
-        },
-      ],
-      "finalScore": 50,
-      "submissionId": "x",
-    }
-  }
->
+<div>
   <div
-    className="chart"
+    class="chart"
   >
     <svg
-      className="score-chart"
+      class="score-chart"
       focusable="false"
-    />
+      height="210"
+      width="210"
+    >
+      <title
+        id="titleID"
+      >
+        Your submission score
+      </title>
+      <desc
+        id="descID"
+      >
+        50 out of 100
+      </desc>
+      <g
+        class="arcs"
+        role="presentation"
+      >
+        <g
+          class="arc quality filled"
+          focusable="true"
+          tabindex="0"
+          transform="translate(105, 105)"
+        >
+          <desc>
+            Quality Measures 30 out of 60
+          </desc>
+          <path
+            d="M0,-103.5A103.5,103.5,0,0,1,101.778,18.799L78.669,14.531A80,80,0,0,0,0,-80Z"
+          />
+        </g>
+        <g
+          class="arc quality empty"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M101.778,18.799A103.5,103.5,0,0,1,-36.973,96.671L-28.578,74.721A80,80,0,0,0,78.669,14.531Z"
+          />
+        </g>
+        <g
+          class="arc quality transparent"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-36.973,96.671A103.5,103.5,0,0,1,-50.655,90.257L-39.153,69.764A80,80,0,0,0,-28.578,74.721Z"
+          />
+        </g>
+        <g
+          class="arc aci filled"
+          focusable="true"
+          tabindex="0"
+          transform="translate(105, 105)"
+        >
+          <desc>
+            Advancing Care Info 15 out of 30
+          </desc>
+          <path
+            d="M-50.655,90.257A103.5,103.5,0,0,1,-101.778,18.799L-78.669,14.531A80,80,0,0,0,-39.153,69.764Z"
+          />
+        </g>
+        <g
+          class="arc aci empty"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-101.778,18.799A103.5,103.5,0,0,1,-79.555,-66.206L-61.492,-51.174A80,80,0,0,0,-78.669,14.531Z"
+          />
+        </g>
+        <g
+          class="arc aci transparent"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-79.555,-66.206A103.5,103.5,0,0,1,-69.067,-77.084L-53.386,-59.582A80,80,0,0,0,-61.492,-51.174Z"
+          />
+        </g>
+        <g
+          class="arc ia filled"
+          focusable="true"
+          tabindex="0"
+          transform="translate(105, 105)"
+        >
+          <desc>
+            Improvement Activities 5 out of 10
+          </desc>
+          <path
+            d="M-69.067,-77.084A103.5,103.5,0,0,1,-43.931,-93.714L-33.957,-72.436A80,80,0,0,0,-53.386,-59.582Z"
+          />
+        </g>
+        <g
+          class="arc ia empty"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-43.931,-93.714A103.5,103.5,0,0,1,-15.07,-102.397L-11.648,-79.147A80,80,0,0,0,-33.957,-72.436Z"
+          />
+        </g>
+        <g
+          class="arc ia transparent"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-15.07,-102.397A103.5,103.5,0,0,1,0,-103.5L0,-80A80,80,0,0,0,-11.648,-79.147Z"
+          />
+        </g>
+      </g>
+      <g
+        text-anchor="middle"
+        transform="translate(105, 105)"
+      >
+        <text
+          class="chart-title"
+          y="4"
+        >
+          50
+        </text>
+        <text
+          class="chart-subtitle"
+          y="24"
+        >
+          OUT OF 100
+        </text>
+      </g>
+    </svg>
     <div
-      className="chart-tooltip off"
+      class="chart-tooltip off"
     />
     <div
-      className="chart-legend-toggler"
-      onClick={[Function]}
+      class="chart-legend-toggler"
     >
       <button
         aria-pressed="false"
@@ -47,18 +156,18 @@ exports[`ScoreChart component should match snapshot 1`] = `
         Show Legend
         <svg
           aria-hidden="true"
-          className="right-icon"
+          class="right-icon"
           focusable="false"
         >
           <use
-            xlinkHref="#chevron-down"
+            xlink:href="#chevron-down"
           />
         </svg>
       </button>
     </div>
     <ul
-      className="chart-legend"
+      class="chart-legend"
     />
   </div>
-</ScoreChart>
+</div>
 `;

package/components/SideNav/Chart/index.js

@@ -1,3 +1,3 @@
 import ScoreChart from './ScoreChart';
 
-export { ScoreChart };
+export default ScoreChart;