@eeacms/volto-eea-design-system 1.40.3 → 1.50.1

package/.eslintrc.js

@@ -4,37 +4,43 @@ const path = require('path');
 const projectRootPath = fs.existsSync('./project')
   ? fs.realpathSync('./project')
   : fs.realpathSync(__dirname + '/../../../');
-const jsConfig = require(
-  path.join(projectRootPath, 'jsconfig.json'),
-).compilerOptions;
-
-const pathsConfig = jsConfig.paths;
 
 let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
+let configFile;
+if (fs.existsSync(`${projectRootPath}/tsconfig.json`))
+  configFile = `${projectRootPath}/tsconfig.json`;
+else if (fs.existsSync(`${projectRootPath}/jsconfig.json`))
+  configFile = `${projectRootPath}/jsconfig.json`;
+
+if (configFile) {
+  const jsConfig = require(configFile).compilerOptions;
+  const pathsConfig = jsConfig.paths;
+  if (pathsConfig['@plone/volto'])
+    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
+}
 
-Object.keys(pathsConfig).forEach((pkg) => {
-  if (pkg === '@plone/volto') {
-    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
-  }
-});
-const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
-const reg = new AddonConfigurationRegistry(projectRootPath);
+const { AddonRegistry } = require('@plone/registry/addon-registry');
+const { registry } = AddonRegistry.init(projectRootPath);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map((o) => [
+const addonAliases = Object.keys(registry.packages).map((o) => [
   o,
-  reg.packages[o].modulePath,
+  registry.packages[o].modulePath,
 ]);
 
-module.exports = {
-  extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
+const addonExtenders = registry.getEslintExtenders().map((m) => require(m));
+
+const defaultConfig = {
+  extends: `${voltoPath}/.eslintrc`,
   settings: {
     'import/resolver': {
       alias: {
         map: [
           ['@plone/volto', '@plone/volto/src'],
+          ['@plone/volto-slate', '@plone/volto-slate/src'],
           ...addonAliases,
           ['@package', `${__dirname}/src`],
+          ['@root', `${__dirname}/src`],
           ['~', `${__dirname}/src`],
         ],
         extensions: ['.js', '.jsx', '.json'],
@@ -45,6 +51,14 @@ module.exports = {
     },
   },
   rules: {
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
     'react/jsx-no-target-blank': 'off',
   },
 };
+
+const config = addonExtenders.reduce(
+  (acc, extender) => extender.modify(acc),
+  defaultConfig,
+);
+
+module.exports = config;

package/CHANGELOG.md

@@ -4,6 +4,32 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.50.1](https://github.com/eea/volto-eea-design-system/compare/1.50.0...1.50.1) - 7 April 2026
+
+#### :bug: Bug Fixes
+
+- fix: megamenu breaking columns - refs #302209 [Teodor Voicu - [`5dd05ba`](https://github.com/eea/volto-eea-design-system/commit/5dd05ba4925e96c37ed0801df5376185c821d0ed)]
+- fix: make test [Alin V. (Claudiu) - [`98dc41b`](https://github.com/eea/volto-eea-design-system/commit/98dc41b32de9bab9680105e4549e7b68c2116072)]
+
+#### :house: Internal changes
+
+- chore: Volto 18 eslint update - refs #301881 [Teodor Voicu - [`0446edb`](https://github.com/eea/volto-eea-design-system/commit/0446edbb5552608f7658f61fbe4a5d58f71b62b4)]
+
+### [1.50.0](https://github.com/eea/volto-eea-design-system/compare/1.40.3...1.50.0) - 25 March 2026
+
+#### :rocket: New Features
+
+- feat: Volto 18 support - refs #287700 [Alin Voinea - [`6d4f49c`](https://github.com/eea/volto-eea-design-system/commit/6d4f49c3c2a2bfae2ff1b01df6c9e1ec3b13efc5)]
+- feat(Header): replace search icon with ai variant [Miu Razvan - [`af211a9`](https://github.com/eea/volto-eea-design-system/commit/af211a933bb5499036b7be24b75a2949fa791cea)]
+
+#### :house: Internal changes
+
+- chore: [JENKINSFILE] add package version in sonarqube [valentinab25 - [`a2500ee`](https://github.com/eea/volto-eea-design-system/commit/a2500ee91c3d926183403b7e55ef717f697eb736)]
+- chore: [JENKINSFILE] use sonarqube branches [EEA Jenkins - [`79058be`](https://github.com/eea/volto-eea-design-system/commit/79058be6ad228970127ee388bbc78ad69b92465b)]
+
+#### :hammer_and_wrench: Others
+
+- tests: Fix Sonar Qube tags - refs #297339 [Alin Voinea - [`248553d`](https://github.com/eea/volto-eea-design-system/commit/248553d47d053514f512178793f64d382711c57e)]
 ### [1.40.3](https://github.com/eea/volto-eea-design-system/compare/1.40.2...1.40.3) - 11 February 2026
 
 #### :bug: Bug Fixes

package/DEVELOP.md

@@ -26,21 +26,20 @@
 
 ### Or add @eeacms/volto-eea-design-system to your Volto project
 
-Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/)
+Before starting make sure your development environment is properly set. See the official Plone documentation for [creating a project with Cookieplone](https://6.docs.plone.org/install/create-project-cookieplone.html) and [installing an add-on in development mode in Volto 18 and 19](https://6.docs.plone.org/volto/development/add-ons/install-an-add-on-dev-18.html).
 
-1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
+For new Volto 18+ projects, use Cookieplone. It includes `mrs-developer` by default.
 
-        npm install -g yo @plone/generator-volto mrs-developer
+1.  Create a new Volto project with Cookieplone
 
-1.  Create new volto app
-
-        yo @plone/volto my-volto-project --addon @eeacms/volto-eea-design-system --skip-install
-        cd my-volto-project
+        uvx cookieplone project
+        cd project-title
 
 1.  Add the following to `mrs.developer.json`:
 
         {
             "volto-eea-design-system": {
+                "output": "packages",
                 "url": "https://github.com/eea/volto-eea-design-system.git",
                 "package": "@eeacms/volto-eea-design-system",
                 "branch": "develop",
@@ -48,28 +47,31 @@ Before starting make sure your development environment is properly set. See [Vol
             }
         }
 
-1.  Install
+1.  Add `@eeacms/volto-eea-design-system` to the `addons` key in your project `volto.config.js`
+
+1.  Install or refresh the project setup
 
-        make develop
-        yarn
+        make install
 
-1.  Start backend
+1.  Start backend in one terminal
 
-        docker run --pull always -it --rm --name plone -p 8080:8080 -e SITE=Plone plone/plone-backend
+        make backend-start
 
-    ...wait for backend to setup and start - `Ready to handle requests`:
+    ...wait for backend to setup and start, ending with `Ready to handle requests`
 
     ...you can also check http://localhost:8080/Plone
 
-1.  Start frontend
+1.  Start frontend in a second terminal
 
-        yarn start
+        make frontend-start
 
 1.  Go to http://localhost:3000
 
 1.  Happy hacking!
 
-        cd src/addons/volto-eea-design-system/
+        cd packages/volto-eea-design-system
+
+For legacy Volto 17 projects, keep using the yarn-based workflow from the Volto 17 documentation.
 
 ## Cypress
 
@@ -81,7 +83,7 @@ project where you added `volto-eea-design-system` to `mrs.developer.json`
 Go to:
 
   ```BASH
-  cd src/addons/volto-eea-design-system/
+  cd packages/volto-eea-design-system/
   ```
 
 Start:

package/README.md

@@ -3,16 +3,16 @@
 [![Releases](https://img.shields.io/github/v/release/eea/volto-eea-design-system)](https://github.com/eea/volto-eea-design-system/releases)
 
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-eea-design-system%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-eea-design-system/job/master/display/redirect)
-[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system-master&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system-master)
-[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system-master&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system-master)
-[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system-master&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system-master)
-[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system-master&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system-master)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system)
 
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-eea-design-system%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-eea-design-system/job/develop/display/redirect)
-[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system-develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system-develop)
-[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system-develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system-develop)
-[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system-develop)
-[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system-develop)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system&branch=develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system&branch=develop)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system&branch=develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system&branch=develop)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system&branch=develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system&branch=develop)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-eea-design-system&branch=develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-eea-design-system&branch=develop)
 
 
 [Volto](https://github.com/plone/volto) EEA Design System
@@ -52,6 +52,11 @@ See [Storybook](https://eea.github.io/eea-storybook/).
 
 Go to http://localhost:3000
 
+`make start` now defaults to Volto 18. To run the same setup against Volto 17, use:
+
+      VOLTO_VERSION=17 make
+      VOLTO_VERSION=17 make start
+
 ### Add volto-eea-design-system to your Volto project
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
@@ -65,30 +70,39 @@ Go to http://localhost:3000
 * If you already have a volto project, just update `package.json`:
 
    ```JSON
-   "addons": [
-       "@eeacms/volto-eea-design-system"
-   ],
-
    "dependencies": {
        "@eeacms/volto-eea-design-system": "*"
    }
    ```
 
-* If not, create one:
+   and `volto.config.js`:
+
+   ```JavaScript
+   const addons = ['@eeacms/volto-eea-design-system'];
+   ```
+
+* If not, create one with Cookieplone, as recommended by the official Plone documentation for Volto 18+:
 
    ```
-   npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-eea-design-system
-   cd my-volto-project
+   uvx cookieplone project
+   cd project-title
    ```
 
-1. Install new add-ons and restart Volto:
+1. Install or update dependencies, then start the project:
 
    ```
-   yarn
-   yarn start
+   make install
    ```
 
+   For a Cookieplone project, start the backend and frontend in separate terminals:
+
+   ```
+   make backend-start
+   make frontend-start
+   ```
+
+   For a legacy Volto 17 project, install the package with `yarn` and restart the frontend as usual.
+
 1. Go to http://localhost:3000
 
 1. Happy editing!

package/docker-compose.yml

@@ -15,7 +15,7 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+        VOLTO_VERSION: ${VOLTO_VERSION:-18-yarn}
     ports:
     - "3000:3000"
     - "3001:3001"

package/jest-addon.config.js

@@ -19,6 +19,12 @@ const path = require('path');
 const fs = require('fs');
 const fg = require('fast-glob');
 
+const voltoSlatePath = fs.existsSync(
+  path.join(__dirname, '../../../node_modules/@plone/volto-slate/src'),
+)
+  ? '<rootDir>/node_modules/@plone/volto-slate/src'
+  : '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src';
+
 // Get the addon name from the current file path
 const pathParts = __filename.split(path.sep);
 const addonsIdx = pathParts.lastIndexOf('addons');
@@ -424,10 +430,8 @@ module.exports = {
     '@eeacms/countup': '<rootDir>/node_modules/@eeacms/countup/lib',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
     '@eeacms/(.*?)$': '<rootDir>/node_modules/@eeacms/$1/src',
-    '@plone/volto-slate$':
-      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
-    '@plone/volto-slate/(.*)$':
-      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src/$1',
+    '@plone/volto-slate$': voltoSlatePath,
+    '@plone/volto-slate/(.*)$': `${voltoSlatePath}/$1`,
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.40.3",
+  "version": "1.50.1",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/helpers/useFirstVisited.js

@@ -20,10 +20,12 @@ function useFirstVisited(ref, rootMargin = '0px') {
       observer.observe(ref.current);
     }
     return () => {
-      if (ref?.current) {
+      if (ref?.current && typeof observer.unobserve === 'function') {
         observer.unobserve(ref.current);
       }
-      observer.disconnect();
+      if (typeof observer.disconnect === 'function') {
+        observer.disconnect();
+      }
     };
   }, [ref, rootMargin, intersected]);
   return intersected;

package/src/ui/Accordion/Accordion.stories.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { Default } from './Accordion.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Default component', () => {
   it('renders correctly and fires keyDown Enter events', () => {

package/src/ui/Banner/Banner.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import Banner from './Banner';
 import { sharePage, getImageSource } from './Banner';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Banner', () => {
   it('renders without errors', () => {

package/src/ui/CallToAction/CallToAction.stories.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Default, Inverted, Link, Labeled } from './CallToAction.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Link', () => {
   it('renders correctly', () => {

package/src/ui/Card/Card.stories.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import {
   TeaserCardGrid,
   CarouselCards,

package/src/ui/Card/IconCard/IconCard.stories.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { GridIconCard, Default } from './IconCard.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('GridIconCard component', () => {
   it('renders correctly', () => {

package/src/ui/Card/RelatedContent/RelatedContent.stories.test.jsx

@@ -5,7 +5,7 @@ import {
   DefaultOdd,
   DefaultEven,
 } from './RelatedContent.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('RelatedContentInTab component', () => {
   it('renders corectly', () => {

package/src/ui/Confirm/Confirm.stories.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { Default } from './Confirm.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Default component', () => {
   it('renders correctly', () => {

package/src/ui/ContextNavigation/ContextNavigation.stories.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Default } from './ContextNavigation.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 const sidenavItems = [
   {

package/src/ui/Divider/Divider.stories.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { DividerWithContent, Default } from './Divider.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('DividerWithContent component', () => {
   it('renders correctly', () => {

package/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { Default } from './DownloadLabeledIcon.stories';
 import DownloadLabeledIcon from './DownloadLabeledIcon';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Default component', () => {
   it('renders correctly', () => {

package/src/ui/Footer/Description.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Description from './Description';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Description component', () => {
   it('renders corectly with children', () => {

package/src/ui/Footer/Footer.stories.test.js

@@ -5,7 +5,7 @@ import { Router } from 'react-router-dom';
 import { Default } from './Footer.stories';
 import { Provider } from 'react-redux';
 import Footer from './Footer';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import configureStore from 'redux-mock-store';
 
 describe('Default', () => {

package/src/ui/Footer/FooterActions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Grid } from 'semantic-ui-react';
-import { isInternalURL } from '@plone/volto/helpers';
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
 const FooterActions = (props) => {
   if (props.children) {

package/src/ui/Footer/FooterSitesButton.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { UniversalLink } from '@plone/volto/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 
 const SitesButton = (props) => {
   if (props.children) {

package/src/ui/Footer/Social.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Social from './Social';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Social component', () => {
   it('renders corectly with children', () => {

package/src/ui/Footer/SubFooter.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Footer from './Footer';
+import Contact from './Contact';
 
 import { Grid, Image } from 'semantic-ui-react';
 
@@ -39,7 +39,7 @@ const SubFooter = (props) => {
         {props.contacts?.length > 0 && (
           <Grid.Column mobile={12} tablet={12} computer={4}>
             <div className="item">
-              <Footer.Contact contacts={props.contacts} />
+              <Contact contacts={props.contacts} />
             </div>
           </Grid.Column>
         )}

package/src/ui/Form/Button/Button.stories.test.jsx

@@ -8,7 +8,7 @@ import {
   Primary,
   Default,
 } from './Button.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Text component', () => {
   it('renders a button with label', () => {

package/src/ui/Form/Checkbox.stories.test.js

@@ -5,7 +5,7 @@ import {
   optional as Optional,
   invalid as Invalid,
 } from './Checkbox.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Single', () => {
   it('renders correctly', () => {

package/src/ui/Form/Dropdown.stories.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { ErrorDropdown, Default } from './Dropdown.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('ErrorDropdown component', () => {
   it('renders correctly', () => {

package/src/ui/Form/Radio.stories.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { Default, invalid as Invalid, BinaryRadio } from './Radio.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('BinaryRadio component', () => {
   it('renders corectly', () => {

package/src/ui/Form/Textarea.stories.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { ErrorTextArea, LabeledTextArea, Default } from './Textarea.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('ErrorTextArea component', () => {
   it('renders correctly', () => {

package/src/ui/Form/input.stories.test.js

@@ -7,7 +7,7 @@ import {
   LoadingInput,
   ErrorInput,
 } from './Input.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('ErrorInput component', () => {
   it('renders corectly', () => {

package/src/ui/Grid/ComponentGrid.stories.js

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import times from 'lodash/times';
 import React from 'react';
 import { Grid, Container } from 'semantic-ui-react';
 
@@ -9,7 +9,7 @@ export default {
 };
 
 const getColumns = (number, text) => {
-  const columns = _.times(number, (i) => (
+  const columns = times(number, (i) => (
     <Grid.Column key={i}>
       <div className="col-example">{text}</div>
     </Grid.Column>

package/src/ui/Grid/ComponentGrid.stories.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { GridExamples, Basic12 } from './ComponentGrid.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('GridExamples component', () => {
   it('renders corectly', () => {

package/src/ui/Header/Header.jsx

@@ -9,15 +9,15 @@ import cx from 'classnames';
 import { Container, Image, Menu, Grid, Dropdown } from 'semantic-ui-react'; // Dropdown,
 
 import closeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/close-line.svg';
-import searchIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/search-line.svg';
+import searchIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/ai-search.svg';
 import burgerIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/menu-line.svg';
 
 import HeaderSearchPopUp from './HeaderSearchPopUp';
 import HeaderMenuPopUp from './HeaderMenuPopUp';
 import { findBestMatchingMenuItem, isMenuItemActive } from './utils';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
-import { isInternalURL } from '@plone/volto/helpers';
+import omit from 'lodash/omit';
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 
 Header.propTypes = {
@@ -390,7 +390,7 @@ const BurgerAction = React.forwardRef((props, ref) => (
   <button
     ref={ref}
     className={`burger-action ${props.className}`}
-    {..._.omit(props, ['onClick', 'children', 'className', 'ref'])}
+    {...omit(props, ['onClick', 'children', 'className', 'ref'])}
     onClick={props.onClick}
   >
     {props.children}

package/src/ui/Header/Header.stories.test.js

@@ -3,7 +3,7 @@ import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { render, fireEvent, act } from '@testing-library/react';
 import { Default } from './Header.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 global.ResizeObserver = require('resize-observer-polyfill');
 

package/src/ui/Header/Header.test.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 // Mock subcomponents that pull in ESM helpers not transformed by Jest here
 jest.doMock('./HeaderSearchPopUp', () => () => null);

package/src/ui/Header/HeaderMenuPopUp.js

@@ -8,7 +8,8 @@ import {
   Transition,
 } from 'semantic-ui-react';
 
-import { cloneDeep, kebabCase } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
+import kebabCase from 'lodash/kebabCase';
 
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 import { numbersToMenuItemColumns } from '../Header/utils';

package/src/ui/Header/HeaderMenuPopUp.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import HeaderMenuPopUp, { StandardMegaMenuGrid } from './HeaderMenuPopUp';

package/src/ui/Header/HeaderSearchPopUp.test.js

@@ -3,7 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import HeaderSearchPopUp from './HeaderSearchPopUp';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('HeaderSearchPopUp', () => {
   let history;

package/src/ui/Hero/Hero.stories.jsx

@@ -120,8 +120,7 @@ Default.args = {
   fullHeight: true,
   image: true,
   quoted: true,
-  text:
-    'Forests are a key part of the solution to combat climate change and biodiversity loss.',
+  text: 'Forests are a key part of the solution to combat climate change and biodiversity loss.',
   textVariant: 'tertiary',
   textAlign: 'left',
   metaAlign: 'left',
@@ -158,8 +157,7 @@ Playground.args = {
   fullHeight: true,
   image: true,
   quoted: false,
-  text:
-    'Forests are a key part of the solution to combat climate change and biodiversity loss.',
+  text: 'Forests are a key part of the solution to combat climate change and biodiversity loss.',
   textVariant: 'tertiary',
   textAlign: 'left',
   metaAlign: 'left',

package/src/ui/Hero/Hero.stories.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Playground, Default } from './Hero.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Playground component', () => {
   it('renders correctly', () => {

package/src/ui/InpageNavigation/InpageNavigation.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Container, Button, Icon } from 'semantic-ui-react';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 
 class InpageNavigation extends Component {
   constructor(props) {

package/src/ui/InpageNavigation/InpageNavigation.stories.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Default } from './InpageNavigation.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Default component', () => {
   it('renders correctly', () => {

package/src/ui/InpageNavigation/InpageNavigation.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import InpageNavigation from './InpageNavigation';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('InpageNavigation', () => {
   let scrollToMock;

package/src/ui/Item/Item.stories.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { DefaultGroup, DefaultItem, Default } from './Item.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('DefaultGroup Component', () => {
   it('renders correctly', () => {

package/src/ui/Item/ItemGroupWithIcons.stories.test.js

@@ -5,7 +5,7 @@ import {
   DefaultGroup,
   DefaultItem,
 } from './ItemGroupWithIcons.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('FlexGroup component', () => {
   it('renders correctly', () => {

package/src/ui/Label/Label.stories.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Default, Basic, Corner, Ribbon } from './Label.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Basic component', () => {
   it('renders correctly', () => {

package/src/ui/LabeledIconGroup/LabeledIconGroup.stories.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Default } from './LabeledIconGroup.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Default component', () => {
   it('renders corectly', () => {

package/src/ui/LanguageLabeledIcon/LanguangeLabeledIcon.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import LanguageLabeledIcon from './LanguageLabeledIcon';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 jest.mock('semantic-ui-react', () => {
   return {

package/src/ui/Loader/Loader.stories.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { FullPageLoader, Default } from './Loader.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('FullPageLoader component', () => {
   it('renders corectly', () => {

package/src/ui/Logo/Logo.stories.test.jsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { Logo } from './Logo.stories';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('FluidGrid component', () => {
   let history;

package/src/ui/Media/Image.stories.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Playground, Link, Default } from './Image.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Playground component', () => {
   it('renders correctly', () => {

package/src/ui/Message/Message.stories.test.js

@@ -7,7 +7,7 @@ import {
   Success,
   Default,
 } from './Message.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Info component', () => {
   it('renders a Message component', () => {

package/src/ui/Modal/Modal.stories.test.js

@@ -1,7 +1,7 @@
 import { render, fireEvent } from '@testing-library/react';
 import { Default } from './Modal.stories';
 import { Button } from 'semantic-ui-react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Default component', () => {
   it('renders corectly', () => {

package/src/ui/Popup/Popup.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import Popup from './Popup';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 jest.mock('@popperjs/core', () => {
   const originalModule = jest.requireActual('@popperjs/core');

package/src/ui/Progress/Progress.stories.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Default, ProgressWithValue, CustomColor } from './Progress.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('CustomColor component', () => {
   it('renders correctly', () => {

package/src/ui/Quote/Testimonial/Testimonial.stories.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Inline } from './Testimonial.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Inline component', () => {
   it('renders corectly', () => {

package/src/ui/Statistic/Statistic.stories.js

@@ -227,8 +227,12 @@ const CustomTemplate = (args) => (
     <Container>
       <Statistic.Group {...args}>
         {args.elements &&
-          args.elements.map((element) => (
-            <a href={element.href} className="ui small statistic">
+          args.elements.map((element, index) => (
+            <a
+              key={element.href ?? `${element.label}-${index}`}
+              href={element.href}
+              className="ui small statistic"
+            >
               <div className={`value ${args.valueVariation}`}>
                 {element.value}
               </div>
@@ -429,8 +433,12 @@ const CountUpStatistics = (args) => (
     <Container>
       <Statistic.Group id="counter" {...args}>
         {args.elements &&
-          args.elements.map((element) => (
-            <a href={element.href} className="ui small statistic">
+          args.elements.map((element, index) => (
+            <a
+              key={element.href ?? `${element.label}-${index}`}
+              href={element.href}
+              className="ui small statistic"
+            >
               <div className={`value ${args.valueVariation}`}>
                 <CountUp end={element.value} isCounting={true} />
               </div>

package/src/ui/Statistic/Statistic.stories.test.js

@@ -7,7 +7,7 @@ import {
   Animation,
   AnimationGroup,
 } from './Statistic.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('AnimationGroup component', () => {
   let observe;

package/src/ui/Tab/Tab.stories.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Default } from './Tab.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('It renderes corectly', () => {
   it('renders corectly', () => {

package/src/ui/Table/Table.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table, Container } from 'semantic-ui-react';
-import _ from 'lodash';
+import sortBy from 'lodash/sortBy';
 
 export default {
   title: 'Components/Table',
@@ -224,7 +224,7 @@ function reducer(state, action) {
 
       return {
         column: action.column,
-        data: _.sortBy(state.data, [action.column]),
+        data: sortBy(state.data, [action.column]),
         direction: 'ascending',
       };
     default:

package/src/ui/Table/Table.stories.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { Default, Sortable, Responsive } from './Table.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('Responsive component', () => {
   it('renders corectly', () => {

package/src/ui/Tag/Tag.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon } from 'semantic-ui-react';
-import { ConditionalLink } from '@plone/volto/components';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import { getFieldURL } from '@plone/volto/helpers/Url/Url';
 
 function Tag({ href, children }) {

package/src/ui/Timeline/Timeline.stories.test.jsx

@@ -6,7 +6,7 @@ import {
   Multiple,
   MultipleReversed,
 } from './Timeline.stories';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('MultipleReversed component', () => {
   it('renders corectly', () => {

package/src/ui/Video/Video.jsx

@@ -38,7 +38,7 @@ Video.Embed = ({
 
 Video.Track = ({ tracks }) =>
   tracks.map((track, index) => {
-    return <track {...track} />;
+    return <track key={track.src ?? track.srcLang ?? index} {...track} />;
   });
 
 export default Video;

package/theme/themes/eea/assets/images/Header/ai-search.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="20px" viewBox="0 -960 960 960" width="20px">
+  <path
+    d="M740-560q-1 0-8-6-16-61-60.5-105.5T566-732q-2-1-6-8 0-2 6-8 61-16 105.5-60.5T732-914q1-2 8-6 2 0 8 6 17 61 61 105.5T914-748q2 0 6 8 0 1-6 8-61 16-105.5 60.5T748-566q0 2-8 6Zm44 440L532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q29 0 57 6t53 18l-10 87q-22-15-47-23t-53-8q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400q66 0 115.5-42.5T557-555l72 50q-7 22-17.5 41T588-428l252 252-56 56Z"
+    fill="rgba(255,255,255,1)">
+  </path>
+</svg>

package/theme/themes/eea/extras/header.less

@@ -771,6 +771,7 @@
   padding: @megaMenuListItemPadding;
   font-size: @megaMenuListItemFontSize;
   font-weight: @megaMenuListItemFontWeight;
+  break-inside: avoid;
 }
 
 #mega-menu a.item {