style(procedures): dsfr compat instructeurs/expert procedures list

app/assets/stylesheets/procedure_list.scss

@@ -4,26 +4,11 @@
 
 .procedure-list {
   .procedure-item {
-    border-bottom: 1px solid $border-grey;
-
-    &:last-child {
-      border-bottom: none;
+    background-color: rgba(0, 0, 0, 0.02);
   }
 
-    a {
-      @include vertical-padding(24px);
-      background-image: none; // remove DSFR underline
-      color: $black;
-      width: 100%;
-
-      &:hover {
-        background-color: $light-grey;
-
-        .procedure-title {
-          text-decoration: underline;
-        }
-      }
-    }
+  .procedure-logo-link {
+    background-image: none;
   }
 
   .procedure-logo {
@@ -35,32 +20,29 @@
     background-position: 95% 50%;
   }
 
-  .procedure-title {
-    min-height: 40px;
-    font-size: 20px;
-    margin-bottom: 16px;
-  }
-
   .procedure-status {
     margin-left: auto;
   }
 
   .procedure-stats {
     list-style-type: none;
+    padding-inline-start: 0;
 
     li {
       min-height: 36px;
-      border-left: 1px solid $border-grey;
       width: 90px;
       position: relative;
 
+      border-left: 1px solid $border-grey;
+
+      &:first-child {
+        border-left: none;
+      }
+
       &:hover {
         background-color: rgba(0, 0, 0, 0.05);
       }
 
-      &:last-child {
-        border-right: 1px solid $border-grey;
-      }
 
       .stats-number,
       .stats-legend {

app/helpers/procedure_helper.rb

@@ -8,11 +8,17 @@ module ProcedureHelper
   end
 
   def procedure_libelle(procedure)
-    parts = procedure.brouillon? ? [tag.span(t('helpers.procedure.testing_procedure'), class: 'badge')] : []
+    parts = procedure.brouillon? ? [procedure_badge(procedure)] : []
     parts << procedure.libelle
     safe_join(parts, ' ')
   end
 
+  def procedure_badge(procedure)
+    return nil unless procedure.brouillon?
+
+    tag.span(t('helpers.procedure.testing_procedure'), class: 'fr-badge')
+  end
+
   def procedure_publish_label(procedure, key)
     # i18n-tasks-use t('modal.publish.body.publish')
     # i18n-tasks-use t('modal.publish.body.reopen')

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

@@ -5,15 +5,16 @@
 
   %ul.procedure-list
     - @avis_by_procedure.each do |p, procedure_avis|
-      %li.procedure-item.flex.align-start
-        = link_to(procedure_instructeur_avis_index_path(p)) do
+      %li.procedure-item.flex.align-start.fr-my-3w.fr-p-2w
         .flex
-
+          = link_to instructeur_procedure_path(p), class: 'procedure-logo-link' do
             .procedure-logo{ style: "background-image: url(#{p.logo_url})" }
 
           .procedure-details
-              %p.procedure-title
-                = procedure_libelle p
+            %p.fr-mb-2w
+              = procedure_badge(p)
+              = link_to(p.libelle, procedure_instructeur_avis_index_path(p), class: "fr-link fr-ml-1w")
+
             %ul.procedure-stats.flex
               %li
                 %object

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

@@ -1,12 +1,12 @@
-%li.procedure-item.flex.align-start
-  = link_to(instructeur_procedure_path(p)) do
+%li.procedure-item.flex.align-start.fr-my-3w.fr-p-2w
   .flex
-
+    = link_to instructeur_procedure_path(p), class: 'procedure-logo-link' do
       .procedure-logo{ style: "background-image: url(#{p.logo_url})" }
 
     .procedure-details
-        %p.procedure-title
-          = procedure_libelle p
+      %p.fr-mb-2w
+        = procedure_badge(p)
+        = link_to(p.libelle, instructeur_procedure_path(p), class: "fr-link fr-ml-1w")
       %ul.procedure-stats.flex
         %li
           %object