From 432bf14329c6fbc461f61d4f0937a1707eed1b64 Mon Sep 17 00:00:00 2001
From: Maxime <maxime.gendron07@gmail.com>
Date: Wed, 1 Dec 2021 09:18:39 -0500
Subject: [PATCH] feat(ModalDialog): expose hasCloseButton prop

---
 .../src/components/modal/modal-dialog.tsx     |  8 +++--
 packages/react/src/icons/alert-filled.svg     |  2 +-
 packages/react/src/icons/warning-filled.svg   |  2 +-
 .../stories/modal-dialog.stories.mdx          | 29 +++++++++++++++++--
 4 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/modal/modal-dialog.tsx b/packages/react/src/components/modal/modal-dialog.tsx
index 6d9943e2a3..68a49b6d4a 100644
--- a/packages/react/src/components/modal/modal-dialog.tsx
+++ b/packages/react/src/components/modal/modal-dialog.tsx
@@ -45,10 +45,10 @@ const HeadingWrapper = styled.div`
 `;
 
 const TitleIcon = styled(Icon)`
+    left: -32px;
     margin-top: calc(var(--spacing-half) * 1.5);
     position: absolute;
     top: 0;
-    left: -32px;
 `;
 
 export interface ModalDialogProps {
@@ -65,6 +65,7 @@ export interface ModalDialogProps {
     className?: string;
     confirmButton?: { label?: string, onConfirm?(): void };
     footerContent?: ReactElement;
+    hasCloseButton?: boolean;
     isOpen: boolean;
     /**
      * Defines if the overlay click should close the modal
@@ -88,6 +89,7 @@ export function ModalDialog({
     className,
     confirmButton,
     footerContent,
+    hasCloseButton,
     isOpen,
     shouldCloseOnOverlayClick = true,
     subtitle,
@@ -114,7 +116,7 @@ export function ModalDialog({
     }
 
     function getHeader(): ReactElement | undefined {
-        const HeadingWrapperComponent = titleIcon ? HeadingWrapper : Fragment;
+        const HeadingWrapperComponent = hasTitleIcon ? HeadingWrapper : Fragment;
 
         if (title || subtitle) {
             return (
@@ -172,7 +174,7 @@ export function ModalDialog({
             ariaLabelledBy={title ? titleId : undefined}
             className={className}
             modalHeader={getHeader()}
-            hasCloseButton
+            hasCloseButton={hasCloseButton}
             modalFooter={footerContent || getFooter()}
             role="dialog"
             onAfterOpen={() => titleRef.current?.focus()}
diff --git a/packages/react/src/icons/alert-filled.svg b/packages/react/src/icons/alert-filled.svg
index 958ef57961..6aa87633ec 100644
--- a/packages/react/src/icons/alert-filled.svg
+++ b/packages/react/src/icons/alert-filled.svg
@@ -10,4 +10,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/packages/react/src/icons/warning-filled.svg b/packages/react/src/icons/warning-filled.svg
index 5aeed1fe2b..28771c64fa 100644
--- a/packages/react/src/icons/warning-filled.svg
+++ b/packages/react/src/icons/warning-filled.svg
@@ -10,4 +10,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/packages/storybook/stories/modal-dialog.stories.mdx b/packages/storybook/stories/modal-dialog.stories.mdx
index cda06737d2..8f7df75c10 100644
--- a/packages/storybook/stories/modal-dialog.stories.mdx
+++ b/packages/storybook/stories/modal-dialog.stories.mdx
@@ -134,9 +134,34 @@ It is important for users of screenreaders that other page content be hidden (vi
                         ariaDescribedby="story-description"
                         isOpen={isModalOpen}
                         onRequestClose={closeModal}
-                        title="Heading 5"
+                        title="With title icon"
                         titleIcon="warningFilled"
-                        subtitle="Subtitle 1"
+                    >
+                        <p id="story-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
+                            fringilla tellus nec auctor gravida.</p>
+                    </ModalDialog>
+                </Fragment>
+            );
+        }}
+    </Story>
+</Preview>
+
+### Without close button
+
+<Preview>
+    <Story name="Without close button">
+        {() => {
+            const {isModalOpen, closeModal, openModal} = useModal();
+            return (
+                <Fragment>
+                    <Button label="Open Modal" buttonType="primary" onClick={openModal} />
+                    <ModalDialog
+                        appElement="#root"
+                        ariaDescribedby="story-description"
+                        hasCloseButton={false}
+                        isOpen={isModalOpen}
+                        onRequestClose={closeModal}
+                        title="Without close button"
                     >
                         <p id="story-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                             fringilla tellus nec auctor gravida.</p>