From bdd3578b4b0601f77874bfbae2fde57f1d422f81 Mon Sep 17 00:00:00 2001
From: Dave Rose <dave.rose@shopify.com>
Date: Tue, 18 Dec 2018 16:20:33 -0500
Subject: [PATCH 1/2] Update Card.Section to accept ReactNode as title

---
 UNRELEASED.md                                 |  1 +
 .../Card/components/Section/Section.tsx       | 17 +++++-----
 .../components/Section/tests/Section.test.tsx | 33 +++++++++++++++++++
 3 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Card/components/Section/tests/Section.test.tsx

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 58f4e71b54d..d643d10db32 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -22,6 +22,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Changed `Tabs` example to contain children so the `Panel` renders for accessibility ([#893](https://github.com/Shopify/polaris-react/pull/893))
 - Fixed timezone not being accounted for in `ResourceList` date filter control ([#710](https://github.com/Shopify/polaris-react/pull/710))
 - Removed unnecessary tooltip text in the `TopBar` component ([#859](https://github.com/Shopify/polaris-react/pull/859))
+- Update `Card.Section` to accept `React.ReactNode` as `title` ([#781](https://github.com/Shopify/polaris-react/pull/781))
 
 ### Documentation
 
diff --git a/src/components/Card/components/Section/Section.tsx b/src/components/Card/components/Section/Section.tsx
index ad0f5d6f9b1..e8ce4016764 100644
--- a/src/components/Card/components/Section/Section.tsx
+++ b/src/components/Card/components/Section/Section.tsx
@@ -6,28 +6,29 @@ import Subheading from '../../../Subheading';
 import * as styles from '../../Card.scss';
 
 export interface Props {
-  title?: string;
+  title?: React.ReactNode;
   children?: React.ReactNode;
   subdued?: boolean;
   fullWidth?: boolean;
 }
 
 export default function Section({children, title, subdued, fullWidth}: Props) {
-  const headerContent = title ? (
-    <div className={styles.SectionHeader}>
-      <Subheading>{title}</Subheading>
-    </div>
-  ) : null;
-
   const className = classNames(
     styles.Section,
     subdued && styles['Section-subdued'],
     fullWidth && styles['Section-fullWidth'],
   );
 
+  let headerMarkup = null;
+  if (title) {
+    const headerContent =
+      typeof title === 'string' ? <Subheading>{title}</Subheading> : title;
+    headerMarkup = <div className={styles.SectionHeader}>{headerContent}</div>;
+  }
+
   return (
     <div className={className}>
-      {headerContent}
+      {headerMarkup}
       {children}
     </div>
   );
diff --git a/src/components/Card/components/Section/tests/Section.test.tsx b/src/components/Card/components/Section/tests/Section.test.tsx
new file mode 100644
index 00000000000..a487ff591db
--- /dev/null
+++ b/src/components/Card/components/Section/tests/Section.test.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {mountWithAppProvider} from 'test-utilities';
+import {Badge, Subheading} from 'components';
+import Section from '../Section';
+
+describe('<Card.Section />', () => {
+  it('can have any valid react element as the card section title', () => {
+    const titleString = 'Online store';
+    const badgeString = 'I am a badge';
+    const titleMarkup = (
+      <h2>
+        {titleString}
+        <Badge>{badgeString}</Badge>
+      </h2>
+    );
+
+    const card = mountWithAppProvider(<Section title={titleMarkup} />);
+    const headerMarkup = card.find('h2');
+
+    expect(headerMarkup.text().includes(titleString)).toBe(true);
+    expect(headerMarkup.find('Badge').text()).toBe(badgeString);
+  });
+
+  it('wraps plain string titles in a <Subheading />', () => {
+    const titleString = 'Online store';
+
+    const card = mountWithAppProvider(<Section title={titleString} />);
+    const headerMarkup = card.find(Subheading);
+
+    expect(headerMarkup.exists()).toBeTruthy();
+    expect(headerMarkup.text()).toEqual(titleString);
+  });
+});

From 8d05fbbb6a3c96171ac521b985e8db1bf528d6bb Mon Sep 17 00:00:00 2001
From: Dave Rose <dave.rose@shopify.com>
Date: Mon, 28 Jan 2019 11:39:54 -0500
Subject: [PATCH 2/2] Add example to illustract custom react node in
 card.section title

---
 src/components/Card/README.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/Card/README.md b/src/components/Card/README.md
index 27d98eaefcf..a792c0420ce 100644
--- a/src/components/Card/README.md
+++ b/src/components/Card/README.md
@@ -436,6 +436,30 @@ Use to be able to use custom React elements as header content.
 </Card>
 ```
 
+### Card section with custom React Node title
+
+<!-- example-for: web -->
+
+Use to render custom content such as icons, links, or buttons in a card section's header.
+
+```jsx
+<Card title="Products">
+  <Card.Section
+    title={
+      <Stack>
+        <Icon source="products" />
+        <Subheading>New Products</Subheading>
+      </Stack>
+    }
+  >
+    <List>
+      <List.Item>Socks</List.Item>
+      <List.Item>Super Shoes</List.Item>
+    </List>
+  </Card.Section>
+</Card>
+```
+
 ---
 
 ## Related components