@eeacms/volto-eea-website-theme 3.12.0 → 3.13.0

package/CHANGELOG.md

@@ -4,6 +4,11 @@ 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).
 
+### [3.13.0](https://github.com/eea/volto-eea-website-theme/compare/3.12.0...3.13.0) - 4 November 2025
+
+#### :hammer_and_wrench: Others
+
+- Bump version from 3.12.1 to 3.13.0 [David Ichim - [`c182fea`](https://github.com/eea/volto-eea-website-theme/commit/c182fea83aad1c0b224c37287a5c2935a2e893d0)]
 ### [3.12.0](https://github.com/eea/volto-eea-website-theme/compare/3.11.0...3.12.0) - 4 November 2025
 
 #### :bug: Bug Fixes

package/jest-addon.config.js

@@ -1,4 +1,4 @@
-require('dotenv').config({ path: __dirname + '/.env' })
+require('dotenv').config({ path: __dirname + '/.env' });
 
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
@@ -48,4 +48,4 @@ module.exports = {
       '<rootDir>/node_modules/@eeacms/volto-eea-website-theme/jest.setup.js',
     ],
   }),
-}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/theme/Widgets/NavigationBehaviorWidget.jsx

@@ -8,6 +8,8 @@ import { getNavigation } from '@plone/volto/actions';
 import { defineMessages, useIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 
+import { numbersToMenuItemColumns } from '@eeacms/volto-eea-design-system/ui/Header/utils';
+
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 
@@ -36,30 +38,6 @@ const defaultRouteSettings = {
   // Don't include empty arrays in default settings
 };
 
-// Helper functions for menuItemColumns conversion (numbers to semantic UI format)
-const numberToColumnString = (num) => {
-  const numbers = [
-    '',
-    'one',
-    'two',
-    'three',
-    'four',
-    'five',
-    'six',
-    'seven',
-    'eight',
-    'nine',
-  ];
-  return numbers[num] ? `${numbers[num]} wide column` : '';
-};
-
-const numbersToMenuItemColumns = (numbers) => {
-  if (!Array.isArray(numbers)) return [];
-  return numbers
-    .map((num) => numberToColumnString(parseInt(num)))
-    .filter((col) => col !== '');
-};
-
 const columnStringToNumber = (colString) => {
   const numbers = {
     one: 1,
@@ -78,7 +56,7 @@ const columnStringToNumber = (colString) => {
   return match ? numbers[match[1]] : null;
 };
 
-const menuItemColumnsToNumbers = (columns) => {
+export const menuItemColumnsToNumbers = (columns) => {
   if (!Array.isArray(columns)) return [];
   return columns
     .map((col) => columnStringToNumber(col))
@@ -420,6 +398,20 @@ const NavigationBehaviorWidget = (props) => {
             portal_type: ______,
             ...settings
           } = route;
+
+          // // Convert menuItemColumns from numbers back to semantic UI format for backend storage
+          if (
+            settings.menuItemColumns !== null &&
+            settings.menuItemColumns &&
+            Array.isArray(settings.menuItemColumns)
+          ) {
+            if (settings.menuItemColumns.length > 0) {
+              settings.menuItemColumns = numbersToMenuItemColumns(
+                settings.menuItemColumns,
+              );
+            }
+          }
+
           newSettings[routeId] = settings;
         });
 

package/src/components/theme/Widgets/NavigationBehaviorWidget.test.jsx

@@ -490,6 +490,120 @@ describe('NavigationBehaviorWidget', () => {
     expect(screen.getByText('Test Route 2')).toBeInTheDocument();
   });
 
+  it('handles menuItemColumns as integers from backend (develop server format)', async () => {
+    const existingSettings = {
+      'http://localhost:3000/test-route-1': {
+        hideChildrenFromNavigation: false,
+        menuItemColumns: [8, 4], // Integer format from develop server
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value={JSON.stringify(existingSettings)}
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    const accordionTitles = screen.getAllByTestId('accordion-title');
+    fireEvent.click(accordionTitles[0]);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Hide Children From Navigation'),
+      ).toBeInTheDocument();
+    });
+
+    // Verify the widget displays the values correctly (converted to numbers for display)
+    // The widget should handle integer input and display it properly
+  });
+
+  it('handles menuItemColumns as semantic UI strings from backend (production format)', async () => {
+    const existingSettings = {
+      'http://localhost:3000/test-route-1': {
+        hideChildrenFromNavigation: false,
+        menuItemColumns: ['eight wide column', 'four wide column'], // String format from production
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value={JSON.stringify(existingSettings)}
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    const accordionTitles = screen.getAllByTestId('accordion-title');
+    fireEvent.click(accordionTitles[0]);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Hide Children From Navigation'),
+      ).toBeInTheDocument();
+    });
+
+    // Verify the widget displays the values correctly (converted from strings to numbers for display)
+    // The widget should handle semantic UI string input and convert it to numbers for display
+  });
+
+  it('converts menuItemColumns to semantic UI format when saving', async () => {
+    const existingSettings = {
+      'http://localhost:3000/test-route-1': {
+        hideChildrenFromNavigation: false,
+        menuItemColumns: [2, 3], // Numbers that should be converted to semantic UI format
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value={JSON.stringify(existingSettings)}
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    const accordionTitles = screen.getAllByTestId('accordion-title');
+    fireEvent.click(accordionTitles[0]);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Hide Children From Navigation'),
+      ).toBeInTheDocument();
+    });
+
+    // Simulate a change by clicking the checkbox
+    const checkboxes = screen.getAllByRole('checkbox');
+    fireEvent.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(mockOnChange).toHaveBeenCalled();
+      const lastCallIndex = mockOnChange.mock.calls.length - 1;
+      const savedValue = JSON.parse(mockOnChange.mock.calls[lastCallIndex][1]);
+
+      // Find the route settings
+      const routeKey = Object.keys(savedValue).find((key) =>
+        key.includes('test-route-1'),
+      );
+      const route1Settings = savedValue[routeKey];
+
+      // Verify menuItemColumns are saved in semantic UI format, not as integers
+      if (route1Settings && route1Settings.menuItemColumns) {
+        route1Settings.menuItemColumns.forEach((col) => {
+          expect(typeof col).toBe('string');
+          expect(col).toMatch(/wide column$/);
+        });
+      }
+    });
+  });
+
   it('displays route paths in accordion titles', () => {
     render(
       <Provider store={store}>

package/src/config.js

@@ -112,6 +112,8 @@ export const footerOpts = {
         tablet: 6,
         computer: 4,
       },
+      width: 270,
+      height: 100,
     },
     {
       url: 'https://www.eionet.europa.eu/',
@@ -123,6 +125,8 @@ export const footerOpts = {
         tablet: 6,
         computer: 4,
       },
+      width: 330,
+      height: 100,
     },
   ],
   social: [
@@ -240,6 +244,8 @@ export const headerOpts = {
       },
     ],
   },
