From 8b1fd00eec232036649c31a5ea465e1a1b6792f8 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 22 Nov 2022 09:11:59 -0500
Subject: [PATCH 1/2] [AlphaCard] Add subdued section storybook example

---
 .../AlphaCard/AlphaCard.stories.tsx           | 51 +++++++++++++++++--
 1 file changed, 47 insertions(+), 4 deletions(-)

diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx
index b9e53ecb12c..7159941a1e0 100644
--- a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx
+++ b/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>
   );
 }

From c25e6d6e3dd382c52a0d18961065198782ca8583 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 22 Nov 2022 09:12:22 -0500
Subject: [PATCH 2/2] Add changeset

---
 .changeset/lazy-jokes-invent.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/lazy-jokes-invent.md

diff --git a/.changeset/lazy-jokes-invent.md b/.changeset/lazy-jokes-invent.md
new file mode 100644
index 00000000000..820797bd9c6
--- /dev/null
+++ b/.changeset/lazy-jokes-invent.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added storybook example for `AlphaCard` with subdued section