KER-571 React 19

.nvmrc

@@ -1 +1 @@
-v24.15.0
+v24.17.0

README.md

@@ -8,7 +8,7 @@ supported by Kerrokantasi API.
 
 ### Prerequisites
 
-- Node v22 LTS (`nvm use`)
+- Node v24 LTS (`nvm use`)
 - pnpm
 - Docker
 

assets/sass/kerrokantasi/_hearing-page.scss

@@ -88,6 +88,26 @@
     @media (min-width: $screen-md-min) {
       justify-content: flex-end;
     }
+
+    .twitter-share-button {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 0 8px;
+      height: 20px;
+      background-color: #000;
+      color: #fff;
+      font-size: 11px;
+      font-weight: bold;
+      border-radius: 9999px;
+      text-decoration: none;
+
+      &:hover {
+        background-color: #333;
+        color: #fff;
+        text-decoration: none;
+      }
+    }
   }
 
   .main-labels {
@@ -343,12 +363,6 @@
   margin-bottom: $line-height-computed * 2;
 }
 
-.image-lightbox {
-  .ril-toolbar-right {
-    padding: 8px 10px 8px 0;
-  }
-}
-
 .image-caption {
   width: 100%;
   padding: 10px 15px;

assets/sass/kerrokantasi/kerrokantasi.scss

@@ -28,7 +28,6 @@
 @import "hearing-languages";
 @import "section-attachment-editor";
 @import "hearing-subsections";
-@import "browser-warning";
 @import "bootstrap-switch";
 @import "user-hearings";
 @import "user-profile";

cities/helsinki/assets/sass/app.scss

@@ -1,5 +1,21 @@
 ///// Helsinki brand variables
 @import 'hel-bootstrap-3/src/sass/helsinki-variables';
+// HDS 5 renamed the font family from "HelsinkiGrotesk" to "HelsinkiGroteskPro".
+// Override the hel-bootstrap-3 default so Bootstrap-based elements also use the new name.
+$hel-grotesk:
+  'HelsinkiGroteskPro',
+  Arial,
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  'Roboto',
+  'Oxygen',
+  'Ubuntu',
+  'Cantarell',
+  'Fira Sans',
+  'Droid Sans',
+  'Helvetica Neue',
+  sans-serif;
 ///// Application specific theme variables
 @import 'hel/variables';
 ///// Helsinki Bootstrap 3 theme variables
@@ -14,6 +30,9 @@
 ///// Kerrokantasi Base styles
 @import '../../../../assets/sass/kerrokantasi/kerrokantasi';
 
+///// HDS font assets (HelsinkiGroteskPro @font-face) — must precede component styles
+@import 'hds-core/lib/fonts/fonts.min.css';
+
 ///// HDS React base styles
 @import 'hds-core/lib/base.min.css';
 

e2e/tests/pages/hearings-list.spec.js

@@ -24,7 +24,7 @@ test.describe('Hearing list page', () => {
   });
 
   test('should perform a search', async ({ page }) => {
-    const searchTextInput = page.getByRole('combobox', {
+    const searchTextInput = page.getByRole('searchbox', {
       name: 'Etsi otsikoista',
     });
 

e2e/tests/pages/map.spec.js

@@ -11,9 +11,9 @@ test.describe('Map Page', () => {
     ).toBeVisible();
   });
 
-  test('should display "Etsi otsikoista" combobox', async ({ page }) => {
+  test('should display "Etsi otsikoista" searchbox', async ({ page }) => {
     await expect(
-      page.getByRole('combobox', { name: 'Etsi otsikoista' })
+      page.getByRole('searchbox', { name: 'Etsi otsikoista' })
     ).toBeVisible();
   });
 
@@ -48,7 +48,7 @@ test.describe('Map Page', () => {
       .toBeVisible();
     await expect.soft(page.getByText('Endast öppna visas')).toBeVisible();
     await expect
-      .soft(page.getByRole('combobox', { name: 'Sök bland rubrikerna' }))
+      .soft(page.getByRole('searchbox', { name: 'Sök bland rubrikerna' }))
       .toBeVisible();
   });
 
@@ -59,7 +59,7 @@ test.describe('Map Page', () => {
       .toBeVisible();
     await expect.soft(page.getByText('Show only open')).toBeVisible();
     await expect
-      .soft(page.getByRole('combobox', { name: 'Search from titles' }))
+      .soft(page.getByRole('searchbox', { name: 'Search from titles' }))
       .toBeVisible();
   });
 });

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "packageManager": "pnpm@11.1.3",
   "engines": {
-    "node": ">=24.15.0",
+    "node": ">=24.17.0",
     "pnpm": ">=11.1.3"
   },
   "scripts": {
@@ -14,10 +14,9 @@
     "start:e2e": "if test $NODE_MAX_MEMORY_MIB ; then node --max-old-space-size=$NODE_MAX_MEMORY_MIB pnpm start ; else pnpm start ; fi",
     "build": "vite build",
     "serve": "vite preview",
-    "fetch-plugins": "node deploy/fetch_plugins.js",
+    "fetch-plugins": "node scripts/fetch_plugins.js",
     "lint": "eslint \"src/**/*.{js,jsx}\"",
     "lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix",
-    "lint:complexity": "eslint -c complexity.eslintrc.js --no-eslintrc src",
     "test": "NODE_ENV=test pnpm update-runtime-env && vitest",
     "test:cov": "NODE_ENV=test pnpm update-runtime-env && vitest run --coverage --watch=false",
     "test:coverage": "NODE_ENV=test pnpm update-runtime-env && vitest run --coverage --watch=false",
@@ -48,7 +47,7 @@
     "@draft-js-plugins/image": "^4.1.1",
     "@draft-js-plugins/resizeable": "^5.0.4",
     "@eslint/js": "^9.25.1",
-    "@formatjs/intl-relativetimeformat": "^11.2.14",
+    "@reduxjs/toolkit": "^2.12.0",
     "@sentry/react": "^9.22.0",
     "@typescript-eslint/eslint-plugin": "^8.57.1",
     "@typescript-eslint/parser": "^8.57.1",
@@ -75,16 +74,14 @@
     "font-awesome": "^4.7.0",
     "glob": "^10.5.0",
     "globals": "^16.0.0",
-    "hds-core": "^4.9.0",
-    "hds-design-tokens": "^4.9.0",
-    "hds-react": "^4.9.0",
+    "hds-core": "^6.0.2",
+    "hds-design-tokens": "^6.0.2",
+    "hds-react": "^6.0.2",
     "hel-bootstrap-3": "1.0.0-beta.4",
     "history": "^5.3.0",
     "html-react-parser": "^5.2.14",
-    "i18next": "^25.2.0",
     "immutability-helper": "^3.1.1",
     "immutable": "^3.8.3",
-    "intl": "^1.2.5",
     "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.4",
     "lodash": "^4.17.23",
@@ -94,43 +91,31 @@
     "proj4leaflet": "^1.0.2",
     "prop-types": "^15.7.2",
     "qs": "^6.14.2",
-    "react": "^18.0.0",
-    "react-anchor-link-smooth-scroll": "^1.0.12",
-    "react-device-detect": "^2.2.3",
-    "react-dom": "^18.0.0",
-    "react-helmet": "^6.1.0",
-    "react-i18next": "^15.5.2",
-    "react-image-lightbox": "^5.1.1",
-    "react-intl": "^5.0.0",
-    "react-leaflet": "^4.2.1",
-    "react-leaflet-draw": "^0.20.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-helmet-async": "^3.0.0",
+    "react-intl": "^7.1.14",
+    "react-leaflet": "^5.0.0",
+    "react-leaflet-draw": "^0.21.0",
     "react-markdown": "^10.1.0",
-    "react-nl2br": "^1.0.4",
-    "react-redux": "^8.0.0",
-    "react-router-dom": "^6.30.3",
-    "react-router-hash-link": "^2.4.3",
-    "react-twitter-widgets": "^1.10.0",
-    "react-waypoint": "^9.0.3",
-    "redux": "^3.7.2",
-    "redux-actions": "^2.6.5",
-    "redux-thunk": "^3.1.0",
+    "react-redux": "^9.3.0",
+    "react-router-dom": "^7.17.0",
     "remark-gfm": "^4.0.0",
     "reselect": "^5.1.1",
     "sass": "^1.89.0",
-    "simple-git": "^3.36.0",
-    "updeep": "^1.2.0",
     "url-parse": "^1.5.9",
     "uuid": "^14.0.0",
     "vite": "^8.0.5",
     "vite-plugin-istanbul": "^7.0.0",
-    "vitest": "^4.1.2"
+    "vitest": "^4.1.2",
+    "yet-another-react-lightbox": "^3.32.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.60.0",
     "@testing-library/jest-dom": "^6.3.0",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.5.2",
     "@vitest/coverage-istanbul": "^4.1.2",
     "husky": "^8.0.3",
@@ -139,6 +124,7 @@
     "nyc": "^17.1.0",
     "prettier": "^3.8.1",
     "redux-mock-store": "^1.5.4",
+    "simple-git": "^3.36.0",
     "vitest-fetch-mock": "^0.4.5"
   },
   "snyk": true