Merge pull request #1582 from alphagov/add-print-link

Add print link component

CHANGELOG.md

@@ -16,6 +16,7 @@
 ## 21.56.2
 
 * Fix layout on input with prefix/suffix ([PR #1581](https://github.com/alphagov/govuk_publishing_components/pull/1581))
+* Add print link component ([PR #1582](https://github.com/alphagov/govuk_publishing_components/pull/1582))
 
 ## 21.56.1
 

app/assets/javascripts/govuk_publishing_components/components/print-link.js

@@ -0,0 +1,14 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  'use strict'
+
+  Modules.PrintLink = function () {
+    this.start = function (element) {
+      element[0].addEventListener('click', function () {
+        window.print()
+      })
+    }
+  }
+})(window.GOVUK.Modules)

app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -53,6 +53,7 @@
 @import "components/panel";
 @import "components/phase-banner";
 @import "components/previous-and-next-navigation";
+@import "components/print-link";
 @import "components/radio";
 @import "components/related-navigation";
 @import "components/search";

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

@@ -0,0 +1,52 @@
+.gem-c-print-link {
+  display: none;
+  margin-bottom: 2em;
+  margin-top: 2em;
+}
+
+.gem-c-print-link.gem-c-print-link--show-without-js {
+  display: block;
+}
+
+.js-enabled {
+  .gem-c-print-link {
+    display: block;
+  }
+}
+
+.gem-c-print-link__link {
+  background: image-url("govuk_publishing_components/icon-print.png") no-repeat 10px 50%;
+
+  margin-left: -10px;
+  padding: .5em .5em .5em 38px;
+
+  @include govuk-device-pixel-ratio($ratio: 2) {
+    background-image: image-url("govuk_publishing_components/icon-print-2x.png");
+    background-size: 16px 18px;
+  }
+
+  &:focus {
+    @include govuk-focused-text;
+  }
+}
+
+.gem-c-print-link__button {
+  @extend %govuk-body-s;
+  background: image-url("govuk_publishing_components/icon-print.png") no-repeat 10px 50%;
+  border: 0;
+  color: $govuk-link-colour;
+  cursor: pointer;
+  margin: 0;
+  margin-left: -10px;
+  padding: .5em .5em .5em 38px;
+  text-decoration: underline;
+
+  @include govuk-device-pixel-ratio($ratio: 2) {
+    background-image: image-url("govuk_publishing_components/icon-print-2x.png");
+    background-size: 16px 18px;
+  }
+
+  &:focus {
+    @include govuk-focused-text;
+  }
+}

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

@@ -0,0 +1,27 @@
+<%
+  text ||= t('components.print_link.text')
+  href ||= nil
+  data_attributes ||= {}
+
+  require_js ||= href.nil?
+  data_attributes[:module] = 'print-link' if require_js
+%>
+
+<% if require_js %>
+  <div class="gem-c-print-link" >
+    <%= content_tag(:button, text, {
+        class: %w(gem-c-print-link__button govuk-link),
+        data: data_attributes
+    }) %>
+  </div>
+<% else %>
+  <div class="gem-c-print-link gem-c-print-link--show-without-js">
+    <%= link_to(
+      text,
+      href,
+      class: %w(gem-c-print-link__link govuk-link),
+      rel: "alternate",
+      data: data_attributes
+    ) %>
+  </div>
+<% end %>

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

@@ -0,0 +1,24 @@
+name: Print link
+description: A link with a print icon to help users print the current page
+body: |
+  This component renders two different outputs depending on whether a `href` is specified. By default, when no `href` is given, the component renders as a button and triggers a print action via JavaScript. In this case the component is hidden in environments where JavaScript is disabled and can be used as a progressive enhancement. When a `href` is specified the component renders as an anchor tag and navigates to that `href` without JavaScript, suitable for applications which have paths that trigger a print event on load.
+accessibility_criteria: |
+  - The print icon must be presentational and ignored by screen readers.
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    description: This component calls `print()` via the browser's DOM API. By default it relies on JavaScript and is not shown in environments where JavaScript is disabled. The \"link\" here is actually a button tag because this is not a navigation event. 
+  with_different_text:
+    data:
+      text: "Print this manual"
+  with_different_href:
+    description: You can specify a alternative `href` URL that will override the default behaviour. When a `href` is specified the print link will render as an anchor tag and be displayed even when JavaScript is disabled.
+    data:
+      href: "/print"
+  with_data_attributes:
+    data:
+      data_attributes:
+        track-category: "printButton"
+        track-action: "clicked"
+        track-label: "Print this page"

config/locales/en.yml

@@ -58,6 +58,8 @@ en:
       policies: "Policies"
       statistical_data_sets: "Statistical data sets"
       topical_events: "Topical events"
+    print_link:
+      text: "Print this page"
     skip_link:
       text: "Skip to main content"
     step_by_step_nav:

spec/components/print_link_spec.rb

@@ -0,0 +1,41 @@
+require "rails_helper"
+
+describe "Print link", type: :view do
+  def component_name
+    "print_link"
+  end
+
+  it "renders with default text no data is given" do
+    render_component({})
+
+    assert_select ".gem-c-print-link"
+    assert_select(
+      "button.gem-c-print-link__button",
+      text: "Print this page",
+    )
+  end
+
+  it "renders with alternative text when given" do
+    render_component({
+      text: "Print this manual",
+    })
+
+    assert_select ".gem-c-print-link"
+    assert_select(
+      "button.gem-c-print-link__button",
+      text: "Print this manual",
+    )
+  end
+
+  it "renders with alternative href as an anchor link" do
+    render_component({
+      href: "/print",
+    })
+
+    assert_select ".gem-c-print-link"
+    assert_select(
+      'a.gem-c-print-link__link[href="/print"]',
+      text: "Print this page",
+    )
+  end
+end

spec/javascripts/components/print-link-spec.js

@@ -0,0 +1,15 @@
+/* eslint-env jasmine, jquery */
+/* global GOVUK */
+
+describe('Print link', function () {
+  it('calls the DOM print API when clicked', function () {
+    spyOn(window, 'print')
+    var element = $('<button class="gem-c-print-link__button govuk-link">Print this page</button>')
+
+    new GOVUK.Modules.PrintLink().start(element)
+
+    element.trigger('click')
+
+    expect(window.print).toHaveBeenCalled()
+  })
+})