From 11c8e408efb1b673e153e4a8921c75c19380eec3 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Thu, 9 Nov 2023 15:02:43 +0100 Subject: [PATCH] remove specific tabs css and use DSFR tabs --- app/assets/stylesheets/tabs.scss | 57 ------------------- app/javascript/entrypoints/main.css | 1 + .../procedures/apercu.html.haml | 4 +- .../procedures/index.html.haml | 4 +- app/views/experts/avis/_header.html.haml | 4 +- app/views/experts/avis/procedure.html.haml | 4 +- .../dossiers/_header_bottom.html.haml | 4 +- .../instructeurs/procedures/_tabs.html.haml | 4 +- .../instructeurs/procedures/index.html.haml | 4 +- app/views/root/patron.html.haml | 4 +- app/views/shared/_tab_item.html.haml | 4 +- app/views/users/dossiers/index.html.haml | 4 +- .../users/dossiers/show/_header.html.haml | 4 +- spec/system/experts/expert_spec.rb | 8 +-- .../routing/rules_full_scenario_spec.rb | 4 +- spec/system/users/list_dossiers_spec.rb | 2 +- .../users/dossiers/index.html.haml_spec.rb | 8 +-- .../dossiers/show/_header.html.haml_spec.rb | 2 +- 18 files changed, 35 insertions(+), 91 deletions(-) delete mode 100644 app/assets/stylesheets/tabs.scss diff --git a/app/assets/stylesheets/tabs.scss b/app/assets/stylesheets/tabs.scss deleted file mode 100644 index 7540b8ca9..000000000 --- a/app/assets/stylesheets/tabs.scss +++ /dev/null @@ -1,57 +0,0 @@ -@import "colors"; -@import "mixins"; - -.tabs { - ul { - margin-bottom: 0; - padding: 0; - } - - li { - display: inline-block; - line-height: 36px; - position: relative; - text-align: center; - font-size: 14px; - border-radius: 3px 3px 0 0; - border: 1px solid transparent; - - a { - display: block; - padding-left: 20px; - padding-right: 20px; - color: $black; - background-image: none; - } - - &.active { - background-color: #FFFFFF; - border-top: 2px solid $blue-france-500; - border-left: 1px solid $border-grey; - border-right: 1px solid $border-grey; - - a { - color: $blue-france-500; - } - - .badge { - color: $blue-france-500; - } - } - - &:hover { - a { - color: $blue-france-500; - } - - .badge { - color: $blue-france-500; - } - } - - .notifications { - top: 3px; - right: 3px; - } - } -} diff --git a/app/javascript/entrypoints/main.css b/app/javascript/entrypoints/main.css index 66fa14be9..b07341915 100644 --- a/app/javascript/entrypoints/main.css +++ b/app/javascript/entrypoints/main.css @@ -37,3 +37,4 @@ @import '@gouvfr/dsfr/dist/component/skiplink/skiplink.css'; @import '@gouvfr/dsfr/dist/component/password/password.css'; @import '@gouvfr/dsfr/dist/component/accordion/accordion.css'; +@import '@gouvfr/dsfr/dist/component/tab/tab.css'; diff --git a/app/views/administrateurs/procedures/apercu.html.haml b/app/views/administrateurs/procedures/apercu.html.haml index a9e55556f..c44643884 100644 --- a/app/views/administrateurs/procedures/apercu.html.haml +++ b/app/views/administrateurs/procedures/apercu.html.haml @@ -2,8 +2,8 @@ .fr-container %h1.page-title Prévisualisation de la démarche « #{@dossier.procedure.libelle} » - %nav.tabs - %ul + %nav.fr-tabs + %ul.fr-tabs__list = tab_item('le dossier', apercu_admin_procedure_path(@dossier.procedure, tab: 'dossier'), active: @tab == 'dossier') diff --git a/app/views/administrateurs/procedures/index.html.haml b/app/views/administrateurs/procedures/index.html.haml index 05c2f71b4..e66f1e7dc 100644 --- a/app/views/administrateurs/procedures/index.html.haml +++ b/app/views/administrateurs/procedures/index.html.haml @@ -5,8 +5,8 @@ = link_to "Nouvelle Démarche", new_from_existing_admin_procedures_path, id: 'new-procedure', class: 'fr-btn' .fr-container - %nav.tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } - %ul + %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } + %ul.fr-tabs__list = tab_item(t('pluralize.published', count: @procedures_publiees_count), admin_procedures_path(statut: 'publiees'), active: @statut == 'publiees', badge: number_with_html_delimiter(@procedures_publiees_count)) = tab_item('En test', admin_procedures_path(statut: 'brouillons'), active: @statut == 'brouillons', badge: number_with_html_delimiter(@procedures_draft_count)) = tab_item(t('pluralize.closed', count: @procedures_closed_count), admin_procedures_path(statut: 'archivees'), active: @statut == 'archivees', badge: number_with_html_delimiter(@procedures_closed_count)) diff --git a/app/views/experts/avis/_header.html.haml b/app/views/experts/avis/_header.html.haml index 02d7860e2..eaccb2926 100644 --- a/app/views/experts/avis/_header.html.haml +++ b/app/views/experts/avis/_header.html.haml @@ -18,8 +18,8 @@ %span.fr-download__detail ZIP - %nav.tabs - %ul + %nav.fr-tabs + %ul.fr-tabs__list = dynamic_tab_item('Demande', expert_avis_path(avis.procedure, avis)) = dynamic_tab_item('Avis', instruction_expert_avis_path(avis.procedure, avis), notification: avis.answer.blank?) - if avis.procedure.allow_expert_messaging diff --git a/app/views/experts/avis/procedure.html.haml b/app/views/experts/avis/procedure.html.haml index 40edc6445..c6473c323 100644 --- a/app/views/experts/avis/procedure.html.haml +++ b/app/views/experts/avis/procedure.html.haml @@ -11,8 +11,8 @@ .procedure-header %h1.fr-h3= procedure_libelle @procedure - %nav.tabs - %ul + %nav.fr-tabs + %ul.fr-tabs__list = tab_item('avis à donner', procedure_expert_avis_index_path(statut: Instructeurs::AvisController::A_DONNER_STATUS), active: @statut == Instructeurs::AvisController::A_DONNER_STATUS, diff --git a/app/views/instructeurs/dossiers/_header_bottom.html.haml b/app/views/instructeurs/dossiers/_header_bottom.html.haml index d409f2aed..fb0fcaaf0 100644 --- a/app/views/instructeurs/dossiers/_header_bottom.html.haml +++ b/app/views/instructeurs/dossiers/_header_bottom.html.haml @@ -1,6 +1,6 @@ #header-bottom.fr-container - %nav.tabs - %ul + %nav.fr-tabs + %ul.fr-tabs__list - notifications_summary = current_instructeur.notifications_for_dossier(dossier) = dynamic_tab_item(t('views.instructeurs.dossiers.tab_steps.request'), diff --git a/app/views/instructeurs/procedures/_tabs.html.haml b/app/views/instructeurs/procedures/_tabs.html.haml index b3dc9f2ff..58f796e09 100644 --- a/app/views/instructeurs/procedures/_tabs.html.haml +++ b/app/views/instructeurs/procedures/_tabs.html.haml @@ -1,5 +1,5 @@ -%nav.tabs.mt-3 - %ul +%nav.fr-tabs.mt-3 + %ul.fr-tabs__list = tab_item(t(tab_i18n_key_from_status('a-suivre')), instructeur_procedure_path(procedure, statut: 'a-suivre'), active: statut == 'a-suivre', diff --git a/app/views/instructeurs/procedures/index.html.haml b/app/views/instructeurs/procedures/index.html.haml index 9893c144c..71ecc1ee1 100644 --- a/app/views/instructeurs/procedures/index.html.haml +++ b/app/views/instructeurs/procedures/index.html.haml @@ -5,8 +5,8 @@ %h1.fr-h3.fr-mb-0 Démarches = render partial: 'instructeurs/procedures/synthese', locals: { procedures: @procedures, all_dossiers_counts: @all_dossiers_counts } - %nav.tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } - %ul + %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } + %ul.fr-tabs__list = tab_item(t('pluralize.en_cours', count: @procedures_en_cours_count), instructeur_procedures_path(statut: 'en-cours'), active: @statut == 'en-cours', badge: number_with_html_delimiter(@procedures_en_cours_count)) = tab_item(t('pluralize.en_test', count: @procedures_draft_count), instructeur_procedures_path(statut: 'brouillons'), active: @statut == 'brouillons', badge: number_with_html_delimiter(@procedures_draft_count)) = tab_item(t('pluralize.closed', count: @procedures_closes_count), instructeur_procedures_path(statut: 'archivees'), active: @statut == 'archivees', badge: number_with_html_delimiter(@procedures_closes_count)) diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index d57c86f5c..6ccf40bdd 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -231,8 +231,8 @@ .sub-header .container Titre - %nav.tabs - %ul + %nav.fr-tabs + %ul.fr-tabs__list = tab_item("Onglet actif", "#", active: true) = tab_item("Onglet inactif", "#") = tab_item("Onglet avec badge", "#", badge: 2) diff --git a/app/views/shared/_tab_item.html.haml b/app/views/shared/_tab_item.html.haml index b6fb21372..27c65e513 100644 --- a/app/views/shared/_tab_item.html.haml +++ b/app/views/shared/_tab_item.html.haml @@ -1,7 +1,7 @@ %li{ class: (active ? 'active' : nil) } - if notification %span.notifications{ 'aria-label': 'notifications' } - = link_to(url, 'aria-current': active ? 'page' : nil) do + = link_to(url, 'aria-selected': active ? true : nil, class: 'fr-tabs__tab' ) do - if badge.present? - %span.badge= badge + %span.badge.fr-mr-1w= badge = label diff --git a/app/views/users/dossiers/index.html.haml b/app/views/users/dossiers/index.html.haml index f9b90694c..ca3f1be23 100644 --- a/app/views/users/dossiers/index.html.haml +++ b/app/views/users/dossiers/index.html.haml @@ -25,8 +25,8 @@ = render Dossiers::UserProcedureFilterComponent.new(procedures_for_select: @procedures_for_select) - if @search_terms.blank? - %nav.tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } - %ul + %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } + %ul.fr-tabs__list - if @user_dossiers.present? = tab_item(t('pluralize.en_cours', count: @user_dossiers.count), dossiers_path(statut: 'en-cours', procedure_id: params[:procedure_id]), diff --git a/app/views/users/dossiers/show/_header.html.haml b/app/views/users/dossiers/show/_header.html.haml index d2b3194de..67be0feb1 100644 --- a/app/views/users/dossiers/show/_header.html.haml +++ b/app/views/users/dossiers/show/_header.html.haml @@ -21,8 +21,8 @@ title: t('views.users.dossiers.demande.edit_dossier_title') = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier }) - %nav.tabs - %ul + %nav.fr-tabs + %ul.fr-tabs__list = dynamic_tab_item(t('views.users.dossiers.show.header.summary'), dossier_path(dossier)) = dynamic_tab_item(t('views.users.dossiers.show.header.request'), [demande_dossier_path(dossier), modifier_dossier_path(dossier)]) = dynamic_tab_item(t('views.users.dossiers.show.header.mailbox'), messagerie_dossier_path(dossier)) diff --git a/spec/system/experts/expert_spec.rb b/spec/system/experts/expert_spec.rb index 3f3ae3741..74e187ab5 100644 --- a/spec/system/experts/expert_spec.rb +++ b/spec/system/experts/expert_spec.rb @@ -72,7 +72,7 @@ describe 'Inviting an expert:' do click_on '1 avis à donner' click_on avis.dossier.user.email - within('.tabs') { click_on 'Avis' } + within('.fr-tabs') { click_on 'Avis' } expect(page).to have_text("Demandeur : #{avis.claimant.email}") expect(page).to have_text('Cet avis est confidentiel') @@ -102,7 +102,7 @@ describe 'Inviting an expert:' do click_on '1 avis à donner' click_on avis.dossier.user.email - within('.tabs') { click_on 'Avis' } + within('.fr-tabs') { click_on 'Avis' } expect(page).to have_text("Demandeur : #{avis.claimant.email}") expect(page).to have_text('Question ?') expect(page).to have_text('Cet avis est confidentiel') @@ -200,7 +200,7 @@ describe 'Inviting an expert:' do click_on '1 avis à donner' click_on avis_1.dossier.user.email - within('.tabs') { click_on 'Avis' } + within('.fr-tabs') { click_on 'Avis' } expect(page).to have_text("Demandeur : #{avis_1.claimant.email}") click_on 'Voir les avis' expect(page).to have_text("Vous") @@ -216,7 +216,7 @@ describe 'Inviting an expert:' do click_on '1 avis à donner' click_on avis_2.dossier.user.email - within('.tabs') { click_on 'Avis' } + within('.fr-tabs') { click_on 'Avis' } expect(page).to have_text("Demandeur : #{avis_2.claimant.email}") click_on 'Voir les avis' expect(page).to have_text("Vous") diff --git a/spec/system/routing/rules_full_scenario_spec.rb b/spec/system/routing/rules_full_scenario_spec.rb index cba6ac0ac..08dff3fe9 100644 --- a/spec/system/routing/rules_full_scenario_spec.rb +++ b/spec/system/routing/rules_full_scenario_spec.rb @@ -204,14 +204,14 @@ describe 'The routing with rules', js: true do ## on the dossiers list click_on procedure.libelle expect(page).to have_current_path(instructeur_procedure_path(procedure)) - expect(find('.tabs')).to have_css('span.notifications') + expect(find('.fr-tabs')).to have_css('span.notifications') ## on the dossier itself click_on 'suivi' click_on litteraire_user.email expect(page).to have_current_path(instructeur_dossier_path(procedure, litteraire_user.dossiers.first)) expect(page).to have_text('Annotations privées') - expect(find('.tabs')).to have_css('span.notifications') + expect(find('.fr-tabs')).to have_css('span.notifications') log_out # the scientifiques instructeurs should not have a notification diff --git a/spec/system/users/list_dossiers_spec.rb b/spec/system/users/list_dossiers_spec.rb index 3f8938f9b..c00436d63 100644 --- a/spec/system/users/list_dossiers_spec.rb +++ b/spec/system/users/list_dossiers_spec.rb @@ -231,7 +231,7 @@ describe 'user access to the list of their dossiers', js: true do it "appears in the result list" do expect(current_path).to eq(dossiers_path) expect(page).to have_content("Résultat de la recherche pour « #{dossier_en_construction.id} »") - expect(page).not_to have_css('.tabs') + expect(page).not_to have_css('.fr-tabs') expect(page).to have_content(dossier_en_construction.id) end end diff --git a/spec/views/users/dossiers/index.html.haml_spec.rb b/spec/views/users/dossiers/index.html.haml_spec.rb index 3f9eacd84..0fe392a35 100644 --- a/spec/views/users/dossiers/index.html.haml_spec.rb +++ b/spec/views/users/dossiers/index.html.haml_spec.rb @@ -76,7 +76,7 @@ describe 'users/dossiers/index', type: :view do end it 'n’affiche la barre d’onglets' do - expect(rendered).to have_selector('nav.tabs') + expect(rendered).to have_selector('nav.fr-tabs') end end @@ -88,9 +88,9 @@ describe 'users/dossiers/index', type: :view do end it 'affiche la barre d’onglets' do - expect(rendered).to have_selector('nav.tabs') - expect(rendered).to have_selector('nav.tabs li', count: 5) - expect(rendered).to have_selector('nav.tabs li.active', count: 1) + expect(rendered).to have_selector('nav.fr-tabs') + expect(rendered).to have_selector('nav.fr-tabs li', count: 5) + expect(rendered).to have_selector('nav.fr-tabs li.active', count: 1) end end diff --git a/spec/views/users/dossiers/show/_header.html.haml_spec.rb b/spec/views/users/dossiers/show/_header.html.haml_spec.rb index 2529c86ec..f072d0191 100644 --- a/spec/views/users/dossiers/show/_header.html.haml_spec.rb +++ b/spec/views/users/dossiers/show/_header.html.haml_spec.rb @@ -13,7 +13,7 @@ describe 'users/dossiers/show/header', type: :view do expect(rendered).to have_text("Dossier nº #{dossier.id}") expect(rendered).to have_text("en construction") - expect(rendered).to have_selector("nav.tabs") + expect(rendered).to have_selector("nav.fr-tabs") expect(rendered).to have_link("Résumé", href: dossier_path(dossier)) expect(rendered).to have_link("Demande", href: demande_dossier_path(dossier)) end