remove old badge css and only use DSFR

app/assets/stylesheets/badges.scss

@@ -1,34 +0,0 @@
-@import "colors";
-@import "constants";
-
-.badge {
-  padding: 0 5px;
-  font-size: 14px;
-  font-weight: bold;
-  text-align: center;
-  white-space: nowrap;
-  border-radius: 100px;
-  background-color: rgba(0, 0, 0, 0.08);
-  vertical-align: top;
-
-  &.baseline {
-    vertical-align: baseline;
-  }
-
-  &.warning {
-    background-color: $orange;
-    color: #FFFFFF;
-  }
-}
-
-.badge-group {
-  display: flex;
-
-  .fr-badge {
-    margin-right: $default-spacer;
-  }
-
-  .fr-badge:last-child {
-    margin-right: 0;
-  }
-}

app/components/main_navigation/instructeur_expert_navigation_component/instructeur_expert_navigation_component.html.haml

@@ -9,6 +9,6 @@
         = link_to expert_all_avis_path, class: 'fr-nav__link', aria: aria_current_for(:avis) do
           = Avis.model_name.human(count: 10)
           - if helpers.current_expert.avis_summary[:unanswered] > 0
-            %span.badge.warning= helpers.current_expert.avis_summary[:unanswered]
+            %span.fr-badge.fr-badge--new.fr-badge--no-icon= helpers.current_expert.avis_summary[:unanswered]
 
     = render MainNavigation::AnnouncesLinkComponent.new

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

@@ -1,11 +1,11 @@
 #header-top.fr-container
-  .flex.fr-mb-3w
+  .flex
     %div
       %h1.fr-h3.fr-mb-1w
         = "Dossier nº #{dossier.id}"
 
       = link_to dossier.procedure.libelle.truncate_words(10), instructeur_procedure_path(dossier.procedure), title: dossier.procedure.libelle, class: "fr-link"
-      .fr-mt-2w.badge-group
+      .fr-mt-2w.fr-badge-group
         = procedure_badge(dossier.procedure)
 
         = status_badge(dossier.state)

app/views/invites/_dropdown.html.haml

@@ -5,7 +5,7 @@
     = dsfr_icon('fr-icon-user-add-fill', :sm, :mr)
     - if invites.present?
       = t('views.invites.dropdown.view_invited_people')
-      %span.badge= invites.size
+      %span.fr-badge.fr-ml-1v= invites.size
     - else
       - if dossier.read_only?
         = t('views.invites.dropdown.invite_to_view')

app/views/root/patron.html.haml

@@ -153,11 +153,6 @@
     %span.label.refused .label.refused
     %span.label.without-continuation .label.without-continuation
 
-    %h1 Badges
-
-    %span.badge 1
-    %span.badge.warning 1
-
     %h1 Cards
 
     .card

app/views/shared/_tab_item.html.haml

@@ -3,5 +3,5 @@
     %span.notifications{ 'aria-label': 'notifications' }
   = link_to(url, 'aria-selected': active ? true : nil, class: 'fr-tabs__tab', role: 'tab' ) do
     - if badge.present?
-      %span.badge.fr-mr-1w= badge
+      %span.fr-badge.fr-badge--blue-ecume.fr-mr-1w= badge
     = label

spec/components/main_navigation/instructeur_expert_navigation_component_spec.rb

@@ -68,7 +68,7 @@ describe MainNavigation::InstructeurExpertNavigationComponent, type: :component
     it 'renders a link to expert all avis with current page class' do
       expect(subject).to have_link('Avis', href: component.helpers.expert_all_avis_path)
       expect(subject).to have_selector('a[aria-current="true"]', text: 'Avis')
-      expect(subject).not_to have_selector('span.badge')
+      expect(subject).not_to have_selector('span.fr-badge')
     end
 
     it 'does not have Démarches link' do
@@ -79,7 +79,7 @@ describe MainNavigation::InstructeurExpertNavigationComponent, type: :component
       let(:unanswered) { 2 }
 
       it 'renders an unanswered avis badge for the expert' do
-        expect(subject).to have_selector('span.badge.warning', text: '2')
+        expect(subject).to have_selector('span.fr-badge', text: '2')
       end
     end
 

spec/system/experts/expert_spec.rb

@@ -72,7 +72,7 @@ describe 'Inviting an expert:', js: true do
       expect(page).to have_text('1 avis à donner')
       expect(page).to have_text('0 avis donnés')
 
-      expect(page).to have_selector('.badge', text: 1)
+      expect(page).to have_selector('.fr-badge', text: 1)
       expect(page).to have_selector('.notifications')
 
       click_on '1 avis à donner'
@@ -93,7 +93,7 @@ describe 'Inviting an expert:', js: true do
       expect(page).to have_text('0 avis à donner')
       expect(page).to have_text('1 avis donné')
 
-      expect(page).not_to have_selector('.badge', text: 1)
+      expect(page).not_to have_selector('.fr-badge', text: 1)
       expect(page).not_to have_selector('.notifications')
     end