@madie/madie-design-system 1.0.0

package/components/SideNav/UI/SideNavUI.jsx

@@ -0,0 +1,333 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import SVGInline from 'react-svg-inline';
+
+import { withGetConfig } from '../../hooks/useGetConfig';
+import { LevelOneContent, LevelTwoContent } from '../Content';
+import {
+  NavLinkContainer,
+  NavLinkInline,
+  NavLinkDrawer,
+  NavLinkToggle,
+} from '../Links';
+import AnimationGroup from '../AnimationGroup/AnimationGroup';
+import { PracticeDetails, IndividualDetails } from '../Details';
+import { ScoreChart } from '../Chart';
+import SanitizedContent from '../../SanitizedContent';
+import * as SvgComponents from '../../../lib/SvgComponents.jsx';
+import SVGIcons from '../../../lib/svg-definitions.svg';
+import CmsSwitchLink from '../Links/CmsSwitchLink';
+import defaultContent from './default-content';
+
+const SideNavUI = ({
+  chartData,
+  config,
+  currentLevel,
+  isAltStyle,
+  isExpanded,
+  items,
+  onCollapsed,
+  onExpanded,
+  performanceYear,
+  showReportingLinks,
+  svgIcons,
+  result,
+}) => {
+  const [isExpandedState, setIsExpandedState] = useState(isExpanded);
+  const [itemsState, setItemsState] = useState(items);
+  const [currentLevelState, setCurrentLevelState] = useState(currentLevel);
+
+  const collapseRef = useRef(null);
+
+  const expand = () => {
+    setIsExpandedState(true);
+    if (onExpanded) {
+      onExpanded();
+    }
+  };
+
+  const collapse = () => {
+    setIsExpandedState(false);
+    if (onCollapsed) {
+      onCollapsed();
+    }
+  };
+
+  const toggleExpanded = () => {
+    isExpandedState ? collapse() : expand();
+  };
+
+  const getLevelContent = () => {
+    return (
+      {
+        2: (
+          <LevelTwoContent
+            showReportingLinks={showReportingLinks}
+            isExpanded={isExpandedState}
+            chartData={chartData}
+            config={config}
+          />
+        ),
+      }[currentLevelState] || (
+        <LevelOneContent
+          levelOneContent={result?.content}
+          isExpanded={isExpandedState}
+          config={config}
+        />
+      )
+    );
+  };
+
+  const getDynamicContent = (contentItems, className, recursionId) => {
+    const { openDrawersByDefault, linkActiveFunc, linkCallback, useTooltips } =
+      config;
+    const linkClass = isExpandedState ? 'link-inline' : 'link-collapsed';
+    const containerRecursionId = recursionId || 0;
+
+    const getDynamicIcon = (icon) => {
+      const Component = SvgComponents[icon];
+      return Component ? <Component /> : null;
+    };
+
+    const hasDarkerBackground = (darkerBackground) => {
+      return darkerBackground ? 'hr-smaller-vertical-spacing' : '';
+    }
+
+    const itemsMarkup = (contentItems || []).map((item, index) => {
+      const key = `${JSON.stringify(item)}-${index}-${containerRecursionId}`;
+      return (
+        {
+          divider: (
+            <AnimationGroup display={isExpandedState} key={key} darkerBackground={item.darkerBackground}>
+              <hr className={`${hasDarkerBackground(item.darkerBackground)}`}/>
+            </AnimationGroup>
+          ),
+          container: getDynamicContent(
+            item.items,
+            item.className,
+            containerRecursionId + 1
+          ),
+          linkBack: (
+            <AnimationGroup display={isExpandedState} key={key}>
+              <NavLinkInline
+                className="link-back"
+                icon={getDynamicIcon('ChevronLeft')}
+                url={item.url}
+                label={item.label}
+                linkCallback={linkCallback}
+                showLabel={true}
+                useTooltips={useTooltips}
+              />
+            </AnimationGroup>
+          ),
+          linkHome: (
+            <AnimationGroup display={isExpandedState} key={key}>
+              <NavLinkInline
+                className="account-home-link"
+                icon={getDynamicIcon(item?.icon)}
+                url={item.url}
+                label={item.label}
+                linkCallback={linkCallback}
+                showLabel={true}
+                useTooltips={useTooltips}
+              />
+            </AnimationGroup>
+          ),
+          practiceDetails: (
+            <AnimationGroup
+              display={isExpandedState}
+              className={'details'}
+              key={key}
+            >
+              <PracticeDetails
+                practiceName={item.practiceName}
+                {...(!item.practiceTin
+                  ? {}
+                  : { practiceTin: item.practiceTin })}
+                {...(!item.apmEntityId
+                  ? {}
+                  : { apmEntityId: item.apmEntityId })}
+                {...(!item.vgId ? {} : { vgId: item.vgId })}
+                {...(!item.cpcPlusId ? {} : { cpcPlusId: item.cpcPlusId })}
+                {...(!item.pcfId ? {} : { pcfId: item.pcfId })}
+              />
+            </AnimationGroup>
+          ),
+          individualDetails: (
+            <AnimationGroup display={isExpandedState} key={key}>
+              <IndividualDetails
+                individualName={item.individualName}
+                individualNpi={item.individualNpi}
+              />
+            </AnimationGroup>
+          ),
+          linkDrawer: (
+            <NavLinkDrawer
+              key={key}
+              isExpanded={isExpandedState}
+              isAlwaysOpen={item.isAlwaysOpen}
+              openByDefault={openDrawersByDefault}
+              rightIcon="chevron-down"
+              leftIcon={getDynamicIcon(item?.icon)}
+              className={linkClass}
+              label={item.label}
+              linkActiveFunc={linkActiveFunc}
+              linkCallback={linkCallback}
+              listOfLinks={item.items}
+              url={item.url}
+              sidebarExpand={expand}
+              isHighlighted={item.isHighlighted}
+              darkerBackground={item.darkerBackground}
+              leftBorderHighlightDisabled={item.leftBorderHighlightDisabled}
+              largerDrawerBottomPadding={item.largerDrawerBottomPadding}
+            />
+          ),
+          custom: (
+            <AnimationGroup display={isExpandedState} key={key}>
+              <SanitizedContent
+                html={item.content}
+                customClassName={item.customClassName}
+              />
+            </AnimationGroup>
+          ),
+          chart: (
+            <AnimationGroup display={isExpandedState} key={key}>
+              <ScoreChart
+                chartData={item.chartData}
+                linkCallback={linkCallback}
+                performanceYear={performanceYear}
+              />
+            </AnimationGroup>
+          ),
+          switchLink: (
+            <AnimationGroup display={isExpandedState} key={key}>
+              <CmsSwitchLink
+                linkCallback={linkCallback}
+                label={item.label}
+                url={item.url}
+              />
+            </AnimationGroup>
+          ),
+        }[item.type] || (
+          <NavLinkInline
+            key={key}
+            icon={getDynamicIcon(item?.icon)}
+            className={item.className ? item.className : linkClass}
+            url={item.url}
+            label={item.label}
+            linkCallback={linkCallback}
+            showLabel={isExpandedState}
+            disabled={item.disabled}
+            useTooltips={useTooltips}
+            target={item.target}
+          />
+        )
+      );
+    });
+
+    if (className === 'link-container') {
+      return (
+        <div
+          className="animation-flat"
+          key={`nav-link-container-${recursionId}`}
+        >
+          <NavLinkContainer
+            listOfLinks={itemsMarkup}
+            linkActiveFunc={linkActiveFunc}
+          />
+        </div>
+      );
+    } else {
+      return <div className={className}>{itemsMarkup}</div>;
+    }
+  };
+
+  const content = itemsState
+    ? getDynamicContent(
+        itemsState,
+        'sidebar-content' + (isAltStyle ? ' alt-style' : '')
+      )
+    : getLevelContent();
+
+  useEffect(() => {
+    setIsExpandedState(isExpanded);
+  }, [isExpanded]);
+
+  useEffect(() => {
+    setCurrentLevelState(currentLevel);
+  }, [currentLevel]);
+
+  useEffect(() => {
+    setItemsState(items);
+  }, [items]);
+
+  return (
+    <aside
+      id="qppSidebar"
+      tabIndex="-1"
+      className={`${isExpandedState ? 'sidebar' : 'sidebar closed'} sidebar-${
+        config.navClassName
+      }`}
+    >
+      <SVGInline svg={svgIcons} />
+      {content}
+      <NavLinkToggle
+        isAltStyle={isAltStyle}
+        collapseRef={collapseRef}
+        isExpanded={isExpandedState}
+        onClick={toggleExpanded}
+      />
+    </aside>
+  );
+};
+
+SideNavUI.propTypes = {
+  currentLevel: PropTypes.number,
+  isExpanded: PropTypes.bool,
+  onExpanded: PropTypes.func,
+  onCollapsed: PropTypes.func,
+  chartData: PropTypes.object,
+  config: PropTypes.object,
+  items: PropTypes.object,
+  isAltStyle: PropTypes.bool,
+  showReportingLinks: PropTypes.bool,
+  performanceYear: PropTypes.string,
+  svgIcons: PropTypes.string,
+  result: PropTypes.shape({
+    content: PropTypes.shape({
+      default: PropTypes.arrayOf(PropTypes.object),
+      devPre: PropTypes.arrayOf(PropTypes.object),
+      internalReviewers: PropTypes.arrayOf(PropTypes.object),
+      viewer: PropTypes.arrayOf(PropTypes.object),
+    }),
+  }),
+};
+
+SideNavUI.defaultProps = {
+  currentLevel: 1,
+  isExpanded: true,
+  onExpanded: () => {},
+  onCollapsed: () => {},
+  chartData: {},
+  config: {},
+  items: null,
+  isAltStyle: false,
+  showReportingLinks: false,
+  performanceYear: '2017',
+  svgIcons: SVGIcons,
+  result: {
+    content: {
+      default: [],
+      devPre: [],
+      internalReviewers: [],
+      viewer: [],
+    },
+  },
+};
+
+export default withGetConfig(SideNavUI, {
+  timeout: 5,
+  url: '/config/side-navigation',
+  localStorageName: 'qpp_side_navigation',
+  defaultContent,
+});

