From c18e9c9ae255bcf3443d2cd56050a8fc31c701af Mon Sep 17 00:00:00 2001
From: Jeremy Asuncion <jeremyasuncion808@gmail.com>
Date: Wed, 17 Jan 2024 09:27:06 -0800
Subject: [PATCH] refactor(callouttitle): replaces string literal for callout
 with a constant

---
 .../src/core/Callout/components/CalloutTitle/index.tsx         | 3 ++-
 packages/components/src/core/Callout/constants.ts              | 1 +
 packages/components/src/core/Callout/index.tsx                 | 3 ++-
 3 files changed, 5 insertions(+), 2 deletions(-)
 create mode 100644 packages/components/src/core/Callout/constants.ts

diff --git a/packages/components/src/core/Callout/components/CalloutTitle/index.tsx b/packages/components/src/core/Callout/components/CalloutTitle/index.tsx
index 2acc262a9..6ffd26568 100644
--- a/packages/components/src/core/Callout/components/CalloutTitle/index.tsx
+++ b/packages/components/src/core/Callout/components/CalloutTitle/index.tsx
@@ -1,4 +1,5 @@
 import { AlertTitleProps } from "@mui/material/AlertTitle";
+import { CALLOUT_TITLE_DISPLAY_NAME } from "../../constants";
 import { StyledCalloutTitle } from "./style";
 
 const CalloutTitle = ({ children }: AlertTitleProps): JSX.Element => {
@@ -6,6 +7,6 @@ const CalloutTitle = ({ children }: AlertTitleProps): JSX.Element => {
 };
 
 // Display name required to ensure Callout expand works correctly.
-CalloutTitle.displayName = "CalloutTitle";
+CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
 
 export default CalloutTitle;
diff --git a/packages/components/src/core/Callout/constants.ts b/packages/components/src/core/Callout/constants.ts
new file mode 100644
index 000000000..828a072af
--- /dev/null
+++ b/packages/components/src/core/Callout/constants.ts
@@ -0,0 +1 @@
+export const CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
diff --git a/packages/components/src/core/Callout/index.tsx b/packages/components/src/core/Callout/index.tsx
index ade5348cf..15a0b79ee 100644
--- a/packages/components/src/core/Callout/index.tsx
+++ b/packages/components/src/core/Callout/index.tsx
@@ -3,6 +3,7 @@ import { Grow } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import ButtonIcon from "../ButtonIcon";
 import Icon from "../Icon";
+import { CALLOUT_TITLE_DISPLAY_NAME } from "./constants";
 import { StyledCallout } from "./style";
 
 const SDS_STAGE_OPEN = "open";
@@ -101,7 +102,7 @@ const Callout = ({
 
   const firstChildIsCalloutTitle =
     Array.isArray(children) &&
-    children[0]?.type?.displayName === "CalloutTitle";
+    children[0]?.type?.displayName === CALLOUT_TITLE_DISPLAY_NAME;
 
   if (firstChildIsCalloutTitle) {
     [calloutTitle, ...calloutContent] = children;