feat: Amend printed page styling

src/Dfe.ContentSupport.Web.Node/styles/scss/application.scss

@@ -1,2 +1,3 @@
 @use "../../node_modules/govuk-frontend/dist/govuk/all.scss";
-@use "../../node_modules/dfe-frontend/packages/dfefrontend.scss";
+@use "../../node_modules/dfe-frontend/packages/dfefrontend.scss";
+@use "./print.scss";

src/Dfe.ContentSupport.Web.Node/styles/scss/print.scss

@@ -0,0 +1,89 @@
+@import "../../node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss";
+
+//Append " (opens in new tab)" to links with the appropriate class, so that we can _hide_ the text if printing
+a.opens-in-new-tab::after {
+  content: " (opens in new tab)";
+  display: inline;
+}
+
+@media print {
+  .print-only {
+    visibility: visible;
+    display: block !important;
+  }
+
+  //Hide hr elements where the sections between them have been hidden
+  .govuk-\!-display-none-print + hr,
+  hr + .govuk-\!-display-none-print,
+  hr + div:only-child.govuk-\!-display-none-print,
+  div > div:only-child.govuk-\!-display-none-print + hr,
+  div > div.govuk-\!-display-none-print + hr,
+  div > div:has(> .govuk-\!-display-none-print) + hr,
+  div:has(div.govuk-\!-display-none-print) + hr {
+    display: none;
+  }
+
+  //Service name - i.e. Plan Technology for your School
+  div.dfe-header__service-name {
+    margin-top: 10px;
+  }
+
+  //Reduces padding between the page title/subtitle + main content
+  main.govuk-main-wrapper#main-content {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+  }
+
+  //Page title
+  h1.govuk-\!-margin-bottom-4.govuk-\!-margin-top-5 {
+    margin-top: 10px !important;
+    margin-bottom: 5px !important;
+  }
+
+  //Make links look like text
+  a,
+  a.govuk-link {
+    color: inherit !important;
+    text-decoration: none;
+
+    //Remove the "(opens in new tab)" text
+    .opens-in-new-tab::after {
+      content: "";
+    }
+
+    &.dfe-header__link--service {
+      color: black !important;
+    }
+  }
+
+  //Make page full width
+  div.govuk-grid-column-three-quarters {
+    width: 100%;
+  }
+
+  /*
+  * Accordion
+  */
+  span.govuk-accordion__section-toggle {
+    display: none !important;
+  }
+
+  //Show content
+  div.govuk-accordion__section-content {
+    display: block !important;
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+    content-visibility: visible !important;
+  }
+
+  div.govuk-accordion__controls {
+    display: none !important;
+  }
+
+  //Remove border from first section in accordion. Use 2nd of type, because 1st wasn't working for some reason?
+  div.govuk-accordion
+    div.govuk-accordion__section:nth-of-type(2)
+    button.govuk-accordion__section-button {
+    border-top: 0px !important;
+  }
+}

src/Dfe.ContentSupport.Web/Models/Mapped/RichTextContentItem.cs

@@ -6,8 +6,11 @@ namespace Dfe.ContentSupport.Web.Models.Mapped;
 [ExcludeFromCodeCoverage]
 public class RichTextContentItem : CsContentItem
 {
-    public List<RichTextContentItem> Content { get; set; } = null!;
+    public List<RichTextContentItem> Content { get; set; } = [];
     public RichTextNodeType NodeType { get; set; } = RichTextNodeType.Unknown;
-    public string Value { get; set; } = null!;
+    public string? Value { get; set; } = null;
     public List<string> Tags { get; set; } = [];
+
+    public virtual bool HaveNoContent => Content.Count == 0 || Content.TrueForAll(content => content.IsEmptyContent);
+    public virtual bool IsEmptyContent => HaveNoContent && string.IsNullOrEmpty(Value);
 }

src/Dfe.ContentSupport.Web/Models/Mapped/Standard/EmbeddedEntry.cs

@@ -15,4 +15,7 @@ public EmbeddedEntry()
     public string JumpIdentifier { get; set; } = null!;
     public RichTextContentItem? RichText { get; set; }
     public CustomComponent? CustomComponent { get; set; }
