feat(header): switch to DSFR translate component and dropdown component

app/assets/stylesheets/utils.scss

@@ -65,6 +65,10 @@
   }
 }
 
+.relative {
+  position: relative;
+}
+
 // display
 .hidden {
   display: none;

app/views/layouts/_account_dropdown.haml

@@ -1,7 +1,13 @@
+<<<<<<< HEAD
 
 %nav.fr-nav{ role: "navigation", "aria-label"=> t('menu_aria_label', scope: [:layouts]) }
   .fr-nav__item
     %button.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) }
+=======
+%nav.fr-nav{role: "navigation"}
+  .fr-nav__item
+    %button.fr-translate__btn.fr-btn.fr-btn--tertiary{"aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts])}
+>>>>>>> 62ec6eeed (feat(header): switch to DSFR translate component and dropdown component)
       = image_tag "icons/account-circle.svg", alt: t('my_account', scope: [:layouts]), width: 20, height: 20, loading: 'lazy'
       &nbsp;
       = " #{current_email}"
@@ -35,25 +41,10 @@
                 = t('go_admin', scope: [:layouts])
 
         %li
-          = link_to instructeur_procedures_path, class: "menu-item menu-link" do
+          = link_to profil_path, class: "fr-nav__link flex align-center" do
-            = image_tag "icons/switch-profile.svg", alt: ''
+            = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1'
-            = t('go_instructor', scope: [:layouts])
+            = t('profile', scope: [:layouts])
-      - if expert_signed_in? && nav_bar_profile != :expert
         %li
-          = link_to expert_all_avis_path, class: "menu-item menu-link" do
+          = link_to destroy_user_session_path, method: :delete, class: "fr-nav__link flex align-center" do
-            = image_tag "icons/switch-profile.svg", alt: ''
+            = image_tag "icons/sign-out.svg", alt: '', width: 20, height: 20, class: 'mr-1'
-            = t('go_expert', scope: [:layouts])
+            = t('logout', scope: [:layouts])
-      - if administrateur_signed_in? && nav_bar_profile != :administrateur
-        %li
-          = link_to admin_procedures_path, class: "menu-item menu-link" do
-            = image_tag "icons/switch-profile.svg", alt: ''
-            = t('go_admin', scope: [:layouts])
-
-    %li
-      = link_to profil_path, class: "menu-item menu-link" do
-        = image_tag "icons/switch-profile.svg", alt: ''
-        = t('profile', scope: [:layouts])
-    %li
-      = link_to destroy_user_session_path, method: :delete, class: "menu-item menu-link" do
-        = image_tag "icons/sign-out.svg", alt: ''
-        = t('logout', scope: [:layouts])

app/views/layouts/_header.haml

@@ -5,6 +5,7 @@
 - is_instructeur_context = nav_bar_profile == :instructeur && instructeur_signed_in?
 - is_expert_context = nav_bar_profile == :expert && expert_signed_in?
 - is_user_context = nav_bar_profile == :user
+- is_search_enabled = [params[:controller] == 'recherche', is_instructeur_context, is_expert_context, is_user_context && current_user.dossiers.count].any?
 %header.fr-header{ class: current_page?(root_path) ? nil : "new-header-with-border", role: "banner"}
   .fr-header__body
     .fr-container
@@ -20,6 +21,7 @@
               - if is_search_enabled
                 %button.fr-btn--search.fr-btn{ "aria-controls" => "search-modal", "data-fr-opened" => "false", :title => t('views.users.dossiers.search.search_file') }= t('views.users.dossiers.search.search_file')
               %button#button_burger.fr-btn--menu.fr-btn{ "aria-controls" => "burger-menu", "aria-haspopup" => "menu", "data-fr-opened" => "false", :title => "Menu" } Menu
+
           .fr-header__service
             - root_profile_link, root_profile_libelle = root_path_info_for_profile(nav_bar_profile)
 
@@ -28,7 +30,8 @@
             %p.fr-header__service-tagline Simplement dématérialiser
 
         .fr-header__tools
-          .fr-header__tools-links
+          .fr-header__tools-links.relative
+
             %ul.fr-btns-group
               - if instructeur_signed_in? || user_signed_in?
                 %li
@@ -52,9 +55,9 @@
                   - else
                     = render partial: 'shared/help/help_button'
 
-              - if localization_enabled?
+            - if localization_enabled?
-                %li
+              = render partial: 'layouts/locale_dropdown'
-                  = render partial: 'layouts/locale_dropdown'
+
 
           - if params[:controller] == 'recherche'
             = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path }
@@ -74,33 +77,27 @@
       %button.fr-btn--close.fr-btn{ "aria-controls" => "burger-menu", :title => t('close_modal', scope: [:layouts, :header]) }= t('close_modal', scope: [:layouts, :header])
       .fr-header__menu-links
       %nav#navigation-478.fr-nav{ "aria-label" => "Menu principal", :role => "navigation" }
-        %ul.fr-nav__list
+  #burger-menu.fr-header__menu.fr-modal{"aria-labelledby" => "button-477"}
-          -# Questionner UX pour un back JS
+    .fr-container
-          - if params[:controller] == 'users/commencer'
+      %button.fr-btn--close.fr-btn{"aria-controls" => "burger-menu", :title => "Fermer"} Fermer
-            %li.fr-nav__item
+      %div.fr-header__menu-links
+      %nav#navigation-478.fr-nav{"aria-label" => "Menu principal", :role => "navigation"}
               = link_to t('layouts.header.back'), url_for(:back), title: t('layouts.header.back'), class: 'fr-nav__link'
