From 6a17a22f5b6cbe8c7e2fe85c3160b16d6ea03585 Mon Sep 17 00:00:00 2001
From: Ananya Neogi <ananya.neogi@shopify.com>
Date: Wed, 9 Nov 2022 12:51:38 -0500
Subject: [PATCH 1/2] Update CalloutCard title prop type

---
 .changeset/funny-moose-hug.md                 |  5 ++++
 .../CalloutCard/CalloutCard.stories.tsx       | 21 ++++++++++++-
 .../components/CalloutCard/CalloutCard.tsx    |  2 +-
 .../CalloutCard/tests/CalloutCard.test.tsx    | 30 ++++++++++++++++++-
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/funny-moose-hug.md

diff --git a/.changeset/funny-moose-hug.md b/.changeset/funny-moose-hug.md
new file mode 100644
index 00000000000..8871519f907
--- /dev/null
+++ b/.changeset/funny-moose-hug.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Modify CalloutCard title prop to accept ReactNode type
diff --git a/polaris-react/src/components/CalloutCard/CalloutCard.stories.tsx b/polaris-react/src/components/CalloutCard/CalloutCard.stories.tsx
index e22325806e9..8d3aaa82db5 100644
--- a/polaris-react/src/components/CalloutCard/CalloutCard.stories.tsx
+++ b/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>
+  );
+}
diff --git a/polaris-react/src/components/CalloutCard/CalloutCard.tsx b/polaris-react/src/components/CalloutCard/CalloutCard.tsx
index 743fc4207dd..c5aeff560cd 100644
--- a/polaris-react/src/components/CalloutCard/CalloutCard.tsx
+++ b/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 */
diff --git a/polaris-react/src/components/CalloutCard/tests/CalloutCard.test.tsx b/polaris-react/src/components/CalloutCard/tests/CalloutCard.test.tsx
index cbb0f5cf395..8875fae19a8 100644
--- a/polaris-react/src/components/CalloutCard/tests/CalloutCard.test.tsx
+++ b/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', {

From a6ffef20fd6ffb90600344ac35a8ab846987317e Mon Sep 17 00:00:00 2001
From: Ananya Neogi <ananya.neogi@shopify.com>
Date: Wed, 9 Nov 2022 14:56:38 -0500
Subject: [PATCH 2/2] Update changeset

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .changeset/funny-moose-hug.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/funny-moose-hug.md b/.changeset/funny-moose-hug.md
index 8871519f907..d3462cdf776 100644
--- a/.changeset/funny-moose-hug.md
+++ b/.changeset/funny-moose-hug.md
@@ -2,4 +2,4 @@
 '@shopify/polaris': minor
 ---
 
-Modify CalloutCard title prop to accept ReactNode type
+Update the `CalloutCard` `title` prop to accept a ReactNode type