feat: add step-by-step navigation from govuk prototype

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

@@ -1,8 +1,9 @@
 import * as esbuild from "esbuild";
 import { sassPlugin } from "esbuild-sass-plugin";
 import { copyFileSync, cpSync, readdirSync } from "fs";
+import { parse } from "path";
 
-//Build JS
+//Build main JS
 await esbuild.build({
   entryPoints: ["scripts/app.js"],
   bundle: true,
@@ -11,7 +12,24 @@ await esbuild.build({
   outfile: "out/js/app.js",
 });
 
-//Builds SASS
+//Build extra JS
+const jsFilePaths = [
+  "./node_modules/@govuk-prototype-kit/step-by-step/javascripts/step-by-step-navigation.js",
+  "./node_modules/@govuk-prototype-kit/step-by-step/javascripts/step-by-step-polyfills.js",
+];
+
+const jsEntryPoints = Object.fromEntries(
+  new Map(jsFilePaths.map((path) => [parse(path).name, path]))
+);
+
+await esbuild.build({
+  entryPoints: jsEntryPoints,
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  outdir: "out/js/",
+});
+
 await esbuild.build({
   entryPoints: ["styles/scss/application.scss"],
   bundle: true,
@@ -27,6 +45,21 @@ await esbuild.build({
   outfile: "out/css/application.css",
 });
 
+await esbuild.build({
+  entryPoints: ["styles/scss/step-by-step.scss"],
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  target: ["chrome58", "firefox57", "safari11", "edge16"],
+  external: ["/assets/*"],
+  plugins: [
+    sassPlugin({
+      loader: { ".woff2": "file", ".png": "file" },
+    }),
+  ],
+  outfile: "out/css/step-by-step.css",
+});
+
 //Copy assets
 //DFE
 const dfeDir = "./node_modules/dfe-frontend-alpha/packages/assets";
@@ -64,11 +97,6 @@ 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/package.json

@@ -11,6 +11,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@govuk-prototype-kit/step-by-step": "^2.2.2",
     "dfe-frontend-alpha": "^1.0.1",
     "esbuild": "0.18.17",
     "esbuild-sass-plugin": "^2.10.0",

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

@@ -1,8 +1,5 @@
-//@use "sass:map";
-$govuk-global-styles: true;
-$govuk-new-link-styles: true;
-
 @use "../../node_modules/govuk-frontend/dist/govuk/all.scss";
 @use "../../node_modules/dfe-frontend-alpha/packages/dfefrontend";
+
 @import "overrides";
 @import "app-task-list";

src/Dfe.PlanTech.Web.Node/styles/scss/step-by-step.scss

@@ -0,0 +1,6 @@
+@import "../../node_modules/govuk-frontend/dist/govuk/all.scss";
+
+//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";

src/Dfe.PlanTech.Web/TagHelpers/WarningComponentTagHelper.cs

@@ -7,7 +7,7 @@ public class WarningComponentTagHelper : TagHelper
     public const string OpeningDiv = """<div class="govuk-warning-text">""";
     public const string WarningIcon = """<span class="govuk-warning-text__icon" aria-hidden="true">!</span>""";
     public const string OpeningSpan = """<strong class="govuk-warning-text__text">""";
-    public const string AssistiveText = """<span class="govuk-warning-text__assistive">Warning</span>""";
+    public const string AssistiveText = """<span class="govuk-visually-hidden">Warning</span>""";
 
     public WarningComponentTagHelper()
     {

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

@@ -3,13 +3,13 @@
 @using Dfe.PlanTech.Web.Helpers;
 
 @using System.Globalization;
+
 @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)
 }
 
 @{
@@ -30,7 +30,7 @@
         await Html.RenderPartialAsync("_Header");
     }
 
-@RenderSection("Header", false)
+    @RenderSection("Header", false)
 }
 
 @section BeforeContent {