From 3b75fae16e912829cf665ab7851ed0e61d1f3ec0 Mon Sep 17 00:00:00 2001
From: Tim Layton <tmlayton@users.noreply.github.com>
Date: Fri, 8 Feb 2019 14:36:47 -0800
Subject: [PATCH 1/2] Revert "Revert "Update Card.Section to accept ReactNode
 as title""

---
 UNRELEASED.md                                 | 12 +++++++
 src/components/Card/README.md                 | 24 ++++++++++++++
 .../Card/components/Section/Section.tsx       | 17 +++++-----
 .../components/Section/tests/Section.test.tsx | 33 +++++++++++++++++++
 4 files changed, 78 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Card/components/Section/tests/Section.test.tsx

diff --git a/UNRELEASED.md b/UNRELEASED.md
index b1858525ba4..a3808b5b700 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -14,6 +14,18 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Removes `TopBar` logo background ([#957](https://github.com/Shopify/polaris-react/pull/957))
 - Adopt width of `TopBar` search results to search input and add a minimum width ([#969](https://github.com/Shopify/polaris-react/pull/969))
 
+- Fixed vertical misalignment in `Banner.Header`([#870](https://github.com/Shopify/polaris-react/pull/870))
+- Removed a duplicate `activatorWrapper` in `Popover` when destructuring props ([#916](https://github.com/Shopify/polaris-react/pull/916))
+- Fixed `Banner` secondaryAction content wrapping in Firefox ([#719](https://github.com/Shopify/polaris-react/pull/719))
+- Added `onKeyPress`, `onKeyDown`, and `onKeyUp` to `Button` ([#860](https://github.com/Shopify/polaris-react/pull/860))
+- Added `monochrome` prop to `Button` and `Link` component ([#821](https://github.com/Shopify/polaris-react/pull/821))
+- Updated `Frame` layout and made `TopBar.UserMenu` visible on mobile ([#852](https://github.com/Shopify/polaris-react/pull/852))
+- Added a `forceRender` prop to `Page` to not delegate to the app bridge TitleBar action ([#695](https://github.com/Shopify/polaris-react/pull/695))
+- 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))
+
 ### Bug fixes
 
 - Fixed the `DataTable` sort direction not reversing on second sort of the initially sorted column ([#918](https://github.com/Shopify/polaris-react/pull/918)) (thanks [@tabrez96](https://github.com/tabrez96) for the [issue report](https://github.com/Shopify/polaris-react/issues/873))
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
diff --git a/src/components/Card/components/Section/Section.tsx b/src/components/Card/components/Section/Section.tsx
index 8a561cb48db..819999cb506 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 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 cdd8ae9d1cd95bf103f0c706d3402a0a1276a855 Mon Sep 17 00:00:00 2001
From: Tim Layton <tim.layton@shopify.com>
Date: Fri, 8 Feb 2019 14:38:57 -0800
Subject: [PATCH 2/2] fix changelog

---
 UNRELEASED.md | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index a3808b5b700..7e2c82f7513 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -13,17 +13,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Set `Collapsible` to use `overflow: visible;` once fully open ([#951](https://github.com/Shopify/polaris-react/pull/951))
 - Removes `TopBar` logo background ([#957](https://github.com/Shopify/polaris-react/pull/957))
 - Adopt width of `TopBar` search results to search input and add a minimum width ([#969](https://github.com/Shopify/polaris-react/pull/969))
-
-- Fixed vertical misalignment in `Banner.Header`([#870](https://github.com/Shopify/polaris-react/pull/870))
-- Removed a duplicate `activatorWrapper` in `Popover` when destructuring props ([#916](https://github.com/Shopify/polaris-react/pull/916))
-- Fixed `Banner` secondaryAction content wrapping in Firefox ([#719](https://github.com/Shopify/polaris-react/pull/719))
-- Added `onKeyPress`, `onKeyDown`, and `onKeyUp` to `Button` ([#860](https://github.com/Shopify/polaris-react/pull/860))
-- Added `monochrome` prop to `Button` and `Link` component ([#821](https://github.com/Shopify/polaris-react/pull/821))
-- Updated `Frame` layout and made `TopBar.UserMenu` visible on mobile ([#852](https://github.com/Shopify/polaris-react/pull/852))
-- Added a `forceRender` prop to `Page` to not delegate to the app bridge TitleBar action ([#695](https://github.com/Shopify/polaris-react/pull/695))
-- 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))
 
 ### Bug fixes