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 0000000000..643830f580 Binary files /dev/null and b/app/assets/images/govuk_publishing_components/feed-icon-black.png differ 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 0000000000..4625eceb9b Binary files /dev/null and b/app/assets/images/govuk_publishing_components/mail-icon-x2.png differ 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 0000000000..5f63ddea45 Binary files /dev/null and b/app/assets/images/govuk_publishing_components/mail-icon.png differ 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

+ +
+<% 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..00761fb9b2 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -3,4 +3,7 @@ component_guide/all_components.css component_guide/all_components_print 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..539a716a5c --- /dev/null +++ b/spec/components/subscription_links_spec.rb @@ -0,0 +1,27 @@ +require 'rails_helper' + +describe "step nav", 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