@eeacms/volto-eea-website-theme 2.0.2 → 2.1.1

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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.1.1](https://github.com/eea/volto-eea-website-theme/compare/2.1.0...2.1.1) - 28 May 2024
+
+#### :bug: Bug Fixes
+
+- fix: wait for the draft version to be created - refs #270058 [dobri1408 - [`d32b0d7`](https://github.com/eea/volto-eea-website-theme/commit/d32b0d7d020ead173c13789936a95c6407bddcd6)]
+
+#### :hammer_and_wrench: Others
+
+- Fix  InternalUrlWidget.jsx until merged in volto core - refs #269272 [dobri1408 - [`73c383a`](https://github.com/eea/volto-eea-website-theme/commit/73c383a4bf1cc77902601493ad4aa359581f5c2c)]
+### [2.1.0](https://github.com/eea/volto-eea-website-theme/compare/2.0.2...2.1.0) - 23 May 2024
+
+#### :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
 
 ### [2.0.1](https://github.com/eea/volto-eea-website-theme/compare/2.0.0...2.0.1) - 15 May 2024

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "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/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/manage/Widgets/InternalUrlWidget.jsx

@@ -0,0 +1,189 @@
+/**
+ * UrlWidget component.
+ * @module components/manage/Widgets/UrlWidget
+ * Volto pr: https://github.com/plone/volto/pull/6036
+ * Remove after the pr has been merged and put in the right version
+ */
+
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Input, Button } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import { isInternalURL, flattenToAppURL, URLUtils } from '@plone/volto/helpers';
+import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import navTreeSVG from '@plone/volto/icons/nav.svg';
+
+/** Widget to edit urls
+ *
+ * This is the default widget used for the `remoteUrl` field. You can also use
+ * it by declaring a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "URL",
+ *  widget: 'url',
+ * }
+ * ```
+ */
+export const InternalUrlWidget = (props) => {
+  const {
+    id,
+    onChange,
+    onBlur,
+    onClick,
+    minLength,
+    maxLength,
+    placeholder,
+    isDisabled,
+    value: propValue,
+  } = props;
+  const inputId = `field-${id}`;
+
+  const [value, setValue] = useState(flattenToAppURL(propValue));
+  const [isInvalid, setIsInvalid] = useState(false);
+
+  useEffect(() => {
+    if (propValue !== value) {
+      setValue(flattenToAppURL(propValue));
+    }
+  }, [propValue, value]);
+  /**
+   * Clear handler
+   * @method clear
+   * @param {Object} value Value
+   * @returns {undefined}
+   */
+  const clear = () => {
+    setValue('');
+    onChange(id, undefined);
+  };
+
+  const onChangeValue = (_value) => {
+    let newValue = _value;
+    if (newValue?.length > 0) {
+      if (isInvalid && URLUtils.isUrl(URLUtils.normalizeUrl(newValue))) {
+        setIsInvalid(false);
+      }
+
+      if (isInternalURL(newValue)) {
+        newValue = flattenToAppURL(newValue);
+      }
+    }
+
+    setValue(newValue);
+
+    newValue = isInternalURL(newValue) ? flattenToAppURL(newValue) : newValue;
+
+    if (!isInternalURL(newValue) && newValue.length > 0) {
+      const checkedURL = URLUtils.checkAndNormalizeUrl(newValue);
+      newValue = checkedURL.url;
+      if (!checkedURL.isValid) {
+        setIsInvalid(true);
+      }
+    }
+
+    onChange(id, newValue === '' ? undefined : newValue);
+  };
+
+  return (
+    <FormFieldWrapper {...props} className="url wide">
+      <div className="wrapper">
+        <Input
+          id={inputId}
+          name={id}
+          type="url"
+          value={value || ''}
+          disabled={isDisabled}
+          placeholder={placeholder}
+          onChange={({ target }) => onChangeValue(target.value)}
+          onBlur={({ target }) =>
+            onBlur(id, target.value === '' ? undefined : target.value)
+          }
+          onClick={() => onClick()}
+          minLength={minLength || null}
+          maxLength={maxLength || null}
+          error={isInvalid}
+        />
+        {value?.length > 0 ? (
+          <Button.Group>
+            <Button
+              basic
+              className="cancel"
+              aria-label="clearUrlBrowser"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                clear();
+              }}
+            >
+              <Icon name={clearSVG} size="30px" />
+            </Button>
+          </Button.Group>
+        ) : (
+          <Button.Group>
+            <Button
+              basic
+              icon
+              aria-label="openUrlBrowser"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                props.openObjectBrowser({
+                  mode: 'link',
+                  overlay: true,
+                  onSelectItem: (url) => {
+                    onChangeValue(url);
+                  },
+                });
+              }}
+            >
+              <Icon name={navTreeSVG} size="24px" />
+            </Button>
+          </Button.Group>
+        )}
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+/**
+ * Property types
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+InternalUrlWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  minLength: PropTypes.number,
+  maxLength: PropTypes.number,
+  openObjectBrowser: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+InternalUrlWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  onChange: () => {},
+  onBlur: () => {},
+  onClick: () => {},
+  minLength: null,
+  maxLength: null,
+};
+
+export default withObjectBrowser(InternalUrlWidget);

package/src/customizations/volto/components/manage/Workflow/Workflow.jsx

@@ -258,10 +258,14 @@ const Workflow = (props) => {
   };
 
   useEffect(() => {
-    if (selectedOption?.value === 'createNewVersion' && workflowLoaded) {
+    if (
+      selectedOption?.value === 'createNewVersion' &&
+      workflowLoaded &&
+      loaded
+    ) {
       history.push(`${pathname}.1`);
     }
-  }, [history, pathname, selectedOption?.value, workflowLoaded]);
+  }, [history, pathname, selectedOption?.value, workflowLoaded, loaded]);
 
   const { Placeholder } = props.reactSelect.components;
   const Select = props.reactSelect.default;

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