package/components/SideNav/UI/default-content.json

@@ -0,0 +1,99 @@
+{
+  "default": [
+    {
+      "url": "/user/submissions",
+      "label": "Account Home"
+    },
+    {
+      "url": "/user/dashboard",
+      "label": "Eligibility & Reporting"
+    },
+    {
+      "url": "/user/submissions/facility-based-preview",
+      "label": "Facility Based Preview"
+    },
+    {
+      "urlExpressionToMatch": "/user/submissions/feedback/[0-9][0-9][0-9][0-9]",
+      "url": "/user/submissions/feedback",
+      "label": "Performance Feedback"
+    },
+    {
+      "url": "/user/apm-incentive-payments",
+      "label": "APM Incentive Payments"
+    },
+    {
+      "url": "/user/submissions/doctors-clinicians-preview",
+      "label": "Doctors & Clinicians Preview"
+    },
+    {
+      "url": "/user/exception/#/landing",
+      "label": "Exceptions Application"
+    },
+    {
+      "className": "stroke-based-icon",
+      "url": "/user/targeted-review/#/landing",
+      "label": "Targeted Review"
+    },
+    {
+      "url": "/user/submissions/reports",
+      "label": "Reports"
+    },
+    {
+      "url": "/user/manage-access",
+      "label": "Manage Access",
+      "listOfLinks": [
+        {
+          "url": "/user/impersonate",
+          "label": "QPP User Impersonation"
+        },
+        {
+          "url": "/user/self-nomination/#/landing",
+          "label": "Registry/QCDR Self-Nomination",
+          "items": []
+        }
+      ]
+    },
+    {
+      "url": "/resources/help-and-support",
+      "label": "Help and Support"
+    }
+  ],
+  "devPre": [
+    {
+      "url": "/user/applications",
+      "label": "My Applications"
+    },
+    {
+      "url": "/user/test-data",
+      "label": "My Test Data"
+    },
+    {
+      "url": "/user/manage-access",
+      "label": "Manage Access"
+    },
+    {
+      "url": "/developers",
+      "label": "Developer Tools"
+    }
+  ],
+  "internalReviewers": [
+    {
+      "url": "/user/reviewers",
+      "label": "Dashboard Home"
+    },
+    {
+      "url": "/reviewer/exception",
+      "label": "Exceptions Application"
+    },
+    {
+      "className": "stroke-based-icon",
+      "url": "/reviewer/targeted-review",
+      "label": "Targeted Review"
+    },
+    {
+      "url": "/self-nomination",
+      "label": "Self Nomination"
+    }
+  ],
+  "viewer": []
+}

