Merge pull request #2 from LandRegistry/feature/update-govuk-frontend

Feature/update govuk frontend

Author: CyrilAdelekan

.husky/pre-commit

@@ -4,7 +4,7 @@
 npm run lint
 
 # Run format before commit
-npm run format
+npm run lint-fix
 
 # generate uml diagram before commit
 npm run uml

.storybook/main.ts

@@ -44,8 +44,28 @@ const config: StorybookConfig = {
             test: /\.s[ac]ss$/i,
             use: [
               "style-loader",
-              "css-loader",
-              { loader: "sass-loader", options: { implementation: sass } },
+              {
+                loader: "css-loader",
+                options: {
+                  url: false, // stops css-loader trying to resolve /assets/fonts/... as modules
+                },
+              },
+              {
+                loader: "sass-loader",
+                options: {
+                  implementation: sass,
+                  sassOptions: {
+                    quietDeps: true, // suppresses variable conflict from @use ... as *
+                    silenceDeprecations: [
+                      "import",
+                      "global-builtin",
+                      "color-functions",
+                      "if-function",
+                    ],
+                  },
+                  // NO additionalData — that's what's causing the duplicate $govuk-assets-path error
+                },
+              },
             ],
           },
         ],
@@ -90,7 +110,13 @@ const config: StorybookConfig = {
   },
   docs: {},
   typescript: { reactDocgen: "react-docgen-typescript" },
-  staticDirs: ["./public"],
+  staticDirs: [
+    "./public",
+    {
+      from: "../node_modules/govuk-frontend/dist/govuk/assets",
+      to: "/assets",
+    },
+  ],
 };
 
 export default config;

assets/uml-diagram.svg

@@ -55,47 +55,45 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@chromatic-com/storybook": "^5.0.1",
-    "@commitlint/cli": "^20.4.4",
-    "@commitlint/config-conventional": "^20.4.4",
+    "@commitlint/cli": "^20.5.0",
+    "@commitlint/config-conventional": "^20.5.0",
     "@eslint/js": "^9.37.0",
     "@jest/globals": "^30.3.0",
     "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@storybook/addon-a11y": "^10.2.18",
-    "@storybook/addon-links": "^10.2.18",
+    "@storybook/addon-a11y": "^10.2.19",
+    "@storybook/addon-links": "^10.2.19",
     "@storybook/addon-styling-webpack": "^3.0.0",
     "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-vite": "^10.2.18",
-    "@storybook/react-webpack5": "^10.2.18",
+    "@storybook/react-vite": "^10.2.19",
+    "@storybook/react-webpack5": "^10.2.19",
     "@storybook/test-runner": "^0.24.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/govuk-frontend": "^5.11.0",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.46.0",
-    "@typescript-eslint/parser": "^8.57.0",
     "assert": "^2.1.0",
     "autoprefixer": "^10.4.27",
     "babel-jest": "^30.3.0",
     "bootstrap": "^5.3.8",
-    "chromatic": "^15.2.0",
+    "chromatic": "^15.3.0",
     "css-loader": "^7.1.4",
     "deep-iterator": "^1.1.0",
     "eslint": "^9.37.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^10.2.18",
+    "eslint-plugin-storybook": "^10.2.19",
     "globals": "^17.4.0",
-    "govuk-frontend": "^5.14.0",
+    "govuk-frontend": "^6.1.0",
     "html-react-parser": "^5.2.17",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
@@ -121,7 +119,7 @@
     "sass": "^1.98.0",
     "sass-loader": "^16.0.7",
     "standard-version": "^9.5.0",
-    "storybook": "^10.2.18",
+    "storybook": "^10.2.19",
     "style-loader": "^4.0.0",
     "stylelint": "^17.4.0",
     "stylelint-config-recess-order": "^7.6.1",
@@ -131,10 +129,10 @@
     "tslib": "^2.8.1",
     "tsuml2": "^0.17.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.0",
+    "typescript-eslint": "^8.57.1",
     "unplugin": "^3.0.0",
     "webpack": "^5.105.4",
-    "@storybook/addon-docs": "^10.2.18"
+    "@storybook/addon-docs": "^10.2.19"
   },
   "peerDependencies": {
     "govuk-frontend": ">=5.14.0",

package-lock.json

@@ -1,9 +1,6 @@
+// src/components/Accordion/Accordion.scss
 // GOV.UK design system
-$govuk-images-path: "~govuk-frontend/dist/govuk/assets/images/";
-$govuk-fonts-path: "~govuk-frontend/dist/govuk/assets/fonts/";
-$govuk-assets-path: "~govuk-frontend/govuk/assets/";
-$govuk-font-family: "Arial", sans-serif;
+// To customise brand colour in v6 use:
+// $govuk-functional-colours: (brand: #87c426);
 
-// $govuk-brand-colour: #87c426;
-
-@import "~govuk-frontend/dist/govuk/components/accordion/accordion";
+@use "~govuk-frontend/dist/govuk/components/accordion" as *;

package.json

@@ -1,4 +1,4 @@
-@import "~govuk-frontend/dist/govuk/base";
+@use "~govuk-frontend/dist/govuk/base" as *;
 
 .govuk-back-link.back-link-style-override:hover,
 .govuk-back-link.back-link-style-override a:hover {