[TECH] Utiliser les termes "locales" au lieu de "languages" (PIX-6772)

components/BurgerMenuNav.vue

@@ -2,7 +2,7 @@
   <div class="burger-menu-nav">
     <burger-menu-nav-items :items="items.navigationZone" />
     <burger-menu-nav-items :items="items.actionsZone" :is-action="true" />
-    <language-switcher type="only-text" />
+    <locale-switcher type="only-text" />
   </div>
 </template>
 

components/LanguageSwitcher/LanguageSwitcher.vue → components/LocaleSwitcher/LocaleSwitcher.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     v-if="type === 'with-dropdown'"
-    class="language-switcher"
+    class="locale-switcher"
     @keydown.esc="hideMenu"
   >
     <button
-      class="language-switcher__button"
-      :aria-label="$t('language-switcher-label')"
+      class="locale-switcher__button"
+      :aria-label="$t('locale-switcher-label')"
       aria-haspopup="true"
       :aria-expanded="showMenu.toString()"
       @click.stop.prevent="toggleMenu()"
@@ -15,53 +15,53 @@
       <fa
         v-if="showMenu"
         icon="angle-up"
-        class="language-switcher-button__angle"
+        class="locale-switcher-button__angle"
       />
-      <fa v-else icon="angle-down" class="language-switcher-button__angle" />
+      <fa v-else icon="angle-down" class="locale-switcher-button__angle" />
     </button>
-    <ul v-if="showMenu" class="language-switcher__dropdown-menu">
+    <ul v-if="showMenu" class="locale-switcher__dropdown-menu">
       <li
-        v-for="(option, index) in languages.menu"
-        :key="`language-switcher-${index}`"
+        v-for="(option, index) in menu"
+        :key="`locale-switcher-${index}`"
         :class="{
-          'language-switcher__dropdown-menu--active':
-            option.lang === currentLocaleCode,
+          'locale-switcher__dropdown-menu--active':
+            option.localeCode === currentLocaleCode,
         }"
       >
-        <div class="language-switcher__lang">
+        <div class="locale-switcher__locale">
           <template v-if="option.children">
             <button
               v-if="option.children"
-              class="language-switcher-sub-menu-button"
+              class="locale-switcher-sub-menu-button"
               @click.stop.prevent="toggleSubMenu()"
             >
               <img
-                class="language-switcher__img"
+                class="locale-switcher__img"
                 :src="'/images/' + option.icon"
                 alt=""
               />
-              <div class="lang__text">{{ $t(option.name) }}</div>
+              <div class="locale__text">{{ $t(option.name) }}</div>
               <fa
                 icon="angle-right"
-                class="language-switcher__icon language-switcher-button__angle"
+                class="locale-switcher__icon locale-switcher-button__angle"
               />
             </button>
-            <language-switcher-sub-menu
+            <locale-switcher-sub-menu
               :show-sub-menu="showSubMenu"
-              :available-languages="option.children"
+              :available-locales="option.children"
               :current-locale-code="currentLocaleCode"
               :selected-menu="selectedMenu"
             />
           </template>
           <pix-link v-else-if="!option.children" :href="getIndexUrl(option)">
             <img
-              class="language-switcher__img"
+              class="locale-switcher__img"
               :src="'/images/' + option.icon"
               alt=""
             />
-            <div class="lang__text">
+            <div class="locale__text">
               <div>{{ $t(option.name) }}</div>
-              <div v-if="option.subtitle" class="language-switcher__subtitle">
+              <div v-if="option.subtitle" class="locale-switcher__subtitle">
                 {{ $t(option.subtitle) }}
               </div>
             </div>
@@ -72,16 +72,16 @@
     <span class="separator" />
   </div>
   <div v-else-if="type === 'only-text'">
