(chore)MC-1676: CardActionButtonRow component refactor

[katerinachinnappan]

Goal

Abstract the CardActionButtonRow component to be more generic & not need to know about all card button actions across different component.

• Added new CardAction type to take in the action name, MUI icon & onClick callback.
• Adjusted CardActionButtonRowProps to take an array of (optional) right-aligned CardAction & (optional) left-aligned CardAction.

Components can now specify right and/or left card action buttons like this:

  // card action buttons to be rendered & aligned on bottom left
  const cardActionButtonsLeft: CardAction[] = [
    { actionName: 'Edit', icon: <EditOutlinedIcon />, onClick: () => onEdit() },
  ];
  // card action buttons to be rendered & aligned on bottom right
  const cardActionButtonsRight: CardAction[] = [
    { actionName: 'Remove', icon: <ClearIcon />, onClick: () => onRemove() },
  ];

<CardActionButtonRow
    cardActionButtonsLeft={cardActionButtonsLeft}
    cardActionButtonsRight={cardActionButtonsRight}
/>

Todos

• deploy to dev

Reference

Tickets:

• https://mozilla-hub.atlassian.net/browse/MC-1676

[jpetto]

this is great! nice work!