Update build.mjs

Author: paulstevendev

packages/tel-frontend-review/build.mjs

@@ -13,20 +13,24 @@ const repoRoot = join(__dirname, "../../"); // back to repo root
 const reviewSrc = join(__dirname, "src");
 const reviewDist = join(__dirname, "dist");
 
+// Correct NHS.UK v10 dist path
+const nhsukDist = join(repoRoot, "node_modules/nhsuk-frontend/dist/nhsuk");
+
 // TEL frontend package paths
 const telFrontendDir = join(repoRoot, "packages/tel-frontend");
 const telFrontendDist = join(telFrontendDir, "dist");
-const telFrontendSrcScss = join(telFrontendDir, "src/styles.scss");
 
 // -------- Helpers --------
 
 // Build the TEL Frontend package (CSS + JS) using Gulp
 async function buildTelFrontend() {
   console.log("Building TEL Frontend CSS + JS via Gulp...");
 
+  // Ensure dist folder exists and is clean
   await fse.emptyDir(telFrontendDist);
   await fse.ensureDir(telFrontendDist);
 
+  // Run Gulp build inside tel-frontend package
   try {
     execSync("npx gulp build", {
       cwd: telFrontendDir,
@@ -40,22 +44,30 @@ async function buildTelFrontend() {
   console.log("TEL Frontend CSS/JS built successfully");
 }
 
-// Copy TEL frontend built files + review-specific assets
+// Copy built TEL frontend files + NHS frontend assets + review-specific assets
 async function buildReviewAssets() {
   console.log("Copying review site assets...");
 
   await fse.ensureDir(join(reviewDist, "stylesheets"));
   await fse.ensureDir(join(reviewDist, "javascripts"));
 
-  // ✅ No more NHS dist copy — NHS styles now come in via Sass
+  // Copy NHS.UK frontend dist (v10 paths)
+  await fse.copy(
+    join(nhsukDist, "nhsuk-frontend.min.css"),
+    join(reviewDist, "stylesheets/nhsuk.min.css")
+  );
+  await fse.copy(
+    join(nhsukDist, "nhsuk-frontend.min.js"),
+    join(reviewDist, "javascripts/nhsuk.min.js")
+  );
 
   // Copy TEL frontend built files
   await fse.copy(
     join(telFrontendDist, "tel-frontend.css"),
     join(reviewDist, "stylesheets/tel-frontend.css")
   );
   await fse.copy(
-    join(telFrontendDist, "tel-frontend.min.js"),
+    join(telFrontendDist, "tel.min.js"),
     join(reviewDist, "javascripts/tel.min.js")
   );
 
@@ -68,13 +80,13 @@ async function buildReviewAssets() {
   console.log("Review site assets copied");
 }
 
-// Compile review site SCSS (for review site-specific + NHS styles)
+// Compile review site SCSS (for review site-specific styles)
 async function buildReviewCSS() {
   console.log("Building review site CSS...");
 
   const css = sass.compile(join(reviewSrc, "scss/main.scss"), {
     style: "expanded",
-    loadPaths: ["node_modules"], // allows @use "nhsuk-frontend/..." etc.
+    loadPaths: ["node_modules"],
   });
 
   const outDir = join(reviewDist, "stylesheets");
@@ -88,20 +100,18 @@ async function buildReviewCSS() {
 async function buildReviewHtml() {
   console.log("Rendering review site HTML...");
 
-  const telComponents = join(
-    repoRoot,
-    "packages/tel-frontend/src/tel/components"
-  );
+  const telComponents = join(repoRoot, "packages/tel-frontend/src/tel/components");
 
   const env = nunjucks.configure(
     [
-      reviewSrc, // review site source
-      join(repoRoot, "node_modules/nhsuk-frontend/packages"), // NHS macros live here in v10
-      telComponents, // TEL frontend macros
+      reviewSrc,                      // review site source
+      join(repoRoot, "node_modules/nhsuk-frontend"), // NHS macros
+      telComponents                   // TEL frontend macros
     ],
     { autoescape: true }
   );
 
+  // Render root-level .njk files
   const files = await fse.readdir(reviewSrc);
   for (const file of files) {
     if (file.endsWith(".njk")) {
@@ -140,9 +150,16 @@ async function build() {
   try {
     await fse.emptyDir(reviewDist);
 
+    // Step 1: Build TEL frontend (CSS + JS) via Gulp
     await buildTelFrontend();
+
+    // Step 2: Copy assets (TEL + NHS + review site)
     await buildReviewAssets();
+
+    // Step 3: Compile review site SCSS
     await buildReviewCSS();
+
+    // Step 4: Render HTML pages
     await buildReviewHtml();
 
     console.log("Review site build finished successfully");