feat(DSFR.header): switch to DSFR header

This commit is contained in:
Martin 2022-08-18 17:06:58 +02:00 committed by mfo
parent 549eda6fe3
commit 96cdae0dd5
10 changed files with 138 additions and 89 deletions

View file

@ -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';

View file

@ -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 }

View file

@ -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'

View file

@ -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]

View file

@ -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:

View file

@ -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:

View file

@ -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

View file

@ -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

View file

@ -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)

View file

@ -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")