@eeacms/volto-eea-design-system 1.39.1 → 1.40.1

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.40.1](https://github.com/eea/volto-eea-design-system/compare/1.40.0...1.40.1) - 4 December 2025
+
+#### :bug: Bug Fixes
+
+- fix(header): tests to return empty string when number isn't found [David Ichim - [`6285df3`](https://github.com/eea/volto-eea-design-system/commit/6285df34627462e2fe0f986de9aaf6ff3b89f9f0)]
+- fix(mega-menu): add column class even if value is already string [David Ichim - [`0df0db2`](https://github.com/eea/volto-eea-design-system/commit/0df0db28ec3cf214a4420aa3f853125dc529bb00)]
+
+#### :nail_care: Enhancements
+
+- change(test): jest config to fix cleanup package path [David Ichim - [`243a95f`](https://github.com/eea/volto-eea-design-system/commit/243a95fa1138a3e4f30f196d33ba6ebf73cd864a)]
+
+#### :hammer_and_wrench: Others
+
+- add rule for eeacms/countup to jest-config.js [David Ichim - [`59244c2`](https://github.com/eea/volto-eea-design-system/commit/59244c2e85447766e9e2a051e080652d93f67458)]
+- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`314266b`](https://github.com/eea/volto-eea-design-system/commit/314266bd8131b8ade427f23f81a084714f0104af)]
+### [1.40.0](https://github.com/eea/volto-eea-design-system/compare/1.39.1...1.40.0) - 4 November 2025
+
 ### [1.39.1](https://github.com/eea/volto-eea-design-system/compare/1.39.0...1.39.1) - 22 September 2025
 
 #### :boom: Breaking Change

package/jest-addon.config.js

@@ -421,7 +421,9 @@ module.exports = {
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/search/(.*)$': '<rootDir>/src/addons/volto-searchlib/searchlib/$1',
     '@eeacms/search': '<rootDir>/src/addons/volto-searchlib/searchlib',
+    '@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/(.*)$':

package/package.json

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

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

@@ -131,6 +131,8 @@ Default.args = {
         tablet: 4,
         computer: 4,
       },
+      width: 270,
+      height: 100,
     },
     {
       url: 'https://www.eionet.europa.eu/',
@@ -142,6 +144,8 @@ Default.args = {
         tablet: 4,
         computer: 4,
       },
+      width: 330,
+      height: 100,
     },
   ],
   social: [

package/src/ui/Footer/SubFooter.jsx

@@ -27,6 +27,9 @@ const SubFooter = (props) => {
                       src={manager.src}
                       alt={manager.alt}
                       loading="lazy"
+                      width={manager.width}
+                      height={manager.height}
+                      className="footer-logo-icon"
                     ></Image>
                   </a>
                 </div>

package/src/ui/Header/Header.jsx

@@ -343,6 +343,9 @@ const Main = ({
                   <Image
                     src={!searchIsActive ? `${searchIcon}` : `${closeIcon}`}
                     alt="Global search"
+                    height={45}
+                    width={45}
+                    className="header-search-icon"
                   />
                 </button>
               )}

package/src/ui/Header/HeaderMenuPopUp.js

@@ -11,6 +11,7 @@ import {
 import { cloneDeep, kebabCase } from 'lodash';
 
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
+import { numbersToMenuItemColumns } from '../Header/utils';
 
 const generateCssClassFromUrl = (url) => {
   if (!url) return '';
@@ -135,19 +136,20 @@ export const StandardMegaMenuGrid = ({ menuItem, renderMenuItem, layout }) => {
         const urlClass = sectionItem?.url
           ? generateCssClassFromUrl(sectionItem.url)
           : '';
-        const classNames = `${layout.menuItemColumns[columnIndex]}${
-          urlClass ? ` ${urlClass}` : ''
-        }`;
-
+        const classNames = `${numbersToMenuItemColumns(
+          layout.menuItemColumns[columnIndex],
+        )}${urlClass ? ` ${urlClass}` : ''}`;
         return (
-          <div className={classNames} key={columnIndex}>
+          <div className={classNames} key={columnIndex + '-column'}>
             {columnIndex !== menuItemColumnsLength
               ? renderColumnContent(menuItem.items[columnIndex], columnIndex)
               : menuItem.items
                   .slice(menuItemColumnsLength)
-                  .map((section, _idx) =>
-                    renderColumnContent(section, columnIndex),
-                  )}
+                  .map((section, _idx) => (
+                    <React.Fragment key={`${columnIndex}-${_idx}`}>
+                      {renderColumnContent(section, columnIndex)}
+                    </React.Fragment>
+                  ))}
           </div>
         );
       })}
@@ -247,7 +249,7 @@ const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
       (element) => element.title === 'At a glance',
     );
     const inDepth = element.items.find(
-      (element) => element.url.indexOf('in-depth') !== -1,
+      (element) => element.url && element.url.indexOf('in-depth') !== -1,
     );
     content = (
       <List>

package/src/ui/Header/utils.js

@@ -53,3 +53,28 @@ export function isMenuItemActive(menuItem, bestMatchUrl, bestScore) {
   const itemUrl = menuItem['@id'] || menuItem.url;
   return itemUrl === bestMatchUrl;
 }
+
+// Helper functions for menuItemColumns conversion (numbers to semantic UI format)
+export const numberToColumnString = (num) => {
+  const numbers = [
+    '',
+    'one',
+    'two',
+    'three',
+    'four',
+    'five',
+    'six',
+    'seven',
+    'eight',
+    'nine',
+  ];
+  return numbers[num] ? `${numbers[num]} wide column` : '';
+};
+
+export const numbersToMenuItemColumns = (numbers) => {
+  // Handle both single number and array of numbers for column dimensions
+  if (!Array.isArray(numbers)) return numberToColumnString(numbers);
+  return numbers
+    .map((num) => numberToColumnString(parseInt(num)))
+    .filter((col) => col !== '');
+};

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

@@ -2,7 +2,12 @@
  * Tests for Header utility functions
  */
 
-import { findBestMatchingMenuItem, isMenuItemActive } from './utils';
+import {
+  findBestMatchingMenuItem,
+  isMenuItemActive,
+  numberToColumnString,
+  numbersToMenuItemColumns,
+} from './utils';
 
 describe('Header utils', () => {
   describe('findBestMatchingMenuItem', () => {
@@ -120,4 +125,94 @@ describe('Header utils', () => {
       expect(result).toBe(true);
     });
   });
+
+  describe('numberToColumnString', () => {
+    test('converts number 1 to "one wide column"', () => {
+      expect(numberToColumnString(1)).toBe('one wide column');
+    });
+
+    test('converts number 2 to "two wide column"', () => {
+      expect(numberToColumnString(2)).toBe('two wide column');
+    });
+
+    test('converts number 3 to "three wide column"', () => {
+      expect(numberToColumnString(3)).toBe('three wide column');
+    });
+
+    test('converts number 4 to "four wide column"', () => {
+      expect(numberToColumnString(4)).toBe('four wide column');
+    });
+
+    test('converts number 5 to "five wide column"', () => {
+      expect(numberToColumnString(5)).toBe('five wide column');
+    });
+
+    test('converts number 6 to "six wide column"', () => {
+      expect(numberToColumnString(6)).toBe('six wide column');
+    });
+
+    test('converts number 7 to "seven wide column"', () => {
+      expect(numberToColumnString(7)).toBe('seven wide column');
+    });
+
+    test('converts number 8 to "eight wide column"', () => {
+      expect(numberToColumnString(8)).toBe('eight wide column');
+    });
+
+    test('converts number 9 to "nine wide column"', () => {
+      expect(numberToColumnString(9)).toBe('nine wide column');
+    });
+
+    test('returns empty string for number 0', () => {
+      expect(numberToColumnString(0)).toBe('');
+    });
+
+    test('returns empty string for numbers > 9', () => {
+      expect(numberToColumnString(10)).toBe('');
+      expect(numberToColumnString(100)).toBe('');
+    });
+
+    test('returns empty string for negative numbers', () => {
+      expect(numberToColumnString(-1)).toBe('');
+    });
+  });
+
+  describe('numbersToMenuItemColumns', () => {
+    test('converts array of numbers to column strings', () => {
+      const result = numbersToMenuItemColumns([1, 2, 3]);
+      expect(result).toEqual([
+        'one wide column',
+        'two wide column',
+        'three wide column',
+      ]);
+    });
+
+    test('filters out invalid numbers (0, negative, > 9)', () => {
+      const result = numbersToMenuItemColumns([0, 1, 2, 10, -1, 3]);
+      expect(result).toEqual([
+        'one wide column',
+        'two wide column',
+        'three wide column',
+      ]);
+    });
+
+    test('handles string numbers by parsing them', () => {
+      const result = numbersToMenuItemColumns(['1', '2', '3']);
+      expect(result).toEqual([
+        'one wide column',
+        'two wide column',
+        'three wide column',
+      ]);
+    });
+
+    test('handles empty array', () => {
+      const result = numbersToMenuItemColumns([]);
+      expect(result).toEqual([]);
+    });
+
+    test('handles array with all invalid numbers', () => {
+      const result = numbersToMenuItemColumns([0, 10, -1, 100]);
+      expect(result).toEqual([]);
+    });
+  });
 });

package/src/ui/Logo/Logo.jsx

@@ -13,15 +13,26 @@ import { Image } from 'semantic-ui-react';
  * @param {Object} intl Intl object
  * @returns {string} Markup of the component.
  */
-const Logo = ({ src, invertedSrc, id, url, alt, title, inverted }) => {
+const Logo = ({
+  src,
+  invertedSrc,
+  id,
+  url,
+  alt,
+  title,
+  inverted,
+  width,
+  height,
+}) => {
   return (
-    <Link to={url} title={title} className={'logo'}>
+    <Link to={url} title={title} className="logo">
       <Image
         src={inverted ? invertedSrc : src}
         alt={alt}
-        title={title}
         className="eea-logo"
         id={id}
+        width={width}
+        height={height}
       />
     </Link>
   );

package/src/ui/Logo/Logo.stories.js

@@ -137,4 +137,6 @@ Logo.args = {
   src: LogoImage,
   invertedSrc: InvertedLogoImage,
   inverted: false,
+  width: 350,
+  height: 130,
 };

package/src/ui/Tag/Tag.jsx

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

package/src/ui/Tag/Tag.stories.jsx

@@ -1,6 +1,16 @@
 import React from 'react';
 import Tag from './Tag';
 import { Container } from 'semantic-ui-react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+const mockStore = configureStore();
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
 
 export default {
   title: 'Components/Tag',
@@ -15,9 +25,11 @@ export default {
 };
 
 export const Default = (args) => (
-  <Container>
-    <Tag href={args.link}>{args.title}</Tag>
-  </Container>
+  <Provider store={store}>
+    <Container>
+      <Tag href={args.link}>{args.title}</Tag>
+    </Container>
+  </Provider>
 );
 
 Default.args = {

package/src/ui/TagList/TagList.stories.jsx

@@ -2,6 +2,16 @@ import React from 'react';
 import TagList from './TagList';
 import Tag from '../Tag/Tag';
 import { Container } from 'semantic-ui-react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+const mockStore = configureStore();
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
 
 export default {
   title: 'Components/Tag',
@@ -40,18 +50,20 @@ export default {
 };
 
 export const List = (args) => (
-  <Container>
-    <TagList className={args.direction}>
-      <TagList.Title>{args.title}</TagList.Title>
-      <TagList.Content>
-        {args.tags.map((tag, index) => [
-          <Tag href={tag.href} key={index}>
-            {tag.category}
-          </Tag>,
-        ])}
-      </TagList.Content>
-    </TagList>
-  </Container>
+  <Provider store={store}>
+    <Container>
+      <TagList className={args.direction}>
+        <TagList.Title>{args.title}</TagList.Title>
+        <TagList.Content>
+          {args.tags.map((tag, index) => [
+            <Tag href={tag.href} key={index}>
+              {tag.category}
+            </Tag>,
+          ])}
+        </TagList.Content>
+      </TagList>
+    </Container>
+  </Provider>
 );
 
 List.args = {

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

@@ -66,6 +66,10 @@ footer .footer-header {
   width: @subFooterItemWidth;
   height: @subFooterItemHeight;
   align-items: @subFooterItemAlignItems;
+  .footer-logo-icon {
+    width: 100%;
+    height: auto;
+  }
 }
 
 .subfooter .item .ui.grid {

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

@@ -307,6 +307,7 @@
   width: @logoWidth;
   max-width: @mobileLogoMaxWidth;
   margin-top: @mobileLogoMarginTop;
+  height: @logoHeight;
 }
 
 /* Subsite */
@@ -476,6 +477,10 @@
   img {
     width: 75%;
   }
+  .header-search-icon {
+    width: @searchIconWidthMobile;
+    height: @searchIconHeightMobile;
+  }
   // icon to be used
   i.icon {
     display: flex;
@@ -505,6 +510,10 @@
   .search-action {
     width: @tabletActionsBoxWidth;
     height: @tabletMainSectionHeight;
+    .header-search-icon {
+      width: @searchIconWidth;
+      height: @searchIconHeight;
+    }
   }
 
   /*----------------------------------------------------------------------------

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

@@ -115,6 +115,7 @@
 
 /* Logo */
 @logoWidth: 100%;
+@logoHeight: auto;
 @mobileLogoMaxWidth: 142px;
 @tabletLogoMaxWidth: 252px;
 @computerLogoMaxWidth: 347px; //348 rendered fuzzy :(
@@ -161,6 +162,10 @@
 @tabletActionsBoxWidth: 66px;
 @computerActionsBoxWidth: 72px;
 @burgerActionBackgroundColor: @darkMidnightBlue;
+@searchIconWidth: 45px;
+@searchIconHeight: 45px;
+@searchIconHeightMobile: 24px;
+@searchIconWidthMobile: 24px;
 
 /* Mega menu and Search popup */
 @mobilePopupMarginTop: 5vh;

package/theme/themes/eea/globals/site.overrides

@@ -9,6 +9,21 @@ body {
   font-size: @baseFontSize;
 }
 
+.is-fullscreen-mode {
+
+  #header,
+  #footer,
+  .skiplinks-wrapper,
+  .inpage-navigation-wrapper {
+    display: none !important;
+    visibility: hidden;
+  }
+
+  body {
+    margin-top: 0 !important;
+  }
+}
+
 /* sensible image defaults */
 img {
   max-width: 100%;
@@ -215,11 +230,37 @@ a {
   }
 }
 
+@first-print-page: ~"@page :first { margin-top: 0; }";
+
 @media print {
 
   @page {
     size: A4;
-    margin: 1cm;
+    margin: 14mm 0;
+  }
+
+  @{first-print-page} html,
+  body {
+    width: auto;
+    height: auto;
+    background: @white;
+    color: @textColor;
+  }
+
+  // avoid cutting elements
+  body {
+    margin: 0;
+    overflow: visible !important;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    break-after: avoid-page;
+    break-inside: avoid;
+    page-break-after: avoid;
+    page-break-inside: avoid;
   }
 
   * {
@@ -227,12 +268,22 @@ a {
     print-color-adjust: exact;
   }
 
+  .eea.header,
+  .eea.header .container,
+  .light-header .container {
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+  }
+
   .skiplinks-wrapper,
   .slider-arrow,
   #footer,
   #inpage-navigation,
   .column.actions,
-  .slick-arrows {
+  .slick-arrows,
+  .ui.sticky,
+  .has-side-nav .content-box::before,
+  .light-header::before {
     display: none !important;
     visibility: hidden;
   }
@@ -242,6 +293,14 @@ a {
     break-inside: avoid;
   }
 
+  // avoid single lines at the beginning or end of a page
+  #page-document p,
+  #page-document li,
+  #page-document blockquote {
+    orphans: 3;
+    widows: 3;
+  }
+
   .ui.segment.breadcrumbs {
     padding: 0;
 
@@ -267,10 +326,38 @@ a {
   .embed-tableau,
   .embed-map-visualization,
   .embed-visualization {
+    break-inside: avoid;
     page-break-inside: avoid;
   }
 
+  .ui.segment,
+  .content-box,
+  .card,
+  figure {
+    box-shadow: none !important;
+  }
+
   .grid-block-teaser .card {
     page-break-inside: auto;
   }
+
+  // pdf printing optimizations
+  .light-header .container {
+    padding-left: 8mm;
+    padding-right: 8mm;
+  }
+
+  .content-type {
+    --text-color-secondary: @textColor;
+  }
+
+  .columns-view {
+    .ui.column.grid>[class*="three wide"].column {
+      width: 16.66666667% !important;
+    }
+
+    .ui.column.grid>[class*="ten wide"].column {
+      width: 83.33333333% !important;
+    }
+  }
 }