@madie/madie-design-system 1.2.62 → 2.0.0

package/components/MadieDialog/MadieDialog.stories.js

@@ -1,9 +1,8 @@
 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 +10,6 @@ import { DialogContent, Typography } from "@mui/material";
 export default {
     title: "MadieDialog",
     component: MadieDialog,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (
@@ -26,39 +24,29 @@ Wrapper.propTypes = {
 
 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 +56,6 @@ export const Dialog = () => {
                         <Switch
                             checked={required}
                             onChange={(e) => setRequired(e.target.checked)}
-                            name="Required"
                         />
                     }
                     label="Required"
@@ -80,10 +67,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 +79,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 +121,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 +149,7 @@ export const DialogWithActionButtons = () => {
 
 export const DialogWithActionButtonsHideContinueButton = () => {
     const [open, setOpen] = useState(false);
-    const onClose = () => {
-        setOpen(false);
-    };
+    const onClose = () => setOpen(false);
 
     return (
         <>
@@ -197,19 +158,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 +181,7 @@ export const DialogWithActionButtonsHideContinueButton = () => {
 
 export const DialogWithActionButtonsContinueButtonDisabledWithTooltip = () => {
     const [open, setOpen] = useState(false);
-    const onClose = () => {
-        setOpen(false);
-    };
+    const onClose = () => setOpen(false);
 
     return (
         <>
@@ -242,19 +190,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 +220,7 @@ export const DialogWithActionButtonsContinueButtonDisabledWithTooltip = () => {
 
 export const DialogWithPopoverActionButtons = () => {
     const [open, setOpen] = useState(false);
-    const onClose = () => {
-        setOpen(false);
-    };
+    const onClose = () => setOpen(false);
 
     return (
         <>
@@ -294,13 +229,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,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import PropTypes from "prop-types";
 import Draggable from "react-draggable";
 import CloseIcon from "@mui/icons-material/Close";
@@ -17,14 +17,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>

package/components/MadieDiscardDialog/MadieDiscardDialog.stories.js

@@ -1,12 +1,11 @@
 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 }) => (
@@ -22,16 +21,15 @@ Wrapper.propTypes = {
 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 +39,6 @@ export const DiscardDialog = () => {
                 onContinue={onContinue}
                 onClose={onClose}
             />
-        </div>
+        </Wrapper>
     );
 };

package/components/MadieSpinner/MadieSpinner.stories.js

@@ -1,12 +1,10 @@
 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 }) => (
@@ -26,4 +24,4 @@ export const ExampleSpinner = () => (
     </Wrapper>
 );
 
-ExampleSpinner.storyName = "example Madie Spinner";
+ExampleSpinner.storyName = "Example Madie Spinner";

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/Modal/Modal.stories.js

@@ -1,12 +1,10 @@
 import React, { useState } from "react";
 import Modal from "./index";
-import { withKnobs, boolean, text } from "@storybook/addon-knobs";
 import { humanReadable } from "./HumanReadable";
 
 export default {
     title: "Modal",
     component: Modal,
-    decorators: [withKnobs],
 };
 
 const useModal = () => {
@@ -16,9 +14,12 @@ const useModal = () => {
     return [open, openModal, closeModal];
 };
 
+const lorem =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris.";
+
 export const WithDesignSystem = () => {
     const [open, openModal, closeModal] = useModal();
-    const knobIsOpen = boolean("isOpen", false);
+
     return (
         <div className="qpp-u-padding--12">
             <button className="qpp-c-button" onClick={openModal}>
@@ -26,16 +27,11 @@ export const WithDesignSystem = () => {
             </button>
             <Modal
                 useDesignSystem
-                isOpen={open || knobIsOpen}
-                title={text("Title text", "Title Text")}
+                isOpen={open}
+                title="Title Text"
                 onRequestClose={closeModal}
             >
-                <p>
-                    {text(
-                        "bodyText",
-                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris."
-                    )}
-                </p>
+                <p>{lorem}</p>
             </Modal>
         </div>
     );
@@ -43,7 +39,7 @@ export const WithDesignSystem = () => {
 
 export const WithDesignSystemDialog = () => {
     const [open, openModal, closeModal] = useModal();
-    const knobIsOpen = boolean("isOpen", false);
+
     return (
         <div className="qpp-u-padding--12">
             <button className="qpp-c-button" onClick={openModal}>
@@ -51,8 +47,8 @@ export const WithDesignSystemDialog = () => {
             </button>
             <Modal
                 useDesignSystem
-                isOpen={open || knobIsOpen}
-                title={text("Title text", "Title Text")}
+                isOpen={open}
+                title="Title Text"
                 onRequestClose={closeModal}
                 primary={{
                     title: "Yes, go for it",
@@ -65,12 +61,7 @@ export const WithDesignSystemDialog = () => {
                     title: "No, take me back",
                 }}
             >
-                <p>
-                    {text(
-                        "bodyText",
-                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris."
-                    )}
-                </p>
+                <p>{lorem}</p>
             </Modal>
         </div>
     );
@@ -78,7 +69,7 @@ export const WithDesignSystemDialog = () => {
 
 export const WithDesignSystemOverflow = () => {
     const [open, openModal, closeModal] = useModal();
-    const knobIsOpen = boolean("isOpen", false);
+
     return (
         <div className="qpp-u-padding--12">
             <button className="qpp-c-button" onClick={openModal}>
@@ -86,8 +77,8 @@ export const WithDesignSystemOverflow = () => {
             </button>
             <Modal
                 useDesignSystem
-                isOpen={open || knobIsOpen}
-                title={text("Title text", "Title Text")}
+                isOpen={open}
+                title="Title Text"
                 onRequestClose={closeModal}
                 primary={{
                     title: "Yes, go for it",
@@ -100,68 +91,9 @@ export const WithDesignSystemOverflow = () => {
                     title: "No, take me back",
                 }}
             >
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Phasellus ac pulvinar massa, in mattis ligula. Vestibulum
-                    enim velit, ullamcorper vitae lorem ullamcorper, blandit
-                    fringilla mauris. Aenean odio nulla, dapibus convallis est
-                    ac, tempor congue lorem. Aliquam facilisis tortor eget
-                    lectus gravida bibendum. Suspendisse vel posuere risus.
-                    Etiam condimentum sollicitudin est, eget auctor lectus
-                    suscipit nec. Duis efficitur vitae risus at malesuada.
-                    Mauris tempus turpis sed lacus lacinia, et mattis tortor
-                    eleifend. In sit amet felis vel quam egestas ultricies ac ac
-                    nisl. Morbi elementum dui libero, non convallis risus ornare
-                    vel. Maecenas posuere ipsum ut sem aliquet, quis maximus
-                    dolor cursus. Praesent vulputate orci tellus, sed fringilla
-                    arcu mollis sit amet. Phasellus eros turpis, consequat sit
-                    amet placerat sed, mollis ac justo.
-                </p>
-                <p>
-                    Cras quis pharetra elit. Mauris lacinia quam quis metus
-                    mattis lobortis vel nec arcu. Fusce nec tellus vel nunc
-                    cursus vestibulum. Quisque pretium, arcu at sagittis
-                    posuere, leo magna tempus nunc, vel malesuada nunc mauris ac
-                    ante. Donec arcu velit, imperdiet vitae purus nec, imperdiet
-                    auctor nisi. Cras ornare, elit sit amet viverra bibendum,
-                    justo dolor congue mi, quis pretium erat orci a lorem. Sed
-                    rhoncus quam ut tellus hendrerit accumsan.
-                </p>
-                <p>
-                    Donec varius elit vitae elit efficitur fermentum. Vestibulum
-                    ante ipsum primis in faucibus orci luctus et ultrices
-                    posuere cubilia curae; Nulla facilisi. Ut malesuada
-                    venenatis varius. Nunc libero massa, luctus sagittis sapien
-                    ultrices, pulvinar venenatis purus. In nec orci ac nibh
-                    sagittis lobortis vel sed massa. Morbi pretium odio vitae
-                    malesuada ullamcorper. Pellentesque facilisis posuere
-                    consectetur. Nam maximus finibus ante, non eleifend neque
-                    euismod et.
-                </p>
-                <p>
-                    Pellentesque vehicula nec massa nec accumsan. Pellentesque
-                    non odio eu felis hendrerit pellentesque non sed neque.
-                    Morbi dui nisl, facilisis id gravida non, vehicula at dui.
-                    In eleifend suscipit imperdiet. Quisque facilisis augue et
-                    mi lobortis tristique. Praesent auctor dictum erat, non
-                    mollis ante tempus id. Integer et libero iaculis, imperdiet
-                    neque at, pharetra nisl. Suspendisse diam massa, vehicula eu
-                    varius ullamcorper, semper vel velit. Morbi consequat mattis
-                    nisi, id dignissim est bibendum non. Suspendisse semper
-                    laoreet neque, ac tincidunt tortor. Ut posuere urna a
-                    convallis consectetur. Mauris varius cursus libero sed
-                    molestie. Duis id dignissim arcu. Mauris tincidunt egestas
-                    congue.
-                </p>
-                <p>
-                    Donec rutrum erat vitae nulla ultricies, quis laoreet orci
-                    consequat. Nunc et justo volutpat dolor feugiat convallis.
-                    Vivamus efficitur nisi quis risus eleifend, ut tincidunt
-                    turpis volutpat. Nam commodo turpis dolor, dapibus rutrum
-                    erat facilisis a. Ut a dictum urna. Maecenas vel egestas
-                    odio. Ut venenatis est dolor, eget ullamcorper diam finibus
-                    et. Proin tincidunt porta pellentesque.
-                </p>
+                {[...Array(5)].map((_, i) => (
+                    <p key={i}>{lorem.repeat(5)}</p>
+                ))}
             </Modal>
         </div>
     );
@@ -169,8 +101,6 @@ export const WithDesignSystemOverflow = () => {
 
 export const WithDesignSystemOverflowForHR = () => {
     const [open, openModal, closeModal] = useModal();
-    const knobIsOpen = boolean("isOpen", false);
-
     const hr = humanReadable();
 
     return (
@@ -178,11 +108,10 @@ export const WithDesignSystemOverflowForHR = () => {
             <button className="qpp-c-button" onClick={openModal}>
                 Open Modal
             </button>
-
             <div data-testid="view-hr-modal">
                 <Modal
                     useDesignSystem
-                    isOpen={open || knobIsOpen}
+                    isOpen={open}
                     title="Human Readable"
                     onRequestClose={closeModal}
                     width="75rem"

package/components/NotificationBanner/NotificationBanner.stories.js

@@ -1,23 +1,29 @@
 import React from "react";
 import NotificationBanner from "./index";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
 
 export default {
     title: "NotificationBanner",
     component: NotificationBanner,
-    decorators: [withKnobs],
-};
-
-export const ExampleNotificationBanner = () => (
-    <NotificationBanner
-        result={{
+    args: {
+        result: {
             content: "CONTENT",
             label: "Label",
             name: "name",
             color: "blue",
-            dismissable: boolean("dismissable", false),
-        }}
-    />
-);
+            dismissable: false,
+        },
+    },
+    argTypes: {
+        result: {
+            control: "object",
+        },
+        "result.dismissable": {
+            control: "boolean",
+        },
+    },
+};
+
+const Template = (args) => <NotificationBanner {...args} />;
 
+export const ExampleNotificationBanner = Template.bind({});
 ExampleNotificationBanner.storyName = "example NotificationBanner";

package/components/NotificationBanner/index.js

@@ -38,7 +38,7 @@ class NotificationBanner extends Component {
             if (Object.keys(notifications).length > 0) {
                 this.setState({
                     expanded: this.isNotificationExpanded(
-                        notifications.content
+                        notifications.content,
                     ),
                 });
             }
@@ -110,7 +110,7 @@ class NotificationBanner extends Component {
                         ...storageNotification.content,
                         dateDismissed,
                     },
-                })
+                }),
             );
         } else {
             window.localStorage.setItem(
@@ -121,7 +121,7 @@ class NotificationBanner extends Component {
                         name: "header-notification",
                         dateDismissed,
                     },
-                })
+                }),
             );
         }
     }