feat: add onClose feature to CommonMessage (#81)

bloom-housing · Apr 23, 2024 · 6c4b9d9 · 6c4b9d9
1 parent 36b3091
commit 6c4b9d9
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 33 deletions.
diff --git a/src/blocks/__stories__/Alert.stories.tsx b/src/blocks/__stories__/Alert.stories.tsx
@@ -53,7 +53,7 @@ export const withLink = () => (
 
 export const wideContainerLayout = () => (
   <>
-    <Alert id="in-container" variant="alert" fullwidth>
+    <Alert id="in-container" variant="alert" fullwidth onClose={() => alert("Closing!")}>
       An alert that scales to full container width
     </Alert>
 

diff --git a/src/blocks/__tests__/CommonMessage.test.tsx b/src/blocks/__tests__/CommonMessage.test.tsx
@@ -1,12 +1,16 @@
-import { render, cleanup } from "@testing-library/react"
+import { render, cleanup, fireEvent } from "@testing-library/react"
 import CommonMessage from "../shared/CommonMessage"
 
 afterEach(cleanup)
 
 describe("<CommonMessage>", () => {
   it("displays the message", () => {
     const content = "Common message here"
-    const { getByText, container } = render(<CommonMessage role="alert"  id="test-id" className="test-class">{content}</CommonMessage>)
+    const { getByText, container } = render(
+      <CommonMessage role="alert" id="test-id" className="test-class">
+        {content}
+      </CommonMessage>
+    )
     expect(getByText(content)).toBeInTheDocument()
     expect(container.querySelector("#test-id")).not.toBeNull()
     expect(container.querySelector("#test-id.test-class")).not.toBeNull()
@@ -15,11 +19,36 @@ describe("<CommonMessage>", () => {
 
   it("supports variants", () => {
     const content = "Common message here"
-    const { getByText, container } = render(<CommonMessage variant="warn"  id="test-id" className="test-class" closeable>{content}</CommonMessage>)
+    const { getByText, container } = render(
+      <CommonMessage variant="warn" id="test-id" className="test-class" closeable>
+        {content}
+      </CommonMessage>
+    )
     expect(getByText(content)).toBeInTheDocument()
     expect(container.querySelector("#test-id.test-class")).not.toBeNull()
     expect(container.querySelector("#test-id[data-variant=warn]")).not.toBeNull()
     expect(container.querySelector("button[aria-label=Close]")).not.toBeNull()
     expect(container.querySelector("svg.fa-clock")).not.toBeNull()
   })
+
+  it("supports a custom onClose callback", () => {
+    let wasClosed = false
+    const content = "Click me"
+    const { getByLabelText } = render(
+      <CommonMessage
+        variant="warn"
+        id="test-id"
+        className="test-class"
+        closeable
+        onClose={() => {
+          wasClosed = true
+        }}
+      >
+        {content}
+      </CommonMessage>
+    )
+
+    fireEvent.click(getByLabelText("Close"))
+    expect(wasClosed).toBeTruthy()
+  })
 })
diff --git a/src/blocks/shared/CommonMessage.tsx b/src/blocks/shared/CommonMessage.tsx
@@ -45,6 +45,8 @@ export interface CommonMessageProps {
   customIcon?: React.ReactNode
   /** If the component can hide via a close icon */
   closeable?: boolean
+  /** A callback function when the component has closed */
+  onClose?: () => void
   /** Scale to fit component to its container */
   fullwidth?: boolean
   /** Element ID */
@@ -59,36 +61,48 @@ export interface CommonMessageProps {
   tabIndex?: number
 }
 
-const CommonMessage = forwardRef((props: CommonMessageProps, ref: React.ForwardedRef<HTMLDivElement>) => {
-  const [visible, toggler] = useToggle(true)
-  const classNames = ["seeds-common-message"]
-  if (props.fullwidth) classNames.push("is-fullwidth")
-  if (props.className) classNames.push(props.className)
+const CommonMessage = forwardRef(
+  (props: CommonMessageProps, ref: React.ForwardedRef<HTMLDivElement>) => {
+    const [visible, toggler] = useToggle(true)
+    const classNames = ["seeds-common-message"]
+    if (props.fullwidth) classNames.push("is-fullwidth")
+    if (props.className) classNames.push(props.className)
 
-  const variant = props.variant || "primary"
+    const variant = props.variant || "primary"
 
-  return props.children ? (
-    <div
-      ref={ref}
-      id={props.id}
-      className={classNames.join(" ")}
-      data-variant={variant}
-      hidden={visible === false}
-      role={props.role}
-      tabIndex={props.tabIndex}
-      data-testid={props.testId}
-    >
-      {props.customIcon
-        ? props.customIcon
-        : CommonMessageIconMap[variant] && <Icon icon={CommonMessageIconMap[variant]} size="md" />}
-      <span data-part="content">{props.children}</span>
-      {props.closeable && (
-        <button aria-label="Close" onClick={toggler}>
-          <Icon icon={faClose} size="md" />
-        </button>
-      )}
-    </div>
-  ) : null
-})
+    return props.children ? (
+      <div
+        ref={ref}
+        id={props.id}
+        className={classNames.join(" ")}
+        data-variant={variant}
+        hidden={visible === false}
+        role={props.role}
+        tabIndex={props.tabIndex}
+        data-testid={props.testId}
+      >
+        {props.customIcon
+          ? props.customIcon
+          : CommonMessageIconMap[variant] && (
+              <Icon icon={CommonMessageIconMap[variant]} size="md" />
+            )}
+        <span data-part="content">{props.children}</span>
+        {props.closeable && (
+          <button
+            aria-label="Close"
+            onClick={() => {
+              toggler()
+              if (props.onClose) {
+                props.onClose()
+              }
+            }}
+          >
+            <Icon icon={faClose} size="md" />
+          </button>
+        )}
+      </div>
+    ) : null
+  }
+)
 
 export default CommonMessage