@eeacms/volto-eea-design-system 1.50.2 → 1.60.0

package/CHANGELOG.md

@@ -4,6 +4,23 @@ 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.60.0](https://github.com/eea/volto-eea-design-system/compare/1.50.2...1.60.0) - 17 April 2026
+
+#### :house: Documentation changes
+
+- docs: Update README [Alin Voinea - [`06e6ce7`](https://github.com/eea/volto-eea-design-system/commit/06e6ce7553bb50dea0d000f990f19c568e658b9f)]
+
+#### :hammer_and_wrench: Others
+
+- update readme [Miu Razvan - [`268086f`](https://github.com/eea/volto-eea-design-system/commit/268086fa17f9f68283dc7528ddbcd71105b676da)]
+- Release 1.60.0 [Alin Voinea - [`c74e3ac`](https://github.com/eea/volto-eea-design-system/commit/c74e3acb79cce153067984a234401e3d16ac0b05)]
+- update version [Miu Razvan - [`5753c9f`](https://github.com/eea/volto-eea-design-system/commit/5753c9f98c80a8699889a55a3fe1abecf3853b77)]
+- fix tests [Miu Razvan - [`32b5e42`](https://github.com/eea/volto-eea-design-system/commit/32b5e42c6f458f7391f930165852700daa758790)]
+- fix tests [Miu Razvan - [`dca166a`](https://github.com/eea/volto-eea-design-system/commit/dca166aa44a9bc3c123a17e78333b850ef401fb6)]
+- fix tests [Miu Razvan - [`0e876ca`](https://github.com/eea/volto-eea-design-system/commit/0e876caf4e172b84dfbc30a16c58009ee4481d94)]
+- fix tests [Miu Razvan - [`86f657a`](https://github.com/eea/volto-eea-design-system/commit/86f657a70a357a412257e9d8cb63f9050ca718e4)]
+- Make use of eea_settings [Miu Razvan - [`78ab3c5`](https://github.com/eea/volto-eea-design-system/commit/78ab3c59a4a7232b09812b3967ddd2b93cdd7fad)]
+- Bump version + add upgrade step [Miu Razvan - [`a1dbbd5`](https://github.com/eea/volto-eea-design-system/commit/a1dbbd557f66174f05ce87ed21073aecefa1f507)]
 ### [1.50.2](https://github.com/eea/volto-eea-design-system/compare/1.50.1...1.50.2) - 9 April 2026
 
 #### :bug: Bug Fixes

package/README.md

@@ -25,6 +25,10 @@ This package provides the following features:
 2. A repository for the design system source files and mockups
 3. A website to showcase the design system
 
+## Upgrade
+
+- Version `^1.60.0` requires `^eea.volto.policy@12.0` to allow customizing the header search box.
+
 ### Try the design system website
 
 Checkout the docs found within the [website](https://github.com/eea/volto-eea-design-system/blob/develop/website/README.md) folder

package/package.json

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

package/src/ui/Header/Header.jsx

@@ -5,11 +5,13 @@
 
 import React from 'react'; // , { Component }
 import { useHistory } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 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/ai-search.svg';
+import searchSVG from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/search-line.svg';
+import aiSearchIcon 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';
@@ -159,6 +161,11 @@ const Main = ({
   const [burger, setBurger] = React.useState('');
   const searchInputRef = React.useRef(null);
   const [isClient, setIsClient] = React.useState();
+  const headerSettings = useSelector(
+    (state) => state.eeaSettings?.data?.header || {},
+  );
+
+  const searchIcon = headerSettings.useAISearchIcon ? aiSearchIcon : searchSVG;
 
   const itemsLayouts =
     menuItemsLayouts || config.settings?.menuItemsLayouts || {};

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

@@ -2,9 +2,15 @@ import React from 'react';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { render, fireEvent, act } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
 import { Default } from './Header.stories';
 import '@testing-library/jest-dom';
 
+const mockStore = createStore(() => ({
+  eeaSettings: { data: { header: {} } },
+}));
+
 global.ResizeObserver = require('resize-observer-polyfill');
 
 const history = createMemoryHistory();
@@ -129,9 +135,11 @@ describe('Default component', () => {
 
   it('renders the default with correct number of cards', () => {
     const { container, getByText } = render(
-      <Router history={history}>
-        <Default {...args} />
-      </Router>,
+      <Provider store={mockStore}>
+        <Router history={history}>
+          <Default {...args} />
+        </Router>
+      </Provider>,
     );
     const dropdown = container.querySelector('.official-union .content');
     fireEvent.click(dropdown);

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

@@ -4,8 +4,29 @@ import '@testing-library/jest-dom';
 
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
 import '@testing-library/jest-dom';
 
+const mockState = {
+  eeaSettings: {
+    data: {
+      header: {
+        useAISearchIcon: false,
+      },
+    },
+  },
+};
+
+const mockStore = {
+  getState: () => mockState,
+  subscribe: () => () => {},
+  dispatch: () => {},
+};
+
+const renderWithProvider = (component) => {
+  return render(<Provider store={mockStore}>{component}</Provider>);
+};
+
 // Mock subcomponents that pull in ESM helpers not transformed by Jest here
 jest.doMock('./HeaderSearchPopUp', () => () => null);
 jest.doMock('./HeaderMenuPopUp', () => () => null);
@@ -26,16 +47,16 @@ describe('Header component', () => {
   });
 
   it('renders without crashing', () => {
-    render(<Header />);
+    renderWithProvider(<Header />);
   });
 
   it('renders children correctly', () => {
-    render(<Header>Test Children</Header>);
+    renderWithProvider(<Header>Test Children</Header>);
     expect(screen.getByText('Test Children')).toBeInTheDocument();
   });
 
   it('renders without crashing', () => {
-    render(
+    renderWithProvider(
       <Header>
         <Header.TopHeader>
           <Header.TopItem>
@@ -83,7 +104,7 @@ describe('Header component', () => {
   });
 
   it('renders without crashing', () => {
-    render(
+    renderWithProvider(
       <Header>
         <Header.TopHeader>
           <Header.TopItem>
@@ -129,7 +150,7 @@ describe('Header component', () => {
   });
 
   it('renders without crashing', () => {
-    const { getByText, getAllByText, container } = render(
+    const { getByText, getAllByText, container } = renderWithProvider(
       <Router history={history}>
         <Header>
           <Header.TopHeader>
@@ -427,7 +448,7 @@ test('marks only the best-matching top-level item active (sibling collision case
     },
   ];
 
-  const { container, getByText } = render(
+  const { container, getByText } = renderWithProvider(
     <Router history={history}>
       <Header>
         <Header.Main
@@ -476,7 +497,7 @@ test('exact match wins: parent item active only on its own URL', async () => {
     },
   ];
 
-  const { container, getByText } = render(
+  const { container, getByText } = renderWithProvider(
     <Router history={history}>
       <Header>
         <Header.Main
@@ -515,7 +536,7 @@ test('mobile burger menu interactions', async () => {
     },
   ];
 
-  const { container } = render(
+  const { container } = renderWithProvider(
     <Router history={history}>
       <Header>
         <Header.Main
@@ -559,7 +580,7 @@ test('search interactions and state management', async () => {
     },
   ];
 
-  const { container } = render(
+  const { container } = renderWithProvider(
     <Router history={history}>
       <Header>
         <Header.Main
@@ -603,7 +624,7 @@ test('escape key handling', async () => {
     },
   ];
 
-  const { container } = render(
+  const { container } = renderWithProvider(
     <Router history={history}>
       <Header>
         <Header.Main
@@ -650,7 +671,7 @@ test('multilingual pathname handling', async () => {
     },
   ];
 
-  const { rerender } = render(
+  const { rerender } = renderWithProvider(
     <Router history={history}>
       <Header>
         <Header.Main
@@ -674,25 +695,27 @@ test('multilingual pathname handling', async () => {
 
   // Test with empty multilingual path
   rerender(
-    <Router history={history}>
-      <Header>
-        <Header.Main
-          pathname="/en/"
-          isMultilingual={true}
-          menuItems={menuItems}
-          renderGlobalMenuItem={(item) => (
-            <a href={item.url} title={item.title}>
-              {item.title}
-            </a>
-          )}
-          renderMenuItem={(item, options) => (
-            <a href={item.url || '/'} {...(options || {})}>
-              {item.title}
-            </a>
-          )}
-        />
-      </Header>
-    </Router>,
+    <Provider store={mockStore}>
+      <Router history={history}>
+        <Header>
+          <Header.Main
+            pathname="/en/"
+            isMultilingual={true}
+            menuItems={menuItems}
+            renderGlobalMenuItem={(item) => (
+              <a href={item.url} title={item.title}>
+                {item.title}
+              </a>
+            )}
+            renderMenuItem={(item, options) => (
+              <a href={item.url || '/'} {...(options || {})}>
+                {item.title}
+              </a>
+            )}
+          />
+        </Header>
+      </Router>
+    </Provider>,
   );
 });
 
@@ -707,11 +730,11 @@ test('menu click outside behavior with different active states', async () => {
     },
   ];
 
-  const { container } = render(
+  const { container } = renderWithProvider(
     <Router history={history}>
       <Header>
         <Header.Main
-          pathname="/different-path"
+          pathname="/test"
           menuItems={menuItems}
           renderGlobalMenuItem={(item) => (
             <a href={item.url} title={item.title}>

package/src/ui/Header/HeaderSearchPopUp.js

@@ -1,9 +1,13 @@
 import React, { useEffect } from 'react';
-import { Container, Input, List } from 'semantic-ui-react';
+import { useSelector } from 'react-redux';
+import { Container, Input, List, Image } from 'semantic-ui-react';
 import { withRouter, Link } from 'react-router-dom';
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 import { handleEnterKeyPress } from '@eeacms/volto-eea-design-system/helpers';
 
+import searchSVG from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/search-line.svg';
+import aiSearchIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/ai-search.svg';
+
 const getRandomItems = (arr, max) => {
   return (
     arr?.slice(0, max).map(function () {
@@ -12,36 +16,57 @@ const getRandomItems = (arr, max) => {
   );
 };
 
+function ActionItem({ action }) {
+  if (action.type === 'info') {
+    return <div>{action.content}</div>;
+  }
+  if (action.type === 'button-link') {
+    return (
+      <a
+        href={action.url}
+        className="ui button white inverted"
+        title={action.title}
+      >
+        {action.title}
+      </a>
+    );
+  }
+  return null;
+}
+
 function HeaderSearchPopUp({
   history,
-  location,
   onClose,
   searchInputRef,
   headerSearchBox,
   triggerRefs = [],
 }) {
   const nodeRef = React.useRef();
-  const headerSearchViews = headerSearchBox || [];
-  const defaultView = headerSearchViews.filter((v) => v.isDefault);
-  const localView = headerSearchViews.filter((v) =>
-    location.pathname.match(v.matchpath ? v.matchpath : v.path),
-  );
-  const activeView = localView.length > 0 ? localView[0] : defaultView[0];
+
+  const searchInput =
+    headerSearchBox.filter((v) => v.type === 'search-input')[0] || {};
+  const actions =
+    headerSearchBox.filter((v) => ['info', 'button-link'].includes(v.type)) ||
+    [];
 
   const {
     path = '',
-    buttonTitle,
-    buttonUrl,
-    description,
     placeholder = 'Search',
-    searchSuggestions,
-  } = activeView || {};
-  const { suggestionsTitle, suggestions, maxToShow } = searchSuggestions || {};
+    suggestionsTitle,
+    maxToShow,
+    suggestions,
+  } = searchInput;
 
   const [visibleSuggestions, setVisibileSuggestions] = React.useState(
     getRandomItems(suggestions, maxToShow),
   );
 
+  const headerSettings = useSelector(
+    (state) => state.eeaSettings?.data?.header || {},
+  );
+
+  const searchIcon = headerSettings.useAISearchIcon ? aiSearchIcon : searchSVG;
+
   useEffect(() => {
     setVisibileSuggestions(getRandomItems(suggestions, maxToShow));
   }, [maxToShow, suggestions]);
@@ -77,18 +102,27 @@ function HeaderSearchPopUp({
               ref={searchInputRef}
               className="icon search"
               action={{
-                className: 'icon ri-search-line',
+                className: 'icon',
                 'aria-label': 'Submit search',
                 onClick: onSubmit,
                 onKeyDown: (event) => {
                   handleEnterKeyPress(event, onSubmit);
                 },
+                children: (
+                  <Image
+                    src={searchIcon}
+                    alt="Global search"
+                    height={45}
+                    width={45}
+                    className="header-search-icon"
+                  />
+                ),
               }}
               placeholder={placeholder}
               fluid
             />
           </form>
-          {searchSuggestions && suggestions.length > 0 && (
+          {suggestions?.length > 0 && (
             <div className="search-suggestions">
               {suggestionsTitle && <h4>{suggestionsTitle}</h4>}
 
@@ -109,17 +143,12 @@ function HeaderSearchPopUp({
             </div>
           )}
         </Container>
-        {buttonTitle && (
+        {actions?.length > 0 && (
           <div className="advanced-search">
             <Container>
-              <div>{description}</div>
-              <a
-                href={buttonUrl || defaultView[0].path}
-                className="ui button white inverted"
-                title="Advanced search"
-              >
-                {buttonTitle}
-              </a>
+              {actions.map((action, i) => (
+                <ActionItem key={i} action={action} />
+              ))}
             </Container>
           </div>
         )}

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

@@ -2,41 +2,53 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
 import HeaderSearchPopUp from './HeaderSearchPopUp';
 import '@testing-library/jest-dom';
 
+const mockState = {
+  eeaSettings: {
+    data: {
+      header: {
+        useAISearchIcon: false,
+      },
+    },
+  },
+};
+
+const mockStore = {
+  getState: () => mockState,
+  subscribe: () => () => {},
+  dispatch: () => {},
+};
+
 describe('HeaderSearchPopUp', () => {
   let history;
   const mockOnClose = jest.fn();
   const sampleHeaderSearchBox = [
     {
+      type: 'search-input',
       path: '/search',
-      buttonTitle: 'Advanced Search',
-      buttonUrl: '/advanced-search',
-      description: 'Sample description',
       placeholder: 'Search',
-      searchSuggestions: {
-        suggestionsTitle: 'Suggestions Title',
-        suggestions: ['suggestion 1', 'suggestion 2', 'suggestion 3'],
-        maxToShow: 3,
-      },
-      isDefault: true,
+      suggestionsTitle: 'Suggestions Title',
+      suggestions: ['suggestion 1', 'suggestion 2', 'suggestion 3'],
+      maxToShow: 3,
+    },
+    {
+      type: 'button-link',
+      title: 'Advanced Search',
+      url: '/advanced-search',
     },
   ];
 
   const sampleHeaderSearchBoxWithMatchpath = [
     {
+      type: 'search-input',
       matchpath: '/search',
-      buttonTitle: 'Advanced Search',
-      buttonUrl: undefined,
-      description: 'Sample description',
       placeholder: 'Search',
-      searchSuggestions: {
-        suggestionsTitle: 'Suggestions Title',
-        suggestions: ['suggestion 1', 'suggestion 2', 'suggestion 3'],
-        maxToShow: 3,
-      },
-      isDefault: true,
+      suggestionsTitle: 'Suggestions Title',
+      suggestions: ['suggestion 1', 'suggestion 2', 'suggestion 3'],
+      maxToShow: 3,
     },
   ];
 
@@ -50,26 +62,30 @@ describe('HeaderSearchPopUp', () => {
 
   it('should render HeaderSearchPopUp', () => {
     render(
-      <Router history={history}>
-        <HeaderSearchPopUp
-          headerSearchBox={sampleHeaderSearchBox}
-          onClose={mockOnClose}
-          triggerRefs={[]}
-        />
-      </Router>,
+      <Provider store={mockStore}>
+        <Router history={history}>
+          <HeaderSearchPopUp
+            headerSearchBox={sampleHeaderSearchBox}
+            onClose={mockOnClose}
+            triggerRefs={[]}
+          />
+        </Router>
+      </Provider>,
     );
     expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
   });
 
   it('should update search text on change', () => {
     render(
-      <Router history={history}>
-        <HeaderSearchPopUp
-          headerSearchBox={sampleHeaderSearchBox}
-          onClose={mockOnClose}
-          triggerRefs={[]}
-        />
-      </Router>,
+      <Provider store={mockStore}>
+        <Router history={history}>
+          <HeaderSearchPopUp
+            headerSearchBox={sampleHeaderSearchBox}
+            onClose={mockOnClose}
+            triggerRefs={[]}
+          />
+        </Router>
+      </Provider>,
     );
     const input = screen.getByPlaceholderText('Search');
     fireEvent.change(input, { target: { value: 'New text' } });
@@ -80,32 +96,35 @@ describe('HeaderSearchPopUp', () => {
     window.searchContext = { resetSearch: jest.fn() };
 
     const { container } = render(
-      <Router history={history}>
-        <HeaderSearchPopUp
-          headerSearchBox={sampleHeaderSearchBox}
-          onClose={mockOnClose}
-          triggerRefs={[]}
-        />
-      </Router>,
+      <Provider store={mockStore}>
+        <Router history={history}>
+          <HeaderSearchPopUp
+            headerSearchBox={sampleHeaderSearchBox}
+            onClose={mockOnClose}
+            triggerRefs={[]}
+          />
+        </Router>
+      </Provider>,
     );
     const input = screen.getByPlaceholderText('Search');
     fireEvent.change(input, { target: { value: 'Search text' } });
     fireEvent.submit(container.querySelector('form'));
     fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
     expect(history.location.pathname).toBe('/search');
-    // expect(history.location.search).toBe('?q=Search text');
   });
 
   it('should navigate to the suggestion when a suggestion is clicked', () => {
     window.searchContext = { resetSearch: jest.fn() };
 
     render(
-      <Router history={history}>
-        <HeaderSearchPopUp
-          headerSearchBox={sampleHeaderSearchBoxWithMatchpath}
-          onClose={mockOnClose}
-        />
-      </Router>,
+      <Provider store={mockStore}>
+        <Router history={history}>
+          <HeaderSearchPopUp
+            headerSearchBox={sampleHeaderSearchBoxWithMatchpath}
+            onClose={mockOnClose}
+          />
+        </Router>
+      </Provider>,
     );
     fireEvent.click(screen.getByText('suggestion 1'));
     expect(history.location.pathname).toBe('/');
@@ -114,13 +133,15 @@ describe('HeaderSearchPopUp', () => {
 
   it('should handle keydown events on search action button', () => {
     const { container } = render(
-      <Router history={history}>
-        <HeaderSearchPopUp
-          headerSearchBox={sampleHeaderSearchBox}
-          onClose={mockOnClose}
-          triggerRefs={[]}
-        />
-      </Router>,
+      <Provider store={mockStore}>
+        <Router history={history}>
+          <HeaderSearchPopUp
+            headerSearchBox={sampleHeaderSearchBox}
+            onClose={mockOnClose}
+            triggerRefs={[]}
+          />
+        </Router>
+      </Provider>,
     );
 
     const searchActionButton = container.querySelector(
@@ -128,25 +149,23 @@ describe('HeaderSearchPopUp', () => {
     );
     expect(searchActionButton).toBeInTheDocument();
 
-    // Test Enter key press on search action button
     fireEvent.keyDown(searchActionButton, { key: 'Enter', code: 'Enter' });
-
-    // Test other key press (should not trigger action)
     fireEvent.keyDown(searchActionButton, { key: 'Tab', code: 'Tab' });
   });
 
   it('should handle search without searchContext', () => {
-    // Remove searchContext to test the fallback
     delete window.searchContext;
 
     const { container } = render(
-      <Router history={history}>
-        <HeaderSearchPopUp
-          headerSearchBox={sampleHeaderSearchBox}
-          onClose={mockOnClose}
-          triggerRefs={[]}
-        />
-      </Router>,
+      <Provider store={mockStore}>
+        <Router history={history}>
+          <HeaderSearchPopUp
+            headerSearchBox={sampleHeaderSearchBox}
+            onClose={mockOnClose}
+            triggerRefs={[]}
+          />
+        </Router>
+      </Provider>,
     );
 
     const input = screen.getByPlaceholderText('Search');
@@ -157,16 +176,17 @@ describe('HeaderSearchPopUp', () => {
   });
 
   it('should handle suggestion click without searchContext', () => {
-    // Remove searchContext to test the fallback
     delete window.searchContext;
 
     render(
-      <Router history={history}>
-        <HeaderSearchPopUp
-          headerSearchBox={sampleHeaderSearchBox}
-          onClose={mockOnClose}
-        />
-      </Router>,
+      <Provider store={mockStore}>
+        <Router history={history}>
+          <HeaderSearchPopUp
+            headerSearchBox={sampleHeaderSearchBox}
+            onClose={mockOnClose}
+          />
+        </Router>
+      </Provider>,
     );
 
     fireEvent.click(screen.getByText('suggestion 1'));
@@ -176,23 +196,27 @@ describe('HeaderSearchPopUp', () => {
   it('should render without search suggestions', () => {
     const headerSearchBoxNoSuggestions = [
       {
+        type: 'search-input',
         path: '/search',
-        buttonTitle: 'Advanced Search',
-        buttonUrl: '/advanced-search',
-        description: 'Sample description',
         placeholder: 'Search',
-        isDefault: true,
+      },
+      {
+        type: 'button-link',
+        title: 'Advanced Search',
+        url: '/advanced-search',
       },
     ];
 
     render(
-      <Router history={history}>
-        <HeaderSearchPopUp
-          headerSearchBox={headerSearchBoxNoSuggestions}
-          onClose={mockOnClose}
-          triggerRefs={[]}
-        />
-      </Router>,
+      <Provider store={mockStore}>
+        <Router history={history}>
+          <HeaderSearchPopUp
+            headerSearchBox={headerSearchBoxNoSuggestions}
+            onClose={mockOnClose}
+            triggerRefs={[]}
+          />
+        </Router>
+      </Provider>,
     );
 
     expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
@@ -202,28 +226,25 @@ describe('HeaderSearchPopUp', () => {
   it('should render with empty suggestions array', () => {
     const headerSearchBoxEmptySuggestions = [
       {
+        type: 'search-input',
         path: '/search',
-        buttonTitle: 'Advanced Search',
-        buttonUrl: '/advanced-search',
-        description: 'Sample description',
         placeholder: 'Search',
-        searchSuggestions: {
-          suggestionsTitle: 'Suggestions Title',
-          suggestions: [],
-          maxToShow: 3,
-        },
-        isDefault: true,
+        suggestionsTitle: 'Suggestions Title',
+        suggestions: [],
+        maxToShow: 3,
       },
     ];
 
     render(
-      <Router history={history}>
-        <HeaderSearchPopUp
-          headerSearchBox={headerSearchBoxEmptySuggestions}
-          onClose={mockOnClose}
-          triggerRefs={[]}
-        />
-      </Router>,
+      <Provider store={mockStore}>
+        <Router history={history}>
+          <HeaderSearchPopUp
+            headerSearchBox={headerSearchBoxEmptySuggestions}
+            onClose={mockOnClose}
+            triggerRefs={[]}
+          />
+        </Router>
+      </Provider>,
     );
 
     expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();

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

@@ -1,6 +1,7 @@
-<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>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg fill="currentColor" height="20" viewBox="0 -960 960 960" width="20" version="1.1"
+   xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+   <path
+      d="m 743.91749,-527.97997 q -1.19965,0 -9.59723,-7.19791 -19.19445,-73.17883 -72.57899,-126.56339 -53.38456,-53.38454 -126.56339,-72.57899 -2.39931,-1.19966 -7.19791,-9.59723 0,-2.3993 7.19791,-9.59722 73.17883,-19.19444 126.56339,-72.579 53.38454,-53.38456 72.57899,-126.56338 1.19966,-2.39931 9.59723,-7.19792 2.3993,0 9.59722,7.19792 20.39409,73.17882 73.17882,126.56338 52.78474,53.38456 125.96356,72.579 2.39931,0 7.19792,9.59722 0,1.19965 -7.19792,9.59723 -73.17882,19.19445 -126.56338,72.57899 -53.38456,53.38456 -72.579,126.56339 0,2.39931 -9.59722,7.19791 z M 796.70222,-0.13268868 494.38968,-302.44522 q -35.98958,28.79167 -82.77604,45.58681 -46.78647,16.79514 -99.5712,16.79514 -130.76217,0 -221.335957,-90.5738 -90.57379432,-90.57378 -90.57379432,-221.33595 0,-130.76217 90.57379432,-221.33597 90.573787,-90.57379 221.335957,-90.57379 34.78993,0 68.38021,7.19792 33.59029,7.19792 63.58161,21.59376 l -11.99653,104.36979 q -26.39236,-17.99479 -56.38368,-27.59202 -29.99133,-9.59722 -63.58161,-9.59722 -89.97396,0 -152.95574,62.98177 -62.981779,62.98179 -62.981779,152.95576 0,89.97396 62.981779,152.95574 62.98178,62.98178 152.95574,62.98178 79.1771,0 138.55991,-50.98526 59.38283,-50.98523 73.77866,-134.96094 l 86.375,59.98264 q -8.39756,26.39236 -20.99392,49.18577 -12.59636,22.7934 -28.19184,43.18751 l 302.31253,302.312529 z"
+      fill="rgba(255,255,255,1)" style="stroke-width:1" />
 </svg>