qpp-style 0.0.9 → 0.0.10

package/components/Details/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Add, Remove } from './DetailsIcons';
+
+const Details = ({ children, title, variant, className, ...rest }) => {
+  if (variant === 'header') {
+    return (
+      <details className="qpp-c-details qpp-c-details--header">
+        <summary>
+          {title}
+          <span className="qpp-c-details--icon-closed" aria-hidden="true">
+            <Add iconText="View" />
+          </span>
+          <span className="qpp-c-details--icon-open" aria-hidden="true">
+            <Remove iconText="Hide" />
+          </span>
+        </summary>
+        {children}
+      </details>
+    );
+  }
+
+  return (
+    <details className={`qpp-c-details ${className}`} {...rest}>
+      <summary
+        className={
+          variant === 'text-button' ? 'qpp-c-button qpp-c-button--text' : ''
+        }
+      >
+        <Add />
+        <Remove />
+        {title}
+      </summary>
+      {children}
+    </details>
+  );
+};
+
+Details.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.node,
+  variant: PropTypes.oneOf(['header', 'text-button']),
+  className: PropTypes.string,
+};
+
+Details.defaultProps = {
+  children: false,
+  title: null,
+  variant: null,
+  className: '',
+};
+
+export default Details;

package/components/Dropdown/index.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Dropdown = ({
+  className,
+  id,
+  ariaLabelledBy,
+  ariaLabel,
+  onChange,
+  dataTestId,
+  name,
+  dataType,
+  disabled,
+  size,
+  options,
+  children,
+  parentElement,
+  ...rest
+}) => {
+  const dropdownClass = [
+    'qpp-c-dropdown',
+    size === 'big' && 'qpp-c-dropdown--big',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <select
+      id={id}
+      aria-labelledby={ariaLabelledBy}
+      aria-label={ariaLabel}
+      className={dropdownClass || ''}
+      onChange={onChange}
+      data-testid={dataTestId}
+      name={name}
+      disabled={disabled}
+      data-type={dataType}
+      {...rest}
+    >
+      {children}
+      {options.map(({ disabled, name, value }) => (
+        <option disabled={disabled} key={value} value={value}>
+          {name}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+Dropdown.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  ariaLabelledBy: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string,
+  dataTestId: PropTypes.string,
+  name: PropTypes.string,
+  dataType: PropTypes.string,
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['big']),
+  options: PropTypes.array,
+  parentElement: PropTypes.string,
+};
+
+Dropdown.defaultProps = {
+  children: false,
+  className: 'qpp-u-width--100',
+  id: null,
+  ariaLabelledBy: null,
+  ariaLabel: null,
+  onChange: () => null,
+  dataTestId: null,
+  name: null,
+  dataType: null,
+  disabled: false,
+  size: null,
+  options: [],
+  parentElement: 'span',
+};
+
+export default Dropdown;

package/components/DropdownButton/Menu.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Menu as AriaKitMenu } from 'ariakit/menu';
+
+function Menu({ state, className, children, ...props }) {
+  return (
+    <AriaKitMenu as="ul" state={state} className={className} {...props}>
+      {children}
+    </AriaKitMenu>
+  );
+}
+
+Menu.propTypes = {
+  state: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+Menu.defaultProps = {
+  className:
+    'qpp-c-dropdown-menu qpp-c-dropdown-menu__box qpp-c-dropdown-menu__list',
+  children: null,
+};
+
+export default Menu;

package/components/DropdownButton/MenuButton.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MenuButton as AriaKitButton } from 'ariakit/menu';
+
+function MenuButton({ state, className, iconExist, children, ...props }) {
+  const dropDownIsOpen = state.open;
+
+  const CheveronUpIcon = 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z';
+  const CheveronDownIcon = 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z';
+
+  return (
+    <AriaKitButton state={state} className={className} {...props}>
+      {children}{' '}
+      {iconExist && (
+        <svg
+          className="qpp-icon-mat qpp-icon-inline--lg"
+          focusable="false"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path d={dropDownIsOpen ? CheveronUpIcon : CheveronDownIcon} />
+        </svg>
+      )}
+    </AriaKitButton>
+  );
+}
+
+MenuButton.propTypes = {
+  state: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  iconExist: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+MenuButton.defaultProps = {
+  className: 'qpp-c-button',
+  iconExist: true,
+  children: null,
+};
+
+export default MenuButton;

package/components/DropdownButton/MenuItem.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MenuItem as AriaKitMenuItem } from 'ariakit/menu';
+
+function MenuItem({ as, className, children, ...props }) {
+  return (
+    <AriaKitMenuItem as={as} className={className} {...props}>
+      {children}
+    </AriaKitMenuItem>
+  );
+}
+
+MenuItem.propTypes = {
+  as: PropTypes.string,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+MenuItem.defaultProps = {
+  as: 'li',
+  className: 'qpp-c-dropdown-menu__item',
+  children: null,
+};
+
+export default MenuItem;

package/components/DropdownButton/MenuItemLink.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MenuItem as AriaKitMenuItem } from 'ariakit/menu';
+
+function MenuItemLink({ as, className, children, ...props }) {
+  return (
+    <li role="none">
+      <AriaKitMenuItem as={as} className={className} {...props}>
+        {children}
+      </AriaKitMenuItem>
+    </li>
+  );
+}
+
+MenuItemLink.propTypes = {
+  as: PropTypes.string,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+MenuItemLink.defaultProps = {
+  as: 'a',
+  className: 'qpp-c-dropdown-menu__item',
+  children: null,
+};
+
+export default MenuItemLink;

package/components/Error/Collapsible.jsx

@@ -38,7 +38,7 @@ class Collapsible extends Component {
 
   render() {
     const isArray = Array.isArray(this.props.content);
-    const isHidden = this.state.isExpanded ? undefined : 'true';
+    const isHidden = this.state.isExpanded ? undefined : true;
 
     return (
       <div className="collapsible-container">
@@ -46,7 +46,7 @@ class Collapsible extends Component {
           onClick={this._toggleExpanded}
           className="collapsible-summary"
           type="button"
-          aria-expanded={this.state.isExpanded ? 'true' : 'false'}
+          aria-expanded={this.state.isExpanded ? true : false}
         >
           {this._renderShowButton()}
           {this._renderHideButton()}

package/components/Footer/FooterUI.jsx

@@ -1,213 +1,211 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import InfoTip from '../Infotip/Infotip';
-import LegacyFooterUI from './LegacyFooterUI';
 import Subscribe from './Subscribe';
 import SocialLinks from './SocialLinks';
+import pjson from '../../package.json';
+import { OpenInNewIcon } from '../../lib/SvgComponents';
 
 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 = (props) => {
-  const isNewFooter = props.isNewFooter;
-  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.';
-
-  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>
-          </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>
+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">
+              <h3 className="sub-title">Resources</h3>
+              <ul>
+                <li>
                   <a
-                    aria-label="QPP@cms.hhs.gov"
-                    href="mailto:QPP@cms.hhs.gov"
-                    className="email-link"
+                    href="/about/resource-library"
+                    aria-label="Resource Library"
+                    data-track-category="FooterNav"
+                    data-track-action="OpenEducationAndTools"
+                    data-track-label="Education and Tools"
                   >
-                    QPP@cms.hhs.gov
+                    Resource Library
                   </a>
-                </p>
-              </div>
-              <div className="footer-social-newsletter">
-                <p className="sub-title">Stay Connected</p>
-                <SocialLinks />
-                <p className="sub-title">Sign Up for the QPP Newsletter</p>
-                <Subscribe />
-              </div>
-            </div>
-            <hr />
-            <div className="other-links">
-              <ul className="small">
+                </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="/privacy"
-                    aria-label="Notice of Privacy and Disclaimer"
+                    href="/about/small-underserved-rural-practices"
+                    aria-label="Support for Small Practices"
                     data-track-category="FooterNav"
-                    data-track-action="OpenPrivacyDisclaimer"
-                    data-track-label="Notice of Privacy and Disclaimer"
+                    data-track-action="OpenSupportSmallPractices"
+                    data-track-label="Support for Small Practices"
                   >
-                    CMS Privacy Notice
+                    Support for Small Practices
                   </a>
                 </li>
-                <li className="divider"></li>{' '}
                 <li>
                   <a
-                    href="/accessibility"
-                    aria-label="Accessibility"
+                    href="/developers"
+                    aria-label="Developer Tools"
                     data-track-category="FooterNav"
-                    data-track-action="OpenAccessibility"
-                    data-track-label="Accessibility"
+                    data-track-action="OpenDeveloperTools"
+                    data-track-label="Quality Payment Program"
                   >
-                    Accessibility
+                    Developer Tools
                   </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"
+                    href="/glossary"
+                    aria-label="Glossary"
                     data-track-category="FooterNav"
-                    data-track-action="DownloadAdobeReader"
-                    data-track-label="AdobeReader"
+                    data-track-action="OpenGlossary"
+                    data-track-label="Glossary"
                   >
-                    Download Adobe Reader
+                    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">
+              <h3 className="sub-title">Contact CMS</h3>
+              <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
+                    ariaLabel="TRS Communications Assistant Information"
+                    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>
+              <h3 className="sub-title qpp-u-margin-y--0">
+                <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 className="ccsq-link-icon" />
+                </a>
+              </h3>
+            </div>
+            <div className="footer-social-newsletter">
+              <h3 className="sub-title">Stay Connected</h3>
+              <SocialLinks />
+              <h3 className="sub-title">Sign Up for the QPP Listserv</h3>
+              <Subscribe />
             </div>
           </div>
-        </footer>
-      </>
-    );
-  }
-  return (
-    <LegacyFooterUI
-      buildVersion={props.buildVersion}
-      isFullWidth={props.isFullWidth}
-      signUpNowLink={signUpNowLink}
-    />
-  );
-};
+          <hr />
+        </>
 
-FooterUI.propTypes = {
-  buildVersion: PropTypes.string,
-  isFullWidth: PropTypes.bool,
-  isNewFooter: 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;