[CalloutCard] Update title prop to accept ReactNode type

[ananyaneogi]

WHY are these changes introduced?

Fixes #7667

WHAT is this pull request doing?

Update the title prop to accept ReactNode type.

Example: Adds a Badge component in the heading

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {CalloutCard, Page, Badge} from '../src';

export function Playground() {
  const customTitle = (
    <>
      <span>Customize the style of your checkout </span>
      <Badge status="info">New</Badge>
    </>
  );
  return (
    <Page title="Playground">
      <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>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	210.03 KB (0%)
polaris-react-esm	136.15 KB (0%)
polaris-react-esnext	191.35 KB (0%)
polaris-react-css	41.4 KB (0%)