Add print link component

This component adds a visual link that includes a print icon and can be
used to help users print a page. This pattern was orginally implemented in
the Government Frontend application, however we'd like to re-use this
component in Smart Answers.

The component adds either a button or link depending on whether the
application support printing via navigation (used to add support for
environments where JavaScript is disabled e.g. /print). The default for
this component is to use a button and rely on JavaScript to call the DOM
API. This allows the component to be added to an application without having
to add extra routes to trigger printing. However for applications that
have routes for printing (e.g. Government Frontend), a `href` can be
specified and the component will render as anchor tag.

CHANGELOG.md

@@ -10,6 +10,7 @@
 ## Unreleased
 
 * 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()
+  })
+})