@madie/madie-design-system 1.0.0

package/components/SideNav/Content/LevelTwoContent.jsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import {
+  NavLinkContainer,
+  NavLinkInline,
+  NavLinkDrawer,
+  NavItemInline,
+} from '../Links';
+import AnimationGroup from '../AnimationGroup/AnimationGroup';
+import { PracticeDetails } from '../Details';
+import { ScoreChart } from '../Chart';
+import PropTypes from 'prop-types';
+import {
+  AccountHomeIcon,
+  DashboardIcon,
+  StarIcon,
+  CliniciansIcon,
+  ScoreIncrease,
+  TooltipIcon,
+} from '../../../lib/SvgComponents.jsx';
+import {
+  submissionsUrl,
+  manageUrl,
+  dashboardUrl,
+  performanceFeedbackUrl,
+} from '../helpers';
+
+const PAST_REPORTING_YEARS = ['2017', '2018'];
+
+const LevelTwoContent = ({
+  isExpanded,
+  chartData,
+  showReportingLinks,
+  config: {
+    chartActive = true,
+    openDrawersByDefault,
+    linkCallback,
+    updateTime,
+    practiceId,
+    practiceName,
+    practiceTin,
+    apmEntityId,
+    isConnectedUsersPage,
+    vgId,
+    roleAbbr,
+    performanceYear,
+    finalFeedbackOpen,
+    isApmPaymentDetailsPage,
+    useTooltips,
+    cpcPlusId,
+    pcfId,
+  } = {},
+}) => {
+  const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
+  let links = [];
+
+  if (isApmPaymentDetailsPage) {
+    const apmDetailsUrl = '/user/apm-incentive-payments/(.*)/practice-details';
+    links.push(
+      <NavItemInline
+        icon={<CliniciansIcon />}
+        className={linkClass}
+        label="Payment Details"
+        urlExpressionToMatch={apmDetailsUrl}
+        showLabel={isExpanded}
+      />
+    );
+  } else {
+    const linkLabel = isConnectedUsersPage
+      ? 'Connected Users'
+      : 'Eligibility & Reporting';
+    let items = [];
+
+    const practiceUrlSegment =
+      performanceYear === '2017' || performanceYear === '2018' || !roleAbbr
+        ? practiceId
+        : practiceId + '_' + roleAbbr;
+
+    if (showReportingLinks && !apmEntityId) {
+      items = [
+        {
+          url: `${submissionsUrl}/reporting/${practiceUrlSegment}/overview`,
+          label: vgId ? 'Virtual Group Reporting' : 'Group Reporting Overview',
+          items: [
+            {
+              url: `${submissionsUrl}/reporting/${practiceUrlSegment}/quality`,
+              label: 'Quality Measures',
+            },
+            {
+              url: `${submissionsUrl}/reporting/${practiceUrlSegment}/aci`,
+              label: 'Promoting Interoperability',
+            },
+            {
+              url: `${submissionsUrl}/reporting/${practiceUrlSegment}/ia`,
+              label: 'Improvement Activities',
+            },
+          ],
+        },
+      ];
+    }
+    links.push(
+      <NavLinkDrawer
+        key="connected-clinicians-link"
+        isAlwaysOpen
+        url={
+          !isConnectedUsersPage
+            ? `${dashboardUrl}`
+            : `${manageUrl}/${practiceId}/connected-users`
+        }
+        isExpanded={isExpanded}
+        openByDefault={openDrawersByDefault}
+        leftIcon={<DashboardIcon />}
+        className={linkClass}
+        label={linkLabel}
+        linkCallback={linkCallback}
+        listOfLinks={
+          !isConnectedUsersPage && [
+            {
+              label: vgId
+                ? 'Virtual Group Details & Participants'
+                : apmEntityId
+                ? 'APM Entity Details & Participants'
+                : 'Practice Details & Clinicians',
+              items: items,
+            },
+          ]
+        }
+        disabled={isConnectedUsersPage ? true : false}
+      />
+    );
+    if (
+      (apmEntityId && performanceYear === '2018' && finalFeedbackOpen) ||
+      (!apmEntityId &&
+        !vgId &&
+        !isConnectedUsersPage &&
+        PAST_REPORTING_YEARS.indexOf(performanceYear) >= 0)
+    ) {
+      links.push(
+        <NavLinkInline
+          key="performance-feedback-link"
+          icon={<StarIcon />}
+          className={linkClass}
+          url={performanceFeedbackUrl(
+            finalFeedbackOpen && performanceYear === '2018'
+              ? performanceYear
+              : '2017'
+          )}
+          label="Performance Feedback"
+          linkCallback={linkCallback}
+          showLabel={isExpanded}
+          useTooltips={useTooltips}
+        />
+      );
+    }
+  }
+
+  return (
+    <div className="sidebar-content">
+      <AnimationGroup display={isExpanded}>
+        <NavLinkInline
+          icon={<AccountHomeIcon />}
+          url={submissionsUrl}
+          label="Account Home"
+          showLabel={isExpanded}
+          className="account-home-link"
+          linkCallback={linkCallback}
+          useTooltips={useTooltips}
+        />
+        <hr />
+      </AnimationGroup>
+      <AnimationGroup display={isExpanded} className={'details'}>
+        <PracticeDetails
+          practiceName={practiceName}
+          {...(!practiceTin ? {} : { practiceTin })}
+          {...(!apmEntityId ? {} : { apmEntityId })}
+          {...(!vgId ? {} : { vgId })}
+          {...(!cpcPlusId ? {} : { cpcPlusId })}
+          {...(!pcfId ? {} : { pcfId })}
+        />
+        <hr />
+      </AnimationGroup>
+      <div className="level-two-nav animation-flat">
+        <NavLinkContainer listOfLinks={links} />
+        <AnimationGroup display={isExpanded && chartActive} className="chart">
+          <div>
+            <hr />
+            <div className="chart-title">
+              <p className="title">Final Group Score</p>
+              <p className="disclaimer">
+                <svg className="left-icon" aria-hidden="true">
+                  <ScoreIncrease />
+                </svg>
+                Score may increase
+                <svg className="right-icon" aria-hidden="true">
+                  <TooltipIcon />
+                </svg>
+              </p>
+              {updateTime && (
+                <p className="timestamp">Last update at {updateTime}</p>
+              )}
+            </div>
+            <ScoreChart chartData={chartData} linkCallback={linkCallback} />
+          </div>
+        </AnimationGroup>
+      </div>
+    </div>
+  );
+};
+
+LevelTwoContent.propTypes = {
+  isExpanded: PropTypes.bool,
+  config: PropTypes.object,
+  chartData: PropTypes.object,
+  showReportingLinks: PropTypes.bool,
+};
+
+export default LevelTwoContent;

