FoldableCard: Allow custom action button icon

[jordwest]

This PR adds an icon prop which allows the FoldableCard action button icon to be changed. This will be used for a cog icon in #1126.

Examples

icon="arrow-down"

#### `icon="cog"`

### Why not use `actionButton` and `actionButtonExpanded` props?

Although the action button can already be overridden using the actionButton and actionButtonExpanded props, overriding those require that the user also recreates the button and Gridicon and apply appropriate classes. Overriding the default actionButton also removes the screen reader span element.

To get the same functionality, you'd need to do something like:

import Gridicon from 'components/gridicon';
   ...
<FoldableCard
  actionButton={
    <button disabled={ this.props.disabled } className="foldable-card__action foldable-card__expand" onClick={ clickAction }>
      <span className="screen-reader-text">{ this.translate( 'More' ) }</span>
      <Gridicon icon="arrow-down" size={ 24 } />
    </button>
  }
  actionButtonExpanded={
    <button disabled={ this.props.disabled } className="foldable-card__action foldable-card__expand" onClick={ clickAction }>
      <span className="screen-reader-text">{ this.translate( 'More' ) }</span>
      <Gridicon icon="arrow-up" size={ 24 } />
    </button>
  }
>
   ...
</FoldableCard>

With this change, the above can be achieved with:

<FoldableCard icon="arrow-down"> ... </FoldableCard>

This still applies the current CSS animation/transformation, so the icon will appear upside-down when the card is expanded.

[mtias]

Could we just use icon here?

[jordwest]

@mtias: 👍 much nicer. Changed in the latest commit

[aduth]

Looks good 👍