feat: ✨ Mettre à jour DsfrNotice avec l'udpate du Dsfr en 1.12

Author: iNeoO

src/components/DsfrNotice/DsfrNotice.md

@@ -14,22 +14,39 @@ Il est affiché sur l’ensemble des pages en desktop et en mobile. Il affiche u
 
 La notice est composée des éléments suivants :
 
-- un titre (prop `title`, de type `string`) :
+- Un titre (prop `title`, de type `string`) :
+  - Optionnel avec une valeur par défault `''`
+- Une description (prop `desc`, de type `string`) :
   - optionnel avec une valeur par défault `''`
+- un pictogramme et une couleur déterminés par la prop `type` qui peut valoir une des chaînes suivantes :
+  - `'info'` (valeur par défaut si la prop `type` est absente)
+  - `'warning'`
+  - `'alert'`
+  - `'weather-orange'`
+  - `'weather-red'`
+  - `'weather-purple'`
+  - `'witness'`
+  - `'kidnapping'`
+  - `'attack'`
+  - `'cyberattack'`
 - Une icône d'information
-- une croix de fermeture si la prop `closeable` est à `true`
+- Une croix de fermeture si la prop `closeable` est à `true`
 
 Slot(s) disponible(s):
 
-- Le slot par défaut permet d'enrichir le contenu du paragraphe représentant le titre de la notice (tag `p` avec la classe `fr-notice__title`).
+- Le slot par `défaut` permet d'enrichir le contenu du paragraphe représentant le titre de la notice (tag `p` avec la classe `fr-notice__title`).
+  - Ceci permet par exemple d'avoir un titre contenant un lien au fil du texte (tag `a`).
+- Le slot par `desc` permet d'enrichir le contenu du paragraphe représentant le titre de la notice (tag `p` avec la classe `fr-notice__desc`).
   - Ceci permet par exemple d'avoir un titre contenant un lien au fil du texte (tag `a`).
 
 ## 🛠️ Props
 
-|  nom                   |   type      |  défaut         | obligatoire |
-| ----------------------- | ---------   | ---------------- | -------- |
-| `title`                 | *`string`*  |      `''`        |  |
-| `closeable`             | *`boolean`* | `false`          | |
+|  nom                   |   type                                   |  défaut         | obligatoire |
+| ----------------------- | --------------------------------------  | ---------------- | -------- |
+| `title`                 | *`string`*                              |      `''`        |  |
+| `desc`                  | *`string`*                              |      `''`        |  |
+| `type`                  | *`'info' \| 'warning' \| 'alert'`...*   |     `'info'`     |  |
+| `closeable`             | *`boolean`*                             |     `false       |  |
 
 ## 📡 Évenements
 
@@ -46,6 +63,7 @@ Slot(s) disponible(s):
 | nom         | contenu par défaut |
 |-------------|---------|
 | `'default'` | *aucun* |
+| `'desc'`    | *aucun* |
 
 ## 📝 Toutes les variantes 🌈 de Notice
 

src/components/DsfrNotice/DsfrNotice.spec.ts

@@ -15,7 +15,8 @@ describe('DsfrNotice', () => {
       },
     })
 
-    getByText(title)
+    const titleEl = getByText(title)
+    expect(titleEl).toHaveClass('fr-notice__title')
     const closeButton = getByRole('button')
     await fireEvent.click(closeButton)
 
@@ -26,17 +27,22 @@ describe('DsfrNotice', () => {
   it('should render a notice', async () => {
     // Given
     const title = 'Titre de la notice'
+    const desc = 'Description de la notice'
     const closeable = false
 
     // When
     const { getByText, getByRole } = render(DsfrNotice, {
       props: {
         closeable,
         title,
+        desc,
       },
     })
 
-    getByText(title)
+    const titleEl = getByText(title)
+    expect(titleEl).toHaveClass('fr-notice__title')
+    const descEl = getByText(desc)
+    expect(descEl).toHaveClass('fr-notice__desc')
     expect(() => getByRole('button')).toThrow()
   })
 })

src/components/DsfrNotice/DsfrNotice.stories.ts

@@ -13,11 +13,19 @@ export default {
       control: 'text',
       description: '**Titre** du bandeau d’information importante',
     },
+    desc: {
+      control: 'text',
+      description: '**Titre** du bandeau d’information importante',
+    },
     closeable: {
       control: 'boolean',
       description:
         'Ajoute la possibilité de présenter un bouton en forme de croix qui émet l’événement `"close"`',
     },
+    type: {
+      control: 'text',
+      description: '**type** du bandeau d’information',
+    },
     onClose: {
       action: fn(),
     },
@@ -37,7 +45,9 @@ export const BandeauDAlerte = (args) => ({
     <DsfrNotice
       v-if="!closed"
       :title="title"
+      :desc="desc"
       :closeable="closeable"
+      :type="type"
       @close="close"
     />
   `,
