[AlphaCard] Add subdued section storybook example (#7788)

### WHY are these changes introduced?

Resolves #7743.
Adds storybook example for an `AlphaCard` with subdued section.

### WHAT is this pull request doing?
Creates a subdued section for `AlphaCard.stories.tsx`.
    <details>
      <summary>AlphaCard with subdued section</summary>
<img
src="https://user-images.githubusercontent.com/26749317/203336031-f6a609c5-048c-466d-bea5-04ff5ac1aabc.png"
alt="AlphaCard with subdued section">
    </details>

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩


[Storybook](https://5d559397bae39100201eedc1-emxlehaerg.chromatic.com/?path=/story/all-components-alphacard--with-subdued-section).

🖥 [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.
-->

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] 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

Author: laurkim

.changeset/lazy-jokes-invent.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added storybook example for `AlphaCard` with subdued section

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {AlphaCard, AlphaStack, Text} from '@shopify/polaris';
+import {AlphaCard, AlphaStack, Bleed, Box, List, Text} from '@shopify/polaris';
 
 export default {
   component: AlphaCard,
@@ -13,7 +13,9 @@ export function Default() {
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
-        <p>View a summary of your online store’s performance.</p>
+        <Text variant="bodyMd" as="p">
+          View a summary of your online store’s performance.
+        </Text>
       </AlphaStack>
     </AlphaCard>
   );
@@ -26,7 +28,9 @@ export function WithBackgroundSubdued() {
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
-        <p>View a summary of your online store’s performance.</p>
+        <Text variant="bodyMd" as="p">
+          View a summary of your online store’s performance.
+        </Text>
       </AlphaStack>
     </AlphaCard>
   );
@@ -39,8 +43,47 @@ export function WithBorderRadiusRoundedAbove() {
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
-        <p>View a summary of your online store’s performance.</p>
+        <Text variant="bodyMd" as="p">
+          View a summary of your online store’s performance.
+        </Text>
+      </AlphaStack>
+    </AlphaCard>
+  );
+}
+
+export function WithSubduedSection() {
+  return (
+    <AlphaCard roundedAbove="sm">
+      <AlphaStack gap="5">
+        <Text as="h3" variant="headingMd">
+          Staff accounts
+        </Text>
+        <Box paddingBlockEnd="5">
+          <List>
+            <List.Item>Felix Crafford</List.Item>
+            <List.Item>Ezequiel Manno</List.Item>
+          </List>
+        </Box>
       </AlphaStack>
+      <Bleed marginBlockEnd="5">
+        <Box
+          background="surface-subdued"
+          borderBlockStart="divider"
+          borderRadiusEndStart="2"
+          borderRadiusEndEnd="2"
+          padding="5"
+        >
+          <AlphaStack gap="2">
+            <Text variant="headingSm" as="h3">
+              Deactivated staff accounts
+            </Text>
+            <List>
+              <List.Item>Felix Crafford</List.Item>
+              <List.Item>Ezequiel Manno</List.Item>
+            </List>
+          </AlphaStack>
+        </Box>
+      </Bleed>
     </AlphaCard>
   );
 }