@madie/madie-design-system 1.2.62 → 1.2.64

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@madie/madie-design-system",
-    "version": "1.2.62",
+    "version": "1.2.64",
     "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

@@ -188,14 +188,47 @@
 			}
 		}
 	}
-
-	table {
-		border: solid 1px #000;
-		tr {
-			border: solid 1px #000;
-			td {
-				border: solid 1px #000;
-			}
-		}
-	}
+	/* Table-specific styling */
+	  table {
+		border-collapse: collapse;
+		margin: 0;
+		overflow: hidden;
+		table-layout: fixed;
+		width: 100%;
+
+		td,
+		th {
+		  border: 1px solid #9c9c9c;
+		  box-sizing: border-box;
+		  min-width: 1em;
+		  padding: 6px 8px;
+		  position: relative;
+		  vertical-align: top;
+
+		  > * {
+			margin-bottom: 0;
+		  }
+		}
+
+		th {
+		  background-color: #3d25140d;
+		  font-weight: bold;
+		  text-align: left;
+		}
+
+		.column-resize-handle {
+		  background-color: #209fa6;
+		  bottom: -2px;
+		  pointer-events: none;
+		  position: absolute;
+		  right: -2px;
+		  top: 0;
+		  width: 4px;
+		}
+	  }
+
+	  .tableWrapper {
+		margin: 1.5rem 0;
+		overflow-x: auto;
+	  }
 }

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

@@ -189,13 +189,47 @@
 		}
 	}
 