+
+    public override bool HaveNoContent => Content.Count == 0 || Content.TrueForAll(content => content.IsEmptyContent);
+    public override bool IsEmptyContent => base.IsEmptyContent && (RichText == null || RichText.IsEmptyContent);
 }

src/Dfe.ContentSupport.Web/Views/Shared/CookiesBanner/_CookieBanner.cshtml

@@ -10,48 +10,48 @@ var ptCookieNotSet = Context.Request.Cookies["user_cookies_preferences"] is null
 var showBanner = csCookieNotSet && ptCookieNotSet;
 }
 
-@if (showBanner)
-{
-    <region id="cookieConsent" class="govuk-cookie-banner" aria-label="Cookies on Content and Support">
-        <div class="govuk-cookie-banner__message dfe-width-container">
-            <div class="govuk-grid-row">
-                <div class="govuk-grid-column-two-thirds">
-                    <h2 class="govuk-cookie-banner__heading govuk-heading-m">
-                        Cookies on Content and Support
-                    </h2>
-                    <div class="govuk-cookie-banner__content">
-                        <p class="govuk-body">We use some essential cookies to make this service work.</p>
-                        <p class="govuk-body">
-                            We’d like to set additional cookies so we can remember your settings,
-                            understand how people use the service and make improvements.
-                        </p>
-                    </div>
+@if (!showBanner) { return; }
+
+<region id="cookieConsent" class="govuk-cookie-banner govuk-!-display-none-print" aria-label="Cookies on Content and Support">
+    <div class="govuk-cookie-banner__message dfe-width-container">
+        <div class="govuk-grid-row">
+            <div class="govuk-grid-column-two-thirds">
+                <h2 class="govuk-cookie-banner__heading govuk-heading-m">
+                    Cookies on Content and Support
+                </h2>
+                <div class="govuk-cookie-banner__content">
+                    <p class="govuk-body">We use some essential cookies to make this service work.</p>
+                    <p class="govuk-body">
+                        We’d like to set additional cookies so we can remember your settings,
+                        understand how people use the service and make improvements.
+                    </p>
                 </div>
             </div>
-            <div class="govuk-button-group">
-                <button value="true" type="submit" name="cookies[additional]" class="govuk-button"
-                        data-module="govuk-button" data-cookie-string="@cookieString">
-                    Accept additional cookies
-                </button>
-                <button value="false" type="submit" name="cookies[additional]" class="govuk-button"
-                        data-module="govuk-button" data-cookie-string="@cookieString">
-                    Reject additional cookies
-                </button>
-                <a class="govuk-link" href="#">View cookies</a>
-            </div>
         </div>
-    </region>
-    <script nonce="@Context.Items["nonce"]">
-    (function () {
-        const buttons = document.querySelectorAll("#cookieConsent button[data-cookie-string]");
-        buttons.forEach(function (button) {
-            button.addEventListener("click", function (_) {
-                document.cookie = button.dataset.cookieString.replace(/true|false/, button.value);
-                const cookieContainer = document.querySelector("#cookieConsent");
-                cookieContainer.remove();
-                location.reload();
-            });
+        <div class="govuk-button-group">
+            <button value="true" type="submit" name="cookies[additional]" class="govuk-button"
+                    data-module="govuk-button" data-cookie-string="@cookieString">
+                Accept additional cookies
+            </button>
+            <button value="false" type="submit" name="cookies[additional]" class="govuk-button"
+                    data-module="govuk-button" data-cookie-string="@cookieString">
+                Reject additional cookies
+            </button>
+            <a class="govuk-link" href="#">View cookies</a>
+        </div>
+    </div>
+</region>
+
+<script nonce="@Context.Items["nonce"]">
+(function () {
+    const buttons = document.querySelectorAll("#cookieConsent button[data-cookie-string]");
+    buttons.forEach(function (button) {
+        button.addEventListener("click", function (_) {
+            document.cookie = button.dataset.cookieString.replace(/true|false/, button.value);
+            const cookieContainer = document.querySelector("#cookieConsent");
+            cookieContainer.remove();
+            location.reload();
         });
-    })();
+    });
+})();
 </script>
-}

src/Dfe.ContentSupport.Web/Views/Shared/RichText/Custom/_Accordion.cshtml

@@ -1,24 +1,22 @@
 @model CustomAccordion
 
 <div class="govuk-accordion" data-module="govuk-accordion" id="[email protected]">
-    @{
-        foreach (var accordion in Model.Accordions)
-        {
-            <div class="govuk-accordion__section">
-                <div class="govuk-accordion__section-header">
-                    <h2 class="govuk-accordion__section-heading">
-                        <span class="govuk-accordion__section-button" id="@accordion.InternalName-heading">
-                            @accordion.Title
-                        </span>
-                    </h2>
-                    <div class="govuk-accordion__section-summary govuk-body" id="@accordion.InternalName-summary">
-                        @accordion.SummaryLine
-                    </div>
-                </div>
-                <div id="@accordion.InternalName-content" class="govuk-accordion__section-content">
-                    <partial name="RichText/_RichText" model="@accordion.Body"/>
+    @foreach (var accordion in Model.Accordions)
+    {
+        <div class="govuk-accordion__section">
+            <div class="govuk-accordion__section-header">
+                <h2 class="govuk-accordion__section-heading">
+                    <span class="govuk-accordion__section-button" id="@accordion.InternalName-heading">
+                        @accordion.Title
+                    </span>
+                </h2>
+                <div class="govuk-accordion__section-summary govuk-body" id="@accordion.InternalName-summary">
+                    @accordion.SummaryLine
                 </div>
             </div>
-        }
+            <div id="@accordion.InternalName-content" class="govuk-accordion__section-content">
+                <partial name="RichText/_RichText" model="@accordion.Body"/>
+            </div>
+        </div>
     }
 </div>

src/Dfe.ContentSupport.Web/Views/Shared/RichText/Custom/_Attachment.cshtml

@@ -1,7 +1,7 @@
 @using System
 @model CustomAttachment
 
-<div class="guidance-container govuk-!-padding-8 govuk-!-margin-bottom-8">
+<div class="guidance-container govuk-!-padding-8 govuk-!-margin-bottom-8 govuk-!-display-none-print">
     <div class="attachment">
         <div class="attachment-thumbnail govuk-!-margin-right-8">
             <a href="@Model.Uri" download>

src/Dfe.ContentSupport.Web/Views/Shared/RichText/_Asset.cshtml

@@ -7,7 +7,7 @@
             <img src="@Model.Uri" alt="@Model.Description" title="@Model.Title"/>
             break;
         case AssetContentType.Video:
-            <video controls>
+            <video controls class="govuk-!-display-none-print">
                 <source src="@Model.Uri" type="video/mp4">
                 Your browser does not support the video tag.
             </video>

src/Dfe.ContentSupport.Web/Views/Shared/RichText/_HyperLink.cshtml

@@ -6,5 +6,11 @@
 }
 else
 {
-    <a href="@Model.Uri" target="_blank" rel="noopener noreferrer"><partial name="RichText/_Text" model="@Model.Content[0]"/></a>
+    var textContainsOpenInNewTab = Model.Content[0].Value?.ToLower().Contains("(opens in new tab)") ?? false;
+    var linkClass = textContainsOpenInNewTab ? "opens-in-new-tab" : "";
+    if(textContainsOpenInNewTab){
+        Model.Content[0].Value = Model.Content[0].Value?.Replace(" (opens in new tab)", "") ?? "";
+    }
+
+    <a href="@Model.Uri" target="_blank" rel="noopener noreferrer" class="@linkClass">@Model.Content[0].Value</a>
 }

src/Dfe.ContentSupport.Web/Views/Shared/RichText/_Items.cshtml

@@ -1,9 +1,10 @@
 @model RichTextContentItem
 
-@if (Model.Content is not null && Model.Content.Any())
+@if (Model.HaveNoContent) { 
+    return;
+}
+
+@foreach (var childNode in Model.Content)
 {
-    foreach (var childNode in Model.Content)
-    {
-        <partial name="RichText/_RichText" model="@childNode"/>
-    }
-}
+    <partial name="RichText/_RichText" model="@childNode"/>
+}

src/Dfe.ContentSupport.Web/Views/Shared/RichText/_Paragraph.cshtml

@@ -1,5 +1,9 @@
 @model RichTextContentItem
 
+@if(Model.IsEmptyContent){ 
+    return;
+}
+
 <p class="govuk-body">
     <partial name="RichText/_Items" model="@Model"/>
 </p>

src/Dfe.ContentSupport.Web/Views/Shared/RichText/_Vimeo.cshtml

@@ -4,7 +4,7 @@
     var vimeoId = Model.Uri.Split('/').Last();
 }
 
