Update "print entire guide" functionality

[jon-kirwan]

What

https://trello.com/c/OlsybM1y/914-update-print-entire-guide-functionality

• Remove Print entire guide button and replace with link View a printable version of the whole guide and
• Replace print link component with a hyperlink to the printable version page (/print)
• Disable the print dialogue from automatically appearing on the printable version page (/print)
• Add additional copy below page h1, Printable version using the lead paragraph component
• Add two Print this page buttons on the printable version page (/print)
• Add analytics / click-rate tracking on both print buttons (top and bottom)

Why

• The current implementation of printing an entire piece of guidance on GOV.UK is very jarring experience e.g. when a user selects the button they are taken to a new page followed by the print dialogue opening up. See more here: https://trello.com/c/C2WNpsuq/384-confusing-links-for-printing

Visual changes

• https://government-f-update-pri-wexzio.herokuapp.com/foreign-travel-advice/afghanistan
• https://government-f-update-pri-wexzio.herokuapp.com/universal-credit

Before (guide - content page)	After (guide - content page)

Before (guide - printable version)	After (guide - printable version)

Before (travel_advice - content page)	After (travel_advice - content page)

Before (travel_advice - printable version)	After (travel_advice - printable version)

Anything else

• the description above mentions that this applies to page types of "schema_name": "guide". I also found that the print this page functionality can be found on page types of "schema_name": "travel_advice" e.g. https://www.gov.uk/foreign-travel-advice/afghanistan
• I have applied the updates in both places
• there are some issues with a broken document structure on these pages. For example, https://www.gov.uk/foreign-travel-advice/afghanistan ("schema_name": "travel_advice") has two h1s (I'm unable to fix this at the moment since I think content changes would also be needed). You can see the same problem here: https://www.gov.uk/universal-credit ("schema_name": "guide"). See:
  

  government-frontend/app/views/content_items/guide.html+print.erb

  Lines 33 to 35 in 6b0ac00

  	<h1 class="part-title">
  	<%= "#{index + 1}. #{part['title']}" %>
  	</h1>

  
  and
  

  government-frontend/app/views/content_items/travel_advice.html+print.erb

  Lines 32 to 34 in 6b0ac00

  	<h1 class="part-title">
  	<%= part['title'] %>
  	</h1>

[maxgds]

One small thing for you to consider - happy to approve it if you and Nik decide it's ok as is.

Good point on the page structure, I'll raise another ticket for that. Please update the links on it, though, currently they point to the same example for both schema types.

[maxgds]

I think this might benefit from adding govuk-!-display-none-print which means while it renders on screen it wouldn't show up in the printed version - one to check with Nik though. I think you'll have to use a wrapper to apply it as I don't think the lead paragraph can, or should, take extra classes.

I was in two minds about using the lead paragraph component as this doesn't seem to qualify as a paragraph, it's so short, but it does seem to match the use case when I looked at the docs so I think it should stay even if that does mean we need the extra clutter of a wrapper if we hide the text on the printout.

Whatever you do here obviously applies for the other case where it appears. While the same is true for the actual print button, that's handled by the component side and already applied.

[nnagewad]

Spoke to @jon-kirwan and really like that idea @maxgds. :)

[jon-kirwan]

Thanks @maxgds - have updated both page / schema types as above. I can't see a way to pass in an extra class to the lead paragraph component either so instead have wrapped it with a div and added the govuk-!-display-none-print class.

I've updated in the same commit since it's quite a small change.

Also updated the link examples in the description.