Merge pull request #4588 from alphagov/add-form-attribute-to-button-c…

…omponent

Add a `form` attribute to the button component

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Add a `form` attribute to the button component ([PR #4588](https://github.com/alphagov/govuk_publishing_components/pull/4588))
+
 ## 51.0.0
 
 * Remove title component margin_top option ([PR #4508](https://github.com/alphagov/govuk_publishing_components/pull/4508))

app/views/govuk_publishing_components/components/docs/button.yml

@@ -147,3 +147,12 @@ examples:
     data:
       text: Button
       aria_describedby: with_aria_describedby
+  with_form_attribute:
+    description: |
+      Buttons will usually be contained within their containing form, but sometimes it is desirable to have the button 
+      outside the form with the `form` attribute pointing to the ID of the form. See 
+      [The Mozilla dev docs on a button's `form` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form)
+      for more information.
+    data:
+      text: With `form` argument
+      form: some_form_id

lib/govuk_publishing_components/presenters/button_helper.rb

@@ -25,7 +25,8 @@ class ButtonHelper
                   :classes,
                   :aria_label,
                   :aria_controls,
-                  :aria_describedby
+                  :aria_describedby,
+                  :form
 
       def initialize(local_assigns)
         @disable_ga4 = local_assigns[:disable_ga4]
@@ -58,6 +59,7 @@ def initialize(local_assigns)
         @button_id = "button-id-#{SecureRandom.hex(4)}"
         @aria_controls = local_assigns[:aria_controls]
         @aria_describedby = local_assigns[:aria_describedby]
+        @form = local_assigns[:form]
 
         if local_assigns.include?(:classes)
           @classes = local_assigns[:classes].split(" ")
@@ -106,6 +108,7 @@ def html_options
         options[:aria][:controls] =  aria_controls if aria_controls
         options[:aria][:describedby] = aria_describedby if aria_describedby
         options[:draggable] = false if link?
+        options[:form] = form if form
         options
       end
 

spec/components/button_spec.rb

@@ -252,4 +252,10 @@ def component_name
 
     assert_select '.gem-c-button[aria-describedby="Testing aria-describedby"]'
   end
+
+  it "renders with a form attribute" do
+    render_component(text: "Button", form: "some_form_id")
+
+    assert_select '.gem-c-button[form="some_form_id"]'
+  end
 end