qpp-style 9.34.0 → 9.34.1

package/components/GovBanner/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 const GovBanner = () => {
   const [hideContent, setHideContent] = useState(true);
@@ -11,7 +11,7 @@ const GovBanner = () => {
       <div className="qpp-c-gov-banner__expand-wrap">
         <header
           className={`qpp-c-gov-banner__header ${
-            !hideContent ? 'qpp-c-gov-banner__header--expanded' : ''
+            !hideContent ? "qpp-c-gov-banner__header--expanded" : ""
           }`}
         >
           <div className="qpp-c-gov-banner__inner">

package/components/Header/HeaderAccountMenu.jsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useHeaderState } from './hooks';
-import { setUtagLink } from './utag-helpers';
-import HeaderMenuItem from './HeaderMenuItem';
-import Session from '../Session';
+import React from "react";
+import PropTypes from "prop-types";
+import { useHeaderState } from "./hooks";
+import { setUtagLink } from "./utag-helpers";
+import HeaderMenuItem from "./HeaderMenuItem";
+import Session from "../Session";
 
 const HeaderAccountMenu = ({ handleClick, isLoginEnabled, isDevPre }) => {
   const { closeMenus, RouterLink, headerContent } = useHeaderState();
@@ -26,7 +26,7 @@ const HeaderAccountMenu = ({ handleClick, isLoginEnabled, isDevPre }) => {
             to="/login"
             onClick={() => {
               closeMenus();
-              setUtagLink('main navbar', 'click', '/login');
+              setUtagLink("main navbar", "click", "/login");
             }}
             data-track-category="TopNav"
             data-track-action="click"
@@ -50,7 +50,7 @@ const HeaderAccountMenu = ({ handleClick, isLoginEnabled, isDevPre }) => {
           data-track-action="click"
           data-track-label="Sign In"
           onClick={() => {
-            setUtagLink('main navbar', 'click', '/login');
+            setUtagLink("main navbar", "click", "/login");
           }}
         >
           <div className="nav-title">Sign In</div>

package/components/Header/HeaderCancel.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
 const HeaderCancel = ({ handleCancel }) => {
   return (

package/components/Header/HeaderContainer.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-import HeaderLogo from './HeaderLogo';
-import NotificationBanner from '../NotificationBanner';
-import GovBanner from '../GovBanner';
-import { useHeaderState } from './hooks';
+import HeaderLogo from "./HeaderLogo";
+import NotificationBanner from "../NotificationBanner";
+import GovBanner from "../GovBanner";
+import { useHeaderState } from "./hooks";
 /**
  * Accessibility enhancement that moves focus to an element for "Skip" links
  * @param {Object} e - The native JS event
@@ -23,25 +23,25 @@ const HeaderContainer = ({
   isIESupportPage,
 }) => {
   const { currentOpenMenu } = useHeaderState();
-  const cssCancelBtn = showCancelButton ? 'show-cancel-button' : '';
+  const cssCancelBtn = showCancelButton ? "show-cancel-button" : "";
   const cssMenuDropdownStatus =
-    currentOpenMenu === ''
-      ? 'header-dropdown--closed'
-      : 'header-dropdown--open';
+    currentOpenMenu === ""
+      ? "header-dropdown--closed"
+      : "header-dropdown--open";
 
   return (
     <>
       <a
         className="skip"
-        onClick={(e) => jumpToLink(e, `${skipToContentId || 'mainContent'}`)}
-        href={`#${skipToContentId || 'mainContent'}`}
+        onClick={(e) => jumpToLink(e, `${skipToContentId || "mainContent"}`)}
+        href={`#${skipToContentId || "mainContent"}`}
       >
         Skip to content
       </a>
       {includeSkipToSidebar && (
         <a
           className="skip"
-          onClick={(e) => jumpToLink(e, 'qppSidebar')}
+          onClick={(e) => jumpToLink(e, "qppSidebar")}
           href="#qppSidebar"
         >
           Skip to sidebar

package/components/Header/HeaderLogo.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
 
-import { useHeaderState } from './hooks';
+import { useHeaderState } from "./hooks";
 
 const HeaderLogo = () => {
   const { closeMenus, RouterLink } = useHeaderState();

package/components/Header/HeaderMenuButton.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-import { useHeaderState } from './hooks';
-import NavigationButtonIcon from './NavigationButtonIcon';
-import { setUtagLink } from './utag-helpers';
+import { useHeaderState } from "./hooks";
+import NavigationButtonIcon from "./NavigationButtonIcon";
+import { setUtagLink } from "./utag-helpers";
 
 const HeaderMenuButton = ({ href, name }) => {
   const { RouterLink, closeMenus } = useHeaderState();
@@ -14,7 +14,7 @@ const HeaderMenuButton = ({ href, name }) => {
         to={href}
         onClick={() => {
           closeMenus();
-          setUtagLink('main navbar', 'click', href);
+          setUtagLink("main navbar", "click", href);
         }}
         data-track-category="TopNav"
         data-track-action="click"
@@ -33,7 +33,7 @@ const HeaderMenuButton = ({ href, name }) => {
       data-track-action="click"
       data-track-label={name}
       onClick={() => {
-        setUtagLink('main navbar', 'click', href);
+        setUtagLink("main navbar", "click", href);
       }}
     >
       {name}

package/components/Header/HeaderMenuItem.jsx

@@ -1,12 +1,12 @@
-import React, { Fragment, useRef, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { Fragment, useRef, useEffect, useState } from "react";
+import PropTypes from "prop-types";
 
-import { useWindowWidth, useHeaderState } from './hooks';
-import HeaderMenuLink from './HeaderMenuLink';
-import HeaderMenuButton from './HeaderMenuButton';
-import HeaderMenuSignOutButton from './HeaderMenuSignOutButton';
-import Accordion from '../Accordion';
-import { Chevron } from '../../lib/Chevron.jsx';
+import { useWindowWidth, useHeaderState } from "./hooks";
+import HeaderMenuLink from "./HeaderMenuLink";
+import HeaderMenuButton from "./HeaderMenuButton";
+import HeaderMenuSignOutButton from "./HeaderMenuSignOutButton";
+import Accordion from "../Accordion";
+import { Chevron } from "../../lib/Chevron.jsx";
 
 const menuSizes = {
   1: 315,
@@ -16,19 +16,19 @@ const menuSizes = {
 };
 
 const excludedClickOutClasses = [
-  'menu-dropdown-toggle',
-  'nav-link',
-  'nav-link-li',
-  'dropdown-description',
-  'dropdown-title',
-  'dropdown-title-chevron-container',
-  'signout-button',
-  'submenu-section',
-  'accordion',
-  'accordion-title',
-  'accordion-left-title',
-  'header-menu-btn',
-  'btn-navigation-icon',
+  "menu-dropdown-toggle",
+  "nav-link",
+  "nav-link-li",
+  "dropdown-description",
+  "dropdown-title",
+  "dropdown-title-chevron-container",
+  "signout-button",
+  "submenu-section",
+  "accordion",
+  "accordion-title",
+  "accordion-left-title",
+  "header-menu-btn",
+  "btn-navigation-icon",
 ];
 
 const HeaderMenuItem = ({
@@ -42,7 +42,7 @@ const HeaderMenuItem = ({
   className,
 }) => {
   const [isSubMenuFullWidth, setSubMenuFullWidth] = useState(false);
-  const [openMobileSubMenu, setOpenMobileSubMenu] = useState('');
+  const [openMobileSubMenu, setOpenMobileSubMenu] = useState("");
 
   const windowWidth = useWindowWidth();
   const menuButtonRef = useRef(null);
@@ -77,16 +77,16 @@ const HeaderMenuItem = ({
       ) {
         return;
       }
-      setOpenMobileSubMenu('');
+      setOpenMobileSubMenu("");
       closeMenus();
     };
-    document.addEventListener('mousedown', listener);
-    return () => document.removeEventListener('mousedown', listener);
+    document.addEventListener("mousedown", listener);
+    return () => document.removeEventListener("mousedown", listener);
   }, [menuRef]);
 
   useEffect(() => {
     if (!isMobileMenuExpanded || !isOpen) {
-      setOpenMobileSubMenu('');
+      setOpenMobileSubMenu("");
     }
   }, [isMobileMenuExpanded, isOpen]);
 
@@ -94,8 +94,8 @@ const HeaderMenuItem = ({
     <li
       key={`header-item-${menuIdentifier}`}
       className={`header-item-${menuIdentifier}${
-        isSubMenuFullWidth ? ' full-width-menu' : ''
-      }${className ? ` ${className}` : ''}`}
+        isSubMenuFullWidth ? " full-width-menu" : ""
+      }${className ? ` ${className}` : ""}`}
       ref={menuRef}
     >
       <button
@@ -114,12 +114,12 @@ const HeaderMenuItem = ({
           </div>
         </div>
 
-        <span className={`dropdown-description ${isOpen ? 'active' : ''}`}>
+        <span className={`dropdown-description ${isOpen ? "active" : ""}`}>
           {subtitle}
         </span>
       </button>
       <div
-        className={`nav-section${isOpen ? ' open' : ''}`}
+        className={`nav-section${isOpen ? " open" : ""}`}
         id={`nav-section-${menuIdentifier}`}
         hidden={!isOpen}
         data-columns={numColumns}
@@ -136,7 +136,7 @@ const HeaderMenuItem = ({
                       )}
                       <ul>
                         {c.items.map((item) => {
-                          const isSubLink = item.type === 'sublink';
+                          const isSubLink = item.type === "sublink";
                           const componentsByType = {
                             button: HeaderMenuButton,
                             signout: HeaderMenuSignOutButton,
@@ -150,8 +150,8 @@ const HeaderMenuItem = ({
                               key={`item-link-${item.name}`}
                               className={
                                 isSubLink
-                                  ? 'nav-link-li sublink'
-                                  : 'nav-link-li'
+                                  ? "nav-link-li sublink"
+                                  : "nav-link-li"
                               }
                             >
                               <SubMenuComponent
@@ -164,7 +164,7 @@ const HeaderMenuItem = ({
                         })}
                       </ul>
                     </li>
-                    {name === 'MIPS' && (
+                    {name === "MIPS" && (
                       <li
                         key={`${menuIdentifier}-mobile-${index}-${cIndex}`}
                         className="submenu-section-mips-mobile"
@@ -181,7 +181,7 @@ const HeaderMenuItem = ({
                         >
                           <ul>
                             {c.items.map((item) => {
-                              const isSubLink = item.type === 'sublink';
+                              const isSubLink = item.type === "sublink";
                               const componentsByType = {
                                 button: HeaderMenuButton,
                                 signout: HeaderMenuSignOutButton,
@@ -194,7 +194,7 @@ const HeaderMenuItem = ({
                                 <li
                                   onClick={handleClick}
                                   key={`item-link-${item.name}`}
-                                  className={isSubLink ? 'sublink' : ''}
+                                  className={isSubLink ? "sublink" : ""}
                                 >
                                   <SubMenuComponent
                                     href={item.href}
@@ -230,7 +230,7 @@ HeaderMenuItem.propTypes = {
   isMobileMenuExpanded: PropTypes.bool.isRequired,
 };
 HeaderMenuItem.defaultProps = {
-  menuName: '',
+  menuName: "",
   columns: [],
   rows: [],
   className: null,

package/components/Header/HeaderMenuLink.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { submissionsUrl } from '../SideNav/helpers';
-import { useHeaderState } from './hooks';
-import { setUtagLink } from './utag-helpers';
+import React from "react";
+import PropTypes from "prop-types";
+import { submissionsUrl } from "../SideNav/helpers";
+import { useHeaderState } from "./hooks";
+import { setUtagLink } from "./utag-helpers";
 
 // exclude submissions urls
 const isNotExcluded = (href) => !href.includes(submissionsUrl);
@@ -15,7 +15,7 @@ const HeaderMenuLink = ({ href, name }) => {
         to={href}
         onClick={() => {
           closeMenus();
-          setUtagLink('main navbar', 'click', href);
+          setUtagLink("main navbar", "click", href);
         }}
         data-track-category="TopNav"
         data-track-action="click"
@@ -34,13 +34,13 @@ const HeaderMenuLink = ({ href, name }) => {
       data-track-action="click"
       data-track-label={name}
       onKeyDown={(e) => {
-        if (e.key === ' ' || e.code === 'Space') {
+        if (e.key === " " || e.code === "Space") {
           window.location.href = window.location.origin + href;
-          setUtagLink('main navbar', 'keydown', href);
+          setUtagLink("main navbar", "keydown", href);
         }
       }}
       onClick={() => {
-        setUtagLink('main navbar', 'click', href);
+        setUtagLink("main navbar", "click", href);
       }}
     >
       {name}

package/components/Header/HeaderMenuSignOutButton.js

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
 
-import { LogoutSession } from '../../session';
-import { setUtagLink } from './utag-helpers';
-import Modal from '../Modal/index';
+import { LogoutSession } from "../../session";
+import { setUtagLink } from "./utag-helpers";
+import Modal from "../Modal/index";
 
 const useModal = () => {
   const [open, setOpen] = useState(false);
@@ -35,17 +35,17 @@ const HeaderMenuSignOutButton = ({ name }) => {
         title="Sign out"
         onRequestClose={closeModal}
         primary={{
-          title: 'Sign me out now',
+          title: "Sign me out now",
           onClick: () => {
             showLogoutWarning();
-            setUtagLink('button', 'click', 'Sign me out now');
+            setUtagLink("button", "click", "Sign me out now");
           },
         }}
         secondary={{
-          title: 'Keep me signed in',
+          title: "Keep me signed in",
           onClick: () => {
             closeModal();
-            setUtagLink('button', 'click', 'Keep me signed in');
+            setUtagLink("button", "click", "Keep me signed in");
           },
         }}
       >

package/components/Header/HeaderMobileButton.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { CloseXIcon } from '../../lib/SvgComponents.jsx';
+import React from "react";
+import PropTypes from "prop-types";
+import { CloseXIcon } from "../../lib/SvgComponents.jsx";
 
 const HeaderMobileButton = ({ isMobileMenuExpanded, handleClick }) => (
   <button
@@ -9,7 +9,7 @@ const HeaderMobileButton = ({ isMobileMenuExpanded, handleClick }) => (
     data-toggle="collapse"
     data-target="#nav-mobile"
     aria-label="Navigation menu"
-    aria-expanded={isMobileMenuExpanded ? 'true' : 'false'}
+    aria-expanded={isMobileMenuExpanded ? "true" : "false"}
     aria-controls="nav-mobile"
     onClick={handleClick}
   >

package/components/Header/HeaderUI.jsx

@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import axios from 'axios';
-import HeaderAccountMenu from './HeaderAccountMenu.jsx';
-import HeaderCancel from './HeaderCancel.jsx';
-import HeaderContainer from './HeaderContainer';
-import HeaderMenuItem from './HeaderMenuItem';
-import HeaderMobileButton from './HeaderMobileButton';
-import ImpersonatorBanner from './ImpersonatorBanner';
-import HelpIcon from './HelpIcon';
-import { HeaderStateProvider } from './hooks';
-import defaultContent from './default-content.json';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import HeaderAccountMenu from "./HeaderAccountMenu.jsx";
+import HeaderCancel from "./HeaderCancel.jsx";
+import HeaderContainer from "./HeaderContainer";
+import HeaderMenuItem from "./HeaderMenuItem";
+import HeaderMobileButton from "./HeaderMobileButton";
+import ImpersonatorBanner from "./ImpersonatorBanner";
+import HelpIcon from "./HelpIcon";
+import { HeaderStateProvider } from "./hooks";
+import defaultContent from "./default-content.json";
 
 const HeaderUI = ({
   handleCancel,

package/components/Header/HelpIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 const HelpIcon = () => (
   <a

package/components/Header/ImpersonatorBanner.jsx

@@ -1,23 +1,23 @@
-import React from 'react';
-import cookie from 'cookie';
-import axios from 'axios';
-import { CloseIcon } from '../../lib/SvgComponents';
-import { TextButton } from '../Button';
+import React from "react";
+import cookie from "cookie";
+import axios from "axios";
+import { CloseIcon } from "../../lib/SvgComponents";
+import { TextButton } from "../Button";
 import {
   deleteImpersonatedUser,
   revertQppHasAuthsCookie,
   revertApmPaymentCookie,
-} from '../../session/logout';
-import { viewingToolUrl } from '../SideNav/helpers';
+} from "../../session/logout";
+import { viewingToolUrl } from "../SideNav/helpers";
 
 const getViewType = (viewType) =>
   ({
-    username: 'HARP ID',
-    npi: 'NPI',
-    tin: 'TIN',
-    apm_id: 'APM Entity',
-    cms_id: 'Registry',
-    vg_id: 'Virtual Group',
+    username: "HARP ID",
+    npi: "NPI",
+    tin: "TIN",
+    apm_id: "APM Entity",
+    cms_id: "Registry",
+    vg_id: "Virtual Group",
   })[viewType];
 
 const ImpersonatorBanner = () => {
@@ -28,14 +28,14 @@ const ImpersonatorBanner = () => {
   } = cookie.parse(document.cookie);
 
   const className = [
-    'qpp-u-display--flex',
-    'qpp-u-justify-content--between',
-    'qpp-u-fill--gold-20',
-    'qpp-u-padding-x--40',
-    'qpp-u-padding-y--24',
-    'qpp-u-font-size--14',
-    'qpp-u-color--gray-80',
-  ].join(' ');
+    "qpp-u-display--flex",
+    "qpp-u-justify-content--between",
+    "qpp-u-fill--gold-20",
+    "qpp-u-padding-x--40",
+    "qpp-u-padding-y--24",
+    "qpp-u-font-size--14",
+    "qpp-u-color--gray-80",
+  ].join(" ");
 
   const onClick = () => {
     const fn = () => {
@@ -52,9 +52,9 @@ const ImpersonatorBanner = () => {
       window.location.href = viewingToolUrl;
     };
     return axios
-      .delete('/api/auth/helpdesk/view', {
+      .delete("/api/auth/helpdesk/view", {
         headers: {
-          Accept: 'application/vnd.qpp.cms.gov.v1+json',
+          Accept: "application/vnd.qpp.cms.gov.v2+json",
           Authorization: `Bearer ${token}`,
         },
       })
@@ -66,7 +66,7 @@ const ImpersonatorBanner = () => {
     user && (
       <div className={className}>
         <div>
-          VIEW ONLY | You are currently viewing {getViewType(viewType)}:{' '}
+          VIEW ONLY | You are currently viewing {getViewType(viewType)}:{" "}
           <strong>{user}</strong>
         </div>
         <TextButton onClick={onClick} className="qpp-u-color--gray-80">

package/components/Header/NavigationButtonIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 const NavigationButtonIcon = () => (
   <svg

package/components/Header/header.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { render } from 'react-dom';
-import HeaderUI from './HeaderUI.jsx';
+import React from "react";
+import { render } from "react-dom";
+import HeaderUI from "./HeaderUI.jsx";
 
 /**
  * Renders the QPP Header content.

package/components/Header/hooks.js

@@ -1,5 +1,5 @@
-import React, { createContext, useState, useEffect, useContext } from 'react';
-import PropTypes from 'prop-types';
+import React, { createContext, useState, useEffect, useContext } from "react";
+import PropTypes from "prop-types";
 
 export function useWindowWidth() {
   const [windowSize, setWindowSize] = useState(undefined);
@@ -7,9 +7,9 @@ export function useWindowWidth() {
     function handleResize() {
       setWindowSize(window.innerWidth);
     }
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
     handleResize();
-    return () => window.removeEventListener('resize', handleResize);
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
   return windowSize;
 }
@@ -21,16 +21,16 @@ export const HeaderStateProvider = ({
   RouterLink,
   headerContent, // allow header content from api request available to all child components
 }) => {
-  const [currentOpenMenu, setCurrentOpenMenu] = useState('');
+  const [currentOpenMenu, setCurrentOpenMenu] = useState("");
 
   const handleToggleMenu = (name) => {
     if (currentOpenMenu === name) {
-      return setCurrentOpenMenu('');
+      return setCurrentOpenMenu("");
     }
     return setCurrentOpenMenu(name);
   };
 
-  const closeMenus = () => setCurrentOpenMenu('');
+  const closeMenus = () => setCurrentOpenMenu("");
 
   return (
     <HeaderStateContext.Provider
@@ -60,7 +60,7 @@ HeaderStateProvider.defaultProps = {
 export const useHeaderState = () => {
   const context = useContext(HeaderStateContext);
   if (context === undefined) {
-    throw new Error('useHeaderState must be used within a HeaderStateProvider');
+    throw new Error("useHeaderState must be used within a HeaderStateProvider");
   }
   return context;
 };

package/components/Header/utag-helpers.js

@@ -5,5 +5,5 @@ export const setUtagLink = (eventCategory, eventAction, eventLabel) =>
     ga_event_label: eventLabel,
     page_title: `${window.document.title}`,
     page_url: `${window.location.pathname}`,
-    event: 'trackEvent',
+    event: "trackEvent",
   });