qpp-style 0.0.9 → 0.0.10

package/components/Header/HeaderUI.jsx

@@ -1,144 +1,143 @@
 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 HelpIcon from './HelpIcon'
-import defaultHeaderContent from './default-content.json';
-
-// Time the local storage content item will be active, in minutes
-const CONTENT_STORAGE_EXPIRATION_TIMEOUT = 30;
+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 = ({ 
-  fbpPerformanceYear,
-  feedbackPerformanceYear,
+const HeaderUI = ({
   handleCancel,
   includeSkipToSidebar,
   isDevPre,
   isLoginEnabled,
-  performanceYear,
   showCancelButton,
-  showPhysicianCompareLink,
-  showFacilityBasedPreviewLink,
   skipToContentId,
+  RouterLink,
+  isIESupportPage,
 }) => {
-  const [isMobileMenuExpanded, setIsMobileMenuExpanded] = useState(false)
-  const [currentOpenMenu, setCurrentOpenMenu] = useState()
-  const [content, setContent] = useState(null);
+  const [isMobileMenuExpanded, setIsMobileMenuExpanded] = useState(false);
+  const [headerContent, setHeaderContent] = useState({});
 
-  const handleToggleMenu = name => {
-    if (currentOpenMenu === name) {
-      return setCurrentOpenMenu('')
-    }
-    return setCurrentOpenMenu(name)
-  }
+  const mapContentToRows = (config) => {
+    // Append transposed array to content
+    return config?.map((section) => {
+      // Only header items with multiple columns need to be transposed
+      // Single column menus' tab order will remain the same
+      if (section.columns?.length > 1) {
+        const { columns } = section;
+        return {
+          ...section,
+          rows: columns[0].map((_, colIndex) =>
+            columns.map((row) => row[colIndex])
+          ),
+        };
+      }
+      return { ...section, rows: section.columns };
+    });
+  };
 
-  // The top nav content is populated with the following priority order:
-  // 1. Use the top nav content in localStorage if it's there
-  // 2. If not, make a call to get it from the QPPFE endpoint. Hydrate the localStorage item with the response.
-  // 3. If the call fails, use the default content
+  // execute on init render
   useEffect(() => {
-    const storageContent = JSON.parse(
-      localStorage.getItem('qpp_top_nav_content')
-    );
-    if (
-      storageContent?.content &&
-      new Date().valueOf() < storageContent.expiration
-    ) {
-      setContent(storageContent.content);
-    } else {
-      const origin = window.location.origin;
-      axios
-        .get(
-          !origin.includes('localhost')
-            ? `${origin}/config/header`
-            : 'https://qpp.cms.gov/config/header'
-        )
-        .then(({ data: { data = {} } }) => {
-          localStorage.setItem(
-            'qpp_top_nav_content',
-            JSON.stringify({
-              content: data.content,
-              expiration:
-                new Date().valueOf() +
-                CONTENT_STORAGE_EXPIRATION_TIMEOUT * 60 * 1000,
-            })
-          );
-          setContent(data.content);
-        })
-        .catch((e) => {
-          setContent(defaultHeaderContent);
-        });
+    let cancelRequest = false;
+    const { origin } = window.location;
+    let navMenuItems;
+    async function getHeaderConfig() {
+      try {
+        const { data } = await axios.get(`${origin}/config/header`);
+        navMenuItems = data.data;
+      } catch (error) {
+        navMenuItems = { content: defaultContent };
+      }
+      if (!cancelRequest) setHeaderContent(navMenuItems);
     }
+    getHeaderConfig();
+    return () => {
+      cancelRequest = true;
+    };
   }, []);
 
+  const content = mapContentToRows(headerContent?.content);
 
-  if (showCancelButton) {
-    return (
-      <HeaderContainer showCancelButton skipToContentId={skipToContentId} includeSkipToSidebar={includeSkipToSidebar}>
-        <HeaderCancel handleCancel={handleCancel} />
-      </HeaderContainer>
-    )
-  }
+  const displayCancelContent = () => (
+    <HeaderContainer
+      showCancelButton
+      skipToContentId={skipToContentId}
+      includeSkipToSidebar={includeSkipToSidebar}
+    >
+      <HeaderCancel handleCancel={handleCancel} />
+    </HeaderContainer>
+  );
+
+  const displayDevPreContent = () => (
+    <HeaderContainer
+      isIESupportPage={isIESupportPage}
+      skipToContentId={skipToContentId}
+      includeSkipToSidebar={includeSkipToSidebar}
+    >
+      <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
+        <ul className="navigation-menu">
+          <HeaderAccountMenu isDevPre isLoginEnabled={isLoginEnabled} />
+        </ul>
+      </nav>
+    </HeaderContainer>
+  );
 
-  if (isDevPre) {
-    return (
-      <HeaderContainer skipToContentId={skipToContentId} includeSkipToSidebar={includeSkipToSidebar}>
-        <HeaderAccountMenu 
-          isDevPre
-          handleToggleMenu={() => handleToggleMenu("Login")}
-          isLoginEnabled={isLoginEnabled}
-          isOpen={currentOpenMenu === "Login"}
+  const displayHeaderContent = () => (
+    <>
+      <HeaderContainer
+        isIESupportPage={isIESupportPage}
+        skipToContentId={skipToContentId}
+        includeSkipToSidebar={includeSkipToSidebar}
+      >
+        <HelpIcon />
+        <HeaderMobileButton
+          handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)}
+          isMobileMenuExpanded={isMobileMenuExpanded}
         />
+        <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
+          <ul className="navigation-menu navigation-new-style">
+            {content.map((header) => (
+              <HeaderMenuItem
+                handleClick={() => {
+                  setIsMobileMenuExpanded(!isMobileMenuExpanded);
+                }}
+                isMobileMenuExpanded={isMobileMenuExpanded}
+                key={header.name}
+                {...header}
+              />
+            ))}
+            <HeaderAccountMenu
+              handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)}
+              isLoginEnabled={isLoginEnabled}
+            />
+          </ul>
+        </nav>
       </HeaderContainer>
-    )
-  }
+      <ImpersonatorBanner />
+    </>
+  );
 
