qpp-style 1.2.1 → 1.2.2-bv.0

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

@@ -0,0 +1,88 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+class Collapsible extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isExpanded: false,
+    };
+
+    this._toggleExpanded = this.toggleExpanded.bind(this);
+    this._renderShowButton = this.renderShowButton.bind(this);
+    this._renderHideButton = this.renderHideButton.bind(this);
+  }
+
+  toggleExpanded() {
+    this.setState({
+      isExpanded: !this.state.isExpanded,
+    });
+  }
+
+  renderShowButton() {
+    return (
+      <span className="collapsible-show-label">{this.props.showLabel}</span>
+    );
+  }
+
+  renderHideButton() {
+    if (this.props.hideLabel) {
+      return (
+        <span className="collapsible-hide-label">{this.props.hideLabel}</span>
+      );
+    } else {
+      return "";
+    }
+  }
+
+  render() {
+    const isArray = Array.isArray(this.props.content);
+    const isHidden = this.state.isExpanded ? undefined : true;
+
+    return (
+      <div className="collapsible-container">
+        <button
+          onClick={this._toggleExpanded}
+          className="collapsible-summary"
+          type="button"
+          aria-expanded={this.state.isExpanded ? true : false}
+        >
+          {this._renderShowButton()}
+          {this._renderHideButton()}
+        </button>
+
+        <div className="collapsible-details" hidden={isHidden}>
+          {isArray ? (
+            <ul className="items">
+              {this.props.content.map((c) => (
+                <li key={c.contentTitle}>
+                  <p>
+                    <b>{c.contentTitle}</b>
+                  </p>
+                  <p>{c.content}</p>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div>
+              <p>
+                <b>{this.props.contentTitle}</b>
+              </p>
+              <p>{this.props.content}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+Collapsible.propTypes = {
+  showLabel: PropTypes.string.isRequired,
+  hideLabel: PropTypes.string.isRequired,
+  content: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).isRequired,
+  contentTitle: PropTypes.string,
+};
+
+export default Collapsible;

package/components/Error/ErrorUI.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Collapsible from "./Collapsible";
+import PropTypes from "prop-types";
+
+const ErrorUI = (props) => {
+  let errorTitle = `${props.type || "Error"} ${props.code || ""}`;
+  let errorDetails = props.message;
+
+  return (
+    <section className="page-error">
+      <div className="responsive-container">
+        <h1>We’re sorry.</h1>
+        <p className="h2">We cannot access this page.</p>
+        <Collapsible
+          showLabel="Open technical details about the error"
+          hideLabel="Close technical details about the error"
+          contentTitle={errorTitle}
+          content={errorDetails}
+        />
+      </div>
+    </section>
+  );
+};
+
+ErrorUI.propTypes = {
+  code: PropTypes.string,
+  message: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+  type: PropTypes.string,
+};
+
+export default ErrorUI;

package/components/Error/error.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { render } from "react-dom";
+import ErrorUI from "./ErrorUI";
+
+/**
+ * Renders the QPP Error Page content.
+ */
+export default class ErrorPage {
+  /**
+   * @param {Object} options - An object containing content and config data
+   * @param {String} options.type - The error type
+   * @param {String} options.code - The error code
+   * @param {String} options.message - The error message
+   * @param {HTMLElement} options.rootElement - Elem inside which to render
+   */
+  constructor(options) {
+    render(
+      <ErrorUI
+        type={options.type}
+        code={options.code}
+        message={options.message}
+      />,
+      options.rootElement,
+    );
+  }
+}

package/components/FlashNotification/FlashNotificationUI.jsx

@@ -0,0 +1,91 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import reactDOM from "react-dom";
+import { CloseXIcon } from "../../lib/SvgComponents.jsx";
+
+class FlashNotification extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { isClosed: true };
+    this._closeFlashNotification = this.closeFlashNotification.bind(this);
+    this._fadeOutNotification = this.fadeOutNotification.bind(this);
+  }
+
+  render() {
+    return (
+      <div
+        className={
+          this.state.isClosed
+            ? "flash-notification notification-closed"
+            : "flash-notification"
+        }
+        ref={(elem) => {
+          this.element = elem;
+        }}
+      >
+        <div className={this.props.success ? "success" : "error"}>
+          <div className="icon"></div>
+          <div className="text-content">
+            <p className="title-text">{this.props.titleText}</p>
+            <p className="body-text">{this.props.bodyText}</p>
+          </div>
+          <div className="close-notification-container">
+            <button
+              className="closeNotification"
+              aria-label="Close notification"
+              onClick={this._closeFlashNotification}
+            >
+              <svg className="close-icon" aria-hidden="true">
+                {/* <use xlinkHref="#closex" /> */}
+                <CloseXIcon />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  componentDidMount() {
+    setTimeout(
+      function () {
+        this.setState({ isClosed: false });
+      }.bind(this),
+      250,
+    );
+
+    this.timer = setTimeout(
+      function () {
+        this._fadeOutNotification();
+      }.bind(this),
+      10000,
+    );
+  }
+
+  fadeOutNotification() {
+    this.setState({ isClosed: true });
+    setTimeout(
+      function () {
+        reactDOM.unmountComponentAtNode(this.element.parentElement);
+        if (typeof this.props.onClose === "function") {
+          this.props.onClose();
+        }
+      }.bind(this),
+      500,
+    );
+  }
+
+  closeFlashNotification() {
+    clearTimeout(this.timer);
+    this._fadeOutNotification();
+  }
+}
+
+FlashNotification.propTypes = {
+  bodyText: PropTypes.string,
+  success: PropTypes.bool.isRequired,
+  titleText: PropTypes.string,
+  onClose: PropTypes.func,
+};
+
+export default FlashNotification;

package/components/FlashNotification/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { render } from "react-dom";
+import FlashNotificationUI from "./FlashNotificationUI";
+
+/**
+ * Renders the Confirmation/Error Flash Component
+ */
+export default class FlashNotification {
+  /**
+   * @param {Object} options - An object containing content and config data
+   * @param {Boolean} options.success - Whether to render a confirmation or error notification
+   * @param {String} options.titleText - The title text displayed on the notification
+   * @param {String} options.bodyText - The body text displayed on the notification
+   * @param {HTMLElement} options.rootElement - Elem inside which to render
+   */
+  constructor(options) {
+    if (options.hasOwnProperty("rootElement")) {
+      render(
+        <FlashNotificationUI
+          success={options.success}
+          titleText={options.titleText}
+          bodyText={options.bodyText}
+        />,
+        options.rootElement,
+      );
+    } else {
+      render(<FlashNotificationUI />, options);
+    }
+  }
+}

package/components/Footer/FooterUI.jsx

@@ -0,0 +1,211 @@
+import React from "react";
+import InfoTip from "../Infotip/Infotip";
+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 = () => (
+  <>
+    <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
+                    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">
+              <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
+                    aria-labelledby="footer-trs-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>
+          <hr />
+        </>
+
+        <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;