BREAKING Use component wrapper on attachment component

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* **BREAKING** Use component wrapper on attachment component ([PR #4545](https://github.com/alphagov/govuk_publishing_components/pull/4545))
 * Add 'draggable' attribute to component wrapper helper ([PR #4544](https://github.com/alphagov/govuk_publishing_components/pull/4544))
 
 ## 48.0.0

app/views/govuk_publishing_components/components/_attachment.html.erb

@@ -6,12 +6,13 @@
   hide_opendocument_metadata ||= false
   hide_order_copy_link ||= false
   attributes = []
-  data_attributes ||= {}
+  url_data_attributes ||= {}
   details_ga4_attributes ||= {}
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  container_class_names = %w[gem-c-attachment]
-  container_class_names << shared_helper.get_margin_bottom if local_assigns.key?(:margin_bottom)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-attachment")
+  component_helper.add_data_attribute({ module: "ga4-link-tracker" })
   ga4_link = { 'event_name': 'navigation', 'type': 'attachment' }
 
   case attachment.type
@@ -55,16 +56,16 @@
     )
   end
 
-  data_attributes[:ga4_link] = ga4_link
+  url_data_attributes[:ga4_link] = ga4_link
 %>
-<%= tag.section class: class_names(container_class_names), data: { module: "ga4-link-tracker" } do %>
+<%= tag.section(**component_helper.all_attributes) do %>
   <%= tag.div class: "gem-c-attachment__thumbnail govuk-!-display-none-print" do %>
     <%= link_to attachment.url,
                 class: "govuk-link",
                 target: target,
                 tabindex: "-1",
                 "aria-hidden": true,
-                data: data_attributes do %>
+                data: url_data_attributes do %>
       <% if attachment.thumbnail_url.present? %>
         <% image_tag(attachment.thumbnail_url, alt: "", class: "gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--custom") %>
       <% elsif attachment.html? %>
@@ -88,7 +89,7 @@
       <%= link_to attachment.title, attachment.url,
       class: "govuk-link gem-c-attachment__link",
       target: target,
-      data: data_attributes %>
+      data: url_data_attributes %>
     <% end %>
 
     <% if attachment.reference.present? %>

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

@@ -17,6 +17,7 @@ shared_accessibility_criteria:
 accessibility_criteria: |
   The thumbnail image, and the link wrapping it, must not focusable or shown to
   screenreaders.
+uses_component_wrapper_helper: true
 examples:
   default:
     data:
@@ -89,15 +90,15 @@ examples:
       details_ga4_attributes: {
         index_section_count: 4
       }
-  with_data_attributes:
+  with_data_attributes_on_url:
     data:
       attachment:
         title: "Department for Transport information asset register"
         url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/747661/department-for-transport-information-asset-register.csv
         filename: department-for-transport-information-asset-register.csv
         content_type: application/pdf
         file_size: 20000
-      data_attributes:
+      url_data_attributes:
         gtm: "attachment-preview"
   with_margin_bottom:
     description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to no margin bottom.

spec/components/attachment_spec.rb

@@ -134,7 +134,7 @@ def component_name
         url: "attachment",
         content_type: "application/vnd.oasis.opendocument.spreadsheet",
       },
-      data_attributes: { gtm: "attachment-preview" },
+      url_data_attributes: { gtm: "attachment-preview" },
     )
 
     assert_select ".gem-c-attachment__thumbnail a.govuk-link[data-gtm='attachment-preview']"