@madie/madie-design-system 1.0.48 → 1.0.50

package/components/DateField/DateField.jsx

@@ -4,99 +4,82 @@ import InputLabel from "../InputLabel";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import InputAdornment from "@mui/material/InputAdornment";
-import EventIcon from "@mui/icons-material/Event";
 import { kebabCase } from "lodash";
 
-export const textFieldStyle = {
-  width: "160px",
-  borderRadius: "3px",
-  height: 40,
-  border: "1px solid #DDDDDD",
-  marginTop: "8px",
-  "& .MuiOutlinedInput-notchedOutline": {
+export const dateTextFieldStyle = {
+    width: "170px",
     borderRadius: "3px",
-    "& legend": {
-      width: 0,
+    height: 40,
+    border: "1px solid #B0B0B0",
+    marginTop: "8px",
+    "& .MuiOutlinedInput-notchedOutline": {
+        borderRadius: "3px",
+        "& legend": {
+            width: 0,
+        },
     },
-  },
-  "& .MuiOutlinedInput-root": {
-    "&&": {
-      borderRadius: "3px",
+    "& .MuiOutlinedInput-root": {
+        "&&": {
+            borderRadius: "3px",
+        },
     },
-  },
-  "& .MuiInputBase-input": {
-    color: "#333333",
-    fontFamily: "Rubik",
-    fontSize: 14,
-    borderRadius: "3px",
-    padding: "9px 5px 9px 4px",
-    Width: "160px",
-    "&::placeholder": {
-      opacity: 1,
-      color: "#717171",
-      fontFamily: "Rubik",
-      fontSize: 14,
-      padding: "9px 5px 9px 4px",
+    "& .MuiInputBase-input": {
+        color: "#333333",
+        fontFamily: "Rubik",
+        fontSize: 14,
+        borderRadius: "3px",
+        padding: "9px",
+        Width: "170px",
+        "&::placeholder": {
+            opacity: 1,
+            color: "#717171",
+            fontFamily: "Rubik",
+            fontSize: 14,
+        },
     },
-  },
 };
 
-const DateField = ({ label, value, onChange }) => {
+const DateField = ({ label, value, handleDateChange }) => {
     return (
-            <LocalizationProvider dateAdapter={AdapterDayjs}>
-                <InputLabel
-                    data-testid={`${kebabCase(label)}-date`}
-                    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",
-                        },
-                    ]}
-                >
-                    {`${label} Date`}
-                </InputLabel>
-                <DatePicker
-                    disableOpenPicker
-                    value={value ? value : null}
-                    onChange={onChange}
-                    slotProps={{
-                        textField: {
-                            id: "date",
-                            sx: textFieldStyle,
-                            InputProps: {
-                                startAdornment: (
-                                    <InputAdornment
-                                        position="start"
-                                        style={{
-                                            color: "#515151",
-                                            left: "10.42%",
-                                        }}
-                                    >
-                                        <EventIcon />
-                                    </InputAdornment>
-                                ),
-                            },
-                        },
-                    }}
-                />
-            </LocalizationProvider>
+        <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",
+                    },
+                ]}
+            >
+                {`${label}`}
+            </InputLabel>
+            <DatePicker
+                value={value ? value : null}
+                onChange={handleDateChange}
+                slotProps={{
+                    textField: {
+                        id: "date",
+                        sx: dateTextFieldStyle,
+                    },
+                }}
+            />
+        </LocalizationProvider>
     );
 };
 DateField.propTypes = {
     label: PropTypes.string.isRequired,
-    value: PropTypes.any,
-    onChange: PropTypes.func.isRequired,
+    value: PropTypes.object,
+    handleDateChange: PropTypes.func.isRequired,
 };
 
 export default DateField;

package/components/DateField/DateField.stories.jsx

@@ -9,15 +9,15 @@ export default {
 };
 export const DateFieldComponent = (args) => {
     const [value, setValue] = useState("");
-    const handleChange = (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"
-                onChange={handleChange}
+                label="Status Date"
+                handleDateChange={handleDateChange}
                 value={value}
             />
         </div>

package/components/DateTimeField/DateTimeField.jsx

@@ -0,0 +1,74 @@
+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 }) => {
+    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"]}
+                    slotProps={{
+                        textField: {
+                            id: "dateTime",
+                            sx: dateTimeTextFieldStyle,
+                        },
+                    }}
+                />
+            </LocalizationProvider>
+        </FormControl>
+    );
+};
+DateTimeField.propTypes = {
+    dateTimeValue: PropTypes.object,
+    handleDateTimeChange: PropTypes.func.isRequired,
+    label: PropTypes.string.isRequired,
+};
+
+export default DateTimeField;

package/components/DateTimeField/DateTimeField.stories.jsx

@@ -0,0 +1,26 @@
+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
+                label="Status Date/Time"
+                handlDateTimeChange={handlDateTimeChange}
+                dateTimeValue={value}
+            />
+        </div>
+    );
+};

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,