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"]'