docs: 📝 ajoute info importantes pour OhVueIcon et DSFR

- ajoute l’addon storybook pour l’accessibilité

Author: laruiss

.storybook/main.ts

@@ -1,25 +1,18 @@
-import type { StorybookConfig } from "@storybook/vue3-vite";
+import type { StorybookConfig } from '@storybook/vue3-vite';
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-themes",
-    "@storybook/addon-styling",
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        }
-      }
-    },
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-themes',
+    '@storybook/addon-a11y',
+    '@storybook/addon-styling',
   ],
   staticsDir: ['../public'],
   framework: {
-    name: "@storybook/vue3-vite",
+    name: '@storybook/vue3-vite',
     options: {},
   },
   docs: {

package-lock.json

@@ -78,6 +78,7 @@
     "@cypress/vite-dev-server": "^5.0.6",
     "@cypress/vue": "^6.0.0",
     "@rushstack/eslint-patch": "^1.3.3",
+    "@storybook/addon-a11y": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",
     "@storybook/addon-links": "^7.5.3",

package.json

@@ -256,25 +256,24 @@ export const AccordeonAvecCheckbox = (args) => ({
   },
 
   template: `
-    <dsfr-accordions-group>
+    <DsfrAccordionsGroup>
       <li
         v-for="(accordion, name) in accordions"
         :id="\`accordion_${name}\`"
         :key="name"
       >
-        <dsfr-accordion
+        <DsfrAccordion
           :id="name"
           :title="name"
           :expanded-id="expandedId"
           @expand="id => expandedId = id"
         >
-          <dsfr-checkbox-set
+          <DsfrCheckboxSet
             :options="accordion.options"
-            small
           />
-        </dsfr-accordion>
+        </DsfrAccordion>
       </li>
-    </dsfr-accordions-group>
+    </DsfrAccordionsGroup>
   `,
 })
 AccordeonAvecCheckbox.args = {

src/components/DsfrAccordion/DsfrAccordion.stories.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs'
 
 <Meta title="Docs/2. Guide d’utilisation" />
 
@@ -39,22 +39,22 @@ Et suivez le guide !
 
 #### Utiliser la bibliothèque en tant que plugin
 
-| Notes :              |
-|:---------------------------|
-| Pour utiliser cette bibliothèque, il vous faudra **[Vue 3](https://v3.vuejs.org/)** (et **[Vue-Router 4](https://next.router.vuejs.org/)**). Par conséquent, si vous utilisez Nuxt, il vous faut **[Nuxt 3](https://v3.nuxtjs.org/)** (plus de détails plus loin). |
-| Il est fortement conseillé d’utiliser **[Vite](https://vitejs.dev)** plutôt que Vue-CLI. |
+<div class="fr-alert fr-alert--sm fr-alert--info"><p style={{margin: 0}}><strong>Note :</strong> Pour utiliser cette bibliothèque, il vous faudra **[Vue 3](https://v3.vuejs.org/)** (et **[Vue-Router 4](https://next.router.vuejs.org/)**). Par conséquent, si vous utilisez Nuxt, il vous faut **[Nuxt 3](https://v3.nuxtjs.org/)** (plus de détails plus loin).</p></div>
 
-#### Installer la bibliothèque en tant que dépendance du projet
+#### Installer les bibliothèques en tant que dépendances du projet
 
 Afin d'installer la bibliothèque, taper cette commande dans votre console au sein du répertoire du projet :
 
 ```shell
-npm install @gouvminint/vue-dsfr
+npm install @gouvfr/dsfr @gouvminint/vue-dsfr
 ```
 
-#### Ajouter le plugin
+<div class="fr-alert fr-alert--sm fr-alert--info"  style={{'margin-bottom': '1rem'}}><p style={{margin: 0}}><strong>Note :</strong> La bibliothèque VueDsfr utilise le CSS de `@gouvfr/dsfr`, c’est pourquoi il est nécessaire de l’installer.</p></div>
 
-##### Dans une application Vite (recommandé) ou Vue-CLI
+
+##### Ajouter le plugin
+
+###### Dans une application Vite
 
 À partir d'un fichier `main.js` simple comme celui-ci :
 
@@ -82,7 +82,7 @@ const app = createApp(App)
   .mount('#app')
 ```
 
-##### Dans nuxt 3
+###### Dans nuxt 3
 
 La bibliothèque VueDsfr fournit bien plusieurs build (esm et umd entre autres) et Nuxt3 sait lequel choisir.
 
@@ -131,6 +131,7 @@ import {
   DsfrCard,
 } from '@gouvminint/vue-dsfr'                                // Imports nommés de la bibliothèque
 
+import { OhVueIcon } from 'oh-vue-icons'                     // Import de OhVueIcon, dont dépendent certains composants de VueDsfr
 import '@gouvfr/dsfr/dist/dsfr.min.css'                      // Import des styles du DSFR
 import '@gouvminint/vue-dsfr/styles'                         // Import des styles propres à la bibliothèque VueDSFR
 
@@ -139,6 +140,7 @@ const app = createApp(App)
   .component('DsfrButton', DsfrButton)                       // Enregistrement global du composant DsfrButton
   .component('DsfrBreadcrumb', DsfrBreadcrumb)               // Enregistrement global du composant DsfrBreadcrumb
   .component('DsfrCard', DsfrCard)                           // Enregistrement global du composant DsfrCard
+  .component('VIcon', OhVueIcon)                             // Enregistrement global du composant VIcon, dont dépendent certains composants de VueDsfr
   .mount('#app')
 ```