Merge pull request #574 from DFE-Digital/next

QuoteBox, InfoBox Styles, New Header, and Security Updates
DFE-Digital · Dec 5, 2024 · 19cfb32 · 19cfb32
2 parents 5f151d4 + e20aea9
commit 19cfb32
Show file tree

Hide file tree

Showing 29 changed files with 942 additions and 16,747 deletions.
diff --git a/.github/workflows/docker-dev-integration-tests.yml b/.github/workflows/docker-dev-integration-tests.yml
@@ -12,15 +12,35 @@ jobs:
       CPD_DELIVERY_KEY: ${{secrets.TF_VAR_CPD_DELIVERY_KEY}}
       CPD_CLARITY: ${{secrets.TF_VAR_CPD_CLARITY}}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Build the Docker App Image
         run: cd Childrens-Social-Care-CPD; docker build . --file Dockerfile --tag childrens-social-care-cpd:latest
 
+      - name: Install Docker Compose
+        uses: ndeloof/install-compose-action@v0.0.1
+        with:
+          version: latest
+          legacy: true  # install in PATH as `docker-compose`
+
+      - name: Verify Docker Compose installation
+        run: docker-compose --version
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+
+      - name: Install latest NPM version
+        run: npm install -g npm@latest
+
+      - name: Verify NPM version
+        run: npm version
+
       - name: Run the dev integration tests
         run: cd browser-tests/dev-integration-tests; docker-compose up --exit-code-from dev-integration-tests
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         name: Playwright report
         if: always()
         with:

diff --git a/.github/workflows/sonarqube.yml b/.github/workflows/sonarqube.yml
@@ -14,29 +14,29 @@ jobs:
           fetch-depth: 0
 
       - name: Set up JDK 17
-        uses: actions/setup-java@v3
+        uses: actions/setup-java@v4
         with:
           java-version: 17
           distribution: "zulu" # Alternative distribution options are available.
 
       - name: Cache SonarCloud packages
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: ~\sonar\cache
           key: ${{ runner.os }}-sonar
           restore-keys: ${{ runner.os }}-sonar
 
       - name: Cache SonarCloud scanner
         id: cache-sonar-scanner
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~\sonar\cache
           key: ${{ runner.os }}-sonar
           restore-keys: ${{ runner.os }}-sonar
 
       - name: Cache SonarCloud coverage
         id: cache-sonar-coverage
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~\sonar\cache
           key: ${{ runner.os }}-coverage

diff --git a/Childrens-Social-Care-CPD-Tests/Contentful/EntityResolverTests.cs b/Childrens-Social-Care-CPD-Tests/Contentful/EntityResolverTests.cs
@@ -36,6 +36,7 @@ public class EntityResolverTests
     [TestCase("pageContents", typeof(PageContents))]
     [TestCase("pageContentsItem", typeof(PageContentsItem))]
     [TestCase("pdfFileResource", typeof(PdfFileResource))]
+    [TestCase("quoteBox", typeof(QuoteBox))]
     [TestCase("richTextBlock", typeof(RichTextBlock))]
     [TestCase("roleList", typeof(RoleList))]
     [TestCase("navigationMenu", typeof(NavigationMenu))]

diff --git a/Childrens-Social-Care-CPD-Tests/Contentful/PartialsFactoryTests.cs b/Childrens-Social-Care-CPD-Tests/Contentful/PartialsFactoryTests.cs
@@ -36,6 +36,7 @@ public partial class PartialsFactoryTests
         new object[] { new PageContents(), "_PageContents" },
         new object[] { new PageContentsItem(), "_PageContentsItem" },
         new object[] { new PdfFileResource(), "_PdfFileResource" },
+        new object[] { new QuoteBox(), "_QuoteBox" },
         new object[] { new RichTextBlock(), "_RichTextBlock" },
         new object[] { new RoleList(), "_RoleList" },
         new object[] { new TextBlock(), "_TextBlock" },

diff --git a/Childrens-Social-Care-CPD/Contentful/EntityResolver.cs b/Childrens-Social-Care-CPD/Contentful/EntityResolver.cs
@@ -39,6 +39,7 @@ public Type Resolve(string contentTypeId)
             "pageContents" => typeof(PageContents),
             "pageContentsItem" => typeof(PageContentsItem),
             "pdfFileResource" => typeof(PdfFileResource),
