@madie/madie-design-system 1.0.50 → 1.0.53

package/components/AutoComplete/AutoComplete.jsx

@@ -206,8 +206,8 @@ const AutoComplete = ({
                         : renderOptionSingle(props, option);
                 }}
                 {...rest}
-                onChange={(_event, selectedVal) =>
-                    onChange(id, selectedVal || "")
+                onChange={(_event, selectedVal, reason, detail ) =>
+                    onChange(id, selectedVal || "", reason, detail)
                 }
             />
         </FormControl>

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,7 @@ export const dateTimeTextFieldStyle = {
     },
 };
 
-const DateTimeField = ({ label, dateTimeValue, handleDateTimeChange }) => {
+const DateTimeField = ({ label, dateTimeValue, handleDateTimeChange,disabled }) => {
     return (
         <FormControl>
             <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -54,6 +54,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 +70,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"
                 }

package/components/TimeField/TimeField.js

@@ -0,0 +1,101 @@
+import React from "react";
+import { TimePicker } from "@mui/x-date-pickers";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import InputLabel from "../InputLabel";
+import { kebabCase } from "lodash";
+import PropTypes from "prop-types";
+
+export const timeFieldStyle = {
+    width: "134px",
+    borderRadius: "3px",
+    height: 40,
+    border: "1px solid #B0B0B0",
+    marginTop: "8px",
+    "& .MuiOutlinedInput-notchedOutline": {
+        borderRadius: "3px",
+        "& legend": {
+            width: 0,
+        },
+    },
+    "& .MuiOutlinedInput-root": {
+        "&&": {
+            borderRadius: "3px",
+        },
+    },
+    "& .MuiInputBase-input": {
+        color: "#333333",
+        fontFamily: "Rubik",
+        fontSize: 14,
+        borderRadius: "3px",
+        padding: "9px",
+        Width: "170px",
+        "&::placeholder": {
+            opacity: 1,
+            color: "#717171",
+            fontFamily: "Rubik",
+            fontSize: 14,
+        },
+    },
+};
+
+const TimeField = ({
+    label,
+    value,
+    handleTimeChange,
+    disabled,
+    required,
+    error,
+}) => {
+    return (
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <InputLabel
+                data-testid={`${kebabCase(label)}`}
+                style={{ marginBottom: 0, height: 16 }}
+                sx={[
+                    {
+                        backgroundColor: "transparent",
+                        textTransform: "none",
+                        height: 17,
+                        left: 0,
+                        right: 0,
+                        top: 0,
+                        fontFamily: "Rubik",
+                        fontStyle: "normal",
+                        fontWeight: 500,
+                        fontSize: 14,
+                        color: "#333333",
+                    },
+                ]}
+                required={required}
+                disabled={disabled}
+                error={error}
+            >
+                {`${label}`}
+            </InputLabel>
+            <TimePicker
+                sx={timeFieldStyle}
+                disableOpenPicker
+                disabled={disabled}
+                value={value ? value : null}
+                onChange={handleTimeChange}
+                slotProps={{
+                    textField: {
+                        id: "time",
+                    },
+                }}
+            />
+        </LocalizationProvider>
+    );
+};
+
+TimeField.propTypes = {
+    label: PropTypes.string.isRequired,
+    value: PropTypes.object,
+    handleTimeChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+    required: PropTypes.bool,
+    error: PropTypes.string,
+};
+
+export default TimeField;

package/components/TimeField/TimeField.stories.js

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import TimeField from "./TimeField";
+import { withKnobs } from "@storybook/addon-knobs";
+
+export default {
+    title: "TimeField",
+    component: TimeField,
+    decorators: [withKnobs],
+};
+export const TimeFieldComponent = (args) => {
+    const [value, setValue] = useState("");
+    const handleTimeChange = (newValue, v) => {
+        console.log("Time changed: newValue = ", newValue);
+        setValue(newValue);
+    };
+    return (
+        <div className="qpp-u-padding--16">
+            <TimeField
+                disabled={false}
+                label="Result Time"
+                handleTimeChange={handleTimeChange}
+                value={value}
+            />
+        </div>
+    );
+};