Merge pull request #2525 from alphagov/add-signup-link-component

Add signup link component

CHANGELOG.md

@@ -16,6 +16,7 @@
 
 ## 27.18.0
 
+* Add signup link component ([PR #2525](https://github.com/alphagov/govuk_publishing_components/pull/2525))
 * Remove jQuery from page-content ([PR #2505](https://github.com/alphagov/govuk_publishing_components/pull/2505))
 * Replace use of `includes()` in `explicit-cross-domain-links.js` with `indexOf()` alternative [PR #2515](https://github.com/alphagov/govuk_publishing_components/pull/2515)
 * Fix font for menu paragraphs [PR #2509](https://github.com/alphagov/govuk_publishing_components/pull/2509)

app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -68,6 +68,7 @@ $govuk-new-link-styles: true;
 @import "components/select";
 @import "components/share-links";
 @import "components/show-password";
+@import "components/signup-link";
 @import "components/single-page-notification-button";
 @import "components/skip-link";
 @import "components/step-by-step-nav-header";

app/assets/stylesheets/govuk_publishing_components/components/_signup-link.scss

@@ -0,0 +1,34 @@
+.gem-c-signup-link__link {
+  @include govuk-font($size: 19);
+}
+
+.gem-c-signup-link__inner {
+  position: relative;
+}
+
+.gem-c-signup-link__icon {
+  position: absolute;
+
+  @include govuk-media-query($from: tablet) {
+    top: 2px;
+  }
+}
+
+.gem-c-signup-link__title {
+  margin-bottom: govuk-spacing(2);
+  margin-left: govuk-spacing(5);
+}
+
+.gem-c-signup-link--with-background-and-border {
+  padding: govuk-spacing(6);
+  background-color: govuk-colour("light-grey");
+  border: 1px solid $govuk-border-colour;
+}
+
+.gem-c-signup-link--link-only .gem-c-signup-link__link {
+  display: inline-block;
+  vertical-align: top;
+  font-weight: bold;
+  margin-left: govuk-spacing(5);
+  margin-bottom: 0;
+}

app/views/govuk_publishing_components/components/_signup_link.html.erb

@@ -0,0 +1,30 @@
+<%
+  local_assigns[:heading_level] ||= 3
+  local_assigns[:margin_bottom] ||= 0
+  link_text ||= false
+  link_href ||= false
+  heading ||= false
+  background ||= false
+  data ||= false
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
+  classes = %w(gem-c-signup-link govuk-!-display-none-print)
+  classes << shared_helper.get_margin_bottom
+  classes << "gem-c-signup-link--link-only" unless heading
+  classes << "gem-c-signup-link--with-background-and-border" if background
+%>
+<% if link_text && link_href %>
+  <div class="<%= classes.join(' ') %>">
+    <div class="gem-c-signup-link__inner govuk-width-container">
+      <svg  class="gem-c-signup-link__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334">
+        <path fill="black" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/>
+      </svg>
+      <%= content_tag(shared_helper.get_heading_level, heading, class: "govuk-heading-s gem-c-signup-link__title") if heading %>
+      <%= link_to( link_text, link_href, {
+        class: "govuk-link gem-c-signup-link__link",
+        data: data
+      }) %>
+    </div>
+  </div>
+<% end %>

app/views/govuk_publishing_components/components/docs/signup_link.yml

@@ -0,0 +1,39 @@
+name: Signup link
+description: Renders a box with a link to sign up for email notifications
+accessibility_criteria: |
+  - the component must use the correct heading level for the page
+  - text should have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+  - the icon must not be focusable or shown to screenreaders
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      heading: 'Sign up for email notifications'
+      link_text: 'Click right here to sign up!!'
+      link_href: '/this-signs-you-up'
+  with_background_and_border:
+    data:
+      heading: 'Sign up for email notifications'
+      link_text: 'Click right here to sign up!!'
+      link_href: '/this-signs-you-up'
+      background: true
+  link_only:
+    description: If no heading text is passed through, a more compact, link only version is rendered.
+    data:
+      link_text: 'Click right here to sign up!!'
+      link_href: '/this-signs-you-up'
+  with_custom_margin_bottom:
+    description: The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having no margin bottom.
+    data:
+      heading: 'Sign up for email notifications'
+      link_text: 'Click right here to sign up!!'
+      link_href: '/this-signs-you-up'
+      margin_bottom: 8
+  with_custom_heading_level:
+    description: Override default heading level by passing through `heading_level` parameter (defaults to `h3`).
+    data:
+      heading: 'Sign up for email notifications'
+      link_text: 'Click right here to sign up!!'
+      link_href: '/this-signs-you-up'
+      heading_level: 1

spec/components/signup_link_spec.rb

@@ -0,0 +1,50 @@
+require "rails_helper"
+
+describe "Signup link", type: :view do
+  def component_name
+    "signup_link"
+  end
+
+  let(:attributes) do
+    {
+      heading: "Stay up to date with GOV.UK",
+      link_href: "/signup-link?topic=/coronavirus-taxon",
+      link_text: "Sign up to get emails",
+    }
+  end
+
+  let(:render_signup_link) { render_component(attributes) }
+
+  it "renders nothing with no input" do
+    render_component({})
+    expect(rendered).to be_empty
+  end
+
+  it "renders link when link is passed" do
+    render_signup_link
+    expect(rendered).to have_link attributes[:link_text], href: attributes[:link_href], class: "gem-c-signup-link__link"
+  end
+
+  it "renders optional heading" do
+    render_signup_link
+    expect(rendered).to have_selector(".gem-c-signup-link__title", text: attributes[:heading])
+  end
+
+  it "renders component with custom heading level" do
+    attributes[:heading_level] = 1
+    render_signup_link
+    expect(rendered).to have_selector("h1.gem-c-signup-link__title", text: attributes[:heading])
+  end
+
+  it "renders component with background and border when background is true" do
+    attributes[:background] = true
+    render_signup_link
+    expect(rendered).to have_selector(".gem-c-signup-link--with-background-and-border")
+  end
+
+  it "adds data attributes when data attributes are passed" do
+    attributes[:data] = { "custom-data-attr": "customVal" }
+    render_signup_link
+    expect(rendered).to have_selector(".gem-c-signup-link .gem-c-signup-link__link[data-custom-data-attr='customVal']")
+  end
+end