Merge branch 'main' into mab/Move-beta-banner

DFE-Digital · Nov 20, 2023 · b06f1c2 · b06f1c2
2 parents b878625 + a0e0a98
commit b06f1c2
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 33 deletions.
diff --git a/Childrens-Social-Care-CPD-Tests/Contentful/Renderers/ContentLinkRendererTests.cs b/Childrens-Social-Care-CPD-Tests/Contentful/Renderers/ContentLinkRendererTests.cs
@@ -9,7 +9,7 @@ namespace Childrens_Social_Care_CPD_Tests.Contentful.Renderers;
 
 public class ContentLinkRendererTests
 {
-    private readonly IRenderer<ContentLink> _sut = new ContentLinkRenderer();
+    private readonly IRendererWithOptions<ContentLink> _sut = new ContentLinkRenderer();
 
     [TestCase("http://foo", "http://foo")]
     [TestCase("https://foo", "https://foo")]
@@ -26,11 +26,31 @@ public void ContentLink_Renders(string uri, string expectedUri)
         };
 
         // act
-        var htmlContent = _sut.Render(contentLink);
+        var htmlContent = (_sut as IRenderer<ContentLink>).Render(contentLink);
         htmlContent.WriteTo(stringWriter, new HtmlTestEncoder());
         var actual = stringWriter.ToString();
 
         // assert
         actual.Should().Be($"<a class=\"HtmlEncode[[govuk-link]]\" href=\"HtmlEncode[[{expectedUri}]]\">HtmlEncode[[Foo]]</a>");
     }
+
+    [Test]
+    public void ContentLink_RenderWithOptions_Adds_Css()
+    {
+        // arrange
+        var stringWriter = new StringWriter();
+        var contentLink = new ContentLink()
+        {
+            Name = "Foo",
+            Uri = "/foo"
+        };
+
+        // act
+        var htmlContent = _sut.Render(contentLink, new RendererOptions(Css: "foo"));
+        htmlContent.WriteTo(stringWriter, new HtmlTestEncoder());
+        var actual = stringWriter.ToString();
+
+        // assert
+        actual.Should().Contain($"class=\"HtmlEncode[[govuk-link foo]]\"");
+    }
 }
diff --git a/Childrens-Social-Care-CPD/Contentful/Renderers/ContentLinkRenderer.cs b/Childrens-Social-Care-CPD/Contentful/Renderers/ContentLinkRenderer.cs
@@ -4,9 +4,9 @@
 
 namespace Childrens_Social_Care_CPD.Contentful.Renderers;
 
-internal class ContentLinkRenderer : IRenderer<ContentLink>
+internal class ContentLinkRenderer : IRendererWithOptions<ContentLink>
 {
-    public IHtmlContent Render(ContentLink item)
+    public IHtmlContent Render(ContentLink item, RendererOptions options = null)
     {
         var tagBuilder = new TagBuilder("a");
 
@@ -19,7 +19,16 @@ string s when s.StartsWith('/') => s,
 
         tagBuilder.Attributes.Add("href", href);
         tagBuilder.AddCssClass("govuk-link");
+        if (options?.HasCss ?? false)
+        {
+            tagBuilder.AddCssClass(options.Css);
+        }
         tagBuilder.InnerHtml.Append(item.Name);
         return tagBuilder;
     }
+
+    public IHtmlContent Render(ContentLink item)
+    {
+        return Render(item, null);
+    }
 }
diff --git a/Childrens-Social-Care-CPD/Contentful/Renderers/IRenderer.cs b/Childrens-Social-Care-CPD/Contentful/Renderers/IRenderer.cs
@@ -2,7 +2,17 @@
 
 namespace Childrens_Social_Care_CPD.Contentful.Renderers;
 
+public record RendererOptions(string Css = default)
+{
+    public bool HasCss => Css != default;
+}
+
 public interface IRenderer<in T>
 {
     IHtmlContent Render(T item);
 }
+
+public interface IRendererWithOptions<in T> : IRenderer<T>
+{
+    IHtmlContent Render(T item, RendererOptions options = null);
+}
diff --git a/Childrens-Social-Care-CPD/Views/Shared/_ColumnLayout.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_ColumnLayout.cshtml
@@ -10,10 +10,10 @@
 
     @foreach (var group in Model.Items.Select((e, i) => new { ContentItem = e, Grouping = (i / Model.ColumnCount) }).GroupBy(e => e.Grouping))
     {
-        <div class="govuk-grid-row dfe-section-card__container">
+        <div class="govuk-grid-row">
             @foreach (var item in group)
             {
-                <div class="@gridClass dfe-section-card__container">
+                <div class="@gridClass govuk-!-margin-bottom-4">
                     @{ await Html.RenderContentfulPartialAsync(item.ContentItem); }
                 </div>
             }

diff --git a/Childrens-Social-Care-CPD/Views/Shared/_LinkCard.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_LinkCard.cshtml
@@ -3,11 +3,14 @@
 @using Childrens_Social_Care_CPD.Contentful.Renderers;
 
 @model LinkCard
-@inject IRenderer<ContentLink> _contentLinkRenderer
+@inject IRendererWithOptions<ContentLink> _contentLinkRenderer
 
-<div class="section-card-home">
-    <govuk-heading level="Model.TitleLevel" display-size="3">
-        @_contentLinkRenderer.Render(Model.TitleLink)
-    </govuk-heading>
-    <p class="govuk-body">@Model.Text</p>
+<div class="dfe-card">
+    <div class="dfe-card-container">
+        <govuk-heading level="Model.TitleLevel" display-size="3">
+            @_contentLinkRenderer.Render(Model.TitleLink, new RendererOptions("govuk-link--no-visited-state dfe-card-link--header"))
+        </govuk-heading>
+        <p class="govuk-!-margin-bottom-1">@Model.Text</p>
+        <br>
+    </div>
 </div>
diff --git a/Childrens-Social-Care-CPD/Views/Shared/_LinkListCard.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_LinkListCard.cshtml
@@ -5,18 +5,16 @@
 @model LinkListCard
 @inject IRenderer<ContentLink> _contentLinkRenderer
 
-<div class="section-card-home">
-    <govuk-heading level="2" display-size="3">
-        @Model.Title
-    </govuk-heading>
-    <ul class="govuk-list">
-        @foreach (var contentLink in Model.Links)
-        {
-            <li>
-                <h3>
-                    @_contentLinkRenderer.Render(contentLink)
-                </h3>
-            </li>
-        }
-    </ul>
-</div>
+<govuk-heading level="2" display-size="3">
+    @Model.Title
+</govuk-heading>
+<ul class="govuk-list">
+    @foreach (var contentLink in Model.Links)
+    {
+        <li>
+            <h3>
+                @_contentLinkRenderer.Render(contentLink)
+            </h3>
+        </li>
+    }
+</ul>
diff --git a/Childrens-Social-Care-CPD/WebApplicationBuilderExtensions.cs b/Childrens-Social-Care-CPD/WebApplicationBuilderExtensions.cs
@@ -52,16 +52,26 @@ public static void AddDependencies(this WebApplicationBuilder builder)
             return client;
         });
 
