@madie/madie-design-system 1.2.74 → 1.2.75

package/components/MadieDeleteDialog/MadieDeleteDialog.stories.js

@@ -18,6 +18,9 @@ Wrapper.propTypes = {
     className: PropTypes.string,
     children: PropTypes.node,
 };
+const contentWithHtmlTag =
+    '<p><strong>test &amp;</strong></p><table class="rich-text-table" style="min-width: 75px"><colgroup><col style="min-width: 25px"><col style="min-width: 25px"><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p></p></th></tr><tr><td colspan="1" rowspan="1"><p>table col 1</p></td><td colspan="1" rowspan="1"><p>table col 2</p></td><td colspan="1" rowspan="1"><p>table col 3</p></td></tr><tr><td colspan="1" rowspan="1"><p>table col 4</p></td><td colspan="1" rowspan="1"><p>table col 5</p></td><td colspan="1" rowspan="1"><p>table col 6</p></td></tr></tbody></table><ol><li><p><strong>test2</strong></p></li><li><p><strong>test3</strong></p></li></ol>';
+
 
 export const DeleteDialog = () => {
     const [open, setOpen] = useState(false);
@@ -65,3 +68,25 @@ export const DeleteDialogNoWarning = () => {
         </div>
     );
 };
+
+export const DeleteDialogWithHtmlTags = () => {
+    const [open, setOpen] = useState(false);
+    const onClose = () => setOpen(false);
+    const onContinue = () => setOpen(false);
+
+    return (
+        <Wrapper>
+            <Button variant="cyan" onClick={() => setOpen(true)}>
+                open Dialog
+            </Button>
+            <MadieDeleteDialog
+                open={open}
+                onContinue={onContinue}
+                onClose={onClose}
+                hideWarning={true}
+                dialogTitle="Delete Measure Reference"
+                name={contentWithHtmlTag}
+            />
+        </Wrapper>
+    );
+};

package/components/MadieDeleteDialog/index.jsx

@@ -2,6 +2,15 @@ import React from "react";
 import PropTypes from "prop-types";
 import ErrorIcon from "@mui/icons-material/Error";
 import MadieDialog from "../MadieDialog";
+import parse, { domToReact } from "html-react-parser";
+
+const options = {
+    replace: ({ name, children }) => {
+        if (name === "p") {
+            return <>{domToReact(children)}</>; //  Return the children directly, effectively removing the <p> tag
+        }
+    },
+};
 
 const MadieDeleteDialog = ({
     open,
@@ -34,7 +43,15 @@ const MadieDeleteDialog = ({
             <section className="dialog-warning-body">
                 <p>
                     Are you sure you want to delete{" "}
-                    <span className="strong">{otherDialogProps.name}</span>?
+                    <span className="strong">
+                        {parse(
+                            otherDialogProps?.name
+                                ? otherDialogProps?.name
+                                : "",
+                            options,
+                        )}
+                    </span>
+                    ?
                 </p>
             </section>
             {otherDialogProps.hideWarning !== true && (