Add share links component

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;
+    }
+  }
+}

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="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 %>

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

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