Card

[airikej]

https://github.com/TEHIK-EE/tedi-design-system/issues/116

Figma?node-id=163-19532&m=dev)

Wouldn't be changing anything in API, except cleanup for deprecated props and matching naming conventions with Figma design. Card already has BreakpointSupport, so no need to add that. Currently only unit tests are missing.

Any other suggestions are welcome

[kasparsuvi1]

Currently we have 2 separated components CardHeader and CardContent, that are very similar, but have only some differences:

• background property options
• CardHeader has border-bottom
• CardHeader can be rendered as Button

As CardHeader is semantically useful component we shouldn't remove it, but i would propose that it should internally render CardContent. So all the props can be shared.

• CardContent can allow same bg colors as header
• CardContent can have separator between 2 CardContents also when needed
• CardContent as button can also have usage - Clickable card as example

Currently it's problematic to use CardHeader component without the Separator - so maybe by we can add some property to control it? It would allow to use semantically better component (CardHeader), when design doesn't add the separator or its not stretched. And also when we add it to CardContent and use it internally, that should allow us to separate CardContents with separator also.

[kasparsuvi1]

Also new TEDI design shows card's with background images. Currently its not supported. And custom solution is needed by applications. Can we add backgroundImage property, that allows to pass base64 string image and also placement properties of the image? So the custom css is not needed by applications.