qpp-style 1.0.0-cc.72 → 1.0.0-cc.76

package/.storybook/main.js

@@ -2,9 +2,6 @@ const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
   stories: [
     '../components/**/*.stories.@(js|jsx|mdx)',
     '../lib/**/*.stories.@(js|jsx|mdx)',
@@ -13,30 +10,28 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-storysource',
+    '@storybook/addon-knobs',
     '@storybook/addon-a11y',
     '@storybook/addon-docs',
     '@storybook/addon-backgrounds',
     '@storybook/addon-viewport',
     '@storybook/addon-postcss',
-    '@storybook/addon-controls',
   ],
   webpackFinal: async (config) => {
     // do mutation to the config
 
     config.plugins.push(
-      new CopyWebpackPlugin({
-        patterns: [
-          {
-            from: path.join(__dirname, '..', '..', 'shared', 'fonts/'),
-            to: 'fonts/',
-          },
-          {
-            from: path.join(__dirname, '..', '..', 'shared', 'images/'),
-            to: 'images/',
-            force: true,
-          },
-        ],
-      })
+      new CopyWebpackPlugin([
+        {
+          from: path.join(__dirname, '..', '..', 'shared', 'fonts/'),
+          to: 'fonts/',
+        },
+        {
+          from: path.join(__dirname, '..', '..', 'shared', 'images/'),
+          to: 'images/',
+          force: true,
+        },
+      ])
     );
 
     config.module.rules.push({
@@ -86,8 +81,7 @@ module.exports = {
 
     if (staticAssetLoader) {
       // remove svg matching from storybook's default static asset loader
-      staticAssetLoader.test =
-        /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
+      staticAssetLoader.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
     }
 
     return config;

package/components/Breadcrumb/Breadcrumb.stories.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import Breadcrumb from './index';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 
 export default {
   title: 'Breadcrumb',
   component: Breadcrumb,
+  decorators: [withKnobs],
 };
 
-export const ExampleLightBreadcrumb = (args) => (
+export const ExampleLightBreadcrumb = () => (
   <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
     <Breadcrumb
-      {...args}
+      newBreadcrumb={boolean('newBreadcrumb', true)}
       crumbs={[
         {
           url: '/',
@@ -29,14 +31,11 @@ export const ExampleLightBreadcrumb = (args) => (
 );
 
 ExampleLightBreadcrumb.storyName = 'Light';
-ExampleLightBreadcrumb.args = {
-  newBreadcrumb: true,
-}
 
-export const ExampleDarkBreadcrumb = (args) => (
+export const ExampleDarkBreadcrumb = () => (
   <div className="qppds qpp-u-padding--16">
     <Breadcrumb
-      {...args}
+      newBreadcrumb={boolean('newBreadcrumb', true)}
       dark
       crumbs={[
         {
@@ -57,6 +56,3 @@ export const ExampleDarkBreadcrumb = (args) => (
 );
 
 ExampleDarkBreadcrumb.storyName = 'Dark';
-ExampleDarkBreadcrumb.args = {
-  newBreadcrumb: true,
-}

package/components/Button/Button.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withKnobs } from '@storybook/addon-knobs';
 import FeatherIcon from 'feather-icons-react';
 
 import Button, { TextButton } from './index';
@@ -7,6 +8,7 @@ import Button, { TextButton } from './index';
 export default {
   title: 'Button',
   component: Button,
+  decorators: [withKnobs],
 };
 
 const Container = ({ className = '', children }) => (

package/components/CalloutBox/CalloutBox.stories.js

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
 
 import CalloutBox from './index';
 
 export default {
   title: 'CalloutBox',
   component: CalloutBox,
+  decorators: [withKnobs],
 };
 
 export const Default = () => {

package/components/Card/Card.stories.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
 
 import Card from './index';
 
 export default {
   title: 'Card',
   component: Card,
+  decorators: [withKnobs],
 };
 
 export const Default = () => {

package/components/Dropdown/Dropdown.stories.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import Dropdown from './index';
+import { withKnobs } from '@storybook/addon-knobs';
 
 export default {
   title: 'Dropdown',
   component: Dropdown,
+  decorators: [withKnobs],
 };
 
 export const DropdownField = () => (

package/components/Footer/Footer.stories.js

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

package/components/Footer/FooterUI.jsx

@@ -12,11 +12,16 @@ const infoTipLabel =
 
 const FooterUI = (props) => {
   const isNewFooter = props.isNewFooter;
+  const isIESupportPage = props.isIESupportPage;
   const signUpNowLink = props.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 [listServ, setListServ] = useState(false);
 
+  const setLink = (link) => {
+    return isIESupportPage ? '/' : link;
+  };
+
   // The footer content is populated with the following priority order:
   // 1. Use the footer 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.
@@ -55,123 +60,131 @@ const FooterUI = (props) => {
   if (isNewFooter) {
     return (
       <>
-        <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>
+        {!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>
-        </div>
+        )}
         <footer className="global-footer">
           <div className="build-version" id="build-version">
             {props.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="/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">By 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">By 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>
-              </div>
-              <div className="footer-social-newsletter">
-                <p className="sub-title">Stay Connected</p>
-                <SocialLinks />
-                <p className="sub-title">
-                  {listServ
-                    ? 'Sign Up for the QPP Listserv'
-                    : 'Sign Up for the QPP Newsletter'}
-                </p>
-                <Subscribe />
-              </div>
-            </div>
-            <hr />
+            <>
+              {!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">By 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">By 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>
+                  </div>
+                  <div className="footer-social-newsletter">
+                    <p className="sub-title">Stay Connected</p>
+                    <SocialLinks />
+                    <p className="sub-title">
+                      {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">
                 <li>
                   <a
-                    href="/privacy"
+                    href={setLink('/privacy')}
                     aria-label="Notice of Privacy and Disclaimer"
                     data-track-category="FooterNav"
                     data-track-action="OpenPrivacyDisclaimer"
@@ -183,7 +196,7 @@ const FooterUI = (props) => {
                 <li className="divider"></li>{' '}
                 <li>
                   <a
-                    href="/accessibility"
+                    href={setLink('/accessibility')}
                     aria-label="Accessibility"
                     data-track-category="FooterNav"
                     data-track-action="OpenAccessibility"
@@ -199,7 +212,7 @@ const FooterUI = (props) => {
                     className="adobe-link"
                     rel="noopener noreferrer"
                     target="_blank"
-                    href="https://get.adobe.com/reader"
+                    href={setLink('https://get.adobe.com/reader')}
                     data-track-category="FooterNav"
                     data-track-action="DownloadAdobeReader"
                     data-track-label="AdobeReader"
@@ -249,6 +262,7 @@ FooterUI.propTypes = {
   buildVersion: PropTypes.string,
   isFullWidth: PropTypes.bool,
   isNewFooter: PropTypes.bool,
+  isIESupportPage: PropTypes.bool,
   showHcdResearch: PropTypes.bool,
 };
 

package/components/Header/Header.stories.js

@@ -1,28 +1,32 @@
 import React from 'react';
 import Header from './HeaderUI';
+import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Header',
   component: Header,
+  decorators: [withKnobs],
 };
 
-export const Example = (args) => (
+export const Example = () => (
   <div id="qpp-nav-header">
-    <Header {...args} />
+    <Header
+      isLoginEnabled={boolean('isLoginEnabled', true)}
+      skipToContentId={text('skipToContentId', '')}
+      includeSkipToSidebar={boolean('includeSkipToSidebar', false)}
+      showFacilityBasedPreviewLink={boolean(
+        'showFacilityBasedPreviewLink',
+        false
+      )}
+      showCancelButton={boolean('showCancelButton', false)}
+      handleCancel={action('handleCancel')}
+      showPhysicianCompareLink={boolean('showPhysicianCompareLink', false)}
+      performanceYear={number('performanceYear', 2019)}
+      feedbackPerformanceYear={text('feedbackPerformanceYear', '')}
+      fbpPerformanceYear={text('fbpPerformanceYear', '')}
+      showCovidLink={boolean('showCovidLink', false)}
+      isDevPre={boolean('isDevPre', false)}
+    />
   </div>
 );
-Example.args = {
-  isLoginEnabled: true,
-  skipToContentId: '',
-  includeSkipToSidebar: false,
-  showFacilityBasedPreviewLink: false,
-  showCancelButton: false,
-  handleCancel: () => action('handleCancel'),
-  showPhysicianCompareLink: false,
-  performanceYear: 2019,
-  feedbackPerformanceYear: '',
-  fbpPerformanceYear: '',
-  showCovidLink: false,
-  isDevPre: false,
-};

package/components/Header/HeaderContainer.jsx

@@ -19,6 +19,7 @@ const HeaderContainer = ({
   includeSkipToSidebar,
   showCancelButton,
   skipToContentId,
+  isIESupportPage,
 }) => (
   <>
     <a
@@ -37,7 +38,7 @@ const HeaderContainer = ({
         Skip to sidebar
       </a>
     )}
-    <NotificationBanner />
+    {!isIESupportPage && <NotificationBanner />}
     <header id="top" className={showCancelButton ? 'show-cancel-button' : ''}>
       <HeaderLogo />
       {children}
@@ -50,11 +51,13 @@ HeaderContainer.propTypes = {
   includeSkipToSidebar: PropTypes.bool,
   showCancelButton: PropTypes.bool,
   skipToContentId: PropTypes.string,
+  isIESupportPage: PropTypes.bool,
 };
 HeaderContainer.defaultProps = {
   includeSkipToSidebar: false,
   showCancelButton: false,
   skipToContentId: null,
+  isIESupportPage: false,
 };
 
 export default HeaderContainer;

package/components/Header/HeaderUI.jsx

@@ -25,6 +25,7 @@ const HeaderUI = ({
   showFacilityBasedPreviewLink,
   skipToContentId,
   RouterLink,
+  isIESupportPage,
 }) => {
   const [isMobileMenuExpanded, setIsMobileMenuExpanded] = useState(false);
 
@@ -73,6 +74,7 @@ const HeaderUI = ({
     return (
       <HeaderStateProvider RouterLink={RouterLink}>
         <HeaderContainer
+          isIESupportPage={isIESupportPage}
           skipToContentId={skipToContentId}
           includeSkipToSidebar={includeSkipToSidebar}
         >
@@ -93,6 +95,7 @@ const HeaderUI = ({
   return (
     <HeaderStateProvider RouterLink={RouterLink}>
       <HeaderContainer
+        isIESupportPage={isIESupportPage}
         skipToContentId={skipToContentId}
         includeSkipToSidebar={includeSkipToSidebar}
       >
@@ -142,6 +145,7 @@ HeaderUI.propTypes = {
   showFacilityBasedPreviewLink: PropTypes.bool,
   skipToContentId: PropTypes.string,
   RouterLink: PropTypes.func,
+  isIESupportPage: PropTypes.bool,
 };
 HeaderUI.defaultProps = {
   fbpPerformanceYear: null,
@@ -156,6 +160,7 @@ HeaderUI.defaultProps = {
   showFacilityBasedPreviewLink: false,
   skipToContentId: null,
   RouterLink: null,
+  isIESupportPage: false,
 };
 
 export default HeaderUI;

package/components/Header/ImpersonatorBanner.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import cookie from 'cookie';
-import FeatherIcon from 'feather-icons-react';
 import axios from 'axios';
+import CloseIcon from '@material-ui/icons/Close';
 
 import { TextButton } from '../Button';
+import { deleteImpersonatedUser } from '../../session/logout';
 
 const ImpersonatorBanner = () => {
   const { qpp_auth_token: token = null, qpp_impersonated_user: user = null } =
@@ -21,14 +22,13 @@ const ImpersonatorBanner = () => {
 
   const onClick = () => {
     const fn = () => {
-      document.cookie =
-        'qpp_impersonated_user=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+      deleteImpersonatedUser({ qpp_impersonated_user: user });
       window.location.reload();
     };
     return axios
       .delete('/api/auth/users/impersonate', {
         headers: {
-          Accept: 'application/vnd.qpp.cms.gov.v2+json',
+          Accept: 'application/vnd.qpp.cms.gov.v1+json',
           Authorization: `Bearer ${token}`,
         },
       })
@@ -45,7 +45,7 @@ const ImpersonatorBanner = () => {
         </div>
         <TextButton onClick={onClick} className="qpp-u-color--gray-80">
           Exit Impersonation Mode
-          <FeatherIcon icon="x" />
+          <CloseIcon />
         </TextButton>
       </div>
     )

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
     );