@madie/madie-design-system 1.2.34 → 1.2.37

package/.storybook/main.js

@@ -39,6 +39,12 @@ module.exports = {
                 },
             ],
         });
+        // the below lines add hot reload, but somehow put CI/CD into a hanging state
+        // config.watchOptions = {
+        //     aggregateTimeout: 300, // Delay before rebuilding after the first change
+        //     poll: 1000,            // Check for changes every second
+        //     ignored: /node_modules/, // Ignore node_modules to improve performance
+        // };
 
         return config;
     },

package/components/Instant/Instant.stories.js

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import Instant from "./index";
+import { withKnobs } from "@storybook/addon-knobs";
+
+export default {
+    title: "Instant",
+    component: Instant,
+    decorators: [withKnobs],
+};
+
+export const InstantComponent = (args) => {
+    const [value, setValue] = useState("");
+    const handleDateTimeChange = (v) => {
+        setValue(v);
+    };
+    return (
+        <div className="qpp-u-padding--16">
+            <div> Date string: {value} </div>
+            <Instant
+                disabled={false}
+                id="status_date_time"
+                label="Status Date/Time"
+                handleDateTimeChange={handleDateTimeChange}
+                dateTimeValue={value}
+            />
+        </div>
+    );
+};

package/components/Instant/index.jsx