-  if (!content) {
+  const displayContent = () => {
+    if (showCancelButton) return displayCancelContent();
+    if (isDevPre) return displayDevPreContent();
+    if (content?.length) return displayHeaderContent();
     return null;
-  }
+  };
 
   return (
-    <HeaderContainer skipToContentId={skipToContentId} includeSkipToSidebar={includeSkipToSidebar}>
-      <HelpIcon />
-      <HeaderMobileButton 
-        handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)} 
-        isMobileMenuExpanded={isMobileMenuExpanded}
-      />
-      <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
-        <ul className="navigation-menu">
-          {content.map(header => (
-            <HeaderMenuItem 
-              key={header.name}
-              {...header}
-              handleToggleMenu={() => handleToggleMenu(header.name)}
-              hasMenu={header.columns.length > 0}
-              isOpen={currentOpenMenu === header.name}
-            />
-          ))}
-          <HeaderAccountMenu 
-            fbpPerformanceYear={fbpPerformanceYear}
-            feedbackPerformanceYear={feedbackPerformanceYear}
-            handleToggleMenu={() => handleToggleMenu("Login")}
-            isLoginEnabled={isLoginEnabled}
-            isOpen={currentOpenMenu === "Login"}
-            performanceYear={performanceYear}
-            showPhysicianCompareLink={showPhysicianCompareLink}
-            showFacilityBasedPreviewLink={showFacilityBasedPreviewLink}
-          />
-        </ul>
-      </nav>
-    </HeaderContainer>
-  )
-}
+    <HeaderStateProvider RouterLink={RouterLink} headerContent={headerContent}>
+      {displayContent()}
+    </HeaderStateProvider>
+  );
+};
 
 HeaderUI.propTypes = {
-  fbpPerformanceYear: PropTypes.string,
-  feedbackPerformanceYear: PropTypes.string,
   handleCancel: PropTypes.func,
   includeSkipToSidebar: PropTypes.bool,
   isDevPre: PropTypes.bool,
@@ -148,10 +147,10 @@ HeaderUI.propTypes = {
   showPhysicianCompareLink: PropTypes.bool,
   showFacilityBasedPreviewLink: PropTypes.bool,
   skipToContentId: PropTypes.string,
-}
+  RouterLink: PropTypes.func,
+  isIESupportPage: PropTypes.bool,
+};
 HeaderUI.defaultProps = {
-  fbpPerformanceYear: null,
-  feedbackPerformanceYear: null,
   handleCancel: Function.prototype,
   includeSkipToSidebar: false,
   isDevPre: false,
@@ -161,6 +160,8 @@ HeaderUI.defaultProps = {
   showPhysicianCompareLink: false,
   showFacilityBasedPreviewLink: false,
   skipToContentId: null,
-}
+  RouterLink: null,
+  isIESupportPage: false,
+};
 
