Merge pull request #9644 from alphagov/3139-move-add-another-pattern-…

…to-govukpublishingcomponents

Migrate add another usage to govuk_publishing_components impementation

Gemfile.lock

@@ -310,7 +310,7 @@ GEM
     govuk_personalisation (1.1.0)
       plek (>= 1.9.0)
       rails (>= 6, < 9)
-    govuk_publishing_components (45.6.1)
+    govuk_publishing_components (46.0.0)
       chartkick
       govuk_app_config
       govuk_personalisation (>= 0.7.0)

app/assets/javascripts/application.js

@@ -3,6 +3,7 @@
 //= require govuk_publishing_components/dependencies
 //= require govuk_publishing_components/analytics-ga4
 //= require govuk_publishing_components/components/accordion
+//= require govuk_publishing_components/components/add-another
 //= require govuk_publishing_components/components/copy-to-clipboard
 //= require govuk_publishing_components/components/govspeak
 //= require govuk_publishing_components/components/reorderable-list
@@ -23,7 +24,6 @@
 //= require admin/analytics-modules/ga4-page-view-tracking.js
 //= require admin/analytics-modules/ga4-paste-tracker.js
 
-//= require admin/modules/add-another
 //= require admin/modules/document-history-paginator
 //= require admin/modules/locale-switcher
 //= require admin/modules/navbar-toggle

app/assets/stylesheets/application.scss

@@ -19,9 +19,7 @@ $govuk-page-width: 1140px;
 
 @import "./admin/views/components/worldwide_offices/index/office-summary-card-component";
 
-@import "./admin/views/add-another";
 @import "./admin/views/audit-trail";
-@import "./admin/views/contacts";
 @import "./admin/views/dashboard-index";
 @import "./admin/views/document-history-tab";
 @import "./admin/views/document-collection-group-memberships-index";

app/views/admin/contacts/_contact_number_fields.html.erb

@@ -0,0 +1,21 @@
+<%= contact_form.fields_for :contact_numbers, contact_number do |contact_number_form| %>
+  <%= render "govuk_publishing_components/components/input", {
+    label: {
+      text: "Label",
+    },
+    name: "#{name}[contact_numbers_attributes][#{index}][label]",
+    id: "#{id}_contact_numbers_attributes_#{index}_label",
+    heading_size: "s",
+    value: contact_number_form.object.label,
+  } %>
+
+  <%= render "govuk_publishing_components/components/input", {
+    label: {
+      text: "Number",
+    },
+    name: "#{name}[contact_numbers_attributes][#{index}][number]",
+    id: "#{id}_contact_numbers_attributes_#{index}_number",
+    heading_size: "s",
+    value: contact_number_form.object.number,
+  } %>
+<% end %>

app/views/admin/contacts/_form_fields.html.erb

@@ -101,30 +101,16 @@
     heading_level: 2,
     heading_size: "l",
   } do %>
-    <div data-module="AddAnother" data-add-text="Add phone number">
-      <%= contact_form.fields_for :contact_numbers, contact_form.object.contact_numbers do |contact_number_form| %>
-        <div class=" js-duplicate-fields-set govuk-!-margin-bottom-4">
-          <%= render "govuk_publishing_components/components/input", {
-            label: {
-              text: "Label",
-            },
-            name: "#{name}[contact_numbers_attributes][#{contact_number_form.index}][label]",
-            id: "#{id}_contact_numbers_attributes_#{contact_number_form.index}_label",
-            heading_size: "m",
-            value: contact_number_form.object.label,
-          } %>
-
-          <%= render "govuk_publishing_components/components/input", {
-            label: {
-              text: "Number",
-            },
-            name: "#{name}[contact_numbers_attributes][#{contact_number_form.index}][number]",
-            id: "#{id}_contact_numbers_attributes_#{contact_number_form.index}_number",
-            heading_size: "m",
-            value: contact_number_form.object.number,
-          } %>
-        </div>
-      <% end %>
-    </div>
+    <%= render "govuk_publishing_components/components/add_another", {
+      fieldset_legend: "Phone number",
+      add_button_text: "Add phone number",
+      items: contact_form.object.contact_numbers.each_with_index.map do  |contact_number, index|
+        {
+          fields: render(partial: "admin/contacts/contact_number_fields", locals: { contact_form:, contact_number:, index:, name:, id: }),
+          destroy_checkbox: render("govuk_publishing_components/components/checkboxes", { name: "#{name}[contact_numbers_attributes][#{index}][_destroy]", items: [{label: "Delete", value: "1" }]}),
+        }
+      end,
+      empty: render(partial: "admin/contacts/contact_number_fields", locals: { contact_form:, contact_number: ContactNumber.new, index: contact_form.object.contact_numbers.length, name:, id: }),
+    } %>
   <% end %>
 </div>

