remove specific tabs css and use DSFR tabs

app/assets/stylesheets/tabs.scss

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

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

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
+    %nav.fr-tabs
-      %ul
+      %ul.fr-tabs__list
         = tab_item('le dossier',
           apercu_admin_procedure_path(@dossier.procedure, tab: 'dossier'),
           active: @tab == 'dossier')

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') }
+    %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') }
-      %ul
+      %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))

app/views/experts/avis/_header.html.haml

@@ -18,8 +18,8 @@
             %span.fr-download__detail
               ZIP
 
-    %nav.tabs
+    %nav.fr-tabs
-      %ul
+      %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

app/views/experts/avis/procedure.html.haml

@@ -11,8 +11,8 @@
       .procedure-header
         %h1.fr-h3= procedure_libelle @procedure
 
-        %nav.tabs
+        %nav.fr-tabs
-          %ul
+          %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,

app/views/instructeurs/dossiers/_header_bottom.html.haml

@@ -1,6 +1,6 @@
 #header-bottom.fr-container
-  %nav.tabs
+  %nav.fr-tabs
-    %ul
+    %ul.fr-tabs__list
       - notifications_summary = current_instructeur.notifications_for_dossier(dossier)
 
       = dynamic_tab_item(t('views.instructeurs.dossiers.tab_steps.request'),

app/views/instructeurs/procedures/_tabs.html.haml

@@ -1,5 +1,5 @@
-%nav.tabs.mt-3
+%nav.fr-tabs.mt-3
-  %ul
+  %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',

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') }
+    %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') }
-      %ul
+      %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))

app/views/root/patron.html.haml

@@ -231,8 +231,8 @@
   .sub-header
     .container
       Titre
-      %nav.tabs
+      %nav.fr-tabs
-        %ul
+        %ul.fr-tabs__list
           = tab_item("Onglet actif", "#", active: true)
           = tab_item("Onglet inactif", "#")
           = tab_item("Onglet avec badge", "#", badge: 2)

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

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') }
+      %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') }
-        %ul
+        %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]),

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
+    %nav.fr-tabs
-      %ul
+      %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))

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

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

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

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.fr-tabs')
-      expect(rendered).to have_selector('nav.tabs li', count: 5)
+      expect(rendered).to have_selector('nav.fr-tabs li', count: 5)
-      expect(rendered).to have_selector('nav.tabs li.active', count: 1)
+      expect(rendered).to have_selector('nav.fr-tabs li.active', count: 1)
     end
   end
 

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