@madie/madie-design-system 1.2.29 → 1.2.31

package/components/DateTimeField/DateTimeField.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import InputLabel from "../InputLabel";
 import TextField from "../TextField";
 import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
@@ -9,13 +8,12 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 
 import { FormControl } from "@mui/material";
-import { kebabCase } from "lodash";
 
 dayjs.extend(utc);
 dayjs.utc();
 export const dateTimeTextFieldStyle = {
     width: "240px",
-    height: 40,
+    height: "40px",
     marginTop: "8px",
     "& .MuiOutlinedInput-notchedOutline": {
         border: "1px solid #8C8C8C",
@@ -43,6 +41,9 @@ export const dateTimeTextFieldStyle = {
             fontSize: 14,
         },
     },
+    "& .MuiInputBase-root": {
+        height: "40px",
+    },
 };
 
 const DateTimeField = ({
@@ -55,12 +56,6 @@ const DateTimeField = ({
     return (
         <FormControl>
             <LocalizationProvider dateAdapter={AdapterDayjs}>
-                <InputLabel
-                    style={{ marginBottom: 0, height: 16 }}
-                    data-testId={`${kebabCase(label)}`}
-                >
-                    {`${label}`}
-                </InputLabel>
                 <DateTimePicker
                     value={dateTimeValue ? dayjs.utc(dateTimeValue) : null}
                     onChange={handleDateTimeChange}
@@ -70,6 +65,7 @@ const DateTimeField = ({
                         textField: {
                             id: id, // textfield will delegate an input data-testid based off id
                             sx: dateTimeTextFieldStyle,
+                            label,
                         },
                         openPickerButton: {
                             id: `${id}-open-picker-button`,

package/components/MadieDialog/MadieDialog.stories.js

@@ -34,6 +34,21 @@ export const Dialog = () => {
 
     const [form, setForm] = useState(false);
     const [required, setRequired] = useState(false);
+    const [showDialogActions, setShowDialogActions] = useState(false);
+
+    const cancelButtonProps = showDialogActions
+        ? {
+              cancelText: "Discard Changes",
+              "data-testid": "cancel-button",
+          }
+        : undefined;
+    const continueButtonProps = showDialogActions
+        ? {
+              continueText: "Save",
+              "data-testid": "save-button",
+          }
+        : undefined;
+
     return (
         <div className="qpp-u-padding--16" style={{ width: 300 }}>
             <FormGroup>
@@ -57,6 +72,18 @@ export const Dialog = () => {
                     }
                     label="Required"
                 />
+                <FormControlLabel
+                    control={
+                        <Switch
+                            checked={showDialogActions}
+                            onChange={(e) =>
+                                setShowDialogActions(e.target.checked)
+                            }
+                            name="actions"
+                        />
+                    }
+                    label="actions"
+                />
             </FormGroup>
             <Button variant="cyan" onClick={() => setOpen(true)}>
                 open Dialog
@@ -70,14 +97,8 @@ export const Dialog = () => {
                     onClose,
                     onSubmit: onContinue,
                 }}
-                cancelButtonProps={{
-                    cancelText: "Discard Changes",
-                    "data-testid": "cancel-button",
-                }}
-                continueButtonProps={{
-                    continueText: "Save",
-                    "data-testid": "save-button",
-                }}
+                cancelButtonProps={cancelButtonProps}
+                continueButtonProps={continueButtonProps}
             >
                 <div>
                     <Select

package/components/MadieDialog/index.jsx

@@ -29,6 +29,52 @@ const DraggablePaper = (props) => {
     );
 };
 
+const Actions = ({ onClose, cancelButtonProps, continueButtonProps }) => {
+    const { cancelText, cancelIcon, ...otherCancelButtonProps } =
+        cancelButtonProps;
+    const { continueText, continueIcon, ...otherContinueButtonProps } =
+        continueButtonProps;
+    return (
+        <>
+            <Divider sx={{ borderColor: "#8c8c8c" }} />
+            <DialogActions
+                sx={{
+                    padding: "16px",
+                    "& >:not(:first-of-type)": {
+                        marginLeft: "16px",
+                    },
+                }}
+            >
+                {cancelButtonProps && (
+                    <Button
+                        variant="secondary"
+                        onClick={onClose}
+                        {...otherCancelButtonProps}
+                    >
+                        <span>
+                            {cancelText}
+                            {cancelIcon}
+                        </span>
+                    </Button>
+                )}
+                {continueButtonProps && (
+                    <Button
+                        className="qpp-c-button--cyan"
+                        type="submit"
+                        style={{ marginTop: 0 }}
+                        {...otherContinueButtonProps}
+                    >
+                        <span>
+                            {continueText}
+                            {continueIcon}
+                        </span>
+                    </Button>
+                )}
+            </DialogActions>
+        </>
+    );
+};
+
 const MadieDialog = ({
     /*
         Lets make a reusable component
@@ -66,10 +112,6 @@ const MadieDialog = ({
         showRequiredFieldMessage,
         ...otherDialogProps
     } = dialogProps;
-    const { cancelText, cancelIcon, ...otherCancelButtonProps } =
-        cancelButtonProps;
-    const { continueText, continueIcon, ...otherContinueButonProps } =
-        continueButtonProps;
 
     return (
         <Dialog
@@ -192,37 +234,13 @@ const MadieDialog = ({
 
                         {children}
                     </DialogContent>
-                    <Divider sx={{ borderColor: "#8c8c8c" }} />
-                    <DialogActions
-                        sx={{
-                            padding: "16px",
-                            "& >:not(:first-of-type)": {
-                                marginLeft: "16px",
-                            },
-                        }}
-                    >
-                        <Button
-                            variant="secondary"
-                            onClick={onClose}
-                            {...otherCancelButtonProps}
-                        >
-                            <span>
-                                {cancelText}
-                                {cancelIcon}
-                            </span>
-                        </Button>
-                        <Button
-                            className="qpp-c-button--cyan"
-                            type="submit"
-                            style={{ marginTop: 0 }}
-                            {...otherContinueButonProps}
-                        >
-                            <span>
-                                {continueText}
-                                {continueIcon}
-                            </span>
-                        </Button>
-                    </DialogActions>
+                    {(cancelButtonProps || continueButtonProps) && (
+                        <Actions
+                            onClose={onClose}
+                            continueButtonProps={continueButtonProps}
+                            cancelButtonProps={cancelButtonProps}
+                        />
+                    )}
                 </form>
             ) : (
                 <>
@@ -259,37 +277,13 @@ const MadieDialog = ({
                     <DialogContent sx={{ padding: "32px" }}>
                         {children}
                     </DialogContent>
-                    <Divider sx={{ borderColor: "#8c8c8c" }} />
-                    <DialogActions
-                        sx={{
-                            padding: "16px",
-                            "& >:not(:first-of-type)": {
-                                marginLeft: "16px",
-                            },
-                        }}
-                    >
-                        <Button
-                            variant="secondary"
-                            onClick={onClose}
-                            {...otherCancelButtonProps}
-                        >
-                            <span>
-                                {cancelText}
-                                {cancelIcon}
-                            </span>
-                        </Button>
-                        <Button
-                            variant="cyan"
-                            type="submit"
-                            style={{ marginTop: 0 }}
-                            {...otherContinueButonProps}
-                        >
-                            <span>
-                                {continueText}
-                                {continueIcon}
-                            </span>
-                        </Button>
-                    </DialogActions>
+                    {(cancelButtonProps || continueButtonProps) && (
+                        <Actions
+                            onClose={onClose}
+                            continueButtonProps={continueButtonProps}
+                            cancelButtonProps={cancelButtonProps}
+                        />
+                    )}
                 </>
             )}
         </Dialog>
@@ -310,4 +304,9 @@ DraggablePaper.propTypes = {
     children: PropTypes.object,
 };
 
+Actions.propTypes = {
+    onClose: PropTypes.any,
+    cancelButtonProps: PropTypes.object,
+    continueButtonProps: PropTypes.object,
+};
 export default MadieDialog;

package/coverage/clover.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1724262722044" clover="3.2.0">
-  <project timestamp="1724262722044" name="All files">
-    <metrics statements="393" coveredstatements="379" conditionals="308" coveredconditionals="265" methods="113" coveredmethods="106" elements="814" coveredelements="750" complexity="0" loc="393" ncloc="393" packages="26" files="36" classes="36"/>
+<coverage generated="1726059836699" clover="3.2.0">
+  <project timestamp="1726059836700" name="All files">
+    <metrics statements="396" coveredstatements="382" conditionals="318" coveredconditionals="274" methods="114" coveredmethods="107" elements="828" coveredelements="763" complexity="0" loc="396" ncloc="396" packages="26" files="36" classes="36"/>
     <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">
@@ -46,11 +46,11 @@
         <line num="17" count="4" type="stmt"/>
         <line num="28" count="28" type="stmt"/>
         <line num="30" count="28" type="cond" truecount="2" falsecount="0"/>
-        <line num="31" count="19" type="stmt"/>
+        <line num="31" count="18" type="stmt"/>
         <line num="33" count="28" type="cond" truecount="2" falsecount="0"/>
         <line num="34" count="1" type="stmt"/>
         <line num="36" count="28" type="cond" truecount="2" falsecount="0"/>
-        <line num="37" count="2" type="stmt"/>
+        <line num="37" count="13" type="stmt"/>
         <line num="40" count="28" type="cond" truecount="2" falsecount="0"/>
         <line num="41" count="1" type="stmt"/>
         <line num="52" count="27" type="stmt"/>
@@ -85,15 +85,15 @@
       </file>
     </package>
     <package name="react.components.DateTimeField">
-      <metrics statements="6" coveredstatements="6" conditionals="3" coveredconditionals="2" methods="1" coveredmethods="1"/>
+      <metrics statements="6" coveredstatements="6" conditionals="3" coveredconditionals="1" methods="1" coveredmethods="1"/>
       <file name="DateTimeField.jsx" path="/home/runner/work/madie-design-system/madie-design-system/react/components/DateTimeField/DateTimeField.jsx">
-        <metrics statements="6" coveredstatements="6" conditionals="3" coveredconditionals="2" methods="1" coveredmethods="1"/>
+        <metrics statements="6" coveredstatements="6" conditionals="3" coveredconditionals="1" methods="1" coveredmethods="1"/>
+        <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="1" type="stmt"/>
-        <line num="48" count="1" type="stmt"/>
-        <line num="55" count="1" type="stmt"/>
-        <line num="85" count="1" type="stmt"/>
+        <line num="49" count="1" type="stmt"/>
+        <line num="56" count="1" type="stmt"/>
+        <line num="81" count="1" type="stmt"/>
       </file>
     </package>
     <package name="react.components.Error">
@@ -193,7 +193,7 @@
       <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="27" type="stmt"/>
+        <line num="6" count="26" type="stmt"/>
         <line num="48" count="6" type="stmt"/>
       </file>
     </package>
@@ -247,21 +247,24 @@
       </file>
     </package>
     <package name="react.components.MadieDialog">
-      <metrics statements="12" coveredstatements="12" conditionals="6" coveredconditionals="5" methods="3" coveredmethods="3"/>
+      <metrics statements="15" coveredstatements="15" conditionals="16" coveredconditionals="15" methods="4" coveredmethods="4"/>
       <file name="index.jsx" path="/home/runner/work/madie-design-system/madie-design-system/react/components/MadieDialog/index.jsx">
-        <metrics statements="12" coveredstatements="12" conditionals="6" coveredconditionals="5" methods="3" coveredmethods="3"/>
+        <metrics statements="15" coveredstatements="15" conditionals="16" coveredconditionals="15" methods="4" coveredmethods="4"/>
         <line num="17" count="3" type="stmt"/>
-        <line num="18" count="12" type="stmt"/>
-        <line num="20" count="12" type="stmt"/>
+        <line num="18" count="15" type="stmt"/>
+        <line num="20" count="14" type="stmt"/>
         <line num="32" count="3" type="stmt"/>
-        <line num="68" count="18" type="stmt"/>
-        <line num="70" count="18" type="stmt"/>
-        <line num="72" count="18" type="stmt"/>
-        <line num="74" count="18" type="stmt"/>
-        <line num="94" count="1" type="stmt"/>
-        <line num="95" count="1" type="stmt"/>
-        <line num="299" count="3" type="stmt"/>
-        <line num="309" count="3" type="stmt"/>
+        <line num="34" count="12" type="stmt"/>
+        <line num="36" count="12" type="stmt"/>
+        <line num="37" count="12" type="stmt"/>
+        <line num="78" count="3" type="stmt"/>
+        <line num="114" count="20" type="stmt"/>
+        <line num="116" count="20" type="stmt"/>
+        <line num="136" count="1" type="stmt"/>
+        <line num="137" count="1" type="stmt"/>
+        <line num="293" count="3" type="stmt"/>
+        <line num="303" count="3" type="stmt"/>
+        <line num="307" count="3" type="stmt"/>
       </file>
     </package>
     <package name="react.components.MadieDiscardDialog">