+	/* Table-specific styling */
 	table {
-		border: solid 1px #000;
-		tr {
-			border: solid 1px #000;
-			td {
-				border: solid 1px #000;
+		border-collapse: collapse;
+		margin: 0;
+		overflow: hidden;
+		table-layout: fixed;
+		width: 100%;
+
+		td,
+		th {
+			border: 1px solid #9c9c9c;
+			box-sizing: border-box;
+			min-width: 1em;
+			padding: 6px 8px;
+			position: relative;
+			vertical-align: top;
+
+			> * {
+				margin-bottom: 0;
 			}
 		}
+
+		th {
+			background-color: #3d25140d;
+			font-weight: bold;
+			text-align: left;
+		}
+
+		.column-resize-handle {
+			background-color: #209fa6;
+			bottom: -2px;
+			pointer-events: none;
+			position: absolute;
+			right: -2px;
+			top: 0;
+			width: 4px;
+		}
+	}
+
+	.tableWrapper {
+		margin: 1.5rem 0;
+		overflow-x: auto;
 	}
 }

package/test/components/AutoComplete.test.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import "@testing-library/jest-dom";
 import { describe, expect } from "@jest/globals";
 import AutoComplete from "../../components/AutoComplete/AutoComplete";
-import {render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 describe("AutoComplete Component", () => {
@@ -29,7 +29,12 @@ describe("AutoComplete Component", () => {
         expect(option).toBeInTheDocument();
 
         await userEvent.click(option);
-        expect(mockOnChange).toHaveBeenCalledWith("autocomplete", "Option1", expect.any(String), expect.any(Object));
+        expect(mockOnChange).toHaveBeenCalledWith(
+            "autocomplete",
+            "Option1",
+            expect.any(String),
+            expect.any(Object)
+        );
     });
 
     it("renders AutoComplete in disabled mode", async () => {
@@ -43,9 +48,25 @@ describe("AutoComplete Component", () => {
             />
         );
 
+        const disabledInput = screen.getByRole("combobox");
+        expect(disabledInput).toHaveValue("Option1");
+        expect(disabledInput).toBeDisabled();
+    });
+
+    it("renders AutoComplete in read only mode", async () => {
+        render(
+            <AutoComplete
+                id="autocomplete-disabled"
+                dataTestId="autocomplete-disabled"
+                label="Auto Complete"
+                readOnly
+                value="Option1"
+            />
+        );
+
         const readOnlyField = screen.getByRole("textbox");
-        expect(readOnlyField).toHaveTextContent("Option1");
-        expect(readOnlyField).toHaveAttribute("readOnly");
+        expect(readOnlyField).toHaveValue("Option1");
+        expect(readOnlyField).toHaveProperty("readOnly", true);
     });
 
     it("renders AutoComplete with helper text", () => {

package/test/components/DateField.test.js

@@ -44,7 +44,7 @@ describe("DateField", () => {
         });
     });
 
-    it("renders ReadOnlyTextField when disabled is true", () => {
+    it("renders disabled DateField when disabled is true", () => {
         const mockProps = {
             id: "test_id",
             label: "Test Label",
@@ -54,20 +54,38 @@ describe("DateField", () => {
 
         render(<DateField {...mockProps} />);
 
-        const readOnlyField = screen.getByText("Test Label");
-        expect(readOnlyField).toBeInTheDocument();
-        const dateField = screen.getByRole("textbox");
-        expect(dateField).toHaveTextContent("10/01/2023");
-        expect(dateField).toHaveAttribute("readOnly");
+        const label = screen.getByText("Test Label");
+        expect(label).toBeInTheDocument();
+
+        const disabledField = screen.getByRole("textbox");
+        expect(disabledField).toHaveValue("10/01/2023");
+        expect(disabledField).toBeDisabled();
     });
 
-    it("renders placeholder '-' when value is null and disabled is true", () => {
+    it("renders ReadOnlyTextField when readOnly is true", () => {
+        const mockProps = {
+            id: "test_id",
+            label: "Test Label",
+            value: dayjs.utc("2023-10-01"),
+            readOnly: true,
+        };
+
+        render(<DateField {...mockProps} />);
+
+        const label = screen.getByText("Test Label");
+        expect(label).toBeInTheDocument();
+        const readOnlyField = screen.getByRole("textbox");
+        expect(readOnlyField).toHaveTextContent("10/01/2023");
+        expect(readOnlyField).toHaveProperty("readOnly", true);
+    });
+
+    it("renders placeholder '-' when value is null and readOnly is true", () => {
         const mockProps = {
             id: "test_id",
             label: "Test Label",
             value: null,
             required: false,
-            disabled: true,
+            readOnly: true,
         };
 
         const { getByLabelText } = render(<DateField {...mockProps} />);

package/test/components/DateTimeField.test.js

@@ -32,7 +32,7 @@ describe("DateTimeField", () => {
         });
     });
 
-    it("renders ReadOnlyTextField when disabled is true", () => {
+    it("renders disabled DateTimeField when disabled is true", () => {
         const label = "Test Label";
         const dateTimeValue = new Date("2023-01-01T12:00:00Z");
         const id = "test-id";
@@ -47,13 +47,13 @@ describe("DateTimeField", () => {
             />
         );
 
-        const readOnlyField = getByLabelText(label);
-        expect(readOnlyField).toBeInTheDocument();
-        expect(readOnlyField).toHaveTextContent("01/01/2023 12:00 PM");
-        expect(readOnlyField).toHaveAttribute("readOnly");
+        const disabledField = getByLabelText(label);
+        expect(disabledField).toBeInTheDocument();
+        expect(disabledField).toHaveValue("01/01/2023 12:00 PM");
+        expect(disabledField).toBeDisabled();
     });
 
-    it("renders empty value in ReadOnlyTextField when dateTimeValue is null", () => {
+    it("renders empty value in disabled DateTimeField when dateTimeValue is null", () => {
         const label = "Test Label";
         const id = "test-id";
 
@@ -67,8 +67,29 @@ describe("DateTimeField", () => {
             />
         );
 
+        const disabledField = getByLabelText(label);
+        expect(disabledField).toBeInTheDocument();
+        expect(disabledField).toHaveValue("");
+    });
+
+    it("renders ReadOnlyTextField when readOnly is true", () => {
+        const label = "Test Label";
+        const dateTimeValue = new Date("2023-01-01T12:00:00Z");
+        const id = "test-id";
+
+        const { getByLabelText } = render(
+            <DateTimeField
+                label={label}
+                dateTimeValue={dateTimeValue}
+                handleDateTimeChange={() => {}}
+                readOnly={true}
+                id={id}
+            />
+        );
+
         const readOnlyField = getByLabelText(label);
         expect(readOnlyField).toBeInTheDocument();
-        expect(readOnlyField).toHaveTextContent("-");
+        expect(readOnlyField).toHaveValue("01/01/2023 12:00 PM");
+        expect(readOnlyField).toHaveProperty("readOnly", true);
     });
 });

package/test/components/RadioButton.test.js

@@ -50,9 +50,10 @@ describe("RadioButton Component", () => {
             />
         );
 
-        const option1 = screen.getByRole("textbox");
-        expect(option1).toHaveTextContent("Option 1");
-        expect(option1).toHaveAttribute("readOnly");
+        const radios = screen.getAllByRole("radio");
+        radios.forEach((radio) => {
+            expect(radio).toBeDisabled();
+        });
     });
 
     it("renders helper text", () => {
@@ -85,7 +86,7 @@ describe("RadioButton Component", () => {
         expect(errorText).toHaveStyle("color: #d32f2f");
     });
 
-    it("renders placeholder '-' when disabled and no value is provided", () => {
+    it("renders placeholder '-' when read only and no value is provided", () => {
         const options = [
             { value: "option1", label: "Option 1" },
             { value: "option2", label: "Option 2" },
@@ -97,11 +98,12 @@ describe("RadioButton Component", () => {
                 dataTestId="radio-button-placeholder"
                 label="Radio Button"
                 options={options}
-                disabled
+                readOnly
             />
         );
 
         const readOnlyField = screen.getByRole("textbox");
         expect(readOnlyField).toHaveTextContent("-");
+        expect(readOnlyField).toHaveProperty("readOnly", true);
     });
 });

package/test/components/ReadOnlyTextField.test.js

@@ -16,9 +16,11 @@ describe("ReadOnlyTextField", () => {
                 size="small"
             />
         );
-        const textNode = getByRole(document.body, "textbox", { name: "test Name" });
+        const textNode = getByRole(document.body, "textbox", {
+            name: "test Name",
+        });
         expect(textNode).toBeInTheDocument();
-        expect(textNode).toHaveAttribute("readOnly");
+        expect(textNode).toHaveProperty("readOnly", true);
         expect(textNode).toHaveTextContent("-");
     });
 });

package/test/components/RichTextEditor.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import {render, screen, fireEvent, waitFor} from "@testing-library/react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import RichTextEditor from "../../components/RichTextEditor/index";
 
 describe("RichTextEditor Component", () => {
@@ -20,7 +20,9 @@ describe("RichTextEditor Component", () => {
         expect(screen.getByText("Test Label")).toBeInTheDocument();
 
         // Check if the editor content is rendered
-        expect(screen.getByTestId("test-label-rich-text-editor")).toBeInTheDocument();
+        expect(
+            screen.getByTestId("test-label-rich-text-editor")
+        ).toBeInTheDocument();
     });
 
     it("calls onChange when content is updated", async () => {
@@ -36,7 +38,9 @@ describe("RichTextEditor Component", () => {
 
         // Simulate content change
         const editorContent = screen.getByRole("textbox");
-        fireEvent.input(editorContent, {target: {innerHTML: "Updated Content"}});
+        fireEvent.input(editorContent, {
+            target: { innerHTML: "Updated Content" },
+        });
 
         // Check if onChange is called
         await waitFor(() => {
@@ -44,19 +48,44 @@ describe("RichTextEditor Component", () => {
         });
     });
 
-    it("renders sanitized content when canEdit is false", () => {
+    it("renders sanitized content within editor when disabled is true", () => {
+        render(
+            <RichTextEditor
+                id="test-editor"
+                label="Test Label"
+                content="<script>alert('XSS')</script><p>Safe Content</p>"
+                onChange={mockOnChange}
+                disabled
+            />
+        );
+
+        // Check if sanitized content is rendered
+        expect(screen.getByText("Safe Content")).toBeInTheDocument();
+        expect(screen.queryByText("alert('XSS')")).not.toBeInTheDocument();
+
+        const editorContent = screen.getByRole("textbox");
+        expect(editorContent).toBeInTheDocument();
+        expect(editorContent).toHaveAttribute("contenteditable", "false");
+        expect(editorContent).toHaveTextContent("Safe Content");
+    });
+
+    it("renders read only, sanitized content when readOnly is true", () => {
         render(
             <RichTextEditor
                 id="test-editor"
                 label="Test Label"
                 content="<script>alert('XSS')</script><p>Safe Content</p>"
                 onChange={mockOnChange}
-                disabled={true}
+                readOnly
             />
         );
 
         // Check if sanitized content is rendered
         expect(screen.getByText("Safe Content")).toBeInTheDocument();
         expect(screen.queryByText("alert('XSS')")).not.toBeInTheDocument();
+
+        const editorContent = screen.getByTestId("test-editor-value");
+        expect(editorContent).toBeInTheDocument();
+        expect(editorContent).toHaveTextContent("Safe Content");
     });
 });

package/test/components/Select.test.js

@@ -117,17 +117,37 @@ describe("Select", () => {
                 disabled
                 helperText="helper text"
                 label="Test"
-                value=""
+                value="select value"
                 id="test-select"
                 inputProps={{ "data-testid": "test-input" }}
                 data-testid="test-select"
                 size="small"
             />
         );
-        const value = screen.getByRole("textbox");
-        expect(value).toHaveTextContent("-");
-        expect(value).toHaveAttribute("readOnly");
+        const select = screen.getByTestId("test-input");
+        expect(select).toBeDisabled();
+        expect(select).toHaveValue("select value");
     });
+
+    test("Select renders read only", () => {
+        render(
+            <Select
+                readOnly
+                helperText="helper text"
+                label="Test"
+                value="select value"
+                id="test-select"
+                inputProps={{ "data-testid": "test-input" }}
+                data-testid="test-select"
+                size="small"
+            />
+        );
+
+        const readOnlyField = screen.getByRole("textbox");
+        expect(readOnlyField).toHaveTextContent("select value");
+        expect(readOnlyField).toHaveProperty("readOnly", true);
+    });
+
     test("Select renders error", async () => {
         await act(async () => {
             const { findByText } = render(

package/test/components/TextArea.test.js

@@ -6,11 +6,10 @@ import { act, Simulate } from "react-dom/test-utils";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-
 describe("TextArea", () => {
     test("TextArea exists, and simulates input correctly", async () => {
         await act(async () => {
-            const {findByTestId, getByTestId} = render(
+            const { findByTestId, getByTestId } = render(
                 <TextArea
                     placeholder="test Name"
                     required
@@ -32,14 +31,14 @@ describe("TextArea", () => {
     });
     test("TextArea renders with helper text", async () => {
         await act(async () => {
-            const {findByText} = render(
+            const { findByText } = render(
                 <TextArea
                     error={false}
                     placeholder="test Name"
                     helperText="helper text"
                     label="test Name"
                     id="testName"
-                    inputProps={{"data-testid": "test-name-input"}}
+                    inputProps={{ "data-testid": "test-name-input" }}
                     data-testid="test-name-text-field"
                 />
             );
@@ -47,6 +46,23 @@ describe("TextArea", () => {
             expect(helperText).toBeInTheDocument();
         });
     });
+    test("renders TextArea for readOnly mode", async () => {
+        render(
+            <TextArea
+                readOnly
+                placeholder="test Name"
+                helperText="helper text"
+                label="test Name"
+                id="testName"
+                inputProps={{ "data-testid": "test-name-input" }}
+                data-testid="test-name-text-field"
+                value="test value"
+            />
+        );
+        const textArea = await screen.findByRole("textbox");
+        expect(textArea).toHaveTextContent("test value");
+        expect(textArea).toHaveProperty("readOnly", true);
+    });
     test("renders TextArea for disabled mode", async () => {
         render(
             <TextArea
@@ -55,25 +71,25 @@ describe("TextArea", () => {
                 helperText="helper text"
                 label="test Name"
                 id="testName"
-                inputProps={{"data-testid": "test-name-input"}}
+                inputProps={{ "data-testid": "test-name-input" }}
                 data-testid="test-name-text-field"
                 value="test value"
             />
         );
         const textArea = await screen.findByRole("textbox");
         expect(textArea).toHaveTextContent("test value");
-        expect(textArea).toHaveAttribute("readOnly");
+        expect(textArea).toBeDisabled();
     });
     test("HelperText renders errored", async () => {
         await act(async () => {
-            const {findByText} = render(
+            const { findByText } = render(
                 <TextArea
                     error
                     placeholder="test Name"
                     helperText="helper text"
                     label="test Name"
                     id="testName"
-                    inputProps={{"data-testid": "test-name-input"}}
+                    inputProps={{ "data-testid": "test-name-input" }}
                     data-testid="test-name-text-field"
                 />
             );
@@ -83,7 +99,7 @@ describe("TextArea", () => {
     });
     test("TextArea renders with default propTypes left out", async () => {
         await act(async () => {
-            const {findByText} = render(
+            const { findByText } = render(
                 <TextArea
                     // error purposely omitted
                     // disabled purposely omitted
@@ -91,7 +107,7 @@ describe("TextArea", () => {
                     helperText="helper text"
                     label="test Name"
                     id="testName"
-                    inputProps={{"data-testid": "test-name-input"}}
+                    inputProps={{ "data-testid": "test-name-input" }}
                     data-testid="test-name-text-field"
                 />
             );
@@ -101,7 +117,7 @@ describe("TextArea", () => {
     });
     test("TextArea shows maxLength", async () => {
         await act(async () => {
-            const {findByTestId, getByTestId, findByText} = render(
+            const { findByTestId, getByTestId, findByText } = render(
                 <TextArea
                     placeholder="test Name"
                     required

package/test/components/TextField.test.js

@@ -51,6 +51,24 @@ describe("TextField", () => {
             expect(helperText).toBeInTheDocument();
         });
     });
+    test("renders TextField for read only mode", async () => {
+        render(
+            <TextField
+                readOnly
+                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"
+                value="test value"
+            />
+        );
+        const textField = await screen.findByRole("textbox");
+        expect(textField).toHaveValue("test value");
+        expect(textField).toHaveProperty("readOnly", true);
+    });
     test("renders TextField for disabled mode", async () => {
         render(
             <TextField
@@ -59,15 +77,15 @@ describe("TextField", () => {
                 helperText="helper text"
                 label="test Name"
                 id="testName"
-                inputProps={{"data-testid": "test-name-input"}}
+                inputProps={{ "data-testid": "test-name-input" }}
                 data-testid="test-name-text-field"
                 size="small"
                 value="test value"
             />
         );
         const textField = await screen.findByRole("textbox");
-        expect(textField).toHaveTextContent("test value");
-        expect(textField).toHaveAttribute("readOnly");
+        expect(textField).toHaveValue("test value");
+        expect(textField).toBeDisabled();
     });
     test("HelperText renders errored", async () => {
         await act(async () => {