Merge pull request #523 from DFE-Digital/next

UI Tweaks, and Agency Resources navigation/feature flag
DFE-Digital · Oct 17, 2024 · 33545dd · 33545dd
2 parents 6748854 + 9372505
commit 33545dd
Show file tree

Hide file tree

Showing 19 changed files with 332 additions and 66 deletions.
diff --git a/Childrens-Social-Care-CPD-Tests/Contentful/Renderers/ListRendererTests.cs b/Childrens-Social-Care-CPD-Tests/Contentful/Renderers/ListRendererTests.cs
@@ -47,12 +47,13 @@ public void List_Does_Not_Render_When_No_Items()
     }
 
     [Test]
-    public void List_Renders()
+    public void Unordered_List_Renders()
     {
         // arrange
         var stringWriter = new StringWriter();
         var list = new List()
         {
+            NodeType = "unordered-list",
             Content = new List<IContent>
             {
                 new ListItem
@@ -90,13 +91,59 @@ public void List_Renders()
         actual.Should().Be("<ul class=\"HtmlEncode[[govuk-list govuk-list--bullet]]\"><li>AAA</li><li>BBB</li></ul>");
     }
 
+    [Test]
+    public void Ordered_List_Renders()
+    {
+        // arrange
+        var stringWriter = new StringWriter();
+        var list = new List()
+        {
+            NodeType = "ordered-list",
+            Content = new List<IContent>
+            {
+                new ListItem
+                {
+                    Content = new List<IContent>
+                    {
+                        new Paragraph
+                        {
+                            Content = new List<IContent> { new Text() }
+                        }
+                    }
+                },
+                new ListItem
+                {
+                    Content = new List<IContent>
+                    {
+                        new Paragraph
+                        {
+                            Content = new List<IContent> { new Hyperlink() }
+                        }
+                    }
+
+                }
+            }
+        };
+        _textLinkRenderer.Render(Arg.Any<Text>()).Returns(new HtmlString("AAA"));
+        _hyperlinkRenderer.Render(Arg.Any<Hyperlink>()).Returns(new HtmlString("BBB"));
+
+        // act
+        var htmlContent = _sut.Render(list);
+        htmlContent.WriteTo(stringWriter, new HtmlTestEncoder());
+        var actual = stringWriter.ToString();
+
+        // assert
+        actual.Should().Be("<ol class=\"HtmlEncode[[govuk-list govuk-list--number]]\"><li>AAA</li><li>BBB</li></ol>");
+    }
+
     [Test]
     public void List_Only_Renders_Paragraphs()
     {
         // arrange
         var stringWriter = new StringWriter();
         var list = new List()
         {
+            NodeType = "unordered-list",
             Content = new List<IContent>
             {
                 new ListItem

diff --git a/Childrens-Social-Care-CPD/Configuration/Features/Features.cs b/Childrens-Social-Care-CPD/Configuration/Features/Features.cs
@@ -5,4 +5,5 @@ public static class Features
     public const string ResourcesAndLearning = "resources-learning";
     public const string FeedbackControl = "feedback-control";
     public const string EmployerStandards = "employer-standards";
+    public const string AgencyResources = "agency-resources";
 }
diff --git a/Childrens-Social-Care-CPD/Contentful/Renderers/ListRenderer.cs b/Childrens-Social-Care-CPD/Contentful/Renderers/ListRenderer.cs
@@ -14,8 +14,19 @@ public IHtmlContent Render(List item)
             return null;
         }
 
-        var ul = new TagBuilder("ul");
-        ul.AddCssClass("govuk-list govuk-list--bullet");
+        TagBuilder listTag;
+        string cssClass;
+        if (item.NodeType == "unordered-list")
+        {
+            listTag = new TagBuilder("ul");
+            cssClass = "govuk-list govuk-list--bullet";
+        }
+        else
+        {
+            listTag = new TagBuilder("ol");
+            cssClass = "govuk-list govuk-list--number";
+        }
+        listTag.AddCssClass(cssClass);
 
         foreach (var listItem in item.Content.OfType<ListItem>())
         {
@@ -38,9 +49,9 @@ public IHtmlContent Render(List item)
                         }
                 }
             }
-            ul.InnerHtml.AppendHtml(li);
+            listTag.InnerHtml.AppendHtml(li);
         }
 
-        return ul;
+        return listTag;
     }
-}
+}
diff --git a/Childrens-Social-Care-CPD/Views/Shared/_ErrorLayout.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_ErrorLayout.cshtml
@@ -103,6 +103,17 @@
                             </a>
                         </li>
                     }
+                    @if (featuresConfig.IsEnabled(Features.AgencyResources))
+                    {
+                        <li class="dfe-header__navigation-item" id="mmi-agencyResources">
+                            <a class="dfe-header__navigation-link" href="/agency-resources">
+                                Agency Resources
+                                <svg class="dfe-icon dfe-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
+                                    <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
+                                </svg>
+                            </a>
+                        </li>
+                    }
                 </ul>
             </div>
         </nav>

