Gestionnaire de consentement - DsfrConsent

🌟 Introduction

Le gestionnaire de consentement permet à l'utilisateur de définir ses préférences sur l'utilisation de ses données personnelles, notamment le dépôt de cookies non fonctionnels dans son navigateur.

🏅 La documentation du gestionnaire de consentement sur le DSFR

La story du gestionnaire de consentement sur le storybook de VueDsfr

📐 Structure

Le gestionnaire de consentement est constitué des éléments suivants :

• une description, le composant en propose une générique et le slot par défaut permet d'en personnaliser une et de contenir tout type d'élément,
• un lien (prop url, de type string), correspondant au chemin menant aux "Données personnelles et cookies" de votre site ou application.

🛠️ Props

nom	type	défaut	obligatoire
url	string	''

📡 Évenements

DsfrConsent dispose de trois boutons qui déclenchent chacun un évènement spécifique au clic permettant à l'utilisateur de l'attraper afin de déclencher une fonction correspondante.

nom	donnée (payload)	détail de la donnée
'accept-all'
'refuse-all'
'customize'

🧩 Slots

DsfrConsent possède un slot par défaut pour laisser la possibilité à l'utilisateur d'ajouter une description personnalisée.

<template>
  <DsfrConsent>
    <p>
      Nous avons recours à plusieurs cookies afin d'améliorer votre
      expérience sur cette application. Vos données vous appartiennent
      et ce bandeau vous permet de sélectionner les cookies que vous
      souhaitez activer. Pour plus d'informations, consultez notre page
      <a :href="url">Données personnelles et cookies</a>.
    </p>
  </DsfrConsent>
</template>

Cf. la documentation Vue pour plus de détails.

📝 Exemple complet

Démo

Code de la démo

<script lang="ts" setup>
import DsfrConsent from '../DsfrConsent.vue'

const AcceptAllCookies = () => {}
const RefuseAllCookies = () => {}
const CustomizeCookies = () => {}
</script>

<template>
  <DsfrConsent
    @accept-all="AcceptAllCookies()"
    @refuse-all="RefuseAllCookies()"
    @customize="CustomizeCookies()"
  >
    <p>
      Nous avons recours à plusieurs cookies afin d'améliorer votre
      expérience sur cette application. Vos données vous appartiennent
      et ce bandeau vous permet de sélectionner les cookies que vous
      souhaitez activer. Pour plus d'informations, consultez notre page
      <a href="/donnees">Données personnelles et cookies</a>.
    </p>
  </DsfrConsent>
</template>

⚙️ Code source du composant

DsfrConsent.vue

<script lang="ts" setup>
import { computed } from 'vue'

import type { DsfrConsentProps } from './DsfrConsent.types'

export type { DsfrConsentProps }

const props = withDefaults(defineProps<DsfrConsentProps>(), {
  url: '',
})

defineEmits<{
  (e: 'acceptAll'): void
  (e: 'refuseAll'): void
  (e: 'customize'): void
}>()

const isExternalLink = computed(() => typeof props.url === 'string' && props.url.startsWith('http'))
const is = computed(() => props.url ? (isExternalLink.value ? 'a' : 'RouterLink') : 'a')
const linkProps = computed(() => ({ [isExternalLink.value ? 'href' : 'to']: props.url }))
</script>

<template>
  <div
    class="fr-consent-banner__content"
  >
    <p class="fr-text--sm">
      <!-- @slot Slot par défaut pour la description -->
      <slot>
        Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les services disponibles sur ce site.
        Pour en savoir plus, visitez la page
        <component
          :is="is"
          v-bind="linkProps"
          data-testid="link"
        >
          Données personnelles et cookies
        </component>.
        Vous pouvez, à tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.
      </slot>
    </p>
  </div>
  <ul class="fr-consent-banner__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">
    <li>
      <button
        class="fr-btn"
        title="Autoriser tous les cookies"
        @click.stop="$emit('acceptAll')"
      >
        Tout accepter
      </button>
    </li>

    <li>
      <button
        class="fr-btn"
        title="Refuser tous les cookies"
        @click.stop="$emit('refuseAll')"
      >
        Tout refuser
      </button>
    </li>
    <li>
      <button
        class="fr-btn fr-btn--secondary"
        data-fr-opened="false"
        aria-controls="fr-consent-modal"
        title="Personnaliser les cookies"
        @click.stop="$emit('customize')"
      >
        Personnaliser
      </button>
    </li>
  </ul>
</template>

DsfrConsent.types.ts

export type DsfrConsentProps = { url?: string }