@madie/madie-design-system 1.2.53 → 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();
     });
 });