qpp-style 2.0.1 → 2.0.2-sm.2

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 SessionDialogUI from '../SessionDialogUI';
+import HeaderMenuItem from './HeaderMenuItem';
+
+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 (
+      <>
+        <SessionDialogUI />
+        <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,74 @@
+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,
+}) => {
+  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 />
+        {children}
+      </header>
+    </>
+  );
+};
+
+HeaderContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  includeSkipToSidebar: PropTypes.bool,
+  showCancelButton: PropTypes.bool,
+  skipToContentId: PropTypes.string,
+  isIESupportPage: PropTypes.bool,
+};
+HeaderContainer.defaultProps = {
+  includeSkipToSidebar: false,
+  showCancelButton: false,
+  skipToContentId: null,
+  isIESupportPage: false,
+};
+
+export default HeaderContainer;

package/components/Header/HeaderLogo.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { useHeaderState } from './hooks';
+
+const HeaderLogo = () => {
+  const { closeMenus, RouterLink } = useHeaderState();
+  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>
+  );
+};
+
+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;