@madie/madie-design-system 1.2.62 → 2.0.1

package/components/MadieDialog/MadieDialog.stories.js

@@ -1,9 +1,7 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import MadieDialog from "./index";
-import TextArea from "../TextArea/index";
-import Select from "../Select/index";
+import TextArea from "../TextArea";
+import Select from "../Select";
 import Button from "../Button";
 import { Switch, FormGroup, FormControlLabel } from "@mui/material";
 import { DialogContent, Typography } from "@mui/material";
@@ -11,7 +9,6 @@ import { DialogContent, Typography } from "@mui/material";
 export default {
     title: "MadieDialog",
     component: MadieDialog,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (
@@ -19,46 +16,32 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
 
 export const Dialog = () => {
     const [open, setOpen] = useState(false);
-    const onClose = () => {
-        setOpen(false);
-    };
-    const onContinue = () => {
-        setOpen(false);
-    };
-
     const [form, setForm] = useState(false);
     const [required, setRequired] = useState(false);
     const [showDialogActions, setShowDialogActions] = useState(false);
 
+    const onClose = () => setOpen(false);
+    const onContinue = () => setOpen(false);
+
     const cancelButtonProps = showDialogActions
-        ? {
-              cancelText: "Discard Changes",
-              "data-testid": "cancel-button",
-          }
+        ? { cancelText: "Discard Changes", "data-testid": "cancel-button" }
         : undefined;
+
     const continueButtonProps = showDialogActions
-        ? {
-              continueText: "Save",
-              "data-testid": "save-button",
-          }
+        ? { continueText: "Save", "data-testid": "save-button" }
         : undefined;
 
     return (
-        <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        <Wrapper>
             <FormGroup>
                 <FormControlLabel
                     control={
                         <Switch
                             checked={form}
                             onChange={(e) => setForm(e.target.checked)}
-                            name="Form"
                         />
                     }
                     label="Form"
@@ -68,7 +51,6 @@ export const Dialog = () => {
                         <Switch
                             checked={required}
                             onChange={(e) => setRequired(e.target.checked)}
-                            name="Required"
                         />
                     }
                     label="Required"
@@ -80,10 +62,9 @@ export const Dialog = () => {
                             onChange={(e) =>
                                 setShowDialogActions(e.target.checked)
                             }
-                            name="actions"
                         />
                     }
-                    label="actions"
+                    label="Show Actions"
                 />
             </FormGroup>
             <Button variant="cyan" onClick={() => setOpen(true)}>
@@ -93,52 +74,40 @@ export const Dialog = () => {
                 form={form}
                 required={required}
                 title="Madie Dialog"
-                dialogProps={{
-                    open,
-                    onClose,
-                    onSubmit: onContinue,
-                }}
+                dialogProps={{ open, onClose, onSubmit: onContinue }}
                 cancelButtonProps={cancelButtonProps}
                 continueButtonProps={continueButtonProps}
             >
-                <div>
-                    <Select
-                        id={`measure-referenceType`}
-                        label="Type"
-                        placeHolder={{ name: "Select", value: "" }}
-                        inputProps={{
-                            "data-testid": `measure-referenceType-input`,
-                        }}
-                        data-testid={`measure-referenceType`}
-                        required
-                        SelectDisplayProps={{
-                            "aria-required": "true",
-                        }}
-                    />
-
-                    <TextArea
-                        required
-                        label="Reference"
-                        placeholder="Enter"
-                        id="measure-referenceText"
-                        data-testid="measure-referenceText"
-                        inputProps={{
-                            "data-testid": "measure-referenceText-input",
-                            "aria-describedby":
-                                "measure-referenceText-helper-text",
-                        }}
-                    />
-                </div>
+                <Select
+                    id="measure-referenceType"
+                    label="Type"
+                    placeHolder={{ name: "Select", value: "" }}
+                    inputProps={{
+                        "data-testid": "measure-referenceType-input",
+                    }}
+                    data-testid="measure-referenceType"
+                    required
+                    SelectDisplayProps={{ "aria-required": "true" }}
+                />
+                <TextArea
+                    required
+                    label="Reference"
+                    placeholder="Enter"
+                    id="measure-referenceText"
+                    data-testid="measure-referenceText"
+                    inputProps={{
+                        "data-testid": "measure-referenceText-input",
+                        "aria-describedby": "measure-referenceText-helper-text",
+                    }}
+                />
             </MadieDialog>
-        </div>
+        </Wrapper>
     );
 };
 
 export const DialogWithActionButtons = () => {
     const [open, setOpen] = useState(false);
-    const onClose = () => {
-        setOpen(false);
-    };
+    const onClose = () => setOpen(false);
 
     return (
         <>
@@ -147,19 +116,8 @@ export const DialogWithActionButtons = () => {
             </Button>
             <MadieDialog
                 title="Human Readable"
-                sx={{
-                    "#modal-body": {
-                        h2: {
-                            borderTop: "1px solid black",
-                        },
-                    },
-                }}
-                dialogProps={{
-                    onClose,
-                    open,
-                    maxWidth: "lg",
-                    fullWidth: true,
-                }}
+                sx={{ "#modal-body h2": { borderTop: "1px solid black" } }}
+                dialogProps={{ onClose, open, maxWidth: "lg", fullWidth: true }}
                 cancelButtonProps={{
                     variant: "secondary",
                     cancelText: "Cancel",
@@ -186,9 +144,7 @@ export const DialogWithActionButtons = () => {
 
 export const DialogWithActionButtonsHideContinueButton = () => {
     const [open, setOpen] = useState(false);
-    const onClose = () => {
-        setOpen(false);
-    };
+    const onClose = () => setOpen(false);
 
     return (
         <>
@@ -197,19 +153,8 @@ export const DialogWithActionButtonsHideContinueButton = () => {
             </Button>
             <MadieDialog
                 title="Human Readable"
-                sx={{
-                    "#modal-body": {
-                        h2: {
-                            borderTop: "1px solid black",
-                        },
-                    },
-                }}
-                dialogProps={{
-                    onClose,
-                    open,
-                    maxWidth: "lg",
-                    fullWidth: true,
-                }}
+                sx={{ "#modal-body h2": { borderTop: "1px solid black" } }}
+                dialogProps={{ onClose, open, maxWidth: "lg", fullWidth: true }}
                 cancelButtonProps={{
                     variant: "secondary",
                     cancelText: "Cancel",
@@ -231,9 +176,7 @@ export const DialogWithActionButtonsHideContinueButton = () => {
 
 export const DialogWithActionButtonsContinueButtonDisabledWithTooltip = () => {
     const [open, setOpen] = useState(false);
-    const onClose = () => {
-        setOpen(false);
-    };
+    const onClose = () => setOpen(false);
 
     return (
         <>
@@ -242,19 +185,8 @@ export const DialogWithActionButtonsContinueButtonDisabledWithTooltip = () => {
             </Button>
             <MadieDialog
                 title="Human Readable"
-                sx={{
-                    "#modal-body": {
-                        h2: {
-                            borderTop: "1px solid black",
-                        },
-                    },
-                }}
-                dialogProps={{
-                    onClose,
-                    open,
-                    maxWidth: "lg",
-                    fullWidth: true,
-                }}
+                sx={{ "#modal-body h2": { borderTop: "1px solid black" } }}
+                dialogProps={{ onClose, open, maxWidth: "lg", fullWidth: true }}
                 cancelButtonProps={{
                     variant: "secondary",
                     cancelText: "Cancel",
@@ -283,9 +215,7 @@ export const DialogWithActionButtonsContinueButtonDisabledWithTooltip = () => {
 
 export const DialogWithPopoverActionButtons = () => {
     const [open, setOpen] = useState(false);
-    const onClose = () => {
-        setOpen(false);
-    };
+    const onClose = () => setOpen(false);
 
     return (
         <>
@@ -294,13 +224,7 @@ export const DialogWithPopoverActionButtons = () => {
             </Button>
             <MadieDialog
                 title="Dialog with popover action buttons"
-                sx={{
-                    "#modal-body": {
-                        h2: {
-                            borderTop: "1px solid black",
-                        },
-                    },
-                }}
+                sx={{ "#modal-body h2": { borderTop: "1px solid black" } }}
                 dialogProps={{
                     onClose,
                     open,

package/components/MadieDialog/index.jsx

@@ -1,5 +1,4 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
+import React, { useState, useRef } from "react";
 import Draggable from "react-draggable";
 import CloseIcon from "@mui/icons-material/Close";
 import {
@@ -17,14 +16,16 @@ import Button from "../Button";
 import Popover from "../Popover";
 
 const DraggablePaper = (props) => {
+    const nodeRef = useRef(null);
     const { children, ...rest } = props;
 
     return (
         <Draggable
             handle="#draggable-dialog-title"
             cancel={'[class*="MuiDialogContent-root"]'} // Prevent dragging when interacting with content
+            nodeRef={nodeRef}
         >
-            <div style={{ backgroundColor: "#fff" }} {...rest}>
+            <div ref={nodeRef} {...rest} style={{ backgroundColor: "#fff" }}>
                 {children}
             </div>
         </Draggable>
@@ -335,24 +336,4 @@ const MadieDialog = ({
     );
 };
 
-MadieDialog.propTypes = {
-    required: PropTypes.bool,
-    form: PropTypes.bool,
-    title: PropTypes.string,
-    dialogProps: PropTypes.object,
-    cancelButtonProps: PropTypes.object,
-    continueButtonProps: PropTypes.object,
-    children: PropTypes.object,
-    maxWidth: PropTypes.string,
-};
-
-DraggablePaper.propTypes = {
-    children: PropTypes.object,
-};
-
-Actions.propTypes = {
-    onClose: PropTypes.any,
-    cancelButtonProps: PropTypes.object,
-    continueButtonProps: PropTypes.object,
-};
 export default MadieDialog;

package/components/MadieDiscardDialog/MadieDiscardDialog.stories.js

@@ -1,12 +1,10 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import MadieDiscardDialog from "./index";
 import Button from "../Button";
+
 export default {
     title: "MadieDiscardDialog",
     component: MadieDiscardDialog,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (
@@ -14,24 +12,19 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
 
 export const DiscardDialog = () => {
     const [open, setOpen] = useState(false);
     const [text, setText] = useState("I'm some text that you may discard");
-    const onClose = () => {
-        setOpen(false);
-    };
+
+    const onClose = () => setOpen(false);
     const onContinue = () => {
         setText("");
         setOpen(false);
     };
 
     return (
-        <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        <Wrapper>
             <p>{text}</p>
             <Button variant="cyan" onClick={() => setOpen(true)}>
                 open Dialog
@@ -41,6 +34,6 @@ export const DiscardDialog = () => {
                 onContinue={onContinue}
                 onClose={onClose}
             />
-        </div>
+        </Wrapper>
     );
 };

package/components/MadieDiscardDialog/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import ErrorIcon from "@mui/icons-material/Error";
 import MadieDialog from "../MadieDialog";
 
@@ -40,10 +39,4 @@ const MadieDiscardDialog = ({ open, onClose, onContinue }) => (
     </MadieDialog>
 );
 
-MadieDiscardDialog.propTypes = {
-    open: PropTypes.bool,
-    onClose: PropTypes.func,
-    onContinue: PropTypes.func,
-};
-
 export default MadieDiscardDialog;

package/components/MadieSpinner/MadieSpinner.stories.js

@@ -1,12 +1,9 @@
 import React from "react";
-import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import MadieSpinner from "./index";
 
 export default {
     title: "MadieSpinner",
     component: MadieSpinner,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (
@@ -15,15 +12,10 @@ const Wrapper = ({ children }) => (
     </div>
 );
 
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
-
 export const ExampleSpinner = () => (
     <Wrapper>
         <MadieSpinner />
     </Wrapper>
 );
 
-ExampleSpinner.storyName = "example Madie Spinner";
+ExampleSpinner.storyName = "Example Madie Spinner";

package/components/MadieSpinner/index.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { CircularProgress } from "@mui/material";
-import PropTypes from "prop-types";
 
 // To change the spinner size you have to pass style props for height and width.
 const MadieSpinner = (props) => {
@@ -28,8 +27,4 @@ const MadieSpinner = (props) => {
     );
 };
 
-MadieSpinner.propTypes = {
-    thickness: PropTypes.number,
-};
-
 export default MadieSpinner;

package/components/MadieTooltip/MadieTooltip.stories.js

@@ -11,9 +11,14 @@ export default {
 };
 
 export const ExampleTooltip = () => (
-    <div>
+    <div
+        style={{
+            display: "flex",
+            flexDirection: "row",
+        }}
+    >
         <div>
-            <MadieTooltip text="Input the new version #" />
+            <MadieTooltip tooltipText="Input the new version #" />
         </div>
         <div style={{ marginLeft: 200 }}>
             <MadieTooltip color="#000" />

package/components/MadieTooltip/index.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import TooltipIcon from "../MadieTooltipIcon";
-import PropTypes from "prop-types";
 
 // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
 const MadieToolTip = ({ tooltipText = "informational text", id }) => {
@@ -41,9 +40,4 @@ const MadieToolTip = ({ tooltipText = "informational text", id }) => {
     );
 };
 
-MadieToolTip.propTypes = {
-    tooltipText: PropTypes.string,
-    id: PropTypes.string,
-};
-
 export default MadieToolTip;

package/components/MadieTooltipIcon/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 
 const TooltipIcon = ({ color = "#0073C8", ...props }) => (
     <svg
@@ -25,7 +24,3 @@ const TooltipIcon = ({ color = "#0073C8", ...props }) => (
 );
 
 export default TooltipIcon;
-
-TooltipIcon.propTypes = {
-    color: PropTypes.string,
-};

package/components/Modal/Modal.jsx

@@ -1,17 +1,38 @@
 import React, { useRef, useState, useEffect } from "react";
 import ReactModal from "react-modal";
-import PropTypes from "prop-types";
-
 import { CloseXIcon2 } from "../../lib/SvgComponents.jsx";
 
+/**
+ * @param {{
+ *   title?: string,
+ *   children: React.ReactNode,
+ *   primary?: {
+ *     title: string | React.ReactElement,
+ *     onClick?: () => void,
+ *     loading?: boolean,
+ *     loadingText?: string,
+ *   } | null,
+ *   secondary?: {
+ *     title: string | React.ReactElement,
+ *     onClick?: () => void,
+ *     loading?: boolean,
+ *     loadingText?: string,
+ *   } | null,
+ *   onRequestClose?: () => void,
+ *   appElement?: string,
+ *   isOpen?: boolean,
+ *   width?: string,
+ *   [key: string]: any
+ * }} props
+ */
 const Modal = ({
     children,
-    onRequestClose,
+    onRequestClose = () => {},
     title,
-    primary,
-    secondary,
-    appElement,
-    isOpen,
+    primary = null,
+    secondary = null,
+    appElement = "body > *:not(.qpp-c-modal)",
+    isOpen = false,
     ...props
 }) => {
     const [overflowSeparator, setOverflowSeparator] = useState(false);
@@ -29,9 +50,8 @@ const Modal = ({
                 maxWidth: "calc(100vw - 2rem)",
                 maxHeight: "calc(100vh - 2rem)",
             };
-        } else {
-            return {};
         }
+        return {};
     };
 
     return (
@@ -46,7 +66,6 @@ const Modal = ({
                 content: getWidth(),
             }}
             onAfterOpen={() => {
-                // Add heading separator based on overflow
                 if (
                     contentRef.current?.scrollHeight >
                     document.documentElement.clientHeight * 0.6
@@ -56,7 +75,6 @@ const Modal = ({
                     setOverflowSeparator(false);
                 }
 
-                // Set default focus
                 if (closeButtonRef?.current) {
                     closeButtonRef.current.focus();
                 }
@@ -98,7 +116,7 @@ const Modal = ({
                             className={`qpp-c-button qpp-c-button--secondary ${
                                 primary ? "qpp-u-margin-right--16" : ""
                             }`}
-                            loading={secondary.loading}
+                            disabled={secondary.loading}
                             onClick={secondary.onClick || onRequestClose}
                             aria-label={secondary.title}
                             data-testid="modal-secondary-btn"
@@ -109,7 +127,7 @@ const Modal = ({
                     {primary && (
                         <button
                             className="qpp-c-button"
-                            loading={primary.loading}
+                            disabled={primary.loading}
                             onClick={primary.onClick}
                             data-testid="modal-primary-btn"
                             aria-label={primary.title}
@@ -123,34 +141,4 @@ const Modal = ({
     );
 };
 
-Modal.propTypes = {
-    title: PropTypes.string,
-    children: PropTypes.node.isRequired,
-    primary: PropTypes.shape({
-        title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-        onClick: PropTypes.func,
-        loading: PropTypes.bool,
-        loadingText: PropTypes.string,
-    }),
-    secondary: PropTypes.shape({
-        title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-        onClick: PropTypes.func,
-        loading: PropTypes.bool,
-        loadingText: PropTypes.string,
-    }),
-    onRequestClose: PropTypes.func,
-    appElement: PropTypes.string,
-    isOpen: PropTypes.bool,
-    width: PropTypes.string,
-};
-
-Modal.defaultProps = {
-    onRequestClose: () => {},
-    title: undefined,
-    primary: null,
-    secondary: null,
-    appElement: "body > *:not(.qpp-c-modal)",
-    isOpen: false,
-};
-
 export default Modal;