@eeacms/volto-eea-website-theme 1.23.0 → 1.24.1

package/CHANGELOG.md

@@ -4,6 +4,41 @@ 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.24.1](https://github.com/eea/volto-eea-website-theme/compare/1.24.0...1.24.1) - 27 November 2023
+
+#### :nail_care: Enhancements
+
+- change(header): added commented option on how you could add a * option to affect any page that has no layout [David Ichim - [`22f670f`](https://github.com/eea/volto-eea-website-theme/commit/22f670fc6b5876b89c526920226f02558cd84572)]
+
+#### :hammer_and_wrench: Others
+
+- Revert "test: Temp bypass sonarqube coverage in order to release" [Alin Voinea - [`5c304d5`](https://github.com/eea/volto-eea-website-theme/commit/5c304d573f59e49daa96f92a74f0573fd00205ea)]
+### [1.24.0](https://github.com/eea/volto-eea-website-theme/compare/1.23.0...1.24.0) - 22 November 2023
+
+#### :bug: Bug Fixes
+
+- fix(tabs): check if schema has properties, data and schemaExtender when trying to modify the tab schema [David Ichim - [`93edc3f`](https://github.com/eea/volto-eea-website-theme/commit/93edc3f8db0cd09f3aa63a12ef881326e9b676af)]
+- fix(header): updated tests snapshot after latest changes [David Ichim - [`3143810`](https://github.com/eea/volto-eea-website-theme/commit/3143810fe3f4c439261f47b1360f4f570a8670c8)]
+- fix(header): eu logo alt text and text top menu dropdowns are now read by screen readers [David Ichim - [`6ed4642`](https://github.com/eea/volto-eea-website-theme/commit/6ed4642819e7d2aa8c2a1d5d4e34e42dbef3a652)]
+
+#### :nail_care: Enhancements
+
+- change(tests): commented out rss test since title block config is missing [David Ichim - [`85cc1e4`](https://github.com/eea/volto-eea-website-theme/commit/85cc1e4662e6df8a73a6fa7fd06b6d555c04327c)]
+- change(card): added aria-label for tag Search for content tagged with *tag* [David Ichim - [`c40eb1a`](https://github.com/eea/volto-eea-website-theme/commit/c40eb1ae91c6e7509d0e0fe647b413136b67b7b4)]
+- change(card): render listing card tags using our Tag component instead of label #256134 [David Ichim - [`13994e8`](https://github.com/eea/volto-eea-website-theme/commit/13994e866068673329082c2f33f9d565d3a4cbf7)]
+- change(header): add language top menu only if condition for multilingual or hasLanguageDropdown is set [David Ichim - [`7649bd3`](https://github.com/eea/volto-eea-website-theme/commit/7649bd3781dbf71fc4992d48cfd90654117bb19a)]
+
+#### :hammer_and_wrench: Others
+
+- test: Temp bypass sonarqube coverage in order to release [Alin Voinea - [`f23b1e0`](https://github.com/eea/volto-eea-website-theme/commit/f23b1e06f7ea5d7c8ec71d1229bb2fdb3016ee00)]
+- 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
@@ -16,6 +51,7 @@ 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)]
 
@@ -201,6 +237,7 @@ 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
 
@@ -356,6 +393,7 @@ 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
@@ -502,6 +540,7 @@ 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
@@ -535,6 +574,7 @@ 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
 
@@ -544,6 +584,7 @@ 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
@@ -554,6 +595,7 @@ 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
@@ -594,6 +636,7 @@ 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
@@ -641,6 +684,7 @@ 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
@@ -908,6 +952,7 @@ 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)]
@@ -949,4 +994,5 @@ 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/cypress.config.js

@@ -2,12 +2,12 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   viewportWidth: 1280,
-  defaultCommandTimeout: 5000,
+  defaultCommandTimeout: 8888,
   chromeWebSecurity: false,
   reporter: 'junit',
-  video: true,
+  video: false,
   retries: {
-    runMode: 1,
+    runMode: 2,
     openMode: 0,
   },
   reporterOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.23.0",
+  "version": "1.24.1",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -23,6 +23,7 @@
     "url": "git@github.com:eea/volto-eea-website-theme.git"
   },
   "dependencies": {
+    "@eeacms/volto-block-style": "*",
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-group-block": "*",
     "volto-subsites": "*"

package/src/components/manage/Blocks/Title/schema.js

@@ -1,3 +1,13 @@
+import alignTopSVG from '@plone/volto/icons/move-up.svg';
+import alignCenterSVG from '@plone/volto/icons/row.svg';
+import alignBottomSVG from '@plone/volto/icons/move-down.svg';
+
+const ALIGN_INFO_MAP_IMAGE_POSITION = {
+  'has--bg--top': [alignTopSVG, 'Top'],
+  'has--bg--center': [alignCenterSVG, 'Center'],
+  'has--bg--bottom': [alignBottomSVG, 'Bottom'],
+};
+
 const infoSchema = {
   title: 'Info',
   fieldsets: [
@@ -69,6 +79,11 @@ export default {
       title: 'Copyright',
       fields: ['copyright', 'copyrightIcon', 'copyrightPosition'],
     },
+    {
+      id: 'styling',
+      title: 'Styles',
+      fields: ['styles'],
+    },
   ],
   properties: {
     hideContentType: {
@@ -129,10 +144,34 @@ export default {
     },
     copyrightPosition: {
       title: 'Align',
-      widget: 'align',
+      widget: 'style_align',
       actions: ['left', 'right'],
       defaultValue: 'left',
     },
+    styles: {
+      widget: 'object',
+      title: 'Styling',
+      schema: {
+        fieldsets: [
+          {
+            id: 'default',
+            title: 'Default',
+            fields: ['bg'],
+          },
+        ],
+        properties: {
+          bg: {
+            title: 'Image position',
+            widget: 'style_align',
+            actions: Object.keys(ALIGN_INFO_MAP_IMAGE_POSITION),
+            actionsInfoMap: ALIGN_INFO_MAP_IMAGE_POSITION,
+            defaultValue: 'has--bg--center',
+          },
+        },
+        required: [],
+      },
+    },
   },
+
   required: [],
 };

package/src/components/theme/Banner/View.jsx

@@ -81,6 +81,7 @@ const View = (props) => {
     copyrightPosition,
     rssLinks,
     subtitle,
+    styles,
     // contentType,
   } = props.data;
   const copyrightPrefix =
@@ -112,7 +113,7 @@ const View = (props) => {
   const type = metadata.type_title || friendlyId(metadata['@type']);
 
   return (
-    <Banner {...props} image={image}>
+    <Banner {...props} image={image} styles={styles}>
       <Banner.Content
         actions={
           <>

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

@@ -266,12 +266,15 @@ class Edit extends Component {
           {data.url ? (
             <>
               <img
-                className={cx({
-                  'full-width': data.align === 'full',
-                  large: data.size === 'l',
-                  medium: data.size === 'm',
-                  small: data.size === 's',
-                })}
+                className={cx(
+                  {
+                    'full-width': data.align === 'full',
+                    large: data.size === 'l',
+                    medium: data.size === 'm',
+                    small: data.size === 's',
+                  },
+                  data?.styles?.objectPosition,
+                )}
                 src={
                   isInternalURL(data.url)
                     ? // Backwards compat in the case that the block is storing the full server URL

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

@@ -61,12 +61,15 @@ export const View = (props) => {
                   const image = (
                     <>
                       <img
-                        className={cx({
-                          'full-width': data.align === 'full',
-                          large: data.size === 'l',
-                          medium: data.size === 'm',
-                          small: data.size === 's',
-                        })}
+                        className={cx(
+                          {
+                            'full-width': data.align === 'full',
+                            large: data.size === 'l',
+                            medium: data.size === 'm',
+                            small: data.size === 's',
+                          },
+                          data?.styles?.objectPosition,
+                        )}
                         src={
                           isInternalURL(data.url)
                             ? // Backwards compat in the case that the block is storing the full server URL

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

@@ -84,8 +84,7 @@ class Edit extends Component {
     const placeholder =
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
-    const { copyright, copyrightIcon, copyrightPosition } = data;
-
+    const { copyright, copyrightIcon, copyrightPosition, styles } = data;
     return (
       <div
         className={cx(
@@ -97,7 +96,9 @@ class Edit extends Component {
         )}
       >
         <div
-          className={`image-block-container ${data?.align ? data?.align : ''}`}
+          className={cx(
+            `image-block-container ${data?.align ? data?.align : ''}`,
+          )}
         >
           {!properties.image && (
             <Message>
@@ -110,7 +111,10 @@ class Edit extends Component {
           {properties.image && (
             <div className="image-block">
               <img
-                className={cx({ 'full-width': data.align === 'full' })}
+                className={cx(
+                  { 'full-width': data.align === 'full' },
+                  styles?.objectPosition,
+                )}
                 src={
                   properties.image.data
                     ? `data:${properties.image['content-type']};base64,${properties.image.data}`

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

@@ -18,7 +18,7 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  */
 const View = (props) => {
   const { data, properties } = props;
-  const { copyright, copyrightIcon, copyrightPosition } = data;
+  const { copyright, copyrightIcon, copyrightPosition, styles } = data;
 
   // const [hovering, setHovering] = React.useState(false);
   const [viewLoaded, setViewLoaded] = React.useState(false);
@@ -40,9 +40,9 @@ const View = (props) => {
           )}
         >
           <div
-            className={`image-block-container ${
-              data?.align ? data?.align : ''
-            }`}
+            className={cx(
+              `image-block-container ${data?.align ? data?.align : ''}`,
+            )}
           >
             {properties.image && (
               <>
@@ -50,7 +50,10 @@ const View = (props) => {
                   const image = (
                     <div className="image-block">
                       <img
-                        className={cx({ 'full-width': data.align === 'full' })}
+                        className={cx(
+                          { 'full-width': data.align === 'full' },
+                          styles?.objectPosition,
+                        )}
                         src={flattenToAppURL(properties.image.download)}
                         alt={properties.image_caption || ''}
                       />

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

@@ -42,7 +42,6 @@ const messages = defineMessages({
     defaultMessage: 'External URL',
   },
 });
-
 export function LeadImageSchema({ formData, intl }) {
   return {
     fieldsets: [

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

@@ -92,21 +92,22 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
       {isHomePageInverse && <BodyClass className="homepage" />}
       <Header.TopHeader>
         <Header.TopItem className="official-union">
-          <Image src={eeaFlag} alt="eea flag"></Image>
+          <Image src={eeaFlag} alt="European Union flag"></Image>
           <Header.TopDropdownMenu
             text="An official website of the European Union | How do you know?"
             tabletText="EEA information systems"
-            mobileText=" "
+            mobileText="EEA information systems"
             icon="chevron down"
             aria-label="dropdown"
-            className=""
+            classNameHeader="mobile-sr-only"
             viewportWidth={width}
           >
-            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
             <div
               className="content"
               onClick={(evt) => evt.stopPropagation()}
               onKeyDown={(evt) => evt.stopPropagation()}
+              tabIndex={0}
+              role={'presentation'}
             >
               <p>
                 All official European Union website addresses are in the{' '}
@@ -129,9 +130,10 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
             <Header.TopDropdownMenu
               id="theme-sites"
               text={headerOpts.partnerLinks.title}
+              aria-label={headerOpts.partnerLinks.title}
               viewportWidth={width}
             >
-              <div className="wrapper">
+              <div className="wrapper" tabIndex={0} role={'presentation'}>
                 {headerOpts.partnerLinks.links.map((item, index) => (
                   <Dropdown.Item key={index}>
                     <a
@@ -150,53 +152,54 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
           </Header.TopItem>
         )}
 
-        {config.settings.isMultilingual && (
-          <Header.TopDropdownMenu
-            id="language-switcher"
-            className="item"
-            hasLanguageDropdown={
-              config.settings.supportedLanguages.length > 1 &&
-              config.settings.hasLanguageDropdown
-            }
-            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"
+        {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}
             >
-              {eea.languages.map((item, index) => (
-                <Dropdown.Item
-                  as="li"
-                  key={index}
-                  text={
-                    <span>
-                      {item.name}
-                      <span className="country-code">
-                        {item.code.toUpperCase()}
+              <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>
-                    </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>
-        )}
+                    }
+                    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>
+          )}
       </Header.TopHeader>
       <Header.Main
         pathname={pathname}

package/src/helpers/schema-utils.js

@@ -1,8 +1,11 @@
-import { cloneDeep } from 'lodash';
 import imageNarrowSVG from '@eeacms/volto-eea-website-theme/icons/image-narrow.svg';
 import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageWideSVG from '@plone/volto/icons/image-wide.svg';
 import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import alignTopSVG from '@plone/volto/icons/move-up.svg';
+import alignCenterSVG from '@plone/volto/icons/row.svg';
+import alignBottomSVG from '@plone/volto/icons/move-down.svg';
+import { addStyling } from '@plone/volto/helpers';
 
 export const ALIGN_INFO_MAP = {
   narrow_width: [imageNarrowSVG, 'Narrow width'],
@@ -10,45 +13,48 @@ export const ALIGN_INFO_MAP = {
   wide_width: [imageWideSVG, 'Wide width'],
   full: [imageFullSVG, 'Full width'],
 };
+const ALIGN_INFO_MAP_IMAGE_POSITION = {
+  'has--object-position--top': [alignTopSVG, 'Top'],
+  'has--object-position--center': [alignCenterSVG, 'Center'],
+  'has--object-position--bottom': [alignBottomSVG, 'Bottom'],
+};
 
-export const addStylingFieldsetSchemaEnhancer = ({ schema }) => {
-  const applied = schema?.properties?.styles;
+export const addStylingFieldsetSchemaEnhancer = (props) => {
+  const schema = addStyling(props);
+  schema.properties.styles.schema.properties.size = {
+    widget: 'style_align',
+    title: 'Section size',
+    actions: Object.keys(ALIGN_INFO_MAP),
+    actionsInfoMap: ALIGN_INFO_MAP,
+  };
 
-  if (!applied) {
-    const resSchema = cloneDeep(schema);
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+    'size',
+  ];
 
-    resSchema.fieldsets.push({
-      id: 'styling',
-      fields: ['styles'],
-      title: 'Styling',
-    });
-    resSchema.properties.styles = {
-      widget: 'object',
-      title: 'Styling',
-      schema: {
-        fieldsets: [
-          {
-            id: 'default',
-            title: 'Default',
-            fields: ['size'],
-          },
-        ],
-        properties: {
-          size: {
-            widget: 'style_align',
-            title: 'Section size',
-            actions: Object.keys(ALIGN_INFO_MAP),
-            actionsInfoMap: ALIGN_INFO_MAP,
-          },
-        },
-        required: [],
-      },
-    };
-    return resSchema;
-  }
+  return schema;
+};
+
+export const addStylingFieldsetSchemaEnhancerImagePosition = (props) => {
+  const schema = addStyling(props);
+
+  schema.properties.styles.schema.properties.objectPosition = {
+    title: 'Image position',
+    widget: 'style_align',
+    actions: Object.keys(ALIGN_INFO_MAP_IMAGE_POSITION),
+    actionsInfoMap: ALIGN_INFO_MAP_IMAGE_POSITION,
+    defaultValue: 'has--object-position--center',
+  };
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+    'objectPosition',
+  ];
 
   return schema;
 };
+
 export const getVoltoStyles = (props) => {
   // return an object with same key and value for cx class setting
   const styles = props ? props : {};

package/src/index.js

@@ -8,10 +8,15 @@ import { TokenWidget } from '@eeacms/volto-eea-website-theme/components/theme/Wi
 import { TopicsWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TopicsWidget';
 import { Icon } from '@plone/volto/components';
 import { getBlocks } from '@plone/volto/helpers';
+import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
+
+import {
+  addStylingFieldsetSchemaEnhancer,
+  addStylingFieldsetSchemaEnhancerImagePosition,
+} from '@eeacms/volto-eea-website-theme/helpers/schema-utils';
 
 import installLayoutSettingsBlock from '@eeacms/volto-eea-website-theme/components/manage/Blocks/LayoutSettings';
 import installCustomTitle from '@eeacms/volto-eea-website-theme/components/manage/Blocks/Title';
-import { addStylingFieldsetSchemaEnhancer } from '@eeacms/volto-eea-website-theme/helpers/schema-utils';
 
 import FlexGroup from '@eeacms/volto-eea-website-theme/components/manage/Blocks/GroupBlockTemplate/FlexGroup/FlexGroup';
 import BaseTag from './components/theme/BaseTag';
@@ -23,6 +28,7 @@ import voltoCustomMiddleware from './middleware/voltoCustom';
 import installSlate from './slate';
 
 import * as eea from './config';
+import React from 'react';
 
 const restrictedBlocks = [
   '__grid', // Grid/Teaser block (kitconcept)
@@ -60,7 +66,7 @@ function tabVariationCustomization(tabs_block_variations, config) {
   config.blocks.blocksConfig.tabs_block.schemaEnhancer = (props) => {
     const schema = (oldSchemaEnhancer ? oldSchemaEnhancer(props) : props)
       .schema;
-    const oldSchemaExtender = schema.properties.data.schemaExtender;
+    const oldSchemaExtender = schema.properties?.data?.schemaExtender;
     schema.properties.data.schemaExtender = (schema, child) => {
       const innerSchema = oldSchemaExtender
         ? oldSchemaExtender(schema, child)
@@ -132,6 +138,16 @@ const applyConfig = (config) => {
       config.blocks.blocksConfig[block].restricted = true;
     }
   });
+
+  //Apply the image position style for image and leadimage blocks
+  if (config.blocks.blocksConfig.leadimage) {
+    config.blocks.blocksConfig.leadimage.schemaEnhancer = addStylingFieldsetSchemaEnhancerImagePosition;
+  }
+
+  if (config.blocks.blocksConfig.image) {
+    config.blocks.blocksConfig.image.schemaEnhancer = addStylingFieldsetSchemaEnhancerImagePosition;
+  }
+
   // Set Languages in nextcloud-video-block
   if (
     config?.blocks?.blocksConfig?.nextCloudVideo?.subtitlesLanguages &&
@@ -397,6 +413,10 @@ const applyConfig = (config) => {
     '/en/about': {
       hideChildrenFromNavigation: false,
     },
+    // if you want to set default settings for all menu items that don't have a specific path
+    // '*': {
+    //   hideChildrenFromNavigation: false,
+    // },
   };
 
   // layout settings
@@ -441,6 +461,22 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.accordion.mostUsed = true;
   }
 
+  // Teaser block changes
+  if (config.blocks.blocksConfig.teaser) {
+    // Use volto-eea-design-system Tag component for rendering teaser tags
+    config.blocks.blocksConfig.teaser.renderTag = (tag, index) => {
+      return (
+        <Tag
+          href={`https://www.eea.europa.eu/en/advanced-search?filters[0][field]=topic&filters[0][values][0]=${tag}&filters[0][type]=any&filters[1][field]=language&filters[1][type]=any&filters[1][values][0]=en&filters[2][field]=issued.date&filters[2][values][0]=Last 5 years&filters[2][type]=any&sort-field=issued.date&sort-direction=desc`}
+          key={index}
+          aria-label={`Search for content tagged with ${tag}`}
+        >
+          {tag}
+        </Tag>
+      );
+    };
+  }
+
   // Breadcrumbs
   config.settings.apiExpanders.push({
     match: '',