feat: ✨ Implémente le composant "Mise en avant" (Callout)

src/components/DsfrCallout/DsfrCallout.spec.js

@@ -0,0 +1,65 @@
+import { fireEvent, render } from '@testing-library/vue'
+
+import DsfrCallout from './DsfrCallout.vue'
+
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
+describe('DsfrCallout', () => {
+  it('should display a callout without a button', () => {
+    const title = 'Titre de la mise en avant'
+    const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
+
+    const { getByText } = render(DsfrCallout, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        title,
+        content,
+      },
+    })
+
+    const titleEl = getByText(title)
+    const contentEl = getByText(content)
+
+    expect(titleEl).toHaveClass('fr-callout__title')
+    expect(contentEl).toHaveClass('fr-callout__text')
+  })
+
+  it('should display a callout with button and icon', async () => {
+    const onClick = jest.fn()
+    const label = 'Label bouton'
+    const title = 'Titre de la mise en avant'
+    const icon = 'ri-information-line'
+    const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
+
+    const { container, getByText } = render(DsfrCallout, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        title,
+        content,
+        button: {
+          onClick,
+          label,
+        },
+        icon,
+      },
+    })
+
+    const titleEl = getByText(title)
+    const contentEl = getByText(content)
+    const buttonEl = container.querySelector('.fr-btn')
+
+    await fireEvent.click(buttonEl)
+
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(titleEl).toHaveClass('fr-callout__title')
+    expect(contentEl).toHaveClass('fr-callout__text')
+  })
+})

src/components/DsfrCallout/DsfrCallout.stories.js

@@ -0,0 +1,107 @@
+import OhVueIcon from 'oh-vue-icons/dist/v3/icon.es'
+
+import { RiInformationLine } from 'oh-vue-icons/icons'
+
+import DsfrCallout from './DsfrCallout'
+
+OhVueIcon.add(RiInformationLine)
+
+export default {
+  components: {
+    DsfrCallout,
+  },
+  title: 'Éléments/Mise en Avant - Callout',
+  argTypes: {
+    dark: {
+      control: 'boolean',
+      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
+    },
+    title: {
+      control: 'text',
+      description: 'Permet de passer le titre désiré en chaîne de caractères',
+    },
+    content: {
+      control: 'text',
+      description: 'Permet de passer le contenu désiré en chaîne de caractères',
+    },
+    icon: {
+      control: 'text',
+      description: 'Permet de passer l’icône désirée en chaîne de caractères (cf. remix-icon)',
+    },
+    onClick: {
+      action: 'Clicked',
+    },
+  },
+}
+
+export const MiseEnAvantSimple = (args) => ({
+  components: {
+    DsfrCallout,
+    VIcon: OhVueIcon,
+  },
+
+  data () {
+    return {
+      ...args,
+      button: args.button && {
+        ...args.button,
+        onClick: args.onClick,
+      },
+    }
+  },
+
+  template: `
+    <div :data-rf-theme="dark ? 'dark' : ''" style="background-color: var(--w); padding: 1rem;">
+      <DsfrCallout
+        :title="title"
+        :content="content"
+        :button="button"
+        :icon="icon"
+      />
+    </div>
+  `,
+})
+MiseEnAvantSimple.args = {
+  dark: false,
+  title: 'Titre de la mise en avant',
+  button: undefined,
+  icon: '',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol',
+}
+
+export const MiseEnAvant = (args) => ({
+  components: {
+    DsfrCallout,
+    VIcon: OhVueIcon,
+  },
+
+  data () {
+    return {
+      ...args,
+      button: args.button && {
+        ...args.button,
+        onClick: args.onClick,
+      },
+    }
+  },
+
+  template: `
+    <div :data-rf-theme="dark ? 'dark' : ''" style="background-color: var(--w); padding: 1rem;">
+      <DsfrCallout
+        :title="title"
+        :content="content"
+        :button="button"
+        :icon="icon"
+      />
+    </div>
+  `,
+})
+MiseEnAvant.args = {
+  dark: false,
+  title: 'Titre de la mise en avant',
+  button: {
+    label: 'Label bouton',
+  },
+  icon: 'ri-information-line',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol',
+}

