Merge pull request #9258 from demarches-simplifiees/DSFR-champs

Passe les champs au DSFR

.node-version

@@ -1 +1 @@
-16.14.0
+18.17.0

app/assets/stylesheets/buttons.scss

@@ -316,13 +316,12 @@ ul.dropdown-items {
     margin-bottom: 2 * $default-spacer;
   }
 
-  input:not(.fr-btn),
-  select {
+  input:not(.fr-btn) {
     width: 200px;
     display: inline-block;
     background-color: $light-grey;
     border: 1px solid $border-grey;
-  }
+   }
 
   [disabled] {
     display: none;

app/assets/stylesheets/dsfr.scss

@@ -99,6 +99,21 @@ fieldset {
   width: max-content;
 }
 
+button.fr-tag-bug {
+  background-color: $blue-france-500;
+  color: #FFFFFF;
+
+  &:hover {
+    background-color: #1212FF;
+    color: #FFFFFF;
+  }
+
+  .tag-dismiss {
+    font-size: 1rem;
+    margin-left: 10px;
+  }
+}
+
 // on veut ferrer à droite le dropdown de sélecteur de langue
 @media (min-width: 62em) {
   .fr-nav__item.custom-fr-translate-flex-end {

app/assets/stylesheets/forms.scss

@@ -20,7 +20,8 @@
     font-style: italic;
   }
 
-  .fr-input-group {
+  .fr-input-group,
+  .fr-select-group {
     margin-bottom: 1rem;
   }
 
@@ -125,7 +126,6 @@
 
     &.editable-champ-checkbox {
       label {
-        padding-left: 28px;
         font-weight: normal;
       }
 
@@ -210,18 +210,17 @@
     }
   }
 
-  .fr-label {
+  .fr-label .fr-hint-text > *,
+  .fr-fieldset__legend .fr-hint-text > * {
     // la description d'un champ peut contenir du markup (markdown->html),
     // on herite donc la fontsize/mrgin/padding du fr-hint-text
-    .fr-hint-text > * {
-      font-size: inherit;
-      margin: inherit;
-      padding: inherit;
-    }
+    font-size: inherit;
+    margin: inherit;
+    padding: inherit;
   }
 
   input[type=password],
-  select {
+  select:not(.fr-select) {
     display: block;
     margin-bottom: 0;
 
@@ -246,9 +245,7 @@
     }
   }
 
-  input[type=text]:not([data-address='true']),
-  select {
-    border-radius: 4px;
+  input[type=text]:not([data-address='true']) {
     border: solid 1px $border-grey;
     padding: $default-padding;
 

app/components/dsfr/input_component.rb

@@ -17,6 +17,10 @@ def initialize(form:, attribute:, input_type: :text_field, opts: {}, required: t
     @required = required
   end
 
+  def dsfr_champ_container
+    :div
+  end
+
   # add invalid class on input when input is invalid
   # and and valid on input only if another input is invalid
   def input_group_opts
@@ -50,6 +54,10 @@ def label
     get_slot(:label).presence || default_label
   end
 
+  def dsfr_input_classname
+    'fr-input'
+  end
+
   # kind of input helpers
   def password?
     @input_type == :password_field

app/components/dsfr/input_errorable.rb

@@ -8,6 +8,30 @@ module InputErrorable
 
       renders_one :hint
 
+      def dsfr_group_classname
+        if dsfr_champ_container == :fieldset
+          'fr-fieldset'
+        else
+          "#{dsfr_input_classname}-group"
+        end
+      end
+
+      def input_group_error_class_names
+        {
+          "#{dsfr_group_classname}--error" => errors_on_attribute?,
+          "#{dsfr_group_classname}--valid" => !errors_on_attribute? && errors_on_another_attribute?
+        }
+      end
+
+      def errors_on_attribute?
+        errors.has_key?(attribute_or_rich_body)
+      end
+
+      # errors helpers
+      def error_full_messages
+        errors.full_messages_for(attribute_or_rich_body)
+      end
+
       private
 
       # lookup for edge case from `form.rich_text_area`
@@ -21,15 +45,14 @@ def attribute_or_rich_body
         end
       end
 
-      def input_group_error_class_names
-        {
-          "fr-input-group--error": errors_on_attribute?,
-          "fr-input-group--valid": !errors_on_attribute? && errors_on_another_attribute?
-        }
+      def fr_fieldset?
+        !['fr-input', 'fr-radio', 'fr-select'].include?(dsfr_input_classname)
       end
 
       def input_error_class_names
-        { 'fr-input--error': errors_on_attribute? }
+        {
+          "#{dsfr_input_classname}--error": errors_on_attribute?
+        }
       end
 
       def input_error_opts
@@ -70,23 +93,10 @@ def input_opts(other_opts = {})
         @opts
       end
 
-      def describedby_id
-        dom_id(@champ, :error_full_messages)
-      end
-
       def errors_on_another_attribute?
         !errors.empty?
       end
 
-      def errors_on_attribute?
-        errors.has_key?(attribute_or_rich_body)
-      end
-
-      # errors helpers
-      def error_full_messages
-        errors.full_messages_for(attribute_or_rich_body)
-      end
-
       def map_array_to_hash_with_true(array_or_string_or_nil)
         Array(array_or_string_or_nil).to_h { [_1, true] }
       end

app/components/dsfr/input_status_message_component.rb

@@ -0,0 +1,13 @@
+module Dsfr
+  class InputStatusMessageComponent < ApplicationComponent
+    def initialize(errors_on_attribute:, error_full_messages:, described_by:)
+      @errors_on_attribute = errors_on_attribute
+      @error_full_messages = error_full_messages
+      @described_by = described_by
+    end
+
+    def render?
+      @errors_on_attribute
+    end
+  end
+end

app/components/dsfr/input_status_message_component/input_status_message_component.html.haml

@@ -0,0 +1,3 @@
+.fr-messages-group{ id: @describedby_id }
+  - @error_full_messages.each do |error_message|
+    %p{ class: class_names('fr-message' => true, "fr-message--#{@errors_on_attribute ? 'error' : 'valid'}" => true) }= error_message

app/components/editable_champ/annuaire_education_component.rb

@@ -1,2 +1,5 @@
 class EditableChamp::AnnuaireEducationComponent < EditableChamp::ComboSearchComponent
+  def dsfr_input_classname
+    'fr-input'
+  end
 end

app/components/editable_champ/champ_label_component/champ_label_component.html.haml

@@ -1,9 +1,12 @@
 = # we do this trick because some html elements should use 'label' and some should be plain paragraphs
+
 - if @champ.html_label?
   = @form.label @champ.main_value_name, id: @champ.labelledby_id, for: @champ.input_id, class: 'fr-label' do
     - render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
+- elsif @champ.legend_label?
+  %legend.fr-fieldset__legend.fr-text--regular{ id: @champ.labelledby_id }= render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
+- elsif @champ.single_checkbox?
+  -# no label to add
 - else
   .fr-label.mb-4{ id: @champ.labelledby_id }
     = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
-
-

app/components/editable_champ/checkbox_component.rb

@@ -1,2 +1,9 @@
 class EditableChamp::CheckboxComponent < EditableChamp::EditableChampBaseComponent
+  def dsfr_champ_container
+    :fieldset
+  end
+
+  def dsfr_input_classname
+    'fr-radio'
+  end
 end

app/components/editable_champ/checkbox_component/checkbox_component.html.haml

@@ -1,4 +1,9 @@
-= @form.check_box :value,
-  { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: @champ.describedby_id }, class: class_names('required' => @champ.required?)},
-  'true',
-  'false'
+.fr-fieldset__element
+  .fr-checkbox-group
+    = @form.check_box :value,
+      { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: @champ.describedby_id }, class: class_names('required' => @champ.required?)},
+      'true',
+      'false'
+    %label.fr-label{ for: @champ.input_id, id: @champ.labelledby_id }
+      = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
+

app/components/editable_champ/communes_component.rb

@@ -1,6 +1,10 @@
 class EditableChamp::CommunesComponent < EditableChamp::EditableChampBaseComponent
   include ApplicationHelper
 
+  def dsfr_champ_container
+    :fieldset
+  end
+
   private
 
   def commune_options

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 la commune 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,23 @@
-%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 : "radio-#{index}-#{value.parameterize}"
+            = @form.label :value, option, for: index == 0 ? @champ.input_id : "radio-#{index}-#{value.parameterize}", class: 'fr-label'
   - 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/components/editable_champ/date_component.rb

@@ -1,2 +1,5 @@
 class EditableChamp::DateComponent < EditableChamp::EditableChampBaseComponent
+  def dsfr_input_classname
+    'fr-input'
+  end
 end

app/components/editable_champ/datetime_component.rb

@@ -1,4 +1,8 @@
 class EditableChamp::DatetimeComponent < EditableChamp::EditableChampBaseComponent
+  def dsfr_input_classname
+    'fr-input'
+  end
+
   def formatted_value_for_datetime_locale
     if @champ.valid? && @champ.value.present?
       # convert to a format that the datetime-local input can understand

app/components/editable_champ/decimal_number_component.rb

@@ -1,2 +1,5 @@
 class EditableChamp::DecimalNumberComponent < EditableChamp::EditableChampBaseComponent
+  def dsfr_input_classname
+    'fr-input'
+    end
 end

app/components/editable_champ/departements_component.rb

@@ -3,6 +3,10 @@ class EditableChamp::DepartementsComponent < EditableChamp::EditableChampBaseCom
 
   private
 
+  def dsfr_input_classname
+    'fr-select'
+  end
+
   def options
     APIGeoService.departements.map { ["#{_1[:code]} – #{_1[:name]}", _1[:code]] }
   end

app/components/editable_champ/departements_component/departements_component.html.haml

@@ -1 +1 @@
-= @form.select :value, options, select_options, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile"
+= @form.select :value, options, select_options, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: "fr-select"

app/components/editable_champ/dgfip_component.rb

@@ -1,2 +1,5 @@
 class EditableChamp::DgfipComponent < EditableChamp::EditableChampBaseComponent
+  def dsfr_input_classname
+    'fr-input'
+  end
 end

app/components/editable_champ/dossier_link_component.rb

@@ -1,4 +1,8 @@
 class EditableChamp::DossierLinkComponent < EditableChamp::EditableChampBaseComponent
+  def dsfr_input_classname
+    'fr-input'
+    end
+
   def dossier
     @dossier ||= @champ.blank? ? nil : Dossier.visible_by_administration.find_by(id: @champ.to_s)
   end

app/components/editable_champ/drop_down_list_component.rb

@@ -1,6 +1,14 @@
 class EditableChamp::DropDownListComponent < EditableChamp::EditableChampBaseComponent
   def select_class_names
-    class_names('width-100': contains_long_option?)
+    class_names('width-100': contains_long_option?, 'fr-select': true)
+  end
+
+  def dsfr_input_classname
+    'fr-select'
+  end
+
+  def dsfr_champ_container
+    @champ.render_as_radios? ? :fieldset : :div
   end
 
   def contains_long_option?