amelioration(champs.commune): passe le champs commune au DSFR, l'encapsule dans un fieldset et améliore le wording

app/components/editable_champ/communes_component/communes_component.en.yml

@@ -1,4 +1,5 @@
 ---
 en:
-  postal_code: Enter the postal code then select the municipality from the list
+  postal_code: "Enter <strong>the postal code</strong>"
+  commune: "Select <strong>the municipality</strong> from the list"
   not_found: No municipality found for postal code %{postal_code}. Please check that you haven't made any mistakes.

app/components/editable_champ/communes_component/communes_component.fr.yml

@@ -1,4 +1,5 @@
 ---
 fr:
-  postal_code: Renseignez le code postal puis sélectionnez la commune dans la liste
+  postal_code: "Renseignez le <strong>code postal</strong>"
+  commune: "Sélectionnez <strong>la commune</strong> dans la liste"
   not_found: Aucune commune trouvée pour le code postal %{postal_code}. Verifiez que vous n'avez pas fait d’erreur.

app/components/editable_champ/communes_component/communes_component.html.haml

@@ -1,13 +1,26 @@
-%label.notice{ for: code_postal_input_id }= t('.postal_code')
-= @form.text_field :code_postal, required: @champ.required?, id: code_postal_input_id, class: "width-33-desktop width-100-mobile small-margin"
-- if @champ.code_postal?
+.fr-fieldset__element.fr-mb-0
+  .fr-input-group
+    = @form.label :code_postal, t('.postal_code').html_safe, class: 'fr-label', for: code_postal_input_id
+    = @form.text_field :code_postal, required: @champ.required?, id: code_postal_input_id, class: "width-33-desktop width-100-mobile small-margin fr-input"
+  - if @champ.code_postal?
+    - if commune_options.empty?
+      .fr-error-text.mb-4= t('.not_found', postal_code: @champ.code_postal)
+
+.fr-fieldset__element.fr-mb-0
   - if commune_options.empty?
-    .fr-error-text.mb-4= t('.not_found', postal_code: @champ.code_postal)
+    - #noop
   - elsif commune_options.size <= 3
-    %fieldset.radios
+    %fieldset.fr-fieldset
+      .fr-fieldset__legend--regular.fr-fieldset__legend= t('.commune').html_safe
+
       - commune_options.each.with_index do |(option, value), index|
-        %label
-          = @form.radio_button :value, value, checked: @champ.selected == value, id: index == 0 ? @champ.input_id : nil
-          = option
+        .fr-fieldset__element
+          .fr-radio-group
+            = @form.radio_button :value, value, checked: @champ.selected == value, id: index == 0 ? @champ.input_id : nil
+            = @form.label :value, option, for: option, class: 'fr-label'
+            / %label
+            /   = @form.radio_button :value, value, checked: @champ.selected == value, id: index == 0 ? @champ.input_id : nil
+            /   = option
   - else
-    = @form.select :value, commune_options, commune_select_options, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile"
+    = @form.label :value, t('.commune').html_safe, for: @champ.input_id, class: 'fr-label'
+    = @form.select :value, commune_options, commune_select_options, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile fr-select"

app/models/champs/commune_champ.rb

@@ -88,6 +88,18 @@ class Champs::CommuneChamp < Champs::TextChamp
     end
   end
 
+  def html_label?
+    false
+  end
+
+  def legend_label?
+    true
+  end
+
+  def dsfr_champ_container
+    :fieldset
+  end
+
   private
 
   def safe_to_s