qpp-style 1.3.1 → 1.3.2-bv.0

package/.babelrc

@@ -1,3 +1,10 @@
 {
-  "presets": ["es2015", "react"]
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "transform-es2015-modules-umd",
+    "transform-class-properties"
+  ]
 }

package/.editorconfig

@@ -6,7 +6,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

package/.eslintignore

@@ -0,0 +1,5 @@
+_*
+css
+dist
+node_modules
+test

package/.eslintrc.js

@@ -0,0 +1,32 @@
+module.exports = {
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  parser: "@babel/eslint-parser",
+  parserOptions: {
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    es6: true,
+    node: true,
+    browser: true,
+    jquery: true,
+    mocha: true,
+  },
+  rules: {
+    "no-unused-vars": [
+      "error",
+      {
+        args: "none",
+      },
+    ],
+    "linebreak-style": ["error", "unix"],
+    "no-console": 0,
+    "no-prototype-builtins": [0],
+    "react/no-deprecated": [0],
+  },
+  settings: {
+    react: { version: "detect" },
+  },
+};

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd react
+npm run precommit

package/.prettierrc

@@ -0,0 +1 @@
+{}

package/README.md

@@ -1,57 +1,60 @@
-# qpp-style
-Shared style guide across the QPP program. 
+# QPP-Style React
 
-This repository houses `qpp-style`, a shared style guide/library for the QPP program. `qpp-style` was built on top of bootstrap.
+This directory contains react implementations of the components for QPP.
 
-The purpose of `qpp-style` is to provide assets such as CSS, SCSS, JS, images and fonts to design a site with the visual style of `qpp.cms.gov`. This allows multiple sites built in separate repositories and with different languages to share a global style without repeating styling code. The qpp-style library is primarily distributed on the node/npm ecosystem.
+## Github Branch and Pull Request process
 
-## Install and Use
-### node/npm
+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:
 
