Make actions an optional prop and hide the footer when not present. (#…

…1690)

ui-components/__tests__/overlays/Modal.test.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, cleanup } from "@testing-library/react"
+import { render, cleanup, getByTestId } from "@testing-library/react"
 import { Modal } from "../../src/overlays/Modal"
 
 afterEach(cleanup)
@@ -47,4 +47,15 @@ describe("<Modal>", () => {
     expect(getByText("Action 1")).toBeTruthy()
     expect(getByText("Action 2")).toBeTruthy()
   })
+  it("does not render footer with no actions", () => {
+    const portalRoot = document.createElement("div")
+    portalRoot.setAttribute("id", "__next")
+    document.body.appendChild(portalRoot)
+    const { queryByTestId } = render(
+      <Modal open={true} title={"Modal Title"} onClose={() => {}} ariaDescription={"My Modal"}>
+        <strong>Modal Children</strong>
+      </Modal>
+    )
+    expect(queryByTestId("footer")).toBeFalsy()
+  })
 })

ui-components/src/overlays/Modal.tsx

@@ -6,7 +6,7 @@ import { Overlay, OverlayProps } from "./Overlay"
 
 export interface ModalProps extends Omit<OverlayProps, "children"> {
   title: string
-  actions: React.ReactNode[]
+  actions?: React.ReactNode[]
   hideCloseIcon?: boolean
   children?: React.ReactNode
 }
@@ -18,7 +18,7 @@ const ModalHeader = (props: { title: string }) => (
 )
 
 const ModalFooter = (props: { actions: React.ReactNode[] }) => (
-  <footer className="modal__footer bg-primary-lighter">
+  <footer className="modal__footer bg-primary-lighter" data-testid="footer">
     <GridSection columns={4} reverse={true} tightSpacing={true}>
       {props.actions &&
         props.actions.map((action: React.ReactNode, index: number) => (
@@ -48,7 +48,7 @@ export const Modal = (props: ModalProps) => {
           )}
         </section>
 
-        <ModalFooter actions={props.actions} />
+        {props.actions && <ModalFooter actions={props.actions} />}
 
         {!props.hideCloseIcon && (
           <button className="modal__close" aria-label="Close" onClick={props.onClose} tabIndex={0}>