Storybook v8 publish

.browserslistrc

@@ -0,0 +1,10 @@
+# https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/.browserslistrc
+
+> 0.1% in GB and not dead
+last 6 Chrome versions
+last 6 Firefox versions
+last 6 Edge versions
+last 2 Samsung versions
+Firefox ESR
+Safari >= 11
+iOS >= 11

.github/actions/lint/action.yml

@@ -0,0 +1,18 @@
+name: Lint
+
+on:
+  workflow_call:
+
+runs:
+  using: "composite"
+  steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: .nvmrc
+    - name: Install dependencies
+      run: npm ci
+      shell: bash
+    - name: Lint
+      run: npm run test:lint
+      shell: bash

.github/actions/storybook-tests/action.yml

@@ -0,0 +1,33 @@
+name: Tests
+
+on:
+  workflow_call:
+
+runs:
+  using: "composite"
+  steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: .nvmrc
+    - name: Install dependencies
+      run: npm ci
+      shell: bash
+    - name: Build Storybook
+      run: npm run build:storybook:tests
+      shell: bash
+    - name: Start Storybook
+      run: npm run start:storybook &
+      shell: bash
+    - name: Install Playwright
+      run: npx playwright install
+      shell: bash
+    - uses: nev7n/wait_for_response@v1
+      with:
+        url: "http://localhost:6006"
+        responseCode: 200
+        timeout: 30000
+        interval: 500
+    - name: Run Storybook tests
+      run: npm run test:storybook
+      shell: bash

.github/actions/tests/action.yml

@@ -0,0 +1,18 @@
+name: Tests
+
+on:
+  workflow_call:
+
+runs:
+  using: "composite"
+  steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: .nvmrc
+    - name: Install dependencies
+      run: npm ci
+      shell: bash
+    - name: Run unit tests
+      run: npm run test:unit
+      shell: bash

.github/workflows/build.yml

@@ -20,14 +20,14 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: "16.x"
+          node-version-file: .nvmrc
       - name: Install dependencies
-        run: yarn
+        run: npm ci
       - name: Build Storybook
         run: |
-          yarn sass-compile
-          yarn build-storybook --quiet
+          npm run compile:sass
+          npm run build:storybook --quiet
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4
         with:
-          folder: storybook-static # The folder the action should deploy.
+          folder: storybook # The folder the action should deploy.

.github/workflows/test.yml

@@ -5,34 +5,34 @@ on:
     branches-ignore:
       - main
       - release-*
+    paths-ignore:
+      - 'CHANGELOG.md'
+      - 'LICENCE'
+      - 'README.md'
+
 permissions:
   id-token: write
   contents: read
+
+
 jobs:
-  unit-tests:
-    uses: nationalarchives/tdr-github-actions/.github/workflows/tdr_test.yml@main
-    with:
-      repo-name: tdr-components
-      test-command: |
-        npm ci
-        npm t
-    secrets:
-      SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
-  interaction-and-accessibility:
+  lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: "16.x"
-      - name: Install dependencies
-        run: yarn
-      - name: Install Playwright
-        run: npx playwright install --with-deps
-      - name: Build Storybook
-        run: yarn build-storybook
-      - name: Serve Storybook and run tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 6006 --silent" \
-            "npx wait-on tcp:6006 && yarn test-storybook"
+      - uses: actions/checkout@v4
+      - name: Lint
+        uses: ./.github/actions/lint
+
+  unit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Tests
+        uses: ./.github/actions/tests
+
+  storybook-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Tests
+        uses: ./.github/actions/storybook-tests

.nvmrc

@@ -0,0 +1 @@
+lts/iron

.storybook/main.js

@@ -1,7 +1,35 @@
-const path = require("path");
-
-module.exports = {
+/** @type { import('@storybook/html-webpack5').StorybookConfig } */
+const config = {
+  stories: [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  addons: [
+    "@chromatic-com/storybook",
+    "@storybook/addon-webpack5-compiler-babel",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-a11y",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/html-webpack5",
+    options: {},
+  },
+  staticDirs: ["../public", "../assets"],
+  features: {
+    interactionsDebugger: true,
+    buildStoriesJson: true,
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    skipCompiler: false,
+  },
   webpackFinal: (config) => {
+    // Override browserslist settings here
+    // config.target = ["web", "es5"];
+
     config.module.rules.push({
       test: /\.njk$/,
       use: "simple-nunjucks-loader",
@@ -31,24 +59,8 @@ module.exports = {
 
     return config;
   },
-  stories: [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)",
-    "../src/nationalarchives/components/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-a11y",
-  ],
-  framework: "@storybook/html",
-  core: {
-    builder: "@storybook/builder-webpack5",
+  docs: {
+    autodocs: "tag",
   },
-  features: {
-    interactionsDebugger: true,
-    buildStoriesJson: true,
-  },
-  staticDirs: ["../public", "../assets"],
 };
+export default config;

.storybook/preview-head.html

@@ -1,2 +1,2 @@
 <!-- .storybook/preview-head.html -->
-<link rel="stylesheet" media="screen" href="./govuk.css">
+<link rel="stylesheet" media="screen" href="./govuk.css" />

.storybook/preview.js

@@ -1,5 +1,14 @@
-export const parameters = {
-  controls: {
-    expanded: true,
+/** @type { import('@storybook/html').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
   },
 };
+
+export default preview;

.storybook/test-runner.js

@@ -6,12 +6,11 @@ const { injectAxe, checkA11y, configureAxe } = require("axe-playwright");
  * to learn more about the test-runner hooks API.
  */
 module.exports = {
-  async preRender(page) {
+  async preVisit(page) {
     await injectAxe(page);
   },
-  async postRender(page, context) {
-    // https://github.com/storybookjs/test-runner#getstorycontext
-    // Get entire context of a story, including parameters, args, argTypes, etc.
+  async postVisit(page, context) {
+    // Get the entire context of a story, including parameters, args, argTypes, etc.
     const storyContext = await getStoryContext(page, context);
 
     // Do not test a11y for stories that disable a11y
@@ -24,7 +23,7 @@ module.exports = {
       rules: storyContext.parameters?.a11y?.config?.rules,
     });
 
-    await checkA11y(page, "#root", {
+    await checkA11y(page, '#storybook-root', {
       detailedReport: true,
       detailedReportOptions: {
         html: true,

.stylelintrc.json

@@ -1,7 +1,6 @@
 {
   "extends": "stylelint-config-standard-scss",
   "rules": {
-    "max-line-length": 170,
     "selector-class-pattern": null,
     "no-descending-specificity": null
   }

babel.config.json

@@ -0,0 +1,5 @@
+{
+  "sourceType": "unambiguous",
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
+  "plugins": []
+}

eslint.config.js

@@ -0,0 +1,8 @@
+const eslintConfigLove = require('eslint-config-love');
+
+module.exports = [
+    {
+      ...eslintConfigLove,
+      files: [ 'src/**/*.ts' ]
+    }
+  ]

jest.config.js

@@ -0,0 +1,18 @@
+
+
+/** @type {import('jest').Config} */
+const config = {
+  clearMocks: true,
+  testEnvironment: "jsdom",
+  testMatch: [
+    "**/components/*/template.test.ts",
+    "**/components/*/*unit.test.ts",
+    "!package/**",
+  ],
+  transform: {
+    "^.+\\.ts?$": "babel-jest",
+  },
+  modulePathIgnorePatterns: ["<rootDir>/package"],
+};
+
+module.exports = config;