-<div class="column-full vimeo-player">
+<div class="column-full vimeo-player govuk-!-display-none-print">
     <iframe src="https://player.vimeo.com/video/@vimeoId" width="640" height="360"
         allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="embedded vimeo clip"></iframe>
 </div>

src/Dfe.ContentSupport.Web/Views/Shared/_BackToTop.cshtml

@@ -1,7 +1,7 @@
-<div id="backtotop-button">
-<a class="govuk-link govuk-link--no-visited-state" href="#">
-    <svg class="app-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
-        <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
-    </svg> Back to top
-</a>
+<div id="backtotop-button" class="govuk-!-display-none-print">
+    <a class="govuk-link govuk-link--no-visited-state" href="#">
+        <svg class="app-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
+            <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
+        </svg> Back to top
+    </a>
 </div>

src/Dfe.ContentSupport.Web/Views/Shared/_BetaHeader.cshtml

@@ -1,4 +1,4 @@
-<div class="govuk-phase-banner noprint">
+<div class="govuk-phase-banner govuk-!-display-none-print">
     <p class="govuk-phase-banner__content">
         @* <govuk-phase-banner-tag>Beta</govuk-phase-banner-tag> *@
         <strong class="govuk-tag govuk-phase-banner__content__tag">Beta</strong>

