From 639a0d99338d6ff70f54d0a72ed7254011249880 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 30 Apr 2018 11:16:08 +0000 Subject: [PATCH] Add subscription links component --- CHANGELOG.md | 4 ++ .../feed-icon-black.png | Bin 0 -> 382 bytes .../mail-icon-x2.png | Bin 0 -> 256 bytes .../govuk_publishing_components/mail-icon.png | Bin 0 -> 213 bytes .../_all_components.scss | 1 + .../components/_subscription-links.scss | 40 ++++++++++++++++++ .../components/_subscription-links.html.erb | 21 +++++++++ .../components/docs/subscription-links.yml | 17 ++++++++ config/initializers/assets.rb | 5 ++- spec/components/subscription_links_spec.rb | 27 ++++++++++++ 10 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 app/assets/images/govuk_publishing_components/feed-icon-black.png create mode 100644 app/assets/images/govuk_publishing_components/mail-icon-x2.png create mode 100644 app/assets/images/govuk_publishing_components/mail-icon.png create mode 100644 app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss create mode 100644 app/views/govuk_publishing_components/components/_subscription-links.html.erb create mode 100644 app/views/govuk_publishing_components/components/docs/subscription-links.yml create mode 100644 spec/components/subscription_links_spec.rb diff --git a/CHANGELOG.md b/CHANGELOG.md index 057aa235e0..b80701b96b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# Unreleased + +* Add subscription links component (PR #290) + # 7.0.0 * Add an optional meta tag to signal dates should be stripped from diff --git a/app/assets/images/govuk_publishing_components/feed-icon-black.png b/app/assets/images/govuk_publishing_components/feed-icon-black.png new file mode 100644 index 0000000000000000000000000000000000000000..643830f580e5c8f5b0e11a1cc2d4c64c3f3b8377 GIT binary patch literal 382 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh3?wzC-F*zCssnsNT!HjJfxQ(n8-R9elmz(& zGwk-{Vt#ky_{M(LPfzym*fQ_e+xu%5#fAGj+gY3ID@lnyyLYB8T}?o9#_lMfo-R)p z#}JO|y4~SI%?2XOt-Qx(+_PTd{@p%NZo=OSXU?q=kbZAk%P6mI<6-^%yV~C16X7v0 zYBQKWE%dv+<;Q5O;E?8R6TyUyOe+F}#`A6*% z4Ug87r_Cd#*@{RWoFJBbfT{Ydfapx7g@5Lxw(9x0Em-(-folDqe4cmD+SZ=~g`%gc KpUXO@geCyy$7cBe literal 0 HcmV?d00001 diff --git a/app/assets/images/govuk_publishing_components/mail-icon-x2.png b/app/assets/images/govuk_publishing_components/mail-icon-x2.png new file mode 100644 index 0000000000000000000000000000000000000000..4625eceb9bb0ea8e0ecbe2d0dd733a3fee6af833 GIT binary patch literal 256 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<=!3-o-PV+tiQ2{<7uG}EN!^OqT#l^$T%?o4z z0ZER&NTk;9Vo>uv!>8$DedLn?0Fy?mOlRe{Gf zux6^<-~a#jGB1{1BH^xf{hWeziLb})!#_6{1Q#W9Udm?wW6fO7=ldEC9Q2o3}>nV1TI0>d!@ivEtrOuLj@;G4J i*zby;y?(5G|BJcvtd4)FUSJE*F$|urelF{r5}E)J%~*#3 literal 0 HcmV?d00001 diff --git a/app/assets/images/govuk_publishing_components/mail-icon.png b/app/assets/images/govuk_publishing_components/mail-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..5f63ddea453718b820fd122dc8e2a4f18a89f94b GIT binary patch literal 213 zcmeAS@N?(olHy`uVBq!ia0vp^B0$W?!VDzuzEV64q*MZYLR^6~4-YSXbj@s?7Em2` zNswPKL&N^_^WP^3++T0-H)qB_pm3?_X9ZE`S>R+@F-zyUTf(|dbc z8xKl*7`_Sna4$D*Pc^r2$H{Hg*ODu6qI2yTKnoZ=UHx3vIVCg!0H=~b*Z=?k literal 0 HcmV?d00001 diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss index d5a599c544..87420f52d2 100644 --- a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +++ b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss @@ -21,6 +21,7 @@ @import "components/step-by-step-nav"; @import "components/step-by-step-nav-header"; @import "components/step-by-step-nav-related"; +@import "components/subscription-links"; @import "components/feedback"; @import "components/inverse-header"; @import "components/success-alert"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss b/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss new file mode 100644 index 0000000000..542a0f36e6 --- /dev/null +++ b/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss @@ -0,0 +1,40 @@ +.gem-c-subscription-links { + @include bold-19; + + .gem-c-subscription-links__list { + list-style: none; + margin-left: -$gutter-half / 2; + margin-right: -$gutter-half / 2; + } + + .gem-c-subscription-links__list-item { + display: inline-block; + margin-left: $gutter-half / 2; + margin-right: $gutter-half / 2; + margin-bottom: $gutter-half; + } + + .gem-c-subscription-links__link { + text-decoration: none; + padding-left: 28px; + background-repeat: no-repeat; + background-position: 0 20%; + + @include media(tablet) { + background-position: 0 35%; + } + } + + .gem-c-subscription-links__link--feed { + background-image: image-url("govuk_publishing_components/feed-icon-black.png"); + } + + .gem-c-subscription-links__link--email-alerts { + background-image: image-url("govuk_publishing_components/mail-icon.png"); + + @include device-pixel-ratio() { + background-image: image-url("govuk_publishing_components/mail-icon-x2.png"); + background-size: 20px 14px; + } + } +} diff --git a/app/views/govuk_publishing_components/components/_subscription-links.html.erb b/app/views/govuk_publishing_components/components/_subscription-links.html.erb new file mode 100644 index 0000000000..c319020d5c --- /dev/null +++ b/app/views/govuk_publishing_components/components/_subscription-links.html.erb @@ -0,0 +1,21 @@ +<% + email_signup_link ||= false + feed_link ||= false +%> +<% if email_signup_link || feed_link %> +
+

