Merge pull request #1128 from dnum-mi/feat/#1126-dsfr-collout-accent

Ajoute l'accentuation au DsfrCallout

Author: laruiss

src/components/DsfrCallout/DsfrCallout.spec.ts

@@ -1,17 +1,19 @@
 import { render } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
 
 import VIcon from '../VIcon/VIcon.vue'
 
-// import '@gouvfr/dsfr/dist/core/core.module.js'
-
 import DsfrCallout from './DsfrCallout.vue'
 
 describe('DsfrCallout', () => {
-  it('should display a callout without a button', () => {
+  it('should display a callout', () => {
     const title = 'Titre de la mise en avant'
     const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
+    const accent = 'orange-terre-battue'
+    const icon = 'fr-icon-alarm-warning-line'
+    const button = { label: 'label bouton' }
 
-    const { getByText } = render(DsfrCallout, {
+    const { getByText, container } = render(DsfrCallout, {
       global: {
         components: {
           VIcon,
@@ -20,13 +22,21 @@ describe('DsfrCallout', () => {
       props: {
         title,
         content,
+        accent,
+        icon,
+        button,
       },
     })
 
+    const calloutEl = container.querySelector('.fr-callout')
     const titleEl = getByText(title)
     const contentEl = getByText(content)
+    const buttonEl = container.querySelector('.fr-btn')
 
-    expect(titleEl).toHaveClass('fr-callout__title')
-    expect(contentEl).toHaveClass('fr-callout__text')
+    expect(calloutEl?.className).toContain(`fr-callout--${accent}`)
+    expect(calloutEl?.className).toContain(icon)
+    expect(titleEl.className).toContain('fr-callout__title')
+    expect(contentEl.className).toContain('fr-callout__text')
+    expect(buttonEl?.innerHTML).toContain(button.label)
   })
 })

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/DsfrCallout.types.ts

@@ -1,10 +1,39 @@
+import type { TitleTag } from '../../common-types'
 import type { DsfrButtonProps } from '../DsfrButton/DsfrButton.types'
 import type { VIconProps } from '../VIcon/VIcon.vue'
 
+/**
+ * Type union des accents de couleur DSFR utilisable dans DsfrCallout.
+ * Représente les noms des thèmes de couleur (avant "-main")
+ */
+export type DsfrColorAccent =
+  | 'blue-france'
+  | 'red-marianne'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'green-tilleul-verveine'
+  | 'green-bourgeon'
+  | 'green-emeraude'
+  | 'green-menthe'
+  | 'green-archipel'
+  | 'blue-ecume'
+  | 'blue-cumulus'
+  | 'purple-glycine'
+  | 'pink-macaron'
+  | 'pink-tuile'
+  | 'yellow-tournesol'
+  | 'yellow-moutarde'
+  | 'orange-terre-battue'
+  | 'brown-cafe-creme'
+  | 'brown-caramel'
+
 export type DsfrCalloutProps = {
   title?: string
   content?: string
-  titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  titleTag?: TitleTag
   button?: DsfrButtonProps
   icon?: string | VIconProps
+  accent?: DsfrColorAccent
 }

src/components/DsfrCallout/DsfrCallout.vue

@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<DsfrCalloutProps>(), {
   button: () => undefined,
   titleTag: 'h3',
   icon: undefined,
+  accent: undefined,
 })
 
 const dsfrIcon = computed(() => typeof props.icon === 'string' && props.icon.startsWith('fr-icon-'))
@@ -22,7 +23,7 @@ const iconProps = computed(() => dsfrIcon.value ? undefined : typeof props.icon
 <template>
   <div
     class="fr-callout"
-    :class="{ [String(icon)]: dsfrIcon }"
+    :class="{ [String(icon)]: dsfrIcon, [`fr-callout--${accent}`]: !!accent }"
   >
     <VIcon
       v-if="icon && iconProps"

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"