From 3cae90a0c319ad4b8b8833c0ba28f0dd5d404cc2 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 17 Nov 2022 10:42:30 +0000 Subject: [PATCH] Share links allow data attributes - allow the share links component to accept data attributes for both the parent and the individual links --- CHANGELOG.md | 1 + .../components/_share_links.html.erb | 16 +++++---- .../components/docs/share_links.yml | 23 ++++++++++++ spec/components/share_links_spec.rb | 36 +++++++++++++++++-- 4 files changed, 67 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4eabffa8e9..e0bec66878 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/app/views/govuk_publishing_components/components/_share_links.html.erb b/app/views/govuk_publishing_components/components/_share_links.html.erb index 0a6e22c727..a18997ee65 100644 --- a/app/views/govuk_publishing_components/components/_share_links.html.erb +++ b/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 %> <% if link[:icon] == 'facebook' %> diff --git a/app/views/govuk_publishing_components/components/docs/share_links.yml b/app/views/govuk_publishing_components/components/docs/share_links.yml index f398832407..946fdba17d 100644 --- a/app/views/govuk_publishing_components/components/docs/share_links.yml +++ b/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: diff --git a/spec/components/share_links_spec.rb b/spec/components/share_links_spec.rb index c1bbb22495..99ebb8485f 100644 --- a/spec/components/share_links_spec.rb +++ b/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"]'