style(services): service form converted to dsfr

app/components/dsfr/input_errorable.rb

@@ -1,10 +1,13 @@
 module Dsfr
   module InputErrorable
     extend ActiveSupport::Concern
+
     included do
       delegate :object, to: :@form
       delegate :errors, to: :object
 
+      renders_one :hint
+
       private
 
       # lookup for edge case from `form.rich_text_area`
@@ -89,6 +92,10 @@ module Dsfr
       end
 
       def hint
+        get_slot(:hint).presence || default_hint
+      end
+
+      def default_hint
         I18n.t("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}")
       end
 
@@ -101,6 +108,8 @@ module Dsfr
       end
 
       def hint?
+        return true if get_slot(:hint).present?
+
         I18n.exists?("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}")
       end
     end

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

@@ -1,35 +1,19 @@
-= form_with model: [ :admin, service], local: true, html: { class: 'form' } do |f|
+= form_with model: [ :admin, service], local: true do |f|
 
-  = f.label :nom do
-    Nom du service
-    %span.mandatory *
+  = render Dsfr::InputComponent.new(form: f, attribute: :nom, input_type: :text_field)
 
-  %p.notice Indiquez le nom et la direction rattachée séparé par une virgule
+  = render Dsfr::InputComponent.new(form: f, attribute: :organisme, input_type: :text_field)
 
-  = f.text_field :nom, placeholder: 'service jeunesse et prévention, direction des affaires maritimes', required: true
+  .fr-input-group
+    = f.label :type_organisme, class: "fr-label" do
+      Type d’organisme
 
-  = f.label :organisme do
-    Organisme/s
-    %span.mandatory *
-  %p.notice Indiquez les organismes depuis l’échelon territorial jusqu’au ministère séparés par une virgule
-  = f.text_field :organisme, placeholder: "mairie de Mours, préfecture de l'Oise, ministère de la Culture", required: true
+    = f.select :type_organisme, Service.type_organismes.keys.map { |key| [ I18n.t("type_organisme.#{key}"), key] }, {}, class: 'fr-select'
 
-  = f.label :type_organisme do
-    Type d’organisme
-    %span.mandatory *
-
-  = f.select :type_organisme, Service.type_organismes.keys.map { |key| [ I18n.t("type_organisme.#{key}"), key] }, class: 'width-33-desktop width-100-mobile'
-
-  = f.label :siret do
-    Numéro SIRET
-    %span.mandatory *
-
-  %p.notice
-    Veuillez saisir le numéro de SIRET de l’organisme dont ce service dépend.
-    %br
-    = link_to "➡ Rechercher le numéro SIRET sur « annuaire-entreprises.data.gouv.fr »", annuaire_link, target: "_blank"
-
-  = f.text_field :siret, placeholder: "14 chiffres", required: true
+  = render Dsfr::InputComponent.new(form: f, attribute: :siret, input_type: :text_field, opts: { placeholder: "14 chiffres, sans espace" }) do |c|
+    - c.with_hint do
+      = "Indiquez le numéro de SIRET de l’organisme dont ce service dépend. Rechercher le SIRET sur "
+      = link_to("annuaire-entreprises.data.gouv.fr", annuaire_link, **external_link_attributes)
 
   = render Dsfr::CalloutComponent.new(title: "Informations de contact") do |c|
     - c.body do
@@ -42,31 +26,10 @@
       %br
       Ces informations de contact seront visibles par les utilisateurs de la démarche, affichées dans le menu « Aide », ainsi qu’en pied de page lors du dépôt d’un dossier. En cas d’informations invalides, #{APPLICATION_NAME} se réserve le droit de suspendre la publication de la démarche.
 
-  = f.label :email do
-    Adresse email
-    %span.mandatory *
-
-  %p.notice
-    Indiquez une adresse Email valide qui permettra de recevoir et de répondre aux questions des usagers.
-
-  = f.email_field :email, placeholder: 'contact@mon-service.fr', required: true, class: 'width-33-desktop width-100-mobile'
-
-  = f.label :telephone do
-    Numéro de téléphone
-    %span.mandatory *
-  %p.notice Indiquez le numéro de téléphone du service valide le plus à même de fournir des réponses pertinentes à vos usagers
-  = f.telephone_field :telephone, placeholder: '04 12 24 42 37', required: true, class: 'width-33-desktop width-100-mobile'
-
-  = f.label :horaires do
-    Horaires
-    %span.mandatory *
-  %p.notice   Indiquez les jours ouvrables et les horaires où les usagers peuvent vous joindre
-  = f.text_area :horaires, placeholder: "Du lundi au vendredi de 9 h 30 à 17 h 30. Le samedi de 9 h 30 à 12 h.", required: true, class: 'width-66-desktop width-100-mobile'
-
-  = f.label :adresse do
-    Adresse postale
-    %span.mandatory *
-  = f.text_area :adresse, placeholder: "20 avenue de Ségur, 75007 Paris", required: true, class: 'width-66-desktop width-100-mobile'
+  = render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field)
+  = render Dsfr::InputComponent.new(form: f, attribute: :telephone, input_type: :telephone_field)
+  = render Dsfr::InputComponent.new(form: f, attribute: :horaires, input_type: :text_area)
+  = render Dsfr::InputComponent.new(form: f, attribute: :adresse, input_type: :text_area)
 
   - if procedure_id.present?
     = hidden_field_tag :procedure_id, procedure_id

config/locales/models/service/fr.yml

@@ -9,6 +9,25 @@ fr:
         adresse: 'Adresse postale'
         email: 'Email de contact'
         telephone: 'Téléphone'
+        nom: Nom du service
+        organisme: Organisme(s)
+        hints:
+          nom: |
+            Indiquez le nom et la direction rattachée, séparés par une virgule.
+            Exemple : service jeunesse et prévention, direction des affaires maritimes
+          organisme: |
+            Indiquez les organismes depuis l’échelon territorial jusqu’au ministère séparés par une virgule.
+            Exemple : mairie de Mours, préfecture de l'Oise, ministère de la Culture
+          email: |
+            Indiquez une adresse email valide qui permettra de recevoir et de répondre aux questions des usagers.
+            Exemple : contact@mairie-de-mours.fr
+          telephone: "Indiquez le numéro de téléphone du service valide le plus à même de fournir des réponses pertinentes à vos usagers. Exemple : 01 23 45 67 89"
+          horaires: |
+            Indiquez les jours ouvrables et les horaires où les usagers peuvent vous joindre.
+            Exemple : Du lundi au vendredi de 9h30 à 17h30, le samedi de 9h30 à 12h.
+          adresse: |
+            Indiquez l’adresse à laquelle un usager peut vous contacter, par exemple s’il n’est pas en capacité de compléter son formulaire en ligne.
+
     errors:
       models:
         service: