Merge pull request #308 from alphagov/add-share-links

Add share links component
alphagov · May 15, 2018 · 40c59a3 · 40c59a3
2 parents 41d7a00 + b7b3ec7
commit 40c59a3
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 # Unreleased
 
+* Add share links component (PR #308)
 * The Button component no longer accepts unescaped HTML in the `info_text`,
   you'll have to call `html_safe` on it yourself. Probably the only affected
   application is `frontend` (#305)

diff --git a/app/assets/javascripts/govuk_publishing_components/lib/track-share-button-clicks.js b/app/assets/javascripts/govuk_publishing_components/lib/track-share-button-clicks.js
@@ -0,0 +1,26 @@
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  'use strict'
+
+  Modules.GemTrackShareButtonClicks = function () {
+    this.start = function (element) {
+      element.on('click', '.js-share-facebook', trackFacebook)
+      element.on('click', '.js-share-twitter', trackTwitter)
+
+      function trackFacebook () {
+        trackShare('facebook')
+      }
+
+      function trackTwitter () {
+        trackShare('twitter')
+      }
+
+      function trackShare (network) {
+        if (GOVUK.analytics && GOVUK.analytics.trackShare) {
+          GOVUK.analytics.trackShare(network)
+        }
+      }
+    }
+  }
+})(window.GOVUK.Modules)
diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss
@@ -29,4 +29,5 @@
 @import "components/feedback";
 @import "components/inverse-header";
 @import "components/success-alert";
