refactor(callouttitle): replaces string literal for callout with a co…

…nstant

packages/components/src/core/Callout/components/CalloutTitle/index.tsx

@@ -1,11 +1,12 @@
 import { AlertTitleProps } from "@mui/material/AlertTitle";
+import { CALLOUT_TITLE_DISPLAY_NAME } from "../../constants";
 import { StyledCalloutTitle } from "./style";
 
 const CalloutTitle = ({ children }: AlertTitleProps): JSX.Element => {
   return <StyledCalloutTitle>{children}</StyledCalloutTitle>;
 };
 
 // Display name required to ensure Callout expand works correctly.
-CalloutTitle.displayName = "CalloutTitle";
+CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
 
 export default CalloutTitle;

packages/components/src/core/Callout/constants.ts

@@ -0,0 +1 @@
+export const CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";

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;