src/components/DsfrCallout/DsfrCallout.vue

@@ -0,0 +1,70 @@
+<script>
+import DsfrButton from '../DsfrButton/DsfrButton.vue'
+
+export default {
+  name: 'DsfrCallout',
+
+  components: {
+    DsfrButton,
+  },
+
+  props: {
+    title: {
+      type: String,
+      default: 'Titre somptueusement mis en avant',
+    },
+    content: {
+      type: String,
+      default: 'Contenu admirablement mis en avant',
+    },
+    icon: {
+      type: String,
+      default: undefined,
+    },
+    button: {
+      type: Object,
+      default: () => undefined,
+      required: false,
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="fr-callout">
+    <div
+      class="fr-mt-n2w  fr-mb-2w  fr-ml-n4w"
+    >
+      <VIcon
+        v-if="icon"
+        :name="icon"
+        scale="1.25"
+        color="var(--g800)"
+      />
+    </div>
+
+    <p class="fr-callout__title">
+      {{ title }}
+    </p>
+
+    <p class="fr-callout__text">
+      {{ content }}
+    </p>
+
+    <DsfrButton
+      v-if="button"
+      v-bind="button"
+      @click="button.onClick"
+    />
+
+    <slot />
+  </div>
+</template>
+
+<style src="./callouts.css"></style>
+
+<style scoped>
+.fr-callout__text {
+  color: var(--g800);
+}
+</style>

src/components/DsfrCallout/callouts.css

@@ -0,0 +1,70 @@
+/*
+ * DSFR v1.1.0 | SPDX-License-Identifier: MIT | License-Filename: LICENCE.md | restricted use (see terms and conditions)
+ */
+@charset "UTF-8";
+
+/* ------------------------------------ *\
+  CALLOUTS
+\* ------------------------------------ */
+
+.fr-callout {
+  position: relative;
+  padding: 1.5rem;
+  /**
+   * Inclusion de l'icône (optionnel)
+   *//**
+   * Ajout de marge quand on inclut un bouton (optionnel)
+   */
+}
+
+.fr-callout[class^="fr-fi-"]::before, .fr-callout[class*=" fr-fi-"]::before {
+  display: block;
+  margin: -0.5rem 0 0.5rem;
+}
+
+.fr-callout__title {
+  font-weight: 700;
+  font-size: 1.375rem;
+  line-height: 1.75rem;
+  margin: 0 0 0.5rem;
+}
+
+.fr-callout__text {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  margin: 0;
+}
+
+.fr-callout .fr-btn {
+  margin-top: 1rem;
+}
+
+.fr-callout {
+  background-color: var(--g200);
+  --scheme-border: var(--bf500);
+  box-shadow: inset 0.25rem 0 0 0 var(--scheme-border);
+}
+
+.fr-callout__title {
+  color: var(--g800);
+}
+
+@media (min-width: 48em) {
+  .fr-callout {
+    padding: 2rem 3rem;
+  }
+
+  .fr-callout[class^="fr-fi-"]::before, .fr-callout[class*=" fr-fi-"]::before {
+    margin: -1rem 0 1rem -2rem;
+  }
+
+  .fr-callout__title {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .fr-callout__text {
+    font-size: 1.25rem;
+    line-height: 2rem;
+  }
+}

src/components/index.js

@@ -2,6 +2,7 @@ export { default as DsfrAlert } from './DsfrAlert/DsfrAlert.vue'
 export { default as DsfrBreadcrumb } from './DsfrBreadcrumb/DsfrBreadcrumb.vue'
 export { default as DsfrButton } from './DsfrButton/DsfrButton.vue'
 export { default as DsfrCard } from './DsfrCard/DsfrCard.vue'
+export { default as DsfrCallout } from './DsfrCallout/DsfrCallout.vue'
 export { default as DsfrCheckbox } from './DsfrCheckbox/DsfrCheckbox.vue'
 export { default as DsfrCheckboxSet } from './DsfrCheckbox/DsfrCheckboxSet.vue'
 export { default as DsfrHeader } from './DsfrHeader/DsfrHeader.vue'