Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add share buttons to consultations #207

Merged
merged 5 commits into from
Dec 19, 2016
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Add share buttons to consultations
* Port social media icons from Whitehall, remove unused icons and
PNGCrush
* Simplify markup and CSS for social icons
* Look and behaviour matches Whitehall
fofr committed Dec 16, 2016
commit a21542e04f8c1616d3ef87e9d0db9c5702ffcc0a
Binary file added app/assets/images/social-icons-white.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions app/assets/stylesheets/application.scss
Original file line number Diff line number Diff line change
@@ -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";
32 changes: 32 additions & 0 deletions app/assets/stylesheets/helpers/_share-buttons.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
@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: $govuk-blue;
background-image: image-url("social-icons-white.png");
background-repeat: no-repeat;
vertical-align: top;
}

.share-button-facebook {
background-position: -2px -2px;
}

.share-button-twitter {
background-position: -2px -32px;
}
}
}
1 change: 1 addition & 0 deletions app/assets/stylesheets/views/_consultation.scss
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
@include sidebar-with-body;
@include history-notice;
@include withdrawal-notice;
@include share-buttons;

.section-title {
@include bold-27;
13 changes: 13 additions & 0 deletions app/presenters/consultation_presenter.rb
Original file line number Diff line number Diff line change
@@ -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"
17 changes: 17 additions & 0 deletions app/views/content_items/consultation.html.erb
Original file line number Diff line number Diff line change
@@ -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">
<%= link_to @content_item.facebook_share_url,
target: "_blank",
class: "share-button-link" 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" 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,
6 changes: 6 additions & 0 deletions test/integration/consultation_test.rb
Original file line number Diff line number Diff line change
@@ -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
5 changes: 5 additions & 0 deletions test/presenters/consultation_presenter_test.rb
Original file line number Diff line number Diff line change
@@ -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