qpp-style 2.1.13 → 2.2.0-sm.0

package/components/Footer/SocialLinks.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+const SocialLinks = () => (
+  <div className="social-container">
+    <a
+      rel="noopener noreferrer"
+      target="_blank"
+      className="social-link"
+      href="https://twitter.com/CMSGov"
+      aria-label="Follow us on Twitter. This link opens in a new window."
+    >
+      <svg width="19px" height="16px" viewBox="0 0 19 16">
+        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+          <g
+            transform="translate(-763.000000, -177.000000)"
+            fill="#242424"
+            fillRule="nonzero"
+          >
+            <g transform="translate(763.000000, 140.000000)">
+              <g transform="translate(0.000000, 37.000000)">
+                <path
+                  d="M16.9243259,4.73901817 C16.9243259,4.57725788 16.9243259,4.41549759 16.916868,4.25373729 C17.6626567,3.71698723 18.3114928,3.05524058 18.826087,2.30526104 C18.1250456,2.6067234 17.3867149,2.81260014 16.6260105,2.90083303 C17.4240043,2.43025763 18.0206352,1.68763083 18.3040349,0.812654705 C17.5507884,1.25381914 16.7304209,1.56263424 15.8727639,1.72439454 C14.425934,0.202377237 12.0021209,0.128849832 10.4583384,1.56263424 C9.46643951,2.48172682 9.04133999,3.8566893 9.35457121,5.16547712 C6.28192201,5.01106957 3.41063575,3.5846379 1.47158528,1.22440818 C0.457312727,2.94494947 0.971906889,5.15077164 2.65738922,6.26103547 C2.04584253,6.24632999 1.45666951,6.0845697 0.919701685,5.79046007 C0.919701685,5.80516555 0.919701685,5.81987104 0.919701685,5.83457652 C0.919701685,7.62864522 2.20245815,9.17272074 3.99235089,9.53300502 C3.42555152,9.68741258 2.83637849,9.7094708 2.26212124,9.59917969 C2.76179963,11.1359025 4.20117171,12.1873444 5.83444883,12.2167553 C4.4771135,13.2681972 2.80654695,13.8343583 1.08377519,13.8343583 C0.778001843,13.8343583 0.4722285,13.8123 0.173913043,13.7828891 C1.93397424,14.8784474 3.96251934,15.4666667 6.04326965,15.4666667 C13.0760565,15.4666667 16.9243259,9.71682354 16.9243259,4.73901817 Z"
+                  id="twitter-icon"
+                ></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </a>
+    <a
+      rel="noopener noreferrer"
+      target="_blank"
+      className="social-link"
+      href="https://www.youtube.com/playlist?list=PLaV7m2-zFKpj_6fBsqav6GvFzzq9oOpkk"
+      aria-label="Follow us on YouTube. This link opens in a new window."
+    >
+      <svg width="19px" height="14px" viewBox="0 0 19 14">
+        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+          <g
+            transform="translate(-801.000000, -179.000000)"
+            fill="#242424"
+            fillRule="nonzero"
+          >
+            <g transform="translate(763.000000, 140.000000)">
+              <g id="Group" transform="translate(38.000000, 39.000000)">
+                <path
+                  d="M17.7486957,2.84298208 C17.551087,2.10010036 16.9670652,1.51515412 16.2265217,1.3162724 C14.8843478,0.955555556 9.5,0.955555556 9.5,0.955555556 C9.5,0.955555556 4.11565217,0.955555556 2.77347826,1.3162724 C2.03293478,1.51515412 1.44891304,2.10010036 1.25130435,2.84298208 C0.891304348,4.19030824 0.891304348,7 0.891304348,7 C0.891304348,7 0.891304348,9.80969176 1.25130435,11.1570179 C1.44891304,11.8998996 2.03293478,12.4848459 2.77347826,12.6837276 C4.11565217,13.0444444 9.5,13.0444444 9.5,13.0444444 C9.5,13.0444444 14.8843478,13.0444444 16.2265217,12.6837276 C16.9670652,12.4848459 17.551087,11.8998996 17.7486957,11.1570179 C18.1086957,9.80969176 18.1086957,7 18.1086957,7 C18.1086957,7 18.1086957,4.19030824 17.7486957,2.84298208 Z M7.73913043,9.5513405 L7.73913043,4.4486595 L12.2391304,7 L7.73913043,9.5513405 Z"
+                  id="Youtube-icon"
+                ></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </a>
+  </div>
+);
+
+export default SocialLinks;

