[AlphaCard] Add storybook examples for Card compositions

[laurkim]

WHY are these changes introduced?

Part of #87817.
With AlphaCard replacing Card, we should have storybook examples for the different ways it can be composed with the other layout components to recreate the UI that the deprecated Card component supported via props.

WHAT is this pull request doing?

• Adds Storybook examples for AlphaCard
• Adds same Storybook examples to style guide for AlphaCard
• Updates AlphaCard documentation to show new examples

How to 🎩

I tophatted all the new stories against existing Card stories at all breakpoints.
For easier tophatting, I added the code I used to test below for the Playground, and those can be tested across all breakpoints.

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {
  Page,
  VerticalStack,
  Card,
  AlphaCard,
  Popover,
  Button,
  ActionList,
  TextContainer,
  ResourceList,
  LegacyStack,
  List,
  Text,
  HorizontalGrid,
  ButtonGroup,
  secondaryActionsFrom,
  Bleed,
  Divider,
  Box,
  HorizontalStack,
  Icon,
  Image,
} from '../src';
import {ProductsMajor} from '@shopify/polaris-icons';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
      <VerticalStack gap="5">
        <Text as="h1" variant="headingXl">
          With Header Actions — Card
        </Text>
        <Card sectioned title="Variants" actions={[{content: 'Add variant'}]}>
          <p>
            Add variants if this product comes in multiple versions, like
            different sizes or colors.
          </p>
        </Card>
        <Text as="h1" variant="headingXl">
          With Header Actions — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <HorizontalGrid columns="1fr auto">
              <Text as="h2" variant="headingMd">
                Variants
              </Text>
              <ButtonGroup>
                <Button plain>Add variant</Button>
              </ButtonGroup>
            </HorizontalGrid>
            <Text as="p" variant="bodyMd">
              Add variants if this product comes in multiple versions, like
              different sizes or colors.
            </Text>
          </VerticalStack>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Footer Actions — Card
        </Text>
        <Card
          title="Shipment 1234"
          secondaryFooterActions={[{content: 'Edit shipment'}]}
          primaryFooterAction={{content: 'Add tracking number'}}
        >
          <Card.Section title="Items">
            <List>
              <List.Item>1 × Oasis Glass, 4-Pack</List.Item>
              <List.Item>1 × Anubis Cup, 2-Pack</List.Item>
            </List>
          </Card.Section>
        </Card>
        <Text as="h1" variant="headingXl">
          With Footer Actions — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <Text as="h2" variant="headingMd">
              Shipment 1234
            </Text>
            <Box>
              <Box paddingBlockEnd="2">
                <Text as="h2" variant="bodyMd" fontWeight="bold">
                  Items
                </Text>
              </Box>
              <List>
                <List.Item>1 × Oasis Glass, 4-Pack</List.Item>
                <List.Item>1 × Anubis Cup, 2-Pack</List.Item>
              </List>
            </Box>
            <HorizontalStack align="end">
              <ButtonGroup>
                {secondaryActionsFrom({
                  secondaryActions: [{content: 'Edit shipment'}],
                })}
                <Button primary>Add tracking number</Button>
              </ButtonGroup>
            </HorizontalStack>
          </VerticalStack>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Multiple Footer Actions — Card
        </Text>
        <Card
          title="Shipment 1234"
          secondaryFooterActions={[
            {content: 'Cancel shipment', destructive: true},
            {content: 'Add another shipment', disabled: true},
          ]}
          primaryFooterAction={{content: 'Add tracking number'}}
        >
          <Card.Section title="Items">
            <List>
              <List.Item>1 × Oasis Glass, 4-Pack</List.Item>
              <List.Item>1 × Anubis Cup, 2-Pack</List.Item>
            </List>
          </Card.Section>
        </Card>
        <Text as="h1" variant="headingXl">
          With Multiple Footer Actions — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <Text as="h2" variant="headingMd">
              Shipment 1234
            </Text>
            <Box>
              <Box paddingBlockEnd="2">
                <Text as="h2" variant="bodyMd" fontWeight="bold">
                  Items
                </Text>
              </Box>
              <List>
                <List.Item>1 × Oasis Glass, 4-Pack</List.Item>
                <List.Item>1 × Anubis Cup, 2-Pack</List.Item>
              </List>
            </Box>
            <HorizontalStack align="end">
              <ButtonGroup>
                {secondaryActionsFrom({
                  secondaryActions: [
                    {content: 'Cancel shipment', destructive: true},
                    {content: 'Add another shipment', disabled: true},
                  ],
                })}
                <Button primary>Add tracking number</Button>
              </ButtonGroup>
            </HorizontalStack>
          </VerticalStack>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Custom Footer Actions — Card
        </Text>
        <Card title="Secure your account with 2-step authentication">
          <Card.Section>
            <LegacyStack spacing="loose" vertical>
              <p>
                Two-step authentication adds an extra layer of security when
                logging in to your account. A special code will be required each
                time you log in, ensuring only you can access your account.
              </p>
              <LegacyStack distribution="trailing">
                <ButtonGroup>
                  <Button>Enable two-step authentication</Button>
                  <Button plain>Learn more</Button>
                </ButtonGroup>
              </LegacyStack>
            </LegacyStack>
          </Card.Section>
        </Card>
        <Text as="h1" variant="headingXl">
          With Custom Footer Actions — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <Text as="h2" variant="headingMd">
              Secure your account with 2-step authentication
            </Text>
            <Text as="p" variant="bodyMd">
              Two-step authentication adds an extra layer of security when
              logging in to your account. A special code will be required each
              time you log in, ensuring only you can access your account.
            </Text>
            <HorizontalStack align="end">
              <ButtonGroup>
                {secondaryActionsFrom({
                  secondaryActions: [
                    {content: 'Enable two-step authentication'},
                  ],
                })}
                <Button plain>Learn more</Button>
              </ButtonGroup>
            </HorizontalStack>
          </VerticalStack>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Destructive Footer Actions — Card
        </Text>
        <Card
          title="Shipment 1234"
          secondaryFooterActions={[
            {content: 'Cancel shipment', destructive: true},
          ]}
          primaryFooterAction={{content: 'Add tracking number'}}
        >
          <Card.Section title="Items">
            <List>
              <List.Item>1 × Oasis Glass, 4-Pack</List.Item>
              <List.Item>1 × Anubis Cup, 2-Pack</List.Item>
            </List>
          </Card.Section>
        </Card>
        <Text as="h1" variant="headingXl">
          With Destructive Footer Actions — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <Text as="h2" variant="headingMd">
              Shipment 1234
            </Text>
            <Box>
              <Box paddingBlockEnd="2">
                <Text as="h2" variant="bodyMd" fontWeight="bold">
                  Items
                </Text>
              </Box>
              <List>
                <List.Item>1 × Oasis Glass, 4-Pack</List.Item>
                <List.Item>1 × Anubis Cup, 2-Pack</List.Item>
              </List>
            </Box>
            <HorizontalStack align="end">
              <ButtonGroup>
                {secondaryActionsFrom({
                  secondaryActions: [
                    {content: 'Cancel shipment', destructive: true},
                  ],
                })}
                <Button primary>Add tracking number</Button>
              </ButtonGroup>
            </HorizontalStack>
          </VerticalStack>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Multiple Sections — Card
        </Text>
        <Card title="Online store dashboard">
          <Card.Section>
            <p>View a summary of your online store’s performance.</p>
          </Card.Section>

          <Card.Section>
            <p>
              View a summary of your online store’s performance, including
              sales, visitors, top products, and referrals.
            </p>
          </Card.Section>
        </Card>
        <Text as="h1" variant="headingXl">
          With Multiple Sections — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <Text as="h2" variant="headingMd">
              Online store dashboard
            </Text>
            <Text as="p" variant="bodyMd">
              View a summary of the performance of your online store.
            </Text>
            <Bleed marginInline={{xs: '4', sm: '5'}}>
              <Divider />
              <Box padding={{xs: '4', sm: '5'}} paddingBlockEnd="0">
                <VerticalStack gap="2">
                  <Text as="p" variant="bodyMd">
                    View a summary of your online store’s performance, including
                    sales, visitors, top products, and referrals.
                  </Text>
                </VerticalStack>
              </Box>
            </Bleed>
          </VerticalStack>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Multiple Titled Sections — Card
        </Text>
        <Card title="Online store dashboard">
          <Card.Section title="Reports">
            <p>View a summary of your online store’s performance.</p>
          </Card.Section>

          <Card.Section title="Summary">
            <p>
              View a summary of your online store’s performance, including
              sales, visitors, top products, and referrals.
            </p>
          </Card.Section>
        </Card>
        <Text as="h1" variant="headingXl">
          With Multiple Titled Sections — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <Text as="h2" variant="headingMd">
              Online store dashboard
            </Text>
            <Box>
              <Box paddingBlockEnd="2">
                <Text as="h3" variant="headingSm">
                  Reports
                </Text>
              </Box>
              <Text as="p" variant="bodyMd">
                View a summary of your online store’s performance.
              </Text>
            </Box>
            <Bleed marginInline={{xs: '4', sm: '5'}}>
              <Divider />
              <Box padding={{xs: '4', sm: '5'}} paddingBlockEnd="0">
                <VerticalStack gap="2">
                  <Text as="h3" variant="headingSm">
                    Summary
                  </Text>
                  <Text as="p" variant="bodyMd">
                    View a summary of your online store’s performance, including
                    sales, visitors, top products, and referrals.
                  </Text>
                </VerticalStack>
              </Box>
            </Bleed>
          </VerticalStack>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Sections and Actions — Card
        </Text>
        <Card title="Customer">
          <Card.Section>
            <p>John Smith</p>
          </Card.Section>
          <Card.Section
            title="Contact Information"
            actions={[{content: 'Edit'}]}
          >
            <p>john.smith@example.com</p>
          </Card.Section>
        </Card>
        <Text as="h1" variant="headingXl">
          With Sections and Actions — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <Text as="h2" variant="headingMd">
              Customer
            </Text>
            <Text as="p" variant="bodyMd">
              John Smith
            </Text>
            <Bleed marginInline={{xs: '4', sm: '5'}}>
              <Divider />
              <Box padding={{xs: '4', sm: '5'}} paddingBlockEnd="0">
                <Box>
                  <Box paddingBlockEnd="2">
                    <HorizontalGrid columns="1fr auto">
                      <Text as="h3" variant="headingSm">
                        Contact Information
                      </Text>
                      <ButtonGroup>
                        <Button plain>Edit</Button>
                      </ButtonGroup>
                    </HorizontalGrid>
                  </Box>
                  <Text as="p" variant="bodyMd">
                    john.smith@example.com
                  </Text>
                </Box>
              </Box>
            </Bleed>
          </VerticalStack>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Subsection — Card
        </Text>
        <Card title="Customer">
          <Card.Section>
            <p>John Smith</p>
          </Card.Section>
          <Card.Section title="Addresses">
            <Card.Subsection>
              123 First St
              <br />
              Somewhere
              <br />
              The Universe
            </Card.Subsection>
            <Card.Subsection>
              123 Second St
              <br />
              Somewhere
              <br />
              The Universe
            </Card.Subsection>
          </Card.Section>
          <Card.Section>
            <Card.Subsection>
              A single subsection without a sibling has no visual appearance
            </Card.Subsection>
          </Card.Section>
        </Card>
        <Text as="h1" variant="headingXl">
          With Subsection — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <Text as="h2" variant="headingMd">
              Customer
            </Text>
            <Text as="p" variant="bodyMd">
              John Smith
            </Text>
            <Bleed marginInline={{xs: '4', sm: '5'}}>
              <Divider />
              <Box padding={{xs: '4', sm: '5'}} paddingBlockEnd="0">
                <Box paddingBlockEnd="2">
                  <Text as="h3" variant="headingSm">
                    Addresses
                  </Text>
                </Box>
                <VerticalStack gap="4">
                  <Box>
                    <Text as="p" variant="bodyMd">
                      123 First St
                    </Text>
                    <Text as="p" variant="bodyMd">
                      Somewhere
                    </Text>
                    <Text as="p" variant="bodyMd">
                      The Universe
                    </Text>
                  </Box>
                  <Divider />
                  <Box>
                    <Text as="p" variant="bodyMd">
                      123 Second St
                    </Text>
                    <Text as="p" variant="bodyMd">
                      Somewhere
                    </Text>
                    <Text as="p" variant="bodyMd">
                      The Universe
                    </Text>
                  </Box>
                </VerticalStack>
              </Box>
            </Bleed>
            <Bleed marginInline={{xs: '4', sm: '5'}}>
              <Divider />
              <Box paddingInlineStart="5" paddingBlockStart="5">
                <Text as="p" variant="bodyMd">
                  A single subsection without a sibling has no visual appearance
                </Text>
              </Box>
            </Bleed>
          </VerticalStack>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Destructive Action — Card
        </Text>
        <Card title="Customer">
          <Card.Section>
            <p>John Smith</p>
          </Card.Section>
          <Card.Section
            title="Contact Information"
            actions={[
              {content: 'Delete', destructive: true},
              {content: 'Edit'},
            ]}
          >
            <p>john.smith@example.com</p>
          </Card.Section>
        </Card>
        <Text as="h1" variant="headingXl">
          With Destructive Action — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <Text as="h2" variant="headingMd">
              Customer
            </Text>
            <Text as="p" variant="bodyMd">
              John Smith
            </Text>
            <Bleed marginInline={{xs: '4', sm: '5'}}>
              <Divider />
              <Box padding={{xs: '4', sm: '5'}} paddingBlockEnd="0">
                <VerticalStack gap="2">
                  <HorizontalGrid columns="1fr auto">
                    <Text as="h3" variant="headingSm">
                      Contact information
                    </Text>
                    <ButtonGroup>
                      <Button plain destructive>
                        Delete
                      </Button>
                      <Button plain>Edit</Button>
                    </ButtonGroup>
                  </HorizontalGrid>
                  <Text as="p" variant="bodyMd">
                    john.smith@example.com
                  </Text>
                </VerticalStack>
              </Box>
            </Bleed>
          </VerticalStack>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Subdued Section — Card
        </Text>
        <Card title="Staff accounts">
          <Card.Section>
            <List>
              <List.Item>Felix Crafford</List.Item>
              <List.Item>Ezequiel Manno</List.Item>
            </List>
          </Card.Section>

          <Card.Section subdued title="Deactivated staff accounts">
            <List>
              <List.Item>Felix Crafford</List.Item>
              <List.Item>Ezequiel Manno</List.Item>
            </List>
          </Card.Section>
        </Card>
        <Text as="h1" variant="headingXl">
          With Subdued Section — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack 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>
          </VerticalStack>
          <Bleed
            marginBlockEnd={{xs: '4', sm: '5'}}
            marginInline={{xs: '4', sm: '5'}}
          >
            <Divider />
            <Box background="bg-subdued" padding={{xs: '4', sm: '5'}}>
              <VerticalStack gap="2">
                <Text as="h3" variant="headingSm">
                  Deactivated staff accounts
                </Text>
                <List>
                  <List.Item>Felix Crafford</List.Item>
                  <List.Item>Ezequiel Manno</List.Item>
                </List>
              </VerticalStack>
            </Box>
          </Bleed>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Subdued For Secondary Content — Card
        </Text>
        <Card title="Deactivated staff accounts" sectioned subdued>
          <List>
            <List.Item>Felix Crafford</List.Item>
            <List.Item>Ezequiel Manno</List.Item>
          </List>
        </Card>
        <Text as="h1" variant="headingXl">
          With Subdued For Secondary Content (aka WithBackgroundSubdued) —
          AlphaCard
        </Text>
        <AlphaCard background="bg-subdued" roundedAbove="sm">
          <VerticalStack gap="5">
            <Text as="h2" variant="headingMd">
              Deactivated staff accounts
            </Text>
            <List>
              <List.Item>Felix Crafford</List.Item>
              <List.Item>Ezequiel Manno</List.Item>
            </List>
          </VerticalStack>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Separate Header — Card
        </Text>
        <Card>
          <Card.Header
            actions={[
              {
                content: 'Preview',
              },
            ]}
            title="Staff accounts"
          >
            <Popover
              active
              activator={
                <Button disclosure plain>
                  Add account
                </Button>
              }
              onClose={() => {}}
            >
              <ActionList items={[{content: 'Member'}, {content: 'Admin'}]} />
            </Popover>
          </Card.Header>
          <Card.Section>
            <List>
              <List.Item>Felix Crafford</List.Item>
              <List.Item>Ezequiel Manno</List.Item>
            </List>
          </Card.Section>
        </Card>
        <Text as="h1" variant="headingXl">
          With Separate Header — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <HorizontalGrid columns="1fr auto">
              <Text as="h2" variant="headingMd">
                Staff accounts
              </Text>
              <ButtonGroup>
                <Button plain>Preview</Button>
                {secondaryActionsFrom({
                  secondaryActions: [{content: 'Member'}, {content: 'Admin'}],
                  secondaryActionsDisclosureText: 'Add account',
                  plainButton: true,
                })}
              </ButtonGroup>
            </HorizontalGrid>
            <List>
              <List.Item>Felix Crafford</List.Item>
              <List.Item>Ezequiel Manno</List.Item>
            </List>
          </VerticalStack>
        </AlphaCard> */}

        <Text as="h1" variant="headingXl">
          With Custom React Node Title — Card
        </Text>
        <Card title="Products">
          <Card.Section
            title={
              <LegacyStack>
                <Icon source={ProductsMajor} />
                <Text variant="headingSm" as="h3">
                  New Products
                </Text>
              </LegacyStack>
            }
          >
            <List>
              <List.Item>Socks</List.Item>
              <List.Item>Super Shoes</List.Item>
            </List>
          </Card.Section>
        </Card>
        <Text as="h1" variant="headingXl">
          With Custom React Node Title — AlphaCard
        </Text>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <Text as="h2" variant="headingMd">
              Products
            </Text>
            <VerticalStack inlineAlign="start" gap="0">
              <HorizontalStack gap="4">
                <Icon source={ProductsMajor} />
                <Text variant="headingSm" as="h3">
                  New Products
                </Text>
              </HorizontalStack>
            </VerticalStack>
          </VerticalStack>
          <Box paddingBlockStart="2">
            <List>
              <List.Item>Socks</List.Item>
              <List.Item>Super Shoes</List.Item>
            </List>
          </Box>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With Flush Sections — Card
        </Text>
        <Card>
          <Card.Section flush>
            <Image
              source="https://burst.shopifycdn.com/photos/black-orange-stripes_373x@2x.jpg"
              alt="a sheet with purple and orange stripes"
            />
          </Card.Section>
          <Card.Section subdued>
            <TextContainer>
              You can use sales reports to see information about your customers’
              orders based on criteria such as sales over time, by channel, or
              by staff.
            </TextContainer>
          </Card.Section>
        </Card>
        <AlphaCard roundedAbove="sm">
          <Bleed
            marginInline={{xs: '4', sm: '5'}}
            marginBlock={{xs: '4', sm: '5'}}
          >
            <Image
              source="https://burst.shopifycdn.com/photos/black-orange-stripes_373x@2x.jpg"
              alt="a sheet with purple and orange stripes"
            />
            <Divider />
            <Box padding={{xs: '4', sm: '5'}}>
              <VerticalStack gap="2">
                <Text as="p" variant="bodyMd">
                  You can use sales reports to see information about your
                  customers’ orders based on criteria such as sales over time,
                  by channel, or by staff.
                </Text>
              </VerticalStack>
            </Box>
          </Bleed>
        </AlphaCard>

        <Text as="h1" variant="headingXl">
          With All Elements — Card
        </Text>
        <Card
          secondaryFooterActions={[{content: 'Dismiss'}]}
          primaryFooterAction={{content: 'Export Report'}}
        >
          <Card.Header
            actions={[
              {
                content: 'Total Sales',
              },
            ]}
            title="Sales"
          >
            <Popover
              active={false}
              activator={
                <Button disclosure plain>
                  View Sales
                </Button>
              }
              onClose={() => {}}
            >
              <ActionList
                items={[{content: 'Gross Sales'}, {content: 'Net Sales'}]}
              />
            </Popover>
          </Card.Header>
          <Card.Section>
            <TextContainer>
              You can use sales reports to see information about your customers’
              orders based on criteria such as sales over time, by channel, or
              by staff.
            </TextContainer>
          </Card.Section>
          <Card.Section title="Total Sales Breakdown">
            <ResourceList
              resourceName={{singular: 'sale', plural: 'sales'}}
              items={[
                {
                  sales: 'Orders',
                  amount: 'USD$0.00',
                  url: '#',
                },
                {
                  sales: 'Returns',
                  amount: '-USD$250.00',
                  url: '#',
                },
              ]}
              renderItem={(item) => {
                const {sales, amount, url} = item;
                return (
                  <ResourceList.Item
                    url={url}
                    accessibilityLabel={`View Sales for ${sales}`}
                  >
                    <LegacyStack>
                      <LegacyStack.Item fill>{sales}</LegacyStack.Item>
                      <LegacyStack.Item>{amount}</LegacyStack.Item>
                    </LegacyStack>
                  </ResourceList.Item>
                );
              }}
            />
          </Card.Section>
          <Card.Section title="Deactivated reports" subdued>
            <List>
              <List.Item>Payouts</List.Item>
              <List.Item>Total Sales By Channel</List.Item>
            </List>
          </Card.Section>
          <Card.Section title="Note">
            <TextContainer>
              The sales reports are available only if your store is on the
              Shopify plan or higher.
            </TextContainer>
          </Card.Section>
        </Card>
        <AlphaCard roundedAbove="sm">
          <VerticalStack gap="5">
            <HorizontalGrid columns="1fr auto">
              <Text as="h2" variant="headingMd">
                Sales
              </Text>
              <ButtonGroup>
                <Button plain>Total Sales</Button>
                {secondaryActionsFrom({
                  secondaryActions: [
                    {content: 'Gross Sales'},
                    {content: 'Net Sales'},
                  ],
                  secondaryActionsDisclosureText: 'View Sales',
                  plainButton: true,
                })}
              </ButtonGroup>
            </HorizontalGrid>
            <Text as="p" variant="bodyMd">
              You can use sales reports to see information about your customers’
              orders based on criteria such as sales over time, by channel, or
              by staff.
            </Text>
            <Bleed marginInline={{xs: '4', sm: '5'}}>
              <Divider />
              <Box padding={{xs: '4', sm: '5'}} paddingBlockEnd="0">
                <Box paddingBlockEnd="2">
                  <Text as="h3" variant="headingSm">
                    Total Sales Breakdown
                  </Text>
                </Box>
                <ResourceList
                  resourceName={{singular: 'sale', plural: 'sales'}}
                  items={[
                    {
                      sales: 'Orders',
                      amount: 'USD$0.00',
                      url: '#',
                    },
                    {
                      sales: 'Returns',
                      amount: '-USD$250.00',
                      url: '#',
                    },
                  ]}
                  renderItem={(item) => {
                    const {sales, amount, url} = item;
                    return (
                      <ResourceList.Item
                        id={sales}
                        url={url}
                        accessibilityLabel={`View Sales for ${sales}`}
                      >
                        <LegacyStack>
                          <LegacyStack.Item fill>{sales}</LegacyStack.Item>
                          <LegacyStack.Item>{amount}</LegacyStack.Item>
                        </LegacyStack>
                      </ResourceList.Item>
                    );
                  }}
                />
              </Box>
            </Bleed>
            <Bleed
              marginBlockEnd={{xs: '5', sm: '5'}}
              marginInline={{xs: '4', sm: '5'}}
            >
              <Divider />
              <Box background="bg-subdued" padding={{xs: '4', sm: '5'}}>
                <VerticalStack gap="2">
                  <Text as="h3" variant="headingSm">
                    Deactivated reports
                  </Text>
                  <List>
                    <List.Item>Payouts</List.Item>
                    <List.Item>Total Sales By Channel</List.Item>
                  </List>
                </VerticalStack>
              </Box>
            </Bleed>
            <Bleed
              marginBlockEnd={{xs: '4', sm: '5'}}
              marginInline={{xs: '4', sm: '5'}}
            >
              <Divider />
            </Bleed>
            <Box paddingBlockStart="5">
              <VerticalStack gap="2">
                <Text as="h3" variant="headingSm">
                  Note
                </Text>
                <Text as="p" variant="bodyMd">
                  The sales reports are available only if your store is on the
                  Shopify plan or higher.
                </Text>
                <Box paddingBlockStart="3">
                  <HorizontalStack align="end">
                    <ButtonGroup>
                      {secondaryActionsFrom({
                        secondaryActions: [{content: 'Dismiss'}],
                      })}
                      <Button primary>Export Report</Button>
                    </ButtonGroup>
                  </HorizontalStack>
                </Box>
              </VerticalStack>
            </Box>
          </VerticalStack>
        </AlphaCard>
      </VerticalStack>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	240.76 KB (+0.09% 🔺)
