qpp-style 2.1.13 → 2.2.0-sm.0

package/components/Header/NavigationButtonIcon.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+const NavigationButtonIcon = () => (
+  <svg
+    className="btn-navigation-icon"
+    width="15px"
+    height="24px"
+    viewBox="0 0 15 24"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g
+        className="chevron-icon"
+        transform="translate(-20.000000, -114.000000)"
+        fillRule="nonzero"
+      >
+        <g
+          className="chevron-right"
+          transform="translate(20.000000, 114.000000)"
+        >
+          <path d="M14.6682692,12.2740385 L3.96634615,22.9759615 C3.78365385,23.1586538 3.56730769,23.25 3.31730769,23.25 C3.06730769,23.25 2.85096154,23.1586538 2.66826923,22.9759615 L0.274038462,20.5817308 C0.0913461538,20.3990385 0,20.1826923 0,19.9326923 C0,19.6826923 0.0913461538,19.4663462 0.274038462,19.2836538 L7.93269231,11.625 L0.274038462,3.96634615 C0.0913461538,3.78365385 0,3.56730769 0,3.31730769 C0,3.06730769 0.0913461538,2.85096154 0.274038462,2.66826923 L2.66826923,0.274038462 C2.85096154,0.0913461538 3.06730769,0 3.31730769,0 C3.56730769,0 3.78365385,0.0913461538 3.96634615,0.274038462 L14.6682692,10.9759615 C14.8509615,11.1586538 14.9423077,11.375 14.9423077,11.625 C14.9423077,11.875 14.8509615,12.0913462 14.6682692,12.2740385 Z"></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default NavigationButtonIcon;

package/components/Header/default-content.json

@@ -0,0 +1,280 @@
+[
+  {
+    "name": "About",
+    "subtitle": "The Quality Payment Program",
+    "columns": [
+      [
+        {
+          "items": [
+            {
+              "name": "QPP Overview",
+              "type": "link",
+              "href": "/about/qpp-overview"
+            }, 
+            {
+              "name": "HCD Research Program",
+              "type": "link",
+              "href": "/about/hcd-research"
+            }
+          ]
+        }
+      ]
+    ]
+  }, 
+  {
+    "name": "MIPS",
+    "subtitle": "Merit-based Incentive Payment System",
+    "columns": [
+      [
+        {
+          "heading": "Eligibility",
+          "items": [
+            {
+              "name": "How MIPS Eligibility is Determined",
+              "type": "link",
+              "href": "/mips/how-eligibility-is-determined"
+            }, 
+            {
+              "name": "MIPS Eligibility Determination Periods",
+              "type": "link",
+              "href": "/mips/mips-eligibility-determination-periods"
+            }, 
+            {
+              "name": "Check Participation Status",
+              "type": "button",
+              "href": "/participation-lookup"
+            }
+          ]
+        }, 
+        {
+          "heading": "Reporting Factors",
+          "items": [
+            {
+              "name": "Reporting Factors Overview",
+              "type": "link",
+              "href": "/mips/reporting-factors-overview"
+            }, 
+            {
+              "name": "Special Status",
+              "type": "link",
+              "href": "/mips/special-statuses"
+            }, 
+            {
+              "name": "Exception Applications",
+              "type": "link",
+              "href": "/mips/exception-applications"
+            }, 
+            {
+              "name": "How to Register for CMS Web Interface and the CAHPS for MIPS Survey",
+              "type": "link",
+              "href": "/mips/how-to-register-for-CMS-WI-and-CAHPS"
+            }
+          ]
+        }
+      ], 
+      [
+        {
+          "heading": "Participation",
+          "items": [
+            {
+              "name": "Participation Options Overview",
+              "type": "link",
+              "href": "/mips/overview"
+            }, 
+            {
+              "name": "Individual or Group Participation",
+              "type": "link",
+              "href": "/mips/individual-or-group-participation"
+            }, 
+            {
+              "name": "Virtual Group Participation",
+              "type": "link",
+              "href": "/mips/virtual-group-participation"
+            }, 
+            {
+              "name": "APM Entity Participation",
+              "type": "link",
+              "href": "/mips/apm-entity-participation"
+            }
+          ]
+        }, 
+        {
+          "heading": "Traditional MIPS Requirements",
+          "items": [
+            {
+              "name": "Quality Requirements",
+              "type": "link",
+              "href": "/mips/quality-requirements"
+            }, 
+            {
+              "name": "Promoting Interoperability Requirements",
+              "type": "link",
+              "href": "/mips/promoting-interoperability"
+            }, 
+            {
+              "name": "Improvements Activity Requirements",
+              "type": "link",
+              "href": "/mips/improvement-activities"
+            }, 
+            {
+              "name": "Cost Requirements",
+              "type": "link",
+              "href": "/mips/cost"
+            }, 
+            {
+              "name": "Explore Measures & Activities",
+              "type": "button",
+              "href": "/mips/explore-measures"
+            }
+          ]
+        }
+      ], 
+      [
+        {
+          "heading": "Reporting Options",
+          "items": [
+            {
+              "name": "Reporting Options Overview",
+              "type": "link",
+              "href": "/mips/reporting-options-overview"
+            }, 
+            {
+              "name": "Traditional MIPS",
+              "type": "link",
+              "href": "/mips/traditional-mips"
+            }, 
+            {
+              "name": "APM Performance Pathway",
+              "type": "link",
+              "href": "/mips/apm-performance-pathway"
+            }, 
+            {
+              "name": "MIPS Value Pathways",
+              "type": "link",
+              "href": "/mips/mips-value-pathways"
+            }, 
+            {
+              "name": "Submit a Candidate MVP",
+              "type": "sublink",
+              "href": "/mips/mips-value-pathways/submit-candidate"
+            }
+          ]
+        }, 
+        {
+          "heading": "APM Performance Pathway Requirements",
+          "items": [
+            {
+              "name": "Quality Requirements",
+              "type": "link",
+              "href": "/mips/app-quality-requirements"
+            }, 
+            {
+              "name": "Promoting Interoperability Requirements",
+              "type": "link",
+              "href": "/mips/app-promoting-interoperability"
+            }, 
+            {
+              "name": "Improvements Activities Requirements",
+              "type": "link",
+              "href": "/mips/app-improvement-activities"
+            }
+          ]
+        }
+      ]
+    ]
+  }, 
+  {
+    "name": "APMs",
+    "subtitle": "Alternative Payment Models",
+    "columns": [
+      [
+        {
+          "items": [
+            {
+              "name": "APMs Overview",
+              "type": "link",
+              "href": "/apms/overview"
+            }, 
+            {
+              "name": "MIPS APMs",
+              "type": "link",
+              "href": "/apms/mips-apms"
+            }, 
+            {
+              "name": "Advanced APMs",
+              "type": "link",
+              "href": "/apms/advanced-apms"
+            }, 
+            {
+              "name": "All-Payer Advanced APMs",
+              "type": "link",
+              "href": "/apms/all-payer-advanced-apms"
+            }, 
+            {
+              "name": "APM Determination Period",
+              "type": "link",
+              "href": "/apms/apm-determination-periods"
+            }, 
+            {
+              "name": "Check Participation Status",
+              "type": "button",
+              "href": "/participation-lookup"
+            }
+          ]
+        }
+      ]
+    ]
+  }, 
+  {
+    "name": "Resources",
+    "subtitle": "Help, Support and Resources",
+    "columns": [
+      [
+        {
+          "items": [
+            {
+              "name": "COVID-19 Response",
+              "type": "link",
+              "href": "/resources/covid19"
+            }, 
+            {
+              "name": "QPP Timeline and Important Deadlines",
+              "type": "link",
+              "href": "/resources/deadlines"
+            }, 
+            {
+              "name": "Resource Library",
+              "type": "link",
+              "href": "/resources/resource-library"
+            }, 
+            {
+              "name": "Glossary",
+              "type": "link",
+              "href": "/glossary"
+            }, 
+            {
+              "name": "Webinar Library",
+              "type": "link",
+              "href": "/resources/webinars"
+            }, 
+            {
+              "name": "Help & Support",
+              "type": "link",
+              "href": "/resources/help-and-support"
+            }, 
+            {
+              "name": "Small, Underserved, and Rural Practices",
+              "type": "link",
+              "href": "/resources/small-underserved-rural-practices"
+            }, 
+            {
+              "name": "Developer Tools",
+              "type": "link",
+              "href": "/developers"
+            }
+          ]
+        }
+      ]
+    ]
+  }
+]

package/components/Header/header.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { render } from "react-dom";
+import HeaderUI from "./HeaderUI.jsx";
+
+/**
+ * Renders the QPP Header content.
+ */
+export default class Header {
+  /**
+   * @param {Object} options - An object containing content and config data
+   * @param {Boolean} options.isLoginEnabled
+   * @param {String} options.skipToContentId - The HTML ID of main content
+   * @param {Boolean} options.includeSkipToSidebar
+   * @param {Boolean} options.showCancelButton
+   * @param {Boolean} options.showCovidLink
+   * @param {Boolean} options.isIESupportPage
+   * @param {HTMLElement} options.rootElement - Elem inside which to render
+   */
+  constructor(options) {
+    render(
+      <HeaderUI
+        isLoginEnabled={options.isLoginEnabled}
+        skipToContentId={options.skipToContentId}
+        includeSkipToSidebar={options.includeSkipToSidebar}
+        showCancelButton={options.showCancelButton}
+        performanceYear={options.performanceYear}
+        feedbackPerformanceYear={options.feedbackPerformanceYear}
+        fbpPerformanceYear={options.fbpPerformanceYear}
+        showPhysicianCompareLink={options.showPhysicianCompareLink}
+        showFacilityBasedPreviewLink={options.showFacilityBasedPreviewLink}
+        showCovidLink={options.showCovidLink}
+        showMaqi={options.showMaqi}
+        isDevPre={options.isDevPre}
+        content={options.content}
+        isIESupportPage={options.isIESupportPage}
+      />,
+      options.rootElement
+    );
+  }
+}

package/components/Header/hooks.js

@@ -0,0 +1,66 @@
+import React, { createContext, useState, useEffect, useContext } from "react";
+import PropTypes from "prop-types";
+
+export function useWindowWidth() {
+  const [windowSize, setWindowSize] = useState(undefined);
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize(window.innerWidth);
+    }
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowSize;
+}
+
+export const HeaderStateContext = createContext(null);
+
+export const HeaderStateProvider = ({
+  children,
+  RouterLink,
+  headerContent, // allow header content from api request available to all child components
+}) => {
+  const [currentOpenMenu, setCurrentOpenMenu] = useState("");
+
+  const handleToggleMenu = (name) => {
+    if (currentOpenMenu === name) {
+      return setCurrentOpenMenu("");
+    }
+    return setCurrentOpenMenu(name);
+  };
+
+  const closeMenus = () => setCurrentOpenMenu("");
+
+  return (
+    <HeaderStateContext.Provider
+      value={{
+        currentOpenMenu,
+        handleToggleMenu,
+        closeMenus,
+        RouterLink,
+        headerContent,
+      }}
+    >
+      {children}
+    </HeaderStateContext.Provider>
+  );
+};
+
+HeaderStateProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  RouterLink: PropTypes.func,
+  headerContent: PropTypes.object,
+};
+
+HeaderStateProvider.defaultProps = {
+  RouterLink: null,
+};
+
+export const useHeaderState = () => {
+  const context = useContext(HeaderStateContext);
+  if (context === undefined) {
+    throw new Error("useHeaderState must be used within a HeaderStateProvider");
+  }
+  return context;
+};

