Merge pull request #1094 from afreismuth-ippon/feat/add-language-selector-title-as-props

Feat/add language selector title as props

Author: laruiss

src/components/DsfrFooter/DsfrFooterPartners.md

@@ -13,11 +13,12 @@ Le composant `DsfrFooterPartners` est conçu pour afficher une liste de partenai
 
 ## 🛠️ Props
 
-| Propriété      | Type                    | Description                                                                     | Valeur par défaut |
-|----------------|-------------------------|---------------------------------------------------------------------------------|-------------------|
-| `mainPartner`  | `DsfrFooterPartner`     | Objet représentant le partenaire principal avec lien, logo, et nom.             | `undefined`       |
-| `subPartners`  | `DsfrFooterPartner[]`   | Tableau d'objets représentant les sous-partenaires.                             | `[]`              |
-| `title`        | `string`                | Titre de la section des partenaires.                                            | `''`              |
+| Propriété      | Type                  | Description                                                                     | Valeur par défaut |
+|----------------|-----------------------|---------------------------------------------------------------------------------|-------------------|
+| `mainPartner`  | `DsfrFooterPartner`   | Objet représentant le partenaire principal avec lien, logo, et nom.             | `undefined`       |
+| `subPartners`  | `DsfrFooterPartner[]` | Tableau d'objets représentant les sous-partenaires.                             | `[]`              |
+| `title`        | `string`              | Titre de la section des partenaires.                                            | `''`              |
+| `titleTag`     | `TitleTag`            | Tag HTML pour le titre.                                                         | `'h3'`            |
 
 ## 📡Événements
 

src/components/DsfrFooter/DsfrFooterPartners.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { TitleTag } from '@/common-types'
+
 export type DsfrFooterPartner = {
   href: string
   logo: string
@@ -9,23 +11,26 @@ export type DsfrFooterPartnersProps = {
   mainPartner?: DsfrFooterPartner
   subPartners?: DsfrFooterPartner[]
   title?: string
+  titleTag?: TitleTag
 }
 
 withDefaults(defineProps<DsfrFooterPartnersProps>(), {
   mainPartner: undefined,
   subPartners: () => [],
   title: '',
+  titleTag: 'h4',
 })
 </script>
 
 <template>
   <div class="fr-footer__partners">
-    <h4
+    <component
+      :is="titleTag"
       v-if="title"
       class="fr-footer__partners-title"
     >
       {{ title }}
-    </h4>
+    </component>
     <div class="fr-footer__partners-logos">
       <div
         v-if="mainPartner"

src/components/DsfrLanguageSelector/DsfrLanguageSelector.md

@@ -24,11 +24,12 @@ Ce composant est utilisé en interne dans [DsfrHeader](/composants/DsfrHeader) (
 
 ## 🛠️ Props
 
-| Propriété          | Type                          | Description                                                   | Valeur par défaut         |
-|--------------------|-------------------------------|---------------------------------------------------------------|---------------------------|
-| `id`               | `string`                      | Identifiant unique pour les éléments de contrôle d'accessibilité. | `useRandomId('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'`                    |
+| Propriété         | Type                          | Description                                                                                                  | Valeur par défaut         |
+|-------------------|-------------------------------|--------------------------------------------------------------------------------------------------------------|---------------------------|
+| `id`              | `string`                      | Identifiant unique pour les éléments de contrôle d'accessibilité.                                            | `useRandomId('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'`                    |
+| `title`           | `string`                      | Attribut `title`                                                                                             | `'Sélectionner une langue'`                    |
 
 ## 📡Événements
 

src/components/DsfrLanguageSelector/DsfrLanguageSelector.types.ts

@@ -7,4 +7,5 @@ export type DsfrLanguageSelectorProps = {
   id?: string
   languages: DsfrLanguageSelectorElement[]
   currentLanguage?: string
+  title?: string
 }

src/components/DsfrLanguageSelector/DsfrLanguageSelector.vue

@@ -12,6 +12,7 @@ const props = withDefaults(defineProps<DsfrLanguageSelectorProps>(), {
   id: () => useRandomId('language-selector'),
   languages: () => [],
   currentLanguage: 'fr',
+  title: 'Sélectionner une langue',
 })
 
 const emit = defineEmits<{ (e: 'select', payload: DsfrLanguageSelectorElement): void }>()
@@ -52,7 +53,7 @@ watch(expanded, (newValue, oldValue) => {
         class="fr-translate__btn fr-btn fr-btn--tertiary"
         :aria-controls="id"
         :aria-expanded="expanded"
-        title="Sélectionner une langue"
+        :title
         type="button"
         @click.prevent.stop="expanded = !expanded"
       >