@madie/madie-design-system 1.0.2 → 1.0.3

package/components/SideNav/UI/index.js

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

package/components/SideNav/helpers.js

@@ -1,49 +1,49 @@
-const submissionsUrl = '/user/submissions';
-const dashboardUrl = '/user/dashboard';
-const manageUrl = '/user/manage-access';
+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;
-  }
+    if (performanceYear) {
+        return `${feedbackUrl}/${performanceYear}`;
+    } else {
+        return feedbackUrl;
+    }
 };
 
 const facilityBasedPreviewUrl = (performanceYear) => {
-  return `${facilityBasedPreviewBaseUrl}/${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',
-  });
+    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,
+    submissionsUrl,
+    dashboardUrl,
+    feedbackUrl,
+    manageUrl,
+    physicianCompareUrl,
+    performanceFeedbackUrl,
+    facilityBasedPreviewUrl,
+    handleNavigation,
+    reportsPortalUrl,
+    facilityBasedPreviewBaseUrl,
 };

package/components/SideNav/index.js

@@ -1,53 +1,53 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { SideNavUI } from './UI';
+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 {
+        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
-  );
+    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 };
+    return { expand, collapse };
 };
 
 export default SideNav;

package/components/Spinner/index.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import { render } from 'react-dom';
-import DSSpinner from '@cmsgov/design-system/dist/components/Spinner/Spinner';
+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);
-  }
+    constructor(options) {
+        render(<DSSpinner />, options.rootElement);
+    }
 }

package/components/Tabs/Tab.js

@@ -1,26 +1,26 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Tab as MuiTab } from '@mui/material';
+import React from "react";
+import PropTypes from "prop-types";
+import { Tab as MuiTab } from "@mui/material";
 
 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}
-    />
-  );
+    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,
+    href: PropTypes.string,
 };
 
-export default Tab
+export default Tab;

package/components/Tabs/TabPanel.js

@@ -1,34 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+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>
-  );
+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,
+    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,
+    index: 0,
+    value: 0,
 };
 
 export default TabPanel;

package/components/Tabs/Tabs.stories.js

@@ -1,120 +1,130 @@
-import React, { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import React, { useState } from "react";
+import { withKnobs } from "@storybook/addon-knobs";
 
-import Tabs from './index';
-import TabPanel from './TabPanel';
-import Button from '../Button';
+import Tabs from "./index";
+import TabPanel from "./TabPanel";
+import Button from "../Button";
 
 export default {
-  title: 'Tabs',
-  component: Tabs,
-  decorators: [withKnobs],
+    title: "Tabs",
+    component: Tabs,
+    decorators: [withKnobs],
 };
 
 export const Default = () => {
-  return (
-    <div className="qpp-u-padding--12">
-      <Tabs>
-        <TabPanel id="summary" tab="Summary" className="my-summary-class">
-          The Bill of Rights is the first ten amendments to the United States
-          Constitution.
-        </TabPanel>
-        <TabPanel id="preamble" tab="Preamble">
-          We the People of the United States, in Order to form a more perfect
-          Union, establish Justice, insure domestic Tranquility, provide for the
-          common defence, promote the general Welfare, and secure the Blessings
-          of Liberty to ourselves and our Posterity, do ordain and establish
-          this Constitution for the United States of America.
-        </TabPanel>
-        <TabPanel id="amendments" tab="Amendments">
-          <h2 className="ds-h4">Bill of Rights</h2>
-          <ol className="ds-c-list">
-            <li>Freedoms, Petitions, Assembly</li>
-            <li>Right to bear arms</li>
-            <li>Quartering of soldiers</li>
-            <li>Search and arrest</li>
-            <li>Rights in criminal cases</li>
-            <li>Right to a fair trial</li>
-            <li>Rights in civil cases</li>
-            <li>Bail, fines, punishment</li>
-            <li>Rights retained by the People</li>
-            <li>States’ rights</li>
-          </ol>
+    return (
+        <div className="qpp-u-padding--12">
+            <Tabs>
+                <TabPanel
+                    id="summary"
+                    tab="Summary"
+                    className="my-summary-class"
+                >
+                    The Bill of Rights is the first ten amendments to the United
+                    States Constitution.
+                </TabPanel>
+                <TabPanel id="preamble" tab="Preamble">
+                    We the People of the United States, in Order to form a more
+                    perfect Union, establish Justice, insure domestic
+                    Tranquility, provide for the common defence, promote the
+                    general Welfare, and secure the Blessings of Liberty to
+                    ourselves and our Posterity, do ordain and establish this
+                    Constitution for the United States of America.
+                </TabPanel>
+                <TabPanel id="amendments" tab="Amendments">
+                    <h2 className="ds-h4">Bill of Rights</h2>
+                    <ol className="ds-c-list">
+                        <li>Freedoms, Petitions, Assembly</li>
+                        <li>Right to bear arms</li>
+                        <li>Quartering of soldiers</li>
+                        <li>Search and arrest</li>
+                        <li>Rights in criminal cases</li>
+                        <li>Right to a fair trial</li>
+                        <li>Rights in civil cases</li>
+                        <li>Bail, fines, punishment</li>
+                        <li>Rights retained by the People</li>
+                        <li>States’ rights</li>
+                    </ol>
 
-          <h2 className="ds-h4">Later Amendments</h2>
-          <ol className="ds-c-list" start="11">
-            <li>Lawsuits against states</li>
-            <li>Presidential elections</li>
-            <li>Abolition of slavery</li>
-            <li>Civil rights</li>
-            <li>Black suffrage</li>
-            <li>Income taxes</li>
-            <li>Senatorial elections</li>
-            <li>Prohibition of liquor</li>
-            <li>Women’s suffrage</li>
-            <li>Terms of office</li>
-            <li>Repeal of Prohibition</li>
-            <li>Term Limits for the Presidency</li>
-            <li>Washington, D.C., suffrage</li>
-            <li>Abolition of poll taxes</li>
-            <li>Presidential succession</li>
-            <li>18-year-old suffrage</li>
-            <li>Congressional pay raises</li>
-          </ol>
+                    <h2 className="ds-h4">Later Amendments</h2>
+                    <ol className="ds-c-list" start="11">
+                        <li>Lawsuits against states</li>
+                        <li>Presidential elections</li>
+                        <li>Abolition of slavery</li>
+                        <li>Civil rights</li>
+                        <li>Black suffrage</li>
+                        <li>Income taxes</li>
+                        <li>Senatorial elections</li>
+                        <li>Prohibition of liquor</li>
+                        <li>Women’s suffrage</li>
+                        <li>Terms of office</li>
+                        <li>Repeal of Prohibition</li>
+                        <li>Term Limits for the Presidency</li>
+                        <li>Washington, D.C., suffrage</li>
+                        <li>Abolition of poll taxes</li>
+                        <li>Presidential succession</li>
+                        <li>18-year-old suffrage</li>
+                        <li>Congressional pay raises</li>
+                    </ol>
 
-          <h2 className="ds-h4">Even Later Amendments</h2>
-          <ol className="ds-c-list">
-            <li>Thou must count to three</li>
-            <li>
-              Three shall be the number of the counting and the number of the
-              counting shall be three
-            </li>
-            <li>Four shalt thou not count</li>
-            <li>
-              Neither shalt thou count two, excepting that thou then proceedeth
-              to three
-            </li>
-            <li>Five is right out</li>
-          </ol>
-        </TabPanel>
-        <TabPanel id="disabled" tab="Disabled" disabled>
-          You should not see this.
-        </TabPanel>
-      </Tabs>
-    </div>
-  );
+                    <h2 className="ds-h4">Even Later Amendments</h2>
+                    <ol className="ds-c-list">
+                        <li>Thou must count to three</li>
+                        <li>
+                            Three shall be the number of the counting and the
+                            number of the counting shall be three
+                        </li>
+                        <li>Four shalt thou not count</li>
+                        <li>
+                            Neither shalt thou count two, excepting that thou
+                            then proceedeth to three
+                        </li>
+                        <li>Five is right out</li>
+                    </ol>
+                </TabPanel>
+                <TabPanel id="disabled" tab="Disabled" disabled>
+                    You should not see this.
+                </TabPanel>
+            </Tabs>
+        </div>
+    );
 };
 
 export const ControlledTabs = () => {
-  const [selectedId, setSelectedId] = useState('preamble');
-  return (
-    <div className="qpp-u-padding--12">
-      <Tabs selected={selectedId} onChange={(id) => setSelectedId(id)}>
-        <TabPanel id="summary" tab="Summary" className="my-summary-class">
-          The Bill of Rights is the first ten amendments to the United States
-          Constitution.
-        </TabPanel>
-        <TabPanel id="preamble" tab="Preamble">
-          We the People of the United States, in Order to form a more perfect
-          Union, establish Justice, insure domestic Tranquility, provide for the
-          common defence, promote the general Welfare, and secure the Blessings
-          of Liberty to ourselves and our Posterity, do ordain and establish
-          this Constitution for the United States of America.
-        </TabPanel>
-        <TabPanel id="amendments" tab="Amendments">
-          All of the amendments
-          <br />
-          <Button
-            className="qpp-u-margin-top--16"
-            onClick={() => setSelectedId('summary')}
-          >
-            Go to Summary
-          </Button>
-        </TabPanel>
-        <TabPanel id="disabled" tab="Disabled" disabled>
-          You should not see this.
-        </TabPanel>
-      </Tabs>
-    </div>
-  );
+    const [selectedId, setSelectedId] = useState("preamble");
+    return (
+        <div className="qpp-u-padding--12">
+            <Tabs selected={selectedId} onChange={(id) => setSelectedId(id)}>
+                <TabPanel
+                    id="summary"
+                    tab="Summary"
+                    className="my-summary-class"
+                >
+                    The Bill of Rights is the first ten amendments to the United
+                    States Constitution.
+                </TabPanel>
+                <TabPanel id="preamble" tab="Preamble">
+                    We the People of the United States, in Order to form a more
+                    perfect Union, establish Justice, insure domestic
+                    Tranquility, provide for the common defence, promote the
+                    general Welfare, and secure the Blessings of Liberty to
+                    ourselves and our Posterity, do ordain and establish this
+                    Constitution for the United States of America.
+                </TabPanel>
+                <TabPanel id="amendments" tab="Amendments">
+                    All of the amendments
+                    <br />
+                    <Button
+                        className="qpp-u-margin-top--16"
+                        onClick={() => setSelectedId("summary")}
+                    >
+                        Go to Summary
+                    </Button>
+                </TabPanel>
+                <TabPanel id="disabled" tab="Disabled" disabled>
+                    You should not see this.
+                </TabPanel>
+            </Tabs>
+        </div>
+    );
 };