qpp-style 9.14.0 → 9.15.0

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/FooterUI.jsx

@@ -1,63 +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 (
       <>
@@ -77,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">
@@ -166,25 +143,29 @@ const FooterUI = (props) => {
                       </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>
+                    {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>
@@ -266,8 +247,8 @@ const FooterUI = (props) => {
   }
   return (
     <LegacyFooterUI
-      buildVersion={props.buildVersion}
-      isFullWidth={props.isFullWidth}
+      buildVersion={buildVersion}
+      isFullWidth={isFullWidth}
       signUpNowLink={signUpNowLink}
     />
   );

package/components/Search/index.js

@@ -14,43 +14,52 @@ const Search = ({
   inputAriaLabel,
   buttonAriaLabel,
   inputWidth,
+  label,
+  parentElement,
 }) => {
+  const ContainerElement = parentElement || 'span';
   const inputStyle = {
     width: inputWidth,
   };
   return (
-    <form role="search" className="qpp-c-search qpp-c-search--compact">
-      <label className="qpp-u-visually-hidden" htmlFor={id}>
-        Search
-      </label>
-      <div className="qpp-c-search__wrap">
-        <input
-          style={inputStyle}
-          className="qpp-c-text-input"
-          type="search"
-          id={id}
-          name={name}
-          placeholder={placeholder}
-          value={inputValue}
-          disabled={disabled}
-          onChange={onChange}
-          aria-label={inputAriaLabel}
-        />
-
-        <button
-          data-testid="search-btn"
-          aria-label={buttonAriaLabel}
-          onClick={onClick}
-          disabled={disableSearchBtn}
-          id={`${id}-submit`}
-          type="submit"
-          className="qpp-c-search__submit qpp-c-button qpp-c-button--text"
+    <ContainerElement className="qppds">
+      <form role="search" className="qpp-c-search qpp-c-search--compact">
+        <label
+          className={label ? 'qpp-u-margin-bottom--8' : 'qpp-u-visually-hidden'}
+          htmlFor={id}
         >
-          <span className="qpp-u-visually-hidden">Search</span>
-          <SearchIcon classes={{ root: 'qpp-icon-mat' }} />
-        </button>
-      </div>
-    </form>
+          {label ? label : 'Search'}
+        </label>
+
+        <div className="qpp-c-search__wrap">
+          <input
+            style={inputStyle}
+            className="qpp-c-text-input"
+            type="search"
+            id={id}
+            name={name}
+            placeholder={placeholder}
+            value={inputValue}
+            disabled={disabled}
+            onChange={onChange}
+            aria-label={inputAriaLabel}
+          />
+
+          <button
+            data-testid="search-btn"
+            aria-label={buttonAriaLabel}
+            onClick={onClick}
+            disabled={disableSearchBtn}
+            id={`${id}-submit`}
+            type="submit"
+            className="qpp-c-search__submit qpp-c-button qpp-c-button--text"
+          >
+            <span className="qpp-u-visually-hidden">Search</span>
+            <SearchIcon classes={{ root: 'qpp-icon-mat' }} />
+          </button>
+        </div>
+      </form>
+    </ContainerElement>
   );
 };
 
@@ -66,9 +75,12 @@ Search.propTypes = {
   inputAriaLabel: PropTypes.string,
   buttonAriaLabel: PropTypes.string,
   inputWidth: PropTypes.string,
+  label: PropTypes.string,
+  parentElement: PropTypes.string,
 };
 
 Search.defaultProps = {
+  label: null,
   id: 'search-input',
   name: '',
   placeholder: '',
@@ -80,6 +92,7 @@ Search.defaultProps = {
   inputAriaLabel: '',
   buttonAriaLabel: '',
   inputWidth: 'auto',
+  parentElement: 'span',
 };
 
 export default Search;