@@ -0,0 +1,267 @@
+import React from "react";
+import PropTypes from "prop-types";
+import TextField from "../TextField";
+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 dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import { FormControl, Box } from "@mui/material";
+
+dayjs.extend(utc);
+dayjs.utc();
+dayjs.extend(timezone);
+const formatDateTime = (dateTime) =>
+    dayjs.utc(dateTime).format("YYYY-MM-DDTHH:mm:ss.SSSZ");
+export const defaultDateFieldStyles = {
+    width: "170px",
+    height: 40,
+    marginTop: "8px",
+    "& .MuiOutlinedInput-notchedOutline": {
+        border: "1px solid #8C8C8C",
+        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 Instant = ({
+    dateTimeValue,
+    handleDateTimeChange,
+    required = false,
+    disabled,
+    id = "default_dateTime-input",
+    textFieldSx = {},
+    dateFieldSx = {},
+    error = false,
+    helperText,
+    datePickerProps = {},
+    onBlur,
+    ...rest
+}) => {
+    const textFieldStyles = {
+        width: "55px",
+        height: "40px",
+        "& .MuiInputBase-input": {
+            color: "#333",
+            fontFamily: "Rubik",
+            fontSize: 14,
+            borderRadius: "3px",
+            padding: "9px 5px 9px 5px",
+            "&::placeholder": {
+                opacity: 1,
+                color: "#717171",
+            },
+        },
+    };
+    const handleHoursChange = (e) => {
+        const newHours = parseInt(e.target.value, 10);
+        if (dateTimeValue) {
+            const updatedDateTime = dayjs
+                .utc(dateTimeValue)
+                .set("hour", newHours);
+            handleDateTimeChange(formatDateTime(updatedDateTime));
+        }
+    };
+    const handleMinutesChange = (e) => {
+        const newMinutes = parseInt(e.target.value, 10);
+        if (dateTimeValue) {
+            const updatedDateTime = dayjs
+                .utc(dateTimeValue)
+                .set("minute", newMinutes);
+            handleDateTimeChange(formatDateTime(updatedDateTime));
+        }
+    };
+    const handleSecondsChange = (e) => {
+        const newSeconds = parseInt(e.target.value, 10);
+        if (dateTimeValue) {
+            const updatedDateTime = dayjs
+                .utc(dateTimeValue)
+                .set("second", newSeconds);
+            handleDateTimeChange(formatDateTime(updatedDateTime));
+        }
+    };
+    const handleMillisecondsChange = (e) => {
+        const newMilliseconds = parseInt(e.target.value, 10);
+        if (dateTimeValue) {
+            const updatedDateTime = dayjs
+                .utc(dateTimeValue)
+                .set("millisecond", newMilliseconds);
+            handleDateTimeChange(formatDateTime(updatedDateTime));
+        }
+    };
+    const onDateChange = (newDate) => {
+        if (!isNaN(newDate)) {
+            if (dateTimeValue) {
+                const updatedDate = dayjs.utc(newDate);
+                handleDateTimeChange(formatDateTime(updatedDate));
+            } else {
+                const updatedDate = newDate.utc(newDate);
+                handleDateTimeChange(formatDateTime(updatedDate));
+            }
+        }
+    };
+    return (
+        <FormControl error={error}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "row",
+                        flexGrow: 1,
+                    }}
+                >
+                    <Box sx={{ marginRight: "24px" }}>
+                        <DatePicker
+                            value={
+                                dateTimeValue ? dayjs.utc(dateTimeValue) : null
+                            }
+                            onChange={onDateChange}
+                            disabled={disabled}
+                            onClose={() => (onBlur ? onBlur() : undefined)}
+                            slotProps={{
+                                textField: (params) => {
+                                    const { InputProps } = params;
+                                    InputProps["data-testid"] = id;
+                                    InputProps["aria-required"] = required;
+                                    return {
+                                        id: id,
+                                        label: "Date",
+                                        sx: {
+                                            ...defaultDateFieldStyles,
+                                            ...dateFieldSx,
+                                        },
+                                        value: dateTimeValue
+                                            ? dayjs.utc(dateTimeValue)
+                                            : null,
+                                        onChange: onDateChange,
+                                        error,
+                                        helperText: helperText,
+                                        onBlur: onBlur,
+                                        ...rest,
+                                    };
+                                },
+                                openPickerButton: {
+                                    id: `${id}-open-picker-button`,
+                                    "data-testid": `${id}-open-picker-button`,
+                                },
+                            }}
+                            slots={{ textField: TextField }}
+                        />
+                    </Box>
+                    <TextField
+                        id={`${id}-hour`}
+                        data-testid={`${id}-hour`}
+                        value={
+                            dateTimeValue ? dayjs.utc(dateTimeValue).hour() : 0
+                        }
+                        onChange={handleHoursChange}
+                        label="Hr"
+                        type="number"
+                        disabled={!dateTimeValue}
+                        inputProps={{
+                            min: 0,
+                            max: 24,
+                        }}
+                        textFieldStyles={textFieldStyles}
+                        required={required}
+                    />
+                    <TextField
+                        id={`${id}-minute`}
+                        data-testid={`${id}-minute`}
+                        value={
+                            dateTimeValue
+                                ? dayjs.utc(dateTimeValue).minute()
+                                : 0
+                        }
+                        onChange={handleMinutesChange}
+                        label="Min"
+                        type="number"
+                        disabled={!dateTimeValue}
+                        inputProps={{
+                            min: 0,
+                            max: 60,
+                        }}
+                        textFieldStyles={textFieldStyles}
+                        required={required}
+                    />
+                    <TextField
+                        id={`${id}-second`}
+                        data-testid={`${id}-second`}
+                        value={
+                            dateTimeValue
+                                ? dayjs.utc(dateTimeValue).second()
+                                : 0
+                        }
+                        onChange={handleSecondsChange}
+                        label="Sec"
+                        type="number"
+                        disabled={!dateTimeValue}
+                        inputProps={{
+                            min: 0,
+                            max: 60,
+                        }}
+                        textFieldStyles={textFieldStyles}
+                        required={required}
+                    />
+                    <TextField
+                        id={`${id}-millisecond`}
+                        data-testid={`${id}-millisecond`}
+                        value={
+                            dateTimeValue
+                                ? dayjs.utc(dateTimeValue).millisecond()
+                                : 0
+                        }
+                        onChange={handleMillisecondsChange}
+                        label="MS"
+                        type="number"
+                        disabled={!dateTimeValue}
+                        inputProps={{
+                            min: 0,
+                            max: 999,
+                        }}
+                        textFieldStyles={textFieldStyles}
+                        required={required}
+                    />
+                </Box>
+            </LocalizationProvider>
+        </FormControl>
+    );
+};
+
+Instant.propTypes = {
+    id: PropTypes.string,
+    placeholder: PropTypes.string,
+    disabled: PropTypes.bool,
+    required: PropTypes.bool,
+    dateTimeValue: PropTypes.any,
+    handleDateTimeChange: PropTypes.function,
+    textFieldSx: PropTypes.any,
+    dateFieldSx: PropTypes.any,
+    error: PropTypes.bool,
+    helperText: PropTypes.string,
+    datePickerProps: PropTypes.any,
+    onBlur: PropTypes.any,
+};
+
+export default Instant;

package/components/TextField/TextField.stories.js

@@ -187,3 +187,17 @@ export const WithLeftAndRightIcon = () => (
         />
     </Wrapper>
 );
+
+export const TextfieldDifferentLabel = () => (
+    <Wrapper>
+        <TextField
+            placeholder="Placeholder"
+            label="Text Label with different color"
+            labelColor={"#1976d2"}
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+        />
+    </Wrapper>
+);

