qpp-style 1.0.0-cc.98 → 1.0.0-ds.2

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd react
+npm run precommit

package/components/Alert/Alert.stories.js

@@ -11,7 +11,7 @@ export const Default = () => (
   <div className="qpp-u-padding--16">
     <h1 className="h3">Information</h1>
     <Alert
-      title='Information Alert'
+      title="Information Alert"
       description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida."
     />
     <h2 className="h3">Warning</h2>

package/components/Alert/index.js

@@ -1,7 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Alert = ({ title, children, description, variant, className, ...rest }) => {
+const Alert = ({
+  title,
+  children,
+  description,
+  variant,
+  className,
+  ...rest
+}) => {
   const HeadingComponent = title?.headingLevel || 'h2';
   return (
     <div

package/components/Footer/Footer.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Footer from './FooterUI';
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
 
 export default {
   title: 'Footer',
@@ -8,13 +8,6 @@ export default {
   decorators: [withKnobs],
 };
 
-export const ExampleFooter = () => (
-  <Footer
-    isFullWidth={boolean('isFullWidth', false)}
-    buildVersion={text('buildVersion', 'BUILD VERSION')}
-    isNewFooter={boolean('isNewFooter', true)}
-    showHcdResearch={boolean('showHcdResearch', true)}
-  />
-);
+export const ExampleFooter = () => <Footer />;
 
 ExampleFooter.storyName = 'example Footer';

package/components/Footer/FooterUI.jsx

@@ -1,265 +1,207 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 
 import InfoTip from '../Infotip/Infotip';
-import LegacyFooterUI from './LegacyFooterUI';
 import Subscribe from './Subscribe';
 import SocialLinks from './SocialLinks';
-import useGetConfig from '../hooks/useGetConfig';
+import pjson from '../../package.json';
 
 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.';
+const { version: buildVersion } = pjson;
 
-const FooterUI = ({
-  isNewFooter,
-  isIESupportPage,
-  showHcdResearch,
-  buildVersion,
-  isFullWidth,
-}) => {
-  const signUpNowLink = showHcdResearch
-    ? '/about/hcd-research'
-    : 'mailto:QPPUserResearch@cms.hhs.gov?subject=Sign up for feedback sessions&body=Please let us know your role and how many Tax Identification Numbers (TINs) you represent. Don’t send us your actual TINs, that is confidential information that should not be shared with this email address. If you do not represent a practice, let us know what work you do in connection to QPP.';
-
-  const result = useGetConfig({
-    timeout: 5,
-    url: '/config/footer',
-    localStorageName: 'qpp_footer',
-  });
-  const content = (result?.content || [
-    { listServ: false, showCcsqLink: false },
-  ])[0];
-
-  const setLink = (link) => {
-    return isIESupportPage ? '/' : link;
-  };
-
-  if (isNewFooter) {
-    return (
-      <>
-        {!isIESupportPage && (
-          <div className="feedback-session-sign-up">
-            <div className="responsive-container">
-              <hr />
-              <p>
-                <strong>Help shape the future of QPP.</strong> Participate in a
-                user feedback session.{' '}
-                <a className="email-note-link" href={signUpNowLink}>
-                  Sign up now
-                </a>
-              </p>
-            </div>
-          </div>
-        )}
-        <footer className="global-footer">
-          <div className="build-version" id="build-version">
-            {buildVersion}
-          </div>
-
-          <div className="responsive-container">
-            <>
-              {!isIESupportPage && (
-                <div className="global-footer-container">
-                  <div className="footer-resources">
-                    <p className="sub-title">Resources</p>
-                    <ul>
-                      <li>
-                        <a
-                          href="/about/resource-library"
-                          aria-label="Resource Library"
-                          data-track-category="FooterNav"
-                          data-track-action="OpenEducationAndTools"
-                          data-track-label="Education and Tools"
-                        >
-                          Resource Library
-                        </a>
-                      </li>
-                      <li>
-                        <a
-                          href="/resources/help-and-support"
-                          aria-label="Help and Support"
-                          data-track-category="FooterNav"
-                          data-track-action="OpenHelpAndSupport"
-                          data-track-label="Help and Support"
-                        >
-                          Help and Support
-                        </a>
-                      </li>
-                      <li>
-                        <a
-                          href="/about/small-underserved-rural-practices"
-                          aria-label="Support for Small Practices"
-                          data-track-category="FooterNav"
-                          data-track-action="OpenSupportSmallPractices"
-                          data-track-label="Support for Small Practices"
-                        >
-                          Support for Small Practices
-                        </a>
-                      </li>
-                      <li>
-                        <a
-                          href="/developers"
-                          aria-label="Developer Tools"
-                          data-track-category="FooterNav"
-                          data-track-action="OpenDeveloperTools"
-                          data-track-label="Quality Payment Program"
-                        >
-                          Developer Tools
-                        </a>
-                      </li>
-                      <li>
-                        <a
-                          href="/glossary"
-                          aria-label="Glossary"
-                          data-track-category="FooterNav"
-                          data-track-action="OpenGlossary"
-                          data-track-label="Glossary"
-                        >
-                          Glossary
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
-                  <div className="footer-contact-cms">
-                    <p className="sub-title">Contact CMS</p>
-                    <p className="contact-title">Phone:</p>
-                    <p>Monday - Friday 8 a.m - 8 p.m ET</p>
-                    <p>
-                      1-866-288-8292 (TRS: 711)
-                      <span className="footer-trs-infotip">
-                        <InfoTip label={infoTipLabel} />
-                      </span>
-                    </p>
-
-                    <p className="contact-title">Email:</p>
-                    <p>
-                      <a
-                        aria-label="QPP@cms.hhs.gov"
-                        href="mailto:QPP@cms.hhs.gov"
-                        className="email-link"
-                      >
-                        QPP@cms.hhs.gov
-                      </a>
-                    </p>
-
-                    {content?.showCcsqLink && (
-                      <>
-                        <p className="contact-title">QPP Service Center:</p>
-                        <a
-                          href="https://cmsqualitysupport.servicenowservices.com/ccsq_support_central"
-                          aria-label="CCSQ Support Central"
-                          className="email-link"
-                          target="__blank"
-                          rel="noopener noreferrer"
-                        >
-                          <strong>
-                            Create or Track a QPP Service Center Ticket
-                          </strong>
-                          <OpenInNewIcon classes={{ root: 'ccsq-link-icon' }} />
-                        </a>
-                      </>
-                    )}
-                  </div>
-                  <div className="footer-social-newsletter">
-                    <p className="sub-title">Stay Connected</p>
-                    <SocialLinks />
-                    <p className="sub-title">
-                      {content?.listServ
-                        ? 'Sign Up for the QPP Listserv'
-                        : 'Sign Up for the QPP Newsletter'}
-                    </p>
-                    <Subscribe />
-                  </div>
-                </div>
-              )}
-              <hr />
-            </>
-
-            <div className="other-links">
-              <ul className="small">
+const FooterUI = () => (
+  <>
+    <div className="feedback-session-sign-up">
+      <div className="responsive-container">
+        <hr />
+        <p>
+          <strong>Help shape the future of QPP.</strong> Participate in a user
+          feedback session.{' '}
+          <a className="email-note-link" href="/about/hcd-research">
+            Sign up now
+          </a>
+        </p>
+      </div>
+    </div>
+    <footer className="global-footer">
+      <div className="build-version" id="build-version">
+        {buildVersion}
+      </div>
+      <div className="responsive-container">
+        <>
+          <div className="global-footer-container">
+            <div className="footer-resources">
+              <p className="sub-title">Resources</p>
+              <ul>
                 <li>
                   <a
-                    href={setLink('/privacy')}
-                    aria-label="Notice of Privacy and Disclaimer"
+                    href="/about/resource-library"
+                    aria-label="Resource Library"
                     data-track-category="FooterNav"
-                    data-track-action="OpenPrivacyDisclaimer"
-                    data-track-label="Notice of Privacy and Disclaimer"
+                    data-track-action="OpenEducationAndTools"
+                    data-track-label="Education and Tools"
                   >
-                    CMS Privacy Notice
+                    Resource Library
                   </a>
                 </li>
-                <li className="divider"></li>{' '}
                 <li>
                   <a
-                    href={setLink('/accessibility')}
-                    aria-label="Accessibility"
+                    href="/resources/help-and-support"
+                    aria-label="Help and Support"
                     data-track-category="FooterNav"
-                    data-track-action="OpenAccessibility"
-                    data-track-label="Accessibility"
+                    data-track-action="OpenHelpAndSupport"
+                    data-track-label="Help and Support"
                   >
-                    Accessibility
+                    Help and Support
                   </a>
                 </li>
-                <li className="divider"></li>{' '}
                 <li>
                   <a
-                    aria-label="Download Adobe Reader"
-                    className="adobe-link"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    href={setLink('https://get.adobe.com/reader')}
+                    href="/about/small-underserved-rural-practices"
+                    aria-label="Support for Small Practices"
                     data-track-category="FooterNav"
-                    data-track-action="DownloadAdobeReader"
-                    data-track-label="AdobeReader"
+                    data-track-action="OpenSupportSmallPractices"
+                    data-track-label="Support for Small Practices"
                   >
-                    Download Adobe Reader
+                    Support for Small Practices
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="/developers"
+                    aria-label="Developer Tools"
+                    data-track-category="FooterNav"
+                    data-track-action="OpenDeveloperTools"
+                    data-track-label="Quality Payment Program"
+                  >
+                    Developer Tools
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="/glossary"
+                    aria-label="Glossary"
+                    data-track-category="FooterNav"
+                    data-track-action="OpenGlossary"
+                    data-track-label="Glossary"
+                  >
+                    Glossary
                   </a>
                 </li>
               </ul>
-              <hr />
             </div>
-            <div className="qpp-hhs-logo-container">
-              <div className="qpp-logo-container">
-                <img
-                  className="qpp-logo"
-                  src="/images/qpp_logo_rgb_color.png"
-                  alt="qpp logo"
-                />
-              </div>
-              <div className="hhs-logo-container">
-                <img
-                  className="hhs-logo"
-                  alt="Department of Health &amp; Human Services USA"
-                  src="/images/hhs-logo-black.svg"
-                />
-                <p>
-                  A federal government website managed and paid for by the U.S
-                  Centers for Medicare &amp; Medicaid Services. 7500 Security
-                  Boulevard, Baltimore MD 21244
-                </p>
-              </div>
+            <div className="footer-contact-cms">
+              <p className="sub-title">Contact CMS</p>
+              <p className="contact-title">Phone:</p>
+              <p>Monday - Friday 8 a.m - 8 p.m ET</p>
+              <p>
+                1-866-288-8292 (TRS: 711)
+                <span className="footer-trs-infotip">
+                  <InfoTip label={infoTipLabel} />
+                </span>
+              </p>
+
+              <p className="contact-title">Email:</p>
+              <p>
+                <a
+                  aria-label="QPP@cms.hhs.gov"
+                  href="mailto:QPP@cms.hhs.gov"
+                  className="email-link"
+                >
+                  QPP@cms.hhs.gov
+                </a>
+              </p>
+
+              <p className="contact-title">QPP Service Center:</p>
+              <a
+                href="https://cmsqualitysupport.servicenowservices.com/ccsq_support_central"
+                aria-label="CCSQ Support Central"
+                className="email-link"
+                target="__blank"
+                rel="noopener noreferrer"
+              >
+                <strong>Create or Track a QPP Service Center Ticket</strong>
+                <OpenInNewIcon classes={{ root: 'ccsq-link-icon' }} />
+              </a>
+            </div>
+            <div className="footer-social-newsletter">
+              <p className="sub-title">Stay Connected</p>
+              <SocialLinks />
+              <p className="sub-title">Sign Up for the QPP Listserv</p>
+              <Subscribe />
             </div>
           </div>
-        </footer>
-      </>
-    );
-  }
-  return (
-    <LegacyFooterUI
-      buildVersion={buildVersion}
-      isFullWidth={isFullWidth}
-      signUpNowLink={signUpNowLink}
-    />
-  );
-};
+          <hr />
+        </>
 
-FooterUI.propTypes = {
-  buildVersion: PropTypes.string,
-  isFullWidth: PropTypes.bool,
-  isNewFooter: PropTypes.bool,
-  isIESupportPage: PropTypes.bool,
-  showHcdResearch: PropTypes.bool,
-};
+        <div className="other-links">
+          <ul className="small">
+            <li>
+              <a
+                href="/privacy"
+                aria-label="Notice of Privacy and Disclaimer"
+                data-track-category="FooterNav"
+                data-track-action="OpenPrivacyDisclaimer"
+                data-track-label="Notice of Privacy and Disclaimer"
+              >
+                CMS Privacy Notice
+              </a>
+            </li>
+            <li className="divider"></li>{' '}
+            <li>
+              <a
+                href="/accessibility"
+                aria-label="Accessibility"
+                data-track-category="FooterNav"
+                data-track-action="OpenAccessibility"
+                data-track-label="Accessibility"
+              >
+                Accessibility
+              </a>
+            </li>
+            <li className="divider"></li>{' '}
+            <li>
+              <a
+                aria-label="Download Adobe Reader"
+                className="adobe-link"
+                rel="noopener noreferrer"
+                target="_blank"
+                href="https://get.adobe.com/reader"
+                data-track-category="FooterNav"
+                data-track-action="DownloadAdobeReader"
+                data-track-label="AdobeReader"
+              >
+                Download Adobe Reader
+              </a>
+            </li>
+          </ul>
+          <hr />
+        </div>
+        <div className="qpp-hhs-logo-container">
+          <div className="qpp-logo-container">
+            <img
+              className="qpp-logo"
+              src="/images/qpp_logo_rgb_color.png"
+              alt="qpp logo"
+            />
+          </div>
+          <div className="hhs-logo-container">
+            <img
+              className="hhs-logo"
+              alt="Department of Health &amp; Human Services USA"
+              src="/images/hhs-logo-black.svg"
+            />
+            <p>
+              A federal government website managed and paid for by the U.S
+              Centers for Medicare &amp; Medicaid Services. 7500 Security
+              Boulevard, Baltimore MD 21244
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </>
+);
 
 export default FooterUI;

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/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,6 +39,7 @@ const HeaderContainer = ({
         Skip to sidebar
       </a>
     )}
+    <GovBanner />
     {!isIESupportPage && <NotificationBanner />}
     <header id="top" className={showCancelButton ? 'show-cancel-button' : ''}>
       <HeaderLogo />