package/components/SideNav/UI/index.js

@@ -0,0 +1,3 @@
+import SideNavUI from './SideNavUI';
+
+export { SideNavUI };

package/components/SideNav/helpers.js

@@ -0,0 +1,49 @@
+const submissionsUrl = '/user/submissions';
+const dashboardUrl = '/user/dashboard';
+const manageUrl = '/user/manage-access';
+const feedbackUrl = `${submissionsUrl}/feedback`;
+const physicianCompareUrl = `${submissionsUrl}/doctors-clinicians-preview`;
+const reportsPortalUrl = `${submissionsUrl}/reports`;
+const facilityBasedPreviewBaseUrl = `${submissionsUrl}/facility-based-preview`;
+
+const performanceFeedbackUrl = (performanceYear) => {
+  if (performanceYear) {
+    return `${feedbackUrl}/${performanceYear}`;
+  } else {
+    return feedbackUrl;
+  }
+};
+
+const facilityBasedPreviewUrl = (performanceYear) => {
+  return `${facilityBasedPreviewBaseUrl}/${performanceYear}`;
+};
+
+const handleNavigation = (e, linkCallbackFunction, label) => {
+  if (linkCallbackFunction) {
+    const { pathname, hash, search } = e.currentTarget;
+    e.preventDefault();
+    e.stopPropagation();
+    linkCallbackFunction(`${pathname}${hash}${search}`);
+  }
+  window?.utag?.link({
+    ga_event_category: 'side navbar',
+    ga_event_action: 'click',
+    ga_event_label: label,
+    page_title: `${window.document.title}`,
+    page_url: `${window.location.pathname}`,
+    event: 'trackEvent',
+  });
+};
+
+module.exports = {
+  submissionsUrl,
+  dashboardUrl,
+  feedbackUrl,
+  manageUrl,
+  physicianCompareUrl,
+  performanceFeedbackUrl,
+  facilityBasedPreviewUrl,
+  handleNavigation,
+  reportsPortalUrl,
+  facilityBasedPreviewBaseUrl,
+};

