feat(DsfrCard): permet d'ajouter des attributs au lien

Author: laruiss

src/components/DsfrCard/DsfrCard.types.ts

@@ -12,6 +12,7 @@ export type DsfrCardProps = {
   imgSrc?: string
   link?: string | RouteLocationRaw
   title: string
+  titleLinkAttrs: Record<string, unknown>
   description: string
   size?: 'md' | 'medium' | 'large' | 'lg' | 'sm' | 'small' | undefined
   detail?: string

src/components/DsfrCard/DsfrCard.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import type { RouterLink } from 'vue-router'
 
 import DsfrBadge from '../DsfrBadge/DsfrBadge.vue'
 import DsfrButtonGroup from '../DsfrButton/DsfrButtonGroup.vue'
@@ -11,6 +10,7 @@ import type { DsfrCardProps } from './DsfrCard.types'
 export type { DsfrCardProps }
 
 const props = withDefaults(defineProps<DsfrCardProps>(), {
+  titleLinkAttrs: () => ({}),
   imgSrc: undefined,
   link: undefined,
   detail: undefined,
@@ -76,13 +76,15 @@ defineExpose({ goToTargetLink })
             :href="(link as string)"
             data-testid="card-link"
             class="fr-card__link"
+            v-bind="titleLinkAttrs"
           >{{ title }}</a>
           <RouterLink
             v-else-if="link"
             :to="link"
             class="fr-card__link"
             data-testid="card-link"
-            @click="$event.stopPropagation()"
+            v-bind="titleLinkAttrs"
+            @click.stop=""
           >
             {{ title }}
           </RouterLink>

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

@@ -37,6 +37,11 @@ const actions = [
 <template>
   <div class="fr-container fr-my-2v">
     <DsfrCard
+      link="https://www.data.gouv.fr/fr/datasets/r/0c3f1b2e-4a5d-4a7b-8f9c-6d1e0f3a2b8c"
+      :title-link-attrs="{
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      }"
       :img-src="imgSrc"
       :description="description"
       :detail="detail"