Merge pull request #913 from dnum-mi/feat/909

feat(DsfrCard): ✨ permet d’ajouter des badges dans le header

Author: laruiss

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
 

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')
   })
 })

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

src/components/DsfrCard/DsfrCard.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import DsfrButtonGroup from '../DsfrButton/DsfrButtonGroup.vue'
+import DsfrBadge from '../DsfrBadge/DsfrBadge.vue'
 import type { DsfrCardProps } from './DsfrCard.types'
 import DsfrCardDetail from './DsfrCardDetail.vue'
 import type { RouterLink } from 'vue-router'
@@ -17,6 +18,7 @@ const props = withDefaults(defineProps<DsfrCardProps>(), {
   altImg: '',
   buttons: () => [],
   linksGroup: () => [],
+  badges: () => [],
   titleTag: 'h3',
   size: 'md',
   imgRatio: 'md',
@@ -155,10 +157,13 @@ defineExpose({ goToTargetLink })
       </div>
     </div>
     <div
-      v-if="imgSrc"
+      v-if="imgSrc || badges.length"
       class="fr-card__header"
     >
-      <div class="fr-card__img">
+      <div
+        v-if="imgSrc"
+        class="fr-card__img"
+      >
         <img
           :src="imgSrc"
           class="fr-responsive-img"
@@ -169,6 +174,18 @@ defineExpose({ goToTargetLink })
           et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous
           estimez qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte -->
       </div>
+      <ul
+        v-if="badges.length"
+        class="fr-badges-group"
+        data-testid="card-badges"
+      >
+        <li
+          v-for="(badge, index) in badges"
+          :key="index"
+        >
+          <DsfrBadge v-bind="badge" />
+        </li>
+      </ul>
     </div>
   </div>
 </template>

src/components/DsfrCard/docs-demo/DsfrCardDemo.vue

@@ -5,6 +5,8 @@ import { getCurrentInstance } from 'vue'
 import DsfrCard from '../DsfrCard.vue'
 import DsfrTags from '../../DsfrTag/DsfrTags.vue'
 
+import type { DsfrBadgeProps } from '../../DsfrBadge/DsfrBadge.types'
+
 const app = getCurrentInstance()
 app?.appContext.app.component('VICon', VICon)
 
@@ -31,6 +33,17 @@ const exampleTags = [
     label: 'Tag4',
   },
 ]
+
+const exampleBadges = [
+  {
+    label: 'Badge info',
+    type: 'info',
+  },
+  {
+    label: 'Badge success',
+    type: 'success',
+  },
+] as DsfrBadgeProps[]
 </script>
 
 <template>
@@ -44,6 +57,7 @@ const exampleTags = [
       :end-detail="endDetail"
       :end-detail-icon="endDetailIcon"
       :alt-img="altImg"
+      :badges="exampleBadges"
       title="Titre de la carte"
       size="large"
       ratio-img="large"