Add share buttons to consultations

app/assets/javascripts/application.js

@@ -0,0 +1 @@
+//= require_tree ./modules

app/assets/javascripts/modules/track-share-button-clicks.js

@@ -0,0 +1,26 @@
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (GOVUK) {
+  'use strict'
+
+  GOVUK.Modules.TrackShareButtonClicks = 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)

app/assets/stylesheets/application.scss

@@ -16,6 +16,7 @@
 @import "helpers/dash-list";
 @import "helpers/description";
 @import "helpers/sidebar-with-body";
+@import "helpers/share-buttons";
 @import "helpers/national_statistics_logo";
 @import "helpers/notice";
 @import "helpers/history-notice";

app/assets/stylesheets/helpers/_share-buttons.scss

@@ -0,0 +1,44 @@
+@mixin share-buttons {
+  $share-button-width: 25px;
+  $share-button-height: 25px;
+
+  .share-buttons {
+    @include core-16;
+    margin-top: $gutter-one-third;
+
+    .share-button-link {
+      margin-right: $gutter;
+
+      .share-button {
+        display: inline-block;
+        width: $share-button-width;
+        height: $share-button-height;
+        margin-right: $gutter-one-third;
+        background-color: $link-colour;
+        background-image: image-url("social-icons-white.png");
+        background-repeat: no-repeat;
+        vertical-align: top;
+      }
+
+      &:visited .share-button {
+        background-color: $link-visited-colour;
+      }
+
+      &:active .share-button {
+        background-color: $link-active-colour;
+      }
+
+      &:hover .share-button {
+        background-color: $link-hover-colour;
+      }
+    }
+
+    .share-button-facebook {
+      background-position: -2px -2px;
+    }
+
+    .share-button-twitter {
+      background-position: -2px -32px;
+    }
+  }
+}

app/assets/stylesheets/helpers/_sidebar-with-body.scss

@@ -16,6 +16,8 @@
   }
 
   .offset-one-third {
-    margin-left: percentage(1 / 3);
+    @include media(tablet) {
+      margin-left: percentage(1 / 3);
+    }
   }
 }

app/assets/stylesheets/views/_consultation.scss

@@ -2,6 +2,7 @@
   @include sidebar-with-body;
   @include history-notice;
   @include withdrawal-notice;
+  @include share-buttons;
 
   .section-title {
     @include bold-27;

app/presenters/consultation_presenter.rb

@@ -4,6 +4,7 @@ class ConsultationPresenter < ContentItemPresenter
   include NationalApplicability
   include Political
   include Withdrawable
+  include ERB::Util
 
   def body
     content_item["details"]["body"]
@@ -113,8 +114,20 @@ def attachment_url
     ways_to_respond["attachment_url"]
   end
 
+  def facebook_share_url
+    "https://www.facebook.com/sharer/sharer.php?u=#{share_url}"
+  end
+
+  def twitter_share_url
+    "https://twitter.com/share?url=#{share_url}&text=#{url_encode(title)}"
+  end
+
 private
 
+  def share_url
+    url_encode(Plek.current.website_root + content_item["base_path"])
+  end
+
   def display_date_and_time(date, rollback_midnight = false)
     time = Time.parse(date)
     date_format = "%-e %B %Y"

app/views/content_items/consultation.html.erb

@@ -229,6 +229,23 @@
   </div>
 <% end %>
 
+<div class="grid-row sidebar-with-body">
+  <div class="column-two-thirds offset-one-third">
+    <h2>Share this page</h2>
+    <div class="share-buttons" data-module="track-share-button-clicks">
+      <%= link_to @content_item.facebook_share_url,
+          target: "_blank",
+          class: "share-button-link js-share-facebook" do %>
+        <span class="share-button share-button-facebook"></span><span class="visually-hidden">Share on </span>Facebook<% end %>
+
+      <%= link_to @content_item.twitter_share_url,
+          target: "_blank",
+          class: "share-button-link js-share-twitter" do %>
+        <span class="share-button share-button-twitter"></span><span class="visually-hidden">Share on </span>Twitter<% end %>
+    </div>
+  </div>
+</div>
+
 <%= render 'govuk_component/document_footer',
     from: @content_item.from,
     updated: @content_item.updated,

app/views/layouts/application.html.erb

@@ -6,6 +6,7 @@
   <!--[if IE 6]><%= stylesheet_link_tag "application-ie6" %><script>var ieVersion = 6;</script><![endif]-->
   <!--[if IE 7]><%= stylesheet_link_tag "application-ie7" %><script>var ieVersion = 7;</script><![endif]-->
   <!--[if IE 8]><%= stylesheet_link_tag "application-ie8" %><script>var ieVersion = 8;</script><![endif]-->
+  <%= javascript_include_tag "application" %>
   <%= csrf_meta_tags %>
   <%= render partial: 'govuk_component/analytics_meta_tags', locals: { content_item: @content_item.content_item } %>
   <% if content_for(:meta_description).present? %>

test/integration/consultation_test.rb

@@ -135,4 +135,10 @@ class ConsultationTest < ActionDispatch::IntegrationTest
       end
     end
   end
+
+  test "share urls" do
+    setup_and_visit_content_item('open_consultation')
+    assert page.has_css?("a", text: "Share on Facebook")
+    assert page.has_css?("a", text: "Share on Twitter")
+  end
 end

test/presenters/consultation_presenter_test.rb

@@ -139,5 +139,10 @@ def format_name
 
       refute presented.ways_to_respond?
     end
+
+    test 'presents share urls with encoded url and title' do
+      assert_equal 'https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.test.gov.uk%2Fgovernment%2Fconsultations%2Fpostgraduate-doctoral-loans', presented_item("open_consultation").facebook_share_url
+      assert_equal 'https://twitter.com/share?url=https%3A%2F%2Fwww.test.gov.uk%2Fgovernment%2Fconsultations%2Fpostgraduate-doctoral-loans&text=Postgraduate%20doctoral%20loans', presented_item("open_consultation").twitter_share_url
+    end
   end
 end