package/components/Footer/Subscribe.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+const Subscribe = () => (
+  <div className="subscriber-form">
+    <form
+      action="https://public.govdelivery.com/accounts/USCMS/subscriber/qualify"
+      target="_blank"
+      acceptCharset="UTF-8"
+      method="get"
+      rel="noopener noreferrer"
+    >
+      <input type="hidden" name="topic_id" value="USCMS_12196" />
+      <label className="sr-only" htmlFor="email-subscribe">
+        Email address
+      </label>
+      <input
+        id="email-subscribe"
+        className="form-control"
+        type="email"
+        name="email"
+        placeholder="Enter your Email"
+      />
+      <button
+        className="btn btn-subscribe js-subscribe-submit"
+        type="submit"
+        name="commit"
+      >
+        Subscribe
+      </button>
+    </form>
+  </div>
+);
+
+export default Subscribe;

package/components/Footer/footer.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { render } from "react-dom";
+import FooterUI from "./FooterUI";
+
+/**
+ * Renders the QPP Footer content.
+ */
+export default class Footer {
+  /**
+   * @param {Object} options - An object containing content and config data
+   * @param {HTMLElement} options.rootElement - Elem inside which to render
+   */
+  constructor(options) {
+    if (options.hasOwnProperty("rootElement")) {
+      render(<FooterUI />, options.rootElement);
+    } else {
+      render(<FooterUI />, options);
+    }
+  }
+}

package/components/GovBanner/index.js

