diff --git a/app/javascript/entrypoints/main.css b/app/javascript/entrypoints/main.css index 91e33a168..aa2f2ebcd 100644 --- a/app/javascript/entrypoints/main.css +++ b/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'; diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml index 67209245f..8d2b5cd04 100644 --- a/app/views/layouts/_header.haml +++ b/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 } diff --git a/app/views/layouts/_search_dossiers_form.html.haml b/app/views/layouts/_search_dossiers_form.html.haml index 8a35d0549..9662e116d 100644 --- a/app/views/layouts/_search_dossiers_form.html.haml +++ b/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' + + diff --git a/app/views/layouts/header/_avis_tab.html.haml b/app/views/layouts/header/_avis_tab.html.haml index 79eab2490..91031da4d 100644 --- a/app/views/layouts/header/_avis_tab.html.haml +++ b/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] diff --git a/config/locales/en.yml b/config/locales/en.yml index 289f528cc..79c9dcbde 100644 --- a/config/locales/en.yml +++ b/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: diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 7ec1ba670..279a27b39 100644 --- a/config/locales/fr.yml +++ b/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: diff --git a/spec/support/system_helpers.rb b/spec/support/system_helpers.rb index a090dcaf1..668e4d001 100644 --- a/spec/support/system_helpers.rb +++ b/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 diff --git a/spec/system/help_spec.rb b/spec/system/help_spec.rb index c338837de..d23c1dbb6 100644 --- a/spec/system/help_spec.rb +++ b/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 diff --git a/spec/system/users/managing_password_spec.rb b/spec/system/users/managing_password_spec.rb index cee681c7f..e7dc21e8b 100644 --- a/spec/system/users/managing_password_spec.rb +++ b/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) diff --git a/spec/views/layouts/_header_spec.rb b/spec/views/layouts/_header_spec.rb index a8465e466..74683e29c 100644 --- a/spec/views/layouts/_header_spec.rb +++ b/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")