fix disabled cancel button and add story

Author: guoda-puidokaite

packages/ui-components/src/components/Modal/Modal.component.tsx

@@ -201,7 +201,15 @@ export const Modal: React.FC<ModalProps> = ({
                   ) : (
                     ""
                   )}
-                  {isCloseable && !disableCloseButton ? <Icon icon="close" onClick={handleCancelClick} /> : ""}
+                  {isCloseable ? (
+                    <Icon
+                      icon="close"
+                      onClick={handleCancelClick}
+                      disabled={disableCancelButton || disableCloseButton}
+                    />
+                  ) : (
+                    ""
+                  )}
                 </div>
                 <div className={`juno-modal-content ${contentstyles} ${unpad ? "" : contentpaddingstyles}`}>
                   {children}

packages/ui-components/src/components/Modal/Modal.stories.tsx

@@ -223,6 +223,15 @@ export const CloseOnBackdropClick: Story = {
   },
 }
 
+export const DisabledCloseButton: Story = {
+  render: Template,
+  args: {
+    title: "Disabled Close Button Modal",
+    children: <p>This Modal has a disabled close button.</p>,
+    disableCloseButton: true,
+  },
+}
+
 export const Login: Story = {
   render: Template,
   args: {

packages/ui-components/src/components/Modal/Modal.test.tsx

@@ -382,28 +382,21 @@ describe("Modal", () => {
     expect(cancelButton).toBeInTheDocument()
     expect(cancelButton).toHaveAttribute("disabled")
 
+    expect(screen.getByRole("button", { name: "close" })).toBeDisabled()
+
     await waitFor(() => userEvent.click(cancelButton))
     expect(mockOnCancel).not.toHaveBeenCalled()
   })
 
-  test("renders a modal without a close button in the header when disableCloseButton is true", async () => {
+  test("renders a modal with no disabled close button if disableCloseButton is true", async () => {
     await waitFor(() =>
       render(
         <PortalProvider>
           <Modal open onCancel={mockOnCancel} disableCloseButton />
         </PortalProvider>
       )
     )
-
-    expect(screen.getByRole("dialog")).toBeInTheDocument()
-
-    // Ensure header close button doesn't exist
-    const closeButton = screen.queryByRole("button", { name: "close" })
-    expect(closeButton).not.toBeInTheDocument()
-
-    // Confirm that the modal remains open and the cancel handler was not called
     expect(screen.getByRole("dialog")).toBeInTheDocument()
-    await userEvent.click(closeButton!)
-    expect(mockOnCancel).not.toHaveBeenCalled()
+    expect(screen.getByRole("button", { name: "close" })).toBeDisabled()
   })
 })