Merge pull request #8710 from demarches-simplifiees/use-DSFR-class-badge-for-dossier-states

[Design] Implémentation des classes DSFR pour les badges d'état des dossiers

app/assets/stylesheets/02_utils.scss

@@ -143,6 +143,20 @@
   vertical-align: super;
 }
 
+// Labels that we only want for screen readers
+// https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/
+.sr-only {
+  border: none;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  width: 1px;
+  overflow: hidden;
+  position: absolute !important;
+  word-wrap: normal !important;
+}
+
 // generate spacer utility like bootstrap my-2 -> margin-left/right: 2 * $default-spacer
 // using $direction.key as css modifier, $direction.values to set css properties
 // scale it using $steps

app/assets/stylesheets/dossiers_table.scss

@@ -58,13 +58,7 @@
   }
 
   .status-col {
-    width: 110px;
-
-    .label {
-      width: 110px;
-      text-align: center;
-      margin: 0 4px;
-    }
+    width: 175px;
   }
 
   .updated-at-col {

app/assets/stylesheets/labels.scss

@@ -10,69 +10,4 @@
   border-radius: 4px;
   font-size: 12px;
   line-height: 18px;
-
-  &.instruction {
-    background-color: #FFFFFF;
-    color: $blue-france-500;
-    border: 1px solid $blue-france-500;
-  }
-
-  &.en-instruction {
-    @extend .instruction;
-  }
-
-  &.construction {
-    background-color: #FFFFFF;
-    color: $black;
-    border: 1px solid $black;
-  }
-
-  &.en-construction {
-    @extend .construction;
-  }
-
-  &.accepted {
-    background-color: $green;
-  }
-
-  &.accepte {
-    @extend .accepted;
-  }
-
-  &.refused {
-    background-color: $dark-red;
-  }
-
-  &.refuse {
-    @extend .refused;
-  }
-
-  &.without-continuation {
-    background-color: $black;
-  }
-
-  &.sans-suite {
-    @extend .without-continuation;
-  }
-}
-
-// Labels that we only want for screen readers
-// https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/
-.sr-only {
-  border: none;
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  width: 1px;
-  overflow: hidden;
-  position: absolute !important;
-  word-wrap: normal !important;
-}
-
-.label-bold {
-  font-size: 18px;
-  margin-bottom: 16px;
-  display: block;
-  font-weight: bold;
 }

app/helpers/dossier_helper.rb

@@ -60,10 +60,26 @@ module DossierHelper
     end
   end
 
+  def class_badge_state(state)
+    case state
+    when Dossier.states.fetch(:en_construction), Dossier.states.fetch(:en_instruction)
+      'fr-badge--info'
+    when Dossier.states.fetch(:accepte)
+      'fr-badge--success'
+    when Dossier.states.fetch(:refuse)
+      'fr-badge--warning'
+    when Dossier.states.fetch(:sans_suite)
+      'fr-badge--new'
+    when Dossier.states.fetch(:brouillon)
+      ''
+    else
+      ''
+    end
+  end
+
   def status_badge(state, alignment_class = '')
     status_text = dossier_display_state(state, lower: true)
-    status_class = state.tr('_', '-')
-    tag.span(status_text, class: "label #{status_class} #{alignment_class}", role: 'status')
+    tag.span(status_text, class: "fr-badge #{class_badge_state(state)} fr-badge--no-icon #{alignment_class}", role: 'status')
   end
 
   def deletion_reason_badge(reason)

spec/system/instructeurs/instruction_spec.rb

@@ -41,7 +41,7 @@ describe 'Instructing a dossier:', js: true do
 
     expect(page).to have_text('Dossier passé en instruction.')
     expect(page).to have_text('Instruire le dossier')
-    expect(page).to have_selector('.label.en-instruction')
+    expect(page).to have_selector('.fr-badge', text: 'en instruction')
 
     dossier.reload
     expect(dossier.state).to eq(Dossier.states.fetch(:en_instruction))