From d164605f3295edadf9dc137032695f940988aba6 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Thu, 17 Aug 2023 16:45:23 +0200
Subject: [PATCH] =?UTF-8?q?amelioration(champs.commune):=20passe=20le=20ch?=
 =?UTF-8?q?amps=20commune=20au=20DSFR,=20l'encapsule=20dans=20un=20fieldse?=
 =?UTF-8?q?t=20et=20am=C3=A9liore=20le=20wording?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../communes_component.en.yml                 |  3 +-
 .../communes_component.fr.yml                 |  3 +-
 .../communes_component.html.haml              | 31 +++++++++++++------
 app/models/champs/commune_champ.rb            | 12 +++++++
 4 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/app/components/editable_champ/communes_component/communes_component.en.yml b/app/components/editable_champ/communes_component/communes_component.en.yml
index 94928ea15..7bd07cc72 100644
--- a/app/components/editable_champ/communes_component/communes_component.en.yml
+++ b/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.
diff --git a/app/components/editable_champ/communes_component/communes_component.fr.yml b/app/components/editable_champ/communes_component/communes_component.fr.yml
index 77b096d10..160339a51 100644
--- a/app/components/editable_champ/communes_component/communes_component.fr.yml
+++ b/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.
diff --git a/app/components/editable_champ/communes_component/communes_component.html.haml b/app/components/editable_champ/communes_component/communes_component.html.haml
index 849a5e1c8..fa297cf12 100644
--- a/app/components/editable_champ/communes_component/communes_component.html.haml
+++ b/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"
diff --git a/app/models/champs/commune_champ.rb b/app/models/champs/commune_champ.rb
index 9b9ca0335..6631735f0 100644
--- a/app/models/champs/commune_champ.rb
+++ b/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