chore(deps): update all dependencies (major)

.github/workflows/publish-docs.yml

@@ -14,7 +14,7 @@ jobs:
         uses: actions/checkout@v4
       - name: Setup Pages
         id: pages
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@v5
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:

Dockerfile

@@ -2,7 +2,7 @@
 
 # Build stage: Install yarn dependencies
 # ===
-FROM node:20 AS yarn-dependencies
+FROM node:22 AS yarn-dependencies
 WORKDIR /srv
 ADD package.json .
 ADD yarn.lock .
@@ -19,7 +19,7 @@ RUN yarn run build-docs
 
 # Build the production image
 # ===
-FROM ubuntu:jammy
+FROM ubuntu:noble
 
 # Set up environment
 ENV LANG C.UTF-8

package.json

@@ -39,25 +39,25 @@
     "@storybook/react": "7.6.7",
     "@storybook/react-webpack5": "7.6.7",
     "@testing-library/cypress": "10.0.1",
-    "@testing-library/dom": "9.3.3",
+    "@testing-library/dom": "10.1.0",
     "@testing-library/jest-dom": "6.2.1",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "14.5.2",
     "@types/lodash.isequal": "4",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
-    "@typescript-eslint/parser": "6.19.1",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-plugin-typescript-to-proptypes": "2.1.0",
     "concurrently": "8.2.2",
-    "css-loader": "6.8.1",
+    "css-loader": "7.1.1",
     "cypress": "13.6.3",
     "deepmerge": "4.3.1",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-cypress": "2.15.1",
+    "eslint-plugin-cypress": "3.2.0",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
@@ -77,7 +77,7 @@
     "sass-loader": "14.0.0",
     "semantic-release": "23.0.0",
     "storybook": "7.6.7",
-    "style-loader": "3.3.3",
+    "style-loader": "4.0.0",
     "stylelint": "16.2.0",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "14.0.0",

src/components/Button/Button.test.tsx

@@ -12,7 +12,7 @@ describe("Button ", () => {
 
   it("renders as a link", () => {
     render(
-      <Button element="a" href="">
+      <Button element="a" href="http://example.com">
         Test content
       </Button>
     );
@@ -28,7 +28,7 @@ describe("Button ", () => {
 
   it("can handle anchor click events", async () => {
     const onClick = jest.fn();
-    render(<Button element="a" href="" onClick={onClick} />);
+    render(<Button element="a" href="http://example.com" onClick={onClick} />);
     await userEvent.click(screen.getByRole("link"));
     expect(onClick).toHaveBeenCalled();
   });
@@ -54,7 +54,14 @@ describe("Button ", () => {
 
   it("correctly disables a link", async () => {
     const onClick = jest.fn();
-    render(<Button element="a" disabled={true} href="" onClick={onClick} />);
+    render(
+      <Button
+        element="a"
+        disabled={true}
+        href="http://example.com"
+        onClick={onClick}
+      />
+    );
     const button = screen.getByRole("link");
     expect(button).toHaveClass("is-disabled");
     expect(button).not.toBeDisabled();
@@ -65,7 +72,14 @@ describe("Button ", () => {
 
   it("prevents default when disabling a link", async () => {
     const onClick = jest.fn();
-    render(<Button element="a" disabled={true} href="" onClick={onClick} />);
+    render(
+      <Button
+        element="a"
+        disabled={true}
+        href="http://example.com"
+        onClick={onClick}
+      />
+    );
     const button = screen.getByRole("link");
     const clickEvent = createEvent.click(button);
     fireEvent(button, clickEvent);

src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`Button  renders 1`] = `
 exports[`Button  renders as a link 1`] = `
 <a
   class="p-button"
-  href=""
+  href="http://example.com"
 >
   Test content
 </a>

src/components/EmptyState/EmptyState.test.tsx

@@ -15,7 +15,7 @@ describe("EmptyState ", () => {
     render(
       <EmptyState
         title="Test title"
-        image={<img alt="" src="path/to/image" />}
+        image={<img alt="pic" src="path/to/image" />}
       />
     );
     expect(screen.getByRole("img")).toHaveAttribute("src", "path/to/image");

src/components/Navigation/Navigation.tsx

@@ -95,7 +95,9 @@ const generateLogo = (logo: Props["logo"], generateLink: GenerateLink) => {
     const content = (
       <>
         <div className="p-navigation__logo-tag">
-          {icon ?? <img className="p-navigation__logo-icon" src={src} alt="" />}
+          {icon ?? (
+            <img className="p-navigation__logo-icon" src={src} alt="Logo" />
+          )}
         </div>
         <span className="p-navigation__logo-title">{title}</span>
       </>