Skip to content

Commit e63e5e9

Browse files
authored
Merge pull request #913 from dnum-mi/feat/909
feat(DsfrCard): ✨ permet d’ajouter des badges dans le header
2 parents 4a2d7cd + 69551c5 commit e63e5e9

File tree

5 files changed

+48
-3
lines changed

5 files changed

+48
-3
lines changed

src/components/DsfrCard/DsfrCard.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ cf. DSFR : [Composant - Carte](https://www.systeme-de-design.gouv.fr/elements-d-
6161

6262
## 📝 Exemples
6363

64-
### 📝 Exemple avec tags sans actions
64+
### 📝 Exemple avec tags et badges dans l’en-tête sans actions
6565

6666
::: code-group
6767

src/components/DsfrCard/DsfrCard.spec.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,16 @@ describe('DsfrCard', () => {
3333
de contenu similaires. La carte n’est jamais présentée de manière isolée.`
3434
const imgSrc = 'https://loremflickr.com/300/200/cat'
3535
const altImg = 'Alternative text for image'
36+
const badges = [
37+
{
38+
label: 'Badge info',
39+
type: 'info',
40+
},
41+
{
42+
label: 'Badge success',
43+
type: 'success',
44+
},
45+
]
3646

3747
// When
3848

@@ -50,6 +60,7 @@ describe('DsfrCard', () => {
5060
description,
5161
imgSrc,
5262
link,
63+
badges,
5364
},
5465
})
5566

@@ -66,5 +77,6 @@ describe('DsfrCard', () => {
6677
expect(getByTestId('fr-card')).toHaveClass('fr-card')
6778
expect(getByTestId('card-img')).toHaveAttribute('src', imgSrc)
6879
expect(getByTestId('card-img')).toHaveAttribute('alt', altImg)
80+
expect(getByTestId('card-badges')).toHaveClass('fr-badges-group')
6981
})
7082
})

src/components/DsfrCard/DsfrCard.types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { RouteLocationRaw } from 'vue-router'
22

33
import type { DsfrButtonProps } from '../DsfrButton/DsfrButton.types'
4+
import type { DsfrBadgeProps } from '../DsfrBadge/DsfrBadge.types'
45
import type { CustomizeIconType } from 'oh-vue-icons'
56

67
export type DsfrCardDetailProps = {
@@ -19,6 +20,7 @@ export type DsfrCardProps = {
1920
endDetailIcon?: DsfrCardDetailProps['icon']
2021
altImg?: string
2122
titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
23+
badges?: DsfrBadgeProps[]
2224
buttons?: DsfrButtonProps[]
2325
linksGroup?: {
2426
label: string

src/components/DsfrCard/DsfrCard.vue

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts" setup>
22
import { computed, ref } from 'vue'
33
import DsfrButtonGroup from '../DsfrButton/DsfrButtonGroup.vue'
4+
import DsfrBadge from '../DsfrBadge/DsfrBadge.vue'
45
import type { DsfrCardProps } from './DsfrCard.types'
56
import DsfrCardDetail from './DsfrCardDetail.vue'
67
import type { RouterLink } from 'vue-router'
@@ -17,6 +18,7 @@ const props = withDefaults(defineProps<DsfrCardProps>(), {
1718
altImg: '',
1819
buttons: () => [],
1920
linksGroup: () => [],
21+
badges: () => [],
2022
titleTag: 'h3',
2123
size: 'md',
2224
imgRatio: 'md',
@@ -155,10 +157,13 @@ defineExpose({ goToTargetLink })
155157
</div>
156158
</div>
157159
<div
158-
v-if="imgSrc"
160+
v-if="imgSrc || badges.length"
159161
class="fr-card__header"
160162
>
161-
<div class="fr-card__img">
163+
<div
164+
v-if="imgSrc"
165+
class="fr-card__img"
166+
>
162167
<img
163168
:src="imgSrc"
164169
class="fr-responsive-img"
@@ -169,6 +174,18 @@ defineExpose({ goToTargetLink })
169174
et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous
170175
estimez qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte -->
171176
</div>
177+
<ul
178+
v-if="badges.length"
179+
class="fr-badges-group"
180+
data-testid="card-badges"
181+
>
182+
<li
183+
v-for="(badge, index) in badges"
184+
:key="index"
185+
>
186+
<DsfrBadge v-bind="badge" />
187+
</li>
188+
</ul>
172189
</div>
173190
</div>
174191
</template>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { getCurrentInstance } from 'vue'
55
import DsfrCard from '../DsfrCard.vue'
66
import DsfrTags from '../../DsfrTag/DsfrTags.vue'
77
8+
import type { DsfrBadgeProps } from '../../DsfrBadge/DsfrBadge.types'
9+
810
const app = getCurrentInstance()
911
app?.appContext.app.component('VICon', VICon)
1012
@@ -31,6 +33,17 @@ const exampleTags = [
3133
label: 'Tag4',
3234
},
3335
]
36+
37+
const exampleBadges = [
38+
{
39+
label: 'Badge info',
40+
type: 'info',
41+
},
42+
{
43+
label: 'Badge success',
44+
type: 'success',
45+
},
46+
] as DsfrBadgeProps[]
3447
</script>
3548

3649
<template>
@@ -44,6 +57,7 @@ const exampleTags = [
4457
:end-detail="endDetail"
4558
:end-detail-icon="endDetailIcon"
4659
:alt-img="altImg"
60+
:badges="exampleBadges"
4761
title="Titre de la carte"
4862
size="large"
4963
ratio-img="large"

0 commit comments

Comments
 (0)