Add subscription links component

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

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";

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

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 %>
+  <section class="gem-c-subscription-links">
+    <h2 class="visuallyhidden">Subscriptions</h2>
+    <ul class="gem-c-subscription-links__list">
+      <% if email_signup_link.present? %>
+        <li class="gem-c-subscription-links__list-item">
+          <%= link_to "Get email alerts", email_signup_link, class: "gem-c-subscription-links__link gem-c-subscription-links__link--email-alerts" %>
+        </li>
+      <% end %>
+      <% if feed_link.present? %>
+        <li class="gem-c-subscription-links__list-item">
+          <%= link_to "Subscribe to feed", feed_link, class: "gem-c-subscription-links__link gem-c-subscription-links__link--feed" %>
+        </li>
+      <% end %>
+    </ul>
+  </section>
+<% end %>

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'

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
 )

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