@@ -0,0 +1,117 @@
+import React, { useState } from "react";
+
+const GovBanner = () => {
+  const [hideContent, setHideContent] = useState(true);
+
+  return (
+    <section
+      className="qpp-c-gov-banner"
+      aria-label="Official government website"
+    >
+      <div className="qpp-c-gov-banner__expand-wrap">
+        <header
+          className={`qpp-c-gov-banner__header ${
+            !hideContent ? "qpp-c-gov-banner__header--expanded" : ""
+          }`}
+        >
+          <div className="qpp-c-gov-banner__inner">
+            <div className="qpp-c-gov-banner__header-col1">
+              <img
+                className="qpp-c-gov-banner__header-flag"
+                src="/images/us_flag_small.png"
+                alt="U.S. flag"
+              />
+            </div>
+            <div className="qpp-c-gov-banner__header-col2">
+              <p className="qpp-c-gov-banner__header-text">
+                An official website of the United States government
+              </p>
+              <p className="qpp-c-gov-banner__header-action" aria-hidden="true">
+                <span className="qpp-c-gov-banner__header-action-text qpp-c-button qpp-c-button--text">
+                  Here’s how you know
+                </span>
+                <span className="qpp-c-gov-banner__header-action-icon qpp-c-button qpp-c-button--text"></span>
+              </p>
+            </div>
+            <button
+              className="qpp-c-gov-banner__button qpp-c-button qpp-c-button--icon-after qpp-c-button--text"
+              aria-expanded={!hideContent}
+              aria-controls="qpp-gov-banner-content"
+              onClick={() => setHideContent(!hideContent)}
+            >
+              <span className="qpp-c-gov-banner__button-text">
+                Here’s how you know
+              </span>
+            </button>
+          </div>
+        </header>
+        <div
+          className="qpp-c-gov-banner__content"
+          id="qpp-gov-banner-content"
+          hidden={hideContent}
+        >
+          <div className="qpp-u-display--flex qpp-u-flex-direction--column qpp-u-xs-flex-direction--row qpp-u-flex-gap--24">
+            <div className="qpp-c-gov-banner__guidance">
+              <img
+                className="qpp-c-gov-banner__icon"
+                src="/images/icon-dot-gov.svg"
+                role="img"
+                alt=""
+                aria-hidden="true"
+              />
+              <div>
+                <p>
+                  <strong> Official websites use .gov </strong>
+                  <br />A <strong>.gov</strong> website belongs to an official
+                  government organization in the United States.
+                </p>
+              </div>
+            </div>
+            <div className="qpp-c-gov-banner__guidance">
+              <img
+                className="qpp-c-gov-banner__icon"
+                src="/images/icon-https.svg"
+                role="img"
+                alt=""
+                aria-hidden="true"
+              />
+              <div>
+                <p>
+                  <strong> Secure .gov websites use HTTPS </strong>
+                  <br />A <strong>lock</strong> (
+                  <span className="icon-lock">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="52"
+                      height="64"
+                      viewBox="0 0 52 64"
+                      className="qpp-c-gov-banner__lock-image "
+                      role="img"
+                      aria-labelledby="banner-lock-title-default banner-lock-description-default"
+                      focusable="false"
+                    >
+                      <title id="banner-lock-title-default">Lock</title>
+                      <desc id="banner-lock-description-default">
+                        A locked padlock
+                      </desc>
+                      <path
+                        fill="#000000"
+                        fillRule="evenodd"
+                        d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                      />
+                    </svg>
+                  </span>
+                  ) or <strong>https://</strong> means you’ve safely connected
+                  to the .gov website. Share sensitive information only on
+                  official, secure websites.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default GovBanner;

package/components/Header/Header.md

@@ -0,0 +1,111 @@
+# Header Component
+
+## Config
+
+To populate the header's content, a `content` prop must provided. If one is not provided, the component will use `default-content.json`. The `content` prop is expected to be an array of objects where each object represents one of the header items (i.e. "About", "MIPs", etc.).
+
+Here is an example content structure:
+
+```json
+[
+  {
+    "name": "About",
+    "subtitle": "Quality Payment Program",
+    "href": "/about"
+  },
+  {
+    "name": "Resources",
+    "subtitle": "Help, Support and Resources",
+    "columns": [
+      [
+        {
+          "heading": "Resource column 1",
+          "items": [
+            {
+              "name": "Timeline and Important Deadlines",
+              "type": "link",
+              "href": "/"
+            }
+          ]
+        }
+      ],
+      [
+        {
+          "heading": "Resource column 2",
+          "items": [
+            {
+              "name": "Help and Support",
+              "type": "link",
+              "href": "/"
+            }
+          ]
+        }
+      ]
+    ]
+  }
+]
+```
+
+### Header Items
+
+Each of these objects represent an item in the header. These can be plain links or buttons that trigger a dropdown menu. If an `href` is provided instead of `columns`, the header item will be a link -- and vice versa.
+
+| Property name | Type     | Required | Description                                             |
+| ------------- | -------- | -------- | ------------------------------------------------------- |
+| `name`        | `String` | `true`   | Name shown for the header link                          |
+| `subtitle`    | `String` | `true`   | Text shown underneath the `name`                        |
+| `href`        | `String` | `false`  | URL link path if the header item is not a dropdown menu |
+| `columns`     | `Array`  | `false`  | Columns in the dropdown menu                            |
+
+### Menu Sections
+
+Each of these objects represent a section within a column in a header item menu.
+
+| Property name | Type     | Required | Description                          |
+| ------------- | -------- | -------- | ------------------------------------ |
+| `heading`     | `String` | `false`  | Title for link section               |
+| `items`       | `Array`  | `true`   | Each link/section in the header menu |
+
+### Menu Items
+
+Each of these objects represent a link within a header item menu.
+
+| Property name | Type     | Required | Default  | Description                                                |
+| ------------- | -------- | -------- | -------- | ---------------------------------------------------------- |
+| `name`        | `String` | `true`   | N/A      | Name shown for the header link                             |
+| `href`        | `String` | `true`   | N/A      | URL link path                                              |
+| `type`        | `String` | `false`  | `'link'` | URL link type. Can be `'link'`, `'button'`, or `'sublink'` |
+
+- `'link'`: Normal `<a>` tag link
+- `'button'`: Outline button
+- `'sublink'`: `<li>` link
+
+## Cookies
+
+When a user succesfully logs into QPP the user will receive the following
+cookies.
+| Cookie | Description |
+|-------------------------------------|--------------------------------------|
+| qpp_auth_token | auth token |
+| qpp_has_authorizations | user has authorizations |
+| qpp_has_non_registry_authorizations | user has non registry authorizations |
+
+## Authenticated Links
+
+| Link                         | Cookie                                   | Property                          |
+| ---------------------------- | ---------------------------------------- | --------------------------------- |
+| Account Home                 | qpp_auth_token present                   |                                   |
+| Eligibility & Reporting      | qpp_has_authorizations=true              |                                   |
+| Performance Feedback         | qpp_has_authorizations=true              |                                   |
+| Doctors & Clinicians Preview | qpp_has_non_registry_authorizations=true | showPhysicianCompareLink=true     |
+| Facility Based Preview       | qpp_has_authorizations=true              | showFacilityBasedPreviewLink=true |
+| Manage Access                | qpp_auth_token present                   |                                   |
+| Sign Out                     | qpp_auth_token present                   |                                   |
+
+## Review Claims-based Submission Link
+
+Review Claims-based Submission link has been deleted
+
+## Dev Pre Environment
+
+When the application is in Dev Pre mode the Header only has the Sign Out link.

package/components/Header/HeaderAccountMenu.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useHeaderState } from "./hooks";
+import { setUtagLink } from "./utag-helpers";
+import HeaderMenuItem from "./HeaderMenuItem";
+import Session from "../Session";
+
+const HeaderAccountMenu = ({ handleClick, isLoginEnabled, isDevPre }) => {
+  const { closeMenus, RouterLink, headerContent } = useHeaderState();
+  const { isLoggedIn, firstName, devPreMenuLinks, accountMenuLinks } =
+    headerContent;
+
+  const isDevPreAndNotAuthenticated = !isLoggedIn && isDevPre;
+
+  if (!isLoginEnabled || isDevPreAndNotAuthenticated) {
+    return null;
+  }
+
+  // login link
+  if (!isLoggedIn) {
+    if (RouterLink) {
+      return (
+        <li onClick={handleClick} className="header-item-login login">
+          <RouterLink
+            className="menu-link"
+            to="/login"
+            onClick={() => {
+              closeMenus();
+              setUtagLink("main navbar", "click", "/login");
+            }}
+            data-track-category="TopNav"
+            data-track-action="click"
+            data-track-label="Sign In"
+          >
+            <div className="nav-title">Sign In</div>
+            <div className="nav-description">
+              Manage Account <br />
+              and Register
+            </div>
+          </RouterLink>
+        </li>
+      );
+    }
+    return (
+      <li className="header-item-login login">
+        <a
+          className="menu-link"
+          href="/login"
+          data-track-category="TopNav"
+          data-track-action="click"
+          data-track-label="Sign In"
+          onClick={() => {
+            setUtagLink("main navbar", "click", "/login");
+          }}
+        >
+          <div className="nav-title">Sign In</div>
+          <div className="nav-description">
+            Manage Account <br />
+            and Register
+          </div>
+        </a>
+      </li>
+    );
+  }
+
+  if (isLoggedIn) {
+    return (
+      <>
+        <Session />
+        <HeaderMenuItem
+          hasMenu
+          menuName="Login"
+          name={firstName}
+          subtitle="My Account"
+          className="account-menu-item"
+          columns={isDevPre ? devPreMenuLinks : accountMenuLinks}
+          rows={isDevPre ? devPreMenuLinks : accountMenuLinks}
+        />
+      </>
+    );
+  }
+};
+
+HeaderAccountMenu.propTypes = {
+  isLoginEnabled: PropTypes.bool.isRequired,
+  isDevPre: PropTypes.bool,
+  handleClick: PropTypes.func.isRequired,
+};
+
+HeaderAccountMenu.defaultProps = {
+  isDevPre: false,
+};
+
+export default HeaderAccountMenu;

package/components/Header/HeaderCancel.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const HeaderCancel = ({ handleCancel }) => {
+  return (
+    <button className="header-cancel" onClick={handleCancel}>
+      Cancel
+    </button>
+  );
+};
+
+HeaderCancel.propTypes = {
+  handleCancel: PropTypes.func,
+};
+
+export default HeaderCancel;

package/components/Header/HeaderContainer.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import HeaderLogo from "./HeaderLogo";
+import NotificationBanner from "../NotificationBanner";
+import GovBanner from "../GovBanner";
+import { useHeaderState } from "./hooks";
+/**
+ * Accessibility enhancement that moves focus to an element for "Skip" links
+ * @param {Object} e - The native JS event
+ * @param {String} id - The HTML ID of the element to be focused
+ */
+function jumpToLink(e, id) {
+  e.preventDefault();
+  document.getElementById(id).focus();
+}
+
+const HeaderContainer = ({
+  children,
+  includeSkipToSidebar,
+  showCancelButton,
+  skipToContentId,
+  isIESupportPage,
+  isDevPre,
+}) => {
+  const { currentOpenMenu } = useHeaderState();
+  const cssCancelBtn = showCancelButton ? "show-cancel-button" : "";
+  const cssMenuDropdownStatus =
+    currentOpenMenu === ""
+      ? "header-dropdown--closed"
+      : "header-dropdown--open";
+
+  return (
+    <>
+      <a
+        className="skip"
+        onClick={(e) => jumpToLink(e, `${skipToContentId || "mainContent"}`)}
+        href={`#${skipToContentId || "mainContent"}`}
+      >
+        Skip to content
+      </a>
+      {includeSkipToSidebar && (
+        <a
+          className="skip"
+          onClick={(e) => jumpToLink(e, "qppSidebar")}
+          href="#qppSidebar"
+        >
+          Skip to sidebar
+        </a>
+      )}
+      <GovBanner />
+      {!isIESupportPage && <NotificationBanner />}
+      <header id="top" className={`${cssCancelBtn} ${cssMenuDropdownStatus}`}>
+        <HeaderLogo isDevPre={isDevPre} />
+        {children}
+      </header>
+    </>
+  );
+};
+
+HeaderContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  includeSkipToSidebar: PropTypes.bool,
+  showCancelButton: PropTypes.bool,
+  skipToContentId: PropTypes.string,
+  isIESupportPage: PropTypes.bool,
+  isDevPre: PropTypes.object,
+};
+HeaderContainer.defaultProps = {
+  includeSkipToSidebar: false,
+  showCancelButton: false,
+  skipToContentId: null,
+  isIESupportPage: false,
+};
+
+export default HeaderContainer;

