qpp-style 0.0.8 → 0.0.10

package/components/Header/default-content.json

@@ -1,57 +1,126 @@
 [
   {
-    "name": "MIPS",
-    "subtitle": "Merit-based incentive Payment System",
+    "name": "About",
+    "subtitle": "The Quality Payment Program",
     "columns": [
       [
         {
-          "heading": "Participation",
           "items": [
             {
-              "name": "MIPS Overview",
+              "name": "QPP Overview",
               "type": "link",
-              "href": "/mips/overview"
-            },
+              "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 Value Pathways",
+              "name": "MIPS Eligibility Determination Periods",
               "type": "link",
-              "href": "/mips/mips-value-pathways"
-            },
+              "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": "Performance Category",
+          "heading": "Traditional MIPS Requirements",
           "items": [
             {
-              "name": "Quality Measures",
+              "name": "Quality Requirements",
               "type": "link",
-              "href": "/mips/quality-measures"
-            },
+              "href": "/mips/quality-requirements"
+            }, 
             {
-              "name": "Promoting Interoperability Measures",
+              "name": "Promoting Interoperability Requirements",
               "type": "link",
               "href": "/mips/promoting-interoperability"
-            },
+            }, 
             {
-              "name": "Improvement Activities",
+              "name": "Improvements Activity Requirements",
               "type": "link",
               "href": "/mips/improvement-activities"
-            },
+            }, 
             {
-              "name": "Cost Measures",
+              "name": "Cost Requirements",
               "type": "link",
               "href": "/mips/cost"
-            },
+            }, 
             {
               "name": "Explore Measures & Activities",
               "type": "button",
@@ -59,46 +128,61 @@
             }
           ]
         }
-      ],
+      ], 
       [
         {
-          "heading": "Reporting",
+          "heading": "Reporting Options",
           "items": [
             {
               "name": "Reporting Options Overview",
               "type": "link",
               "href": "/mips/reporting-options-overview"
-            },
+            }, 
             {
-              "name": "Individual or Group Participation",
-              "type": "sublink",
-              "href": "/mips/individual-or-group-participation"
-            },
+              "name": "Traditional MIPS",
+              "type": "link",
+              "href": "/mips/traditional-mips"
+            }, 
             {
-              "name": "How to Register for CMS Web Interface and the CAHPS for MIPS Survey",
-              "type": "sublink",
-              "href": "/mips/individual-or-group-participation/about-group-registration"
-            },
+              "name": "APM Performance Pathway",
+              "type": "link",
+              "href": "/mips/apm-performance-pathway"
+            }, 
             {
-              "name": "Reporting Factors Overview",
+              "name": "MIPS Value Pathways",
               "type": "link",
-              "href": "/mips/reporting-factors-overview"
-            },
+              "href": "/mips/mips-value-pathways"
+            }, 
             {
-              "name": "Special Statuses",
+              "name": "Submit a Candidate MVP",
               "type": "sublink",
-              "href": "/mips/special-statuses"
-            },
+              "href": "/mips/mips-value-pathways/submit-candidate"
+            }
+          ]
+        }, 
+        {
+          "heading": "APM Performance Pathway Requirements",
+          "items": [
             {
-              "name": "Exception Applications",
-              "type": "sublink",
-              "href": "/mips/exception-applications"
+              "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",
@@ -110,22 +194,27 @@
               "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",
@@ -135,71 +224,53 @@
         }
       ]
     ]
