feat(DSFR.header): switch to DSFR header

app/javascript/entrypoints/main.css

@@ -1,5 +1,16 @@
 @import '@gouvfr/dsfr/dist/core/core.css';
+@import '@gouvfr/dsfr/dist/component/link/link.css';
+@import '@gouvfr/dsfr/dist/component/logo/logo.css';
+@import '@gouvfr/dsfr/dist/component/form/form.css';
+@import '@gouvfr/dsfr/dist/component/badge/badge.css';
+@import '@gouvfr/dsfr/dist/component/navigation/navigation.css';
 @import '@gouvfr/dsfr/dist/component/button/button.css';
 @import '@gouvfr/dsfr/dist/component/alert/alert.css';
 @import '@gouvfr/dsfr/dist/component/callout/callout.css';
+@import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.css';
 @import '@gouvfr/dsfr/dist/component/table/table.css';
+@import '@gouvfr/dsfr/dist/component/modal/modal.css';
+@import '@gouvfr/dsfr/dist/component/input/input.css';
+@import '@gouvfr/dsfr/dist/component/search/search.css';
+@import '@gouvfr/dsfr/dist/component/translate/translate.css';
+@import '@gouvfr/dsfr/dist/component/header/header.css';

app/views/layouts/_header.haml

@@ -2,86 +2,105 @@
 - nav_bar_profile = controller.try(:nav_bar_profile) || :guest
 - dossier = controller.try(:dossier_for_help)
 - procedure = controller.try(:procedure_for_help)
+- 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
+%header.fr-header{ class: current_page?(root_path) ? nil : "new-header-with-border", role: "banner"}
+  .fr-header__body
+    .fr-container
+      .fr-header__body-row
+        .fr-header__brand.fr-enlarge-link
+          .fr-header__brand-top
+            .fr-header__logo
+              %p.fr-logo
+                République
+                = succeed "Française" do
+                  %br/
+            .fr-header__navbar
+              - 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)
 
-%header.new-header{ class: current_page?(root_path) ? nil : "new-header-with-border", role: 'banner' }
-  .header-inner-content
+            = link_to root_profile_link, :title => root_profile_libelle do
+              %p.fr-header__service-title= APPLICATION_NAME
+            %p.fr-header__service-tagline Simplement dématérialiser
 
-    .flex.align-center.justify-center
-      - if params[:controller] == 'users/commencer'
-        = link_to 'Revenir en arrière', url_for(:back), class: "button", title: "Revenir sur le site de mon administration"
-      - else
-        - root_profile_link, root_profile_libelle = root_path_info_for_profile(nav_bar_profile)
-        = link_to root_profile_link, class: 'header-logo justify-center', title: root_profile_libelle do
-          = image_tag HEADER_LOGO_SRC, alt: HEADER_LOGO_ALT, width: HEADER_LOGO_WIDTH, height: HEADER_LOGO_HEIGHT, loading: 'lazy'
-          %span.big.site-title>
-            = APPLICATION_NAME
-          %span.small.site-title>
-            = APPLICATION_SHORTNAME
+        .fr-header__tools
+          .fr-header__tools-links
+            %ul.fr-btns-group
+              - if instructeur_signed_in? || user_signed_in?
+                %li
+                  = render partial: 'layouts/account_dropdown', locals: { nav_bar_profile: nav_bar_profile }
+              - elsif (request.path != new_user_session_path && request.path !=agent_connect_path)
+                - if request.path == new_user_registration_path
+                  %li
+                    .fr-hidden-sm.fr-unhidden-lg.fr-link--sm= t('views.shared.account.already_user_question')
+                %li= link_to t('views.shared.account.signin'), new_user_session_path, class: "fr-btn"
 
-      - if nav_bar_profile == :instructeur && instructeur_signed_in?
-        - current_url = request.path_info
-        %ul.header-tabs
-          - if current_instructeur.procedures.any?
-            %li
-              = active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'tab-link'
-          - if current_instructeur.user.expert && current_expert.avis_summary[:total] > 0
-            = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
+                %li
+                  - if dossier.present? && nav_bar_profile == :user
+                    = render partial: 'shared/help/help_dropdown_dossier', locals: { dossier: dossier }
 
-      - if nav_bar_profile == :expert && expert_signed_in?
-        %ul.header-tabs
-          - if current_expert.user.instructeur && current_instructeur.procedures.any?
-            %li
-              = active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'tab-link'
+                  - elsif procedure.present? && (nav_bar_profile == :user || nav_bar_profile == :guest)
+                    = render partial: 'shared/help/help_dropdown_procedure', locals: { procedure: procedure }
 
-          - if current_expert.avis_summary[:total] > 0
-            = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
+                  - elsif nav_bar_profile == :instructeur
+                    = render partial: 'shared/help/help_dropdown_instructeur'
 
-      - if nav_bar_profile == :user
-        %ul.header-tabs
-          %li
-            = active_link_to t('.files'), dossiers_path, active: :inclusive, class: 'tab-link'
-          - if current_user.expert && current_expert.avis_summary[:total] > 0
-            = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
+                  - else
+                    = render partial: 'shared/help/help_button'
 
