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

package/CHANGELOG.md

@@ -4,6 +4,27 @@ 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.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)]
 ### [1.23.0](https://github.com/eea/volto-eea-website-theme/compare/1.22.1...1.23.0) - 2 November 2023
 
 #### :rocket: New Features

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.0",
   "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 &&
@@ -441,6 +457,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: '',