@madie/madie-design-system 1.2.52 → 1.2.55

package/styles/qppds/components/_rich-text-editor.scss

@@ -0,0 +1,200 @@
+.control-group {
+	border: solid 1px #9c9c9c;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	background-color: #ededed;
+	padding-left: 4px;
+	padding-right: 4px;
+
+	.button-group > button {
+		padding: 18px;
+		border-radius: 0;
+		height: 24px;
+		width: 24px;
+	}
+}
+/* Basic editor styles */
+.tiptap {
+	border: solid 1px #9c9c9c;
+	border-top: 0;
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
+	padding-left: 4px;
+	padding-right: 4px;
+
+	:first-child {
+		margin-top: 0;
+	}
+
+	/* List styles */
+	ul,
+	ol {
+		padding: 0 1rem;
+		margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+		li p {
+			margin-top: 0.25em;
+			margin-bottom: 0.25em;
+		}
+	}
+	//unorder
+	ul {
+		list-style: disc;
+		li {
+			margin-bottom: 5px;
+		}
+		li:before {
+			margin-right: 10px;
+			color: #000;
+			text-align: center;
+			display: inline-block;
+		}
+	}
+
+	//order
+	ol {
+		counter-reset: item;
+		list-style: decimal;
+
+		li {
+			counter-increment: item;
+			margin-bottom: 5px;
+		}
+	}
+
+	/* Heading styles */
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		line-height: 1.1;
+		margin-top: 2.5rem;
+		text-wrap: pretty;
+	}
+
+	h1,
+	h2 {
+		margin-top: 3.5rem;
+		margin-bottom: 1.5rem;
+	}
+
+	h1 {
+		font-size: 1.4rem;
+	}
+
+	h2 {
+		font-size: 1.2rem;
+	}
+
+	h3 {
+		font-size: 1.1rem;
+	}
+
+	h4,
+	h5,
+	h6 {
+		font-size: 1rem;
+	}
+
+	/* Code and preformatted text styles */
+	code {
+		background-color: var(--purple-light);
+		border-radius: 0.4rem;
+		color: var(--black);
+		font-size: 0.85rem;
+		padding: 0.25em 0.3em;
+	}
+
+	pre {
+		background: var(--black);
+		border-radius: 0.5rem;
+		color: var(--white);
+		font-family: "JetBrainsMono", monospace;
+		margin: 1.5rem 0;
+		padding: 0.75rem 1rem;
+
+		code {
+			background: none;
+			color: inherit;
+			font-size: 0.8rem;
+			padding: 0;
+		}
+	}
+
+	blockquote {
+		border-left: 3px solid var(--gray-3);
+		margin: 1.5rem 0;
+		padding-left: 1rem;
+	}
+
+	hr {
+		border: none;
+		border-top: 1px solid var(--gray-2);
+		margin: 2rem 0;
+	}
+}
+
+/* Bubble menu */
+.bubble-menu {
+	background-color: var(--white);
+	border: 1px solid var(--gray-1);
+	border-radius: 0.7rem;
+	box-shadow: var(--shadow);
+	display: flex;
+	padding: 0.2rem;
+
+	button {
+		background-color: unset;
+
+		&:hover {
+			background-color: var(--gray-3);
+		}
+
+		&.is-active {
+			background-color: var(--purple);
+
+			&:hover {
+				background-color: var(--purple-contrast);
+			}
+		}
+	}
+}
+
+/* Floating menu */
+.floating-menu {
+	display: flex;
+	background-color: var(--gray-3);
+	padding: 0.1rem;
+	border-radius: 0.5rem;
+
+	button {
+		background-color: unset;
+		padding: 0.275rem 0.425rem;
+		border-radius: 0.3rem;
+
+		&:hover {
+			background-color: var(--gray-3);
+		}
+
+		&.is-active {
+			background-color: var(--white);
+			color: var(--purple);
+
+			&:hover {
+				color: var(--purple-contrast);
+			}
+		}
+	}
+}
+
+table {
+	border: solid 1px #000;
+	tr {
+		border: solid 1px #000;
+		td {
+			border: solid 1px #000;
+		}
+	}
+}

package/styles/qppds/components/index.scss

@@ -20,4 +20,5 @@
 @import "./header";
 @import "./sidebar";
 @import "./pagination";
+@import "./rich-text-editor";
 @import "./toast";

package/test/components/MadieAlert.test.js

@@ -191,7 +191,7 @@ Row: 6, Col:0: VSAC: 0:87 | Request failed with status code 404 for oid = 1.16.8
         expect(copySuccess).not.toBeInTheDocument();
     });
 
