qpp-style 2.0.2-sm.3 → 2.0.3-sm.0

package/components/Footer/FooterUI.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import OpenInNewIcon from '@material-ui/icons/OpenInNew';
-
 import InfoTip from '../Infotip/Infotip';
 import Subscribe from './Subscribe';
 import SocialLinks from './SocialLinks';
 import pjson from '../../package.json';
+import { OpenInNewIcon } from '../../lib/SvgComponents';
 
 const infoTipLabel =
   'When dialing 711, you will automatically be connected to a TRS Communications Assistant who will relay your conversation to the help desk agent with strict confidentiality.';
@@ -126,7 +125,7 @@ const FooterUI = () => (
                   rel="noopener noreferrer"
                 >
                   <strong>Create or Track a QPP Service Center Ticket</strong>
-                  <OpenInNewIcon classes={{ root: 'ccsq-link-icon' }} />
+                  <OpenInNewIcon className="ccsq-link-icon" />
                 </a>
               </h3>
             </div>

package/components/Header/ImpersonatorBanner.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import cookie from 'cookie';
 import axios from 'axios';
-import CloseIcon from '@material-ui/icons/Close';
-
+import { CloseIcon } from '../../lib/SvgComponents';
 import { TextButton } from '../Button';
 import {
   deleteImpersonatedUser,

package/components/Infotip/Infotip.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Tooltip from '../Tooltip';
+import InfotipContent from './InfotipContent';
 import InfotipIcon from './InfotipIcon';
 
 const BUTTON_SIZE = '16px';
@@ -16,10 +16,6 @@ const buttonStyle = {
   userSelect: 'none',
 };
 
-// Use basic touch handlers for mobile "tap-to-open" ui.  Mobile touch
-// is currently not supported by @reach/tooltip; this may change in future.
-// Leverages @reach/tooltip "focus" behavior to open tooltip on tap,
-// and close tooltip on second tap or loss of focus.
 // TODO: We may want to improve this by tracking touch positions to ensure
 // that a 'touchend' event must be reasonably close to the tooltip target.
 const touchHandlers = {
@@ -41,7 +37,7 @@ const touchHandlers = {
  * Tooltip with styled information icon
  */
 const Infotip = ({ ariaLabel, label, lightIcon, ...props }) => (
-  <Tooltip label={label} {...props}>
+  <InfotipContent label={label} {...props}>
     <button
       type="button"
       aria-label={ariaLabel}
@@ -56,7 +52,7 @@ const Infotip = ({ ariaLabel, label, lightIcon, ...props }) => (
         style={{ float: 'left' }}
       />
     </button>
-  </Tooltip>
+  </InfotipContent>
 );
 
 Infotip.propTypes = {

package/components/Infotip/InfotipContent.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Tooltip as TooltipAriaKit,
+  TooltipAnchor,
+  TooltipArrow,
+  useTooltipState,
+} from 'ariakit/tooltip';
+
+const TEXT_COLOR = '#FFF';
+const BACKGROUND_COLOR = '#333';
+
+const InfotipContent = ({ children, label }) => {
+  const tooltip = useTooltipState();
+
+  const cssStyles = {
+    maxWidth: '300px',
+    padding: '8px',
+    borderRadius: '4px',
+    fontSize: '0.9rem',
+    backgroundColor: BACKGROUND_COLOR,
+    color: TEXT_COLOR,
+  };
+  return (
+    <>
+      <TooltipAnchor as={'span'} state={tooltip} className="tooltip-anchor">
+        {children}
+      </TooltipAnchor>
+      <TooltipAriaKit
+        state={tooltip}
+        className="tooltip-content"
+        style={cssStyles}
+      >
+        {label}
+        <TooltipArrow />
+      </TooltipAriaKit>
+    </>
+  );
+};
+
+InfotipContent.propTypes = {
+  children: PropTypes.node.isRequired,
+  label: PropTypes.node.isRequired,
+};
+
+export default InfotipContent;

package/components/Search/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import SearchIcon from '@material-ui/icons/Search';
+import { SearchIcon } from '../../lib/SvgComponents';
 
 const Search = ({
   id,
@@ -55,7 +55,7 @@ const Search = ({
             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' }} />
+            <SearchIcon viewBox="0 0 45 50" />
           </button>
         </div>
       </form>

package/components/SideNav/Content/LevelTwoContent.jsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import {
+  NavLinkContainer,
+  NavLinkInline,
+  NavLinkDrawer,
+  NavItemInline,
+} from '../Links';
+import AnimationGroup from '../AnimationGroup/AnimationGroup';
+import { PracticeDetails } from '../Details';
+import { ScoreChart } from '../Chart';
+import PropTypes from 'prop-types';
+import {
+  AccountHomeIcon,
+  DashboardIcon,
+  StarIcon,
+  CliniciansIcon,
+  ScoreIncrease,
+  TooltipIcon,
+} from '../../../lib/SvgComponents.jsx';
+import {
+  submissionsUrl,
+  manageUrl,
+  dashboardUrl,
+  performanceFeedbackUrl,
+} from '../helpers';
+
+const PAST_REPORTING_YEARS = ['2017', '2018'];
+
+const LevelTwoContent = ({
+  isExpanded,
+  chartData,
+  showReportingLinks,
+  config: {
+    chartActive = true,
+    openDrawersByDefault,
+    linkCallback,
+    updateTime,
+    practiceId,
+    practiceName,
+    practiceTin,
+    apmEntityId,
+    isConnectedUsersPage,
+    vgId,
+    roleAbbr,
+    performanceYear,
+    finalFeedbackOpen,
+    isApmPaymentDetailsPage,
+    useTooltips,
+    cpcPlusId,
+    pcfId,
+  } = {},
+}) => {
+  const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
+  let links = [];
+
+  if (isApmPaymentDetailsPage) {
+    const apmDetailsUrl = '/user/apm-incentive-payments/(.*)/practice-details';
+    links.push(
+      <NavItemInline
+        icon={<CliniciansIcon />}
+        className={linkClass}
+        label="Payment Details"
+        urlExpressionToMatch={apmDetailsUrl}
+        showLabel={isExpanded}
+      />
+    );
+  } else {
+    const linkLabel = isConnectedUsersPage
+      ? 'Connected Users'
+      : 'Eligibility & Reporting';
+    let items = [];
+
+    const practiceUrlSegment =
+      performanceYear === '2017' || performanceYear === '2018' || !roleAbbr
+        ? practiceId
+        : practiceId + '_' + roleAbbr;
+
+    if (showReportingLinks && !apmEntityId) {
+      items = [
+        {
+          url: `${submissionsUrl}/reporting/${practiceUrlSegment}/overview`,
+          label: vgId ? 'Virtual Group Reporting' : 'Group Reporting Overview',
+          items: [
+            {
+              url: `${submissionsUrl}/reporting/${practiceUrlSegment}/quality`,
+              label: 'Quality Measures',
+            },
+            {
+              url: `${submissionsUrl}/reporting/${practiceUrlSegment}/aci`,
+              label: 'Promoting Interoperability',
+            },
+            {
+              url: `${submissionsUrl}/reporting/${practiceUrlSegment}/ia`,
+              label: 'Improvement Activities',
+            },
+          ],
+        },
+      ];
+    }
+    links.push(
+      <NavLinkDrawer
+        key="connected-clinicians-link"
+        isAlwaysOpen
+        url={
+          !isConnectedUsersPage
+            ? `${dashboardUrl}`
+            : `${manageUrl}/${practiceId}/connected-users`
+        }
+        isExpanded={isExpanded}
+        openByDefault={openDrawersByDefault}
+        leftIcon={<DashboardIcon />}
+        className={linkClass}
+        label={linkLabel}
+        linkCallback={linkCallback}
+        listOfLinks={
+          !isConnectedUsersPage && [
+            {
+              label: vgId
+                ? 'Virtual Group Details & Participants'
+                : apmEntityId
+                ? 'APM Entity Details & Participants'
+                : 'Practice Details & Clinicians',
+              items: items,
+            },
+          ]
+        }
+        disabled={isConnectedUsersPage ? true : false}
+      />
+    );
+    if (
+      (apmEntityId && performanceYear === '2018' && finalFeedbackOpen) ||
+      (!apmEntityId &&
+        !vgId &&
+        !isConnectedUsersPage &&
+        PAST_REPORTING_YEARS.indexOf(performanceYear) >= 0)
+    ) {
+      links.push(
+        <NavLinkInline
+          key="performance-feedback-link"
+          icon={<StarIcon />}
+          className={linkClass}
+          url={performanceFeedbackUrl(
+            finalFeedbackOpen && performanceYear === '2018'
+              ? performanceYear
+              : '2017'
+          )}
+          label="Performance Feedback"
+          linkCallback={linkCallback}
+          showLabel={isExpanded}
+          useTooltips={useTooltips}
+        />
+      );
+    }
+  }
+
+  return (
+    <div className="sidebar-content">
+      <AnimationGroup display={isExpanded}>
+        <NavLinkInline
+          icon={<AccountHomeIcon />}
+          url={submissionsUrl}
+          label="Account Home"
+          showLabel={isExpanded}
+          className="account-home-link"
+          linkCallback={linkCallback}
+          useTooltips={useTooltips}
+        />
+        <hr />
+      </AnimationGroup>
+      <AnimationGroup display={isExpanded} className={'details'}>
+        <PracticeDetails
+          practiceName={practiceName}
+          {...(!practiceTin ? {} : { practiceTin })}
+          {...(!apmEntityId ? {} : { apmEntityId })}
+          {...(!vgId ? {} : { vgId })}
+          {...(!cpcPlusId ? {} : { cpcPlusId })}
+          {...(!pcfId ? {} : { pcfId })}
+        />
+        <hr />
+      </AnimationGroup>
+      <div className="level-two-nav animation-flat">
+        <NavLinkContainer listOfLinks={links} />
+        <AnimationGroup display={isExpanded && chartActive} className="chart">
+          <div>
+            <hr />
+            <div className="chart-title">
+              <p className="title">Final Group Score</p>
+              <p className="disclaimer">
+                <svg className="left-icon" aria-hidden="true">
+                  <ScoreIncrease />
+                </svg>
+                Score may increase
+                <svg className="right-icon" aria-hidden="true">
+                  <TooltipIcon />
+                </svg>
+              </p>
+              {updateTime && (
+                <p className="timestamp">Last update at {updateTime}</p>
+              )}
+            </div>
+            <ScoreChart chartData={chartData} linkCallback={linkCallback} />
+          </div>
+        </AnimationGroup>
+      </div>
+    </div>
+  );
+};
+
+LevelTwoContent.propTypes = {
+  isExpanded: PropTypes.bool,
+  config: PropTypes.object,
+  chartData: PropTypes.object,
+  showReportingLinks: PropTypes.bool,
+};
+
+export default LevelTwoContent;

package/components/SideNav/Content/index.js

@@ -1,3 +1,4 @@
 import LevelOneContent from './LevelOneContent';
+import LevelTwoContent from './LevelTwoContent';
 
-export { LevelOneContent };
+export { LevelOneContent, LevelTwoContent };

package/components/SideNav/Links/NavLinkInline.jsx

@@ -14,6 +14,7 @@ const NavLinkInline = ({
   showLabel,
   linkCallback,
   disabled,
+  useTooltips,
   target,
 }) => {
   const localUrl = urlExpressionToMatch || url;
@@ -25,12 +26,12 @@ const NavLinkInline = ({
   const tooltipRef = React.useRef();
 
   React.useEffect(() => {
-    if (!showLabel && svgRef.current) {
+    if (!showLabel && useTooltips && svgRef.current) {
       const existingMouseenter = svgRef.current.onmouseover;
       const existingMouseout = svgRef.current.onmouseout;
 
       svgRef.current.onmouseover = () => {
-        if (tooltipRef.current) {
+        if (tooltipRef.current && useTooltips) {
           const svgOffset = svgRef.current.getBoundingClientRect();
           tooltipRef.current.style.top = `${svgOffset.top - 5}px`;
           tooltipRef.current.style.display = 'block';
@@ -104,6 +105,7 @@ NavLinkInline.propTypes = {
   showLabel: PropTypes.bool,
   linkCallback: PropTypes.func,
   disabled: PropTypes.bool,
+  useTooltips: PropTypes.bool,
   target: PropTypes.string,
 };
 

package/components/SideNav/UI/SideNavUI.jsx

@@ -1,8 +1,9 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
+import { sideNavExpandedStorage } from '../helpers';
 import { withGetConfig } from '../../hooks/useGetConfig';
-import { LevelOneContent } from '../Content';
+import { LevelOneContent, LevelTwoContent } from '../Content';
 import {
   NavLinkContainer,
   NavLinkInline,
@@ -18,20 +19,28 @@ import CmsSwitchLink from '../Links/CmsSwitchLink';
 import defaultContent from './default-content';
 
 const SideNavUI = ({
+  chartData,
   config,
+  currentLevel,
   isAltStyle,
-  isExpanded,
   items,
   onCollapsed,
   onExpanded,
   performanceYear,
+  showReportingLinks,
   result,
 }) => {
-  const [isExpandedState, setIsExpandedState] = useState(isExpanded);
+  // Use localStorage value to set init state, default to true
+  const [isExpandedState, setIsExpandedState] = useState(
+    sideNavExpandedStorage.setDefault()
+  );
+  const [itemsState, setItemsState] = useState(items);
+  const [currentLevelState, setCurrentLevelState] = useState(currentLevel);
 
   const collapseRef = useRef(null);
 
   const expand = () => {
+    sideNavExpandedStorage.toggle();
     setIsExpandedState(true);
     if (onExpanded) {
       onExpanded();
@@ -39,6 +48,7 @@ const SideNavUI = ({
   };
 
   const collapse = () => {
+    sideNavExpandedStorage.toggle();
     setIsExpandedState(false);
     if (onCollapsed) {
       onCollapsed();
@@ -49,8 +59,30 @@ const SideNavUI = ({
     isExpandedState ? collapse() : expand();
   };
 
+  const getLevelContent = () => {
+    return (
+      {
+        2: (
+          <LevelTwoContent
+            showReportingLinks={showReportingLinks}
+            isExpanded={isExpandedState}
+            chartData={chartData}
+            config={config}
+          />
+        ),
+      }[currentLevelState] || (
+        <LevelOneContent
+          levelOneContent={result?.content}
+          isExpanded={isExpandedState}
+          config={config}
+        />
+      )
+    );
+  };
+
   const getDynamicContent = (contentItems, className, recursionId) => {
-    const { openDrawersByDefault, linkActiveFunc, linkCallback } = config;
+    const { openDrawersByDefault, linkActiveFunc, linkCallback, useTooltips } =
+      config;
     let linkClass = isExpandedState ? 'link-inline' : 'link-collapsed';
     const containerRecursionId = recursionId || 0;
 
@@ -90,6 +122,7 @@ const SideNavUI = ({
                 label={item.label}
                 linkCallback={linkCallback}
                 showLabel={true}
+                useTooltips={useTooltips}
               />
             </AnimationGroup>
           ),
@@ -102,6 +135,7 @@ const SideNavUI = ({
                 label={item.label}
                 linkCallback={linkCallback}
                 showLabel={true}
+                useTooltips={useTooltips}
               />
             </AnimationGroup>
           ),
@@ -191,6 +225,7 @@ const SideNavUI = ({
             linkCallback={linkCallback}
             showLabel={isExpandedState}
             disabled={item.disabled}
+            useTooltips={useTooltips}
             target={item.target}
           />
         )
@@ -214,18 +249,25 @@ const SideNavUI = ({
     }
   };
 
-  const content = !items?.length ? (
-    <LevelOneContent
-      levelOneContent={result?.content}
-      isExpanded={isExpandedState}
-      config={config}
-    />
-  ) : (
-    getDynamicContent(
-      items,
-      'sidebar-content' + (isAltStyle ? ' alt-style' : '')
-    )
-  );
+  const content = itemsState
+    ? getDynamicContent(
+        itemsState,
+        'sidebar-content' + (isAltStyle ? ' alt-style' : '')
+      )
+    : getLevelContent();
+
+  // Set side nav expanded state in localStorage on initial render
+  useEffect(() => {
+    sideNavExpandedStorage.init();
+  }, []);
+
+  useEffect(() => {
+    setCurrentLevelState(currentLevel);
+  }, [currentLevel]);
+
+  useEffect(() => {
+    setItemsState(items);
+  }, [items]);
 
   return (
     <aside
@@ -248,7 +290,6 @@ const SideNavUI = ({
 
 SideNavUI.propTypes = {
   currentLevel: PropTypes.number,
-  isExpanded: PropTypes.bool,
   onExpanded: PropTypes.func,
   onCollapsed: PropTypes.func,
   chartData: PropTypes.object,
@@ -270,7 +311,6 @@ SideNavUI.propTypes = {
 
 SideNavUI.defaultProps = {
   currentLevel: 1,
-  isExpanded: true,
   onExpanded: () => {},
   onCollapsed: () => {},
   chartData: {},

package/components/SideNav/helpers.js

@@ -328,6 +328,44 @@ const isImpersonationLink = (docCookie, linkLabel) => {
   return !helpdeskLinks.includes(linkLabel);
 };
 
+/**
+ * Set SideNav expanded state as qpp_side_nav_expanded in localStorage
+ */
+const sideNavExpandedStorage = {
+  isNullOrUndefined: function () {
+    const sideNavExpandedValue = localStorage.getItem('qpp_side_nav_expanded');
+    return sideNavExpandedValue === null || sideNavExpandedValue === undefined;
+  },
+  init: function () {
+    if (this.isNullOrUndefined()) {
+      localStorage.setItem('qpp_side_nav_expanded', true);
+    }
+  },
+  toggle: function () {
+    const isSideNavExpanded = JSON.parse(
+      localStorage.getItem('qpp_side_nav_expanded')
+    );
+    if (!isSideNavExpanded) {
+      localStorage.setItem('qpp_side_nav_expanded', true);
+    } else {
+      localStorage.setItem('qpp_side_nav_expanded', false);
+    }
+  },
+  get: function () {
+    return JSON.parse(localStorage.getItem('qpp_side_nav_expanded'));
+  },
+  remove: function () {
+    localStorage.removeItem('qpp_side_nav_expanded');
+  },
+  setDefault: function () {
+    let defaultValue = true;
+    if (!this.isNullOrUndefined()) {
+      defaultValue = this.get();
+    }
+    return defaultValue;
+  },
+};
+
 module.exports = {
   submissionsUrl,
   dashboardUrl,
@@ -348,4 +386,5 @@ module.exports = {
   isImpersonating,
   isImpersonationLink,
   loadSideNavContent,
+  sideNavExpandedStorage,
 };

package/components/SideNav/index.js

@@ -5,7 +5,6 @@ import { SideNavUI } from './UI';
 const SideNav = (options = {}) => {
   const {
     rootElement,
-    isExpanded,
     onExpanded,
     onCollapsed,
     chartData,
@@ -26,7 +25,6 @@ const SideNav = (options = {}) => {
 
   const { expand, collapse } = render(
     <SideNavUI
-      isExpanded={isExpanded}
       onExpanded={onExpanded}
       onCollapsed={onCollapsed}
       chartData={chartData}

package/components/Tabs/TabPanel.js

@@ -1,41 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const TabPanel = ({
-  children,
-  value,
-  id,
-  index,
-  className,
-  disabled,
-}) => {
-  const classes = ['qpp-c-tabs__panel', className].filter(Boolean).join(' ');
-  return (
-    <div
-      role="tabpanel"
-      id={id}
-      aria-hidden={value !== index}
-      aria-labelledby={`qpp-c-tabs__item--${id}`}
-      aria-disabled={disabled}
-      className={classes}
-    >
-      {value === index && children}
-    </div>
-  );
-};
-
-TabPanel.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  index: PropTypes.number.isRequired,
-  id: PropTypes.string,
-  value: PropTypes.number.isRequired,
-  disabled: PropTypes.bool,
-};
-
-TabPanel.defaultProps = {
-  index: 0,
-  value: 0,
+const TabPanel = ({ children }) => {
+  return children;
 };
 
 export default TabPanel;