-    %ul.header-right-content
-      - if params[:controller] == 'recherche'
-        = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path }
+              - if localization_enabled?
+                %li
+                  = render partial: 'layouts/locale_dropdown'
 
-      - if nav_bar_profile == :instructeur && instructeur_signed_in?
-        %li
-          = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path }
+          - if params[:controller] == 'recherche'
+            = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path }
 
-      - if nav_bar_profile == :expert && expert_signed_in?
-        = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path }
+          - if is_instructeur_context
+            = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path }
 
-      - if nav_bar_profile == :user && user_signed_in? && current_user.dossiers.count > 2
-        %li
-          = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_dossiers_path }
+          - if is_expert_context
+            = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path }
 
-      - if instructeur_signed_in? || user_signed_in?
-        %li
-          = render partial: 'layouts/account_dropdown', locals: { nav_bar_profile: nav_bar_profile }
+          - if is_user_context && current_user.dossiers.count > 2
+            = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_dossiers_path }
 
-      - elsif (request.path != new_user_session_path && request.path != agent_connect_path)
-        - if request.path == new_user_registration_path
-          %li
-            = t('views.shared.account.already_user_question')
-        %li
-          = link_to t('views.shared.account.signin'), new_user_session_path, class: "button secondary"
+  - has_header = [is_instructeur_context, is_expert_context, is_user_context]
+  #burger-menu.fr-header__menu.fr-modal{ "aria-labelledby" => "button_burger" }
+    .fr-container
+      %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
+          -# Questionner UX pour un back JS
+          - if params[:controller] == 'users/commencer'
+            %li.fr-nav__item
+              = link_to t('layouts.header.back'), url_for(:back), title: t('layouts.header.back'), class: 'fr-nav__link'
 
-      %li
-        - if dossier.present? && nav_bar_profile == :user
-          = render partial: 'shared/help/help_dropdown_dossier', locals: { dossier: dossier }
+          - 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'
 
-        - elsif procedure.present? && (nav_bar_profile == :user || nav_bar_profile == :guest)
-          = render partial: 'shared/help/help_dropdown_procedure', locals: { procedure: procedure }
+            - if is_instructeur_context
+              - if 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'
+              - if current_instructeur.user.expert && current_expert.avis_summary[:total] > 0
+                = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
 
-        - elsif nav_bar_profile == :instructeur
-          = render partial: 'shared/help/help_dropdown_instructeur'
+            - if is_expert_context
+              - if current_expert.user.instructeur && current_instructeur.procedures.any?
+                %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_expert.avis_summary[:total] > 0
+                = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
 
-        - else
-          = render partial: 'shared/help/help_button'
-
-      - if localization_enabled?
-        %li
-          = render partial: 'layouts/locale_dropdown'
+            - 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/_search_dossiers_form.html.haml

@@ -1,5 +1,11 @@
-.header-search{ role: 'search' }
-  = form_tag "#{search_endpoint}", method: :get, class: "form" do
-    = text_field_tag "q", "#{@search_terms if @search_terms.present?}", placeholder: t('views.users.dossiers.search.search_file'), aria: { label: t('views.users.dossiers.search.search_file') }
-    %button{ title: t('views.users.dossiers.search.search_file') }
-      = image_tag "icons/search-blue.svg", alt: 'Rechercher', 'aria-hidden':'true', width: 24, height: 24, loading: 'lazy'
+#search-modal.fr-header__search.fr-modal
+  .fr-container.fr-container-lg--fluid
+    %button.fr-btn--close.fr-btn{ "aria-controls" => "search-modal", :title => t('close_modal', scope: [:layouts, :header]) }= t('close_modal', scope: [:layouts, :header])
+    #search-473.fr-search-bar{ :role => "search" }
+      = form_tag "#{search_endpoint}", method: :get, class: "flex width-100" do
+        = label_tag "q", t('views.users.dossiers.search.search_file'), class: 'fr-label'
+        = text_field_tag "q", "#{@search_terms if @search_terms.present?}", placeholder: t('views.users.dossiers.search.search_file'), aria: { label: t('views.users.dossiers.search.search_file') }, class: "fr-input"
+        %button.fr-btn{ title: t('views.users.dossiers.search.search_file') }
+          = image_tag "icons/search-blue.svg", alt: t('views.users.dossiers.search.search_file'), 'aria-hidden':'true', width: 24, height: 24, loading: 'lazy'
+
+

app/views/layouts/header/_avis_tab.html.haml

@@ -1,5 +1,5 @@
-%li
-  = active_link_to expert_all_avis_path, active: controller_name == 'avis', class: 'tab-link' do
+%li.fr-nav__item
+  = active_link_to expert_all_avis_path, active: controller_name == 'avis', class: 'fr-nav__link' do
     Avis
     - if current_expert.avis_summary[:unanswered] > 0
       %span.badge.warning= current_expert.avis_summary[:unanswered]

config/locales/en.yml

@@ -66,6 +66,10 @@ en:
         line3: administrative forms.
         are_you_new: First time on %{app_name}?
     my_account: My account
