Merge pull request #803 from alphagov/subs-component

Adds small form option to subscription component
alphagov · Mar 28, 2019 · 60db19a · 60db19a
2 parents 267510e + 7135bf4
commit 60db19a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@
 ## Unreleased
 
 * Control when checkboxes change event sends Google Analytics tracking info (PR #801)
+* Updates govuk-frontend from 2.5.1 to 2.9.0 (PR #794)
+* Adds small form option to subscription component (PR #803)
 
 ## 16.8.0
 

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss b/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss
@@ -1,28 +1,31 @@
 .gem-c-subscription-links {
   @include govuk-text-colour;
-  @include bold-19;
+  @include govuk-font(19, $weight: bold);
 
   .gem-c-subscription-links__hidden-header {
     @include govuk-visually-hidden;
   }
 
   .gem-c-subscription-links__list {
     list-style: none;
-    margin: 0 (-$gutter-half / 2);
+    margin: 0 (-govuk-spacing(3) / 2);
     padding: 0;
   }
 
+  .gem-c-subscription-links__list--small {
+    @include govuk-font(16);
+  }
+
   .gem-c-subscription-links__list-item {
     display: inline-block;
-    margin-left: $gutter-half / 2;
-    margin-right: $gutter-half / 2;
-    margin-bottom: $gutter-half;
+    margin-left: govuk-spacing(2);
+    margin-right: govuk-spacing(2);
+    margin-bottom: govuk-spacing(3);
   }
 
   .gem-c-subscription-links__link {
     @extend %govuk-link;
     text-decoration: none;
-    padding-left: 28px;
     background-repeat: no-repeat;
     background-position: 0 20%;
 
@@ -33,6 +36,7 @@
 
   .gem-c-subscription-links__link--feed {
     background-image: image-url("govuk_publishing_components/feed-icon-black.png");
+    padding-left: govuk-spacing(4);
 
     // if this is a toggle, only show if js is enabled
     &[data-controls] {
@@ -46,16 +50,17 @@
 
   .gem-c-subscription-links__link--email-alerts {
     background-image: image-url("govuk_publishing_components/mail-icon.png");
+    padding-left: govuk-spacing(5);
 
     @include device-pixel-ratio() {
       background-image: image-url("govuk_publishing_components/mail-icon-x2.png");
-      background-size: 20px 14px;
+      background-size: govuk-spacing(4) govuk-spacing(3);
     }
   }
 
   .gem-c-subscription-links__feed-box {
-    padding: $gutter-half;
-    margin-bottom: $gutter-half;
+    padding: govuk-spacing(3);
+    margin-bottom: govuk-spacing(3);
     background: $grey-3;
 
     .js-enabled &.js-hidden {

diff --git a/app/views/govuk_publishing_components/components/_subscription-links.html.erb b/app/views/govuk_publishing_components/components/_subscription-links.html.erb
@@ -16,7 +16,7 @@
   <%= tag.section class: css_classes, data: data do %>
     <h2 class="gem-c-subscription-links__hidden-header visuallyhidden"><%= t("govuk_component.subscription_links.subscriptions", default: "Subscriptions") %></h2>
     <ul
-      class="gem-c-subscription-links__list"
+      class="gem-c-subscription-links__list<%= ' gem-c-subscription-links__list--small' if local_assigns[:small_form] == true %>"
       <%= "data-module=track-click" if sl_helper.tracking_is_present? %>
     >
       <% if sl_helper.email_signup_link.present? %>

diff --git a/app/views/govuk_publishing_components/components/docs/subscription-links.yml b/app/views/govuk_publishing_components/components/docs/subscription-links.yml
@@ -72,3 +72,9 @@ examples:
           dimension29: 'dimension29feedLink'
         }
       }
+  as_small_form:
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+      small_form: true
+
diff --git a/spec/components/subscription_links_spec.rb b/spec/components/subscription_links_spec.rb
@@ -78,4 +78,9 @@ def component_name
     assert_select ".gem-c-subscription-links[data-module=\"gem-toggle\"]"
     assert_select ".gem-c-subscription-links__list[data-module=\"track-click\"] .gem-c-subscription-links__link--feed[data-track-category=\"test\"]"
   end
+
+  it "adds small form modifier to the list of links" do
+    render_component(email_signup_link: 'email-signup', feed_link: 'singapore.atom', small_form: true)
+    assert_select ".gem-c-subscription-links__list--small"
+  end
 end