-        // Register all the IRender<T> implementations in the assembly
-        System.Reflection.Assembly.GetExecutingAssembly()
-            .GetTypes()
+        // Register all the IRender<T> & IRenderWithOptions<T> implementations in the assembly
+        var assemblyTypes = System.Reflection.Assembly.GetExecutingAssembly().GetTypes();
+
+        assemblyTypes
             .Where(item => item.GetInterfaces().Where(i => i.IsGenericType).Any(i => i.GetGenericTypeDefinition() == typeof(IRenderer<>)) && !item.IsAbstract && !item.IsInterface)
             .ToList()
             .ForEach(assignedTypes =>
             {
                 var serviceType = assignedTypes.GetInterfaces().First(i => i.GetGenericTypeDefinition() == typeof(IRenderer<>));
                 builder.Services.AddScoped(serviceType, assignedTypes);
             });
+
+        assemblyTypes
+            .Where(item => item.GetInterfaces().Where(i => i.IsGenericType).Any(i => i.GetGenericTypeDefinition() == typeof(IRendererWithOptions<>)) && !item.IsAbstract && !item.IsInterface)
+            .ToList()
+            .ForEach(assignedTypes =>
+            {
+                var serviceType = assignedTypes.GetInterfaces().First(i => i.GetGenericTypeDefinition() == typeof(IRendererWithOptions<>));
+                builder.Services.AddScoped(serviceType, assignedTypes);
+            });
     }
 
     public static void AddFeatures(this WebApplicationBuilder builder)

diff --git a/Childrens-Social-Care-CPD/styles/scss/overrides/_dfe-overrides.scss b/Childrens-Social-Care-CPD/styles/scss/overrides/_dfe-overrides.scss
@@ -478,4 +478,70 @@ CONTENT TITLE BANNER
     .gem-c-contents-list__list-item--numbered, .gem-c-contents-list__list-item--parent {
         list-style-type: none;
     }
+}
+
+/* DFE card container
+--------------------------------------- */
+.dfe-card {
+    position: relative;
+    background-color: #f3f2f1;
+    border-bottom: 3px solid #003a69;
+    max-width: 100%;
+}
+
+.dfe-card.dfe-card--blog-card {
+    border-radius: 12px 12px 0 0;
+}
+
+.dfe-card.dfe-card--blog-card img {
+    border-radius: 12px 12px 0 0;
+}
+
+@media (max-width: 40.0525em) {
+    .dfe-card {
+        max-width: 100%;
+    }
+}
+
+.dfe-card > picture, .dfe-card > picture > img {
+    max-width: 100%;
+}
+
+.dfe-card-container {
+    padding: 20px;
+}
+
+.dfe-card:focus-within, .dfe-card:hover {
+    background-color: #003a69;
+}
+
+.dfe-card:focus-within .govuk-heading-m, .dfe-card:focus-within a, .dfe-card:focus-within p, .dfe-card:hover .govuk-heading-m, .dfe-card:hover a, .dfe-card:hover p {
+    color: #fff;
+}
+
+.dfe-card:focus-within {
+    outline: 3px solid #fd0;
+}
+
+.dfe-card-container .dfe-card-link--header:focus, .dfe-card-container .dfe-card-link--retake:focus {
+    color: #0b0c0c;
+}
+
+.dfe-card-link--retake {
+    position: relative;
+    z-index: 2;
+}
+
+.dfe-card-link--header {
+    text-decoration: none;
+    color: #347ca9;
+}
+
+.dfe-card-link--header:after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
 }
diff --git a/Childrens-Social-Care-CPD/wwwroot/css/application.css b/Childrens-Social-Care-CPD/wwwroot/css/application.css
diff --git a/Childrens-Social-Care-CPD/wwwroot/css/application.css.map b/Childrens-Social-Care-CPD/wwwroot/css/application.css.map
diff --git a/Childrens-Social-Care-CPD/wwwroot/css/application.min.css b/Childrens-Social-Care-CPD/wwwroot/css/application.min.css
diff --git a/Childrens-Social-Care-CPD/wwwroot/css/application.min.css.map b/Childrens-Social-Care-CPD/wwwroot/css/application.min.css.map