@madie/madie-design-system 1.2.64 → 1.2.67

package/package.json

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

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

@@ -20,8 +20,12 @@
 		border-top: 0;
 		border-bottom-left-radius: 3px;
 		border-bottom-right-radius: 3px;
-		padding-left: 4px;
-		padding-right: 4px;
+		padding-left: 0.2px;
+		padding-right: 0.2px;
+
+		&.has-error {
+			border: 1.5px solid #ae1c1c;
+		}
 
 		:first-child {
 			margin-top: 0;
@@ -188,6 +192,11 @@
 			}
 		}
 	}
+
+	.rich-text-editor_read_only {
+		white-space: pre-wrap;
+	}
+	
 	/* Table-specific styling */
 	  table {
 		border-collapse: collapse;

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

@@ -20,8 +20,12 @@
 		border-top: 0;
 		border-bottom-left-radius: 3px;
 		border-bottom-right-radius: 3px;
-		padding-left: 4px;
-		padding-right: 4px;
+		padding-left: 0.2px;
+		padding-right: 0.2px;
+
+		&.has-error {
+			border: 1.5px solid #ae1c1c;
+		}
 
 		:first-child {
 			margin-top: 0;
@@ -189,6 +193,10 @@
 		}
 	}
 
+	.rich-text-editor_read_only {
+		white-space: pre-wrap;
+	}
+
 	/* Table-specific styling */
 	table {
 		border-collapse: collapse;

package/test/components/RichTextEditor.test.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import RichTextEditor from "../../components/RichTextEditor/index";
+import DOMPurify from "dompurify";
 
 describe("RichTextEditor Component", () => {
     const mockOnChange = jest.fn();
@@ -88,4 +89,45 @@ describe("RichTextEditor Component", () => {
         expect(editorContent).toBeInTheDocument();
         expect(editorContent).toHaveTextContent("Safe Content");
     });
+
+    it("test renders sanitized content with preserved whitespace when readOnly is true", () => {
+        const content = `this is a statement
+                            this is a statement    
+                                this is a statement
+
+                            --------------------- 
+                            this is a statement`;
+
+        render(
+            <RichTextEditor
+                id="test-editor"
+                label="Test Label"
+                content={content}
+                onChange={mockOnChange}
+                readOnly
+            />
+        );
+
+        const readOnlyContent = screen.getByTestId("test-editor-value");
+
+        // Ensure the innerHTML matches the sanitized version of the content
+        expect(readOnlyContent.innerHTML).toBe(DOMPurify.sanitize(content));
+    });
+
+    it("displays helper text when error is true", () => {
+        render(
+            <RichTextEditor
+                id="test-editor"
+                label="Test Label"
+                content={null}
+                helperText="This field is required."
+                required={true}
+                error={true}
+                onChange={mockOnChange}
+            />
+        );
+
+        const helperTextElement = screen.getByTestId("test-editor-helper-text");
+        expect(helperTextElement).toHaveTextContent("This field is required.");
+    });
 });