From 8cde1f1ba854f87c769ae733ff3fe118b3b93ce4 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 5 May 2022 14:19:10 -0400
Subject: [PATCH] Update default prop logic for `heading`

---
 src-docs/src/views/call_out/call_out_example.js | 8 ++++----
 src/components/call_out/call_out.tsx            | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/views/call_out/call_out_example.js b/src-docs/src/views/call_out/call_out_example.js
index 40be95f601c..e21f44563c2 100644
--- a/src-docs/src/views/call_out/call_out_example.js
+++ b/src-docs/src/views/call_out/call_out_example.js
@@ -86,7 +86,7 @@ export const CallOutExample = {
       title: 'Info',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: infoSource,
         },
       ],
@@ -107,7 +107,7 @@ export const CallOutExample = {
       title: 'Success',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: successSource,
         },
       ],
@@ -125,7 +125,7 @@ export const CallOutExample = {
       title: 'Warning',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: warningSource,
         },
       ],
@@ -141,7 +141,7 @@ export const CallOutExample = {
       title: 'Danger',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: dangerSource,
         },
       ],
diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx
index c395d73d547..5b90f3b65a4 100644
--- a/src/components/call_out/call_out.tsx
+++ b/src/components/call_out/call_out.tsx
@@ -52,7 +52,7 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
       iconType,
       children,
       className,
-      heading,
+      heading = 'p',
       ...rest
     },
     ref: Ref<HTMLDivElement>
@@ -102,10 +102,9 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
       );
     }
 
-    const H: any = heading ? `${heading}` : 'p';
     let header;
-
     if (title) {
+      const H: Heading = heading;
       header = (
         <EuiTitle size={size === 's' ? 'xxs' : 'xs'} css={cssHeaderStyles}>
           <H className="euiCallOutHeader__title">
@@ -115,6 +114,7 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
         </EuiTitle>
       );
     }
+
     return (
       <EuiPanel
         borderRadius="none"