Citation - DsfrQuote

🌟 Introduction

Le composant DsfrQuote permet d’afficher une citation stylisée, accompagnée d’un auteur, d’une source, et éventuellement d’une image illustrative. Ce composant respecte les standards du Design System de l'État Français (DSFR) pour offrir une présentation élégante et accessible.

🏅 La documentation sur les liens d’évitement le DSFR

La story sur les liens d’évitement sur le storybook de VueDsfr

📐 Structure

Le composant affiche :

• Une citation (<blockquote>) avec un lien optionnel vers la source.
• Une légende (<figcaption>) contenant :
  • Le nom de l’auteur.
  • La source de la citation, accompagnée d’un lien ou de détails supplémentaires.
• Une image optionnelle, destinée à illustrer visuellement la citation.

🛠️ Props

Nom	Type	Défaut	Description
quote	string	undefined	Texte de la citation.
author	string	undefined	Nom de l’auteur de la citation.
details	{ label: string, url: string }[]	[]	Détails supplémentaires sous forme de liste (liens ou texte).
source	string	''	Nom de la source de la citation.
sourceUrl	string	''	URL de la source, utilisée pour l’attribut cite du bloc de citation.
quoteImage	string	''	URL de l’image illustrative associée à la citation.

📡 Événements

Aucun événement spécifique n'est émis par ce composant.

🧩 Slots

Aucun slot disponible pour ce composant.

📝 Exemples

Exemple de base

<DsfrQuote
  quote="L'accessibilité numérique est un droit fondamental."
  author="Tim Berners-Lee"
  source="W3C"
  sourceUrl="https://www.w3.org/"
  :details="[
    { label: 'Voir le site officiel', url: 'https://www.w3.org/' }
  ]"
  quoteImage="https://www.example.com/image.jpg"
/>

Exemple complet

Démo

Code de la démo

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

const quote = 'LA citation'
const author = 'Pierre-Louis EGAUD'
const details = [
  {
    url: 'https://www.wikipedia.fr',
    label: 'wikipedia',
  },
]
const source = 'Duckduckgo'
const sourceUrl = 'https://www.duckduckgo.com'
const quoteImage = 'https://loremflickr.com/g/150/150/cat?random=1'
</script>

<template>
  <DsfrQuote
    :quote="quote"
    :author="author"
    :details="details"
    :source="source"
    :source-url="sourceUrl"
    :quote-image="quoteImage"
  />
</template>

⚙️ Code source du composant

DsfrQuote.vue

<script lang="ts" setup>
import type { DsfrQuoteProps } from './DsfrQuote.types'

export type { DsfrQuoteProps }

withDefaults(defineProps<DsfrQuoteProps>(), {
  quote: undefined,
  author: undefined,
  details: () => [],
  source: '',
  sourceUrl: '',
  quoteImage: '',
})
</script>

<template>
  <figure class="fr-quote fr-quote--column">
    <blockquote
      v-if="source"
      :cite="sourceUrl"
    >
      <p>« {{ quote }} »</p>
    </blockquote>

    <figcaption>
      <p class="fr-quote__author">
        {{ author }}
      </p>

      <ul class="fr-quote__source">
        <li>
          <cite>{{ source }}</cite>
        </li>

        <li
          v-for="(detail, index) of details"
          :key="index"
        >
          <a
            v-if="typeof detail === 'object'"
            target="_blank"
            rel="noopener noreferrer"
            :href="detail.url"
          >
            {{ detail.label }}
          </a>
          <template v-else>
            {{ detail }}
          </template>
        </li>
      </ul>

      <div
        v-if="quoteImage"
        class="fr-quote__image"
      >
        <img
          :src="quoteImage"
          class="fr-responsive-img"
          alt=""
        >
        <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
      </div>
    </figcaption>
  </figure>
</template>

DsfrQuote.types.ts

export type DsfrQuoteProps = {
  quote?: string
  author?: string
  details: { label: string, url: string }[]
  source: string
  sourceUrl: string
  quoteImage: string
}