@madie/madie-design-system 1.0.49 → 1.0.51

package/components/DateField/DateField.jsx

@@ -39,11 +39,11 @@ export const dateTextFieldStyle = {
     },
 };
 
-const DateField = ({ label, value, handlDateTimeChange }) => {
+const DateField = ({ label, value, handleDateChange, disabled }) => {
     return (
         <LocalizationProvider dateAdapter={AdapterDayjs}>
             <InputLabel
-                data-testid={`${kebabCase(label)}-date`}
+                data-testid={`${kebabCase(label)}`}
                 style={{ marginBottom: 0, height: 16 }}
                 sx={[
                     {
@@ -61,11 +61,12 @@ const DateField = ({ label, value, handlDateTimeChange }) => {
                     },
                 ]}
             >
-                {`${label} Date`}
+                {`${label}`}
             </InputLabel>
             <DatePicker
                 value={value ? value : null}
-                onChange={handlDateTimeChange}
+                onChange={handleDateChange}
+                disabled={disabled}
                 slotProps={{
                     textField: {
                         id: "date",
@@ -78,8 +79,9 @@ const DateField = ({ label, value, handlDateTimeChange }) => {
 };
 DateField.propTypes = {
     label: PropTypes.string.isRequired,
-    value: PropTypes.any,
-    handlDateTimeChange: PropTypes.func.isRequired,
+    value: PropTypes.object,
+    handleDateChange: PropTypes.func.isRequired,
+    disabled:PropTypes.bool
 };
 
 export default DateField;

package/components/DateField/DateField.stories.jsx

@@ -9,15 +9,16 @@ export default {
 };
 export const DateFieldComponent = (args) => {
     const [value, setValue] = useState("");
-    const handlDateTimeChange = (e) => {
+    const handleDateChange = (e) => {
         console.log("Handle change triggered", e.target.value);
         setValue(e.target.value);
     };
     return (
         <div className="qpp-u-padding--16">
             <DateField
-                label="Status"
-                handlDateTimeChange={handlDateTimeChange}
+                disabled={false}
+                label="Status Date"
+                handleDateChange={handleDateChange}
                 value={value}
             />
         </div>

package/components/DateTimeField/DateTimeField.jsx

@@ -0,0 +1,77 @@
+import React from "react";
+import PropTypes from "prop-types";
+import InputLabel from "../InputLabel";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { FormControl } from "@mui/material";
+import { kebabCase } from "lodash";
+
+export const dateTimeTextFieldStyle = {
+    width: "240px",
+    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: "240px",
+        "&::placeholder": {
+            opacity: 1,
+            color: "#717171",
+            fontFamily: "Rubik",
+            fontSize: 14,
+        },
+    },
+};
+
+const DateTimeField = ({ label, dateTimeValue, handleDateTimeChange,disabled }) => {
+    console.log(disabled)
+    return (
+        <FormControl>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <InputLabel
+                    style={{ marginBottom: 0, height: 16 }}
+                    data-testId={`${kebabCase(label)}`}
+                >
+                    {`${label}`}
+                </InputLabel>
+                <DateTimePicker
+                    value={dateTimeValue ? dateTimeValue : null}
+                    onChange={handleDateTimeChange}
+                    views={["year", "day", "hours", "minutes"]}
+                    disabled={disabled}
+                    slotProps={{
+                        textField: {
+                            id: "dateTime",
+                            sx: dateTimeTextFieldStyle,
+                        },
+                    }}
+                />
+            </LocalizationProvider>
+        </FormControl>
+    );
+};
+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

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import DateTimeField from "./DateTimeField";
+import { withKnobs } from "@storybook/addon-knobs";
+
+export default {
+    title: "DateTimeField",
+    component: DateTimeField,
+    decorators: [withKnobs],
+};
+
+export const TimeDateFieldComponent = (args) => {
+    const [value, setValue] = useState("");
+    const handlDateTimeChange = (e) => {
+        console.log("Handle change triggered", e.target.value);
+        setValue(e.target.value);
+    };
+    return (
+        <div className="qpp-u-padding--16">
+            <DateTimeField
+                disabled={true}
+                label="Status Date/Time"
+                handlDateTimeChange={handlDateTimeChange}
+                dateTimeValue={value}
+            />
+        </div>
+    );
+};

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/index.js

@@ -6,6 +6,7 @@ import Button, { TextButton } from "./Button";
 import CalloutBox from "./CalloutBox";
 import Card from "./Card";
 import DateField from "./DateField/DateField";
+import DateTimeField from "./DateTimeField/DateTimeField";
 import FlashNotification from "./FlashNotification/FlashNotificationUI";
 import Footer from "./Footer/FooterUI";
 import InputLabel from "./InputLabel";
@@ -125,6 +126,7 @@ export {
     CalloutBox,
     Card,
     DateField,
+    DateTimeField,
     FlashNotification,
     Footer,
     FormControlLabel,