package/components/SideNav/Content/index.js

@@ -0,0 +1,4 @@
+import LevelOneContent from './LevelOneContent';
+import LevelTwoContent from './LevelTwoContent';
+
+export { LevelOneContent, LevelTwoContent };

package/components/SideNav/Details/IndividualDetails.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const IndividualDetails = ({ individualName, individualNpi }) => {
+  return (
+    <div className="individual-container">
+      <h3 className="individual-name">{individualName}</h3>
+      <p className="individual-npi">NPI: {individualNpi}</p>
+    </div>
+  );
+};
+
+IndividualDetails.propTypes = {
+  individualName: PropTypes.string,
+  individualNpi: PropTypes.string,
+};
+
+export default IndividualDetails;

package/components/SideNav/Details/PracticeDetails.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PracticeDetails = ({
+  practiceName,
+  practiceTin,
+  apmEntityId,
+  vgId,
+  cpcPlusId,
+  pcfId
+}) => {
+  function renderId() {
+    if (cpcPlusId) {
+      return <p className="practice-tin">CPC+ ID: {cpcPlusId}</p>;
+    } else if (pcfId) {
+      return <p className="practice-tin">PCF ID: {pcfId}</p>;
+    } else if (apmEntityId) {
+      return <p className="practice-tin">APM Entity ID: {apmEntityId}</p>;
+    } else if (vgId) {
+      return <p className="practice-tin">VG ID: {vgId}</p>;
+    } else if (practiceTin) {
+      return <p className="practice-tin">TIN: {practiceTin}</p>;
+    } else {
+      return;
+    }
+  }
+
+  return (
+    <div className="practice-container">
+      <h2 className="practice-name">{practiceName || 'No name on record'}</h2>
+      {renderId()}
+    </div>
+  );
+};
+
+PracticeDetails.propTypes = {
+  practiceName: PropTypes.string,
+  practiceTin: PropTypes.string,
+  apmEntityId: PropTypes.string,
+  vgId: PropTypes.string,
+  cpcPlusId: PropTypes.string,
+  pcfId: PropTypes.string,
+};
+
+export default PracticeDetails;

