@madie/madie-design-system 1.2.59 → 1.2.61

package/components/AutoComplete/AutoComplete.jsx

@@ -10,6 +10,8 @@ import PropTypes from "prop-types";
 import InputLabel from "../InputLabel";
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import { ReadOnlyTextField } from "../index";
+import _ from "lodash";
 
 const autoCompleteStyles = {
     marginTop: "8px",
@@ -83,6 +85,19 @@ const AutoComplete = ({
     onChange,
     ...rest
 }) => {
+    if (disabled) {
+        return (
+            <ReadOnlyTextField
+                required={required}
+                label={label}
+                id={id}
+                size="small"
+                {...rest}
+                value={_.isEmpty(rest.value) ? "-" : rest.value}
+            />
+        )
+    }
+
     return (
         <FormControl error={error} fullWidth>
             <div

package/components/DateField/DateField.jsx

@@ -7,6 +7,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
+import { ReadOnlyTextField } from "../index";
 
 dayjs.extend(utc);
 dayjs.utc();
@@ -55,6 +56,19 @@ const DateField = ({
     textFieldSx = {},
     ...rest
 }) => {
+    if (disabled) {
+        return (
+            <ReadOnlyTextField
+                required={required}
+                label={label}
+                id={id}
+                size="small"
+                {...rest}
+                value={value ? dayjs.utc(value).format("YYYY/MM/DD") : "-"}
+            />
+        )
+    }
+
     if (containerSx === undefined || containerSx === null) {
         containerSx = {};
     }

package/components/DateField/DateField.stories.jsx

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

package/components/DateTimeField/DateTimeField.jsx

@@ -8,6 +8,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 
 import { FormControl } from "@mui/material";
+import { ReadOnlyTextField } from "../index";
 
 dayjs.extend(utc);
 dayjs.utc();
@@ -53,6 +54,16 @@ const DateTimeField = ({
     disabled,
     id = "default_dateTime-input",
 }) => {
+    if (disabled) {
+        return (
+            <ReadOnlyTextField
+                label={label}
+                value={dateTimeValue ? dayjs.utc(dateTimeValue).format("YYYY/MM/DD HH:mm A") : "-"}
+                id={id}
+                size="small"
+            />
+        )
+    }
     return (
         <FormControl>
             <LocalizationProvider dateAdapter={AdapterDayjs}>

package/components/DateTimeField/DateTimeField.stories.jsx

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

package/components/MadieAlert/index.jsx

@@ -346,6 +346,7 @@ const MadieAlert = ({
                         cursor: "pointer",
                     }}
                     data-testid="minimized-alert"
+                    className="minimized-alert"
                     onClick={(e) => {
                         e.preventDefault();
                         restoreAllAlerts();

package/components/RadioButton/RadioButton.jsx

@@ -8,6 +8,7 @@ import {
 } from "@mui/material";
 import PropTypes from "prop-types";
 import InputLabel from "../InputLabel";
+import { ReadOnlyTextField } from "../index";
 
 const RadioButton = ({
     id,
@@ -20,6 +21,19 @@ const RadioButton = ({
     helperText,
     ...rest
 }) => {
+    if (disabled) {
+        const option = options?.find(option => String(option.value) === rest.value);
+        return (
+            <ReadOnlyTextField
+                required={required}
+                label={label}
+                id={id}
+                size="small"
+                {...rest}
+                value={option?.label}
+            />
+        )
+    }
     return (
         <FormControl error={error} fullWidth>
             <InputLabel

package/components/RadioButton/RadioButton.stories.jsx

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

package/components/ReadOnlyTextField/ReadOnlyTextField.stories.js

@@ -27,24 +27,7 @@ export const Textfield = () => (
             inputProps={{ "data-testid": "measure-name-input" }}
             data-testid="measure-name-text-field"
             size="small"
-        />
-    </Wrapper>
-);
-
-export const WithHelperText = () => (
-    <Wrapper>
-        <ReadOnlyTextField
-            placeholder="Placeholder"
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            helperText={
-                <FormHelperText data-testid={`helper-text`} error={false}>
-                    a descriptive message
-                </FormHelperText>
-            }
+            value="All Patient Encounters; Cancer Diagnosis; Chemo Administered; Chemotherapy Received during Last 14 days; Chemotherapy Received during Last 14 days - Encounter; Chemotherapy Received during Last 14 days - Medication; Chemotherapy Received during Last 14 days - Procedure; Denominator; Initial Population; Numerator; Patient Expired; SDE Ethnicity; SDE Payer; SDE Race; SDE Sex; Two Office Visits in Measurement Period"
         />
     </Wrapper>
 );

package/components/ReadOnlyTextField/index.jsx

@@ -1,36 +1,22 @@
 import React from "react";
-import {
-    FormControl,
-    TextField as MUITextField,
-    FormHelperText,
-} from "@mui/material";
+import {FormControl, TextareaAutosize} from "@mui/material";
 import InputLabel from "../InputLabel";
 import PropTypes from "prop-types";
+import _ from "lodash";
 
 const ReadOnlyTextField = ({
     id,
-    error = false,
-    helperText = undefined,
     required = false,
     disabled = false,
     label,
     ...rest
 }) => {
     return (
-        <FormControl fullWidth error={error}>
-            <div
-                style={{
-                    width: 1,
-                    display: "flex",
-                    flexDirection: "column",
-                    flexGrow: 1,
-                }}
-            />
+        <FormControl fullWidth>
             <InputLabel
                 disabled={disabled}
                 shrink
                 required={required}
-                error={error}
                 htmlFor={id}
                 sx={[
                     {
@@ -61,71 +47,31 @@ const ReadOnlyTextField = ({
                     disabled && {
                         color: "rgba(0,0,0,0.6)",
                     },
-                    error && {
-                        color: "#AE1C1C !important",
-                    },
                 ]}
             >
                 {label}
             </InputLabel>
-            {helperText && (
-                <FormHelperText
-                    tabIndex={0}
-                    aria-live="polite"
-                    id={`${id}-helper-text`}
-                    data-testid={`${id}-helper-text`}
-                    sx={[
-                        {
-                            margin: "4px 0px 0px 0px",
-                            color: "#515151",
-                            lineHeight: 1,
-                        },
-                        error && {
-                            color: "#AE1C1C !important",
-                        },
-                    ]}
-                >
-                    {helperText}
-                </FormHelperText>
-            )}
-            <MUITextField
-                sx={{
+            <TextareaAutosize
+                style={{
+                    color: "#333",
+                    fontFamily: "Rubik",
+                    fontSize: "14px",
+                    fontStyle: "normal",
+                    fontWeight: 400,
+                    lineHeight: "24px",
                     border: "none",
-                    "& .MuiOutlinedInput-root": {
-                        "& > fieldset": {
-                            border: "none",
-                        },
-                    },
-                    "& .MuiInputBase-root": {
-                        height: "auto",
-                    },
-                    "& .MuiInputBase-input": {
-                        lineHeight: "19px",
-                        fontFamily: "Rubik",
-                        disableUnderline: true,
-                        fontSize: 16,
-                        padding: "9px 0px",
-                        color: "#333",
-                        "&::placeholder": {
-                            opacity: 1,
-                            color: "#333",
-                        },
-                        "&:focus": {
-                            border: "none",
-                            outline: "none",
-                            boxShadow: "none",
-                        },
-                    },
-                }}
-                InputProps={{
-                    readOnly: true,
+                    resize: "none",
+                    padding: "0px 0px",
+                    outline: "none",
+                    boxShadow: "none",
                 }}
+                readOnly={true}
                 disableUnderline={true}
                 label={null}
-                error={error}
                 disabled={disabled}
                 id={id}
                 {...rest}
+                value={_.isEmpty(rest?.value) ? "-" : rest.value}
             />
         </FormControl>
     );
@@ -133,8 +79,6 @@ const ReadOnlyTextField = ({
 
 ReadOnlyTextField.propTypes = {
     id: PropTypes.string,
-    error: PropTypes.bool,
-    helperText: PropTypes.string,
     required: PropTypes.bool,
     disabled: PropTypes.bool,
     placeholder: PropTypes.string, // expects placeholder objects of { name: value } and inserts into the render item function.

package/components/Select/index.jsx

@@ -4,6 +4,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import InputLabel from "../InputLabel";
 import FormHelperText from "@mui/material/FormHelperText";
 import PropTypes from "prop-types";
+import { ReadOnlyTextField } from "../index";
 
 const Select = ({
     placeHolder = undefined, // expects placeholder objects of { name: value } and inserts into the render item function.
@@ -24,6 +25,18 @@ const Select = ({
     ],
     ...rest
 }) => {
+    if (disabled) {
+        return (
+            <ReadOnlyTextField
+                required={required}
+                label={label}
+                id={id}
+                size="small"
+                {...rest}
+            />
+        )
+    }
+
     const placehold = (
         <span style={{ color: "#717171" }}>
             {placeHolder?.name || "placeholder"}

package/components/TextArea/TextArea.stories.js

@@ -49,7 +49,23 @@ export const WithHelperText = () => (
     </Wrapper>
 );
 
-export const Disabled = () => (
+export const DisabledWithValue = () => (
+    <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 disabled text area"
+            disabled
+            required
+        />
+    </Wrapper>
+);
+
+export const DisabledWithNoValue = () => (
     <Wrapper>
         <TextArea
             placeholder="Placeholder"

package/components/TextArea/index.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { FormControl, FormHelperText, TextareaAutosize } from "@mui/material";
 import InputLabel from "../InputLabel";
 import PropTypes from "prop-types";
+import { ReadOnlyTextField } from "../index";
 
 const TextArea = ({
     id,
@@ -14,6 +15,17 @@ const TextArea = ({
     maxLength = undefined,
     ...rest
 }) => {
+    if (disabled) {
+        return (
+            <ReadOnlyTextField
+                required={required}
+                label={label}
+                id={id}
+                size="small"
+                {...rest}
+            />
+        )
+    }
     // coerce this to avoid issue passing props to dom.
     // text area autosize is deprecated and only takes style rules
     return (

package/components/TextField/index.jsx

@@ -7,6 +7,7 @@ import {
 import InputLabel from "../InputLabel";
 import MadieToolTip from "../MadieTooltip";
 import PropTypes from "prop-types";
+import { ReadOnlyTextField } from "../index";
 
 const TextField = ({
     id,
@@ -22,6 +23,17 @@ const TextField = ({
     maxLength = undefined,
     ...rest
 }) => {
+    if (disabled) {
+        return (
+            <ReadOnlyTextField
+                required={required}
+                label={label}
+                id={id}
+                size="small"
+                {...rest}
+            />
+        )
+    }
     // get a copy of input props
     const newInputProps = { ...inputProps } || {};