UXD-1884: Add icon button & tag in the card component

[slee1130]

Purpose 🚀

https://aclgrc.atlassian.net/browse/UXD-1697 Add icon button and the tag in the card component and change some styling

Notes ✏️

1. Use avatar component

• Smaller border radius: 6px (for large 40px avatar)
• Button on top right is always medium size 32px
• Metadata texts: Lato regular 13px

2. Paddings:

• Between Title and Metadata: 4px
• Between Metadata and Description: 8px

3. Border 1 px #D7D7D7 around the card.

4. If a tag is used, it is always a medium size 24px height.

   Mockup: https://www.figma.com/file/DRhxHNWVzd94K8Tf0C3VTy/🐦-Starling-UI-Kit?node-id=7265%3A408348

   Updates 📦

   If you have changed a component's source code (not stories, specs, or docs), before merging your branch run yarn changeset. This will prompt you to:

   • indicate if changes were patch/minor/major for each modified package
   • enter a release message

Storybook 📕

http://storybooks.highbond-s3.com/paprika/your-branch-name

Screenshots 📸

optional but highly recommended

References 🔗

relevant Jira ticket / GitHub issues

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: ff28122e3cc23518405a9afccb1090556493a49a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | ------------- | ----- | | @paprika/card | Major |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mikrotron]

The build is broken on CI – you'll need to update the Avatar import in Card.mdx: https://github.com/acl-services/paprika/blame/master/packages/Card/stories/Card.mdx#L5

[mikrotron]

I noticed that the footer will break to two lines okay, but three or more lines is a bit problematic:

The <Card> itself has a fixed height, and maybe it needs to keep that. Maybe the <Card.Footer> should simply have a fixed height as well and overflow:hidden, so the result would be a bit less broken looking?