Migrate nhsuk-frontend v8, bringing components into line with the current style guide.

.eslintignore

@@ -0,0 +1,4 @@
+jest.config.js
+.eslintrc.js
+rollup.config.mjs
+dist

.eslintrc.js

@@ -0,0 +1,41 @@
+module.exports = {
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+  env: {
+    browser: true,
+    jest: true,
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {},
+    },
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+    'plugin:jsx-a11y/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  rules: {
+    'react/prop-types': 0,
+    'jsx-a11y/anchor-has-content': 0,
+    'jsx-a11y/alt-text': 0,
+    'jsx-a11y/heading-has-content': 0,
+    'react-hooks/exhaustive-deps': 0,
+  },
+  overrides: [
+    {
+      files: ['*.stories.tsx'],
+      rules: { '@typescript-eslint/no-unused-vars': 'off' },
+    },
+  ],
+};

.github/workflows/ci.yml

@@ -1,16 +1,24 @@
 name: CI Build
 
-on: 
+on:
   push:
     branches: main
-  pull_request: 
+  pull_request:
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.x'
+      - name: Enable corepack
+        run: corepack enable
+      - name: Set Yarn version
+        run: yarn set version stable
       - name: Yarn Install
         run: yarn
       - name: Lint

.github/workflows/release.yml

@@ -9,26 +9,39 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
-
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.x'
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Set Yarn version
+        run: yarn set version stable
+
       - name: Yarn Install
         run: yarn
-      
+
       - name: Lint
-        run: yarn lint
-      
+        run: yarn lint:ci
+
       - name: Jest Tests
         run: yarn test:ci
-      
+
       - name: Typescript build
         run: yarn build
-      
+
       - name: Set Version to Release Tag Name
         run: |
-          yarn version --new-version ${{ github.event.release.tag_name }} --no-git-tag-version
-      
+          yarn version ${{ github.event.release.tag_name }}
+
       - name: Publish to npm, publish pre-release as beta
-        uses: JS-DevTools/npm-publish@v1 
+        uses: JS-DevTools/npm-publish@v1
         with:
           token: ${{ secrets.NPM_TOKEN }}
           tag: ${{ github.event.release.prerelease && 'beta' || 'latest' }}

.gitignore

@@ -2,8 +2,6 @@
 logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 lerna-debug.log*
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
@@ -65,6 +63,18 @@ typings/
 # Output of 'npm pack'
 *.tgz
 
+# Yarn files
+yarn-error.log
+yarn-debug.log*
+yarn-error.log*
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
 # Yarn Integrity file
 .yarn-integrity
 
@@ -108,8 +118,9 @@ dist
 
 # Custom
 lib/
-yarn-error.log
 storybook-static/
 
 # IDEA files
 .idea/
+
+.DS_Store

.nvmrc

@@ -0,0 +1 @@
+18

.storybook/main.ts

@@ -1,4 +1,7 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+import tsConfigPaths from 'vite-tsconfig-paths';
+
 const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
@@ -9,5 +12,13 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+  viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [tsConfigPaths()],
+    });
+  },
 };
 export default config;

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import nhsTheme from './theme';
 
 addons.setConfig({

.storybook/preview-head.html

@@ -0,0 +1,9 @@
+<script type="text/javascript">
+  document.addEventListener(
+    'DOMContentLoaded',
+    function () {
+      document.body.classList.add('js-enabled');
+    },
+    false,
+  );
+</script>

.storybook/preview.ts

@@ -6,7 +6,15 @@ const preview: Preview = {
     actions: { argTypesRegex: '^on[A-Z].*' },
     options: {
       storySort: {
-        order: ['Welcome', 'Migration Guides', 'Components', 'Patterns', 'FormBehaviour', 'Deprecated'],
+        order: [
+          'Welcome',
+          'Migration Guides',
+          'Form Elements',
+          'Content Presentation',
+          'Navigation',
+          'Layout',
+          'Patterns',
+        ],
       },
     },
   },

.storybook/storybook.scss

@@ -1,8 +1,3 @@
-// Also import styles for deprecated Panel and Promo
-@import '../node_modules/nhsuk-frontend-legacy/packages/core/all.scss';
-@import '../node_modules/nhsuk-frontend-legacy/packages/components/panel/panel';
-@import '../node_modules/nhsuk-frontend-legacy/packages/components/promo/promo';
-
 // Allow current nhsuk styles to override legacy
 @import '../node_modules/nhsuk-frontend/packages/nhsuk.scss';
 

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}/dist/index.js",
+            "outFiles": [
+                "${workspaceFolder}/**/*.js"
+            ]
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "eslint.format.enable": true,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.validate": ["javascript", "typescript"],
+  "eslint.codeAction.showDocumentation": {
+    "enable": true
+  },
+  "eslint.alwaysShowStatus": true,
+  "eslint.workingDirectories": ["src"],
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+npmRegistryServer: https://registry.yarnpkg.com

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 NHS Digital
+Copyright (c) 2024 NHS England
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -3,6 +3,8 @@
 - [NHS.UK React Components](#nhsuk-react-components)
   - [Coming from 0.x?](#coming-from-0x)
   - [Upgrading to 2.0](#upgrading-to-20)
+  - [Upgrading to 3.0](#upgrading-to-30)
+  - [Upgrading to 4.0](#upgrading-to-40)
   - [Installation](#installation)
   - [Usage](#usage)
     - [Storybook](#storybook)
@@ -21,6 +23,14 @@ If you're coming from versions of the library prior to 1.0.0, please give [this
 
 If you're upgrading to 2.0, please be aware we have made some breaking changes. [This doc](/docs/upgrade-to-2.0.md) has the details.
 
+## Upgrading to 3.0
+
+If you're upgrading to 3.0, please be aware we have made some breaking changes. [This doc](/docs/upgrade-to-3.0.md) has the details.
+
+## Upgrading to 4.0
+
+If you're upgrading to 4.0, please be aware we have made some breaking changes. [This doc](/docs/upgrade-to-4.0.md) has the details.
+
 ## Installation
 
 You can install this package using either `yarn` or `npm`.

bundle-base.tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "target": "es6",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "types": ["jest", "node"],
+    "sourceMap": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "outDir": "./dist",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@content-presentation/*": ["src/components/content-presentation/*"],
+      "@form-elements/*": ["src/components/form-elements/*"],
+      "@navigation/*": ["src/components/navigation/*"],
+      "@typography/*": ["src/components/typography/*"],
+      "@util/*": ["src/util/*"],
+      "@patterns/*": ["src/patterns/*"],
+      "@resources/*": ["src/resources/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "**/__tests__", "src/setupTests.ts"]
+}