Feat/accordion view step by step

src/Dfe.PlanTech.Domain/Content/Interfaces/IAccordion.cs

@@ -0,0 +1,8 @@
+namespace Dfe.PlanTech.Domain.Content.Interfaces;
+
+public interface IAccordion
+{
+    public int Order { get; set; }
+    public string Title { get; set; }
+    public string Heading { get; set; }
+}

src/Dfe.PlanTech.Domain/Content/Models/Accordion.cs

@@ -0,0 +1,11 @@
+using Dfe.PlanTech.Domain.Content.Interfaces;
+
+namespace Dfe.PlanTech.Domain.Content.Models;
+
+public class Accordion : IAccordion
+{
+    public int Order { get; set; }
+    public string Title { get; set; }
+
+    public string Heading { get; set; }
+}

src/Dfe.PlanTech.Web.Node/esbuild.config.js

@@ -43,6 +43,7 @@ await esbuild.build({
     }),
   ],
   outfile: "out/css/application.css",
+
 });
 
 await esbuild.build({
@@ -97,6 +98,11 @@ copyFileSync(
   "./out/js/govuk-frontend.min.js"
 );
 
+copyFileSync(
+  ".//node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css",
+  "./out/css/govuk-frontend.min.css"
+);
+
 //Copy to Dfe.PlanTech.Web
 const targetDir = "../Dfe.PlanTech.Web/wwwroot";
 const folders = ["css", "assets", "js"];

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

@@ -1,5 +1,11 @@
-@use "../../node_modules/govuk-frontend/dist/govuk/all.scss";
-@use "../../node_modules/dfe-frontend-alpha/packages/dfefrontend";
+@import "../../node_modules/govuk-frontend/dist/govuk/all.scss";
+@import "../../node_modules/dfe-frontend-alpha/packages/dfefrontend";
+
+//Step-by-step navigation pattern. See https://design-system.service.gov.uk/patterns/step-by-step-navigation/
+@import "../../node_modules/@govuk-prototype-kit/step-by-step/sass/_step-by-step-navigation.scss";
+@import "../../node_modules/@govuk-prototype-kit/step-by-step/sass/_step-by-step-navigation-related.scss";
+@import "../../node_modules/@govuk-prototype-kit/step-by-step/sass/_step-by-step-navigation-header.scss";
+
 
 @import "overrides";
 @import "app-task-list";

src/Dfe.PlanTech.Web/ViewComponents/AccordionViewComponent.cs

@@ -0,0 +1,12 @@
+using Dfe.PlanTech.Domain.Content.Interfaces;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Dfe.PlanTech.Web.ViewComponents;
+
+public class AccordionViewComponent : ViewComponent
+{
+    public IViewComponentResult Invoke(IEnumerable<IAccordion> accordionBlock)
+    {
+        return View(accordionBlock);
+    }
+}

src/Dfe.PlanTech.Web/Views/Shared/Components/Accordion/Default.cshtml

@@ -0,0 +1,41 @@
+@model IEnumerable<Dfe.PlanTech.Domain.Content.Interfaces.IAccordion>
+
+<div class="govuk-grid-column-one-third">
+
+    <div data-module="appstepnav" id="step-by-step-navigation" class="app-step-nav govuk-!-display-none-print app-step-nav--active" data-show-text="Show" data-hide-text="Hide" data-show-all-text="Show all actions" data-hide-all-text="Hide all steps">
+        <ol class="app-step-nav__steps">
+            @foreach (var accordion in Model)
+            {
+                <li class="app-step-nav__step js-step" aria-current="step">
+                    <div class="app-step-nav__header js-toggle-panel" data-position="1">
+                        <h3 class="app-step-nav__title">
+                            <span class="app-step-nav__circle app-step-nav__circle--number">
+                                <span class="app-step-nav__circle-inner">
+                                    <span class="app-step-nav__circle-background">
+                                        <span class="govuk-visually-hidden govuk-!-display-none-print">Step</span>@accordion.Order<span class="govuk-visually-hidden govuk-!-display-none-print" aria-hidden="true">:</span>
+                                    </span>
+                                </span>
+                            </span>
+
+                            <span class="js-step-title">
+                                @accordion.Title
+                            </span>
+                        </h3>
+                    </div>
+
+                    <div class="app-step-nav__panel js-panel js-hidden">
+
+                        <ol class="app-step-nav__list " data-length="3">
+                            <li class="app-step-nav__list-item js-list-item ">
+                                <a class="app-step-nav__link js-link" href="#@accordion.Heading">
+                                    @accordion.Heading
+                                </a>
+                            </li>
+                        </ol>
+
+                    </div>
+                </li>
+            }
+        </ol>
+    </div>
+</div>

src/Dfe.PlanTech.Web/Views/Shared/Components/Page.cshtml

@@ -34,6 +34,7 @@
                     categoriesList.Add(category);
                 }
             }
