[CalloutCard] Update title prop to accept ReactNode type

.changeset/funny-moose-hug.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Update the `CalloutCard` `title` prop to accept a ReactNode type

polaris-react/src/components/CalloutCard/CalloutCard.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {CalloutCard} from '@shopify/polaris';
+import {Badge, CalloutCard} from '@shopify/polaris';
 
 export default {
   component: CalloutCard,
@@ -46,3 +46,22 @@ export function Dismissable() {
     </CalloutCard>
   );
 }
+
+export function WithCustomTitle() {
+  const customTitle = (
+    <>
+      <span>Customize the style of your checkout </span>
+      <Badge status="info">New</Badge>
+    </>
+  );
+
+  return (
+    <CalloutCard
+      title={customTitle}
+      illustration="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
+      primaryAction={{content: 'Customize checkout'}}
+    >
+      <p>Upload your store’s logo, change colors and fonts, and more.</p>
+    </CalloutCard>
+  );
+}

polaris-react/src/components/CalloutCard/CalloutCard.tsx

@@ -16,7 +16,7 @@ export interface CalloutCardProps {
   /** The content to display inside the callout card. */
   children?: React.ReactNode;
   /** The title of the card */
-  title: string;
+  title: React.ReactNode;
   /** URL to the card illustration */
   illustration: string;
   /** Primary action for the card */

polaris-react/src/components/CalloutCard/tests/CalloutCard.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
+import {Badge} from '../../Badge';
 import {Button} from '../../Button';
 import {ButtonGroup} from '../../ButtonGroup';
 import {CalloutCard} from '../CalloutCard';
@@ -32,11 +33,38 @@ describe('<CalloutCard />', () => {
     expect(calloutCard.find('p')).toContainReactText('Content');
   });
 
-  it('renders the title as an h2 element', () => {
+  it('renders plain string title as an h2 element', () => {
     const calloutCard = calloutCardMock();
     expect(calloutCard.find('h2')).toContainReactText('Title');
   });
 
+  it('renders any valid react element as title', () => {
+    const titleContent = 'Checkout Settings';
+    const badgeContent = 'Badge';
+    const titleMarkup = (
+      <>
+        {titleContent}
+        <Badge>{badgeContent}</Badge>
+      </>
+    );
+
+    const calloutCard = mountWithApp(
+      <CalloutCard
+        title={titleMarkup}
+        illustration={illustration}
+        primaryAction={{
+          content: 'Customize checkout',
+          url: 'https://www.shopify.com',
+        }}
+      />,
+    );
+
+    expect(calloutCard).toContainReactText(titleContent);
+    expect(calloutCard).toContainReactComponent(Badge, {
+      children: badgeContent,
+    });
+  });
+
   it('renders the illustration', () => {
     const calloutCard = calloutCardMock();
     expect(calloutCard).toContainReactComponent('img', {