qpp-style 9.13.4 → 9.14.2

package/README.md

@@ -3,3 +3,40 @@
 This directory contains react implementations of the components for QPP.
 
 A storybook with examples is published at [https://cmsgov.github.io/qpp-style](https://cmsgov.github.io/qpp-style)
+
+## Github Branch and Pull Request process
+1. Create branch off main and create a Pull Request into main for the feature.
+>Example Branch Name: feature/QPPXX-XXXX_make_icon_better
+2. Once merged into main, create release branch from main.
+3. Name the new branch release/x.xx.x
+4. Run the version bump:
+
+```bash
+cd qpp-style/react
+npm version --no-git-tag-version patch
+```
+
+Example Commit Message:
+> x.xx.x release
+
+5. Create a pull request against main with the PR Title: x.xx.x release [Example PR](https://github.com/CMSgov/qpp-style/pull/1065)
+6. Enter the change in the description of the pull request i.e.:
+> Added new svg for Icon Name
+
+## Generate an NPM token with Publish permissions
+1. If you do not already have an access token, sign in to npmjs.com and navigate to access tokens.
+2. Click generate new token.
+3. Select publish under type.
+4. Copy the npm token and set its value as the environment variable: NPM_TOKEN
+
+```bash
+export NPM_TOKEN={npm_token}
+```
+
+## Publish the react qpp-style npm package (used by both react and angular)
+```bash
+cd qpp-style/react
+npm i
+npm publish
+```
+7. Once published successfully, merge into main.

package/components/DropdownButton/DropdownButton.stories.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+import DropdownButton from './index';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'DropdownButton',
+  component: DropdownButton,
+  decorators: [withKnobs],
+};
+
+// mat-ui v4 doesn't include this "FileDownload" icon, but mat-ui v5 does
+// whenever we update to v5, we could replace this svg with the one from npm
+const DownloadIcon = (...props) => (
+  <SvgIcon {...props}>
+    <path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z" />
+  </SvgIcon>
+);
+
+export const BasicExample = () => (
+  <div className="qpp-u-padding--48">
+    <DropdownButton
+      menuId="example-menu-1"
+      ariaLabel="aria label example"
+      buttonLabel="Test"
+      options={[
+        {
+          value: 'option 1',
+        },
+        { value: 'option 2', name: 'Name of Option 2' },
+      ]}
+      loading={boolean('loading', false)}
+    />
+  </div>
+);
+
+/*
+Dropdown menu headers were removed from designs for now.  We may revisit this
+in the future so we're leaving this here until we decide on design.
+*/
+// export const WithHeader = () => (
+//   <div className="qpp-u-padding--48">
+//     <DropdownButton
+//       menuId="example-menu-2"
+//       ariaLabel="aria label example"
+//       buttonLabel="Test"
+//       options={[
+//         {
+//           value: 'option 1',
+//         },
+//         { value: 'option 2', name: 'Name of Option 2' },
+//       ]}
+//       header="Header"
+//     />
+//   </div>
+// );
+
+export const Loading = () => (
+  <div className="qpp-u-padding--48">
+    <DropdownButton
+      menuId="example-menu-3"
+      ariaLabel="aria label example"
+      buttonLabel="Test"
+      options={[
+        {
+          value: 'option 1',
+        },
+        { value: 'option 2', name: 'Name of Option 2' },
+      ]}
+      loading
+    />
+  </div>
+);
+
+export const MaxHeight = () => (
+  <div className="qpp-u-padding--48">
+    <DropdownButton
+      menuId="example-menu-3"
+      ariaLabel="aria label example"
+      buttonLabel="Test"
+      options={[
+        { value: 'option 1' },
+        { value: 'option 2' },
+        { value: 'option 3' },
+        { value: 'option 4' },
+        { value: 'option 5' },
+        { value: 'option 6' },
+        { value: 'option 7' },
+        { value: 'option 8' },
+        { value: 'option 9' },
+      ]}
+      loading={boolean('loading', false)}
+    />
+  </div>
+);
+
+export const MaxWidth = () => (
+  <div className="qpp-u-padding--48">
+    <DropdownButton
+      menuId="example-menu-1"
+      ariaLabel="aria label example"
+      buttonLabel="Test"
+      options={[
+        { value: 'option 1' },
+        {
+          value: 'option 2',
+          name: 'very long item text 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24',
+        },
+      ]}
+      loading={boolean('loading', false)}
+    />
+  </div>
+);
+
+export const ItemsWithIcons = () => (
+  <div className="qpp-u-padding--48">
+    <DropdownButton
+      menuId="example-menu-1"
+      ariaLabel="aria label example"
+      buttonLabel="Test"
+      options={[
+        {
+          value: 'option 1',
+          Icon: DownloadIcon,
+          'aria-roledescription': 'Download file',
+        },
+        {
+          value: 'option 2',
+          name: 'very long item text 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24',
+          Icon: DownloadIcon,
+          'aria-roledescription': 'Download file',
+        },
+      ]}
+      loading={boolean('loading', false)}
+    />
+  </div>
+);

package/components/DropdownButton/index.js

@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import MuiMenu from '@material-ui/core/Menu';
+import MuiMenuItem from '@material-ui/core/MenuItem';
+import MuiProgressCircle from '@material-ui/core/CircularProgress';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import Button, { TextButton } from '../Button';
+
+const ITEM_HEIGHT = 48;
+
+const DropdownButton = ({
+  text = false,
+  loading = false,
+  options = [],
+  menuId,
+  buttonLabel,
+  header,
+  children,
+  ...buttonProps
+}) => {
+  const Btn = text ? TextButton : Button;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Btn
+        aria-haspopup="true"
+        aria-controls={menuId}
+        onClick={handleClick}
+        {...buttonProps}
+      >
+        {buttonLabel}{' '}
+        {!anchorEl && (
+          <ExpandMore classes={{ root: 'qpp-icon-mat qpp-icon-inline--lg' }} />
+        )}
+        {anchorEl && (
+          <ExpandLess classes={{ root: 'qpp-icon-mat qpp-icon-inline--lg' }} />
+        )}
+      </Btn>
+      <MuiMenu
+        id={menuId}
+        keepMounted
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        getContentAnchorEl={null}
+        anchorOrigin={{
+          vertical: 'bottom',
+        }}
+        className="qpp-c-dropdown-menu"
+        classes={{
+          paper: 'qpp-c-dropdown-menu__box',
+          list: 'qpp-c-dropdown-menu__list',
+        }}
+        MenuListProps={{
+          ['aria-labelledby']: header ? `${menuId}-header` : null,
+        }}
+        PaperProps={{
+          style: {
+            maxHeight: ITEM_HEIGHT * 5.5,
+            maxWidth: '400px',
+          },
+        }}
+      >
+        {header && (
+          <MuiMenuItem
+            id={`${menuId}-header`}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            classes={{
+              root: 'qpp-c-dropdown-menu__item qpp-c-dropdown-menu__item--header',
+            }}
+            disabled
+            aria-hidden
+            role="presentation"
+            disableRipple
+          >
+            {header}
+          </MuiMenuItem>
+        )}
+        {loading && (
+          <MuiMenuItem
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            classes={{
+              root: 'qpp-c-dropdown-menu__item qpp-c-dropdown-menu__item--loading',
+            }}
+            disableRipple
+            disabled
+          >
+            <MuiProgressCircle
+              size="1em"
+              color="inherit"
+              classes={{ root: 'qpp-c-dropdown-menu__spinner' }}
+            />{' '}
+            <span role="status">Loading...</span>
+          </MuiMenuItem>
+        )}
+        {!loading &&
+          options.map(({ disabled, name, value, Icon, ...itemProps }) => (
+            <MuiMenuItem
+              disabled={disabled}
+              key={value}
+              value={value}
+              onClick={handleClose}
+              classes={{ root: 'qpp-c-dropdown-menu__item' }}
+              disableRipple
+              {...itemProps}
+            >
+              {Icon && (
+                <div className="qpp-c-dropdown-menu__icon">
+                  <Icon classes={{ root: 'qpp-icon-mat' }} />
+                </div>
+              )}
+              <span>{name || value}</span>
+            </MuiMenuItem>
+          ))}
+      </MuiMenu>
+    </>
+  );
+};
+
+DropdownButton.propTypes = {
+  menuId: PropTypes.string.isRequired,
+  text: PropTypes.bool,
+  buttonLabel: PropTypes.string,
+  loading: PropTypes.bool,
+  options: PropTypes.arrayOf(PropTypes.object),
+  header: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
+};
+
+export default DropdownButton;

