Replace Bagdes by Tags in Card props

[pprev94]

In the documentation of dsfr (https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte) it's already tags instead of badges.
So we should apply changes to Card component

I can work on a PR

[ocruze]

Sorry we read a little too fast. So it seems that both tags and badges are possible but not at the same time. We would like to have the possibility to choose from tags or badges.

We thought of something like this: changing the following prop badges: BadgeProps[] | TagProps[]
Maybe reuse the <Badge /> and <Tag /> components?

[enguerranws]

We thought of something like this: changing the following prop badges: BadgeProps[] | TagProps[]
Maybe reuse the and components?

@ocruze Seems fine to me. Do you plan to work on this?

[slafayIGN]

I got some new elements from DSFR UX/UI.
There are actually several issues with the way the react-dsfr Card component deal with badges and tags:

• There should be only one badge element in the media area : one single badge or one single tag (after trials, a tag is not possible here)
• There should be a tags group xor a badges group in the content (.fr-card__start) area
• No mixing of tags and badges is permitted in the content area
• If there is a badge in the media area, only a tags group is permitted in the content. And if there is a tag in the media area, the element in the content has to be a badges group. (no tags in both places or badges in both places)

[garronej]

Hi @slafayIGN, thank you for bringing those rules to my attention.

If I understand correctly, you're saying that the current Card component allows usages that don't adhere to the official DSFR guidelines. Is that correct?
Are you suggesting that we should strengthen the Props type definition so that TypeScript will throw an error if all the rules aren't followed?

Should the component be completely overhauled?
Would anyone be willing to take this on? It seems straightforward, as there's no logic involved.