handle label color translation and class name

app/assets/stylesheets/tags.scss

@@ -28,15 +28,3 @@ $colors: "green-tilleul-verveine",
     color: var(--text-action-high-#{$color});
     }
 }
-
-.grid-tags {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-}
-
-@media (min-width: 62em) {
-  .grid-tags {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-  }
-}

app/controllers/administrateurs/procedure_labels_controller.rb

@@ -56,7 +56,7 @@ module Administrateurs
     end
 
     def set_colors_collection
-      @colors_collection = ProcedureLabel.colors.values
+      @colors_collection = ProcedureLabel.colors.keys
     end
   end
 end

app/helpers/dossier_helper.rb

@@ -130,7 +130,7 @@ module DossierHelper
   end
 
   def tag_label(name, color)
-    tag.span(name, class: "fr-tag fr-tag--sm fr-tag--#{ProcedureLabel.colors.fetch(color.underscore)}")
+    tag.span(name, class: "fr-tag fr-tag--sm fr-tag--#{ProcedureLabel.class_name(color)}")
   end
 
   def demandeur_dossier(dossier)

app/models/label.rb

@@ -28,4 +28,8 @@ class Label < ApplicationRecord
 
   validates :name, :color, presence: true
   validates :name, length: { maximum: NAME_MAX_LENGTH }
+
+  def self.class_name(color)
+    ProcedureLabel.colors.fetch(color.underscore)
+  end
 end

app/views/administrateurs/procedure_labels/_form.html.haml

@@ -6,11 +6,10 @@
       = t('activerecord.attributes.procedure_label.color')
       = asterisk
 
-    .grid-tags
     - @colors_collection.each do |color|
-        .fr-fieldset__element
+      .fr-fieldset__element.fr-fieldset__element--inline
         .fr-radio-group
-            = f.radio_button :color, color, checked: (label.color == color.underscore)
-            = f.label :color, value: color, class: "fr-label fr-tag fr-tag--sm fr-tag--#{color}"
+          = f.radio_button :color, color, checked: (label.color == color)
+          = f.label :color, t("activerecord.attributes.label/color.#{color}"), value: color, class: "fr-label fr-tag fr-tag--sm fr-tag--#{ProcedureLabel.class_name(color)}"
 
   = render Procedure::FixedFooterComponent.new(procedure: @procedure, form: f)

config/locales/models/procedure_label/fr.yml

@@ -4,3 +4,14 @@ fr:
       procedure_label:
         color: Couleur
         name: Nom
+      procedure_label/color: &color
+        green_tilleul_verveine: 'tilleul'
+        green_bourgeon: 'bourgeon'
+        green_emeraude: 'émeraude'
+        green_menthe: 'menthe'
+        blue_ecume: 'écume'
+        purple_glycine: 'glycine'
+        pink_macaron: 'macaron'
+        yellow_tournesol: 'tournesol'
+        brown_cafe_creme: 'café'
+        beige_gris_galet: 'galet'