@madie/madie-design-system 1.0.27 → 1.0.28

package/components/MadieDeleteDialog/MadieDeleteDialog.stories.js

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { withKnobs } from "@storybook/addon-knobs";
+import MadieDeleteDialog from "./index";
+import Button from "../Button";
+export default {
+    title: "MadieDeleteDialog",
+    component: MadieDeleteDialog,
+    decorators: [withKnobs],
+};
+
+const Wrapper = ({ children }) => (
+    <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        {children}
+    </div>
+);
+Wrapper.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+};
+
+export const DeleteDialog = () => {
+    const [open, setOpen] = useState(false);
+    const onClose = () => {
+        setOpen(false);
+    };
+    const onContinue = () => {
+        setOpen(false);
+    };
+
+    return (
+        <div className="qpp-u-padding--16" style={{ width: 300 }}>
+            <Button variant="cyan" onClick={() => setOpen(true)}>
+                open Dialog
+            </Button>
+            <MadieDeleteDialog
+                open={open}
+                onContinue={onContinue}
+                onClose={onClose}
+            />
+        </div>
+    );
+};

package/components/MadieDeleteDialog/index.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ErrorIcon from "@mui/icons-material/Error";
+import MadieDialog from "../MadieDialog";
+
+const MadieDeleteDialog = ({
+    open,
+    onClose,
+    onContinue,
+    ...otherDialogProps
+}) => (
+    <MadieDialog
+        title={otherDialogProps.dialogTitle}
+        dialogProps={{
+            open: open,
+            onClose,
+            "data-testid": "delete-dialog",
+        }}
+        cancelButtonProps={{
+            variant: "secondary",
+            onClick: onClose,
+            cancelText: "Cancel",
+            "data-testid": "delete-dialog-cancel-button",
+        }}
+        continueButtonProps={{
+            variant: "danger-primary",
+            type: "submit",
+            "data-testid": "delete-dialog-continue-button",
+            continueText: "Yes, Delete",
+            onClick: onContinue,
+        }}
+    >
+        <div id="delete-dialog-body">
+            <section className="dialog-warning-body">
+                <p>
+                    Are you sure you want to delete{" "}
+                    <span className="strong">{otherDialogProps.name}</span>?
+                </p>
+            </section>
+            <section className="dialog-warning-action">
+                <ErrorIcon />
+                <p>This Action cannot be undone.</p>
+            </section>
+        </div>
+    </MadieDialog>
+);
+
+MadieDeleteDialog.propTypes = {
+    open: PropTypes.bool,
+    onClose: PropTypes.func,
+    onContinue: PropTypes.func,
+};
+
+export default MadieDeleteDialog;

package/components/index.js

@@ -11,6 +11,7 @@ import FormControlLabel from "./FormControlLabel";
 import MadieAlert from "./MadieAlert";
 import MadieDialog from "./MadieDialog";
 import MadieDiscardDialog from "./MadieDiscardDialog";
+import MadieDeleteDialog from "./MadieDeleteDialog";
 import MadieSpinner from "./MadieSpinner";
 import Modal from "./Modal";
 import { Pagination } from "./Pagination";
@@ -126,6 +127,7 @@ export {
     MadieAlert,
     MadieDialog,
     MadieDiscardDialog,
+    MadieDeleteDialog,
     MadieSpinner,
     Pagination,
     ReadOnlyTextField,