package/components/TextField/index.jsx

@@ -17,6 +17,8 @@ const TextField = ({
     label,
     tooltipText,
     inputProps,
+    labelColor = undefined,
+    textFieldStyles = {},
     ...rest
 }) => {
     // get a copy of input props
@@ -39,6 +41,39 @@ const TextField = ({
         }
     }
 
+    const extendedTextFieldStyles = {
+        borderRadius: "3px",
+        border: "none",
+        marginTop: "8px",
+        "& .MuiOutlinedInput-notchedOutline": {
+            borderRadius: "3px",
+            borderColor: "#8C8C8C",
+            "& legend": {
+                width: 0,
+            },
+        },
+        "& .MuiInputBase-root": {
+            height: "auto",
+        },
+        "& .MuiOutlinedInput-root": {
+            "&&": {
+                borderRadius: "3px",
+            },
+        },
+        // input base selector
+        "& .MuiInputBase-input": {
+            color: "#333",
+            fontFamily: "Rubik",
+            fontSize: 14,
+            borderRadius: "3px",
+            padding: "9px 14px",
+            "&::placeholder": {
+                opacity: 1,
+                color: "#717171",
+            },
+        },
+        ...textFieldStyles,
+    };
     return (
         <FormControl fullWidth error={error}>
             <div
@@ -70,7 +105,13 @@ const TextField = ({
                             fontFamily: "Rubik",
                             fontWeight: 500,
                             fontSize: 14,
-                            color: "#333",
+                            color: () => {
+                                if (labelColor) {
+                                    return labelColor;
+                                } else {
+                                    return "#333";
+                                }
+                            },
                             "& .MuiInputLabel-asterisk": {
                                 color: "#AE1C1C !important",
                                 marginRight: "3px !important", //this was
@@ -121,45 +162,7 @@ const TextField = ({
                 </FormHelperText>
             )}
             <MUITextField
-                sx={[
-                    {
-                        borderRadius: "3px",
-                        border: "none",
-                        marginTop: "8px",
-                        "& .MuiOutlinedInput-notchedOutline": {
-                            borderRadius: "3px",
-                            borderColor: "#8C8C8C",
-                            "& legend": {
-                                width: 0,
-                            },
-                        },
-                        "& .MuiInputBase-root": {
-                            height: "auto",
-                        },
-                        "& .MuiOutlinedInput-root": {
-                            "&&": {
-                                borderRadius: "3px",
-                            },
-                        },
-                        // input base selector
-                        "& .MuiInputBase-input": {
-                            color: "#333",
-                            fontFamily: "Rubik",
-                            fontSize: 14,
-                            borderRadius: "3px",
-                            padding: "9px 14px",
-                            "&::placeholder": {
-                                opacity: 1,
-                                color: "#717171",
-                            },
-                        },
-                    },
-                    error && {
-                        "& .MuiOutlinedInput-notchedOutline": {
-                            borderColor: "#AE1C1C !important",
-                        },
-                    },
-                ]}
+                sx={extendedTextFieldStyles}
                 label={null}
                 error={error}
                 disabled={disabled}
@@ -173,6 +176,7 @@ const TextField = ({
 
 TextField.propTypes = {
     id: PropTypes.string,
+    textFieldStyles: PropTypes.object,
     error: PropTypes.bool,
     helperText: PropTypes.string,
     required: PropTypes.bool,
@@ -181,5 +185,6 @@ TextField.propTypes = {
     label: PropTypes.string,
     tooltipText: PropTypes.string,
     inputProps: PropTypes.object,
+    labelColor: PropTypes.string,
 };
 export default TextField;

package/components/index.js

@@ -9,6 +9,7 @@ import DateField from "./DateField/DateField";
 import DateTimeField from "./DateTimeField/DateTimeField";
 import FlashNotification from "./FlashNotification/FlashNotificationUI";
 import Footer from "./Footer/FooterUI";
+import Instant from "./Instant";
 import InputLabel from "./InputLabel";
 import FormControlLabel from "./FormControlLabel";
 import MadieAlert from "./MadieAlert";
@@ -137,6 +138,7 @@ export {
     InputLabel,
     Icons,
     Infotip,
+    Instant,
     Modal,
     MadieAlert,
     MadieDialog,

package/coverage/clover.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1727817421935" clover="3.2.0">
-  <project timestamp="1727817421935" name="All files">
-    <metrics statements="396" coveredstatements="382" conditionals="312" coveredconditionals="271" methods="114" coveredmethods="107" elements="822" coveredelements="760" complexity="0" loc="396" ncloc="396" packages="26" files="36" classes="36"/>
+<coverage generated="1728397475109" clover="3.2.0">
+  <project timestamp="1728397475109" name="All files">
+    <metrics statements="442" coveredstatements="427" conditionals="346" coveredconditionals="296" methods="124" coveredmethods="116" elements="912" coveredelements="839" complexity="0" loc="442" ncloc="442" packages="27" files="37" classes="37"/>
     <package name="react">
       <metrics statements="3" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="2" coveredmethods="0"/>
       <file name="index.js" path="/home/runner/work/madie-design-system/madie-design-system/react/index.js">
@@ -192,9 +192,57 @@
       <metrics statements="3" coveredstatements="3" conditionals="6" coveredconditionals="6" methods="1" coveredmethods="1"/>
       <file name="index.jsx" path="/home/runner/work/madie-design-system/madie-design-system/react/components/InputLabel/index.jsx">
         <metrics statements="3" coveredstatements="3" conditionals="6" coveredconditionals="6" methods="1" coveredmethods="1"/>
-        <line num="5" count="6" type="stmt"/>
-        <line num="6" count="24" type="stmt"/>
-        <line num="48" count="6" type="stmt"/>
+        <line num="5" count="7" type="stmt"/>
+        <line num="6" count="82" type="stmt"/>
+        <line num="48" count="7" type="stmt"/>
+      </file>
+    </package>
+    <package name="react.components.Instant">
+      <metrics statements="42" coveredstatements="41" conditionals="32" coveredconditionals="23" methods="9" coveredmethods="8"/>
+      <file name="index.jsx" path="/home/runner/work/madie-design-system/madie-design-system/react/components/Instant/index.jsx">
+        <metrics statements="42" coveredstatements="41" conditionals="32" coveredconditionals="23" methods="9" coveredmethods="8"/>
+        <line num="12" count="1" type="stmt"/>
+        <line num="13" count="1" type="stmt"/>
+        <line num="14" count="1" type="stmt"/>
+        <line num="15" count="1" type="stmt"/>
+        <line num="16" count="7" type="stmt"/>
+        <line num="17" count="1" type="stmt"/>
+        <line num="48" count="1" type="stmt"/>
+        <line num="62" count="10" type="stmt"/>
+        <line num="77" count="10" type="stmt"/>
+        <line num="78" count="1" type="stmt"/>
+        <line num="79" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="80" count="1" type="stmt"/>
+        <line num="83" count="1" type="stmt"/>
+        <line num="86" count="10" type="stmt"/>
+        <line num="87" count="1" type="stmt"/>
+        <line num="88" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="89" count="1" type="stmt"/>
+        <line num="92" count="1" type="stmt"/>
+        <line num="95" count="10" type="stmt"/>
+        <line num="96" count="1" type="stmt"/>
+        <line num="97" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="98" count="1" type="stmt"/>
+        <line num="101" count="1" type="stmt"/>
+        <line num="104" count="10" type="stmt"/>
+        <line num="105" count="1" type="stmt"/>
+        <line num="106" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="107" count="1" type="stmt"/>
+        <line num="110" count="1" type="stmt"/>
+        <line num="113" count="10" type="stmt"/>
+        <line num="114" count="3" type="cond" truecount="1" falsecount="1"/>
+        <line num="115" count="3" type="cond" truecount="2" falsecount="0"/>
+        <line num="116" count="1" type="stmt"/>
+        <line num="117" count="1" type="stmt"/>
+        <line num="119" count="2" type="stmt"/>
+        <line num="120" count="2" type="stmt"/>
+        <line num="124" count="10" type="stmt"/>
+        <line num="141" count="0" type="cond" truecount="0" falsecount="2"/>
+        <line num="144" count="24" type="stmt"/>
+        <line num="145" count="24" type="stmt"/>
+        <line num="146" count="24" type="stmt"/>
+        <line num="147" count="24" type="stmt"/>
+        <line num="252" count="1" type="stmt"/>
       </file>
     </package>
     <package name="react.components.MadieAlert">
@@ -289,7 +337,7 @@
       <metrics statements="11" coveredstatements="11" conditionals="5" coveredconditionals="3" methods="7" coveredmethods="7"/>
       <file name="index.jsx" path="/home/runner/work/madie-design-system/madie-design-system/react/components/MadieTooltip/index.jsx">
         <metrics statements="11" coveredstatements="11" conditionals="5" coveredconditionals="3" methods="7" coveredmethods="7"/>
-        <line num="6" count="3" type="cond" truecount="0" falsecount="1"/>
+        <line num="6" count="4" type="cond" truecount="0" falsecount="1"/>
         <line num="7" count="5" type="stmt"/>
         <line num="8" count="5" type="stmt"/>
         <line num="12" count="1" type="stmt"/>
@@ -299,16 +347,16 @@
         <line num="23" count="1" type="cond" truecount="1" falsecount="1"/>
         <line num="24" count="1" type="stmt"/>
         <line num="28" count="1" type="stmt"/>
-        <line num="44" count="3" type="stmt"/>
+        <line num="44" count="4" type="stmt"/>
       </file>
     </package>
     <package name="react.components.MadieTooltipIcon">
       <metrics statements="3" coveredstatements="3" conditionals="1" coveredconditionals="1" methods="1" coveredmethods="1"/>
       <file name="index.jsx" path="/home/runner/work/madie-design-system/madie-design-system/react/components/MadieTooltipIcon/index.jsx">
         <metrics statements="3" coveredstatements="3" conditionals="1" coveredconditionals="1" methods="1" coveredmethods="1"/>
-        <line num="4" count="3" type="cond" truecount="1" falsecount="0"/>
+        <line num="4" count="4" type="cond" truecount="1" falsecount="0"/>
         <line num="5" count="5" type="stmt"/>
-        <line num="29" count="3" type="stmt"/>
+        <line num="29" count="4" type="stmt"/>
       </file>
     </package>
     <package name="react.components.Pagination">
@@ -414,23 +462,27 @@
       </file>
     </package>
     <package name="react.components.TextField">
-      <metrics statements="14" coveredstatements="14" conditionals="30" coveredconditionals="28" methods="1" coveredmethods="1"/>
+      <metrics statements="18" coveredstatements="18" conditionals="32" coveredconditionals="30" methods="2" coveredmethods="2"/>
       <file name="index.jsx" path="/home/runner/work/madie-design-system/madie-design-system/react/components/TextField/index.jsx">
-        <metrics statements="14" coveredstatements="14" conditionals="30" coveredconditionals="28" methods="1" coveredmethods="1"/>
-        <line num="11" count="3" type="stmt"/>
-        <line num="23" count="11" type="cond" truecount="1" falsecount="1"/>
-        <line num="25" count="11" type="cond" truecount="2" falsecount="0"/>
-        <line num="26" count="6" type="stmt"/>
-        <line num="29" count="11" type="cond" truecount="1" falsecount="1"/>
-        <line num="30" count="11" type="stmt"/>
-        <line num="31" count="11" type="cond" truecount="2" falsecount="0"/>
-        <line num="32" count="4" type="stmt"/>
-        <line num="34" count="11" type="cond" truecount="2" falsecount="0"/>
-        <line num="35" count="1" type="stmt"/>
-        <line num="37" count="11" type="cond" truecount="2" falsecount="0"/>
-        <line num="38" count="4" type="stmt"/>
-        <line num="42" count="11" type="stmt"/>
-        <line num="174" count="3" type="stmt"/>
+        <metrics statements="18" coveredstatements="18" conditionals="32" coveredconditionals="30" methods="2" coveredmethods="2"/>
+        <line num="11" count="4" type="stmt"/>
+        <line num="25" count="69" type="cond" truecount="1" falsecount="1"/>
+        <line num="27" count="69" type="cond" truecount="2" falsecount="0"/>
+        <line num="28" count="63" type="stmt"/>
+        <line num="31" count="69" type="cond" truecount="1" falsecount="1"/>
+        <line num="32" count="69" type="stmt"/>
+        <line num="33" count="69" type="cond" truecount="2" falsecount="0"/>
+        <line num="34" count="4" type="stmt"/>
+        <line num="36" count="69" type="cond" truecount="2" falsecount="0"/>
+        <line num="37" count="1" type="stmt"/>
+        <line num="39" count="69" type="cond" truecount="2" falsecount="0"/>
+        <line num="40" count="4" type="stmt"/>
+        <line num="44" count="69" type="stmt"/>
+        <line num="77" count="69" type="stmt"/>
+        <line num="109" count="69" type="cond" truecount="2" falsecount="0"/>
+        <line num="110" count="1" type="stmt"/>
+        <line num="112" count="68" type="stmt"/>
+        <line num="177" count="4" type="stmt"/>
       </file>
     </package>
     <package name="react.components.Toast">