-
           - if is_instructeur_context
             - if current_instructeur.procedures.any?
               - current_url = request.path_info
               %li.fr-nav__item
-                = link_to 'Revenir en arrière', url_for(:back), title: "Revenir sur le site de mon administration", class: 'fr-nav__link'
+                = active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link'
+            - if current_instructeur.user.expert && current_expert.avis_summary[:total] > 0
+              = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
 
-            - if is_instructeur_context
+          - if is_expert_context
-              - if current_instructeur.procedures.any?
+            - if current_expert.user.instructeur && current_instructeur.procedures.any?
-                - current_url = request.path_info
+              %li.fr-nav__item= active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link'
-                %li.fr-nav__item
+            - if current_expert.avis_summary[:total] > 0
-                  = active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link'
+              = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
-              - if current_instructeur.user.expert && current_expert.avis_summary[:total] > 0
-                = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
 
-            - if is_expert_context
+          - if is_user_context
-              - if current_expert.user.instructeur && current_instructeur.procedures.any?
+            %li.fr-nav__item= active_link_to t('.files'), dossiers_path, active: :inclusive, class: 'fr-nav__link'
-                %li.fr-nav__item= active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link'
+            - if current_user.expert && current_expert.avis_summary[:total] > 0
-              - if current_expert.avis_summary[:total] > 0
+              = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
-                = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
-
-            - if is_user_context
-              %li.fr-nav__item= active_link_to t('.files'), dossiers_path, active: :inclusive, class: 'fr-nav__link'
-              - if current_user.expert && current_expert.avis_summary[:total] > 0
-                = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }

app/views/layouts/_locale_dropdown.html.haml

@@ -1,12 +1,14 @@
-.dropdown.locale-dropdown.header-menu-opener{ data: { controller: 'menu-button' } }
+%nav.fr-translate.fr-nav{:role => "navigation", title: t('.select_locale')}
-  %button.button.dropdown-button.icon-only.header-menu-button{ title: t('.languages'), data: { menu_button_target: 'button' } }
+  .fr-nav__item
-    %span.hidden
+    %button.fr-translate__btn.fr-btn.fr-btn--tertiary{"aria-controls" => "translate", "aria-expanded" => "false", :title => t('.select_locale')}
-      = t('.languages')
+      = t(".#{I18n.locale}")
-    = image_tag "icons/translate-icon.svg", alt: t('.languages'), width: 24, height: 24, loading: :lazy, aria: { hidden: true }
+      %span.fr-hidden-lg= t('.francais')
-  %ul.header-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
+    #translate.fr-collapse.fr-menu
-    %li
+      %ul.fr-menu__list
-      = active_link_to save_locale_path(locale: :fr), method: :post, class: "menu-item menu-link", active: I18n.locale == :fr do
+        %li
-        Français
+          = active_link_to save_locale_path(locale: :fr), method: :post, class: "fr-translate__language fr-nav__link", active: I18n.locale == :fr, "aria-current" => I18n.locale == :fr, hreflang: "fr", lang: "fr" do
-    %li
+            = t('.fr_francais')
-      = active_link_to save_locale_path(locale: :en), method: :post, class: "menu-item menu-link", active: I18n.locale == :en do
+        %li
-        English
+          = active_link_to save_locale_path(locale: :en), method: :post, class: "fr-translate__language   fr-nav__link", active: I18n.locale == :en, "aria-current" => I18n.locale == :en, hreflang: "en", lang: "en" do
+            = t('.en_english')
+

config/locales/en.yml

@@ -72,6 +72,12 @@ en:
       back_title: "Revenir sur le site de mon administration"
     locale_dropdown:
       languages: "Languages"
+      select_locale: "Choose a language"
+      fr: FR
+      en: EN
+      francais: " - French"
+      fr_francais:  FR - French
+      en_english: EN - English
     notifications:
       actions:
         access: View your File

config/locales/fr.yml

@@ -62,6 +62,12 @@ fr:
       back_title: "Revenir sur le site de mon administration"
     locale_dropdown:
       languages: "Langues"
+      select_locale: "Sélectionner une langue"
+      fr: FR
+      en: EN
+      francais: " - Français"
+      fr_francais:  FR - Français
+      en_english: EN - Anglais
     notifications:
       actions:
         access: Consulter mon dossier

config/locales/views/layouts/_account_dropdown.en.yml

@@ -9,3 +9,4 @@ en:
     go_admin: "Switch to administrator"
     profile: "See my profile"
     logout: "Log out"
+    my_account: "My account"

config/locales/views/layouts/_account_dropdown.fr.yml

@@ -9,3 +9,4 @@ fr:
     go_admin: "Passer en administrateur"
     profile: "Voir mon profil"
     logout: "Se déconnecter"
+    my_account: "Mon compte"

spec/system/i18n_spec.rb

@@ -7,8 +7,8 @@ describe 'Accessing the website in different languages:' do
       visit new_user_session_path
       expect(page).to have_text('Connectez-vous')
 
-      click_on 'Langues'
+      find('.fr-translate__btn').click
-      click_on 'English'
+      find('.fr-nav__link[hreflang="en"]').click
 
       # The page is now in English
       expect(page).to have_text('Sign in')