+            "quoteBox" => typeof(QuoteBox),
             "richTextBlock" => typeof(RichTextBlock),
             "roleList" => typeof(RoleList),
             "navigationMenu" => typeof(NavigationMenu),

diff --git a/Childrens-Social-Care-CPD/Contentful/Models/InfoBox.cs b/Childrens-Social-Care-CPD/Contentful/Models/InfoBox.cs
@@ -2,10 +2,18 @@
 
 namespace Childrens_Social_Care_CPD.Contentful.Models;
 
+public static class InfoBoxType
+{
+    public const string BlueI = "Blue \"i\" icon";
+    public const string GreenI = "Green \"i\" icon";
+    public const string GreenBrain = "Green \"brain\" icon";
+}
+
 public class InfoBox : IContent
 {
     public string Title { get; set; }
     public bool DisplayTitle { get; set; }
     public int TitleLevel { get; set; }
     public Document Document { get; set; }
+    public string Type { get; set; }
 }
diff --git a/Childrens-Social-Care-CPD/Contentful/Models/QuoteBox.cs b/Childrens-Social-Care-CPD/Contentful/Models/QuoteBox.cs
@@ -0,0 +1,18 @@
+using Contentful.Core.Models;
+
+namespace Childrens_Social_Care_CPD.Contentful.Models;
+
+public static class QuoteAttributionAlignment
+{
+    public const string Left = "Left";
+    public const string Centre = "Centre";
+    public const string Right = "Right";
+}
+
+public class QuoteBox : IContent
+{
+    public string Name { get; set; }
+    public Document QuoteText { get; set; }
+    public Document Attribution { get ; set; }
+    public string AttributionAlignment { get; set; }
+}
diff --git a/Childrens-Social-Care-CPD/Contentful/PartialsFactory.cs b/Childrens-Social-Care-CPD/Contentful/PartialsFactory.cs
@@ -38,6 +38,7 @@ public static string GetPartialFor(IContent item)
             PageContents => "_PageContents",
             PageContentsItem => "_PageContentsItem",
             PdfFileResource => "_PdfFileResource",
+            QuoteBox => "_QuoteBox",
             RichTextBlock => "_RichTextBlock",
             RoleList => "_RoleList",
             NavigationMenu => "_NavigationMenu",

diff --git a/Childrens-Social-Care-CPD/Views/Shared/_Header.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_Header.cshtml
@@ -25,12 +25,9 @@
 <header class="dfe-header" role="banner">
     <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">
+            <a class="dfe-header__link dfe-header__link--service " href="https://gov.uk" 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">
-                <span class="dfe-header__service-name">
-                    Support for social workers
-                </span>
             </a>
         </div>
         <div class="dfe-header__content" id="content-header">
@@ -39,7 +36,9 @@
             </div>
         </div>
     </div>
-
+    <div class="dfe-width-container dfe-header__service-name">
+        <a href="/" class="dfe-header__link--service">Support for social workers</a>
+    </div>
     <nav class="dfe-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
         <div class="dfe-width-container">
             <p class="dfe-header__navigation-title">

diff --git a/Childrens-Social-Care-CPD/Views/Shared/_InfoBox.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_InfoBox.cshtml
@@ -23,11 +23,38 @@
     }
 }
 
