[Card] Add full example to styleguide

[elileto]

WHY are these changes introduced?

Resolves #890

WHAT is this pull request doing?

Adds an example to the styleguide that includes a combination of all the props available for Card.

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

import * as React from 'react';
import {
  Card,
  Stack,
  ActionList,
  Popover,
  Button,
  TextContainer,
  ResourceList,
  List,
} from '@shopify/polaris';

interface State {}

export default class Playground extends React.Component<never, State> {
  render() {
    return (
      <Card
        secondaryFooterAction={{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: 'reports/orders',
              },
              {
                sales: 'Returns',
                amount: '-USD$250.00',
                url: 'reports/returns',
              },
            ]}
            renderItem={(item) => {
              const {sales, amount, url} = item;
              return (
                <ResourceList.Item
                  url={url}
                  accessibilityLabel={`View Sales for ${sales}`}
                >
                  <Stack>
                    <Stack.Item fill>{sales}</Stack.Item>
                    <Stack.Item>{amount}</Stack.Item>
                  </Stack>
                </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>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[ry5n]

I like this, but it combines some props that aren’t intended to be combined. Also, DataTable doesn’t look great in this context; consider some other content for the sections.

[ry5n]

Two things, otherwise looking good 😃