Improve Pagination component print styles

[NickColley]

By default .govuk-link print styles will output the href attribute
in brackets after the link. For example: "Home (/homepage)".

This is done with the ::after pseudo selector.
So when this was styled to increase the touch area of the pagination link
it resulted in the bracketed information overlapping the component in
a difficult to read way.

By only applying this touch area improvement in the screen media context
we avoid overwriting this inherited print style and allow the default
.govuk-link behaviour to apply as usual.

In practice I think many GOV.UK Frontend users might hide this component from their print views so impact on end-users is low.

I'd be down for doing something more holistic as part of #573 if you're interested in that contribution (including thinking about it from a more high level design pov), but I noticed this just at a quick glance.

Screenshots

Before	After

[owenatgov]

Hi @NickColley! Finally getting into this.

Very much appreciate the bugfix, deffo something we should've spotted during development 😅 However I'm going to be irritating and say this has prompted me to wonder if we should even show pagination on print and I wonder if it makes more sense to amend this PR to just hide it outright. What are your thoughts? If we wanted to just hide the whole thing, do you have capacity to amend this PR?

[NickColley]

@owenatgov my high level thought at this point is this:

1. Show all components with print friendly styles by default
2. Allow the user to then decide which components should be hidden themselves.

Either with a CSS utility or sass variables.

$govuk-accordion-print-styles: none;
@import govuk-frontend/all;

I think this sort of thing is what I was getting at with the wider piece of work I'm interested in doing. I'd put together some proposals and we could weigh up the approach.

That's what I was thinking by the extended piece of work. But what I've shared here is sort of how people are doing it in practice if you look at GOV.UK Publishing for example.

[NickColley]

So if you agree we should have a more thought out approach for print styles then we could get this in as is and then explore print styles as a whole as a bigger contribution.

[NickColley]

Maybe something like:

1. All components have functionally working print styles
2. By default some components are hidden, e.g. pagination.
3. User can override the defaults at a per-component basis using Sass variables, e.g. $govuk-pagination-print-styles: enabled and (if needed) a global $govuk-default-print-styles: false.
4. Write some guidance to explain all of this alongside Sass docs

Or

1. All components have functionally working print styles.
2. We have a CSS utility and/or Sass flags to hide them, leave this entirely up to users.
3. Write some guidance to explain all of this.

I prefer the first one because I imagine most users wont think to configure this...

[querkmachine]

Another bigger picture thing, but we may also have to consider manipulating the page content in preparation for printing too, such as expanding Details/Accordion sections. Conversely, doing that could be undesirable if a user is only interested in the content of one part of the page.

[NickColley]

@querkmachine that reminded me of something Frankie said about how they intentionally made accordions keep the state they are on the page when printed with the idea that the user might want to control that themselves.

[owenatgov]

@NickColley I think this makes sense. Let's get this in for now to clear it up and start thinking about a more consistent print strategy soon. I'll review this next.

[owenatgov]

📄

[owenatgov]

Going to hassle the team for a 2nd review and then we're good to go on this as far as I'm concerned

[domoscargin]

Yup, this looks good to me, and agree we should have a think about print styles later.

[NickColley]

Thanks for your time reviewing this, I'll leave it with you to merge as I have no power to merge I am a humble contributor :P