Skip to content

Commit

Permalink
feat: add step-by-step navigation from govuk prototype (#525)
Browse files Browse the repository at this point in the history
**:sparkles: Features**:

- Add the `step by step navigation` JS and CSS from the `@govuk-prototype-kit/step-by-step` package

**:adhesive_bandage: Fixes**:

- Updates the `Warning component` tag helper, to use the new class to hide the warning text.
  • Loading branch information
jimwashbrook authored Feb 20, 2024
1 parent b91a315 commit a01f7a3
Show file tree
Hide file tree
Showing 13 changed files with 2,183 additions and 2,208 deletions.
42 changes: 35 additions & 7 deletions src/Dfe.PlanTech.Web.Node/esbuild.config.js
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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,
Expand All @@ -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";
Expand Down Expand Up @@ -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"];
Expand Down
4,297 changes: 2,106 additions & 2,191 deletions src/Dfe.PlanTech.Web.Node/package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/Dfe.PlanTech.Web.Node/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 1 addition & 4 deletions src/Dfe.PlanTech.Web.Node/styles/scss/application.scss
Original file line number Diff line number Diff line change
@@ -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";
6 changes: 6 additions & 0 deletions src/Dfe.PlanTech.Web.Node/styles/scss/step-by-step.scss
Original file line number Diff line number Diff line change
@@ -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";
Original file line number Diff line number Diff line change
Expand Up @@ -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()
{
Expand Down
10 changes: 5 additions & 5 deletions src/Dfe.PlanTech.Web/Views/Shared/_Layout.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

@{
Expand All @@ -30,7 +30,7 @@
await Html.RenderPartialAsync("_Header");
}

@RenderSection("Header", false)
@RenderSection("Header", false)
}

@section BeforeContent {
Expand Down
3 changes: 3 additions & 0 deletions src/Dfe.PlanTech.Web/wwwroot/css/step-by-step.css

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions src/Dfe.PlanTech.Web/wwwroot/css/step-by-step.css.map

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions src/Dfe.PlanTech.Web/wwwroot/js/step-by-step-navigation.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Large diffs are not rendered by default.

Loading

0 comments on commit a01f7a3

Please sign in to comment.