Subscriptions

+
    + <% if email_signup_link.present? %> +
  • + <%= link_to "Get email alerts", email_signup_link, class: "gem-c-subscription-links__link gem-c-subscription-links__link--email-alerts" %> +
    • + <% end %> + <% if feed_link.present? %> +
  • + <%= link_to "Subscribe to feed", feed_link, class: "gem-c-subscription-links__link gem-c-subscription-links__link--feed" %> +
    • + <% end %> +
+
+<% end %> diff --git a/app/views/govuk_publishing_components/components/docs/subscription-links.yml b/app/views/govuk_publishing_components/components/docs/subscription-links.yml new file mode 100644 index 0000000000..95b409f0be --- /dev/null +++ b/app/views/govuk_publishing_components/components/docs/subscription-links.yml @@ -0,0 +1,17 @@ +name: Subscription links +description: Links to ‘Get email alerts’ and ‘Subscribe to feed’ +accessibility_criteria: | + Icons in subscription links must be presentational and ignored by screen readers. +shared_accessibility_criteria: + - link +examples: + default: + data: + email_signup_link: '/foreign-travel-advice/singapore/email-signup' + feed_link: '/foreign-travel-advice/singapore.atom' + with_only_email_signup_link: + data: + email_signup_link: '/foreign-travel-advice/singapore/email-signup' + with_only_feed_link: + data: + feed_link: '/foreign-travel-advice/singapore.atom' diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index a11b3e22b3..c323af15c7 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -1,6 +1,9 @@ Rails.application.config.assets.precompile += %w( govuk_publishing_components/component_guide.css component_guide/all_components.css - component_guide/all_components_print + component_guide/all_components_print.css govuk_publishing_components/search-button.png + govuk_publishing_components/feed-icon-black.png + govuk_publishing_components/mail-icon-x2.png + govuk_publishing_components/mail-icon.png ) diff --git a/spec/components/subscription_links_spec.rb b/spec/components/subscription_links_spec.rb new file mode 100644 index 0000000000..bb39145e69 --- /dev/null +++ b/spec/components/subscription_links_spec.rb @@ -0,0 +1,27 @@ +require 'rails_helper' + +describe "subscription links", type: :view do + def component_name + "subscription-links" + end + + it "renders nothing when no parameters are given" do + assert_empty render_component({}) + end + + it "renders an email signup link" do + render_component(email_signup_link: '/email-signup') + assert_select ".gem-c-subscription-links__link--email-alerts[href=\"/email-signup\"]", text: "Get email alerts" + end + + it "renders a feed link" do + render_component(feed_link: 'singapore.atom') + assert_select ".gem-c-subscription-links__link--feed[href=\"singapore.atom\"]", text: "Subscribe to feed" + end + + it "renders both email signup and feed links" do + render_component(email_signup_link: 'email-signup', feed_link: 'singapore.atom') + assert_select ".gem-c-subscription-links__link--email-alerts[href=\"email-signup\"]", text: "Get email alerts" + assert_select ".gem-c-subscription-links__link--feed[href=\"singapore.atom\"]", text: "Subscribe to feed" + end +end