diff --git a/Childrens-Social-Care-CPD/Views/Shared/_Header.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_Header.cshtml
@@ -66,6 +66,10 @@
                     {
                         RenderMenuItem("employerStandards", "Employer standards", "employer-standards", category == "Employer standards");
                     }
+                    if (featuresConfig.IsEnabled(Features.AgencyResources))
+                    {
+                        RenderMenuItem("agencyResources", "Agency resources", "agency-resources", category == "Agency resources");
+                    }
                 }
             </ul>
         </div>

diff --git a/Childrens-Social-Care-CPD/Views/Shared/_HeroBanner.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_HeroBanner.cshtml
@@ -5,7 +5,7 @@
 <section class="app-section-beta app-section-beta__blue govuk-!-margin-bottom-8">
     <div class="dfe-width-container">
         <div class="govuk-grid-row">
-            <div class="govuk-grid-column-two-thirds-from-desktop">
+            <div class="govuk-grid-column-full">
                 <h1 class="body-header-font" data-testid="homepage-header">@Model.Title</h1>
                 <p class="govuk-body govuk-!-font-size-24 body-header-font">@Model.Text</p>
             </div>

diff --git a/Childrens-Social-Care-CPD/package-lock.json b/Childrens-Social-Care-CPD/package-lock.json
diff --git a/Childrens-Social-Care-CPD/package.json b/Childrens-Social-Care-CPD/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@ministryofjustice/frontend": "^1.8.0",
     "dfe-frontend-alpha": "^1.0.1",
-    "govuk-frontend": "^5.2.0",
+    "govuk-frontend": "^5.6.0",
     "jquery": "^3.7.0"
   }
 }
diff --git a/Childrens-Social-Care-CPD/styles/scss/overrides/_dfe-overrides.scss b/Childrens-Social-Care-CPD/styles/scss/overrides/_dfe-overrides.scss
@@ -1,6 +1,8 @@
-/* STANDARD COLOURS */
-body, p, h1, h2, h3, h4, h5, h6, a, span, div, table, th, td, blockquote, li, dt, dd, tr {
-    font-family: BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
+@import url('https://rsms.me/inter/inter.css');
+
+/* STANDARD COLOURS */
+* {
+    font-family: 'Inter', sans-serif !important;
 }
 
 .logo {
@@ -64,6 +66,11 @@ body, p, h1, h2, h3, h4, h5, h6, a, span, div, table, th, td, blockquote, li, dt
     background-color: #003a69;
 }
 
+h1,
+.dfe-heading-xl, .govuk-heading-xl {
+  margin-bottom: 30px !important
+}
+
 .govuk-header__container {
     position: relative;
     margin-bottom: -10px;
@@ -334,7 +341,7 @@ CONTENT TITLE BANNER
 
 .gem-c-contents-list__title {
     color: #0b0c0c;
-    font-family: "GDS Transport", arial, sans-serif;
+    font-family: 'Inter', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -352,7 +359,7 @@ CONTENT TITLE BANNER
 
 @media print {
     .gem-c-contents-list__title {
-        font-family: sans-serif;
+        font-family: 'Inter', sans-serif;
     }
 }
 
@@ -373,7 +380,7 @@ CONTENT TITLE BANNER
 
 .gem-c-contents-list__list, .gem-c-contents-list__nested-list {
     color: #0b0c0c;
-    font-family: "GDS Transport", arial, sans-serif;
+    font-family: 'Inter', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -393,7 +400,7 @@ CONTENT TITLE BANNER
 
 @media print {
     .gem-c-contents-list__list, .gem-c-contents-list__nested-list {
-        font-family: sans-serif;
+        font-family: 'Inter', sans-serif;
     }
 }
 

diff --git a/Childrens-Social-Care-CPD/styles/scss/overrides/_mediaelement-player.scss b/Childrens-Social-Care-CPD/styles/scss/overrides/_mediaelement-player.scss
@@ -17,7 +17,7 @@ Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-h
 .mejs__container {
     background: #000;
     box-sizing: border-box;
-    font-family: 'Helvetica', Arial, serif;
+    font-family: 'Inter', sans-serif;
     position: relative;
     text-align: left;
     text-indent: 0;

diff --git a/Childrens-Social-Care-CPD/styles/scss/overrides/_site.scss b/Childrens-Social-Care-CPD/styles/scss/overrides/_site.scss
@@ -359,6 +359,7 @@
 /* Back to top component - styles taken from Help for Early Years */
 .app-back-to-top {
     margin-top: 60px;
+    font-size: 19px;
 }
 
 .app-back-to-top__icon {