Merge pull request #944 from dnum-mi/develop

Develop

Author: laruiss

.vitepress/config.ts

@@ -199,6 +199,10 @@ const composants = [
     text: 'DsfrHeaderMenuLinks',
     link: '/composants/DsfrHeaderMenuLinks.md',
   },
+  {
+    text: 'DsfrHighlight',
+    link: '/composants/DsfrHighlight.md',
+  },
   {
     text: 'DsfrInput',
     link: '/composants/DsfrInput.md',

src/components/DsfrHighlight/DsfrHighlight.md

@@ -0,0 +1,59 @@
+# 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](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tag)
+
+<VIcon name="vi-file-type-storybook" /> La story sur le tag sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrtags--docs)
+
+## 📐 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
+
+::: code-group
+
+<Story data-title="Démo" min-h="500px">
+  <DsfrHighlightDemo />
+</Story>
+
+:::
+
+## ⚙️ Code source du composant
+
+::: code-group
+
+<<< ./DsfrHighlight.vue
+<<< ./DsfrHighlight.types.ts
+
+:::
+
+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.
+
+<script setup>
+import DsfrHighlightDemo from './docs-demo/DsfrHighlightDemo.vue'
+</script>

src/components/DsfrHighlight/DsfrHighlight.stories.ts

@@ -12,6 +12,10 @@ export default {
       control: 'text',
       description: 'Texte de la mise en avant',
     },
+    color: {
+      control: 'text',
+      description: 'Couleur de la bordure (doit être une couleur du DSFR comme `"green-emeraude"` ou `"purple-glycine"`)',
+    },
     small: {
       control: 'boolean',
       description: 'Permet d’afficher le texte en petit',
@@ -37,13 +41,15 @@ export const MiseEnExergue = (args) => ({
       :text="text"
       :small="small"
       :large="large"
+      :color="color"
     />
   `,
 })
 MiseEnExergue.args = {
   small: false,
   large: false,
   text: 'Texte original de la mise en exergue',
+  color: undefined,
 }
 MiseEnExergue.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
@@ -65,6 +71,7 @@ export const MiseEnExergueAvecSlot = (args) => ({
       :text="text"
       :small="small"
       :large="large"
+      :color="color"
     >
       <template v-if="!text">{{ slotText }}</template>
     </DsfrHighlight>
@@ -74,6 +81,7 @@ MiseEnExergueAvecSlot.args = {
   small: false,
   large: false,
   text: '',
+  color: 'pink-macaron',
   slotText: 'Le fameux slot mis en exergue',
 }
 MiseEnExergueAvecSlot.play = async ({ canvasElement }) => {

src/components/DsfrHighlight/DsfrHighlight.types.ts

@@ -2,4 +2,5 @@ export type DsfrHighlightProps = {
   text?: string
   small?: boolean
   large?: boolean
+  color?: string // TODO: faire une liste des couleurs permises
 }

src/components/DsfrHighlight/DsfrHighlight.vue

@@ -9,7 +9,10 @@ withDefaults(defineProps<DsfrHighlightProps>(), {
 </script>
 
 <template>
-  <div class="fr-highlight">
+  <div
+    class="fr-highlight"
+    :class="{ [`fr-highlight--${color}`]: color }"
+  >
     <p
       :class="{
         'fr-text--lg': large && !small,

src/components/DsfrHighlight/docs-demo/DsfrHighlightDemo.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import DsfrInput from '@/components/DsfrInput/DsfrInput.vue'
+
+import { ref } from 'vue'
+import DsfrHighlight from '../DsfrHighlight.vue'
+
+const color = ref('green-emeraude')
+</script>
+
+<template>
+  <div>
+    <DsfrHighlight
+      text="Le texte mis en exergue"
+    />
+    <DsfrHighlight
+      small
+      text="Le texte mis en exergue en petit"
+    />
+    <DsfrHighlight
+      large
+      text="Le texte mis en exergue en grand"
+    />
+    <DsfrHighlight
+      text="Le texte mis en exergue green-emeraude"
+      :color="color"
+    />
+    <DsfrInput
+      v-model="color"
+      type="text"
+      label="Couleur à mettre à la mise en exergue"
+      label-visible
+      placeholder="purple-glycine"
+    />
+  </div>
+</template>