polaris-react-esm	156.68 KB (-0.06% 🔽)
polaris-react-esnext	218.89 KB (-0.03% 🔽)
polaris-react-css	47.23 KB (0%)

[laurkim]

This was added because secondary actions rendered a lot of components, so it reduces the amount of copy/paste users have to do to recreate multiple secondary actions. The naming convention follows the way we have buttonFrom and buttonsFrom for Button utils for consistency.

I was considering adding another util for primary actions but the code for that is pretty straightforward and minimal. Open to feedback on the secondaryActionsFrom util and whether I should supplement it with a primaryActionsFrom util as well.

[kyledurand]

This is a tough one but I have a few points

1. I wouldn't expect this helper to come from the card component
2. Do we need a separate helper?
3. Can we make this work instead:

{buttonsFrom([
  {content: 'Gross Sales', plain: true},
  {
    content: 'Net Sales',
    plain: true,
    connectedDisclosure: {
      accessibilityLabel: 'View Sales',
      actions: [{content: 'View Sales'}],
    },
  },
])}

[laurkim]

The ComplexAction type doesn't support a connected disclosure, so it'd be a larger refactor to support #3.
If it makes more sense, I can move the logic from the AlphaCard util into the Buttons util and refactor it so that it's not worded specifically for secondary actions but for any button that requires a disclosure to display more actions.

[kyledurand]

The types don't support it and they styling is off but it does render and I think it's the right way forward. Moving this util to buttons with a more specific name would be fine in the interim 👍

[laurkim]

I'll try extending the types to support connected disclosures in the ComplexAction and refactor some of the utils and Button so it's not left in an interim state 👍

[laurkim]

Closing in favor of #11201.