Share links allow data attributes

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Share links allow data attributes ([PR #3072](https://github.com/alphagov/govuk_publishing_components/pull/3072))
 * Update to LUX 304 ([PR #3070](https://github.com/alphagov/govuk_publishing_components/pull/3070))
 
 ## 32.1.0

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

@@ -15,7 +15,7 @@
   classes << brand_helper.brand_class
 
   data_attributes ||= {}
-  data_attributes[:module] = 'gem-track-click'
+  ((data_attributes[:module] ||= "") << " " << "gem-track-click").strip!
 %>
 <% if links.any? %>
   <%= tag.div(class: classes, data: data_attributes) do %>
@@ -70,15 +70,17 @@
               }
             end
           %>
+          <%
+            data_attributes = link[:data_attributes] ||= {}
+            data_attributes[:track_category] = 'social media'
+            data_attributes[:track_action] = link[:icon]
+            data_attributes[:track_options] = track_options
+            data_attributes[:ga4_link] = ga4_link_data
+          %>
           <%= link_to link[:href],
             target: "_blank",
             rel: "noopener noreferrer external",
-            data: {
-              'track-category': 'social media',
-              'track-action': link[:icon],
-              'track-options': track_options,
-              'ga4-link': ga4_link_data
-            },
+            data: data_attributes,
             class: "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}" do %>
             <span class="gem-c-share-links__link-icon">
               <% if link[:icon] == 'facebook' %>

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

@@ -44,6 +44,29 @@ examples:
       ]
     context:
       right_to_left: true
+  with_data_attributes:
+    description: Data attributes can be added to both the parent element and the individual share links, as shown. Note that the component defaults to having a `data-module` of `gem-track-click`, but this is preserved even if another value for module is passed.
+    data:
+      data_attributes:
+        module: 'example-passed-module'
+      links: [
+        {
+          href: '/facebook-share-link',
+          text: 'Facebook',
+          icon: 'facebook',
+          data_attributes: {
+            meeting: 'hello'
+          },
+        },
+        {
+          href: '/twitter-share-link',
+          text: 'Twitter',
+          icon: 'twitter',
+          data_attributes: {
+            departing: 'goodbye'
+          },
+        },
+      ]
   track_as_sharing_links:
     description: Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) in UA. If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call in UA. In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
     data:

spec/components/share_links_spec.rb

@@ -27,8 +27,8 @@ def links
 
   it "renders share links correctly" do
     render_component(links: links)
-    assert_select ".gem-c-share-links .gem-c-share-links__link[href=\"/facebook\"]"
-    assert_select ".gem-c-share-links .gem-c-share-links__link[href=\"/twitter\"]"
+    assert_select ".gem-c-share-links .gem-c-share-links__link[href=\"/facebook\"]", /Share.+on.+Facebook.+\(opens.+in.+new.+tab\)/m
+    assert_select ".gem-c-share-links .gem-c-share-links__link[href=\"/twitter\"]", /Tweet.+to.+Twitter.+\(opens.+in.+new.+tab\)/m
   end
 
   it "renders a custom title" do
@@ -44,6 +44,38 @@ def links
                   "A twitter share link has not been provided so should not have been rendered"
   end
 
+  it "accepts a passed data module without removing the default" do
+    attributes = {
+      module: "test",
+    }
+    render_component(links: links, data_attributes: attributes)
+    assert_select ".gem-c-share-links[data-module='test gem-track-click']"
+  end
+
+  it "renders data attributes for individual links" do
+    links_with_attributes = [
+      {
+        href: "/facebook",
+        text: "Facebook",
+        icon: "facebook",
+        data_attributes: {
+          test1: "one",
+        },
+      },
+      {
+        href: "/twitter",
+        text: "Twitter",
+        icon: "twitter",
+        data_attributes: {
+          test2: "two",
+        },
+      },
+    ]
+    render_component(links: links_with_attributes)
+    assert_select '.gem-c-share-links__link[data-test1="one"]', /Share.+on.+Facebook.+\(opens.+in.+new.+tab\)/m
+    assert_select '.gem-c-share-links__link[data-test2="two"]', /Share.+on.+Twitter.+\(opens.+in.+new.+tab\)/m
+  end
+
   it "adds social interactions tracking" do
     render_component(links: [links[0]], track_as_sharing: true)
     assert_select '.gem-c-share-links__link[data-track-category="social media"][data-track-action="facebook"]'