package/components/Header/utag-helpers.js

@@ -0,0 +1,9 @@
+export const setUtagLink = (eventCategory, eventAction, eventLabel) =>
+  window?.utag?.link({
+    ga_event_category: eventCategory,
+    ga_event_action: eventAction,
+    ga_event_label: eventLabel,
+    page_title: `${window.document.title}`,
+    page_url: `${window.location.pathname}`,
+    event: "trackEvent",
+  });

package/components/Infotip/Infotip.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+import PropTypes from "prop-types";
+import InfotipContent from "./InfotipContent";
+import InfotipIcon from "./InfotipIcon";
+
+const BUTTON_SIZE = "16px";
+
+const buttonStyle = {
+  background: "transparent",
+  border: 0,
+  padding: 0,
+  width: BUTTON_SIZE,
+  height: BUTTON_SIZE,
+  WebkitTouchCallout: "none",
+  WebkitUserSelect: "none",
+  userSelect: "none",
+};
+
+// TODO: We may want to improve this by tracking touch positions to ensure
+// that a 'touchend' event must be reasonably close to the tooltip target.
+const touchHandlers = {
+  onTouchStart: (e) => {
+    e.stopPropagation();
+  },
+  onTouchEnd: (e) => {
+    if (document.activeElement !== e.currentTarget) {
+      e.preventDefault();
+      e.currentTarget.focus();
+    } else {
+      e.preventDefault();
+      e.currentTarget.blur();
+    }
+  },
+};
+
+/**
+ * Tooltip with styled information icon
+ */
+const Infotip = ({ ariaLabel, label, lightIcon, ...props }) => (
+  <InfotipContent label={label} {...props}>
+    <button
+      type="button"
+      aria-label={ariaLabel}
+      style={buttonStyle}
+      {...touchHandlers}
+    >
+      <InfotipIcon
+        lightIcon={lightIcon}
+        width={BUTTON_SIZE}
+        height={BUTTON_SIZE}
+        aria-hidden
+        style={{ float: "left" }}
+      />
+    </button>
+  </InfotipContent>
+);
+
+Infotip.propTypes = {
+  label: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string,
+  lightIcon: PropTypes.bool,
+  DEBUG_STYLE: PropTypes.bool,
+};
+
+Infotip.defaultProps = {
+  ariaLabel: "Information",
+  lightIcon: false,
+  DEBUG_STYLE: undefined,
+};
+
+export default Infotip;