+
             if (showRecommendations)
             {
                 @await Component.InvokeAsync("Recommendations", new { categories = categoriesList.ToArray() })

src/Dfe.PlanTech.Web/Views/Shared/_Layout.cshtml

@@ -6,10 +6,11 @@
 
 @section Head {
     <link rel="stylesheet" href="~/css/application.css">
+    <link rel="stylesheet" href="~/css/govuk-frontend.min.css">
 
-    @Html.Raw(GtmConfiguration.Analytics)
-    @Html.Raw(GtmConfiguration.Head)
-    @RenderSection("Head", false)
+            @Html.Raw(GtmConfiguration.Analytics)
+            @Html.Raw(GtmConfiguration.Head)
+            @RenderSection("Head", false)
 }
 
 @{
@@ -35,7 +36,9 @@
 
 @section BeforeContent {
     <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
-
+    <script src="/js/step-by-step-navigation.js"></script>
+    <script src="/js/step-by-step-polyfills.js"></script>
+
     @{
         await Html.RenderPartialAsync("BetaHeader");
     }
@@ -53,9 +56,12 @@
 @section BodyEnd {
     <script src="~/js/app.js"></script>
     <script src="~/js/govuk-frontend.min.js" type="module"></script>
+
     <script type="module">
         import { initAll } from '/js/govuk-frontend.min.js';
 
         initAll();
+        var $element = document.querySelector('#step-by-step-navigation')
+        var stepByStepNavigation = new GOVUK.Modules.AppStepNav($element).init()
     </script>
 }

tests/Dfe.PlanTech.Web.UnitTests/ViewComponents/AccordionViewComponentTests.cs

@@ -0,0 +1,30 @@
+using Dfe.PlanTech.Domain.Content.Interfaces;
+using Dfe.PlanTech.Domain.Content.Models;
+using Dfe.PlanTech.Web.ViewComponents;
+using Microsoft.AspNetCore.Mvc.ViewComponents;
+using Xunit;
+
+namespace Dfe.PlanTech.Web.UnitTests.ViewComponents;
+
+public class AccordionViewComponentTest
+{
+    [Fact]
+    public void Accordion_view_component_not_null()
+    {
+        IEnumerable<IAccordion> accordionBlock = new List<IAccordion>
+            {
+                new Accordion() { Order = 1, Title = "Test Header 1", Heading = "Heading 1" },
+                new Accordion() { Order = 2, Title = "Test Header 2", Heading = "Heading 2" },
+                new Accordion() { Order = 3, Title = "Test Header 3", Heading = "Heading 3" },
+                new Accordion() { Order = 4, Title = "Test Header 4", Heading = "Heading 4" }
+            };
+
+        var accordionComponent = new AccordionViewComponent();
+
+        var result = accordionComponent.Invoke(accordionBlock);
+
+        var model = (result as ViewViewComponentResult)?.ViewData?.Model;
+
+        Assert.NotNull(model);
+    }
+}