src/Dfe.ContentSupport.Web/Views/Shared/_CsHeader.cshtml

@@ -4,8 +4,8 @@
         <div class="dfe-width-container dfe-header__container">
             <div class="dfe-header__logo">
                 <a class="dfe-header__link dfe-header__link--service " href="/" aria-label="DfE homepage">
-                    <img src="/assets/images/dfe-logo.png" class="dfe-logo" alt="DfE Homepage">
-                    <img src="/assets/images/dfe-logo-alt.png" class="dfe-logo-hover" alt="DfE Homepage">
+                    <img src="/assets/images/dfe-logo.png" class="dfe-logo govuk-!-display-none-print" alt="DfE Homepage">
+                    <img src="/assets/images/dfe-logo-alt.png" class="dfe-logo-hover print-only" alt="DfE Homepage">
                 </a>
             </div>
         </div>

src/Dfe.ContentSupport.Web/Views/Shared/_Feedback.cshtml

@@ -17,7 +17,7 @@
 
 @if (track)
 {
-    <div class="dfe-feedback-banner govuk-!-margin-top-9 govuk-visually-hidden" aria-hidden="true" id="feedback-banner">
+    <div class="dfe-feedback-banner govuk-!-margin-top-9 govuk-visually-hidden govuk-!-display-none-print" aria-hidden="true" id="feedback-banner">
         <div class="dfe-feedback-banner--content">
             <form id="feedbackForm">
                 <div class="dfe-feedback-banner--content-questions">

src/Dfe.ContentSupport.Web/Views/Shared/_Footer.cshtml

@@ -1,4 +1,4 @@
-<footer class="govuk-footer " role="contentinfo">
+<footer class="govuk-footer govuk-!-display-none-print" role="contentinfo">
     <div class="govuk-width-container">
         <div class="govuk-footer__meta">
             <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">

src/Dfe.ContentSupport.Web/Views/Shared/_Print.cshtml

@@ -1,3 +1,3 @@
-<div class="print-button govuk-visually-hidden" aria-hidden="true">
+<div class="print-button govuk-visually-hidden govuk-!-display-none-print" aria-hidden="true">
     <button class="govuk-link print-link-button" data-module="print-link" id="print-link" >Print this page</button>
 </div>