diff --git a/src/components/DsfrCard/DsfrCard.md b/src/components/DsfrCard/DsfrCard.md index cbf330ed..f0dd1901 100644 --- a/src/components/DsfrCard/DsfrCard.md +++ b/src/components/DsfrCard/DsfrCard.md @@ -61,7 +61,7 @@ cf. DSFR : [Composant - Carte](https://www.systeme-de-design.gouv.fr/elements-d- ## 📝 Exemples -### 📝 Exemple avec tags sans actions +### 📝 Exemple avec tags et badges dans l’en-tĂȘte sans actions ::: code-group diff --git a/src/components/DsfrCard/DsfrCard.spec.ts b/src/components/DsfrCard/DsfrCard.spec.ts index edcd3172..1421edb3 100644 --- a/src/components/DsfrCard/DsfrCard.spec.ts +++ b/src/components/DsfrCard/DsfrCard.spec.ts @@ -33,6 +33,16 @@ describe('DsfrCard', () => { de contenu similaires. La carte n’est jamais prĂ©sentĂ©e de maniĂšre isolĂ©e.` const imgSrc = 'https://loremflickr.com/300/200/cat' const altImg = 'Alternative text for image' + const badges = [ + { + label: 'Badge info', + type: 'info', + }, + { + label: 'Badge success', + type: 'success', + }, + ] // When @@ -50,6 +60,7 @@ describe('DsfrCard', () => { description, imgSrc, link, + badges, }, }) @@ -66,5 +77,6 @@ describe('DsfrCard', () => { expect(getByTestId('fr-card')).toHaveClass('fr-card') expect(getByTestId('card-img')).toHaveAttribute('src', imgSrc) expect(getByTestId('card-img')).toHaveAttribute('alt', altImg) + expect(getByTestId('card-badges')).toHaveClass('fr-badges-group') }) }) diff --git a/src/components/DsfrCard/DsfrCard.types.ts b/src/components/DsfrCard/DsfrCard.types.ts index 218ad195..c2fdd271 100644 --- a/src/components/DsfrCard/DsfrCard.types.ts +++ b/src/components/DsfrCard/DsfrCard.types.ts @@ -1,6 +1,7 @@ import type { RouteLocationRaw } from 'vue-router' import type { DsfrButtonProps } from '../DsfrButton/DsfrButton.types' +import type { DsfrBadgeProps } from '../DsfrBadge/DsfrBadge.types' import type { CustomizeIconType } from 'oh-vue-icons' export type DsfrCardDetailProps = { @@ -19,6 +20,7 @@ export type DsfrCardProps = { endDetailIcon?: DsfrCardDetailProps['icon'] altImg?: string titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' + badges?: DsfrBadgeProps[] buttons?: DsfrButtonProps[] linksGroup?: { label: string diff --git a/src/components/DsfrCard/DsfrCard.vue b/src/components/DsfrCard/DsfrCard.vue index 1e058a4a..553cb9f2 100644 --- a/src/components/DsfrCard/DsfrCard.vue +++ b/src/components/DsfrCard/DsfrCard.vue @@ -1,6 +1,7 @@