@madie/madie-design-system 1.0.0

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,52 @@
+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 }) => {
+  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 }}
+    >
+      {children}
+    </HeaderStateContext.Provider>
+  );
+};
+HeaderStateProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  RouterLink: PropTypes.func,
+};
+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,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Tooltip from '../Tooltip';
+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',
+};
+
+// 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 = {
+  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 = ({ label, lightIcon, ...props }) => (
+  <Tooltip label={label} {...props}>
+    <button
+      type="button"
+      aria-label="Information"
+      style={buttonStyle}
+      {...touchHandlers}
+    >
+      <InfotipIcon
+        lightIcon={lightIcon}
+        width={BUTTON_SIZE}
+        height={BUTTON_SIZE}
+        aria-hidden
+        style={{ float: 'left' }}
+      />
+    </button>
+  </Tooltip>
+);
+
+Infotip.propTypes = {
+  label: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string,
+  lightIcon: PropTypes.bool,
+  DEBUG_STYLE: PropTypes.bool,
+};
+
+Infotip.defaultProps = {
+  ariaLabel: undefined,
+  lightIcon: false,
+  DEBUG_STYLE: undefined,
+};
+
+export default Infotip;

package/components/Infotip/Infotip.stories.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import Infotip from './index';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Infotip',
+  component: Infotip,
+  decorators: [
+    withKnobs,
+    (storyFn) => (
+      <div style={{ marginTop: '120px', marginLeft: '100px' }}>{storyFn()}</div>
+    ),
+  ],
+};
+
+export const ExampleInfoTip = () => (
+  <Infotip label="Tooltip Content!" lightIcon={boolean('lightIcon', false)} />
+);
+
+ExampleInfoTip.storyName = 'qpp themed Infotip';
+
+export const PositionCollisionInfotip = () => (
+  <Infotip
+    DEBUG_STYLE
+    label="The DEBUG_STYLE prop is supported by the useTooltip hook and should only
+  be used for development."
+  />
+);
+
+PositionCollisionInfotip.storyName = 'position collision';
+
+export const LongContentInfotip = () => (
+  <div style={{ paddingTop: '50px' }}>
+    <span style={{ marginLeft: '120px' }} />
+    <Infotip
+      DEBUG_STYLE
+      label="Initial Eligibility determination covers data collected from Oct. 1, 2018 to Sept. 31, 2019. Determination was released in Dec. 2019. Final eligibility will be released in Nov. 2020."
+    />
+  </div>
+);
+
+LongContentInfotip.storyName = 'long content';
+
+export const LightIconInfotip = () => (
+  <div style={{ backgroundColor: '#04838A', padding: '20px', width: '16px' }}>
+    <Infotip lightIcon label="Light Icon Infotip" />
+  </div>
+);
+
+LightIconInfotip.storyName = 'alternate light icon';

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' : '#04838A'}
+      />
+      <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'}
+        strokeWidth=".5"
+        fill={lightIcon ? '#04838A' : '#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/Link.stories.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import DSLink from './index';
+import { withKnobs } from '@storybook/addon-knobs';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+
+export default {
+  title: 'Link',
+  component: DSLink,
+  decorators: [withKnobs],
+};
+
+export const LinkLabel = () => <DSLink href="#">Link Label</DSLink>;
+
+export const LinkColorVariants = () => (
+  <>
+    <div className=" qpp-dark-background qpp-u-padding--16">
+      <DSLink href="#" variant="white">
+        Link Label
+      </DSLink>
+    </div>
+    <p>
+      <DSLink href="#" variant="gray">
+        Link Label
+      </DSLink>
+    </p>
+  </>
+);
+
+export const inlineLinks = () => (
+  <div className="qpp-u-padding--16">
+    <p className="qpp-u-width--60">
+      Aenean lacinia <DSLink href="#">inline link</DSLink> nulla sed{' '}
+      <DSLink href="#">inline link</DSLink>. Integer posuere erat a ante
+      venenatis dapibus posuere velit aliquet. Integer posuere erat a ante
+      venenatis <DSLink href="#">inline link</DSLink> dapibus posuere velit
+      aliquet.
+    </p>
+  </div>
+);
+
+export const inlineLinksDarkBackground = () => (
+  <div className="qpp-dark-background qpp-u-padding--16">
+    Aenean lacinia{' '}
+    <DSLink href="#" variant="white">
+      inline link
+    </DSLink>{' '}
+    nulla sed{' '}
+    <DSLink href="#" variant="white">
+      inline link
+    </DSLink>
+    . Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
+    Integer posuere erat a ante venenatis{' '}
+    <DSLink href="#" variant="white">
+      inline link
+    </DSLink>{' '}
+    dapibus posuere velit aliquet.
+  </div>
+);
+
+export const linkWithIcon = () => {
+  const icon = <OpenInNewIcon classes={{ root: 'qpp-icon-mat' }} />;
+  return (
+    <div className="qpp-u-padding--16">
+      <DSLink href="#">
+        Standalone Link With Icon
+        {icon}
+      </DSLink>{' '}
+      <p className=" qpp-u-width--60">
+        Aenean lacinia{' '}
+        <DSLink href="#">
+          inline link
+          {icon}
+        </DSLink>{' '}
+        nulla sed <DSLink href="#">inline link {icon}</DSLink>. Integer posuere
+        erat a ante venenatis dapibus posuere velit aliquet. Integer posuere
+        erat a ante venenatis <DSLink href="#">inline link {icon}</DSLink>{' '}
+        dapibus posuere velit aliquet.
+      </p>
+    </div>
+  );
+};

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;