feat: Add optional Content item page banners

Merge pull request #258 from DFE-Digital/feat/page-banners

Childrens-Social-Care-CPD/Contentful/Models/Content.cs

@@ -6,6 +6,9 @@ public class Content : IContent
 {
     public string Id { get; set; }
     public string Title { get; set; }
+    public string ContentTitle { get; set; }
+    public string ContentSubtitle { get; set; }
+    public bool ShowContentHeader { get; set; }
     public string Category { get; set; }
     public ContentLink BackLink { get; set; }
     public SideMenu SideMenu { get; set; }

Childrens-Social-Care-CPD/Views/Content/Index.cshtml

@@ -23,6 +23,21 @@
     }
 }
 
+@section PageBanner {
+    @if (Model.ShowContentHeader) {
+        <section id="content-banner" class="app-section-content app-section-content--blue govuk-!-margin-bottom-8">
+            <div class="govuk-width-container">
+                <div class="govuk-grid-row govuk-!-padding-top-3 govuk-!-padding-bottom-0">
+                    <div class="govuk-grid-column-three-quarters-from-desktop govuk-!-padding-top-3">
+                        <h1 id="content-banner-title" class="govuk-heading-xl">@Model.ContentTitle</h1>
+                        <p id="content-banner-subtitle" class="govuk-body-l">@Model.ContentSubtitle</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    }
+}
+
 @section SideMenu {
     @if (Model.SideMenu != null)
     {

Childrens-Social-Care-CPD/Views/Shared/_DefaultPageLayout.cshtml

@@ -3,6 +3,10 @@
     IgnoreSection("SideMenu");
 }
 
+@section PageBanner {
+    @await RenderSectionAsync("PageBanner", required: false)
+}
+
 @await RenderSectionAsync("Hero", required: false)
 <div class="govuk-width-container">
     @RenderBody()

Childrens-Social-Care-CPD/Views/Shared/_HeroBanner.cshtml

@@ -2,7 +2,7 @@
 
 @model HeroBanner
 
-<div class="app-section-beta app-section-beta__blue edf-hero-banner">
+<section class="app-section-beta app-section-beta__blue govuk-!-margin-bottom-8">
     <div class="govuk-width-container">
         <div class="govuk-grid-row">
             <div class="govuk-grid-column-two-thirds-from-desktop">
@@ -11,4 +11,4 @@
             </div>
         </div>
     </div>
-</div>
+</section>

Childrens-Social-Care-CPD/Views/Shared/_SiteLayout.cshtml

@@ -19,7 +19,8 @@
     <partial name="_Header" />
     <partial name="_BackLink" model="@ViewBag.ContextModel?.BackLink" />
 
-    <main class="govuk-main-wrapper govuk-main-wrapper--auto-spacing" id="main-content" role="main">
+    <main class="govuk-main-wrapper govuk-main-wrapper--auto-spacing govuk-!-padding-6" id="main-content" role="main">
+        @await RenderSectionAsync("PageBanner", required: false)
         @RenderBody()
     </main>
 

Childrens-Social-Care-CPD/Views/Shared/_SubPageLayout.cshtml

@@ -3,6 +3,10 @@
     IgnoreSection("Hero");
 }
 
+@section PageBanner {
+    @await RenderSectionAsync("PageBanner", required: false)
+}
+
 <div class="govuk-width-container">
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-one-quarter">

Childrens-Social-Care-CPD/compile-sass.ps1

@@ -1,3 +1,2 @@
-npm ci
 npx sass --style=expanded --charset --source-map-urls=relative .\styles\scss\application.scss .\wwwroot\css\application.css
 npx sass --style=compressed --charset --source-map-urls=relative .\styles\scss\application.scss .\wwwroot\css\application.min.css

Childrens-Social-Care-CPD/styles/scss/overrides/_dfe-overrides.scss

@@ -105,11 +105,6 @@ body, p, h1, h2, h3, h4, h5, h6, a, span, div, table, th, td, blockquote, li, dt
     text-underline-offset: 0.1em;
 }
 
-.edf-hero-banner {
-    margin-top: -10px !important;
-    margin-bottom: 40px;
-}
-
 @media (max-width: 40.0625em) {
     .govuk-header__product-name {
         max-width: 80%;
@@ -122,9 +117,14 @@ body, p, h1, h2, h3, h4, h5, h6, a, span, div, table, th, td, blockquote, li, dt
         line-height: 2.2rem !important;
         font-size: 1rem;
     }
+}
 
-    .edf-hero-banner {
-        margin-top: 0px !important;
-        margin-bottom: 20px;
-    }
+/* CONTENT TITLE BANNER
+----------------------- */
+.app-section-content--blue {
+    background-color: #ebf2f6;
+}
+
+.app-section-content {
+    padding: 30px 0;
 }

Childrens-Social-Care-CPD/styles/scss/overrides/_site.scss

@@ -4,4 +4,4 @@
 
 .js-enabled .back-link {
     display: block !important;
-}
+}

browser-tests/dev-integration-tests/tests/page-banner.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Page banner', () => {
+
+    test.describe('When enabled', () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('content-with-page-banner')
+        })
+
+        test('Title is visible', async ({ page }) => {
+            const title = await page.locator('#content-banner-title')
+            await expect(title).toBeVisible()
+            await expect(title).toHaveClass(/govuk-heading-xl/)
+        })
+
+        test('Subtitle is visible', async ({ page }) => {
+            const subtitle = await page.locator('#content-banner-subtitle')
+            await expect(subtitle).toBeVisible()
+            await expect(subtitle).toHaveClass(/govuk-body-l/)
+        })
+    })
+
+    test.describe('When not enabled', () => {
+        test('Is not visible', async ({ page }) => {
+            await page.goto('/')
+            await expect(page.locator('#content-banner')).not.toBeAttached()
+        })
+    })
+})