[ResourceItem] Fix type errors and add example (#7731)

Quick PR to add a story for chromatic while I rebuild `ResourceItem`.
Also fixes some annoying type errors

Author: kyledurand

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

@@ -1,21 +1,30 @@
 import React, {useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Avatar, Card, ResourceItem, ResourceList, Text} from '@shopify/polaris';
+import {
+  Avatar,
+  Card,
+  ResourceItem,
+  ResourceList,
+  ResourceListProps,
+  Text,
+} from '@shopify/polaris';
 
 export default {
   component: ResourceItem,
 } as ComponentMeta<typeof ResourceItem>;
 
 export function Default() {
-  const [selectedItems, setSelectedItems] = useState([]);
+  const [selectedItems, setSelectedItems] = useState<
+    ResourceListProps['selectedItems']
+  >([]);
 
   return (
     <Card>
       <ResourceList
         resourceName={{singular: 'blog post', plural: 'blog posts'}}
         items={[
           {
-            id: 6,
+            id: '6',
             url: 'posts/6',
             title: 'How To Get Value From Wireframes',
             author: 'Jonathan Mangrove',
@@ -55,7 +64,7 @@ export function WithMedia() {
         resourceName={{singular: 'customer', plural: 'customers'}}
         items={[
           {
-            id: 145,
+            id: '145',
             url: 'customers/145',
             avatarSource:
               'https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746',
@@ -102,7 +111,58 @@ export function WithShortcutActions() {
         resourceName={{singular: 'customer', plural: 'customers'}}
         items={[
           {
-            id: 145,
+            id: '145',
+            url: 'customers/145',
+            avatarSource:
+              'https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746',
+            name: 'Yi So-Yeon',
+            location: 'Gwangju, South Korea',
+            latestOrderUrl: 'orders/1456',
+          },
+        ]}
+        renderItem={(item) => {
+          const {id, url, avatarSource, name, location, latestOrderUrl} = item;
+
+          return (
+            <ResourceItem
+              id={id}
+              url={url}
+              media={
+                <Avatar
+                  customer
+                  size="medium"
+                  name={name}
+                  source={avatarSource}
+                />
+              }
+              shortcutActions={[
+                {content: 'View latest order', url: latestOrderUrl},
+              ]}
+              accessibilityLabel={`View details for ${name}`}
+              name={name}
+            >
+              <h3>
+                <Text variant="bodyMd" fontWeight="bold" as="span">
+                  {name}
+                </Text>
+              </h3>
+              <div>{location}</div>
+            </ResourceItem>
+          );
+        }}
+      />
+    </Card>
+  );
+}
+
+export function WithPersistedShortcutActions() {
+  return (
+    <Card>
+      <ResourceList
+        resourceName={{singular: 'customer', plural: 'customers'}}
+        items={[
+          {
+            id: '145',
             url: 'customers/145',
             avatarSource:
               'https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746',
@@ -115,7 +175,7 @@ export function WithShortcutActions() {
           const {id, url, avatarSource, name, location, latestOrderUrl} = item;
           const shortcutActions = latestOrderUrl
             ? [{content: 'View latest order', url: latestOrderUrl}]
-            : null;
+            : undefined;
 
           return (
             <ResourceItem
@@ -129,6 +189,7 @@ export function WithShortcutActions() {
                   source={avatarSource}
                 />
               }
+              persistActions
               shortcutActions={shortcutActions}
               accessibilityLabel={`View details for ${name}`}
               name={name}
@@ -154,7 +215,7 @@ export function WithVerticalAlignment() {
         resourceName={{singular: 'customer', plural: 'customers'}}
         items={[
           {
-            id: 145,
+            id: '145',
             url: 'customers/145',
             avatarSource:
               'https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746',