-    it("It does not render when inivislbe", async () => {
+    it("It does not render when invisible", async () => {
         render(
             <MadieAlert
                 type="warning"
@@ -206,6 +206,69 @@ Row: 6, Col:0: VSAC: 0:87 | Request failed with status code 404 for oid = 1.16.8
                 }}
             />
         );
-        expect(screen.findByTestId("alert-dialog")).toBeNull;
+        await waitFor(() => {
+            expect(screen.queryByTestId("alert-dialog")).toBeNull();
+        });
+    });
+
+    it("renders minimize button when minimizeAlerts is true", () => {
+        const { getByTestId } = render(
+            <MadieAlert
+                type="warning"
+                visible={true}
+                canClose={false}
+                minimizeAlerts={true}
+                content={<h1>Test content</h1>}
+                alertProps={{
+                    "data-testid": "alert-dialog",
+                }}
+            />
+        );
+
+        expect(getByTestId("alert-dialog")).toBeInTheDocument();
+        expect(getByTestId("FullscreenExitRoundedIcon")).toBeInTheDocument();
+    });
+
+    it("hides alert when minimize button is clicked", async () => {
+            const { getByTestId, queryByTestId } = render(
+                <MadieAlert
+                    type="warning"
+                    visible={true}
+                    canClose={false}
+                    minimizeAlerts={true}
+                    content={<h1>Test content</h1>}
+                    alertProps={{
+                        "data-testid": "alert-dialog",
+                    }}
+                />
+            );
+
+            expect(getByTestId("alert-dialog")).toBeInTheDocument();
+            const minimizeButton = getByTestId("FullscreenExitRoundedIcon");
+
+            fireEvent.click(minimizeButton);
+
+            // After clicking minimize, the alert should not be in the document
+            await waitFor(() => {
+                expect(queryByTestId("alert-dialog")).not.toBeInTheDocument();
+            });
+    });
+
+    it("does not render minimize button when minimizeAlerts is false", () => {
+        const { getByTestId, queryByTestId } = render(
+            <MadieAlert
+                type="warning"
+                visible={true}
+                canClose={false}
+                minimizeAlerts={false}
+                content={<h1>Test content</h1>}
+                alertProps={{
+                    "data-testid": "alert-dialog",
+                }}
+            />
+        );
+
+        expect(getByTestId("alert-dialog")).toBeInTheDocument();
+        expect(queryByTestId("FullscreenExitRoundedIcon")).toBeNull();
     });
 });

package/test/components/MadieDialog.test.js

@@ -176,4 +176,212 @@ describe("Madie Dialog", () => {
         expect(cancelButton).toBeInTheDocument();
         expect(submitButton).not.toBeInTheDocument();
     });
