Highlight - DsfrHighlight

🌟 Introduction

La mise en exergue permet à l’utilisateur de distinguer et repérer une information facilement.

Le composant DsfrHighlight est conçu pour mettre en exergue un texte ou un contenu particulier. Il permet d'afficher du texte avec des tailles personnalisables, en mettant l'accent sur l'importance du contenu. Ce composant est idéal pour attirer l'attention des utilisateurs sur des informations clés.

🏅 La documentation sur le tag sur le DSFR

La story sur le tag sur le storybook de VueDsfr

📐 Structure

• <DsfrHighlight> : Le composant principal.
  • Affiche un texte avec un style de mise en valeur.
  • Permet d'ajuster la taille du texte via les propriétés small et large.

🛠️ Props

Propriété	Type	Description	Valeur par défaut
text	string	Le texte à mettre en exergue.	undefined
small	boolean	Si vrai, affiche le texte en petite taille.	false
large	boolean	Si vrai, affiche le texte en grande taille.	false
color	string	Doit être une des valeurs de couleurs du DSFR (ex. : 'green-emeraude' ou 'brown-caramel')	false

📡 Événements

Ce composant ne déclenche pas d'événements spécifiques.

🧩 Slots

• default : Slot pour insérer du contenu personnalisé dans la mise en exergue.

📝 Exemples

Démo

⚙️ Code source du composant

DsfrHighlight.vue

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

export type { DsfrHighlightProps }

withDefaults(defineProps<DsfrHighlightProps>(), {
  text: undefined,
})
</script>

<template>
  <div
    class="fr-highlight"
    :class="{ [`fr-highlight--${color}`]: color }"
  >
    <p
      :class="{
        'fr-text--lg': large && !small,
        'fr-text--sm': small && !large,
      }"
    >
      {{ text }}
      <!-- @slot Slot par défaut pour le contenu de la mise en exergue -->
      <slot />
    </p>
  </div>
</template>

DsfrHighlight.types.ts

export type DsfrHighlightProps = {
  text?: string
  small?: boolean
  large?: boolean
  color?: string // TODO: faire une liste des couleurs permises
}

Le composant DsfrHighlight est simple et flexible, offrant des options de taille pour le texte tout en permettant de personnaliser le contenu grâce à un slot. Il applique des classes CSS conditionnelles pour ajuster la taille du texte ainsi que la couleur de la marge en fonction des propriétés fournies.