docs: 📝 améliore la documentation de DsfrCallout

Author: JoelPagniez

src/components/DsfrCallout/DsfrCallout.stories.ts

@@ -30,6 +30,11 @@ const meta: Meta<typeof DsfrCallout> = {
       description:
         'Permet de passer l’icône désirée en chaîne de caractères (cf. remix-icon)',
     },
+    accent: {
+      control: 'text',
+      description:
+        'Permet de passer la couleur d‘accentuation',
+    },
     button: {
       control: 'object',
       description:
@@ -163,3 +168,40 @@ MiseEnAvantSansTitre.args = {
     'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol',
   titleTag: undefined,
 }
+
+export const MiseEnAvantAvecAccentuation = (args) => ({
+  components: {
+    DsfrCallout,
+    VIcon,
+  },
+
+  data () {
+    return {
+      ...args,
+      button: args.button && {
+        ...args.button,
+        onClick: args.onClick,
+      },
+    }
+  },
+
+  template: `
+    <DsfrCallout
+      :title
+      :content
+      :button
+      :icon
+      :title-tag
+      :accent
+    />
+  `,
+})
+MiseEnAvantAvecAccentuation.args = {
+  title: 'Titre de la mise en avant',
+  button: undefined,
+  icon: '',
+  content:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol',
+  titleTag: undefined,
+  accent: 'orange-terre-battue',
+}

src/components/DsfrCallout/docs-demo/DsfrCalloutDemo.vue

@@ -12,6 +12,11 @@ const icon = 'ri:notification-3-line'
 const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
 const titleTag = undefined
 
+const accent = 'orange-terre-battue'
+const accentTitle = 'Titre de la mise en avant accentué'
+const accentIcon = 'fr-icon-alarm-warning-line'
+const accentContent = 'Accentuation à partir des couleurs du Dsfr (ex orange-terre-battue)'
+
 const animateTitle = 'Titre de la mise en avant stylée'
 const animatedIcon: VIconProps = { name: 'bi:bell', animation: 'ring' }
 const animatedtitleTag = 'h4'
@@ -35,6 +40,14 @@ const getRandomAnimation = () => getRandomEl<(typeof possibleAnimations)[number]
     :icon="icon"
     :title-tag="titleTag"
   />
+  <DsfrCallout
+    :title="`${accentTitle} (${accentTitleTag ?? 'h3'})`"
+    :content="accentContent"
+    :button="button"
+    :icon="accentIcon"
+    :title-tag="titleTag"
+    :accent="accent"
+  />
   <DsfrCallout
     :title="`${animateTitle} (${animatedtitleTag ?? 'h3'})`"
     :button="button"