feat(textarea): autoresize textareas

app/assets/stylesheets/forms.scss

@@ -683,3 +683,15 @@ textarea::placeholder {
     }
   }
 }
+
+.resize-none {
+  resize: none;
+}
+
+.resize-x {
+  resize: horizontal;
+}
+
+.resize-y {
+  resize: vertical;
+}

app/components/dsfr/input_component.rb

@@ -9,12 +9,13 @@ class Dsfr::InputComponent < ApplicationComponent
   renders_one :describedby
   renders_one :label
 
-  def initialize(form:, attribute:, input_type: :text_field, opts: {}, required: true)
+  def initialize(form:, attribute:, input_type: :text_field, opts: {}, required: true, autoresize: true)
     @form = form
     @attribute = attribute
     @input_type = input_type
     @opts = opts
     @required = required
+    @autoresize = autoresize
   end
 
   def dsfr_champ_container
@@ -67,6 +68,10 @@ class Dsfr::InputComponent < ApplicationComponent
     @input_type == :email_field
   end
 
+  def autoresize?
+    @input_type == :text_area && @autoresize
+  end
+
   def required?
     @required
   end

app/components/dsfr/input_errorable.rb

@@ -92,6 +92,11 @@ module Dsfr
             'email-input-target': 'input'
           })
         end
+
+        if autoresize?
+          @opts.deep_merge!(data: { controller: 'autoresize' })
+        end
+
         @opts
       end
 
@@ -119,6 +124,10 @@ module Dsfr
         false
       end
 
+      def autoresize?
+        false
+      end
+
       def hint?
         return true if get_slot(:hint).present?
 

app/components/editable_champ/textarea_component/textarea_component.html.haml

@@ -1,4 +1,4 @@
-~ @form.text_area(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, rows: 6, required: @champ.required?, value: html_to_string(@champ.value)))
+~ @form.text_area(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, rows: 6, required: @champ.required?, value: html_to_string(@champ.value), data: { controller: 'autoresize' }))
 
 - if @champ.character_limit_info?
   %p.fr-info-text

app/components/types_de_champ_editor/champ_component/champ_component.html.haml

@@ -62,7 +62,7 @@
             - if !type_de_champ.header_section? && !type_de_champ.titre_identite?
               .cell.fr-mt-1w
                 = form.label :description, "Description du champ (optionnel)", for: dom_id(type_de_champ, :description)
-                = form.text_area :description, class: 'fr-input small-margin small width-100', rows: 3, id: dom_id(type_de_champ, :description)
+                = form.text_area :description, class: 'fr-input small-margin small width-100 resize-y', rows: 3, id: dom_id(type_de_champ, :description)
             - if type_de_champ.header_section?
               .cell.fr-mt-1w
                 = render TypesDeChampEditor::HeaderSectionComponent.new(form: form, tdc: type_de_champ, upper_tdcs: @upper_coordinates.map(&:type_de_champ))

app/javascript/controllers/autoresize_controller.ts

@@ -0,0 +1,18 @@
+import { ApplicationController } from './application_controller';
+import { attach } from '@frsource/autoresize-textarea';
+import { isTextAreaElement } from '@coldwired/utils';
+
+export class AutoresizeController extends ApplicationController {
+  #detach?: () => void;
+  connect(): void {
+    if (isTextAreaElement(this.element)) {
+      this.#detach = attach(this.element)?.detach;
+      this.element.classList.add('resize-none');
+    }
+  }
+
+  disconnect(): void {
+    this.#detach?.();
+    this.element.classList.remove('resize-none');
+  }
+}

config/locales/models/champs/textarea_champ/en.yml

@@ -1,6 +0,0 @@
-en:
-  activerecord:
-    attributes:
-      champs/textarea_champ:
-        hints:
-          value: "Resize the field to enter more lines"

config/locales/models/champs/textarea_champ/fr.yml

@@ -1,6 +0,0 @@
-fr:
-  activerecord:
-    attributes:
-      champs/textarea_champ:
-        hints:
-          value: "Redimensionnez le champ pour saisir plus de lignes"

package.json

@@ -3,6 +3,7 @@
     "@coldwired/actions": "^0.11.2",
     "@coldwired/turbo-stream": "^0.11.1",
     "@coldwired/utils": "^0.11.4",
+    "@frsource/autoresize-textarea": "^2.0.53",
     "@gouvfr/dsfr": "^1.10.1",
     "@graphiql/plugin-explorer": "^0.3.4",
     "@graphiql/toolkit": "^0.9.1",

spec/system/administrateurs/procedure_attestation_template_spec.rb

@@ -128,9 +128,8 @@ describe 'As an administrateur, I want to manage the procedure’s attestation',
         attestation.reload.logo.attached? && attestation.signature.attached? && !attestation.official_layout?
       }
 
-      # footer is rows-limited
       fill_in "Contenu du pied de page", with: ["line1", "line2", "line3", "line4"].join("\n")
-      expect(page).to have_field("Contenu du pied de page", with: "line1\nline2\nline3line4")
+      expect(page).to have_field("Contenu du pied de page", with: "line1\nline2\nline3\nline4")
     end
 
     context "tag in error" do

yarn.lock

@@ -1221,6 +1221,11 @@
   dependencies:
     "@floating-ui/dom" "^1.3.0"
 
+"@frsource/autoresize-textarea@^2.0.53":
+  version "2.0.53"
+  resolved "https://registry.yarnpkg.com/@frsource/autoresize-textarea/-/autoresize-textarea-2.0.53.tgz#10228d23623f201c4f0aad9321118a3fb04b6462"
+  integrity sha512-q8UxpjcfCE8ywICfxpimkYhMVg44vaAFvRkN1qLJ/M23upjq6PdZaHpuOEpbcD4EeV9VJNUG1fr5Dio8TPMs9w==
+
 "@gouvfr/dsfr@^1.10.1":
   version "1.10.1"
   resolved "https://registry.yarnpkg.com/@gouvfr/dsfr/-/dsfr-1.10.1.tgz#a8470374d1f52d4195bd7c3c2b218fe3aaddac90"