@madie/madie-design-system 1.2.37 → 1.2.39

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@madie/madie-design-system",
-  "version": "1.2.37",
+  "version": "1.2.39",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@madie/madie-design-system",
-      "version": "1.2.37",
+      "version": "1.2.39",
       "license": "CC0-1.0",
       "dependencies": {
         "@cmsgov/design-system": "^5.0.2",
@@ -4944,6 +4944,7 @@
       "resolved": "https://registry.npmjs.org/@storybook/addon-postcss/-/addon-postcss-2.0.0.tgz",
       "integrity": "sha512-Nt82A7e9zJH4+A+VzLKKswUfru+T6FJTakj4dccP0i8DSn7a0CkzRPrLuZBq8tg4voV6gD74bcDf3gViCVBGtA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@storybook/node-logger": "^6.1.14",
         "css-loader": "^3.6.0",
@@ -9111,9 +9112,9 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -10865,17 +10866,18 @@
       }
     },
     "node_modules/express": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
-      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
         "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.6.0",
+        "cookie": "0.7.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -10889,7 +10891,7 @@
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
         "proxy-addr": "~2.0.7",
         "qs": "6.13.0",
         "range-parser": "~1.2.1",
@@ -10904,12 +10906,16 @@
       },
       "engines": {
         "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/express/node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
       "dev": true,
       "engines": {
         "node": ">= 0.6"
@@ -17424,9 +17430,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "dev": true,
       "funding": [
         {
@@ -17434,6 +17440,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -18126,10 +18133,11 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
-      "dev": true
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/path-type": {
       "version": "4.0.0",

package/package.json

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

package/styles/_qpp-style.scss

@@ -14,6 +14,7 @@
 @import 'components/links';
 @import 'components/madie-discard-dialog';
 @import 'components/madie-delete-dialog';
+@import 'components/madie-confirm-dialog';
 @import 'components/madie-alert';
 @import 'components/madie-tooltip';
 @import 'components/text-field-variable';

package/styles/components/_madie-confirm-dialog.scss

@@ -0,0 +1,34 @@
+#confirm-dialog-body {
+    font-family: Rubik, sans-serif;
+    display: flex;
+    flex-direction: column;
+  
+    .dialog-warning-body {
+      font-size: 16px;
+      line-height: 19px;
+  
+      p {
+        margin-bottom: 18px;
+      }
+  
+      .strong {
+        font-weight: 500;
+      }
+    }
+  
+    .dialog-warning-action {
+      font-size: 14px;
+      line-height: 26px;
+      font-weight: 400;
+      color: #d92f2f;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-left: -3px;
+  
+      > p {
+        margin-left: 8px;
+        margin-bottom: 0;
+      }
+    }
+  }

package/styles/qppds/components/_madie-confirm-dialog.scss

@@ -0,0 +1,35 @@
+#confirm-dialog-body {
+    font-family: Rubik, sans-serif;
+    display: flex;
+    flex-direction: column;
+  
+    .dialog-warning-body {
+      font-size: 16px;
+      line-height: 19px;
+  
+      p {
+        margin-bottom: 18px;
+      }
+  
+      .strong {
+        font-weight: 500;
+      }
+    }
+  
+    .dialog-warning-action {
+      font-size: 14px;
+      line-height: 26px;
+      font-weight: 400;
+      color: #d92f2f;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-left: -3px;
+  
+      > p {
+        margin-left: 8px;
+        margin-bottom: 0;
+      }
+    }
+  }
+  

package/styles/qppds/components/index.scss

@@ -1,6 +1,7 @@
 @import './link';
 @import './madie-discard-dialog';
 @import './madie-delete-dialog';
+@import './madie-confirm-dialog';
 @import './madie-tooltip';
 @import './madie-alert';
 @import './button';

package/test/components/MadieConfirmDialog.test.js

@@ -0,0 +1,159 @@
+import "@testing-library/jest-dom";
+import { describe, expect, test } from "@jest/globals";
+import MadieConfirmDialog from "../../components/MadieConfirmDialog/index";
+import { act } from "react-dom/test-utils";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+
+import React, { useState } from "react";
+
+const DialogTester = () => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    return (
+        <div>
+            <button
+                data-testid="dialog-tester"
+                onClick={() => setDialogOpen(true)}
+            >
+                dialog tester
+            </button>
+            <MadieConfirmDialog
+                open={dialogOpen}
+                onClose={() => setDialogOpen(false)}
+                onContinue={() => setDialogOpen(false)}
+                dialogTitle="Are You Sure"
+                name="log out of UMLS"
+                action="confirm"
+            />
+        </div>
+    );
+};
+
+const DialogTesterForDiscard = () => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    return (
+        <div>
+            <button
+                data-testid="discard-dialog-tester"
+                onClick={() => setDialogOpen(true)}
+            >
+                discard dialog tester
+            </button>
+            <MadieConfirmDialog
+                open={dialogOpen}
+                onClose={() => setDialogOpen(false)}
+                onContinue={() => setDialogOpen(false)}
+                action="discard"
+                dialogTitle="Discard Changes"
+                name="discard your changes"
+                continueText= "Yes, Discard All Changes"
+                cancelText="No, Keep Working"
+            />
+        </div>
+    );
+};
+
+const DialogTesterForDelete = () => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    return (
+        <div>
+            <button
+                data-testid="delete-dialog-tester"
+                onClick={() => setDialogOpen(true)}
+            >
+                delete dialog tester
+            </button>
+            <MadieConfirmDialog
+                open={dialogOpen}
+                onClose={() => setDialogOpen(false)}
+                onContinue={() => setDialogOpen(false)}
+                action="delete"
+                dialogTitle="Are You Sure"
+                name="delete this Definition"
+                continueText="Yes, Delete"
+            />
+        </div>
+    );
+};
+
+describe("MadieConfirmDialog", () => {
+    test("Confirm Dialog renders", async () => {
+        await act(async () => {
+            const { findByTestId, getByTestId, queryByText } = await render(
+                <DialogTester />
+            );
+            const result = await findByTestId("dialog-tester");
+            fireEvent.click(result);
+            const confirmDialog = await getByTestId("confirm-dialog");
+            expect(confirmDialog).toBeInTheDocument();
+            await waitFor(() => {
+                expect(queryByText("log out of UMLS")).toBeVisible();
+            });
+        });
+    });
+
+    test("Discard Dialog renders", async () => {
+        await act(async () => {
+            const { findByTestId, getByTestId, queryByText } = await render(
+                <DialogTesterForDiscard />
+            );
+            const result = await findByTestId("discard-dialog-tester");
+            fireEvent.click(result);
+            const confirmDialog = await getByTestId("discard-dialog");
+            expect(confirmDialog).toBeInTheDocument();
+            await waitFor(() => {
+                expect(queryByText("You have unsaved changes.")).toBeVisible();
+                expect(queryByText("Discard Changes")).toBeVisible();
+            });
+        });
+    });
+
+    test("Delete Dialog renders", async () => {
+        await act(async () => {
+            const { findByTestId, getByTestId, queryByText } = await render(
+                <DialogTesterForDelete />
+            );
+            const result = await findByTestId("delete-dialog-tester");
+            fireEvent.click(result);
+            const confirmDialog = await getByTestId("delete-dialog");
+            expect(confirmDialog).toBeInTheDocument();
+            await waitFor(() => {
+                expect(queryByText("delete this Definition")).toBeVisible();
+            });
+        });
+    });
+
+    test("Dialog disappears onContinue", async () => {
+        await act(async () => {
+            const { findByTestId, getByTestId, queryByText } = await render(
+                <DialogTester />
+            );
+            const result = await findByTestId("dialog-tester");
+            fireEvent.click(result);
+            const continueButton = await getByTestId(
+                "confirm-dialog-continue-button"
+            );
+            expect(continueButton).toBeInTheDocument();
+            fireEvent.click(continueButton);
+            await waitFor(() => {
+                expect(queryByText("log out of UMLS")).not.toBeVisible();
+            });
+        });
+    });
+    test("Dialog disappears onClose", async () => {
+        await act(async () => {
+            const { findByTestId, getByTestId, queryByText } = await render(
+                <DialogTester />
+            );
+            const result = await findByTestId("dialog-tester");
+            fireEvent.click(result);
+            const cancelButton = await getByTestId(
+                "confirm-dialog-cancel-button"
+            );
+            expect(cancelButton).toBeInTheDocument();
+            fireEvent.click(cancelButton);
+            await waitFor(() => {
+                expect(queryByText("log out of UMLS")).not.toBeVisible();
+            });
+        });
+    });
+});