package/components/Header/HeaderLogo.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { useHeaderState } from "./hooks";
+
+const HeaderLogo = (isDevPre) => {
+  const { closeMenus, RouterLink } = useHeaderState();
+  const showDevPre = isDevPre.isDevPre;
+  if (showDevPre) {
+    return (
+      <div className="header-logo">
+        <img
+          className="qpp-logo"
+          src="/images/qpp_logo_rgb_color.png"
+          alt="QPP logo"
+        />
+      </div>
+    );
+  }
+  if (RouterLink) {
+    return (
+      <RouterLink
+        className="header-logo"
+        to="/"
+        onClick={closeMenus}
+        data-track-category="HeaderNav"
+        data-track-action="OpenQPPHome"
+        data-track-label="Quality Payment Program"
+      >
+        <img
+          className="qpp-logo"
+          src="/images/qpp_logo_rgb_color.png"
+          alt="QPP logo"
+        />
+      </RouterLink>
+    );
+  }
+
+  return (
+    <a
+      className="header-logo"
+      href="/"
+      data-track-category="HeaderNav"
+      data-track-action="OpenQPPHome"
+      data-track-label="Quality Payment Program"
+    >
+      <img
+        className="qpp-logo"
+        src="/images/qpp_logo_rgb_color.png"
+        alt="QPP logo"
+      />
+    </a>
+  );
+};
+
+HeaderLogo.propTypes = {
+  isDevPre: PropTypes.object,
+};
+
+export default HeaderLogo;

