@madie/madie-design-system 1.0.2 → 1.0.3

package/components/SideNav/Content/LevelTwoContent.jsx

@@ -1,216 +1,229 @@
-import React from 'react';
+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';
+    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';
+    AccountHomeIcon,
+    DashboardIcon,
+    StarIcon,
+    CliniciansIcon,
+    ScoreIncrease,
+    TooltipIcon,
+} from "../../../lib/SvgComponents.jsx";
 import {
-  submissionsUrl,
-  manageUrl,
-  dashboardUrl,
-  performanceFeedbackUrl,
-} from '../helpers';
+    submissionsUrl,
+    manageUrl,
+    dashboardUrl,
+    performanceFeedbackUrl,
+} from "../helpers";
 
-const PAST_REPORTING_YEARS = ['2017', '2018'];
+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,
-  } = {},
+    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 = [];
+    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 = [];
+    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;
+        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`
+        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",
+                        },
+                    ],
+                },
+            ];
         }
-        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,
-            },
-          ]
+        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}
+                />
+            );
         }
-        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>
-              )}
+    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>
-            <ScoreChart chartData={chartData} linkCallback={linkCallback} />
-          </div>
-        </AnimationGroup>
-      </div>
-    </div>
-  );
+        </div>
+    );
 };
 
 LevelTwoContent.propTypes = {
-  isExpanded: PropTypes.bool,
-  config: PropTypes.object,
-  chartData: PropTypes.object,
-  showReportingLinks: PropTypes.bool,
+    isExpanded: PropTypes.bool,
+    config: PropTypes.object,
+    chartData: PropTypes.object,
+    showReportingLinks: PropTypes.bool,
 };
 
 export default LevelTwoContent;

package/components/SideNav/Content/index.js

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

package/components/SideNav/Details/IndividualDetails.jsx

@@ -1,18 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+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>
-  );
+    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,
+    individualName: PropTypes.string,
+    individualNpi: PropTypes.string,
 };
 
 export default IndividualDetails;

package/components/SideNav/Details/PracticeDetails.jsx

@@ -1,45 +1,47 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
 const PracticeDetails = ({
-  practiceName,
-  practiceTin,
-  apmEntityId,
-  vgId,
-  cpcPlusId,
-  pcfId
+    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;
+    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>
-  );
+    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,
+    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

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

package/components/SideNav/Links/CmsSwitchLink.jsx

@@ -1,41 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { handleNavigation } from '../helpers';
-import { SwitchPractice, ChevronRight } from '../../../lib/SvgComponents.jsx';
+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>
+    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>
-        <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,
+    linkCallback: PropTypes.func,
+    url: PropTypes.string,
+    label: PropTypes.string,
 };
 
 export default CmsSwitchLink;