+  logoWidth: 350,
+  logoHeight: 130,
 };
 
 export const languages = [

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -62,9 +62,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
   const navigationSettings = useSelector(
     (state) => state.navigationSettings?.settings || {},
   );
-  const navigationLoaded = useSelector(
-    (state) => state.navigationSettings?.loaded,
-  );
+  const updateRequest = useSelector((state) => state.content.update);
 
   // Combine navigation settings from backend with config fallback
   const configLayouts = config.settings?.menuItemsLayouts || {};
@@ -112,6 +110,17 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
     });
   }
 
+  React.useEffect(() => {
+    if (
+      updateRequest?.loaded &&
+      removeTrailingSlash(updateRequest?.content?.['@id'] || '') ===
+        removeTrailingSlash(pathname)
+    ) {
+      dispatch(getNavigationSettings(pathname));
+    }
+    dispatch(getNavigationSettings(pathname));
+  }, [updateRequest, dispatch, pathname]);
+
   React.useEffect(() => {
     const base_url = getBaseUrl(pathname);
     const { settings } = config;
@@ -125,12 +134,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
     if (token !== previousToken) {
       dispatch(getNavigation(base_url, settings.navDepth));
     }
-
-    // Fetch navigation settings
-    if (!navigationLoaded) {
-      dispatch(getNavigationSettings(pathname));
-    }
-  }, [pathname, token, dispatch, previousToken, navigationLoaded]);
+  }, [pathname, token, dispatch, previousToken]);
 
   return (
     <Header menuItems={items}>
@@ -215,6 +219,8 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
               title={eea.websiteTitle}
               alt={eea.organisationName}
               url={eea.logoTargetUrl}
+              height={headerOpts.logoHeight}
+              width={headerOpts.logoWidth}
             />
 
             {!!subsite && subsite.title && (