-export default HeaderUI
+export default HeaderUI;

package/components/Header/HelpIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 
 const HelpIcon = () => (
   <a
@@ -9,7 +9,8 @@ const HelpIcon = () => (
     data-track-label="QPP Service Center Phone"
   >
     <svg viewBox="0 0 28 28" className="header-help-icon">
-      <path d="M23.9,5.9c0-0.6-0.2-1.1-0.6-1.5c-2.5-2.5-5.7-3.8-9.2-3.8S7.2,1.9,4.8,4.4c-0.4,0.4-0.6,1-0.6,1.5
+      <path
+        d="M23.9,5.9c0-0.6-0.2-1.1-0.6-1.5c-2.5-2.5-5.7-3.8-9.2-3.8S7.2,1.9,4.8,4.4c-0.4,0.4-0.6,1-0.6,1.5
         c0,0.4,0.1,0.8,0.3,1.1c-1.3,1.9-2,4.1-2,6.6v2.9c0,2.1,1.1,4,2.9,5.1c0,1.2,1,2.1,2.2,2.1c1.2,0,2.2-1,2.2-2.2v-6.5
         c0-1.2-1-2.2-2.2-2.2c-1.1,0-2,0.8-2.1,1.8H3.8v-1.1c0-2.1,0.6-4,1.7-5.6C5.8,8.1,6,8.1,6.3,8.1c0.6,0,1.1-0.2,1.5-0.6
         c1.6-1.6,3.8-2.5,6.2-2.5s4.5,0.9,6.2,2.5c0.4,0.4,1,0.6,1.5,0.6c0.3,0,0.5,0,0.7-0.1c1.1,1.6,1.7,3.6,1.7,5.6v1.1h-1.5
@@ -21,10 +22,11 @@ const HelpIcon = () => (
         C16.6,24.5,16.9,24.8,16.9,25.2z M19.8,21.6v-6.5c0-0.4,0.3-0.7,0.7-0.7s0.7,0.3,0.7,0.7v6.5c0,0.4-0.3,0.7-0.7,0.7
         S19.8,22,19.8,21.6z M22.7,16.2h1.5v0.4c0,1.3-0.5,2.5-1.5,3.3V16.2z M21.2,6.5c-1.9-1.9-4.5-3-7.2-3s-5.3,1.1-7.2,3
         c-0.3,0.3-0.8,0.3-1,0C5.7,6.3,5.6,6.1,5.6,5.9s0.1-0.4,0.2-0.5C8,3.2,10.9,2,14,2s6,1.2,8.2,3.4l0,0c0.1,0.1,0.2,0.3,0.2,0.5
-        s-0.1,0.4-0.2,0.5C21.9,6.7,21.5,6.7,21.2,6.5z"/>
+        s-0.1,0.4-0.2,0.5C21.9,6.7,21.5,6.7,21.2,6.5z"
+      />
     </svg>
     <span>Help</span>
   </a>
-)
+);
 
-export default HelpIcon
+export default HelpIcon;

package/components/Header/ImpersonatorBanner.jsx

@@ -0,0 +1,81 @@
+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';
+
+const getViewType = (viewType) =>
+  ({
+    username: 'HARP ID',
+    npi: 'NPI',
+    tin: 'TIN',
+    apm_id: 'APM Entity',
+    cms_id: 'Registry',
+    vg_id: 'Virtual Group',
+  }[viewType]);
+
+const ImpersonatorBanner = () => {
+  const {
+    qpp_auth_token: token = null,
+    qpp_impersonated_user: user = null,
+    qpp_impersonated_type: viewType = null,
+  } = 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(' ');
+
+  const onClick = () => {
+    const fn = () => {
+      deleteImpersonatedUser({
+        qpp_impersonated_user: user,
+        qpp_impersonated_type: viewType,
+      });
+
+      // Set user_has_apm_payments cookie back to impersonator's value
+      revertApmPaymentCookie();
+
+      // Set qpp_has_authorizations cookie back to impersonator's value
+      revertQppHasAuthsCookie();
+      window.location.href = viewingToolUrl;
+    };
+    return axios
+      .delete('/api/auth/helpdesk/view', {
+        headers: {
+          Accept: 'application/vnd.qpp.cms.gov.v1+json',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then(fn, fn);
+  };
+
+  return (
+    token &&
+    user && (
+      <div className={className}>
+        <div>
+          VIEW ONLY | You are currently viewing {getViewType(viewType)}:{' '}
+          <strong>{user}</strong>
+        </div>
+        <TextButton onClick={onClick} className="qpp-u-color--gray-80">
+          Exit View Mode
+          <CloseIcon />
+        </TextButton>
+      </div>
+    )
+  );
+};
+
+export default ImpersonatorBanner;

package/components/Header/header.js

@@ -13,6 +13,7 @@ export default class Header {
    * @param {Boolean} options.includeSkipToSidebar
    * @param {Boolean} options.showCancelButton
    * @param {Boolean} options.showCovidLink
+   * @param {Boolean} options.isIESupportPage
    * @param {HTMLElement} options.rootElement - Elem inside which to render
    */
   constructor(options) {
@@ -31,6 +32,7 @@ export default class Header {
         showMaqi={options.showMaqi}
         isDevPre={options.isDevPre}
         content={options.content}
+        isIESupportPage={options.isIESupportPage}
       />,
       options.rootElement
     );

package/components/Header/hooks.js

@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+import React, { createContext, useState, useEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
 
 export function useWindowWidth() {
   const [windowSize, setWindowSize] = useState(undefined);
@@ -12,3 +13,54 @@ export function useWindowWidth() {
   }, []);
   return windowSize;
 }
+
+export const HeaderStateContext = createContext(null);
+
+export const HeaderStateProvider = ({
+  children,
+  RouterLink,
+  headerContent, // allow header content from api request available to all child components
+}) => {
+  const [currentOpenMenu, setCurrentOpenMenu] = useState('');
+
+  const handleToggleMenu = (name) => {
+    if (currentOpenMenu === name) {
+      return setCurrentOpenMenu('');
+    }
+    return setCurrentOpenMenu(name);
+  };
+
+  const closeMenus = () => setCurrentOpenMenu('');
+
+  return (
+    <HeaderStateContext.Provider
+      value={{
+        currentOpenMenu,
+        handleToggleMenu,
+        closeMenus,
+        RouterLink,
+        headerContent,
+      }}
+    >
+      {children}
+    </HeaderStateContext.Provider>
+  );
+};
+
+HeaderStateProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  RouterLink: PropTypes.func,
+  headerContent: PropTypes.object,
+};
+
+HeaderStateProvider.defaultProps = {
+  RouterLink: null,
+};
+
+export const useHeaderState = () => {
+  const context = useContext(HeaderStateContext);
+  if (context === undefined) {
+    throw new Error('useHeaderState must be used within a HeaderStateProvider');
+  }
+  return context;
+};

package/components/Header/utag-helpers.js

@@ -0,0 +1,9 @@
+export const setUtagLink = (eventCategory, eventAction, eventLabel) =>
+  window?.utag?.link({
+    ga_event_category: eventCategory,
+    ga_event_action: eventAction,
+    ga_event_label: eventLabel,
+    page_title: `${window.document.title}`,
+    page_url: `${window.location.pathname}`,
+    event: 'trackEvent',
+  });

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 = {
@@ -40,11 +36,11 @@ const touchHandlers = {
 /**
  * Tooltip with styled information icon
  */
-const Infotip = ({ label, lightIcon, ...props }) => (
-  <Tooltip label={label} {...props}>
+const Infotip = ({ ariaLabel, label, lightIcon, ...props }) => (
+  <InfotipContent label={label} {...props}>
     <button
       type="button"
-      aria-label="Information"
+      aria-label={ariaLabel}
       style={buttonStyle}
       {...touchHandlers}
     >
@@ -56,7 +52,7 @@ const Infotip = ({ label, lightIcon, ...props }) => (
         style={{ float: 'left' }}
       />
     </button>
-  </Tooltip>
+  </InfotipContent>
 );
 
 Infotip.propTypes = {
@@ -67,7 +63,7 @@ Infotip.propTypes = {
 };
 
 Infotip.defaultProps = {
-  ariaLabel: undefined,
+  ariaLabel: 'Information',
   lightIcon: false,
   DEBUG_STYLE: undefined,
 };

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/Infotip/InfotipIcon.jsx

@@ -17,13 +17,13 @@ const InfotipIcon = ({ lightIcon, ...props }) => (
       />
       <path
         d="M9.721 0C4.361 0 0 4.469 0 9.962c0 5.493 4.36 9.962 9.721 9.962 5.36 0 9.722-4.469 9.722-9.962C19.443 4.469 15.082 0 9.72 0z"
-        fill={lightIcon ? '#FFF' : '#04838A'}
+        fill={lightIcon ? '#FFF' : '#0073C8'}
       />
       <path
         d="M9.721 14.765c-.206 0-.374.112-.374.25v.5c0 .138.168.25.374.25.207 0 .374-.112.374-.25v-.5c0-.138-.167-.25-.374-.25zM9.764 4.706H9.72c-.792 0-1.536.29-2.1.821a2.767 2.767 0 0 0-.89 2.03c0 .197.166.356.373.356s.374-.159.374-.356c0-.577.237-1.118.668-1.523a2.268 2.268 0 0 1 1.607-.615c1.182.016 2.195.98 2.211 2.107.011.743-.373 1.427-1.028 1.83-.995.61-1.589 1.691-1.589 2.89v1.013c0 .197.168.357.374.357.207 0 .374-.16.374-.357v-1.013c0-.941.477-1.82 1.246-2.292.873-.537 1.386-1.448 1.371-2.438-.022-1.527-1.345-2.788-2.948-2.81z"
-        stroke={lightIcon ? '#04838A' : '#FFF'}
+        stroke={lightIcon ? '#0073C8' : '#FFF'}
         strokeWidth=".5"
-        fill={lightIcon ? '#04838A' : '#FFF'}
+        fill={lightIcon ? '#0073C8' : '#FFF'}
         fillRule="nonzero"
       />
     </g>

package/components/Link/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const VARIANTS = ['white', 'gray'];
+
+const DSLink = ({
+  className,
+  href,
+  download,
+  ariaLabel,
+  onClick,
+  children,
+  variant,
+  ...rest
+}) => {
+  let linkClass = 'qpp-c-link';
+  if (VARIANTS.includes(variant)) {
+    variant === 'gray'
+      ? (linkClass = linkClass.concat(' ', 'qpp-u-color--gray-60'))
+      : (linkClass = linkClass.concat(' ', `qpp-u-color--${variant}`));
+  }
+
+  if (className) {
+    linkClass = linkClass.concat(' ', className);
+  }
+
+  return (
+    <a
+      aria-label={ariaLabel}
+      className={linkClass || ''}
+      href={href}
+      download={download}
+      onClick={onClick}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+};
+
+DSLink.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  href: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  onClick: PropTypes.func,
+  download: PropTypes.bool,
+  variant: PropTypes.oneOf(VARIANTS),
+};
+
+DSLink.defaultProps = {
+  children: null,
+  className: '',
+  href: '',
+  ariaLabel: null,
+  onClick: () => null,
+  download: false,
+  variant: null,
+};
+
+export default DSLink;