@eeacms/volto-eea-website-theme 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -4,11 +4,14 @@ 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).
 
-### [2.0.1](https://github.com/eea/volto-eea-website-theme/compare/2.0.0...2.0.1) - 14 May 2024
+### [2.1.0](https://github.com/eea/volto-eea-website-theme/compare/2.0.2...2.1.0) - 23 May 2024
 
-#### :nail_care: Enhancements
+#### :hammer_and_wrench: Others
+
+- bump package version [David Ichim - [`3c0c2eb`](https://github.com/eea/volto-eea-website-theme/commit/3c0c2eb3a863e85451c68f6d56b3e704de260618)]
+### [2.0.2](https://github.com/eea/volto-eea-website-theme/compare/2.0.1...2.0.2) - 20 May 2024
 
-- change(draft-image): check if parent has effective date in future for draft image showing [David Ichim - [`608cbb0`](https://github.com/eea/volto-eea-website-theme/commit/608cbb0d06d014c3dc8ba99e2b79cf9103291d68)]
+### [2.0.1](https://github.com/eea/volto-eea-website-theme/compare/2.0.0...2.0.1) - 15 May 2024
 
 #### :hammer_and_wrench: Others
 
@@ -64,7 +67,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`adc6730`](https://github.com/eea/volto-eea-website-theme/commit/adc6730e21a37afb865b842182624401de6a29f5)]
 ### [1.33.1](https://github.com/eea/volto-eea-website-theme/compare/1.33.0...1.33.1) - 4 April 2024
 
 #### :bug: Bug Fixes
@@ -198,8 +200,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - bump version [Razvan - [`721e939`](https://github.com/eea/volto-eea-website-theme/commit/721e939d12e324b459ebfa78a2e656ee7142a3d6)]
 - merge master into this branch [Razvan - [`586c8f9`](https://github.com/eea/volto-eea-website-theme/commit/586c8f910bac55a043bd8dda60e9444bd2ae1663)]
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`fd90044`](https://github.com/eea/volto-eea-website-theme/commit/fd9004442a9d1d465f7601ecdefe3e23c61e6a9c)]
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`4bc3dd3`](https://github.com/eea/volto-eea-website-theme/commit/4bc3dd3ae412a66befd04b5b80fab3716c929240)]
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`c4dbd28`](https://github.com/eea/volto-eea-website-theme/commit/c4dbd289358205bc2d849aab7edb11ccf3b89cee)]
 - fix tests [Razvan - [`042330b`](https://github.com/eea/volto-eea-website-theme/commit/042330bc97d32ffe7ba769b4f2453f71cffed706)]
 - remove RemoveSchema logic [Razvan - [`08d10f8`](https://github.com/eea/volto-eea-website-theme/commit/08d10f8bf6f75478260e4e4c66d7316ba87b907a)]
@@ -294,11 +294,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: Add real image to cypress test [Alin Voinea - [`4ff591a`](https://github.com/eea/volto-eea-website-theme/commit/4ff591ae3318c9588b4e2114582c0fa6cfdf31ae)]
 - test: Add cypress tests for Image block styling position and align [Alin Voinea - [`7341ef7`](https://github.com/eea/volto-eea-website-theme/commit/7341ef7b92714fc0cc3ab0c31c39033e7b3e19e7)]
 - Revert "change(tests): commented out rss test since title block config is missing" [Alin Voinea - [`fb61191`](https://github.com/eea/volto-eea-website-theme/commit/fb611918d6ca380b89b594f283dcf9f685a4b294)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`6a3be30`](https://github.com/eea/volto-eea-website-theme/commit/6a3be3092589411af7808a235f76de5222fd3868)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`c3978f2`](https://github.com/eea/volto-eea-website-theme/commit/c3978f23375ef066e9fd6f6c2e34ba6c1c058f69)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`f672779`](https://github.com/eea/volto-eea-website-theme/commit/f672779e845bec9240ccc901e9f53ec80c5a1819)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`ae5d8e3`](https://github.com/eea/volto-eea-website-theme/commit/ae5d8e3f4e04dc2808d47ce2ee886e1b23b528da)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`170ff0c`](https://github.com/eea/volto-eea-website-theme/commit/170ff0c8e3b30e69479bdf1117e811fea94f1027)]
 ### [1.23.0](https://github.com/eea/volto-eea-website-theme/compare/1.22.1...1.23.0) - 2 November 2023
 
 #### :rocket: New Features
@@ -311,7 +306,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`f28fce3`](https://github.com/eea/volto-eea-website-theme/commit/f28fce3d1eb815f95fb9aa40de42b10b7e8e30c5)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`6d15088`](https://github.com/eea/volto-eea-website-theme/commit/6d150886c5aeb2ca0b569270486e60f7cc274e2c)]
 - chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`20c0323`](https://github.com/eea/volto-eea-website-theme/commit/20c032380b33c0077c869a05136f93e2fb68e5d4)]
 
@@ -497,7 +491,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Deprecate circularity website [valentinab25 - [`370dcbf`](https://github.com/eea/volto-eea-website-theme/commit/370dcbfbf1a8135ce7b1b3b271b004552a631837)]
 
 #### :hammer_and_wrench: Others
 
@@ -653,7 +646,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`6c5e2f8`](https://github.com/eea/volto-eea-website-theme/commit/6c5e2f80456e2061d9e9c15fd0a0b91b9ac70568)]
 ### [1.9.1](https://github.com/eea/volto-eea-website-theme/compare/1.9.0...1.9.1) - 28 February 2023
 
 #### :bug: Bug Fixes
@@ -800,7 +792,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - For some reasons types is a string [Alin Voinea - [`3769a09`](https://github.com/eea/volto-eea-website-theme/commit/3769a0981181d5b633f3498daebbe96be8b4b833)]
 - Fix(redirect): o.filter - refs #157627 [Alin Voinea - [`deb23da`](https://github.com/eea/volto-eea-website-theme/commit/deb23da846444cc96539697fd798429ae0abe89e)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`f1fffc5`](https://github.com/eea/volto-eea-website-theme/commit/f1fffc5db96725440863d545580b4e76cce4b796)]
 ### [1.5.0](https://github.com/eea/volto-eea-website-theme/compare/1.4.2...1.5.0) - 9 January 2023
 
 #### :hammer_and_wrench: Others
@@ -834,7 +825,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.4.0 [Alin Voinea - [`bd42a0d`](https://github.com/eea/volto-eea-website-theme/commit/bd42a0d26e928cac5d99933194755da3db06b341)]
 - bump version to use as volto-eea-design-system [David Ichim - [`f4be047`](https://github.com/eea/volto-eea-website-theme/commit/f4be047328b46399b03b612d378b18aaf82e7dc1)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9b7cfef`](https://github.com/eea/volto-eea-website-theme/commit/9b7cfefb4d34fc1c948015e491feb370f9795bd8)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`df252a9`](https://github.com/eea/volto-eea-website-theme/commit/df252a9bfed0bb86cadf53c59dd1603b1e2cd822)]
 ### [1.3.2](https://github.com/eea/volto-eea-website-theme/compare/1.3.1...1.3.2) - 16 December 2022
 
@@ -844,7 +834,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`a43c658`](https://github.com/eea/volto-eea-website-theme/commit/a43c658a7920c8df95e763b9a637f38ce77eba2c)]
 - Better razzle.config [Tiberiu Ichim - [`81dbf48`](https://github.com/eea/volto-eea-website-theme/commit/81dbf48815fb27facb4f82c9b764540fdf188b2e)]
 - Better razzle.config [Tiberiu Ichim - [`7bc9da2`](https://github.com/eea/volto-eea-website-theme/commit/7bc9da2cd837ab62a95cd29979cdd9b0055b7d67)]
 ### [1.3.1](https://github.com/eea/volto-eea-website-theme/compare/1.3.0...1.3.1) - 28 November 2022
@@ -855,7 +844,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- yarn 3 [Alin Voinea - [`ea7a709`](https://github.com/eea/volto-eea-website-theme/commit/ea7a7094945312776e9b6f44e371178603e92139)]
 ### [1.3.0](https://github.com/eea/volto-eea-website-theme/compare/1.2.0...1.3.0) - 22 November 2022
 
 #### :rocket: New Features
@@ -896,7 +884,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add subsite class to body [Tiberiu Ichim - [`74d700f`](https://github.com/eea/volto-eea-website-theme/commit/74d700fbfd6249a8604762a7e4e49cce857db0f3)]
 - Add subsite info to header [Tiberiu Ichim - [`47daf8b`](https://github.com/eea/volto-eea-website-theme/commit/47daf8bb6374a1222040626b19d4154df7ba1b83)]
 - fix eslint [Miu Razvan - [`eb8d0a7`](https://github.com/eea/volto-eea-website-theme/commit/eb8d0a790bc70c0aae256c6ff35f63c4885f338e)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`cc578a4`](https://github.com/eea/volto-eea-website-theme/commit/cc578a413b205a8e61e091fab3a88f94cedefc89)]
 ### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
 
 #### :nail_care: Enhancements
@@ -944,7 +931,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`33b56ac`](https://github.com/eea/volto-eea-website-theme/commit/33b56acb13fbaf0c5b79e8fc6e13c4b699c79c90)]
 ### [0.7.3](https://github.com/eea/volto-eea-website-theme/compare/0.7.2...0.7.3) - 22 September 2022
 
 #### :hammer_and_wrench: Others
@@ -1212,7 +1198,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Header refactor, add custom logo #5 [ichim-david - [`4950235`](https://github.com/eea/volto-eea-website-theme/commit/49502358105437cfeac3b144e6d301cb59aa2346)]
 - Update footer.config with new publication card component [ichim-david - [`2e38e9a`](https://github.com/eea/volto-eea-website-theme/commit/2e38e9a417f835009d60c80d4eb4b30229f55e45)]
 - feature(breadcrumbs): implement eea-design-system breadcrumb as Volto component #32 #7 [ichim-david - [`181af41`](https://github.com/eea/volto-eea-website-theme/commit/181af4125ce2b9ddac56dab4723cb11c26633221)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`da8ceb6`](https://github.com/eea/volto-eea-website-theme/commit/da8ceb68ea68bfbc9504e48ccd4d68277f11ab9a)]
 - use breadcrumbs from eea-design-system [nileshgulia1 - [`db2f9e9`](https://github.com/eea/volto-eea-website-theme/commit/db2f9e9a4327420a3cce9a9903cd88549b129eab)]
 - Update theme.config [ichim-david - [`8eca4f4`](https://github.com/eea/volto-eea-website-theme/commit/8eca4f40397a4aeca6d39029c92db78968d37064)]
 - Added keyContent component to theme.config [ichim-david - [`d86f202`](https://github.com/eea/volto-eea-website-theme/commit/d86f202d0274d839487a88b51cae9a0e899beb23)]
@@ -1254,5 +1239,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- yarn bootstrap [Alin Voinea - [`6995e9e`](https://github.com/eea/volto-eea-website-theme/commit/6995e9e091f21fdbbdffa8a44fc0e2c626f6d46a)]
 - Initial commit [Alin Voinea - [`6a9c03a`](https://github.com/eea/volto-eea-website-theme/commit/6a9c03a7cebe71ca87e82cf58c42904063e9d8d3)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "2.0.1",
+  "version": "2.1.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/CustomCSS/CustomCSS.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 import config from '@plone/volto/registry';
 
 const CustomCSS = (props) => {
+  const href = `${config.settings.apiPath}/voltoCustom.css`;
   return (
-    <link
-      rel={'stylesheet'}
-      href={`${config.settings.apiPath}/voltoCustom.css`}
-    />
+    <>
+      <link rel="stylesheet" href={href} />
+    </>
   );
 };
 export default CustomCSS;

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

@@ -18,12 +18,17 @@ describe('TopicsWidget Component', () => {
       },
     });
 
+    const tags = [
+      { title: 'Environment', token: '1' },
+      { title: 'Climate', token: '2' },
+    ];
+
     const { container } = render(
       <Provider store={store}>
         <Router history={history}>
           <TopicsWidget
-            value={['Value1', 'Value2']}
-            children={''}
+            value={tags}
+            children={(tagTitle) => <span>{tagTitle}</span>}
             className={'test'}
           />
         </Router>

package/src/customizations/@plone/volto-slate/editor/SlateEditor.jsx

@@ -87,10 +87,10 @@ class SlateEditor extends Component {
     const uid = uuid(); // used to namespace the editor's plugins
 
     this.slateSettings = props.slateSettings || config.settings.slate;
-
-    this.initialValue = cloneDeep(
-      this.props.value || this.slateSettings.defaultValue(),
-    );
+    this.initialValue =
+      this.props.value && this.props.value.length > 0
+        ? cloneDeep(this.props.value)
+        : this.slateSettings.defaultValue();
 
     this.state = {
       editor: this.createEditor(uid),
@@ -182,8 +182,11 @@ class SlateEditor extends Component {
       this.props.value &&
       !isEqual(this.props.value, this.state.internalValue)
     ) {
-      const newValue = cloneDeep(this.props.value);
       const { editor } = this.state;
+      const newValue =
+        this.props.value && this.props.value.length > 0
+          ? cloneDeep(this.props.value)
+          : this.slateSettings.defaultValue();
 
       resetNodes(editor, { nodes: newValue });
 
@@ -209,7 +212,6 @@ class SlateEditor extends Component {
 
     if (!prevProps.selected && this.props.selected) {
       // if the SlateEditor becomes selected from unselected
-
       if (window.getSelection().type === 'None') {
         // TODO: why is this condition checked?
         Transforms.select(
@@ -217,7 +219,6 @@ class SlateEditor extends Component {
           Editor.range(this.state.editor, Editor.start(this.state.editor, [])),
         );
       }
-
       ReactEditor.focus(this.state.editor);
     }
 
@@ -331,7 +332,9 @@ class SlateEditor extends Component {
                 this.props.onBlur && this.props.onBlur();
                 return null;
               }}
-              onClick={this.props.onClick}
+              onClick={(e) => {
+                return this.props.onClick && this.props.onClick(e);
+              }}
               onSelect={(e) => {
                 if (!selected && this.props.onFocus) {
                   // we can't overwrite the onFocus of Editable, as the onFocus

package/src/customizations/volto/components/manage/Blocks/Image/Edit.jsx

@@ -313,6 +313,7 @@ class Edit extends Component {
                         '@id': data.url,
                         image_field: data.image_field,
                         image_scales: data.image_scales,
+                        data: data,
                       }
                     : undefined
                 }
@@ -323,7 +324,9 @@ class Edit extends Component {
                     ? // Backwards compat in the case that the block is storing the full server URL
                       (() => {
                         if (data.size === 'l')
-                          return `${flattenToAppURL(data.url)}/@@images/image`;
+                          return `${flattenToAppURL(
+                            data.url,
+                          )}/@@images/image/large`;
                         if (data.size === 'm')
                           return `${flattenToAppURL(
                             data.url,
@@ -332,7 +335,9 @@ class Edit extends Component {
                           return `${flattenToAppURL(
                             data.url,
                           )}/@@images/image/mini`;
-                        return `${flattenToAppURL(data.url)}/@@images/image`;
+                        return `${flattenToAppURL(
+                          data.url,
+                        )}/@@images/image/large`;
                       })()
                     : data.url
                 }

package/src/customizations/volto/components/manage/Blocks/Image/View.jsx

@@ -76,6 +76,7 @@ export const View = (props) => {
                               '@id': data.url,
                               image_field: data.image_field,
                               image_scales: data.image_scales,
+                              data: data,
                             }
                           : undefined
                       }
@@ -88,7 +89,7 @@ export const View = (props) => {
                               if (data.size === 'l')
                                 return `${flattenToAppURL(
                                   data.url,
-                                )}/@@images/image`;
+                                )}/@@images/image/large`;
                               if (data.size === 'm')
                                 return `${flattenToAppURL(
                                   data.url,
@@ -99,7 +100,7 @@ export const View = (props) => {
                                 )}/@@images/image/mini`;
                               return `${flattenToAppURL(
                                 data.url,
-                              )}/@@images/image`;
+                              )}/@@images/image/large`;
                             })()
                           : data.url
                       }

package/src/customizations/volto/components/manage/Blocks/Image/schema.js

@@ -95,10 +95,12 @@ export function ImageSchema({ formData, intl }) {
       align: {
         title: intl.formatMessage(messages.Align),
         widget: 'align',
+        default: 'center',
       },
       size: {
         title: intl.formatMessage(messages.size),
         widget: 'image_size',
+        default: 'l',
       },
       href: {
         title: intl.formatMessage(messages.LinkTo),

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

@@ -9,16 +9,10 @@ import { connect, useDispatch, useSelector } from 'react-redux';
 
 import { withRouter } from 'react-router-dom';
 import { UniversalLink } from '@plone/volto/components';
-import {
-  getBaseUrl,
-  hasApiExpander,
-  flattenToAppURL,
-} from '@plone/volto/helpers';
+import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
 import { getNavigation } from '@plone/volto/actions';
 import { Header, Logo } from '@eeacms/volto-eea-design-system/ui';
 import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
-import { find } from 'lodash';
-import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
 import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
 
 import config from '@plone/volto/registry';
@@ -26,6 +20,9 @@ import { compose } from 'recompose';
 import { BodyClass } from '@plone/volto/helpers';
 
 import cx from 'classnames';
+import loadable from '@loadable/component';
+
+const LazyLanguageSwitcher = loadable(() => import('./LanguageSwitcher'));
 
 function removeTrailingSlash(path) {
   return path.replace(/\/+$/, '');
@@ -35,11 +32,6 @@ function removeTrailingSlash(path) {
  * EEA Specific Header component.
  */
 const EEAHeader = ({ pathname, token, items, history, subsite }) => {
-  const currentLang = useSelector((state) => state.intl.locale);
-  const translations = useSelector(
-    (state) => state.content.data?.['@components']?.translations?.items,
-  );
-
   const router_pathname = useSelector((state) => {
     return removeTrailingSlash(state.router?.location?.pathname) || '';
   });
@@ -61,31 +53,25 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
   const { eea } = config.settings;
   const headerOpts = eea.headerOpts || {};
   const headerSearchBox = eea.headerSearchBox || [];
-  const { logo, logoWhite } = headerOpts || {};
+  const { logo, logoWhite } = headerOpts;
   const width = useSelector((state) => state.screen?.width);
   const dispatch = useDispatch();
   const previousToken = usePrevious(token);
-  const [language, setLanguage] = React.useState(
-    currentLang || eea.defaultLanguage,
-  );
 
   React.useEffect(() => {
-    const { settings } = config;
     const base_url = getBaseUrl(pathname);
+    const { settings } = config;
+
+    // Check if navigation data needs to be fetched based on the API expander availability
     if (!hasApiExpander('navigation', base_url)) {
       dispatch(getNavigation(base_url, settings.navDepth));
     }
-  }, [pathname, dispatch]);
 
-  React.useEffect(() => {
+    // Additional check for token changes
     if (token !== previousToken) {
-      const { settings } = config;
-      const base = getBaseUrl(pathname);
-      if (!hasApiExpander('navigation', base)) {
-        dispatch(getNavigation(base, settings.navDepth));
-      }
+      dispatch(getNavigation(base_url, settings.navDepth));
     }
-  }, [token, dispatch, pathname, previousToken]);
+  }, [pathname, token, dispatch, previousToken]);
 
   return (
     <Header menuItems={items}>
@@ -155,50 +141,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
         {config.settings.isMultilingual &&
           config.settings.supportedLanguages.length > 1 &&
           config.settings.hasLanguageDropdown && (
-            <Header.TopDropdownMenu
-              id="language-switcher"
-              className="item"
-              text={`${language.toUpperCase()}`}
-              mobileText={`${language.toUpperCase()}`}
-              icon={
-                <Image
-                  src={globeIcon}
-                  alt="language dropdown globe icon"
-                ></Image>
-              }
-              viewportWidth={width}
-            >
-              <ul
-                className="wrapper language-list"
-                role="listbox"
-                aria-label="language switcher"
-              >
-                {eea.languages.map((item, index) => (
-                  <Dropdown.Item
-                    as="li"
-                    key={index}
-                    text={
-                      <span>
-                        {item.name}
-                        <span className="country-code">
-                          {item.code.toUpperCase()}
-                        </span>
-                      </span>
-                    }
-                    onClick={() => {
-                      const translation = find(translations, {
-                        language: item.code,
-                      });
-                      const to = translation
-                        ? flattenToAppURL(translation['@id'])
-                        : `/${item.code}`;
-                      setLanguage(item.code);
-                      history.push(to);
-                    }}
-                  ></Dropdown.Item>
-                ))}
-              </ul>
-            </Header.TopDropdownMenu>
+            <LazyLanguageSwitcher width={width} history={history} />
           )}
       </Header.TopHeader>
       <Header.Main

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

@@ -1,19 +1,33 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, getByText } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import configureStore from 'redux-mock-store';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
-
+import { waitFor } from '@testing-library/react';
 import Header from './Header';
 
 const mockStore = configureStore();
 let history = createMemoryHistory();
 
+const item = {
+  '@id': 'en',
+  description: 'Description of item',
+  items: [],
+  review_state: 'published',
+  title: 'Test english article',
+};
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 describe('Header', () => {
-  it('renders a header component', () => {
+  it('renders a header component with homepage_inverse_view layout', () => {
     const store = mockStore({
       userSession: { token: null },
       intl: {
@@ -21,7 +35,7 @@ describe('Header', () => {
         messages: {},
       },
       navigation: {
-        items: ['en'],
+        items: [item],
       },
       content: {
         data: {
@@ -38,22 +52,23 @@ describe('Header', () => {
     config.settings = {
       ...config.settings,
       eea: {
+        ...config.settings.eea,
         headerOpts: undefined,
+        logoTargetUrl: '/',
       },
     };
 
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Router history={history}>
           <Header pathname="/home" />
         </Router>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
-  it('renders a header component', () => {
+  it('renders a header component with homepage_view layout and translations', async () => {
     const store = mockStore({
       userSession: { token: null },
       intl: {
@@ -61,47 +76,7 @@ describe('Header', () => {
         messages: {},
       },
       navigation: {
-        items: ['en'],
-      },
-      content: {
-        data: {
-          layout: 'homepage_inverse_view',
-        },
-      },
-      router: {
-        location: {
-          pathname: '/home/',
-        },
-      },
-    });
-
-    config.settings = {
-      ...config.settings,
-      eea: {
-        headerOpts: {},
-      },
-    };
-
-    const component = renderer.create(
-      <Provider store={store}>
-        <Router history={history}>
-          <Header pathname="/blog" />
-        </Router>
-      </Provider>,
-    );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-
-  it('renders a header component', () => {
-    const store = mockStore({
-      userSession: { token: null },
-      intl: {
-        locale: undefined,
-        messages: {},
-      },
-      navigation: {
-        items: ['en'],
+        items: [item],
       },
       content: {
         data: {
@@ -123,6 +98,7 @@ describe('Header', () => {
     config.settings = {
       ...config.settings,
       eea: {
+        ...config.settings.eea,
         headerOpts: {
           partnerLinks: {
             links: [{ href: '/link1', title: 'link 1' }],
@@ -145,6 +121,9 @@ describe('Header', () => {
     );
 
     fireEvent.click(container.querySelector('.content'));
+    await waitFor(() => {
+      expect(container.querySelector('.country-code')).not.toBeNull();
+    });
     fireEvent.keyDown(container.querySelector('.content'), { keyCode: 37 });
     fireEvent.keyDown(container.querySelector('.content a'), { keyCode: 37 });
     fireEvent.keyDown(container.querySelector('a[href="/link1"]'), {
@@ -152,7 +131,7 @@ describe('Header', () => {
     });
     fireEvent.click(container.querySelector('.country-code'));
 
-    // expect(getByText('da')).toBeInTheDocument();
+    expect(getByText(container, 'RO')).toBeInTheDocument();
 
     rerender(
       <Provider store={{ ...store, userSession: { token: '1234' } }}>
@@ -163,15 +142,15 @@ describe('Header', () => {
     );
   });
 
-  it('renders a header component', () => {
+  it('renders a header component with a subsite', async () => {
     const store = mockStore({
       userSession: { token: null },
       intl: {
-        locale: undefined,
+        locale: 'en',
         messages: {},
       },
       navigation: {
-        items: ['en'],
+        items: [item],
       },
       content: {
         data: {
@@ -179,6 +158,7 @@ describe('Header', () => {
           '@components': {
             subsite: {
               '@type': 'Subsite',
+              '@id': 'http://localhost:8080/Plone/subsite',
               title: 'Home Page',
               subsite_logo: {
                 scales: {
@@ -205,6 +185,7 @@ describe('Header', () => {
     config.settings = {
       ...config.settings,
       eea: {
+        ...config.settings.eea,
         headerOpts: {
           partnerLinks: {
             links: [{ href: '/link1', title: 'link 1' }],
@@ -227,6 +208,9 @@ describe('Header', () => {
     );
 
     fireEvent.click(container.querySelector('.content'));
+    await waitFor(() => {
+      expect(container.querySelector('.country-code')).not.toBeNull();
+    });
     fireEvent.keyDown(container.querySelector('.content'), { keyCode: 37 });
     fireEvent.keyDown(container.querySelector('.content a'), { keyCode: 37 });
     fireEvent.keyDown(container.querySelector('a[href="/link1"]'), {
@@ -234,7 +218,7 @@ describe('Header', () => {
     });
     fireEvent.click(container.querySelector('.country-code'));
 
-    // expect(getByText('da')).toBeInTheDocument();
+    expect(getByText(container, 'RO')).toBeInTheDocument();
 
     rerender(
       <Provider store={{ ...store, userSession: { token: '1234' } }}>
@@ -245,17 +229,17 @@ describe('Header', () => {
     );
   });
 
-  it('renders a header component', () => {
+  it('renders a header component with a subsite and two children', async () => {
     const store = mockStore({
       userSession: { token: null },
       intl: {
-        locale: undefined,
+        locale: 'en',
         messages: {},
       },
       navigation: {
         items: [
           { url: '/test1', title: 'test 1', nav_title: 'Test 1', items: [] },
-          { url: undefined, title: 'test 2', items: [] },
+          { url: '/test2', title: 'test 2', items: [] },
         ],
       },
       content: {
@@ -264,6 +248,7 @@ describe('Header', () => {
           '@components': {
             subsite: {
               '@type': 'Subsite',
+              '@id': 'http://localhost:8080/Plone/subsite',
               title: 'Home Page',
               subsite_logo: undefined,
             },
@@ -283,6 +268,7 @@ describe('Header', () => {
     config.settings = {
       ...config.settings,
       eea: {
+        ...config.settings.eea,
         headerOpts: {
           partnerLinks: {
             links: [{ href: '/link1', title: 'link 1' }],
@@ -305,6 +291,9 @@ describe('Header', () => {
     );
 
     fireEvent.click(container.querySelector('.content'));
+    await waitFor(() => {
+      expect(container.querySelector('.country-code')).not.toBeNull();
+    });
     fireEvent.keyDown(container.querySelector('.content'), { keyCode: 37 });
     fireEvent.keyDown(container.querySelector('.content a'), { keyCode: 37 });
     fireEvent.keyDown(container.querySelector('a[href="/link1"]'), {
@@ -313,7 +302,7 @@ describe('Header', () => {
     fireEvent.click(container.querySelector('.country-code'));
     fireEvent.click(container.querySelector('a[href="/test1"]'));
 
-    // expect(getByText('da')).toBeInTheDocument();
+    expect(getByText(container, 'RO')).toBeInTheDocument();
 
     rerender(
       <Provider store={{ ...store, userSession: { token: '1234' } }}>

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Dropdown, Image } from 'semantic-ui-react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { find } from 'lodash';
+import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
+import config from '@plone/volto/registry';
+import { Header } from '@eeacms/volto-eea-design-system/ui';
+
+/**
+ * LanguageSwitcher component.
+ * Provides a dropdown menu for language selection, changing the application's
+ * language and navigating to the corresponding translated URL.
+ *
+ * @param {Object} props - The component props.
+ * @param {number} props.width - The viewport width to adjust the dropdown display.
+ * @param {Object} props.history - The history object from React Router for navigation.
+ */
+const LanguageSwitcher = ({ width, history }) => {
+  const currentLang = useSelector((state) => state.intl.locale);
+  const translations = useSelector(
+    (state) => state.content.data?.['@components']?.translations?.items,
+  );
+  const { eea } = config.settings;
+
+  const [language, setLanguage] = React.useState(
+    currentLang || eea.defaultLanguage,
+  );
+
+  return (
+    <Header.TopDropdownMenu
+      id="language-switcher"
+      className="item"
+      text={`${language.toUpperCase()}`}
+      mobileText={`${language.toUpperCase()}`}
+      icon={<Image src={globeIcon} alt="language dropdown globe icon"></Image>}
+      viewportWidth={width}
+    >
+      <ul
+        className="wrapper language-list"
+        role="listbox"
+        aria-label="language switcher"
+      >
+        {eea.languages.map((item, index) => (
+          <Dropdown.Item
+            as="li"
+            key={index}
+            text={
+              <span>
+                {item.name}
+                <span className="country-code">{item.code.toUpperCase()}</span>
+              </span>
+            }
+            onClick={() => {
+              const translation = find(translations, {
+                language: item.code,
+              });
+              const to = translation
+                ? flattenToAppURL(translation['@id'])
+                : `/${item.code}`;
+              setLanguage(item.code);
+              history.push(to);
+            }}
+          ></Dropdown.Item>
+        ))}
+      </ul>
+    </Header.TopDropdownMenu>
+  );
+};
+
+export default LanguageSwitcher;

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

@@ -0,0 +1,119 @@
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { flattenToAppURL, flattenScales } from '@plone/volto/helpers';
+
+/**
+ * Determines the image scale name based on the provided data.
+ *
+ * @param {object} data - The data object containing the image size information.
+ * @param {string} [data.size] - The size of the image, can be 'l', 'm', or 's'.
+ * @returns {string} The name of the image scale, either 'large', 'preview', or 'mini'.
+ */
+const imageScaleName = (data) => {
+  if (!data) return 'large';
+  if (data.size === 'l') return 'large';
+  if (data.size === 'm') return 'preview';
+  if (data.size === 's') return 'mini';
+  return 'large';
+};
+
+/**
+ * Image component
+ * @param {object} item - Context item that has the image field (can also be a catalog brain or summary)
+ * @param {string} imageField - Key of the image field inside the item, or inside the image_scales object of the item if it is a catalog brain or summary
+ * @param {string} src - URL of the image to be used if the item field is not available
+ * @param {string} alt - Alternative text for the image
+ * @param {boolean} loading - (default: eager) set to `lazy` to lazy load the image
+ * @param {boolean} responsive - (default: false) set to `true` to add the `responsive` class to the image
+ * @param {string} className - Additional classes to add to the image
+ */
+export default function Image({
+  item,
+  imageField,
+  src,
+  alt = '',
+  loading = 'eager',
+  responsive = false,
+  className = '',
+  ...imageProps
+}) {
+  if (!item && !src) return null;
+
+  // TypeScript hints for editor autocomplete :)
+  /** @type {React.ImgHTMLAttributes<HTMLImageElement>} */
+  const attrs = {};
+
+  if (!item && src) {
+    attrs.src = src;
+    attrs.className = cx(className, { responsive });
+  } else {
+    const isFromRealObject = !item.image_scales;
+    const imageFieldWithDefault = imageField || item.image_field || 'image';
+
+    const image = isFromRealObject
+      ? flattenScales(item['@id'], item[imageFieldWithDefault])
+      : flattenScales(
+          item['@id'],
+          item.image_scales[imageFieldWithDefault]?.[0],
+        );
+
+    if (!image) return null;
+
+    const isSvg = image['content-type'] === 'image/svg+xml';
+    // In case `base_path` is present (`preview_image_link`) use it as base path
+    const basePath = image.base_path || item['@id'];
+    const relativeBasePath = flattenToAppURL(basePath);
+    const selectedScale = imageScaleName(item.data);
+
+    attrs.src = `${relativeBasePath}/${image.download}`;
+    attrs.width = image.width;
+    attrs.height = image.height;
+    attrs.className = cx(className, { responsive });
+
+    if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
+      const filteredScales = [
+        'mini',
+        'preview',
+        'large',
+        item.data?.align === 'full' ? 'huge' : undefined,
+      ]
+        .map((key) => image.scales[key])
+        .filter(Boolean);
+      const imageScale = image.scales[selectedScale];
+      if (imageScale) {
+        // set default image size, width and height to the selected scale
+        attrs.width = imageScale.width;
+        attrs.height = imageScale.height;
+        attrs.src = `${relativeBasePath}/${imageScale.download}`;
+      }
+
+      attrs.srcSet = filteredScales
+        .map((scale) => `${relativeBasePath}/${scale.download} ${scale.width}w`)
+        .join(', ');
+    }
+  }
+
+  if (loading === 'lazy') {
+    attrs.loading = 'lazy';
+    attrs.decoding = 'async';
+  } else {
+    attrs.fetchpriority = 'high';
+  }
+
+  return <img {...attrs} alt={alt} {...imageProps} />;
+}
+
+Image.propTypes = {
+  item: PropTypes.shape({
+    '@id': PropTypes.string,
+    image_field: PropTypes.string,
+    image_scales: PropTypes.object,
+    image: PropTypes.object,
+  }),
+  imageField: PropTypes.string,
+  src: PropTypes.string,
+  alt: PropTypes.string.isRequired,
+  loading: PropTypes.string,
+  responsive: PropTypes.bool,
+  className: PropTypes.string,
+};

package/src/customizations/volto/components/theme/Image/README.md

@@ -0,0 +1,3 @@
+Customized Image component to restrict the image scales passed to srcset.
+Right now we could select the small size and yet on FHD displays the image served
+would be the huge scale.

package/src/index.js

@@ -194,6 +194,18 @@ const applyConfig = (config) => {
   if (config.blocks.blocksConfig.image) {
     config.blocks.blocksConfig.image.schemaEnhancer =
       addStylingFieldsetSchemaEnhancerImagePosition;
+    config.blocks.blocksConfig.image.getSizes = function (data) {
+      if (data.size === 'm' || data.size === 's') return undefined;
+
+      if (data.align === 'left' || data.align === 'right') {
+        if (data.size === 'l') return '400px';
+        if (data.size === 'm') return '200px';
+        if (data.size === 's') return '200px';
+      }
+      if (data.size === 'l') {
+        return '(max-width: 600px) 400px, (max-width: 1440px) 800px, 100vw';
+      }
+    };
   }
 
   // Set Languages in nextcloud-video-block