-The best way to install qpp-style is with the node package manager or [npm](https://www.npmjs.com/). If you haven't already cloned the `qpp-style` [repository](https://github.com/CMSgov/qpp-style), run the following command on a computer with node/npm installed to install qpp-style into your project.
+```bash
+cd qpp-style/react
+npm version --no-git-tag-version patch
 ```
-npm install --save-dev CMSgov/qpp-style
+
+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}
 ```
-Once installed, all the assets from `qpp-style` need to be consumed by your project. The simplest way to to this is by copying over the relevant assets with build commands and include them from the html with link tags. For example:
-
-1. Build all assets that came with the module:
-    ```sh
-    $ pushd .
-    $ cd ./node_modules/qpp-style
-    $ npm install
-    $ npm start
-    ```
-1. Copy assets to project directory:
-    ```sh
-    $ popd
-    $ mkdir -p public
-    $ cp -r ./node_modules/qpp-style/build/* public 
-    ```
-1. Create webpage:
-    ```sh
-    $ touch public/index.html
-    ```
-1. Link to css in html:
-    ```html
-    <html lang="en">
-        <head>
-            <link href="/css/qpp-style.css" type="text/css" rel="stylesheet" />
-        </head>
-        <body>
-            <h1>QPP Quality Payment Program</h1>
-        </body>
-    </html>
-    ```
-
-Another way to use the style is by importing the sass into your project. This can be done in the following way:
-
-1. Copy the fonts to `/fonts`:
-    ```sh
-    $ mkdir -p fonts
-    $ cp -r ./node_modules/qpp-style/fonts/* fonts
-    ```
-
-1. Create a `.scss` file and adding this line:
-```scss
-@import "../node_modules/qpp-style/styles/qpp_style";
+
+## 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.
+
+The Side Nav contains multiple item array types: divider, container, linkBack, linkHome, practiceDetails, individualDetails, linkDrawer, custom, chart, and switchLink.
+
+| Item Array Type   | Description                                                                                                                                                                                                                                                                                    |
+|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| divider           | <hr> element that is located above and below the practice container.                                                                                                                                                                                                                           |
+| container         | gets Dynamic Content of multiple items and contains the linkDrawer item. Level One and Level Two content are located in this container.                                                                                                                                                        |
+| linkBack          | <button> that links the user back to a URL. This uses a chevron Left icon.                                                                                                                                                                                                                     |
+| linkHome          | <a> tag element which sends the user back to the “Account Home” page /user/submissions. This uses the home icon SVG and is located at the top of the side nav.                                                                                                                                 |
+| practiceDetails   | <div> element with the class name practice-container. Inside this container is the <h2> element which includes the Practice Name and the <p> element which is the Practice Tin. The Practice Tin shows either the CPC+ ID, PCF ID, APM Entity ID, VG ID, or Practice Tin.                      |
+| individualDetails | <div> element with the class name “individual-container”. This parent element contains two other elements which are the <h3> Individual Name and the <p> Individual NPI.                                                                                                                       |
+| linkDrawer        | This is the most complex item type. This item displays the Level One and Level Two <button> elements which contain navigation links depending on each page as well as specific SVG icons. Depending on the page there can be multiple links to the user can access quickly using the side nav. |
+| custom            | This option is for sanitized HTML content. This custom HTML will be cleaned of any potentially harmful elements that could compromise the security of the web app.                                                                                                                             |
+| chart             | This option uses the ScoreChart component to display Chart Data on the Side Nav. This data includes categories from Quality Measures, Advancing Care Info, Promoting Interoperability, Improvement Activities, and Cost.                                                                       |
+| switchLink        | This is an implementation of the “Switch Practice” button for the Side Nav. Clicking 'Switch Practice' will take the user back to the TIN list for the part of the application they are viewing.                                                                                               |

package/components/Accordion/index.jsx

@@ -0,0 +1,97 @@
+import React, { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Chevron } from "../../lib/Chevron.jsx";
+
+const Accordion = (props) => {
+  const content = useRef(null);
+  const [setActive, setActiveState] = useState(props.isOpen ? "active" : "");
+  const ariaPressed = setActive ? "true" : "false";
+  const getHeight = (node) => {
+    if (node) {
+      return `${node.scrollHeight}px`;
+    }
+    return "auto";
+  };
+  const height = setActive ? getHeight(content.current) : "0px";
+  const rotate = setActive ? "accordion-icon rotate" : "accordion-icon";
+
+  function toggleAccordion() {
+    setActiveState(setActive === "" ? "active" : "");
+  }
+
+  function openAccordion() {
+    setActiveState("active");
+  }
+
+  function closeAccordion() {
+    setActiveState("");
+  }
+
+  useEffect(() => {
+    if (props.isOpen) {
+      openAccordion();
+    } else {
+      closeAccordion();
+    }
+  }, [props.isOpen]);
+
+  return (
+    <div className="accordion-section" data-testid="accordion">
+      <button
+        className={`accordion ${setActive} ${
+          setActive && props.isSticky ? "sticky" : ""
+        }`}
+        aria-label={props.title}
+        aria-pressed={ariaPressed}
+        aria-expanded={ariaPressed}
+        tabIndex="0"
+        onClick={toggleAccordion}
+      >
+        <div className="accordion-left-title">
+          <p className="accordion-title">{props.title}</p>
+          {props.subTitle && (
+            <p className="accordion-subtitle">{props.subTitle}</p>
+          )}
+        </div>
+        {props.centerItem && (
+          <div className="accordion-center">
+            <p>{props.centerItem}</p>
+          </div>
+        )}
+        {props.rightItem && (
+          <div className="accordion-right">
+            <p>{props.rightItem}</p>
+          </div>
+        )}
+        <div className="chevron-container">
+          <Chevron className={rotate} />
+        </div>
+      </button>
+      <div
+        ref={content}
+        style={{ maxHeight: height }}
+        className="accordion-content"
+      >
+        <div className="accordion-text dashed-border">{props.children}</div>
+      </div>
+    </div>
+  );
+};
+
+Accordion.propTypes = {
+  title: PropTypes.string.isRequired,
+  subTitle: PropTypes.string,
+  children: PropTypes.any.isRequired,
+  centerItem: PropTypes.string,
+  rightItem: PropTypes.string,
+  isOpen: PropTypes.bool,
+  isSticky: PropTypes.bool,
+};
+
+Accordion.defaultProps = {
+  title: "",
+  isOpen: false,
+  isSticky: false,
+};
+
+export default Accordion;

package/components/Button/index.js

@@ -0,0 +1,90 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const VARIANTS = ["secondary", "outline", "danger", "white"];
+const SIZES = ["big"];
+
+const Button = ({
+  children,
+  className,
+  href,
+  loading,
+  onClick,
+  size,
+  variant,
+  type,
+  ...rest
+}) => {
+  let btnClass = "qpp-c-button";
+
+  if (VARIANTS.includes(variant)) {
+    btnClass = btnClass.concat(" ", `qpp-c-button--${variant}`);
+  }
+  if (SIZES.includes(size)) {
+    btnClass = btnClass.concat(" ", `qpp-c-button--${size}`);
+  }
+  if (className) {
+    btnClass = btnClass.concat(" ", className);
+  }
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        data-testid="ds-btn"
+        className={btnClass || ""}
+        onClick={onClick}
+      >
+        {children}
+      </a>
+    );
+  }
+  return (
+    <button
+      data-testid="ds-btn"
+      className={btnClass || ""}
+      onClick={onClick}
+      disabled={loading}
+      type={type}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  href: PropTypes.string,
+  loading: PropTypes.bool,
+  onClick: PropTypes.func,
+  size: PropTypes.oneOf(SIZES),
+  type: PropTypes.string,
+  variant: PropTypes.oneOf(VARIANTS),
+};
+
+Button.defaultProps = {
+  children: false,
+  className: "",
+  href: "",
+  loading: false,
+  onClick: () => null,
+  size: null,
+  type: "button",
+  variant: null,
+};
+
+export const TextButton = ({ className = "", ...props }) => (
+  <Button className={`qpp-c-button--text ${className}`} {...props} />
+);
+
+TextButton.propTypes = {
+  className: PropTypes.string,
+};
+
+TextButton.defaultProps = {
+  className: "",
+};
+
+export default Button;

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