[ResourceList] Add headerContent prop for customizing header on Resou…

…rceList (#8083)

### WHY are these changes introduced?
Related issue
https://github.com/Shopify/ecosystem-merchant-engagement/issues/1106
Currently there is no way to show a customized header on the resource
list and the only options available are 'Showing x items' or 'Showing x
of y items'.

As part of the updated app settings project on admin, we wanted to show
some other content and got in touch with the polaris team and learnt we
could contribute since this doesn't exist at the moment.


### WHAT is this pull request doing?

This PR adds an optional headerContent prop of type string which lets
the user pass in any heading they want to display on the resource list
header.

<img width="750" alt="Screenshot 2023-01-18 at 2 23 19 PM"
src="https://user-images.githubusercontent.com/59700774/213275258-eb1d8fac-742a-4835-9d45-6ff38701839c.png">


### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Co-authored-by: Krithika Janakiraman <krithikajanakiraman@Krithikas-MacBook-Pro-2.local>

.changeset/great-eyes-cheer.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Adding an oprtional headerContent prop to ResourceList

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

@@ -453,6 +453,51 @@ export function WithTotalCount() {
   );
 }
 
+export function WithHeaderContent() {
+  return (
+    <Card>
+      <ResourceList
+        headerContent="Customer details shown below"
+        items={[
+          {
+            id: 105,
+            url: 'customers/341',
+            name: 'Mae Jemison',
+            location: 'Decatur, USA',
+          },
+          {
+            id: 205,
+            url: 'customers/256',
+            name: 'Ellen Ochoa',
+            location: 'Los Angeles, USA',
+          },
+        ]}
+        renderItem={(item) => {
+          const {id, url, name, location} = item;
+          const media = <Avatar customer size="medium" name={name} />;
+
+          return (
+            <ResourceItem
+              id={id}
+              url={url}
+              media={media}
+              accessibilityLabel={`View details for ${name}`}
+            >
+              <h3>
+                <Text variant="bodyMd" fontWeight="bold" as="span">
+                  {name}
+                </Text>
+              </h3>
+              <div>{location}</div>
+            </ResourceItem>
+          );
+        }}
+        showHeader
+      />
+    </Card>
+  );
+}
+
 export function WithSorting() {
   const [sortValue, setSortValue] = useState('DATE_MODIFIED_DESC');
 

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

@@ -105,6 +105,8 @@ export interface ResourceListProps<TItemType = any> {
   sortOptions?: SelectOption[];
   /** ReactNode to display instead of the sort control */
   alternateTool?: React.ReactNode;
+  /** Custom header text displayed above the list instead of the resource count. */
+  headerContent?: string;
   /** Callback when sort option is changed */
   onSortChange?(selected: string, id: string): void;
   /** Callback when selection is changed */
@@ -136,6 +138,7 @@ export const ResourceList: ResourceListType = function ResourceList<TItemType>({
   selectable,
   hasMoreItems,
   loading,
+  headerContent,
   showHeader,
   totalItemsCount,
   sortValue,
@@ -250,6 +253,8 @@ export const ResourceList: ResourceListType = function ResourceList<TItemType>({
         totalItemsCount,
         resource,
       });
+    } else if (headerContent) {
+      return headerContent;
     } else {
       return i18n.translate('Polaris.ResourceList.showing', {
         itemsCount,

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

@@ -260,6 +260,22 @@ describe('<ResourceList />', () => {
       expect(headerTitleWrapper).toContainReactText('Loading items');
     });
 
+    it('prints the headerContent when provided', () => {
+      const resourceList = mountWithApp(
+        <ResourceList
+          items={itemsNoID}
+          renderItem={renderItem}
+          headerContent="Customer data shown"
+          showHeader
+        />,
+      );
+
+      const headerTitleWrapper = resourceList.find('div', {
+        className: styles.HeaderTitleWrapper,
+      });
+      expect(headerTitleWrapper).toContainReactText('Customer data shown');
+    });
+
     it('prints number of items shown when totalItemsCount is not provided', () => {
       const resourceList = mountWithApp(
         <ResourceList