-  },
+  }, 
   {
-    "name": "About",
-    "subtitle": "The Quality Payment Program",
+    "name": "Resources",
+    "subtitle": "Help, Support and Resources",
     "columns": [
       [
         {
-          "heading": "Support Resources",
           "items": [
-            {
-              "name": "QPP Overview",
-              "type": "link",
-              "href": "/about/qpp-overview"
-            },
             {
               "name": "COVID-19 Response",
               "type": "link",
-              "href": "/about/covid19"
-            },
+              "href": "/resources/covid19"
+            }, 
             {
-              "name": "Resource Library",
+              "name": "QPP Timeline and Important Deadlines",
               "type": "link",
-              "href": "/about/resource-library"
-            },
+              "href": "/resources/deadlines"
+            }, 
             {
-              "name": "Webinar Library",
+              "name": "Resource Library",
               "type": "link",
-              "href": "/about/webinars"
-            },
+              "href": "/resources/resource-library"
+            }, 
             {
               "name": "Glossary",
               "type": "link",
               "href": "/glossary"
-            },
+            }, 
             {
-              "name": "Help and Support",
+              "name": "Webinar Library",
               "type": "link",
-              "href": "/about/help-and-support"
-            },
+              "href": "/resources/webinars"
+            }, 
             {
-              "name": "Small, Underserved, and Rural Practices",
+              "name": "Help & Support",
               "type": "link",
-              "href": "/about/small-underserved-rural-practices"
-            },
+              "href": "/resources/help-and-support"
+            }, 
             {
-              "name": "HCD Research Program",
-              "type": "link",
-              "href": "/about/hcd-research"
-            }
-          ]
-        }
-      ],
-      [
-        {
-          "heading": "QPP Timelines",
-          "items": [
-            {
-              "name": "Timeline and Important Deadlines",
+              "name": "Small, Underserved, and Rural Practices",
               "type": "link",
-              "href": "/about/deadlines"
-            },
+              "href": "/resources/small-underserved-rural-practices"
+            }, 
             {
-              "name": "Eligibility Determination Periods and Snapshots",
+              "name": "Developer Tools",
               "type": "link",
-              "href": "/about/eligibility-determination-periods-and-snapshots"
+              "href": "/developers"
             }
           ]
         }

package/components/Header/header.js

@@ -13,6 +13,7 @@ export default class Header {
    * @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) {
@@ -31,6 +32,7 @@ export default class Header {
         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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Tooltip from '../Tooltip';
+import InfotipContent from './InfotipContent';
 import InfotipIcon from './InfotipIcon';
 
 const BUTTON_SIZE = '16px';
@@ -16,10 +16,6 @@ const buttonStyle = {
   userSelect: 'none',
 };
 
-// Use basic touch handlers for mobile "tap-to-open" ui.  Mobile touch
-// is currently not supported by @reach/tooltip; this may change in future.
-// Leverages @reach/tooltip "focus" behavior to open tooltip on tap,
-// and close tooltip on second tap or loss of focus.
 // 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 = {
@@ -40,11 +36,11 @@ const touchHandlers = {
 /**
  * Tooltip with styled information icon
  */
-const Infotip = ({ label, lightIcon, ...props }) => (
-  <Tooltip label={label} {...props}>
+const Infotip = ({ ariaLabel, label, lightIcon, ...props }) => (
+  <InfotipContent label={label} {...props}>
     <button
       type="button"
-      aria-label="Information"
+      aria-label={ariaLabel}
       style={buttonStyle}
       {...touchHandlers}
     >
@@ -56,7 +52,7 @@ const Infotip = ({ label, lightIcon, ...props }) => (
         style={{ float: 'left' }}
       />
     </button>
-  </Tooltip>
+  </InfotipContent>
 );
 
 Infotip.propTypes = {
@@ -67,7 +63,7 @@ Infotip.propTypes = {
 };
 
 Infotip.defaultProps = {
-  ariaLabel: undefined,
+  ariaLabel: 'Information',
   lightIcon: false,
   DEBUG_STYLE: undefined,
 };

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

@@ -17,13 +17,13 @@ const InfotipIcon = ({ lightIcon, ...props }) => (
       />
       <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' : '#04838A'}
+        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 ? '#04838A' : '#FFF'}
+        stroke={lightIcon ? '#0073C8' : '#FFF'}
         strokeWidth=".5"
-        fill={lightIcon ? '#04838A' : '#FFF'}
+        fill={lightIcon ? '#0073C8' : '#FFF'}
         fillRule="nonzero"
       />
     </g>

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;