package/components/Infotip/InfotipContent.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  Tooltip as TooltipAriaKit,
+  TooltipAnchor,
+  TooltipArrow,
+  useTooltipState,
+} from "ariakit/tooltip";
+
+const TEXT_COLOR = "#FFF";
+const BACKGROUND_COLOR = "#333";
+
+const InfotipContent = ({ children, label }) => {
+  const tooltip = useTooltipState();
+
+  const cssStyles = {
+    maxWidth: "300px",
+    padding: "8px",
+    borderRadius: "4px",
+    fontSize: "0.9rem",
+    backgroundColor: BACKGROUND_COLOR,
+    color: TEXT_COLOR,
+  };
+  return (
+    <>
+      <TooltipAnchor as={"span"} state={tooltip} className="tooltip-anchor">
+        {children}
+      </TooltipAnchor>
+      <TooltipAriaKit
+        state={tooltip}
+        className="tooltip-content"
+        style={cssStyles}
+      >
+        {label}
+        <TooltipArrow />
+      </TooltipAriaKit>
+    </>
+  );
+};
+
+InfotipContent.propTypes = {
+  children: PropTypes.node.isRequired,
+  label: PropTypes.node.isRequired,
+};
+
+export default InfotipContent;

package/components/Infotip/InfotipIcon.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const InfotipIcon = ({ lightIcon, ...props }) => (
+  <svg
+    width="20px"
+    height="20px"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g fill="none" fillRule="evenodd">
+      <path
+        d="M9.721 19.158c-4.947 0-8.973-4.126-8.973-9.196C.748 4.892 4.774.766 9.72.766c4.948 0 8.974 4.126 8.974 9.196 0 5.07-4.026 9.196-8.974 9.196z"
+        fill="#2EB1ED"
+        fillRule="nonzero"
+      />
+      <path
+        d="M9.721 0C4.361 0 0 4.469 0 9.962c0 5.493 4.36 9.962 9.721 9.962 5.36 0 9.722-4.469 9.722-9.962C19.443 4.469 15.082 0 9.72 0z"
+        fill={lightIcon ? "#FFF" : "#0073C8"}
+      />
+      <path
+        d="M9.721 14.765c-.206 0-.374.112-.374.25v.5c0 .138.168.25.374.25.207 0 .374-.112.374-.25v-.5c0-.138-.167-.25-.374-.25zM9.764 4.706H9.72c-.792 0-1.536.29-2.1.821a2.767 2.767 0 0 0-.89 2.03c0 .197.166.356.373.356s.374-.159.374-.356c0-.577.237-1.118.668-1.523a2.268 2.268 0 0 1 1.607-.615c1.182.016 2.195.98 2.211 2.107.011.743-.373 1.427-1.028 1.83-.995.61-1.589 1.691-1.589 2.89v1.013c0 .197.168.357.374.357.207 0 .374-.16.374-.357v-1.013c0-.941.477-1.82 1.246-2.292.873-.537 1.386-1.448 1.371-2.438-.022-1.527-1.345-2.788-2.948-2.81z"
+        stroke={lightIcon ? "#0073C8" : "#FFF"}
+        strokeWidth=".5"
+        fill={lightIcon ? "#0073C8" : "#FFF"}
+        fillRule="nonzero"
+      />
+    </g>
+  </svg>
+);
+
+export default InfotipIcon;
+
+InfotipIcon.propTypes = {
+  lightIcon: PropTypes.bool,
+};
+
+InfotipIcon.defaultProps = {
+  lightIcon: false,
+};

