@madie/madie-design-system 1.0.39 → 1.0.41

package/index.js

@@ -1,6 +1,5 @@
 import ErrorPage from './components/Error/error';
 import Footer from './components/Footer/footer';
-import SessionDialog from './components/SessionDialog/sessionDialog';
 
 import 'what-input';
 
@@ -13,9 +12,6 @@ const QppStyleComponents = {
     return new Footer(options);
   },
 
-  SessionDialog(options) {
-    return new SessionDialog(options);
-  },
 };
 
 export default QppStyleComponents;

package/lib/SvgComponents.jsx

@@ -408,7 +408,7 @@ export const CloseXIcon = () => (
 );
 
 export const CloseXIcon2 = () => (
-  <svg viewBox="0 0 16 16" focusable="false">
+  <svg viewBox="0 0 16 16" focusable="false" className="closex2">
     <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <path
         d="M0.292893219,0.292893219 C0.683417511,-0.0976310729 1.31658249,-0.0976310729 1.70710678,0.292893219 L1.70710678,0.292893219 L8,6.585 L14.2928932,0.292893219 C14.6834175,-0.0976310729 15.3165825,-0.0976310729 15.7071068,0.292893219 C16.0675907,0.65337718 16.0953203,1.22060824 15.7902954,1.61289944 L15.7071068,1.70710678 L9.415,8 L15.7071068,14.2928932 L15.7902954,14.3871006 C16.0953203,14.7793918 16.0675907,15.3466228 15.7071068,15.7071068 C15.3165825,16.0976311 14.6834175,16.0976311 14.2928932,15.7071068 L14.2928932,15.7071068 L8,9.415 L1.70710678,15.7071068 C1.31658249,16.0976311 0.683417511,16.0976311 0.292893219,15.7071068 C-0.0675907428,15.3466228 -0.0953202783,14.7793918 0.209704612,14.3871006 L0.292893219,14.2928932 L6.585,8 L0.292893219,1.70710678 L0.209704612,1.61289944 C-0.0953202783,1.22060824 -0.0675907428,0.65337718 0.292893219,0.292893219 Z"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@madie/madie-design-system",
-    "version": "1.0.39",
+    "version": "1.0.41",
     "description": "Shared style guide across the Madie program.",
     "main": "dist/index.js",
     "homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",

package/test/components/Accordion.test.js

@@ -1,12 +1,29 @@
+import "@testing-library/jest-dom";
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
 import Accordion from "../../components/Accordion";
 
 describe("Accordion", () => {
-    it("Should render okay", () => {
-        const { getByTestId } = render(
-            <Accordion title="Title">Content</Accordion>
+    it("Should render okay", async () => {
+        const { getByTestId, getByRole } = render(
+            <Accordion
+                title="Title"
+                centerItem="centerItem"
+                rightItem="rightItem"
+                leftItem="leftItem"
+            >
+                Content
+            </Accordion>
         );
         expect(getByTestId("accordion")).toBeTruthy();
+        const button = getByRole("button");
+        fireEvent.click(button);
+        await waitFor(() => {
+            expect(button).toHaveClass("active");
+        });
+        fireEvent.click(button);
+        await waitFor(() => {
+            expect(button).not.toHaveClass("active");
+        });
     });
 });

package/test/components/Button.test.js

@@ -0,0 +1,72 @@
+import "@testing-library/jest-dom";
+import React from "react";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import Button, { TextButton } from "../../components/Button";
+import "@testing-library/jest-dom";
+
+describe("Button", () => {
+    const { getByTestId, getByText } = screen;
+
+    it("Button renders with provided size, onClick triggers", async () => {
+        const onClick = jest.fn();
+        render(
+            <Button size="big" onClick={onClick} data-testId="button-test-id" />
+        );
+        const button = getByTestId("button-test-id");
+        expect(button).toHaveClass("qpp-c-button--big");
+        fireEvent.click(button);
+        await waitFor(() => {
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    it("Button renders with provided variant, no onClick", async () => {
+        render(<Button variant="cyan" data-testId="button-test-id" />);
+        const button = getByTestId("button-test-id");
+        expect(button).toHaveClass("qpp-c-button--cyan");
+    });
+
+    it("Button renders with an HRef", async () => {
+        const onClick = jest.fn();
+        render(
+            <Button
+                onClick={onClick}
+                href="https://whatwouldkevindo.com/"
+                children="test"
+            />
+        );
+        expect(getByText("test").href).toBe("https://whatwouldkevindo.com/");
+    });
+
+    it("TextButton renders to the screen with text and passed className", async () => {
+        const onClick = jest.fn();
+        render(
+            <TextButton
+                onClick={onClick}
+                className="test"
+                data-testId="text-test-id"
+                children="test"
+            />
+        );
+        expect(getByText("test")).toBeTruthy();
+    });
+
+    it("Default props are as expected", async () => {
+        const onClick = Button.defaultProps.onClick();
+        expect(onClick).toBe(null);
+        const children = Button.defaultProps.children;
+        expect(children).toBe(false);
+        const className = Button.defaultProps.className;
+        expect(className).toBe("");
+        const href = Button.defaultProps.href;
+        expect(href).toBe("");
+        const loading = Button.defaultProps.loading;
+        expect(loading).toBe(false);
+        const size = Button.defaultProps.size;
+        expect(size).toBe(null);
+        const type = Button.defaultProps.type;
+        expect(type).toBe("button");
+        const variant = Button.defaultProps.variant;
+        expect(variant).toBe(null);
+    });
+});

package/test/components/MadieAlert.test.js

@@ -5,7 +5,6 @@ import MadieAlert from "../../components/MadieAlert";
 import "@testing-library/jest-dom";
 
 describe("Madie Alert", () => {
-
     it("It renders as expected with basic props and triggers on Close on click", async () => {
         const onClose = jest.fn();
         const { getByTestId } = render(
@@ -18,7 +17,7 @@ describe("Madie Alert", () => {
                     "data-testid": "alert-dialog",
                 }}
                 closeButtonProps={{
-                    "onClick": onClose,
+                    onClick: onClose,
                     "data-testid": "close-button",
                 }}
             />

package/test/components/MadieDeleteDialog.test.js

@@ -36,7 +36,9 @@ describe("MadieDeleteDialog", () => {
             const deleteDialog = await getByTestId("delete-dialog");
             expect(deleteDialog).toBeInTheDocument();
             await waitFor(() => {
-                expect(queryByText("Are you sure you want to delete ?")).toBeVisible();
+                expect(
+                    queryByText("Are you sure you want to delete ?")
+                ).toBeVisible();
             });
         });
     });

package/test/components/MadiePopover.test.js

@@ -45,6 +45,13 @@ export const PopoverTester = () => {
                     dataTestId: `edit-measure-1`,
                 }}
                 otherSelectOptionProps={[
+                    {
+                        label: "Version",
+                        toImplementFunction: zipData,
+                        dataTestId: `version-measure-1`,
+                    },
+                ]}
+                additionalSelectOptionProps={[
                     {
                         label: "Export",
                         toImplementFunction: zipData,
@@ -63,6 +70,7 @@ describe("MadiePopover", () => {
         fireEvent.click(result);
         expect(queryByText("View")).toBeVisible();
         expect(queryByText("Export")).toBeVisible();
+        expect(queryByText("Version")).toBeVisible();
     });
 
     test("Popover disappears on clicking popover options", async () => {
@@ -71,6 +79,7 @@ describe("MadiePopover", () => {
         fireEvent.click(result);
         expect(queryByText("View")).toBeVisible();
         expect(queryByText("Export")).toBeVisible();
+        expect(queryByText("Version")).toBeVisible();
         fireEvent.click(queryByText("View"));
         expect(queryByText("View")).not.toBeVisible();
     });

package/test/components/Pagination.test.js

@@ -5,6 +5,10 @@ import { render } from "@testing-library/react";
 import { Pagination } from "../../components/Pagination";
 
 describe("Pagination", () => {
+    it("renders with default props", () => {
+        const { getByTestId } = render(<Pagination />);
+        expect(getByTestId("NavigateNextIcon")).toBeInTheDocument();
+    });
     it("renders the next button when more pages are available", () => {
         const { getByTestId } = render(
             <Pagination

package/test/components/Select.test.js

@@ -110,4 +110,41 @@ describe("Select", () => {
             expect(helperText).toBeInTheDocument();
         });
     });
+
+    test("Select renders disabled", async () => {
+        await act(async () => {
+            const { findByText } = render(
+                <Select
+                    disabled
+                    helperText="helper text"
+                    label="Test"
+                    value=""
+                    id="test-select"
+                    inputProps={{ "data-testid": "test-input" }}
+                    data-testid="test-select"
+                    size="small"
+                />
+            );
+            const helperText = await findByText("helper text");
+            expect(helperText).toBeInTheDocument();
+        });
+    });
+    test("Select renders error", async () => {
+        await act(async () => {
+            const { findByText } = render(
+                <Select
+                    error
+                    helperText="helper text"
+                    label="Test"
+                    value=""
+                    id="test-select"
+                    inputProps={{ "data-testid": "test-input" }}
+                    data-testid="test-select"
+                    size="small"
+                />
+            );
+            const helperText = await findByText("helper text");
+            expect(helperText).toBeInTheDocument();
+        });
+    });
 });

package/test/components/TextField.test.js

@@ -47,4 +47,40 @@ describe("TextField", () => {
             expect(helperText).toBeInTheDocument();
         });
     });
+    test("Helper text renders disabled", async () => {
+        await act(async () => {
+            const { findByText } = render(
+                <TextField
+                    disabled
+                    placeholder="test Name"
+                    helperText="helper text"
+                    label="test Name"
+                    id="testName"
+                    inputProps={{ "data-testid": "test-name-input" }}
+                    data-testid="test-name-text-field"
+                    size="small"
+                />
+            );
+            const helperText = await findByText("helper text");
+            expect(helperText).toBeInTheDocument();
+        });
+    });
+    test("HelperText renders errored", async () => {
+        await act(async () => {
+            const { findByText } = render(
+                <TextField
+                    error
+                    placeholder="test Name"
+                    helperText="helper text"
+                    label="test Name"
+                    id="testName"
+                    inputProps={{ "data-testid": "test-name-input" }}
+                    data-testid="test-name-text-field"
+                    size="small"
+                />
+            );
+            const helperText = await findByText("helper text");
+            expect(helperText).toBeInTheDocument();
+        });
+    });
 });

package/test/lib/SvgComponents.test.js

@@ -0,0 +1,212 @@
+import "@testing-library/jest-dom";
+import React from "react";
+import { render } from "@testing-library/react";
+import {
+    MyApplicationsIcon,
+    UserSignInIcon,
+    MyTestDataIcon,
+    ReportDataIcon,
+    ManageUsersIcon,
+    AccountHomeIcon,
+    FacilityBasedPreviewIcon,
+    PaymentIcon,
+    PhysicianCompareIcon,
+    HardshipIcon,
+    TargetIcon,
+    ReportsIcon,
+    HelpSupportIcon,
+    DashboardIcon,
+    AccountSettings,
+    DetailsIcon,
+    CliniciansIcon,
+    GroupReporting,
+    IndividualReporting,
+    ChevronLeft,
+    ChevronRight,
+    ChevronDown,
+    SwitchPractice,
+    ScoreIncrease,
+    TooltipIcon,
+    NavCollapse,
+    NavExpand,
+    CloseXIcon,
+    CloseXIcon2,
+    EarlyClaims,
+    CliniciansList,
+    YoutubeIcon,
+    TwitterIcon,
+    WiViewReportsIcon,
+    BellOutline,
+    StarIcon,
+    WiViewProgressIcon,
+    WiManageGroupIcon,
+} from "../../lib/SvgComponents";
+
+describe("SvgComponents", () => {
+    it("renders MyApplicationsIcon", async () => {
+        const { container } = render(<MyApplicationsIcon />);
+        expect(container.firstChild).toHaveClass("my-applications");
+    });
+
+    it("renders UserSignInIcon", async () => {
+        const { container } = render(<UserSignInIcon />);
+        expect(container.firstChild).toHaveClass("user-sign-in");
+    });
+
+    it("renders MyTestDataIcon", async () => {
+        const { container } = render(<MyTestDataIcon />);
+        expect(container.firstChild).toHaveClass("my-test-data");
+    });
+
+    it("renders ReportDataIcon", async () => {
+        const { container } = render(<ReportDataIcon />);
+        expect(container.firstChild).toHaveClass("report-data");
+    });
+
+    it("renders ManageUsersIcon", async () => {
+        const { container } = render(<ManageUsersIcon />);
+        expect(container.firstChild).toHaveClass("manage-users-svg");
+    });
+
+    it("renders AccountHomeIcon", async () => {
+        const { container } = render(<AccountHomeIcon />);
+        expect(container.firstChild).toHaveClass("account-home-icon");
+    }); //
+
+    it("renders FacilityBasedPreviewIcon", async () => {
+        const { container } = render(<FacilityBasedPreviewIcon />);
+        expect(container.firstChild).toHaveClass("facility-based-preview-svg");
+    });
+
+    it("renders PaymentIcon", async () => {
+        const { container } = render(<PaymentIcon />);
+        expect(container.firstChild).toHaveClass("payment-icon");
+    });
+
+    it("renders PhysicianCompareIcon", async () => {
+        const { container } = render(<PhysicianCompareIcon />);
+        expect(container.firstChild).toHaveClass("physician-compare-icon");
+    });
+
+    it("renders HardshipIcon", async () => {
+        const { container } = render(<HardshipIcon />);
+        expect(container.firstChild).toHaveClass("hardship-icon");
+    });
+
+    it("renders TargetIcon", async () => {
+        const { container } = render(<TargetIcon />);
+        expect(container.firstChild).toHaveClass("target-icon");
+    });
+
+    it("renders ReportsIcon", async () => {
+        const { container } = render(<ReportsIcon />);
+        expect(container.firstChild).toHaveClass("reports-icon");
+    });
+    //
+
+    it("renders HelpSupportIcon", async () => {
+        const { container } = render(<HelpSupportIcon />);
+        expect(container.firstChild).toHaveClass("help-support");
+    });
+    it("renders DashboardIcon", async () => {
+        const { container } = render(<DashboardIcon />);
+        expect(container.firstChild).toHaveClass("dashboard-icon");
+    });
+    it("renders AccountSettings", async () => {
+        const { container } = render(<AccountSettings />);
+        expect(container.firstChild).toHaveClass("account-settings");
+    });
+    it("renders DetailsIcon", async () => {
+        const { container } = render(<DetailsIcon />);
+        expect(container.firstChild).toHaveClass("details-icon");
+    });
+    it("renders StarIcon", async () => {
+        const { container } = render(<StarIcon />);
+        expect(container.firstChild).toHaveClass("star-icon");
+    });
+    it("renders CliniciansIcon", async () => {
+        const { container } = render(<CliniciansIcon />);
+        expect(container.firstChild).toHaveClass("clinicians-icon");
+    });
+    it("renders GroupReporting", async () => {
+        const { container } = render(<GroupReporting />);
+        expect(container.firstChild).toHaveClass("group-reporting");
+    });
+    it("renders IndividualReporting", async () => {
+        const { container } = render(<IndividualReporting />);
+        expect(container.firstChild).toHaveClass("individual-reporting");
+    });
+    it("renders ChevronLeft", async () => {
+        const { container } = render(<ChevronLeft />);
+        expect(container.firstChild).toHaveClass("chevron-left");
+    });
+    it("renders ChevronRight", async () => {
+        const { container } = render(<ChevronRight />);
+        expect(container.firstChild).toHaveClass("chevron-right");
+    });
+    it("renders ChevronDown", async () => {
+        const { container } = render(<ChevronDown />);
+        expect(container.firstChild).toHaveClass("chevron-down");
+    });
+    it("renders SwitchPractice", async () => {
+        const { container } = render(<SwitchPractice />);
+        expect(container.firstChild).toHaveClass("switch-practice");
+    });
+    it("renders ScoreIncrease", async () => {
+        const { container } = render(<ScoreIncrease />);
+        expect(container.firstChild).toHaveClass("score-increase");
+    });
+    it("renders TooltipIcon", async () => {
+        const { container } = render(<TooltipIcon />);
+        expect(container.firstChild).toHaveClass("tooltip-icon");
+    });
+    it("renders NavCollapse", async () => {
+        const { container } = render(<NavCollapse />);
+        expect(container.firstChild).toHaveClass("nav-collapse");
+    });
+    it("renders NavExpand", async () => {
+        const { container } = render(<NavExpand />);
+        expect(container.firstChild).toHaveClass("nav-expand");
+    });
+    it("renders CloseXIcon", async () => {
+        const { container } = render(<CloseXIcon />);
+        expect(container.firstChild).toHaveClass("closex");
+    });
+    it("renders CloseXIcon2", async () => {
+        const { container } = render(<CloseXIcon2 />);
+        expect(container.firstChild).toHaveClass("closex2");
+    });
+    it("renders BellOutline", async () => {
+        const { container } = render(<BellOutline />);
+        expect(container.firstChild).toHaveClass("bell-outline");
+    });
+    it("renders EarlyClaims", async () => {
+        const { container } = render(<EarlyClaims />);
+        expect(container.firstChild).toHaveClass("early-claims-icon");
+    });
+    it("renders CliniciansList", async () => {
+        const { container } = render(<CliniciansList />);
+        expect(container.firstChild).toHaveClass("clinicians-list-icon");
+    });
+    it("renders YoutubeIcon", async () => {
+        const { container } = render(<YoutubeIcon />);
+        expect(container.firstChild).toHaveClass("youtube-icon");
+    });
+
+    it("renders TwitterIcon", async () => {
+        const { container } = render(<TwitterIcon />);
+        expect(container.firstChild).toHaveClass("twitter-icon");
+    });
+    it("renders WiViewReportsIcon", async () => {
+        const { container } = render(<WiViewReportsIcon />);
+        expect(container.firstChild).toHaveClass("wi-view-reports");
+    });
+    it("renders WiViewProgressIcon", async () => {
+        const { container } = render(<WiViewProgressIcon />);
+        expect(container.firstChild).toHaveClass("wi-view-progress");
+    });
+    it("renders WiManageGroupIcon", async () => {
+        const { container } = render(<WiManageGroupIcon />);
+        expect(container.firstChild).toHaveClass("wi-manage-group");
+    });
+});

package/components/Modal/LegacyModal.jsx

@@ -1,74 +0,0 @@
-import React, { Component } from "react";
-import { render } from "react-dom";
-import ReactModal from "react-modal";
-import { CloseXIcon } from "../../lib/SvgComponents.jsx";
-import SanitizedContent from "../SanitizedContent";
-import PropTypes from "prop-types";
-
-class Modal extends Component {
-    constructor() {
-        super();
-
-        this.state = {
-            showModal: true,
-        };
-
-        this.handleOpenModal = this.handleOpenModal.bind(this);
-        this.handleCloseModal = this.handleCloseModal.bind(this);
-
-        ReactModal.setAppElement("body > *:not(.ReactModalPortal)");
-    }
-
-    handleOpenModal() {
-        this.setState({ showModal: true });
-    }
-
-    handleCloseModal() {
-        this.setState({ showModal: false });
-    }
-
-    UNSAFE_componentWillReceiveProps(newProps) {
-        this.setState({
-            showModal: newProps.showModal,
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <ReactModal
-                    role="alertdialog"
-                    contentLabel={
-                        this.props.contentLabel || "Informational Modal Dialog"
-                    }
-                    isOpen={this.state.showModal}
-                    className="info-modal-content"
-                    overlayClassName="info-modal-overlay"
-                    onRequestClose={this.handleCloseModal}
-                >
-                    <button
-                        className="closeModal"
-                        aria-label="Close modal"
-                        onClick={this.handleCloseModal}
-                    >
-                        <svg className="close-icon" aria-hidden="true">
-                            <CloseXIcon />
-                        </svg>
-                    </button>
-                    <SanitizedContent html={this.props.content} />
-                </ReactModal>
-            </div>
-        );
-    }
-}
-
-const displayModal = ({ content, main }) => {
-    render(<Modal content={content} showModal={true} />, main);
-};
-
-Modal.propTypes = {
-    contentLabel: PropTypes.string,
-    content: PropTypes.string,
-};
-
-export default displayModal;

package/components/SessionDialog/sessionDialog.js

@@ -1,26 +0,0 @@
-import React from "react";
-import { render } from "react-dom";
-import SessionDialogUI from "../SessionDialogUI";
-
-/**
- * Renders the Session Dialog UI content.
- */
-export default class SessionDialog {
-    /**
-     * @param {Object} options - An object containing content and config data
-     * @param {Boolean} options.showImmediate
-     * @param {Number} options.warningTimeout
-     * @param {String} options.appElement
-     * @param {HTMLElement} options.rootElement - Elem inside which to render
-     */
-    constructor(options) {
-        render(
-            <SessionDialogUI
-                showImmediate={options.showImmediate}
-                warningTimeout={options.warningTimeout}
-                appElement={options.appElement}
-            />,
-            options.rootElement
-        );
-    }
-}