Modify Card component to accept header

[rebeccahum]

Description

Modify existing Card component to accept header property:

Checklist

• This PR has good automated test coverage
• The storybook for the component has been updated

Steps to Test

Outline the steps to test and verify the PR here.

Example:

1. Pull down PR.
2. npm run dev.
3. Open Storybook.
4. Eat cookies.
5. Verify cookies are delicious.

[netlify]

✅ Deploy Preview for vip-design-system-components ready!

Name	Link
🔨 Latest commit	7e6ba2a
🔍 Latest deploy log	https://app.netlify.com/sites/vip-design-system-components/deploys/667dd29ea9fb940008065453
😎 Deploy Preview	https://deploy-preview-417--vip-design-system-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[djalmaaraujo]

First of all, thanks for creating the component here first! This is really important.

I would like to propose a different a approach from what you started, if you don't mind. The goal is to keep thins standard with the way we've be doing things.

1 - I believe the BoxWithHeading could easily be a variation of "Card". You could add a header property accepting a text or another component, and simply use the Card.

2 - The way you're customizing the variables is a little bit different of what we do usually. It might look not so "flexible", but to keep the design aligned with Figma, we usually work with "variants" of a component. Instead of passing the header bg color and header text color, you can pass the variant="primary" for example. The primary variant will have a "static" variation of the header you want to use.

If I may suggest what it would like in my mind, is this:

<Card>
  <Card.Header>This is my header</Card.Header>
  <Card.Body>This is my body</Card.Body> // this is optional
</Card>

You can take a look of a variant example here: src/system/Button/Button.tsx

3 - If you go with the Card idea, can you move this stories.tsx documentation and write some documentation? I can help too.

4 - We have a set of border colors, you might want to try borders.2 or something similar. Figma should show the correct set of colors.

[djalmaaraujo]

Thanks! I left some things, but it's in a much better shape now!

[djalmaaraujo]

Amazing! :D
Thanks for your patience!