package/components/Infotip/index.js

@@ -0,0 +1,3 @@
+import Infotip from "./Infotip";
+
+export default Infotip;

package/components/Link/index.js

@@ -0,0 +1,61 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const VARIANTS = ["white", "gray"];
+
+const DSLink = ({
+  className,
+  href,
+  download,
+  ariaLabel,
+  onClick,
+  children,
+  variant,
+  ...rest
+}) => {
+  let linkClass = "qpp-c-link";
+  if (VARIANTS.includes(variant)) {
+    variant === "gray"
+      ? (linkClass = linkClass.concat(" ", "qpp-u-color--gray-60"))
+      : (linkClass = linkClass.concat(" ", `qpp-u-color--${variant}`));
+  }
+
+  if (className) {
+    linkClass = linkClass.concat(" ", className);
+  }
+
+  return (
+    <a
+      aria-label={ariaLabel}
+      className={linkClass || ""}
+      href={href}
+      download={download}
+      onClick={onClick}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+};
+
+DSLink.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  href: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  onClick: PropTypes.func,
+  download: PropTypes.bool,
+  variant: PropTypes.oneOf(VARIANTS),
+};
+
+DSLink.defaultProps = {
+  children: null,
+  className: "",
+  href: "",
+  ariaLabel: null,
+  onClick: () => null,
+  download: false,
+  variant: null,
+};
+
+export default DSLink;