qpp-style 9.15.2-beta.5 → 9.16.1-beta.0

package/components/GovBanner/index.js

@@ -0,0 +1,109 @@
+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/HeaderContainer.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import HeaderLogo from './HeaderLogo';
 import NotificationBanner from '../NotificationBanner';
+import GovBanner from '../GovBanner';
 
 /**
  * Accessibility enhancement that moves focus to an element for "Skip" links
@@ -38,7 +39,8 @@ const HeaderContainer = ({
         Skip to sidebar
       </a>
     )}
-    {!isIESupportPage && <NotificationBanner />}
+    <GovBanner />
+    {!isIESupportPage && <NotificationBanner />}    
     <header id="top" className={showCancelButton ? 'show-cancel-button' : ''}>
       <HeaderLogo />
       {children}

package/components/Header/ImpersonatorBanner.jsx

@@ -8,15 +8,17 @@ import {
   deleteImpersonatedUser,
   revertQppHasAuthsCookie,
 } 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 getViewType = (viewType) =>
+  ({
+    username: 'HARP ID',
+    npi: 'NPI',
+    tin: 'TIN',
+    apm_id: 'APM Entity',
+    cms_id: 'Registry',
+    vg_id: 'Virtual Group',
+  }[viewType]);
 
 const ImpersonatorBanner = () => {
   const {
@@ -43,7 +45,7 @@ const ImpersonatorBanner = () => {
       });
       // Set qpp_has_authorizations cookie back to impersonator's value
       revertQppHasAuthsCookie();
-      window.location.reload();
+      window.location.href = viewingToolUrl;
     };
     return axios
       .delete('/api/auth/helpdesk/view', {
@@ -60,7 +62,8 @@ const ImpersonatorBanner = () => {
     user && (
       <div className={className}>
         <div>
-          VIEW ONLY | You are currently viewing {getViewType(viewType)}: <strong>{user}</strong>
+          VIEW ONLY | You are currently viewing {getViewType(viewType)}:{' '}
+          <strong>{user}</strong>
         </div>
         <TextButton onClick={onClick} className="qpp-u-color--gray-80">
           Exit View Mode

package/components/SideNav/helpers.js

@@ -5,6 +5,7 @@ const feedbackUrl = `${submissionsUrl}/feedback`;
 const physicianCompareUrl = `${submissionsUrl}/doctors-clinicians-preview`;
 const reportsPortalUrl = `${submissionsUrl}/reports`;
 const facilityBasedPreviewBaseUrl = `${submissionsUrl}/facility-based-preview`;
+const viewingToolUrl = '/user/helpdesk-viewing-tool';
 
 const performanceFeedbackUrl = (performanceYear) => {
   if (performanceYear) {
@@ -46,4 +47,5 @@ module.exports = {
   handleNavigation,
   reportsPortalUrl,
   facilityBasedPreviewBaseUrl,
+  viewingToolUrl,
 };