Update "print entire guide" functionality

app/views/content_items/guide.html+print.erb

@@ -3,22 +3,54 @@
   content_for :simple_header, true
   content_for :extra_head_content do %>
   <meta name="robots" content="noindex, nofollow">
-  <script>window.onload = function() { window.print(); }</script>
 <% end %>
 
 <div class="govuk-grid-row" id="guide-print">
   <div class="govuk-grid-column-two-thirds">
-    <%= render 'govuk_publishing_components/components/title', { title: @content_item.title } %>
+    <%= render 'govuk_publishing_components/components/title', { 
+      margin_bottom: 6,
+      title: @content_item.title,
+    } %>
+
+    <div class="govuk-!-display-none-print">
+      <%= render 'govuk_publishing_components/components/lead_paragraph', {
+        margin_bottom: 6,
+        text: t("multi_page.printable_version"),
+      } %>
+    </div>
+
+    <%= render 'govuk_publishing_components/components/print_link', {
+      data_attributes: {
+        "track-category": "printButton",
+        "track-action": "clicked",
+        "track-label": t("components.print_link.text"),
+        module: "print-link"
+      },
+      margin_bottom: 8,
+      text: t("components.print_link.text"),
+    } %>
+
     <% @content_item.parts.each_with_index do |part, index| %>
       <section>
         <h1 class="part-title">
           <%= "#{index + 1}. #{part['title']}" %>
         </h1>
+
         <%= render 'govuk_publishing_components/components/govspeak',
-            content: part['body'].html_safe,
-            direction: page_text_direction,
-            disable_youtube_expansions: true %>
+          content: part['body'].html_safe,
+          direction: page_text_direction,
+          disable_youtube_expansions: true %>
       </section>
     <% end %>
+
+    <%= render 'govuk_publishing_components/components/print_link', {
+      data_attributes: {
+        "track-category": "printButton",
+        "track-action": "clicked",
+        "track-label": t("components.print_link.text"),
+        module: "print-link"
+      },
+      text: t("components.print_link.text")
+    } %>
   </div>
 </div>

app/views/content_items/guide.html.erb

@@ -46,7 +46,10 @@
 
       <% if @content_item.show_guide_navigation? %>
         <%= render 'govuk_publishing_components/components/previous_and_next_navigation', @content_item.previous_and_next_navigation %>
-        <%= render 'govuk_publishing_components/components/print_link', href: @content_item.print_link, text: t("multi_page.print_entire_guide") %>
+
+        <div class="responsive-bottom-margin">
+          <a href="<%= @content_item.print_link %>" class="govuk-link govuk-link--no-visited-state govuk-body"><%= t("multi_page.print_entire_guide") %></a>
+        </div>
       <% end %>
     <% end %>
   </div>

app/views/content_items/travel_advice.html+print.erb

@@ -3,12 +3,32 @@
   content_for :simple_header, true
   content_for :extra_head_content do %>
   <meta name="robots" content="noindex, nofollow">
-  <script>window.onload = function() { window.print(); }</script>
 <% end %>
 
 <div class="govuk-grid-row" id="travel-advice-print">
   <div class="govuk-grid-column-two-thirds">
-    <%= render 'govuk_publishing_components/components/title', @content_item.title_and_context %>
+    <div class="govuk-!-margin-bottom-6">
+      <%= render 'govuk_publishing_components/components/title', @content_item.title_and_context %>
+    </div>
+
+    <div class="govuk-!-display-none-print">
+      <%= render 'govuk_publishing_components/components/lead_paragraph', {
+        margin_bottom: 6,
+        text: t("multi_page.printable_version"),
+      } %>
+    </div>
+
+    <%= render 'govuk_publishing_components/components/print_link', {
+      data_attributes: {
+        "track-category": "printButton",
+        "track-action": "clicked",
+        "track-label": t("components.print_link.text"),
+        module: "print-link"
+      },
+      margin_bottom: 8,
+      text: t("components.print_link.text"),
+    } %>
+
     <% @content_item.parts.each_with_index do |part, i| %>
       <section>
         <h1 class="part-title">
@@ -18,9 +38,19 @@
         <%= render 'shared/travel_advice_summary', content_item: @content_item if i == 0 %>
 
         <%= render 'govuk_publishing_components/components/govspeak',
-            content: part['body'].html_safe,
-            direction: page_text_direction %>
+          content: part['body'].html_safe,
+          direction: page_text_direction %>
       </section>
     <% end %>
+
+    <%= render 'govuk_publishing_components/components/print_link', {
+      data_attributes: {
+        "track-category": "printButton",
+        "track-action": "clicked",
+        "track-label": t("components.print_link.text"),
+        module: "print-link"
+      },
+      text: t("components.print_link.text")
+    } %>
   </div>
 </div>

app/views/content_items/travel_advice.html.erb

@@ -8,22 +8,20 @@
     canonical_url: @content_item.canonical_url,
     title: @content_item.page_title,
     body: @content_item.current_part_body
-    ) %>
+  ) %>
 <% end %>
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds travel-advice__header">
     <%= render 'govuk_publishing_components/components/title', @content_item.title_and_context %>
 
     <aside class="part-navigation-container" role="complementary">
-      <nav role="navigation" class="govuk-grid-row part-navigation" aria-label="Travel advice pages">
-        <%= render "govuk_publishing_components/components/contents_list", contents: @content_item.part_link_elements, underline_links: true %>
-      </nav>
+      <%= render "govuk_publishing_components/components/contents_list", aria_label: t("travel_advice.pages"), contents: @content_item.part_link_elements, underline_links: true %>
 
       <%= render 'govuk_publishing_components/components/subscription_links',