+
+    it("It renders of type form with required components and tooltips for continue button when it's disabled", async () => {
+        const { getByTestId, queryByText, queryByTestId } = render(
+            <div>
+                <MadieDialog
+                    form={true}
+                    title="Basic Form"
+                    dialogProps={{
+                        open: true,
+                        onClose: onFormCancel,
+                        onSubmit: onFormSubmit,
+                        maxWidth: "sm",
+                        showRequiredFieldMessage: true,
+                    }}
+                    cancelButtonProps={{
+                        id: "cancelBtn",
+                        "data-testid": "form-cancel-button",
+                        variant: "secondary",
+                        cancelText: "Cancel",
+                    }}
+                    continueButtonProps={{
+                        type: "submit",
+                        "data-testid": "form-continue-button",
+                        disabled: true,
+                        continueText: "Continue",
+                        tooltipText: "Continue button is disabled",
+                    }}
+                >
+                    <div>this is a form message</div>
+                </MadieDialog>
+            </div>
+        );
+        expect(getByTestId("dialog-form")).toBeInTheDocument();
+        expect(queryByText("Indicates required field")).toBeInTheDocument();
+        const cancelButton = getByTestId("close-button");
+        const submitButton = queryByTestId("form-continue-button");
+        expect(cancelButton).toBeInTheDocument();
+        expect(submitButton).toBeInTheDocument();
+
+        fireEvent.mouseOver(submitButton);
+        await waitFor(() => {
+            expect(
+                queryByText("Continue button is disabled")
+            ).toBeInTheDocument();
+        });
+    });
+
+    it("It does not show tooltips for continue button when it's enabled", async () => {
+        const { getByTestId, queryByText, queryByTestId } = render(
+            <div>
+                <MadieDialog
+                    form={true}
+                    title="Basic Form"
+                    dialogProps={{
+                        open: true,
+                        onClose: onFormCancel,
+                        onSubmit: onFormSubmit,
+                        maxWidth: "sm",
+                        showRequiredFieldMessage: true,
+                    }}
+                    cancelButtonProps={{
+                        id: "cancelBtn",
+                        "data-testid": "form-cancel-button",
+                        variant: "secondary",
+                        cancelText: "Cancel",
+                    }}
+                    continueButtonProps={{
+                        type: "submit",
+                        "data-testid": "form-continue-button",
+                        disabled: false,
+                        continueText: "Continue",
+                        tooltipText: "Continue button is disabled",
+                    }}
+                >
+                    <div>this is a form message</div>
+                </MadieDialog>
+            </div>
+        );
+        expect(getByTestId("dialog-form")).toBeInTheDocument();
+        expect(queryByText("Indicates required field")).toBeInTheDocument();
+        const cancelButton = getByTestId("close-button");
+        const submitButton = queryByTestId("form-continue-button");
+        expect(cancelButton).toBeInTheDocument();
+        expect(submitButton).toBeInTheDocument();
+
+        fireEvent.mouseOver(submitButton);
+        await waitFor(() => {
+            expect(
+                queryByText("Continue button is disabled")
+            ).not.toBeInTheDocument();
+        });
+    });
+
+    it("It does not show tooltips for continue button when there is no tooltip text", async () => {
+        const { getByTestId, queryByText, queryByTestId } = render(
+            <div>
+                <MadieDialog
+                    form={true}
+                    title="Basic Form"
+                    dialogProps={{
+                        open: true,
+                        onClose: onFormCancel,
+                        onSubmit: onFormSubmit,
+                        maxWidth: "sm",
+                        showRequiredFieldMessage: true,
+                    }}
+                    cancelButtonProps={{
+                        id: "cancelBtn",
+                        "data-testid": "form-cancel-button",
+                        variant: "secondary",
+                        cancelText: "Cancel",
+                    }}
+                    continueButtonProps={{
+                        type: "submit",
+                        "data-testid": "form-continue-button",
+                        continueText: "Continue",
+                    }}
+                >
+                    <div>this is a form message</div>
+                </MadieDialog>
+            </div>
+        );
+        expect(getByTestId("dialog-form")).toBeInTheDocument();
+        expect(queryByText("Indicates required field")).toBeInTheDocument();
+        const cancelButton = getByTestId("close-button");
+        const submitButton = queryByTestId("form-continue-button");
+        expect(cancelButton).toBeInTheDocument();
+        expect(submitButton).toBeInTheDocument();
+
+        fireEvent.mouseOver(submitButton);
+        await waitFor(() => {
+            expect(
+                queryByText("Continue button is disabled")
+            ).not.toBeInTheDocument();
+        });
+    });
+
+    it("It renders popover button", async () => {
+        const onClose = jest.fn();
+        const open = true;
+        const setOpen = jest.fn();
+        const { getByTestId, queryByText } = render(
+            <div>
+                <MadieDialog
+                    form={true}
+                    title="Basic Form"
+                    dialogProps={{
+                        onClose,
+                        open,
+                        maxWidth: "lg",
+                        fullWidth: true,
+                        onSubmit: () => {
+                            console.log("Submitted");
+                            setOpen(false);
+                        },
+                    }}
+                    cancelButtonProps={{
+                        variant: "secondary",
+                        cancelText: "Cancel",
+                        "data-testid": "cancel-button",
+                    }}
+                    continueButtonProps={{
+                        variant: "cyan",
+                        type: "submit",
+                        "data-testid": "continue-button",
+                        continueText: "Continue",
+                        popoverOptions: [
+                            {
+                                label: "Export",
+                                dataTestId: "export-option",
+                                toImplementFunction: () =>
+                                    console.log("Export clicked"),
+                            },
+                            {
+                                label: "Export for Publishing",
+                                dataTestId: "export-publishing-option",
+                                toImplementFunction: () =>
+                                    console.log(
+                                        "Export for Publishing clicked"
+                                    ),
+                            },
+                        ],
+                    }}
+                >
+                    <div>this is a form message</div>
+                </MadieDialog>
+            </div>
+        );
+
+        const cancelButton = getByTestId("cancel-button");
+        const submitButton = getByTestId("continue-button");
+        expect(cancelButton).toBeInTheDocument();
+        expect(submitButton).toBeInTheDocument();
+
+        fireEvent.click(submitButton);
+        await waitFor(() => {
+            expect(queryByText("Export")).toBeInTheDocument();
+            expect(queryByText("Export for Publishing")).toBeInTheDocument();
+        });
+        const exportOption = getByTestId("export-option");
+        const exportPublishingOption = getByTestId("export-publishing-option");
+        expect(exportOption).toBeInTheDocument();
+        expect(exportPublishingOption).toBeInTheDocument();
+        fireEvent.click(exportOption);
+        await waitFor(() => {
+            expect(setOpen).toHaveBeenCalledTimes(1);
+        });
+    });
 });