-<div class="prompt prompt-home">
+@{
+    string css;
+    string svg;
+
+    switch (Model.Type) {
+        case InfoBoxType.GreenI:
+            css = "infobox infobox-green-i";
+            svg = "<svg aria-label=\"info icon\" class=\"svg-inline--fa fa-info fa-green fa-2x\" aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 192 512\" data-fa-i2svg=\"\"><path fill=\"currentColor\" d=\"M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z\"></path></svg>";
+        break;
+
+        case InfoBoxType.GreenBrain:
+            css = "infobox infobox-green-brain";
+            svg = "<svg aria-label=\"brain icon\" class=\"svg-inline--fa fa-green fa-brain fa-2x\" aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"brain\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" data-fa-i2svg=\"\"><path fill=\"currentColor\" d=\"M184 0c30.9 0 56 25.1 56 56l0 400c0 30.9-25.1 56-56 56c-28.9 0-52.7-21.9-55.7-50.1c-5.2 1.4-10.7 2.1-16.3 2.1c-35.3 0-64-28.7-64-64c0-7.4 1.3-14.6 3.6-21.2C21.4 367.4 0 338.2 0 304c0-31.9 18.7-59.5 45.8-72.3C37.1 220.8 32 207 32 192c0-30.7 21.6-56.3 50.4-62.6C80.8 123.9 80 118 80 112c0-29.9 20.6-55.1 48.3-62.1C131.3 21.9 155.1 0 184 0zM328 0c28.9 0 52.6 21.9 55.7 49.9c27.8 7 48.3 32.1 48.3 62.1c0 6-.8 11.9-2.4 17.4c28.8 6.2 50.4 31.9 50.4 62.6c0 15-5.1 28.8-13.8 39.7C493.3 244.5 512 272.1 512 304c0 34.2-21.4 63.4-51.6 74.8c2.3 6.6 3.6 13.8 3.6 21.2c0 35.3-28.7 64-64 64c-5.6 0-11.1-.7-16.3-2.1c-3 28.2-26.8 50.1-55.7 50.1c-30.9 0-56-25.1-56-56l0-400c0-30.9 25.1-56 56-56z\"></path></svg>";
+        break;
+
+        case InfoBoxType.BlueI:
+        default:
+            css = "infobox";
+            svg = "<svg aria-label=\"info icon\" class=\"svg-inline--fa fa-circle-info fa-2x\" aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"circle-info\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" data-fa-i2svg=\"\"><path fill=\"currentColor\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z\"></path></svg>";
+        break;
+    }
+}
+
+<div class="@css">
     <div class="govuk-grid-row">
-        <div class="govuk-grid-column-one-quarter"><svg class="svg-inline--fa fa-circle-info fa-2x" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-info" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path></svg></div><div class="govuk-grid-column-three-quarters">
+        <div class="govuk-grid-column-one-quarter">
+            @Html.Raw(@svg)
+        </div>
+        <div class="govuk-grid-column-three-quarters">
             @{ RenderTitle(); }
             <partial name="_RichText" model="Model.Document" />
         </div>
     </div>
-</div>
+</div>
+
diff --git a/Childrens-Social-Care-CPD/Views/Shared/_PageContents.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_PageContents.cshtml
@@ -7,7 +7,7 @@
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-three-quarters">
         <div class="page-contents-header">
-            <p class="govuk-body govuk-!-margin-bottom-1 govuk-!-font-weight-bold">
+            <p class="govuk-body govuk-!-margin-bottom-1">
                 @Model.DisplayText
             </p>
             <ul class="govuk-list govuk-list--bullet">

diff --git a/Childrens-Social-Care-CPD/Views/Shared/_QuoteBox.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_QuoteBox.cshtml
@@ -0,0 +1,35 @@
+@using Childrens_Social_Care_CPD.Contentful.Models;
+@using Childrens_Social_Care_CPD.Contentful;
+@using Childrens_Social_Care_CPD.Contentful.Renderers;
+
+@model QuoteBox
+
+
+<div class="blockquote-container">
+    <div class="govuk-grid-row">
+        <blockquote class="quote">
+            @{
+                await Html.RenderPartialAsync("_RichText", Model.QuoteText);
+            }
+            @if (Model.Attribution != null)
+            {
+                string attributionCss;
+                switch (Model.AttributionAlignment)
+                {
+                    case QuoteAttributionAlignment.Left: attributionCss = "quote-attribution-left"; break;
+                    case QuoteAttributionAlignment.Centre: attributionCss = "quote-attribution-centre"; break;
+                    case QuoteAttributionAlignment.Right:
+                    default:
+                        attributionCss = "quote-attribution-right";
+                        break;
+                }
+
+                <div class="@attributionCss">
+                    @{
+                        await Html.RenderPartialAsync("_RichText", Model.Attribution);
+                    }
+                </div>
+            }
+        </blockquote>
+    </div>
+</div>