PLATUI-2719: Added new hmrc-frontend-print-overrides stylesheet, remo… (

#336)

PLATUI-2719: Added new hmrc-frontend-print-overrides stylesheet, removed hardcoded govuk-display-none-print, added ADR

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [5.62.0] - 2024-01-03
+
+### Changed
+
+- Added  in new `hmrc-frontend-print-overrides.scss`, which is *always included* and hides various components from print
+  view without any configuration from developers
+
 ## [5.61.0] - 2023-12-04
 
 ### Changed

docs/adr/0007-add-print-stylesheet.md

@@ -0,0 +1,49 @@
+# Add print stylesheet
+
+* Status: accepted
+* Deciders: PlatUI
+* Date: 2024-01-03
+* Components: [hmrc-frontend-print-overrides.scss](/src/hmrc-frontend-print-overrides.scss)
+
+## Context and Problem Statement
+
+In August 2022, CSG Forms (formerly known as Print & Post) opened a support issue with PlatUI asking for various parts
+of page components to be hidden from print views. This had been flagged as an issue by an internal accessibility audit.
+
+`govuk-frontend` provides a helper class for hiding elements from print views (`govuk-!-display-none-print`). This was 
+applied to the Nunjucks for some `hmrc-frontend` components over time. However, there were technical complexities around
+adding the same class to `govuk-frontend` components without breaking library parity between `govuk-frontend` and 
+`play-fronted-hmrc`. 
+
+## Decision Drivers
+
+* Internal accessibility audits flagged printing links within components
+* `govouk-frontend` does provide as helper CSS class to disable printing (`govuk-!-display-none-print`).
+* Asking teams to add the class themselves to all components within a service could be extremely time-consuming compared
+  to applying via the centralised libraries
+* Some components in `govuk-frontend` do not accept classes being passed in as parameters
+* Adding classes into `play-frontend-hmrc` only via either Twirl or Scala viewmodels would diverge from `govuk-frontend`
+  which has historically caused issues with our testing and upgrade strategy
+
+## Considered Options
+
+* Add `govuk-!-display-none-print` class to `govuk-frontend` components and break parity with `play-frontend-hmrc` (which
+  would impact testing and upgrade strategy)
+* Add custom CSS class to `hmrc-frontend` via print stylesheet that can be flagged on or off. Class would need to be 
+  added to `govuk-frontend` components. See [PLATUI-2642](https://jira.tools.tax.service.gov.uk/browse/PLATUI-2642) 
+* Add in print stylesheet that overrides print styling on components and is always included
+* Add in print stylesheet that overrides print styling on components and can be configured on or off by service teams
+
+## Decision Outcome
+
+Chosen option: "Add in print stylesheet that overrides print styling on components and is always included"
+
+### Positive Consequences
+
+* It provides a centrally-maintained solution and service developers do not need to write additional code to include
+* It would not break parity between the libraries as the style would be computed in the browser
+
+### Negative Consequences
+
+* It does not provide an opt-out option, but if that is required the stylesheet could be removed from
+  `all-govuk-and-hmrc.scss` and added as a configurable optional script in `HmrcScripts` in `play-frontend-hmrc`

docs/adr/index.md

@@ -8,6 +8,7 @@
 * [ADR-0004](0004-supply-uncompiled-javascript.md) - Supply un-compiled Javascript in NPM package
 * [ADR-0005](0005-use-better-npm-audit.md) - Use better-npm-audit for checking deps for security vulnerabilities
 * [ADR-0006](0006-provide-back-link-helper.md) - Provide a common back link helper
+* [ADR-0007](0007-add-print-stylesheet.md) - Add a print stylesheet
 
 <!-- adrlogstop -->
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "5.61.0",
+  "version": "5.62.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",

src/all-govuk-and-hmrc.scss

@@ -5,3 +5,4 @@ $govuk-new-link-styles: true;
 
 @import "../../govuk-frontend/govuk/all";
 @import "components/all";
+@import "hmrc-frontend-print-overrides";

src/components/footer/template.njk

@@ -4,7 +4,7 @@
     {% if params.navigation | length %}
       <div class="govuk-footer__navigation">
         {% for nav in params.navigation %}
-          <div class="govuk-footer__section govuk-!-display-none-print govuk-grid-column-{{ nav.width | default('full') }}">
+          <div class="govuk-footer__section govuk-grid-column-{{ nav.width | default('full') }}">
             <h2 class="govuk-footer__heading govuk-heading-m">{{ nav.title }}</h2>
             {% if nav.items | length %}
               {% set listClasses %}
@@ -35,7 +35,7 @@
           {% set supportLinksDefaultText %}{% if params.language == "cy" %}Cysylltiadau cymorth{% else %}Support links{% endif %}{% endset %}
           <h2 class="govuk-visually-hidden">{{ params.meta.visuallyHiddenTitle | default(supportLinksDefaultText) }}</h2>
           {% if params.meta.items | length %}
-            <ul class="govuk-footer__inline-list govuk-!-display-none-print">
+            <ul class="govuk-footer__inline-list">
               {% for item in params.meta.items %}
                 <li class="govuk-footer__inline-list-item">
                   <a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>