package/components/Header/HeaderMenuButton.js

@@ -0,0 +1,50 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { useHeaderState } from "./hooks";
+import NavigationButtonIcon from "./NavigationButtonIcon";
+import { setUtagLink } from "./utag-helpers";
+
+const HeaderMenuButton = ({ href, name }) => {
+  const { RouterLink, closeMenus } = useHeaderState();
+  if (RouterLink) {
+    return (
+      <RouterLink
+        className="btn btn-navigation inverse-hover header-menu-btn"
+        to={href}
+        onClick={() => {
+          closeMenus();
+          setUtagLink("main navbar", "click", href);
+        }}
+        data-track-category="TopNav"
+        data-track-action="click"
+        data-track-label={name}
+      >
+        {name}
+        <NavigationButtonIcon />
+      </RouterLink>
+    );
+  }
+  return (
+    <a
+      className="btn btn-navigation inverse-hover header-menu-btn"
+      href={href}
+      data-track-category="TopNav"
+      data-track-action="click"
+      data-track-label={name}
+      onClick={() => {
+        setUtagLink("main navbar", "click", href);
+      }}
+    >
+      {name}
+      <NavigationButtonIcon />
+    </a>
+  );
+};
+
+HeaderMenuButton.propTypes = {
+  href: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default HeaderMenuButton;