[Card] Adjust padding of Card.Section, footer and header

[elileto]

WHY are these changes introduced?

Resolves #954

When a subdued section Card and a footer prop were combined there was no padding/margin between the Button Group and the edge of the subdued card.
It was also discovered in the interim there was the same issue with the Header button Group and a subdued section card as well so this will be resolved.

WHAT is this pull request doing?

This request is adding a margin to the footer section.
Before:

After:

Small screen:

With no header and regular section cards:

Small screen:

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

import * as React from 'react';
import {Page, Card, List, Popover, Button, ActionList} from '../src';

interface State {}

export default class Playground extends React.Component<{}, State> {
  render() {
    return (
      <Page title="Playground">
        <Card
          secondaryFooterAction={{content: 'Dismiss'}}
          primaryFooterAction={{content: 'Export Report'}}
        >
          <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 title="Deactivated reports" subdued>
            <List>
              <List.Item>Payouts</List.Item>
              <List.Item>Total Sales By Channel</List.Item>
            </List>
          </Card.Section>
        </Card>
      </Page>
    );
  }
}

without subdued section:

import * as React from 'react';
import {Page, Card, List, Popover, Button, ActionList} from '../src';

interface State {}

export default class Playground extends React.Component<{}, State> {
  render() {
    return (
      <Page title="Playground">
        <Card
          secondaryFooterAction={{content: 'Dismiss'}}
          primaryFooterAction={{content: 'Export Report'}}
        >
          <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 title="Deactivated reports">
            <List>
              <List.Item>Payouts</List.Item>
              <List.Item>Total Sales By Channel</List.Item>
            </List>
          </Card.Section>
        </Card>
      </Page>
    );
  }
}

### 🎩 checklist

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

[ry5n]

It’s possible this might cause too much apparent space when the last section is not subdued. Would it make the CSS too brittle to apply the top margin (and add a border) to the Card footer only when the last section is subdued?

[solonaarmstrong-zz]

Looks 👌

This adds a margin between the footer and a regular section, as well, so I would just make sure that a designer (@ry5n ?) agrees with that decision. It looks better to me with the extra space for both the subdued and regular sections, but I don't know if there was a reason behind the lack of top margin for regular sections.

Ignore me. I just saw Ryan's comment.

Could you try something like:

.Section-subdued:last-of-type ~ .Footer {
  margin-top: spacing(loose);
}

??

[ry5n]

Looks great! Thanks for your hard work on this 🎉

[solonaarmstrong-zz]

👌