+@import "components/share-links";
 @import "components/taxonomy-navigation";
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss b/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
@@ -0,0 +1,40 @@
+$share-button-width: 32px;
+$share-button-height: 32px;
+
+.gem-c-share-links__link {
+  margin-right: $gutter;
+  margin-bottom: $gutter-one-third;
+  @include bold-16($line-height: $share-button-height, $line-height-640: $share-button-height);
+  text-decoration: none;
+}
+
+.gem-c-share-links__title {
+  margin-bottom: $gutter-one-third;
+}
+
+.gem-c-share-links__link__icon {
+  display: inline-block;
+  width: $share-button-width;
+  height: $share-button-height;
+  margin-right: $gutter-one-third;
+  vertical-align: top;
+}
+
+.direction-rtl {
+  .gem-c-share-links__link {
+    // By changing the link to inline-block the browser
+    // calculates the icon and the text as a single run of text
+    // rather than two. When they are considered to be two runs
+    // the browser splits the first link, putting the text before
+    // the second link, and the icon after the second link.
+    display: inline-block;
+    margin-right: 0;
+    margin-left: $gutter;
+
+    .gem-c-share-links__link__icon {
+      margin-right: 0;
+      margin-left: $gutter-one-third;
+      vertical-align: middle;
+    }
+  }
+}
diff --git a/app/views/govuk_publishing_components/components/_share_links.html.erb b/app/views/govuk_publishing_components/components/_share_links.html.erb
@@ -0,0 +1,36 @@
+<%
+  title ||= 'Share this page'
+  facebook_href ||= false
+  twitter_href ||= false
+%>
+<% if facebook_href || twitter_href %>
+  <div class="gem-c-share-links dont-print" data-module="gem-track-share-button-clicks">
+    <h2 class="gem-c-share-links__title"><%= title %></h2>
+
+    <% if facebook_href %>
+      <%= link_to facebook_href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        class: "gem-c-share-links__link js-share-facebook" do %>
+        <span class="gem-c-share-links__link__icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+            <path fill="currentColor" d="M31.006 0H.993A.997.997 0 0 0 0 .993v30.014c0 .55.452.993.993.993h30.013a.998.998 0 0 0 .994-.993V.993A.999.999 0 0 0 31.006 0z"/>
+            <path fill="#FFF" d="M17.892 10.751h1.787V8.009L17.216 8c-2.73 0-3.352 2.045-3.352 3.353v1.828h-1.581v2.824h1.581V24h3.322v-7.995h2.242l.291-2.824h-2.533V11.52c.001-.623.415-.769.706-.769z"/>
+          </svg>
+        </span><span class="visually-hidden">Share on </span>Facebook<% end %>
+    <% end %>
+
+    <% if twitter_href %>
+      <%= link_to twitter_href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        class: "gem-c-share-links__link js-share-twitter" do %>
+        <span class="gem-c-share-links__link__icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+            <path fill="currentColor" d="M31.007 0H.993A.999.999 0 0 0 0 .993v30.014c0 .55.452.993.993.993h30.014a.997.997 0 0 0 .993-.993V.993A.998.998 0 0 0 31.007 0z"/>
+            <path fill="#FFF" d="M8 21.027a9.286 9.286 0 0 0 5.032 1.475c6.038 0 9.34-5.002 9.34-9.339 0-.143-.004-.284-.012-.425a6.619 6.619 0 0 0 1.639-1.699c-.6.265-1.234.439-1.885.516a3.287 3.287 0 0 0 1.443-1.816 6.571 6.571 0 0 1-2.086.797 3.28 3.28 0 0 0-5.592 2.993 9.311 9.311 0 0 1-6.766-3.43 3.294 3.294 0 0 0-.443 1.651 3.28 3.28 0 0 0 1.46 2.732 3.278 3.278 0 0 1-1.488-.411v.041a3.288 3.288 0 0 0 2.633 3.22 3.28 3.28 0 0 1-1.481.055 3.285 3.285 0 0 0 3.065 2.281 6.59 6.59 0 0 1-4.076 1.404A6.76 6.76 0 0 1 8 21.027z"/>
+          </svg>
+        </span><span class="visually-hidden">Share on </span>Twitter<% end %>
+    <% end %>
+  </div>
+<% end %>
diff --git a/app/views/govuk_publishing_components/components/docs/share_links.yml b/app/views/govuk_publishing_components/components/docs/share_links.yml
@@ -0,0 +1,38 @@
+name: Share links
+description: Links to share the current page on Facebook or Twitter
+body: |
+  Pass complete share URLs to the component. The component will not process a URL into a share link itself.
+
+  Use only with content that benefits from being shared, for example a consultation.
+
+  The component will track interactions with the share links to Google Analytics using [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions)
+
+  Real world examples:
+
+    - [News article](/government/news/fast-tracking-uk-innovation-apply-for-business-funding)
+    - [Consultation](/government/consultations/soft-drinks-industry-levy)
+    - [Right to left](/government/news/uk-sets-out-long-term-support-for-stable-secure-and-prosperous-afghanistan-to-2020.ur)
+
+accessibility_criteria: |
+  The share link icons must be presentational and ignored by screen readers.
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      facebook_href: '/facebook-link'
+      twitter_href: '/twitter-link'
+  with_custom_text:
+    data:
+      title: 'Share this news article'
+      facebook_href: '/facebook-share-link'
+      twitter_href: '/twitter-share-link'
+  with_only_one_link_provided:
+    data:
+      facebook_href: '/only-facebook-link'
+  right_to_left:
+    data:
+      facebook_href: '/facebook-link'
+      twitter_href: '/twitter-link'
+    context:
+      right_to_left: true
diff --git a/spec/components/share_links_spec.rb b/spec/components/share_links_spec.rb
@@ -0,0 +1,36 @@
+require "rails_helper"
+
+describe "ShareLinks", type: :view do
+  def component_name
+    "share_links"
+  end
+
+  it "renders nothing when no share links provided" do
+    assert_empty render_component({})
+  end
+
+  it "renders share links correctly" do
+    render_component(facebook_href: '/facebook', twitter_href: '/twitter')
+    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\"]"
+  end
+
+  it "renders a default title if no custom title is provided" do
+    render_component(facebook_href: '/facebook', twitter_href: '/twitter')
+    assert_select ".gem-c-share-links__title", text: "Share this page"
+  end
+
+  it "renders a share link with custom link text correctly" do
+    render_component(facebook_href: '/facebook', twitter_href: '/twitter', title: 'Share this article')
+    assert_select ".gem-c-share-links__title", text: "Share this article"
+  end
+
+  it "renders a share link if only one share link provided" do
+    render_component(facebook_href: '/facebook')
+    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\"]",
+      false, "A twitter share link has not been provided so should not have been rendered"
+    assert_select ".gem-c-share-links .gem-c-share-links__link__icon--twitter",
+      false, "A twitter share link has not been provided so a twitter icon should not have been rendered"
+  end
+end
diff --git a/spec/javascripts/components/track-share-button-clicks-spec.js b/spec/javascripts/components/track-share-button-clicks-spec.js
@@ -0,0 +1,39 @@
+/* global describe beforeEach it spyOn expect */
+
+//var $ = window.jQuery
+
+describe('A share button click tracker', function () {
+  'use strict'
+
+  var GOVUK = window.GOVUK
+  var tracker
+  var element
+
+  GOVUK.analytics = GOVUK.analytics || {}
+  GOVUK.analytics.trackShare = function () {}
+
+  beforeEach(function () {
+    tracker = new GOVUK.Modules.GemTrackShareButtonClicks()
+  })
+
+  it('tracks click events on share buttons', function () {
+    GOVUK.analytics = {
+      trackShare: function () {
+      }
+    };
+    spyOn(GOVUK.analytics, 'trackShare')
+    element = $(
+      '<div>' +
+        '<a href="#" class="js-share-facebook" data-network="facebook">Share</a>' +
+        '<a href="#" class="js-share-twitter" data-network="twitter">Share</a>' +
+      '</div>'
+    )
+
+    tracker.start(element)
+    element.find('.js-share-facebook').trigger('click')
+    element.find('.js-share-twitter').trigger('click')
+
+    expect(GOVUK.analytics.trackShare).toHaveBeenCalledWith('facebook')
+    expect(GOVUK.analytics.trackShare).toHaveBeenCalledWith('twitter')
+  })
+})