Merge pull request #1000 from dnum-mi/tech/improve-docs

docs: 📝 améliore documentation

Author: laruiss

.github/workflows/run-tests.yml

@@ -34,10 +34,11 @@ jobs:
         run: pnpm check-exports-ci
       - name: Test
         run: pnpm test
-      - name: Install Playwright dependencies
+      - name: Install Playwright with dependencies
         run: pnpx playwright install --with-deps
       - name: Install Playwright
         run: pnpx playwright install
+
       - name: Build Storybook
         run: pnpm build-storybook --quiet
       - name: Serve Storybook and run tests

src/components/DsfrCheckbox/DsfrCheckboxSet.vue

@@ -11,7 +11,7 @@ export type { DsfrCheckboxSetProps }
 
 <script lang="ts" setup>
 const props = withDefaults(defineProps<DsfrCheckboxSetProps>(), {
-  titleId: () => getRandomId('checkbox', 'group'),
+  titleId: () => getRandomId('checkbox', 'set'),
   errorMessage: '',
   validMessage: '',
   legend: '',

src/components/DsfrFileUpload/DsfrFileUpload.md

@@ -4,6 +4,10 @@
 
 Bienvenue dans la documentation du composant `DsfrFileUpload`. Ce composant est l'équivalent numérique d'une balade dans les ruelles pittoresques de Montmartre, mais pour télécharger vos fichiers. Que ce soit pour des photos de vacances ou des documents importants, `DsfrFileUpload` rend le processus simple et élégant.
 
+🏅 La documentation sur le pied de page sur le [DSFR](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/ajout-de-fichier)
+
+<VIcon name="vi-file-type-storybook" /> La story sur le pied de page sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/story/composants-dsfrfileupload--docs)
+
 ## 🛠️ Props
 
 | Nom            | Type        | Défaut                  | Obligatoire   | Description                                                    |

src/components/DsfrInput/DsfrInputGroup.vue

@@ -11,7 +11,7 @@ defineOptions({
 })
 
 withDefaults(defineProps<DsfrInputGroupProps>(), {
-  descriptionId: () => getRandomId('basic', 'input'),
+  descriptionId: () => getRandomId('input', 'group'),
   hint: '',
   label: '',
   labelClass: '',

src/components/DsfrLanguageSelector/DsfrLanguageSelector.md

@@ -1,3 +1,5 @@
+# Sélecteur de langue - Translate - `DsfrLanguageSelector`
+
 ## 🌟 Introduction
 
 Le sélecteur de langue permet à l’utilisateur de choisir la langue dans laquelle est affichée le contenu du site, si celui-ci est disponible en plusieurs langues.
@@ -24,7 +26,7 @@ Ce composant est utilisé en interne dans [DsfrHeader](/composants/DsfrHeader) (
 
 | Propriété          | Type                          | Description                                                   | Valeur par défaut         |
 |--------------------|-------------------------------|---------------------------------------------------------------|---------------------------|
-| `id`               | `string`                      | Identifiant unique pour les éléments de contrôle d'accessibilité. | `getRandomId('translate')` |
+| `id`               | `string`                      | Identifiant unique pour les éléments de contrôle d'accessibilité. | `getRandomId('language-selector')` |
 | `languages`        | [`DsfrLanguageSelectorElement[]`](/types#dsfrlanguageselector) | Liste des langues disponibles. Chaque langue est représentée par un objet contenant un `codeIso` et un `label`. | `[]`                      |
 | `currentLanguage`  | `string`                      | Code ISO de la langue actuellement sélectionnée.              | `'fr'`                    |
 

src/components/DsfrLanguageSelector/DsfrLanguageSelector.vue

@@ -9,7 +9,7 @@ import type { DsfrLanguageSelectorElement, DsfrLanguageSelectorProps } from './D
 export type { DsfrLanguageSelectorElement, DsfrLanguageSelectorProps }
 
 const props = withDefaults(defineProps<DsfrLanguageSelectorProps>(), {
-  id: () => getRandomId('translate'),
+  id: () => getRandomId('language-selector'),
   languages: () => [],
   currentLanguage: 'fr',
 })

src/components/DsfrNavigation/DsfrNavigation.vue

@@ -18,7 +18,7 @@ import type {
 export type { DsfrNavigationMenuLinks, DsfrNavigationProps }
 
 const props = withDefaults(defineProps<DsfrNavigationProps>(), {
-  id: () => getRandomId('menu'),
+  id: () => getRandomId('nav'),
   label: 'Menu principal',
   navItems: () => [],
 })

src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue

@@ -10,7 +10,7 @@ import type { DsfrNavigationMegaMenuProps } from './DsfrNavigation.types'
 export type { DsfrNavigationMegaMenuProps }
 
 const props = withDefaults(defineProps<DsfrNavigationMegaMenuProps>(), {
-  id: () => getRandomId('menu'),
+  id: () => getRandomId('mega-menu'),
   description: '',
   link: () => ({ to: '#', text: 'Voir toute la rubrique' }),
   menus: () => [],

src/components/DsfrSegmented/DsfrSegmented.vue

@@ -9,7 +9,7 @@ import type { DsfrSegmentedProps } from './DsfrSegmented.types'
 export type { DsfrSegmentedProps }
 
 const props = withDefaults(defineProps<DsfrSegmentedProps>(), {
-  id: () => getRandomId('basic', 'checkbox'),
+  id: () => getRandomId('segmented'),
   hint: '',
   icon: undefined,
   label: '',

src/components/DsfrSegmented/DsfrSegmentedSet.vue

@@ -7,9 +7,9 @@ import type { DsfrSegmentedSetProps } from './DsfrSegmented.types'
 export type { DsfrSegmentedSetProps }
 
 const props = withDefaults(defineProps<DsfrSegmentedSetProps>(), {
-  titleId: () => getRandomId('radio-button', 'group'),
+  titleId: () => getRandomId('segmented-button', 'set'),
   legend: '',
-  name: 'no-name',
+  name: () => getRandomId('segmented-button', 'set'),
   options: () => [],
 })