package/components/SideNav/Details/index.js

@@ -0,0 +1,4 @@
+import IndividualDetails from './IndividualDetails';
+import PracticeDetails from './PracticeDetails';
+
+export { IndividualDetails, PracticeDetails };

package/components/SideNav/Links/CmsSwitchLink.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { handleNavigation } from '../helpers';
+import { SwitchPractice, ChevronRight } from '../../../lib/SvgComponents.jsx';
+
+const CmsSwitchLink = ({ linkCallback, url, label }) => {
+  return (
+    <div className="switch-container">
+      <a
+        href={url}
+        onClick={(e) => handleNavigation(e, linkCallback, label)}
+        className="switch-link"
+      >
+        <div className="button-partition">
+          <svg className="icon">
+            <SwitchPractice />
+            <title>Switch Practice Icon</title>
+          </svg>
+          <span>{label}</span>
+        </div>
+        <div className="button-partition">
+          <svg
+            className="icon right-icon rotated"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <ChevronRight />
+          </svg>
+        </div>
+      </a>
+    </div>
+  );
+};
+
+CmsSwitchLink.propTypes = {
+  linkCallback: PropTypes.func,
+  url: PropTypes.string,
+  label: PropTypes.string,
+};
+
+export default CmsSwitchLink;

package/components/SideNav/Links/NavItemInline.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import AnimationGroup from '../AnimationGroup/AnimationGroup';
+import PropTypes from 'prop-types';
+
+const NavItemInline = (props) => {
+  const {
+    url,
+    urlExpressionToMatch,
+    className,
+    icon,
+    label,
+    isActive,
+    showLabel,
+    disabled,
+  } = props;
+
+  const localUrl = urlExpressionToMatch || url;
+  const urlRegExp = new RegExp(`${localUrl}/?$`);
+  const path = window.location.href && window.location.href.split('?')[0];
+  const currentPage = path && path.match(urlRegExp);
+
+  return (
+    <div
+      className={`${className} ${isActive || currentPage ? 'active' : ''} ${
+        disabled ? 'disabled' : ''
+      }`}
+      aria-label={label}
+    >
+      <svg
+        className={`left-icon ${disabled ? 'disabled' : ''}`}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {icon}
+      </svg>
+      <AnimationGroup display={showLabel}>
+        <span tabIndex="-1">{label}</span>
+      </AnimationGroup>
+    </div>
+  );
+};
+
+NavItemInline.propTypes = {
+  urlExpressionToMatch: PropTypes.string,
+  url: PropTypes.string,
+  className: PropTypes.string,
+  icon: PropTypes.element,
+  label: PropTypes.string,
+  isActive: PropTypes.bool,
+  showLabel: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+export default NavItemInline;

package/components/SideNav/Links/NavLinkContainer.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const NavLinkContainer = ({ listOfLinks, linkActiveFunc }) => {
+  const [activeLink, setActiveLink] = useState(null);
+
+  const toggleActive = (idx, disabled) => {
+    if (disabled || linkActiveFunc) return;
+    setActiveLink(idx);
+  };
+
+  return (
+    <nav>
+      <ul>
+        {(listOfLinks || []).map((link, idx) => (
+          <li
+            key={idx.toString()}
+            onClick={() => toggleActive(idx, link.props.disabled)}
+          >
+            {React.cloneElement(link, { isActive: activeLink === idx })}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+NavLinkContainer.propTypes = {
+  listOfLinks: PropTypes.array,
+  linkActiveFunc: PropTypes.func,
+};
+
+NavLinkContainer.defaultProps = {
+  listOfLinks: null,
+  linkActiveFunc: null,
+};
+
+export default NavLinkContainer;

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -0,0 +1,249 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import { handleNavigation } from '../helpers';
+import AnimationGroup from '../AnimationGroup/AnimationGroup';
+
+const NavLinkDrawer = ({
+  className,
+  disabled,
+  isAlwaysOpen,
+  isExpanded,
+  items,
+  label,
+  leftIcon,
+  linkActiveFunc,
+  linkCallback,
+  listOfLinks,
+  openByDefault,
+  rightIcon,
+  sidebarExpand,
+  staticDrawer,
+  url,
+  isHighlighted,
+  darkerBackground,
+  leftBorderHighlightDisabled,
+  largerDrawerBottomPadding
+}) => {
+  const [isOpen, setIsOpen] = useState(openByDefault);
+
+  const toggleDrawer = () => {
+    if (!isExpanded && typeof sidebarExpand === 'function') {
+      sidebarExpand();
+      setIsOpen(true);
+      return;
+    }
+
+    if (!isAlwaysOpen && !disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const isLinkActive = (link, func) => {
+    if (typeof func === 'function') {
+      return func(link);
+    }
+    return window.location.href.indexOf(link.url) > 0;
+  };
+
+  const isCurrentPage = (link, linkActiveFunc) => {
+    const targetItems = link.items || link.listOfLinks;
+    if (link.url && isLinkActive(link, linkActiveFunc)) {
+      return true;
+    }
+    return (
+      targetItems &&
+      targetItems.some((item) => isCurrentPage(item, linkActiveFunc))
+    );
+  };
+
+  const buildLeftIconClasses = () => {
+    let leftIcon = `left-icon`;
+    
+    if (isAlwaysOpen) {
+      leftIcon += ` always-open`;
+    }
+
+    if (isHighlighted) {
+      leftIcon += ' fill-white';
+    }
+
+    return leftIcon;
+  }
+
+  // Classes for the link drawer button
+  const currentPage = isCurrentPage(
+    { items, listOfLinks, url },
+    linkActiveFunc
+  );
+  const expandedClass = currentPage ? 'expanded' : '';
+
+  const renderLeftIcon = (leftIcon) => {
+    if (leftIcon) {
+      return (<svg
+        className={`${buildLeftIconClasses()}`}
+        aria-hidden="true"
+        focusable="false"
+        >
+        {leftIcon}
+        </svg>)
+    }
+  }
+
+  const hasDarkerBackground = (darkerBackground) => {
+    return darkerBackground ? 'background-highlight' : '';
+  }
+
+  const hasDarkerTitle = (darkerBackground) => {
+    return darkerBackground ? 'expanded currentPage' : '';
+  }
+
+  const isLeftBorderHighlightDisabled = (leftBorderHighlightDisabled) => {
+    return leftBorderHighlightDisabled ? 'left-border-disabled' : ''
+  }
+
+  const isHiddenWhileCollapsed = (isLeftBorderDisabled, isExpanded) => {
+    return isLeftBorderDisabled && !isExpanded ? 'hidden-nav-link-item' : '';
+  }
+
+  const highlightTitle = (isHighlighted) => {
+    return isHighlighted && isExpanded ? 'highlight' : '';
+  }
+
+  const hasLargerDrawBottomPadding = (largerDrawerBottomPadding) => {
+    return largerDrawerBottomPadding ? 'larger-drawer-bottom-padding' : '';
+  }
+
+  const adjustItemSpacing = (largerDrawerBottomPadding) => {
+    return largerDrawerBottomPadding ? 'larger-item-spacing' : '';
+  }
+
+  useEffect(() => {
+    if (disabled) {
+      setIsOpen(false);
+    }
+    if (isAlwaysOpen) {
+      setIsOpen(isAlwaysOpen);
+    }
+  }, []);
+
+  // Render the links recursively.  This will theoretically allow for an infinite number of nested link items.
+  // className will either be empty, parent-link - top most node, or child-link.
+  const renderDrawerLinksRecursively = (navLinks, className = '') => {
+    return (
+      navLinks &&
+      navLinks.map((link) => {
+        if (link.type === 'divider') {
+          return (
+            <AnimationGroup display={true}>
+              <hr />
+            </AnimationGroup>
+          );
+        }
+
+        return (
+          <li
+            key={link.label}
+            className={
+              isLinkActive(link, linkActiveFunc)
+                ? `active-link ${className}`
+                : className
+            }
+          >
+            {link.url ? (
+              <a
+                href={link.url}
+                onClick={(e) => handleNavigation(e, linkCallback, link.label)}
+                tabIndex={isOpen ? '0' : '-1'}
+                data-track-category="SidebarNav"
+                data-track-action={`GoTo${
+                  link.label ? link.label.split(' ').join('') : ''
+                }`}
+                data-track-label={link.label}
+                target="_self"
+              >
+                {link.label}
+              </a>
+            ) : (
+              <div>{link.label}</div>
+            )}
+            {link.items && link.items.length > 0 && (
+              <ul aria-hidden={!isOpen}>
+                {renderDrawerLinksRecursively(link.items, 'child-link')}
+              </ul>
+            )}
+          </li>
+        );
+      })
+    );
+  };
+
+  return (
+    <div className={staticDrawer ? 'static-drawer link-drawer' : 'link-drawer'}>
+      <button
+        onClick={toggleDrawer}
+        {...(!isAlwaysOpen ? { 'aria-pressed': isOpen } : {})}
+        tabIndex="0"
+        aria-label={label}
+        {...(isAlwaysOpen || disabled
+          ? { disabled: isAlwaysOpen || disabled }
+          : {})}
+        className={`${className} ${expandedClass} ${highlightTitle(isHighlighted)} ${hasDarkerTitle(darkerBackground)}
+         ${currentPage ? 'currentPage' : ''} ${isLeftBorderHighlightDisabled(leftBorderHighlightDisabled)}
+         ${isHiddenWhileCollapsed(leftBorderHighlightDisabled, isExpanded)}`}
+      >
+        <div className={isExpanded ? 'link-body' : 'link-body collapsed'}>
+          {renderLeftIcon(leftIcon)}
+          <AnimationGroup display={isExpanded}>
+            <span>{label}</span>
+          </AnimationGroup>
+        </div>
+        {isExpanded && !isAlwaysOpen && (
+          <svg
+            className={`${isOpen ? 'right-icon rotated' : 'right-icon'}`}
+            focusable="false"
+            aria-hidden="true"
+          >
+            {rightIcon}
+          </svg>
+        )}
+      </button>
+      <AnimationGroup display={isExpanded}>
+        <div
+          className={`${currentPage ? 'currentPage' : ''} ${
+            isOpen && !disabled ? 'drawer open' : 'drawer'
+          } ${hasDarkerBackground(darkerBackground)} ${hasLargerDrawBottomPadding(largerDrawerBottomPadding)}`}
+        >
+          <ul aria-hidden={!isOpen}>
+            {listOfLinks &&
+              renderDrawerLinksRecursively(listOfLinks, `parent-link ${adjustItemSpacing(largerDrawerBottomPadding)}`)}
+          </ul>
+        </div>
+      </AnimationGroup>
+    </div>
+  );
+};
+
+NavLinkDrawer.propTypes = {
+  isExpanded: PropTypes.bool,
+  isAlwaysOpen: PropTypes.bool,
+  openByDefault: PropTypes.bool,
+  className: PropTypes.string,
+  rightIcon: PropTypes.element,
+  leftIcon: PropTypes.element,
+  label: PropTypes.string,
+  linkActiveFunc: PropTypes.func,
+  linkCallback: PropTypes.func,
+  listOfLinks: PropTypes.array,
+  disabled: PropTypes.bool,
+  sidebarExpand: PropTypes.func,
+  staticDrawer: PropTypes.bool,
+  items: PropTypes.object,
+  url: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  darkerBackground: PropTypes.bool,
+  leftBorderHighlightDisabled: PropTypes.bool,
+  largerDrawerBottomPadding: PropTypes.bool
+};
+
+export default NavLinkDrawer;