@madie/madie-design-system 1.0.50 → 1.0.51

package/components/DateField/DateField.jsx

@@ -39,7 +39,7 @@ export const dateTextFieldStyle = {
     },
 };
 
-const DateField = ({ label, value, handleDateChange }) => {
+const DateField = ({ label, value, handleDateChange, disabled }) => {
     return (
         <LocalizationProvider dateAdapter={AdapterDayjs}>
             <InputLabel
@@ -66,6 +66,7 @@ const DateField = ({ label, value, handleDateChange }) => {
             <DatePicker
                 value={value ? value : null}
                 onChange={handleDateChange}
+                disabled={disabled}
                 slotProps={{
                     textField: {
                         id: "date",
@@ -80,6 +81,7 @@ DateField.propTypes = {
     label: PropTypes.string.isRequired,
     value: PropTypes.object,
     handleDateChange: PropTypes.func.isRequired,
+    disabled:PropTypes.bool
 };
 
 export default DateField;

package/components/DateField/DateField.stories.jsx

@@ -16,6 +16,7 @@ export const DateFieldComponent = (args) => {
     return (
         <div className="qpp-u-padding--16">
             <DateField
+                disabled={false}
                 label="Status Date"
                 handleDateChange={handleDateChange}
                 value={value}

package/components/DateTimeField/DateTimeField.jsx

@@ -40,7 +40,8 @@ export const dateTimeTextFieldStyle = {
     },
 };
 
-const DateTimeField = ({ label, dateTimeValue, handleDateTimeChange }) => {
+const DateTimeField = ({ label, dateTimeValue, handleDateTimeChange,disabled }) => {
+    console.log(disabled)
     return (
         <FormControl>
             <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -54,6 +55,7 @@ const DateTimeField = ({ label, dateTimeValue, handleDateTimeChange }) => {
                     value={dateTimeValue ? dateTimeValue : null}
                     onChange={handleDateTimeChange}
                     views={["year", "day", "hours", "minutes"]}
+                    disabled={disabled}
                     slotProps={{
                         textField: {
                             id: "dateTime",
@@ -69,6 +71,7 @@ DateTimeField.propTypes = {
     dateTimeValue: PropTypes.object,
     handleDateTimeChange: PropTypes.func.isRequired,
     label: PropTypes.string.isRequired,
+    disabled:PropTypes.bool
 };
 
 export default DateTimeField;

package/components/DateTimeField/DateTimeField.stories.jsx

@@ -17,6 +17,7 @@ export const TimeDateFieldComponent = (args) => {
     return (
         <div className="qpp-u-padding--16">
             <DateTimeField
+                disabled={true}
                 label="Status Date/Time"
                 handlDateTimeChange={handlDateTimeChange}
                 dateTimeValue={value}

package/components/TextArea/index.jsx

@@ -89,6 +89,7 @@ const TextArea = ({
                 </FormHelperText>
             )}
             <TextareaAutosize
+                style={{ marginTop: '8px'}}
                 className={
                     error ? "text-area-variable error" : "text-area-variable"
                 }