@@ -53,11 +63,29 @@ export const BandeauDAlerte = (args) => ({
 })
 BandeauDAlerte.args = {
   title: 'Titre du bandeau d’information importante',
+  desc: '',
+  type: 'info',
+  closeable: false,
+}
+export const BandeauDAlerteWarning = BandeauDAlerte.bind({})
+BandeauDAlerteWarning.args = {
+  title: 'Titre du bandeau d’information importante',
+  type: 'warning',
+  closeable: false,
+}
+
+export const BandeauDAlerteAvecDescription = BandeauDAlerte.bind({})
+BandeauDAlerteAvecDescription.args = {
+  title: 'Titre du bandeau d’information importante fermable',
+  desc: 'Texte de description plutot long lorem ipsum sit consectetur adipiscing elit.',
+  type: 'info',
   closeable: false,
 }
 
 export const BandeauDAlerteFermable = BandeauDAlerte.bind({})
 BandeauDAlerteFermable.args = {
   title: 'Titre du bandeau d’information importante fermable',
+  desc: 'Texte de description plutot long lorem ipsum sit consectetur adipiscing elit.',
+  type: 'info',
   closeable: true,
 }

src/components/DsfrNotice/DsfrNotice.types.ts

@@ -1,4 +1,6 @@
 export type DsfrNoticeProps = {
   title?: string
+  desc?: string
   closeable?: boolean
+  type?: 'info' | 'warning' | 'alert' | 'weather-orange' | 'weather-red' | 'weather-purple' | 'witness' | 'kidnapping' | 'attack' | 'cyberattack'
 }

src/components/DsfrNotice/DsfrNotice.vue

@@ -5,19 +5,30 @@ export type { DsfrNoticeProps }
 
 withDefaults(defineProps<DsfrNoticeProps>(), {
   title: '',
+  desc: '',
+  type: 'info',
 })
 
 defineEmits<{ (event: 'close'): void }>()
 </script>
 
 <template>
-  <div class="fr-notice  fr-notice--info">
+  <div
+    class="fr-notice"
+    :class="`fr-notice--${type}`">
     <div class="fr-container">
       <div class="fr-notice__body">
-        <p class="fr-notice__title">
-          <slot>
-            {{ title }}
-          </slot>
+        <p>
+          <span class="fr-notice__title">
+            <slot>
+              {{ title }}
+            </slot>
+          </span>
+          <span class="fr-notice__desc">
+            <slot name="desc">
+              {{ desc }}
+            </slot>
+          </span>
         </p>
         <button
           v-if="closeable"

src/components/DsfrNotice/docs-demo/DsfrNoticeExample.vue

@@ -12,7 +12,9 @@ const close = () => {
 
 <template>
   <div class="demo-container-col">
-    <DsfrNotice title="Notice simple" />
+    <DsfrNotice
+      title="Notice simple"
+    />
 
     <DsfrNotice
       v-if="!isClosed"
@@ -28,5 +30,25 @@ const close = () => {
         lien externe
       </a>
     </DsfrNotice>
+
+    <DsfrNotice
+      title="Notice simple"
+      desc="Texte de description plutot long lorem ipsum sit consectetur adipiscing elit."
+    />
+
+    <DsfrNotice
+      title="Notice simple"
+      type="warning"
+    />
+
+    <DsfrNotice
+      title="Notice simple"
+      type="alert"
+    />
+
+    <DsfrNotice
+      title="Notice simple"
+      type="weather-orange"
+    />
   </div>
 </template>