package/components/SideNav/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { SideNavUI } from './UI';
+
+const SideNav = (options = {}) => {
+  const {
+    rootElement,
+    isExpanded,
+    onExpanded,
+    onCollapsed,
+    chartData,
+    currentLevel,
+    config,
+    feedbackPerformanceYear,
+    fbpPerformanceYear,
+    showDevPreDfpLink,
+    showPhysicianCompareLink,
+    showFacilityBasedPreviewLink,
+    showSelfNomination,
+    showApmIncentivePaymentLink,
+    items,
+    isAltStyle,
+    showReportsPortal,
+    showTargetedReviewLink,
+  } = options;
+
+  const { expand, collapse } = render(
+    <SideNavUI
+      isExpanded={isExpanded}
+      onExpanded={onExpanded}
+      onCollapsed={onCollapsed}
+      chartData={chartData}
+      currentLevel={currentLevel}
+      config={config}
+      feedbackPerformanceYear={feedbackPerformanceYear}
+      fbpPerformanceYear={fbpPerformanceYear}
+      showDevPreDfpLink={showDevPreDfpLink}
+      showPhysicianCompareLink={showPhysicianCompareLink}
+      showFacilityBasedPreviewLink={showFacilityBasedPreviewLink}
+      showSelfNomination={showSelfNomination}
+      showApmIncentivePaymentLink={showApmIncentivePaymentLink}
+      items={items}
+      isAltStyle={isAltStyle}
+      showReportsPortal={showReportsPortal}
+      showTargetedReviewLink={showTargetedReviewLink}
+    />,
+    rootElement
+  );
+
+  return { expand, collapse };
+};
+
+export default SideNav;

package/components/Spinner/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from 'react-dom';
+import DSSpinner from '@cmsgov/design-system/dist/components/Spinner/Spinner';
+
+export default class Spinner {
+  constructor(options) {
+    render(<DSSpinner />, options.rootElement);
+  }
+}

package/components/Tabs/Tab.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MuiTab from '@material-ui/core/Tab';
+
+const Tab = ({ href, ...rest }) => {
+  return (
+    <MuiTab
+      component="a"
+      disableRipple
+      onClick={(e) => {
+        e.preventDefault();
+        if (window.history && href) {
+          window.history.replaceState({}, document.title, href);
+        }
+      }}
+      className="qpp-c-tabs__item"
+      {...rest}
+    />
+  );
+};
+
+Tab.propTypes = {
+  href: PropTypes.string,
+};
+
+export default Tab

package/components/Tabs/TabPanel.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const TabPanel = ({ children, value, id, index, className, disabled }) => {
+  const classes = ['qpp-c-tabs__panel', className].filter(Boolean).join(' ');
+  return (
+    <div
+      role="tabpanel"
+      id={id}
+      aria-hidden={value !== index}
+      aria-labelledby={`qpp-c-tabs__item--${id}`}
+      aria-disabled={disabled}
+      className={classes}
+    >
+      {value === index && children}
+    </div>
+  );
+};
+
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  index: PropTypes.number.isRequired,
+  id: PropTypes.string,
+  value: PropTypes.number.isRequired,
+  disabled: PropTypes.bool,
+};
+
+TabPanel.defaultProps = {
+  index: 0,
+  value: 0,
+};
+
+export default TabPanel;