-          email_signup_link: @content_item.email_signup_link,
-          email_signup_link_text: "Get email alerts",
-          feed_link: @content_item.feed_link %>
+        email_signup_link: @content_item.email_signup_link,
+        email_signup_link_text: "Get email alerts",
+        feed_link: @content_item.feed_link %>
     </aside>
   </div>
 </div>
@@ -53,7 +51,7 @@
     <%= render 'govuk_publishing_components/components/previous_and_next_navigation', @content_item.previous_and_next_navigation %>
 
     <div class="responsive-bottom-margin">
-      <%= render 'govuk_publishing_components/components/print_link', href: @content_item.print_link, text: t("multi_page.print_entire_guide") %>
+      <a href="<%= @content_item.print_link %>" class="govuk-link govuk-link--no-visited-state govuk-body"><%= t("multi_page.print_entire_guide") %></a>
     </div>
   </div>
   <%= render 'shared/sidebar_navigation' %>

config/locales/en.yml

@@ -24,6 +24,8 @@ en:
       show_all: show all
     share_links:
       share_this_page: Share this page
+    print_link:
+      text: "Print this page"
   consultation:
     and: and
     another_website_html: This consultation %{closed} held on <a href="%{url}">another website</a>
@@ -427,7 +429,8 @@ en:
   multi_page:
     next_page: Next
     previous_page: Previous
-    print_entire_guide: Print entire guide
+    print_entire_guide: View a printable version of the whole guide
+    printable_version: Printable version
   publication:
     details: Details
     documents:
@@ -470,6 +473,7 @@ en:
       avoid_all_travel_to_parts_html: The <abbr title="Foreign, Commonwealth and Development Office">FCDO</abbr> advise against all travel to parts of the country.
       avoid_all_travel_to_whole_country_html: The <abbr title="Foreign, Commonwealth and Development Office">FCDO</abbr> advise against all travel to the whole country.
     context: Foreign travel advice
+    pages: Travel advice pages
     still_current_at: Still current at
     summary: Summary
     updated: Updated

test/integration/guide_test.rb

@@ -13,7 +13,7 @@ class GuideTest < ActionDispatch::IntegrationTest
 
     assert page.has_css?("h1", text: @content_item["details"]["parts"].first["title"])
     assert page.has_css?(".gem-c-pagination")
-    assert page.has_css?('.gem-c-print-link a[href$="/print"]')
+    assert page.has_css?(".govuk-link.govuk-link--no-visited-state[href$='/print']", text: "View a printable version of the whole guide")
   end
 
   test "draft access tokens are appended to part links within navigation" do
@@ -60,14 +60,14 @@ class GuideTest < ActionDispatch::IntegrationTest
     setup_and_visit_content_item("guide-with-step-navs-and-hide-navigation")
 
     assert_not page.has_css?(".gem-c-pagination")
-    assert_not page.has_css?(".gem-c-print-link")
+    assert_not page.has_css?(".govuk-link.govuk-link--no-visited-state[href$='/print']")
   end
 
   test "shows guide navigation and print link if not in a step by step and hide_chapter_navigation is true" do
     setup_and_visit_content_item("guide-with-hide-navigation")
 
     assert page.has_css?(".gem-c-pagination")
-    assert page.has_css?(".gem-c-print-link")
+    assert page.has_css?(".govuk-link.govuk-link--no-visited-state[href$='/print']", text: "View a printable version of the whole guide")
   end
 
   test "guides with no parts in a step by step with hide_chapter_navigation do not error" do

test/integration/travel_advice_test.rb

@@ -14,16 +14,16 @@ class TravelAdviceTest < ActionDispatch::IntegrationTest
     assert page.has_css?("a[href=\"#{@content_item['details']['email_signup_link']}\"]", text: "Get email alerts")
     assert page.has_css?("a[href=\"#{@content_item['base_path']}.atom\"]", text: "Subscribe to feed")
 
-    assert page.has_css?(".part-navigation li", count: @content_item["details"]["parts"].size + 1)
-    assert page.has_css?(".part-navigation li", text: "Summary")
+    assert page.has_css?(".part-navigation-container nav li", count: @content_item["details"]["parts"].size + 1)
+    assert page.has_css?(".part-navigation-container nav li", text: "Summary")
     assert_not page.has_css?(".part-navigation li a", text: "Summary")
 
     @content_item["details"]["parts"].each do |part|
-      assert page.has_css?(".part-navigation li a[href*=\"#{part['slug']}\"]", text: part["title"])
+      assert page.has_css?(".part-navigation-container nav li a[href*=\"#{part['slug']}\"]", text: part["title"])
     end
 
     assert page.has_css?(".gem-c-pagination")
-    assert page.has_css?('.gem-c-print-link a[href$="/print"]')
+    assert page.has_css?('.govuk-link.govuk-link--no-visited-state[href$="/print"]', text: "View a printable version of the whole guide")
   end
 
   test "travel advice summary has latest updates and map" do
@@ -55,8 +55,8 @@ class TravelAdviceTest < ActionDispatch::IntegrationTest
     assert_not page.has_css?(".map")
     assert_not page.has_css?(".gem-c-metadata")
 
-    assert page.has_css?(".part-navigation li", text: first_part["title"])
-    assert_not page.has_css?(".part-navigation li a", text: first_part["title"])
+    assert page.has_css?(".part-navigation-container nav li", text: first_part["title"])
+    assert_not page.has_css?(".part-navigation-container nav li a", text: first_part["title"])
   end
 
   test "travel advice includes a discoverable atom feed link" do