@madie/madie-design-system 1.2.63 → 1.2.65

package/components/AutoComplete/AutoComplete.jsx

@@ -76,6 +76,7 @@ const AutoComplete = ({
     dataTestId,
     options = [],
     disabled = false,
+    readOnly = false,
     label,
     placeholder,
     multiple = false,
@@ -85,7 +86,7 @@ const AutoComplete = ({
     onChange,
     ...rest
 }) => {
-    if (disabled) {
+    if (readOnly) {
         return (
             <ReadOnlyTextField
                 required={required}
@@ -95,7 +96,7 @@ const AutoComplete = ({
                 {...rest}
                 value={_.isEmpty(rest.value) ? "-" : rest.value}
             />
-        )
+        );
     }
 
     return (
@@ -250,6 +251,7 @@ AutoComplete.propTypes = {
     placeholder: PropTypes.string,
     required: PropTypes.bool,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
     multiple: PropTypes.bool,
     error: PropTypes.bool,
     label: PropTypes.string,

package/components/AutoComplete/AutoComplete.stories.js

@@ -39,6 +39,12 @@ AutoCompleteWithLabelDisabled.args = {
     value: "Option1",
 };
 
+export const AutoCompleteWithLabelReadOnly = TemplateSingleSelect.bind({});
+AutoCompleteWithLabelReadOnly.args = {
+    readOnly: true,
+    value: "Option1",
+};
+
 export const AutoCompleteWithHelperText = TemplateSingleSelect.bind({});
 AutoCompleteWithHelperText.args = {
     helperText: "Helper text goes here",
@@ -90,6 +96,12 @@ AutoCompleteMultipleDisabled.args = {
     placeholder: "Start typing",
 };
 
+export const AutoCompleteMultipleReadOnly = TemplateMultipleSelect.bind({});
+AutoCompleteMultipleReadOnly.args = {
+    readOnly: true,
+    value: "Option1",
+};
+
 export const AutoCompleteMultipleWithError = TemplateMultipleSelect.bind({});
 AutoCompleteMultipleWithError.args = {
     required: true,

package/components/DateField/DateField.jsx

@@ -48,7 +48,8 @@ const DateField = ({
     label,
     value,
     handleDateChange,
-    disabled,
+    disabled = false,
+    readOnly = false,
     error,
     helperText,
     required = false,
@@ -56,7 +57,7 @@ const DateField = ({
     textFieldSx = {},
     ...rest
 }) => {
-    if (disabled) {
+    if (readOnly) {
         return (
             <ReadOnlyTextField
                 required={required}
@@ -66,7 +67,7 @@ const DateField = ({
                 {...rest}
                 value={value ? dayjs.utc(value).format("MM/DD/YYYY") : "-"}
             />
-        )
+        );
     }
 
     if (containerSx === undefined || containerSx === null) {
@@ -117,6 +118,7 @@ DateField.propTypes = {
     value: PropTypes.object,
     handleDateChange: PropTypes.func.isRequired,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
     id: PropTypes.string,
     error: PropTypes.bool,
     helperText: PropTypes.string,

package/components/DateField/DateField.stories.jsx

@@ -39,3 +39,19 @@ export const DateFieldComponentDisabled = (args) => {
         </div>
     );
 };
+
+export const DateFieldComponentReadOnly = (args) => {
+    const handleDateChange = (e) => {
+        console.log("Handle change triggered", e.target.value);
+    };
+    return (
+        <div className="qpp-u-padding--16">
+            <DateField
+                readOnly
+                label="Status Date"
+                handleDateChange={handleDateChange}
+                value="2023-10-01"
+            />
+        </div>
+    );
+};

package/components/DateTimeField/DateTimeField.jsx

@@ -51,18 +51,23 @@ const DateTimeField = ({
     label,
     dateTimeValue,
     handleDateTimeChange,
-    disabled,
+    disabled = false,
+    readOnly = false,
     id = "default_dateTime-input",
 }) => {
-    if (disabled) {
+    if (readOnly) {
         return (
             <ReadOnlyTextField
                 label={label}
-                value={dateTimeValue ? dayjs.utc(dateTimeValue).format("MM/DD/YYYY hh:mm A") : "-"}
+                value={
+                    dateTimeValue
+                        ? dayjs.utc(dateTimeValue).format("MM/DD/YYYY hh:mm A")
+                        : "-"
+                }
                 id={id}
                 size="small"
             />
-        )
+        );
     }
     return (
         <FormControl>
@@ -95,6 +100,7 @@ DateTimeField.propTypes = {
     handleDateTimeChange: PropTypes.func.isRequired,
     label: PropTypes.string.isRequired,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
 };
 
 export default DateTimeField;

package/components/DateTimeField/DateTimeField.stories.jsx

@@ -39,3 +39,31 @@ export const TimeDateFieldComponentDisabled = (args) => {
         </div>
     );
 };
+
+export const TimeDateFieldComponentDisabledNoValue = (args) => {
+    return (
+        <div className="qpp-u-padding--16">
+            <DateTimeField
+                disabled={true}
+                id="status_date_time"
+                label="Status Date/Time"
+                handleDateTimeChange={(e) => {}}
+                dateTimeValue={null}
+            />
+        </div>
+    );
+};
+
+export const TimeDateFieldComponentReadOnly = (args) => {
+    return (
+        <div className="qpp-u-padding--16">
+            <DateTimeField
+                readOnly
+                id="status_date_time"
+                label="Status Date/Time"
+                handleDateTimeChange={(e) => {}}
+                dateTimeValue="2023-10-01T12:00:00Z"
+            />
+        </div>
+    );
+};

package/components/NumberInput/index.jsx

@@ -8,6 +8,7 @@ export default function NumberInput({
     helperText = undefined,
     required = false,
     disabled = false,
+    readOnly = false,
     label,
     tooltipText,
     inputProps,
@@ -42,6 +43,7 @@ export default function NumberInput({
             helperText={helperText}
             required={required}
             disabled={disabled}
+            readOnly={readOnly}
             label={label}
             tooltipText={tooltipText}
             inputProps={newInputProps}
@@ -68,6 +70,7 @@ NumberInput.propTypes = {
     helperText: PropTypes.string,
     required: PropTypes.bool,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
     label: PropTypes.string,
     tooltipText: PropTypes.string,
     inputProps: PropTypes.object,

package/components/RadioButton/RadioButton.jsx

@@ -15,14 +15,17 @@ const RadioButton = ({
     dataTestId,
     options = [],
     disabled = false,
+    readOnly = false,
     label,
     required = false,
     error = false,
     helperText,
     ...rest
 }) => {
-    if (disabled) {
-        const option = options?.find(option => String(option.value) === String(rest.value));
+    if (readOnly) {
+        const option = options?.find(
+            (option) => String(option.value) === String(rest.value)
+        );
         return (
             <ReadOnlyTextField
                 required={required}
@@ -32,7 +35,7 @@ const RadioButton = ({
                 {...rest}
                 value={option?.label}
             />
-        )
+        );
     }
     return (
         <FormControl error={error} fullWidth>
@@ -124,6 +127,7 @@ RadioButton.propTypes = {
     dataTestId: PropTypes.string,
     required: PropTypes.bool,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
     error: PropTypes.bool,
     label: PropTypes.string,
     helperText: PropTypes.string,

package/components/RadioButton/RadioButton.stories.jsx

@@ -36,17 +36,36 @@ const TemplateRadioButton = (args) => {
 export const RadioButtonWithLabel = TemplateRadioButton.bind({});
 RadioButtonWithLabel.args = {};
 
-export const RadioButtonWithLabelDisabledWithNoValue = TemplateRadioButton.bind({});
+export const RadioButtonWithLabelDisabledWithNoValue = TemplateRadioButton.bind(
+    {}
+);
 RadioButtonWithLabelDisabledWithNoValue.args = {
     disabled: true,
 };
 
-export const RadioButtonWithLabelDisabledWithValue = TemplateRadioButton.bind({});
+export const RadioButtonWithLabelDisabledWithValue = TemplateRadioButton.bind(
+    {}
+);
 RadioButtonWithLabelDisabledWithValue.args = {
     disabled: true,
     value: "options 3",
 };
 
+export const RadioButtonWithLabelReadOnlyWithNoValue = TemplateRadioButton.bind(
+    {}
+);
+RadioButtonWithLabelReadOnlyWithNoValue.args = {
+    readOnly: true,
+};
+
+export const RadioButtonWithLabelReadOnlyWithValue = TemplateRadioButton.bind(
+    {}
+);
+RadioButtonWithLabelReadOnlyWithValue.args = {
+    readOnly: true,
+    value: "options 3",
+};
+
 export const RadioButtonWithHelperText = TemplateRadioButton.bind({});
 RadioButtonWithHelperText.args = {
     helperText: "Helper text goes here",

package/components/ReadOnlyTextField/index.jsx

@@ -1,8 +1,7 @@
 import React from "react";
-import {FormControl, TextareaAutosize} from "@mui/material";
+import { FormControl, TextareaAutosize } from "@mui/material";
 import InputLabel from "../InputLabel";
 import PropTypes from "prop-types";
-import _ from "lodash";
 
 const ReadOnlyTextField = ({
     id,
@@ -71,7 +70,14 @@ const ReadOnlyTextField = ({
                 disabled={disabled}
                 id={id}
                 {...rest}
-                value={_.isEmpty(rest?.value) ? "-" : rest.value}
+                value={
+                    rest?.value == null ||
+                    rest.value === "" ||
+                    (typeof rest.value === "object" &&
+                        Object.keys(rest.value).length === 0)
+                        ? "-"
+                        : rest.value
+                }
             />
         </FormControl>
     );

package/components/RichTextEditor/RichTextEditor.stories.js

@@ -22,14 +22,13 @@ export const TextEditor = () => {
             required={true}
             onChange={handleChange}
             content={value}
-            disabled={false}
         />
     );
 };
 
 export const ReadOnlyTextEditor = () => {
     const [value, setValue] = useState(
-        "<p>This is <strong>readonly</strong> content</p>"
+        "<p>This is <strong>read only</strong> content</p>"
     );
 
     const handleChange = (selectedVal) => {
@@ -41,7 +40,26 @@ export const ReadOnlyTextEditor = () => {
             required={true}
             onChange={handleChange}
             content={value}
-            disabled={true}
+            readOnly
+        />
+    );
+};
+
+export const DisabledTextEditor = () => {
+    const [value, setValue] = useState(
+        "<p>This is <strong>disabled</strong> content</p>"
+    );
+
+    const handleChange = (selectedVal) => {
+        setValue(selectedVal);
+    };
+    return (
+        <RichTextEditor
+            label="Test Text Editor"
+            required={true}
+            onChange={handleChange}
+            content={value}
+            disabled
         />
     );
 };

package/components/RichTextEditor/index.jsx

@@ -23,7 +23,7 @@ import { Tooltip } from "@mui/material";
 import { kebabCase } from "lodash";
 import DOMPurify from "dompurify";
 
-const MenuBar = ({ editor }) => {
+const MenuBar = ({ editor, disabled }) => {
     if (!editor) {
         return null;
     }
@@ -43,6 +43,7 @@ const MenuBar = ({ editor }) => {
                             editor.chain().focus().toggleBold().run()
                         }
                         className={editor.isActive("bold") ? "is-active" : ""}
+                        disabled={disabled}
                     >
                         <FormatBoldIcon />
                     </IconButton>
@@ -60,6 +61,7 @@ const MenuBar = ({ editor }) => {
                             editor.chain().focus().toggleItalic().run()
                         }
                         className={editor.isActive("italic") ? "is-active" : ""}
+                        disabled={disabled}
                     >
                         <FormatItalicIcon />
                     </IconButton>
@@ -79,6 +81,7 @@ const MenuBar = ({ editor }) => {
                         className={
                             editor.isActive("underline") ? "is-active" : ""
                         }
+                        disabled={disabled}
                     >
                         <FormatUnderlinedIcon />
                     </IconButton>
@@ -97,6 +100,7 @@ const MenuBar = ({ editor }) => {
                         }
                         className={editor.isActive("strike") ? "is-active" : ""}
                         style={{ borderRight: "solid 1px #9c9c9c" }}
+                        disabled={disabled}
                     >
                         <StrikethroughSIcon />
                     </IconButton>
@@ -116,6 +120,7 @@ const MenuBar = ({ editor }) => {
                         className={
                             editor.isActive("orderedList") ? "is-active" : ""
                         }
+                        disabled={disabled}
                     >
                         <FormatListNumberedIcon />
                     </IconButton>
@@ -136,6 +141,7 @@ const MenuBar = ({ editor }) => {
                             editor.isActive("bulletList") ? "is-active" : ""
                         }
                         style={{ borderRight: "solid 1px #9c9c9c" }}
+                        disabled={disabled}
                     >
                         <FormatListBulletedIcon />
                     </IconButton>
@@ -159,6 +165,7 @@ const MenuBar = ({ editor }) => {
                         className={
                             editor.isActive("insertTable") ? "is-active" : ""
                         }
+                        disabled={disabled}
                     >
                         <TableChartIcon />
                     </IconButton>
@@ -175,7 +182,8 @@ const RichTextEditor = ({
     label,
     onChange,
     content,
-    disabled,
+    disabled = false,
+    readOnly = false,
 }) => {
     const editor = useEditor(
         {
@@ -199,8 +207,9 @@ const RichTextEditor = ({
                 const newValue = editor.getHTML();
                 onChange(newValue);
             },
+            editable: !disabled,
         },
-        [content]
+        [content, disabled]
     );
     return (
         <div
@@ -247,21 +256,21 @@ const RichTextEditor = ({
             >
                 {label}
             </InputLabel>
-            {disabled ? (
-                    <p
-                        data-testid={`${id}-value`}
-                        aria-labelledby={label}
-                        dangerouslySetInnerHTML={{
-                            __html: content ? DOMPurify.sanitize(content) : "-",
-                        }}
-                    />
-
-                ) : (
-                    <>
-                        <MenuBar editor={editor}/>
-                        <EditorContent editor={editor}/>
-                    </>
-                )}
+            {readOnly ? (
+                <p
+                    className="rich-text-editor_read_only"
+                    data-testid={`${id}-value`}
+                    aria-labelledby={label}
+                    dangerouslySetInnerHTML={{
+                        __html: content ? DOMPurify.sanitize(content) : "-",
+                    }}
+                />
+            ) : (
+                <>
+                    <MenuBar editor={editor} disabled={disabled} />
+                    <EditorContent editor={editor} />
+                </>
+            )}
         </div>
     );
 };
@@ -274,10 +283,12 @@ RichTextEditor.propTypes = {
     onChange: PropTypes.func,
     content: PropTypes.any,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
 };
 
 MenuBar.propTypes = {
     editor: PropTypes.any,
+    disabled: PropTypes.bool,
 };
 
 export default RichTextEditor;

package/components/Select/Select.stories.js

@@ -105,6 +105,59 @@ export const Disabled = () => (
     </Wrapper>
 );
 
+export const ReadOnlyWithNoValue = () => (
+    <Wrapper>
+        <Select
+            placeHolder={{ name: "placeholder", value: "" }}
+            defaultValue=""
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            readOnly
+            options={options.map(({ key, value, testId, name }) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        value={value}
+                        data-testid={`option-${testId}`}
+                    >
+                        {name}
+                    </MenuItem>
+                );
+            })}
+        />
+    </Wrapper>
+);
+
+export const ReadOnlyWithValue = () => (
+    <Wrapper>
+        <Select
+            placeHolder={{ name: "placeholder", value: "" }}
+            defaultValue=""
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            readOnly
+            options={options.map(({ key, value, testId, name }) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        value={value}
+                        data-testid={`option-${testId}`}
+                    >
+                        {name}
+                    </MenuItem>
+                );
+            })}
+            value="name1"
+        />
+    </Wrapper>
+);
+
 export const Required = () => (
     <Wrapper>
         <Select

package/components/Select/index.jsx

@@ -10,6 +10,7 @@ const Select = ({
     placeHolder = undefined, // expects placeholder objects of { name: value } and inserts into the render item function.
     required = false,
     disabled = false,
+    readOnly = false,
     id,
     error = false,
     label,
@@ -25,7 +26,7 @@ const Select = ({
     ],
     ...rest
 }) => {
-    if (disabled) {
+    if (readOnly) {
         return (
             <ReadOnlyTextField
                 required={required}
@@ -34,7 +35,7 @@ const Select = ({
                 size="small"
                 {...rest}
             />
-        )
+        );
     }
 
     const placehold = (
@@ -182,6 +183,7 @@ Select.propTypes = {
     }), // expects placeholder objects of { name: value } and inserts into the render item function.
     required: PropTypes.bool,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
     error: PropTypes.bool,
     label: PropTypes.string,
     helperText: PropTypes.string,

package/components/TextArea/TextArea.stories.js

@@ -49,6 +49,22 @@ export const WithHelperText = () => (
     </Wrapper>
 );
 
+export const ReadOnlyWithValue = () => (
+    <Wrapper>
+        <TextArea
+            placeholder="Placeholder"
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            value="This is a read only text area"
+            readOnly
+            required
+        />
+    </Wrapper>
+);
+
 export const DisabledWithValue = () => (
     <Wrapper>
         <TextArea

package/components/TextArea/index.jsx

@@ -10,21 +10,23 @@ const TextArea = ({
     helperText = undefined,
     required = false,
     disabled = false,
+    readOnly = false,
     label,
     inputProps,
     maxLength = undefined,
     ...rest
 }) => {
-    if (disabled) {
+    if (readOnly) {
         return (
             <ReadOnlyTextField
                 required={required}
                 label={label}
                 id={id}
                 size="small"
+                {...inputProps}
                 {...rest}
             />
-        )
+        );
     }
     // coerce this to avoid issue passing props to dom.
     // text area autosize is deprecated and only takes style rules
@@ -137,6 +139,7 @@ TextArea.propTypes = {
     helperText: PropTypes.string,
     required: PropTypes.bool,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
     placeholder: PropTypes.string, // expects placeholder objects of { name: value } and inserts into the render item function.
     label: PropTypes.string,
     inputProps: PropTypes.any,

package/components/TextField/TextField.stories.js

@@ -52,6 +52,20 @@ export const WithHelperText = () => (
     </Wrapper>
 );
 
+export const ReadOnly = () => (
+    <Wrapper>
+        <TextField
+            placeholder="Placeholder"
+            label="ReadOnly Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            readOnly
+        />
+    </Wrapper>
+);
+
 export const Disabled = () => (
     <Wrapper>
         <TextField