[Card] Add support for multiple secondary actions in footer and the option to disable them

[qq99]

Should merge after #1622 to minimize merge conflicts

WHAT is this pull request doing?

• Adds ability to supply array of secondaryFooterActions, and adds deprecation notes to secondaryFooterAction (singular)
• Allows primaryFooterAction and secondaryFooterAction to be disableable

With an array of actions, you can now easily achieve this:

With an array of just 1 action, it falls back to rendering as if you had supplied a secondaryFooterAction (singular):

Here's a picture of disabling the secondary, and of a custom disclosure text:

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import * as React from 'react';
import {Page, Card, TextField} from '../src';

interface State {}

/* eslint-disable no-alert */
export default class Playground extends React.Component<{}, State> {
  render() {
    return (
      <Page title="Playground">
        <Card
          sectioned
          title="My cool card"
          actions={[{content: 'Header action'}]}
          primaryFooterAction={{content: 'Primary', disabled: true}}
          secondaryFooterAction={{content: 'yo'}}
          secondaryFooterActions={[
            {
              content: 'Secondary 1',
              onAction: () => alert('sec1'),
            },
            {
              content: 'Secondary 2',
              onAction: () => alert('sec2'),
            },
            {
              content: 'Disabled Secondary 3',
              disabled: true,
              onAction: () => alert('sec3'),
            },
          ]}
        >
          <TextField
            label="Textfield"
            readOnly
            disabled
            onChange={() => alert('test')}
          />
        </Card>
        <Card
          title="My cool card"
          actions={[{content: 'Header action'}]}
          primaryFooterAction={{content: 'Primary'}}
          secondaryFooterActions={[
            {
              content: 'Secondary 1',
              onAction: () => alert('sec1'),
            },
          ]}
        >
          <Card.Section>Card body</Card.Section>
          <Card.Section>Card body</Card.Section>
        </Card>
        <Card
          title="Disabled secondary"
          actions={[{content: 'Header action'}]}
          primaryFooterAction={{content: 'Primary'}}
          secondaryFooterActions={[
            {
              content: 'Secondary 1',
              disabled: true,
              onAction: () => alert('sec1'),
            },
          ]}
        >
          <Card.Section>Card body</Card.Section>
          <Card.Section>Card body</Card.Section>
        </Card>
        <Card
          title="Custom disclosure text"
          actions={[{content: 'Header action'}]}
          primaryFooterAction={{content: 'Primary'}}
          secondaryFooterActions={[
            {
              content: 'Secondary 1',
              onAction: () => alert('sec1'),
            },
            {
              content: 'Secondary 2',
              onAction: () => alert('sec2'),
            },
          ]}
          secondaryFooterActionsDisclosureText="..."
        >
          <Card.Section>Card body</Card.Section>
          <Card.Section>Card body</Card.Section>
        </Card>
        {/* Add the code you want to test in here */}
      </Page>
    );
  }
}
/* eslint-enable no-alert */

🎩 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

[qq99]

as the old API is deprecated, I figured I'd update the existing singular example

Not sure why the lines below are showing up as new though

[chloerice]

💯

[alex-page]

Hey @qq99 I have asked for translations. From a quick glance this looks okay. Have you tophatted this change in mobile, multiple browsers and for accessibility?

[qq99]

I could do multiple browsers easily enough: works nicely in Firefox,Chrome,Safari

I don't know how to test accessibility though and don't have a good solution to test this on a mobile phone

Mobile viewport simulator from Storybook:

[qq99]

We've been chatting about using ComplexAction instead in Slack (cc @chloerice),
after #1622 ships I can rebase

[chloerice]

This prop deprecation/replacement makes sense to me. Code and 🎩 👀 solid 👍 Just a couple typo fixes and a few content changes suggested.

I rebased your branch on master when I checked it out locally. The only real conflict was a content update from "Cancel shipment" to "Edit shipment" in one of README examples since there's now a specific example for a card with a destructive footer action. Didn't want to push it up in case you made any changes locally too, but happy to push it up if you run into issues.

[chloerice]

Should there be a test for the disclosure text rendering a default value if secondaryFooterActionsDisclosureText is unset?

[qq99]

There is in a way, in popover works when disclosure button is clicked:

      const disclosureButton = card.find(Button).first();
      expect(disclosureButton).toHaveLength(1);
      expect(disclosureButton.text()).toBe('More');

[qq99]

I think I got all your changes @chloerice 🤞