diff --git a/app/assets/images/ministry-of-defence-crest.png b/app/assets/images/ministry-of-defence-crest.png index 5e0363de9..f13a16c1d 100644 Binary files a/app/assets/images/ministry-of-defence-crest.png and b/app/assets/images/ministry-of-defence-crest.png differ diff --git a/app/assets/images/national-statistics.png b/app/assets/images/national-statistics.png index db95a4d4b..aee901826 100644 Binary files a/app/assets/images/national-statistics.png and b/app/assets/images/national-statistics.png differ diff --git a/app/assets/images/separator-2x.png b/app/assets/images/separator-2x.png index 9d5fd7c03..ddd27f9aa 100644 Binary files a/app/assets/images/separator-2x.png and b/app/assets/images/separator-2x.png differ diff --git a/app/assets/images/separator.png b/app/assets/images/separator.png index b9767addc..bf35123b6 100644 Binary files a/app/assets/images/separator.png and b/app/assets/images/separator.png differ diff --git a/app/assets/images/social-icons-white.png b/app/assets/images/social-icons-white.png new file mode 100644 index 000000000..ae88b376c Binary files /dev/null and b/app/assets/images/social-icons-white.png differ diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js new file mode 100644 index 000000000..079e5abc2 --- /dev/null +++ b/app/assets/javascripts/application.js @@ -0,0 +1 @@ +//= require_tree ./modules diff --git a/app/assets/javascripts/modules/track-share-button-clicks.js b/app/assets/javascripts/modules/track-share-button-clicks.js new file mode 100644 index 000000000..307655054 --- /dev/null +++ b/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) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 345caa39f..c729cdd4b 100644 --- a/app/assets/stylesheets/application.scss +++ b/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"; diff --git a/app/assets/stylesheets/helpers/_share-buttons.scss b/app/assets/stylesheets/helpers/_share-buttons.scss new file mode 100644 index 000000000..d0f454a2a --- /dev/null +++ b/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; + } + } +} diff --git a/app/assets/stylesheets/helpers/_sidebar-with-body.scss b/app/assets/stylesheets/helpers/_sidebar-with-body.scss index 7f96b5982..3c36c63e2 100644 --- a/app/assets/stylesheets/helpers/_sidebar-with-body.scss +++ b/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); + } } } diff --git a/app/assets/stylesheets/views/_consultation.scss b/app/assets/stylesheets/views/_consultation.scss index 64ff332bd..acfc1d995 100644 --- a/app/assets/stylesheets/views/_consultation.scss +++ b/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; diff --git a/app/presenters/consultation_presenter.rb b/app/presenters/consultation_presenter.rb index 625ffc48e..a1499a4f4 100644 --- a/app/presenters/consultation_presenter.rb +++ b/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" diff --git a/app/views/content_items/consultation.html.erb b/app/views/content_items/consultation.html.erb index 8a9f4bbf3..006ab13a7 100644 --- a/app/views/content_items/consultation.html.erb +++ b/app/views/content_items/consultation.html.erb @@ -229,6 +229,23 @@ <% end %> +
+
+

Share this page

+ +
+
+ <%= render 'govuk_component/document_footer', from: @content_item.from, updated: @content_item.updated, diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index c9f3da508..be638bfbd 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -6,6 +6,7 @@ + <%= 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? %> diff --git a/test/integration/consultation_test.rb b/test/integration/consultation_test.rb index 907f0d4bb..bad111310 100644 --- a/test/integration/consultation_test.rb +++ b/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 diff --git a/test/presenters/consultation_presenter_test.rb b/test/presenters/consultation_presenter_test.rb index 432358664..0c6cdd86e 100644 --- a/test/presenters/consultation_presenter_test.rb +++ b/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