+    header:
+      close_modal: 'Fermer'
+      back: "Back"
+      back_title: "Revenir sur le site de mon administration"
     locale_dropdown:
       languages: "Languages"
     notifications:

config/locales/fr.yml

@@ -56,6 +56,10 @@ fr:
         line3: administratifs dématérialisés.
         are_you_new: Vous êtes nouveau sur %{app_name} ?
     my_account: Mon compte
+    header:
+      close_modal: 'Fermer'
+      back: "Revenir en arrière"
+      back_title: "Revenir sur le site de mon administration"
     locale_dropdown:
       languages: "Langues"
     notifications:

spec/support/system_helpers.rb

@@ -126,9 +126,10 @@ module SystemHelpers
   end
 
   def log_out
-    click_button(title: 'Mon compte')
-    click_on 'Se déconnecter'
-
+    within('.fr-header .fr-container .fr-header__tools .fr-btns-group') do
+      click_button(title: 'Mon compte')
+      click_on 'Se déconnecter'
+    end
     expect(page).to have_current_path(root_path)
   end
 

spec/system/help_spec.rb

@@ -1,7 +1,7 @@
 describe 'Getting help:' do
   scenario 'a Help button is visible on public pages' do
     visit '/'
-    within('.new-header') do
+    within('.fr-header') do
       expect(page).to have_help_button
     end
   end
@@ -12,7 +12,7 @@ describe 'Getting help:' do
     scenario 'a Help menu provides administration contacts and a link to the FAQ' do
       visit commencer_path(path: procedure.path)
 
-      within('.new-header') do
+      within('.fr-header') do
         expect(page).to have_help_menu
       end
 
@@ -34,7 +34,7 @@ describe 'Getting help:' do
 
     scenario 'a Help button is visible on signed-in pages' do
       visit dossiers_path
-      within('.new-header') do
+      within('.fr-header') do
         expect(page).to have_help_button
       end
     end
@@ -45,7 +45,7 @@ describe 'Getting help:' do
       scenario 'a Help menu provides administration contacts and a link to the FAQ' do
         visit dossier_path(dossier)
 
-        within('.new-header') do
+        within('.fr-header') do
           expect(page).to have_help_menu
         end
 
@@ -63,7 +63,7 @@ describe 'Getting help:' do
       scenario 'a Help menu provides links to the Messagerie and to the FAQ' do
         visit dossier_path(dossier)
 
-        within('.new-header') do
+        within('.fr-header') do
           expect(page).to have_help_menu
         end
 
@@ -84,7 +84,7 @@ describe 'Getting help:' do
 
     scenario 'a Help menu is visible on signed-in pages' do
       visit instructeur_procedures_path
-      within('.new-header') do
+      within('.fr-header') do
         expect(page).to have_help_menu
       end
     end

spec/system/users/managing_password_spec.rb

@@ -1,11 +1,13 @@
-describe 'Managing password:' do
+describe 'Managing password:', js: true do
   context 'for simple users' do
     let(:user) { create(:user) }
     let(:new_password) { 'a simple password' }
 
     scenario 'a simple user can reset their password' do
       visit root_path
-      click_on 'Connexion'
+      within('.fr-header .fr-container .fr-header__tools .fr-btns-group') do
+        click_on 'Connexion'
+      end
       click_on 'Mot de passe oublié ?'
       expect(page).to have_current_path(new_user_password_path)
 
@@ -34,7 +36,9 @@ describe 'Managing password:' do
 
     scenario 'an admin can reset their password', js: true do
       visit root_path
-      click_on 'Connexion'
+      within('.fr-header .fr-container .fr-header__tools .fr-btns-group') do
+        click_on 'Connexion'
+      end
       click_on 'Mot de passe oublié ?'
       expect(page).to have_current_path(new_user_password_path)
 

spec/views/layouts/_header_spec.rb

@@ -19,7 +19,7 @@ describe 'layouts/_header.html.haml', type: :view do
     let(:user) { nil }
     let(:profile) { nil }
 
-    it { is_expected.to have_css("a.header-logo[href=\"#{root_path}\"]") }
+    it { is_expected.to have_css(".fr-header__logo") }
 
     it 'displays the Help link' do
       expect(subject).to have_link('Aide', href: FAQ_URL)
@@ -42,7 +42,7 @@ describe 'layouts/_header.html.haml', type: :view do
     let(:user) { create(:user) }
     let(:profile) { :user }
 
-    it { is_expected.to have_css("a.header-logo[href=\"#{dossiers_path}\"]") }
+    it { is_expected.to have_css(".fr-header__logo") }
     it { is_expected.to have_link("Dossiers", href: dossiers_path) }
 
     it 'displays the Help button' do
@@ -56,7 +56,7 @@ describe 'layouts/_header.html.haml', type: :view do
     let(:profile) { :instructeur }
     let(:current_instructeur) { instructeur }
 
-    it { is_expected.to have_css("a.header-logo[href=\"#{instructeur_procedures_path}\"]") }
+    it { is_expected.to have_css(".fr-header__logo") }
 
     it 'displays the Help dropdown menu' do
       expect(subject).to have_css(".help-dropdown")