app/views/admin/fatality_notices/_casualty_fields.html.erb

@@ -0,0 +1,12 @@
+<%= form.fields_for :fatality_notice_casualties, casualty do |fatality_form| %>
+  <%= render "govuk_publishing_components/components/textarea", {
+    label: {
+      text: "Personal details",
+      bold: true,
+    },
+    value: fatality_form.object.personal_details,
+    name: "edition[fatality_notice_casualties_attributes][#{index}][personal_details]",
+    id: "edition_fatality_notice_casualties_#{index}_personal_details",
+    rows: 2,
+  } %>
+<% end %>

app/views/admin/fatality_notices/_form.html.erb

@@ -34,21 +34,16 @@
 
     <h4 class="govuk-heading-m">Casualties (required)</h4>
 
-    <div data-module="AddAnother" data-add-text="Add another person" class="govuk-!-margin-bottom-4">
-      <%= form.fields_for :fatality_notice_casualties do |fatality_form| %>
-        <div class="js-duplicate-fields-set govuk-!-margin-top-4">
-          <%= render "govuk_publishing_components/components/textarea", {
-            label: {
-              text: "Personal details",
-              bold: true,
-            },
-            value: fatality_form.object.personal_details,
-            name: "edition[fatality_notice_casualties_attributes][#{fatality_form.index}][personal_details]",
-            id: "edition_fatality_notice_casualties_#{fatality_form.index}_personal_details",
-            rows: 2,
-          } %>
-        </div>
-      <% end %>
-    </div>
+    <%= render "govuk_publishing_components/components/add_another", {
+      fieldset_legend: "Person",
+      add_button_text: "Add another person",
+      items: form.object.fatality_notice_casualties.each_with_index.map do  |casualty, index|
+        {
+          fields: render(partial: "admin/fatality_notices/casualty_fields", locals: { form:, casualty:, index: }),
+          destroy_checkbox: render("govuk_publishing_components/components/checkboxes", { name: "edition[fatality_notice_casualties_attributes][#{index}][_destroy]", items: [{label: "Delete", value: "1" }]}),
+        }
+      end,
+      empty: render(partial: "admin/fatality_notices/casualty_fields", locals: { form:, casualty: FatalityNoticeCasualty.new, index: form.object.fatality_notice_casualties.length }),
+    } %>
   <% end %>
 <% end %>

app/views/admin/organisation_translations/edit.html.erb

@@ -60,7 +60,7 @@
         },
       } %>
 
-      <%= render "admin/shared/featured_link_fields", form: form %>
+      <%= render "admin/shared/featured_links_fields", form: form %>
 
       <div class="govuk-button-group govuk-!-margin-top-8">
         <%= render "govuk_publishing_components/components/button", {

app/views/admin/organisations/_form.html.erb

@@ -314,7 +314,7 @@
         margin_bottom: 3,
       } %>
 
-      <%= render "admin/shared/featured_link_fields", form: form, remove_banner: true %>
+      <%= render "admin/shared/featured_links_fields", form: form, remove_banner: true %>
     </div>
   <% end %>