Add configuration to "Add another" component

- Add new "start_empty" option to component doc - Hidden class on "Delete" button added conditionaly on `empty-fields` data attribute - Add `empty-fields` data-attribute to view - Update JS test - Update RSpec test - Update CHANGELOG
alphagov · Jan 28, 2025 · 95f291a · 95f291a
1 parent 15b1408
commit 95f291a
Show file tree

Hide file tree

Showing 6 changed files with 363 additions and 238 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 * **BREAKING** Add global bar component from static ([PR #4538](https://github.com/alphagov/govuk_publishing_components/pull/4538))
 * Add custom padding to inverse header ([PR #4590](https://github.com/alphagov/govuk_publishing_components/pull/4590))
 * Add another: fix problem in createRemoveButtons method ([PR #11719](https://github.com/alphagov/govuk_publishing_components/pull/4586))
+* Add configuration to "Add another" ([PR #4575](https://github.com/alphagov/govuk_publishing_components/pull/4575))
 
 ## 50.0.1
 

diff --git a/app/assets/javascripts/govuk_publishing_components/components/add-another.js b/app/assets/javascripts/govuk_publishing_components/components/add-another.js
@@ -67,10 +67,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         legend.textContent = this.module.dataset.fieldsetLegend + ' ' + (index + 1)
       }.bind(this))
 
-    this.module.querySelector('.js-add-another__remove-button').classList.toggle(
-      'js-add-another__remove-button--hidden',
-      this.module.querySelectorAll('.js-add-another__fieldset:not([hidden])').length === 1
-    )
+    if (this.module.dataset.emptyFields === 'false') {
+      this.module.querySelector('.js-add-another__remove-button').classList.toggle(
+        'js-add-another__remove-button--hidden',
+        this.module.querySelectorAll('.js-add-another__fieldset:not([hidden])').length === 1
+      )
+    }
   }
 
   AddAnother.prototype.addNewFieldset = function (event) {

diff --git a/app/views/govuk_publishing_components/components/_add_another.html.erb b/app/views/govuk_publishing_components/components/_add_another.html.erb
@@ -4,19 +4,27 @@
   empty ||= ""
   fieldset_legend ||= ""
   add_button_text ||= "Add another"
+  empty_fields ||= false
 %>
 
-<div data-module="add-another" class="gem-c-add-another" data-add-button-text="<%= add_button_text %>" data-fieldset-legend="<%= fieldset_legend %>">
-  <% items.each_with_index do |item, index| %>
-    <%= render "govuk_publishing_components/components/fieldset", {
-      classes: "js-add-another__fieldset",
-      legend_text: "#{fieldset_legend} #{index + 1}",
-      heading_size: "m"
-    } do %>
-      <div class="js-add-another__destroy-checkbox">
-        <%= item[:destroy_checkbox] %>
-      </div>
-      <%= item[:fields] %>
+<%= tag.div class: "gem-c-add-another", data: {
+  module: "add-another",
+  "add-button-text": add_button_text,
+  "fieldset-legend": fieldset_legend,
+  "empty-fields": empty_fields
+} do %>
+  <% unless empty_fields && items.count == 0 %>
+    <% items.each_with_index do |item, index| %>
+      <%= render "govuk_publishing_components/components/fieldset", {
+        classes: "js-add-another__fieldset",
+        legend_text: "#{fieldset_legend} #{index + 1}",
+        heading_size: "m"
+      } do %>
+        <div class="js-add-another__destroy-checkbox">
+          <%= item[:destroy_checkbox] %>
+        </div>
+        <%= item[:fields] %>
+      <% end %>
     <% end %>
   <% end %>
   <%= render "govuk_publishing_components/components/fieldset", {
@@ -26,4 +34,4 @@
   } do %>
     <%= empty %>
   <% end %>
-</div>
+<% end %>
diff --git a/app/views/govuk_publishing_components/components/docs/add_another.yml b/app/views/govuk_publishing_components/components/docs/add_another.yml
@@ -46,3 +46,15 @@ examples:
           <label for="person_1_name" class="gem-c-label govuk-label">Full name</label>
           <input class="gem-c-input govuk-input" id="person_1_name" name="person[1]name">
         </div>
+  start_empty:
+    description: By default no form fields are displayed when the component loads if no content is specified
+    data:
+      fieldset_legend: "Employee"
+      add_button_text: "Add an employee"
+      empty_fields: true
+      items: null
+      empty:
+        <div class="govuk-form-group">
+          <label for="employee_1_name" class="gem-c-label govuk-label">Full name</label>
+          <input class="gem-c-input govuk-input" id="employee_1_name" name="employee[1]name">
+        </div>
diff --git a/spec/components/add_another_spec.rb b/spec/components/add_another_spec.rb
@@ -5,44 +5,74 @@ def component_name
     "add_another"
   end
 
-  def default_items
-    [
-      {
-        fields: sanitize("<div class=\"item1\">item1</div>"),
-        destroy_checkbox: sanitize("<input type=\"checkbox\" />"),
-      },
-      {
-        fields: sanitize("<div class=\"item2\">item2</div>"),
-        destroy_checkbox: sanitize("<input type=\"checkbox\" />"),
-      },
-    ]
-  end
+  describe "Default" do
+    def default_items
+      [
+        {
+          fields: sanitize("<div class=\"item1\">item1</div>"),
+          destroy_checkbox: sanitize("<input type=\"checkbox\" />"),
+        },
+        {
+          fields: sanitize("<div class=\"item2\">item2</div>"),
+          destroy_checkbox: sanitize("<input type=\"checkbox\" />"),
+        },
+      ]
+    end
 
-  it "renders a wrapper element" do
-    render_component(items: default_items)
+    it "renders a wrapper element" do
+      render_component(items: default_items)
 
-    assert_select "div.gem-c-add-another[data-module='add-another']"
-  end
+      assert_select "div.gem-c-add-another[data-module='add-another'][data-empty-fields='false']"
+    end
 
-  it "renders the items provided" do
-    empty = ""
-    render_component({ items: default_items, empty: })
+    it "renders the items provided" do
+      empty = ""
+      render_component({ items: default_items, empty: })
 
-    assert_select "div.js-add-another__fieldset .item1"
-    assert_select "div.js-add-another__fieldset .item2"
-  end
+      assert_select "div.js-add-another__fieldset .item1"
+      assert_select "div.js-add-another__fieldset .item2"
+    end
+
+    it "renders a destroy checkbox for each item" do
+      empty = ""
+      render_component({ items: default_items, empty: })
+
+      assert_select "div.js-add-another__fieldset .js-add-another__destroy-checkbox", count: 2
+    end
 
-  it "renders a destroy checkbox for each item" do
-    empty = ""
-    render_component({ items: default_items, empty: })
+    it "renders the empty item" do
+      empty = sanitize("<div class=\"empty\">empty</div>")
+      render_component({ items: default_items, empty: })
 
-    assert_select "div.js-add-another__fieldset .js-add-another__destroy-checkbox", count: 2
+      assert_select ".js-add-another__empty div.empty"
+    end
   end
 
-  it "renders the empty item" do
-    empty = sanitize("<div class=\"empty\">empty</div>")
-    render_component({ items: default_items, empty: })
+  describe "Start empty" do
+    def empty_items
+      []
+    end
+
+    it "renders a wrapper element" do
+      render_component({ items: empty_items, empty_fields: true })
+
+      assert_select "div.gem-c-add-another[data-module='add-another'][data-empty-fields='true']"
+    end
+
+    it "renders only the empty item provided" do
+      empty = sanitize("<div class=\"empty\">empty</div>")
+      render_component({ items: empty_items, empty:, empty_fields: true })
+
+      assert_select ".js-add-another__empty div.empty"
+      assert_select "div.js-add-another__fieldset .item1", false
+      assert_select "div.js-add-another__fieldset .item2", false
+    end
+
+    it "does not render a destroy checkbox" do
+      empty = sanitize("<div class=\"empty\">empty</div>")
+      render_component({ items: empty_items, empty: })
 
-    assert_select ".js-add-another__empty div.empty"
+      assert_select ".js-add-another__destroy-checkbox", count: 0
+    end
   end
 end