qpp-style 0.0.9 → 0.0.10

package/components/Footer/footer.js

@@ -1,5 +1,3 @@
-/* global buildVersion */
-// buildVersion above is defined in webpack.config.js
 import React from 'react';
 import { render } from 'react-dom';
 import FooterUI from './FooterUI';
@@ -14,17 +12,9 @@ export default class Footer {
    */
   constructor(options) {
     if (options.hasOwnProperty('rootElement')) {
-      render(
-        <FooterUI
-          buildVersion={buildVersion}
-          isFullWidth={options.isFullWidth}
-          isNewFooter={options.isNewFooter}
-          showHcdResearch={options.showHcdResearch}
-        />,
-        options.rootElement
-      );
+      render(<FooterUI />, options.rootElement);
     } else {
-      render(<FooterUI buildVersion={buildVersion} />, options);
+      render(<FooterUI />, options);
     }
   }
 }

package/components/GovBanner/index.js

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+
+const GovBanner = () => {
+  const [hideContent, setHideContent] = useState(true);
+
+  return (
+    <section
+      className="qpp-c-gov-banner"
+      aria-label="Official government website"
+    >
+      <div className="qpp-c-gov-banner__expand-wrap">
+        <header
+          className={`qpp-c-gov-banner__header ${
+            !hideContent ? 'qpp-c-gov-banner__header--expanded' : ''
+          }`}
+        >
+          <div className="qpp-c-gov-banner__inner">
+            <div className="qpp-c-gov-banner__header-col1">
+              <img
+                className="qpp-c-gov-banner__header-flag"
+                src="/images/us_flag_small.png"
+                alt="U.S. flag"
+              />
+            </div>
+            <div className="qpp-c-gov-banner__header-col2">
+              <p className="qpp-c-gov-banner__header-text">
+                An official website of the United States government
+              </p>
+              <p className="qpp-c-gov-banner__header-action" aria-hidden="true">
+                <span className="qpp-c-gov-banner__header-action-text qpp-c-button qpp-c-button--text">
+                  Here’s how you know
+                </span>
+                <span className="qpp-c-gov-banner__header-action-icon qpp-c-button qpp-c-button--text"></span>
+              </p>
+            </div>
+            <button
+              className="qpp-c-gov-banner__button qpp-c-button qpp-c-button--icon-after qpp-c-button--text"
+              aria-expanded={!hideContent}
+              aria-controls="qpp-gov-banner-content"
+              onClick={() => setHideContent(!hideContent)}
+            >
+              <span className="qpp-c-gov-banner__button-text">
+                Here’s how you know
+              </span>
+            </button>
+          </div>
+        </header>
+        <div
+          className="qpp-c-gov-banner__content"
+          id="qpp-gov-banner-content"
+          hidden={hideContent}
+        >
+          <div className="qpp-u-display--flex qpp-u-flex-direction--column qpp-u-xs-flex-direction--row qpp-u-flex-gap--24">
+            <div className="qpp-c-gov-banner__guidance">
+              <img
+                className="qpp-c-gov-banner__icon"
+                src="/images/icon-dot-gov.svg"
+                role="img"
+                alt=""
+                aria-hidden="true"
+              />
+              <div>
+                <p>
+                  <strong> Official websites use .gov </strong>
+                  <br />A <strong>.gov</strong> website belongs to an official
+                  government organization in the United States.
+                </p>
+              </div>
+            </div>
+            <div className="qpp-c-gov-banner__guidance">
+              <img
+                className="qpp-c-gov-banner__icon"
+                src="/images/icon-https.svg"
+                role="img"
+                alt=""
+                aria-hidden="true"
+              />
+              <div>
+                <p>
+                  <strong> Secure .gov websites use HTTPS </strong>
+                  <br />A <strong>lock</strong> (
+                  <span className="icon-lock">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="52"
+                      height="64"
+                      viewBox="0 0 52 64"
+                      className="qpp-c-gov-banner__lock-image "
+                      role="img"
+                      aria-labelledby="banner-lock-title-default banner-lock-description-default"
+                      focusable="false"
+                    >
+                      <title id="banner-lock-title-default">Lock</title>
+                      <desc id="banner-lock-description-default">
+                        A locked padlock
+                      </desc>
+                      <path
+                        fill="#000000"
+                        fillRule="evenodd"
+                        d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                      />
+                    </svg>
+                  </span>
+                  ) or <strong>https://</strong> means you’ve safely connected
+                  to the .gov website. Share sensitive information only on
+                  official, secure websites.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default GovBanner;

package/components/Header/HeaderAccountMenu.jsx

@@ -1,42 +1,46 @@
 import React from 'react';
-import PropTypes from 'prop-types'
-import cookie from 'cookie';
-import jwtDecode from 'jwt-decode';
-
+import PropTypes from 'prop-types';
+import { useHeaderState } from './hooks';
+import { setUtagLink } from './utag-helpers';
 import SessionDialogUI from '../SessionDialogUI';
-import {
-  performanceFeedbackUrl,
-  physicianCompareUrl,
-  dashboardUrl,
-  manageUrl,
-  submissionsUrl,
-  facilityBasedPreviewUrl,
-} from '../SideNav/helpers';
-import HeaderMenuItem from './HeaderMenuItem'
+import HeaderMenuItem from './HeaderMenuItem';
+
+const HeaderAccountMenu = ({ handleClick, isLoginEnabled, isDevPre }) => {
+  const { closeMenus, RouterLink, headerContent } = useHeaderState();
+  const { isLoggedIn, firstName, devPreMenuLinks, accountMenuLinks } =
+    headerContent;
 
-const HeaderAccountMenu = ({
-  fbpPerformanceYear,
-  feedbackPerformanceYear,
-  handleToggleMenu,
-  isLoginEnabled,
-  isOpen,
-  isDevPre,
-  performanceYear,
-  showFacilityBasedPreviewLink,
-  showPhysicianCompareLink,
-}) => {
-  const cookies = cookie.parse(document.cookie);
-  const hasAuthToken = cookies.hasOwnProperty('qpp_auth_token');
-  const hasAuthorizations = cookies.qpp_has_authorizations === 'true'
-  const hasNonRegistryAuthorizations = cookies.qpp_has_non_registry_authorizations === 'true'
-  const isDevPreAndNotAuthenticated = !hasAuthToken && isDevPre
+  const isDevPreAndNotAuthenticated = !isLoggedIn && isDevPre;
 
   if (!isLoginEnabled || isDevPreAndNotAuthenticated) {
-    return null
+    return null;
   }
 
   // login link
-  if (!hasAuthToken) {
+  if (!isLoggedIn) {
+    if (RouterLink) {
+      return (
+        <li onClick={handleClick} className="header-item-login login">
+          <RouterLink
+            className="menu-link"
+            to="/login"
+            onClick={() => {
+              closeMenus();
+              setUtagLink('main navbar', 'click', '/login');
+            }}
+            data-track-category="TopNav"
+            data-track-action="click"
+            data-track-label="Sign In"
+          >
+            <div className="nav-title">Sign In</div>
+            <div className="nav-description">
+              Manage Account <br />
+              and Register
+            </div>
+          </RouterLink>
+        </li>
+      );
+    }
     return (
       <li className="header-item-login login">
         <a
@@ -45,75 +49,45 @@ const HeaderAccountMenu = ({
           data-track-category="TopNav"
           data-track-action="click"
           data-track-label="Sign In"
+          onClick={() => {
+            setUtagLink('main navbar', 'click', '/login');
+          }}
         >
           <div className="nav-title">Sign In</div>
           <div className="nav-description">
-            Manage Account <br />and Register
+            Manage Account <br />
+            and Register
           </div>
         </a>
       </li>
-    )
+    );
   }
 
-  if (hasAuthToken) {
-    const { firstName } = jwtDecode(cookies.qpp_auth_token)
-    const additionalLinks = []
-    if (hasAuthorizations) {
-      additionalLinks.push(
-        { type: 'link', href: dashboardUrl, name: 'Eligibility & Reporting' }, 
-        { type: 'link', href: performanceFeedbackUrl(feedbackPerformanceYear || performanceYear), name: 'Performance Feedback' }
-      )
-      if (showPhysicianCompareLink && hasNonRegistryAuthorizations) {
-        additionalLinks.push({ type: 'link', href: physicianCompareUrl, name: 'Doctors & Clinicians Preview' })
-      }
-      if (showFacilityBasedPreviewLink) {
-        additionalLinks.push({ type: 'link', href: facilityBasedPreviewUrl(fbpPerformanceYear || performanceYear), name: 'Facility Based Preview' })
-      }
-
-    }
-    const columns = [[{ items: [
-      { type: 'link', href: submissionsUrl, name: 'Account Home' },
-      ...additionalLinks,
-      { type: 'link', href: manageUrl, name: 'Manage Access' },
-      { type: 'signout', name: 'Sign Out' },
-    ] }]]
-    const devPreColumns = [[{ items: [{ type: 'link', href: '/logout', name: 'Sign Out' }]}]]
+  if (isLoggedIn) {
     return (
       <>
         <SessionDialogUI />
-        <HeaderMenuItem 
-          handleToggleMenu={handleToggleMenu}
+        <HeaderMenuItem
           hasMenu
-          isOpen={isOpen}
+          menuName="Login"
           name={firstName}
           subtitle="My Account"
-          columns={isDevPre ? devPreColumns : columns}
+          className="account-menu-item"
+          columns={isDevPre ? devPreMenuLinks : accountMenuLinks}
+          rows={isDevPre ? devPreMenuLinks : accountMenuLinks}
         />
       </>
-    )
+    );
   }
-
-  
 };
 
 HeaderAccountMenu.propTypes = {
-  handleToggleMenu: PropTypes.func.isRequired,
   isLoginEnabled: PropTypes.bool.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  showPhysicianCompareLink: PropTypes.bool,
-  showFacilityBasedPreviewLink: PropTypes.bool,
-  performanceYear: PropTypes.number,
-  fbpPerformanceYear: PropTypes.string,
-  feedbackPerformanceYear: PropTypes.string,
   isDevPre: PropTypes.bool,
+  handleClick: PropTypes.func.isRequired,
 };
 
 HeaderAccountMenu.defaultProps = {
-  showPhysicianCompareLink: false,
-  showFacilityBasedPreviewLink: false,
-  performanceYear: 2017,
-  fbpPerformanceYear: null,
-  feedbackPerformanceYear: null,
   isDevPre: false,
 };
 

package/components/Header/HeaderContainer.jsx

@@ -1,9 +1,10 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import HeaderLogo from './HeaderLogo'
-import NotificationBannerUI from '../NotificationBanner/NotificationBannerUI';
+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';
 /**
  * Accessibility enhancement that moves focus to an element for "Skip" links
  * @param {Object} e - The native JS event
@@ -14,49 +15,60 @@ function jumpToLink(e, id) {
   document.getElementById(id).focus();
 }
 
-const HeaderContainer = ({ 
-  children, 
+const HeaderContainer = ({
+  children,
   includeSkipToSidebar,
   showCancelButton,
-  skipToContentId
-}) => (
-  <>
-    <a
-      className="skip"
-      onClick={(e) => jumpToLink(e, `${skipToContentId || 'mainContent'}`)}
-      href={`#${skipToContentId || 'mainContent'}`}
-    >
-      Skip to content
-    </a>
-    {includeSkipToSidebar && (
+  skipToContentId,
+  isIESupportPage,
+}) => {
+  const { currentOpenMenu } = useHeaderState();
+  const cssCancelBtn = showCancelButton ? 'show-cancel-button' : '';
+  const cssMenuDropdownStatus =
+    currentOpenMenu === ''
+      ? 'header-dropdown--closed'
+      : 'header-dropdown--open';
+
+  return (
+    <>
       <a
         className="skip"
-        onClick={(e) => jumpToLink(e, 'qppSidebar')}
-        href="#qppSidebar"
+        onClick={(e) => jumpToLink(e, `${skipToContentId || 'mainContent'}`)}
+        href={`#${skipToContentId || 'mainContent'}`}
       >
-        Skip to sidebar
+        Skip to content
       </a>
-    )}
-    <NotificationBannerUI fromStorage name="header-notification" />
-    <header id="top" className={showCancelButton ? 'show-cancel-button' : ''}>
-      <HeaderLogo />
-      {children}
-    </header>
-  </>
-)
-
+      {includeSkipToSidebar && (
+        <a
+          className="skip"
+          onClick={(e) => jumpToLink(e, 'qppSidebar')}
+          href="#qppSidebar"
+        >
+          Skip to sidebar
+        </a>
+      )}
+      <GovBanner />
+      {!isIESupportPage && <NotificationBanner />}
+      <header id="top" className={`${cssCancelBtn} ${cssMenuDropdownStatus}`}>
+        <HeaderLogo />
+        {children}
+      </header>
+    </>
+  );
+};
 
 HeaderContainer.propTypes = {
   children: PropTypes.node.isRequired,
   includeSkipToSidebar: PropTypes.bool,
   showCancelButton: PropTypes.bool,
   skipToContentId: PropTypes.string,
-}
+  isIESupportPage: PropTypes.bool,
+};
 HeaderContainer.defaultProps = {
   includeSkipToSidebar: false,
   showCancelButton: false,
   skipToContentId: null,
-}
-
-export default HeaderContainer
+  isIESupportPage: false,
+};
 
+export default HeaderContainer;

package/components/Header/HeaderLogo.jsx

@@ -1,19 +1,42 @@
-import React from 'react'
+import React from 'react';
 
-const HeaderLogo = () => (
-  <a
-    className="header-logo"
-    href="/"
-    data-track-category="HeaderNav"
-    data-track-action="OpenQPPHome"
-    data-track-label="Quality Payment Program"
-  >
-    <img
-      className="qpp-logo"
-      src="/images/qpp_logo_rgb_color.png"
-      alt="QPP logo"
-    />
-  </a>
-)
+import { useHeaderState } from './hooks';
 
-export default HeaderLogo
+const HeaderLogo = () => {
+  const { closeMenus, RouterLink } = useHeaderState();
+  if (RouterLink) {
+    return (
+      <RouterLink
+        className="header-logo"
+        to="/"
+        onClick={closeMenus}
+        data-track-category="HeaderNav"
+        data-track-action="OpenQPPHome"
+        data-track-label="Quality Payment Program"
+      >
+        <img
+          className="qpp-logo"
+          src="/images/qpp_logo_rgb_color.png"
+          alt="QPP logo"
+        />
+      </RouterLink>
+    );
+  }
+  return (
+    <a
+      className="header-logo"
+      href="/"
+      data-track-category="HeaderNav"
+      data-track-action="OpenQPPHome"
+      data-track-label="Quality Payment Program"
+    >
+      <img
+        className="qpp-logo"
+        src="/images/qpp_logo_rgb_color.png"
+        alt="QPP logo"
+      />
+    </a>
+  );
+};
+
+export default HeaderLogo;

package/components/Header/HeaderMenuButton.js

@@ -1,20 +1,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { useHeaderState } from './hooks';
 import NavigationButtonIcon from './NavigationButtonIcon';
+import { setUtagLink } from './utag-helpers';
 
-const HeaderMenuButton = ({ href, name }) => (
-  <a
-    className="btn btn-navigation inverse-hover"
-    href={href}
-    data-track-category="TopNav"
-    data-track-action="click"
-    data-track-label={name}
-  >
-    {name}
-    <NavigationButtonIcon />
-  </a>
-);
+const HeaderMenuButton = ({ href, name }) => {
+  const { RouterLink, closeMenus } = useHeaderState();
+  if (RouterLink) {
+    return (
+      <RouterLink
+        className="btn btn-navigation inverse-hover header-menu-btn"
+        to={href}
+        onClick={() => {
+          closeMenus();
+          setUtagLink('main navbar', 'click', href);
+        }}
+        data-track-category="TopNav"
+        data-track-action="click"
+        data-track-label={name}
+      >
+        {name}
+        <NavigationButtonIcon />
+      </RouterLink>
+    );
+  }
+  return (
+    <a
+      className="btn btn-navigation inverse-hover header-menu-btn"
+      href={href}
+      data-track-category="TopNav"
+      data-track-action="click"
+      data-track-label={name}
+      onClick={() => {
+        setUtagLink('main navbar', 'click', href);
+      }}
+    >
+      {name}
+      <NavigationButtonIcon />
+    </a>
+  );
+};
 
 HeaderMenuButton.propTypes = {
   href: PropTypes.string.isRequired,