package/components/Footer/Footer.stories.js

@@ -12,8 +12,8 @@ export const ExampleFooter = () => (
   <Footer
     isFullWidth={boolean('isFullWidth', false)}
     buildVersion={text('buildVersion', 'BUILD VERSION')}
-    isNewFooter={boolean('isNewFooter', false)}
-    showHcdResearch={boolean('showHcdResearch', false)}
+    isNewFooter={boolean('isNewFooter', true)}
+    showHcdResearch={boolean('showHcdResearch', true)}
   />
 );
 

package/components/Footer/FooterUI.jsx

@@ -1,62 +1,40 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import axios from 'axios';
+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';
 
 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 FooterUI = (props) => {
-  const isNewFooter = props.isNewFooter;
-  const isIESupportPage = props.isIESupportPage;
-  const signUpNowLink = props.showHcdResearch
+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 [listServ, setListServ] = useState(false);
+
+  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;
   };
 
-  // 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.
-  // 3. If the call fails, use the default value
-  useEffect(() => {
-    const storageContent = JSON.parse(
-      localStorage.getItem('qpp_footer_listServ')
-    );
-    if (
-      storageContent?.content &&
-      new Date().valueOf() < storageContent.expiration
-    ) {
-      setListServ(storageContent.listServ);
-    } else {
-      const origin = window.location.origin;
-      axios
-        .get(
-          !origin.includes('localhost')
-            ? `${origin}/config/footer`
-            : 'https://qpp.cms.gov/config/footer'
-        )
-        .then(({ data: { data = {} } }) => {
-          localStorage.setItem(
-            'qpp_footer_listServ',
-            JSON.stringify({
-              listServ: data.listServ,
-            })
-          );
-          setListServ(data.listServ);
-        })
-        .catch((e) => {
-          setListServ(false);
-        });
-    }
-  }, []);
   if (isNewFooter) {
     return (
       <>
@@ -76,7 +54,7 @@ const FooterUI = (props) => {
         )}
         <footer className="global-footer">
           <div className="build-version" id="build-version">
-            {props.buildVersion}
+            {buildVersion}
           </div>
 
           <div className="responsive-container">
@@ -145,7 +123,7 @@ const FooterUI = (props) => {
                   </div>
                   <div className="footer-contact-cms">
                     <p className="sub-title">Contact CMS</p>
-                    <p className="contact-title">By Phone:</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)
@@ -154,7 +132,7 @@ const FooterUI = (props) => {
                       </span>
                     </p>
 
-                    <p className="contact-title">By Email:</p>
+                    <p className="contact-title">Email:</p>
                     <p>
                       <a
                         aria-label="QPP@cms.hhs.gov"
@@ -164,12 +142,30 @@ const FooterUI = (props) => {
                         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">
-                      {listServ
+                      {content?.listServ
                         ? 'Sign Up for the QPP Listserv'
                         : 'Sign Up for the QPP Newsletter'}
                     </p>
@@ -251,8 +247,8 @@ const FooterUI = (props) => {
   }
   return (
     <LegacyFooterUI
-      buildVersion={props.buildVersion}
-      isFullWidth={props.isFullWidth}
+      buildVersion={buildVersion}
+      isFullWidth={isFullWidth}
       signUpNowLink={signUpNowLink}
     />
   );