-    <ul class="language-switcher-burger-menu">
-      <li v-for="option in languages.menu" :key="option.key">
+    <ul class="locale-switcher-burger-menu">
+      <li v-for="option in menu" :key="option.key">
         <template v-if="option.children">
           <span
             v-for="child in option.children"
             :key="child.name"
             :class="{
-              'language-switcher-burger-menu__lang': true,
-              'language-switcher-burger-menu--active':
-                child.lang === currentLocaleCode,
+              'locale-switcher-burger-menu__locale': true,
+              'locale-switcher-burger-menu--active':
+                child.localeCode === currentLocaleCode,
             }"
           >
             <pix-link :href="getIndexUrl(child)">
@@ -93,9 +93,9 @@
         <template v-if="!option.children">
           <span
             :class="{
-              'language-switcher-burger-menu__lang': true,
-              'language-switcher-burger-menu--active':
-                option.lang === currentLocaleCode,
+              'locale-switcher-burger-menu__locale': true,
+              'locale-switcher-burger-menu--active':
+                option.localeCode === currentLocaleCode,
             }"
           >
             <pix-link :href="getIndexUrl(option)">
@@ -109,33 +109,32 @@
 </template>
 
 <script>
-import { language } from '~/config/language'
+import { localization } from '~/config/localization'
 import { getAbsoluteUrlIfSwitchWebsite } from '~/services/get-absolute-url-if-switch-website'
 
 export default {
-  name: 'LanguageSwitcher',
+  name: 'LocaleSwitcher',
   props: {
     type: {
       type: String,
       default: 'with-dropdown',
     },
   },
   data() {
-    const languages = language
     return {
       showMenu: false,
       showSubMenu: false,
-      languages,
+      menu: localization.menu,
     }
   },
   computed: {
     currentLocaleCode() {
       return this.$i18n.locale || this.$i18n.defaultLocale
     },
     selectedMenu() {
-      return this.languages.menu
+      return localization.menu
         .flatMap((menuItem) => menuItem.children ?? menuItem)
-        .find((locale) => locale.lang === this.currentLocaleCode)
+        .find((locale) => locale.localeCode === this.currentLocaleCode)
     },
   },
   mounted() {
@@ -159,8 +158,8 @@ export default {
       this.showSubMenu = false
     },
     getIndexUrl(menuItem) {
-      const locale = language.locales.find(
-        (locale) => locale.code === menuItem.lang
+      const locale = localization.locales.find(
+        (locale) => locale.code === menuItem.localeCode
       )
       return getAbsoluteUrlIfSwitchWebsite({
         relativeTarget: locale.code === 'fr-fr' ? '/' : `/${locale.code}`,
@@ -172,11 +171,11 @@ export default {
 </script>
 
 <style lang="scss">
-.language-switcher {
+.locale-switcher {
   display: none;
 }
 @include device-is('large-screen') {
-  .language-switcher {
+  .locale-switcher {
     display: flex;
 
     .separator {
@@ -230,7 +229,7 @@ export default {
         box-shadow: 0 0;
         display: block;
         min-height: 25px;
-        .language-switcher__lang > a {
+        .locale-switcher__locale > a {
           line-height: 23px;
         }
       }
@@ -275,7 +274,7 @@ export default {
         }
       }
     }
-    &__lang {
+    &__locale {
       min-height: 25px;
       a,
       span,
@@ -294,7 +293,7 @@ export default {
           color: $blue;
           background: $grey-10;
         }
-        .lang {
+        .locale {
           &__text {
             flex: 1;
           }
@@ -308,7 +307,7 @@ export default {
           color: $blue;
           background: $grey-10;
         }
-        .lang {
+        .locale {
           &__text {
             flex: 1;
             text-align: left;
@@ -329,14 +328,14 @@ export default {
       width: 23px;
     }
   }
-  .language-switcher-button {
+  .locale-switcher-button {
     &__angle {
       margin-left: 8px;
     }
   }
 }
 
-.language-switcher-burger-menu {
+.locale-switcher-burger-menu {
   margin: 0 0 50px 0;
   font-size: 1rem;
   line-height: 1.5rem;
@@ -353,7 +352,7 @@ export default {
     content: '';
     margin: 0;
   }
-  &__lang {
+  &__locale {
     a {
       color: $grey-80;
       &:visited,

components/LanguageSwitcher/LanguageSwitcherSubMenu.vue → components/LocaleSwitcher/LocaleSwitcherSubMenu.vue

@@ -1,16 +1,16 @@
 <template>
-  <ul v-if="showSubMenu" class="language-switcher__dropdown-menu child">
+  <ul v-if="showSubMenu" class="locale-switcher__dropdown-menu child">
     <li
-      v-for="availableLanguage in availableLanguages"
-      :key="availableLanguage.key"
+      v-for="availableLocale in availableLocales"
+      :key="availableLocale.key"
       :class="{
-        'language-switcher__dropdown-menu--active':
-          availableLanguage.lang === currentLocaleCode,
+        'locale-switcher__dropdown-menu--active':
+          availableLocale.localeCode === currentLocaleCode,
       }"
     >
-      <div class="language-switcher__lang">
-        <pix-link :href="getIndexUrl(availableLanguage)">
-          {{ $t(availableLanguage.name) }}
+      <div class="locale-switcher__locale">
+        <pix-link :href="getIndexUrl(availableLocale)">
+          {{ $t(availableLocale.name) }}
         </pix-link>
       </div>
     </li>
@@ -19,16 +19,16 @@
 
 <script>
 import { getAbsoluteUrlIfSwitchWebsite } from '~/services/get-absolute-url-if-switch-website'
-import { language } from '~/config/language'
+import { localization } from '~/config/localization'
 
 export default {
-  name: 'LanguageSwitcherSubMenu',
+  name: 'LocaleSwitcherSubMenu',
   props: {
     showSubMenu: {
       type: Boolean,
       default: false,
     },
-    availableLanguages: {
+    availableLocales: {
       type: Array,
       default: null,
     },
@@ -43,8 +43,8 @@ export default {
   },
   methods: {
     getIndexUrl(menuItem) {
-      const locale = language.locales.find(
-        (locale) => locale.code === menuItem.lang
+      const locale = localization.locales.find(
+        (locale) => locale.code === menuItem.localeCode
       )
       return getAbsoluteUrlIfSwitchWebsite({
         relativeTarget: `/${locale.code}`,

components/slices/ActionsZone.vue

@@ -1,6 +1,6 @@
 <template>
   <nav class="actions-zone">
-    <language-switcher type="with-dropdown" />
+    <locale-switcher type="with-dropdown" />
     <ul>
       <li v-for="(menuItem, index) in slice.items" :key="`item-${index}`">
         <pix-prismic-link

config/localization/index.js

@@ -0,0 +1,7 @@
+import { config } from '../environment'
+import { localization as localizationForPixSite } from './pix-site'
+import { localization as localizationForPixPro } from './pix-pro'
+
+export const localization = config.isPixSite
+  ? localizationForPixSite
+  : localizationForPixPro

config/language/pix-pro.js → config/localization/pix-pro.js

@@ -17,7 +17,7 @@ export const availableLocales = [
     domain: config.domain.french,
   },
 ]
-export const language = {
+export const localization = {
   menu: [
     {
       name: 'international',
@@ -26,21 +26,21 @@ export const language = {
       children: [
         {
           name: 'french',
-          lang: 'fr',
+          localeCode: 'fr',
           icon: 'icon',
           subtitle: null,
         },
         {
           name: 'english',
-          lang: 'en-gb',
+          localeCode: 'en-gb',
           icon: 'icon',
           subtitle: null,
         },
       ],
     },
     {
       name: 'france',
-      lang: 'fr-fr',
+      localeCode: 'fr-fr',
       icon: 'flag-fr.svg',
       subtitle: null,
     },