design-comuni-plone-theme 10.4.2 → 11.0.0-alpha.1

package/.github/workflows/main.yml

@@ -31,7 +31,7 @@ jobs:
           build-args: |
             ADDON_NAME=design-comuni-plone-theme
             ADDON_PATH=design-comuni-plone-theme
-            VOLTO_VERSION=17.0.0-alpha.19
+            VOLTO_VERSION=17.5.0
 
       - name: Deploy to rancher
         uses: redturtle/rancher-deploy-action@v0.2.0

package/.github/workflows/prs.yml

@@ -34,4 +34,4 @@ jobs:
           build-args: |
             ADDON_NAME=design-comuni-plone-theme
             ADDON_PATH=design-comuni-plone-theme
-            VOLTO_VERSION=17.0.0-alpha.19
+            VOLTO_VERSION=17.5.0

package/.github/workflows/release.yml

@@ -35,4 +35,4 @@ jobs:
           build-args: |
             ADDON_NAME=design-comuni-plone-theme
             ADDON_PATH=design-comuni-plone-theme
-            VOLTO_VERSION=17.0.0-alpha.19
+            VOLTO_VERSION=17.5.0

package/CHANGELOG.md

@@ -1,24 +1,39 @@
 
 
-## [10.4.2](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v10.4.1...v10.4.2) (2023-11-23)
+## [11.0.0-alpha.1](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.0.0-alpha.0...v11.0.0-alpha.1) (2023-11-23)
+
+
+### ⚠ BREAKING CHANGES
+
+* card image height from newest bootstrap-italia version (#406)
+
+### Features
+
+* card image height from newest bootstrap-italia version ([#406](https://github.com/RedTurtle/design-comuni-plone-theme/issues/406)) ([2cf34bc](https://github.com/RedTurtle/design-comuni-plone-theme/commit/2cf34bcfc961673a94b3d76c39632a764b1e322a))
 
 
 ### Bug Fixes
 
-* a11y of listing block read-more with card-slide-text template ([#415](https://github.com/RedTurtle/design-comuni-plone-theme/issues/415)) ([6260983](https://github.com/RedTurtle/design-comuni-plone-theme/commit/6260983016622af038d84d0f2efd3c9e13d2fbcf))
-* changed layout of readMore component to avoid overlapping ([#411](https://github.com/RedTurtle/design-comuni-plone-theme/issues/411)) ([a36a8b8](https://github.com/RedTurtle/design-comuni-plone-theme/commit/a36a8b8b1be250a27fa48316bf514d43f2aac9b7))
-* error in search blocks with service-link lighthouse id ([#417](https://github.com/RedTurtle/design-comuni-plone-theme/issues/417)) ([69f1a42](https://github.com/RedTurtle/design-comuni-plone-theme/commit/69f1a4243d13c077a0b0b469ce1de50a17527b95))
+* listing block card-slide-text-template read-more alignment ([#416](https://github.com/RedTurtle/design-comuni-plone-theme/issues/416)) ([39c756c](https://github.com/RedTurtle/design-comuni-plone-theme/commit/39c756c9c350b9783b46259076842004df7751a6))
 
+## [11.0.0-alpha.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v10.4.1...v11.0.0-alpha.0) (2023-11-22)
 
-### Maintenance
 
-* fix babel-eslint ([a7aa9a6](https://github.com/RedTurtle/design-comuni-plone-theme/commit/a7aa9a6dff9f420bceef34809c2f7e23da883bcd))
-* upgrade linters ([9d8f13a](https://github.com/RedTurtle/design-comuni-plone-theme/commit/9d8f13a34d82fb6cc9ce68f0881a46ffd8803eca))
+### ⚠ BREAKING CHANGES
 
+* upgrade to design-react-kit 5.0.0-1 and bootstrap-italia 2.6.1 (#407)
+* upgrade to volto 17.5.0 (#382)
+
+### Features
+
+* upgrade to design-react-kit 5.0.0-1 and bootstrap-italia 2.6.1 ([#407](https://github.com/RedTurtle/design-comuni-plone-theme/issues/407)) ([ec1ec5b](https://github.com/RedTurtle/design-comuni-plone-theme/commit/ec1ec5bd693df58653a7c10d17a4085305734625))
+* upgrade to volto 17.5.0 ([#382](https://github.com/RedTurtle/design-comuni-plone-theme/issues/382)) ([cef3f09](https://github.com/RedTurtle/design-comuni-plone-theme/commit/cef3f09ef971bfcc03b61dafe5e1c712ac6563da))
 
-### Documentation
 
-* updated publiccode and release log ([603c65d](https://github.com/RedTurtle/design-comuni-plone-theme/commit/603c65d1de43952d7a1936127ea043d8a631a8b3))
+### Maintenance
+
+* fix babel-eslint ([a7aa9a6](https://github.com/RedTurtle/design-comuni-plone-theme/commit/a7aa9a6dff9f420bceef34809c2f7e23da883bcd))
+* upgrade linters ([9d8f13a](https://github.com/RedTurtle/design-comuni-plone-theme/commit/9d8f13a34d82fb6cc9ce68f0881a46ffd8803eca))
 
 ## [10.4.1](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v10.4.0...v10.4.1) (2023-11-21)
 

package/Makefile

@@ -27,7 +27,7 @@ CURRENT_DIR:=$(shell dirname $(realpath $(lastword $(MAKEFILE_LIST))))
 # ADDON ?= "design-comuni-plone-theme"
 
 PLONE_VERSION=6
-VOLTO_VERSION=17.0.0-alpha.19
+VOLTO_VERSION=17.5.0
 
 ADDON_NAME='design-comuni-plone-theme'
 ADDON_PATH='design-comuni-plone-theme'

package/RELEASE.md

@@ -41,13 +41,11 @@
 - ...
 -->
 
-## Versione 10.4.2 (23/11/2023)
+## Versione X.X.X (dd/mm/yyyy)
 
-### Fix
+### Novità
 
-- Sistemato il layout della card nella variazione Bandi del Blocco Elenco per la modalità tablet
-- Sistemata accessibilità del read-more nel blocco elenco con variazione "Card con testo animato" quando si è in un sottosito con uno stile applicato.
-- Sistemato errore quando viene impostato "service-link" come ID lighthouse.
+- Modificata l'altezza delle immagini delle card, per essere in linea con i template agid.
 
 ## Versione 10.4.1 (21/11/2023)
 

package/jest-addon.config.js

@@ -17,10 +17,6 @@ module.exports = {
   ],
   moduleNameMapper: {
     '\\.(css|less|scss|sass|svg)$': 'identity-obj-proxy',
-    '@plone/volto/components/theme/Image/Image':
-      '<rootDir>/src/addons/design-comuni-plone-theme/src/components/Image/Image.jsx',
-    '@plone/volto/helpers/Image/Image':
-      '<rootDir>/src/addons/design-comuni-plone-theme/src/components/Image/helpers.js',
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',

package/locales/de/LC_MESSAGES/volto.po

@@ -448,6 +448,11 @@ msgstr ""
 msgid "Open in a new tab"
 msgstr ""
 
+#: components/ItaliaTheme/Pagination/PaginationItem
+# defaultMessage: Pagina
+msgid "Page"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/PathFiltersWidget
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Filtro
@@ -1079,6 +1084,11 @@ msgstr ""
 msgid "block_bg_color"
 msgstr ""
 
+#: components/ItaliaTheme/Breadcrumbs/Breadcrumbs
+# defaultMessage: Percorso di navigazione
+msgid "breadcrumb"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/Calendar/ListingSidebar
 # defaultMessage: Calendario
 msgid "calendarBlockSidebarTitle"
@@ -1375,6 +1385,12 @@ msgstr ""
 msgid "cured_by_people"
 msgstr ""
 
+#: components/ItaliaTheme/Header/HeaderSearch/SearchModal
+#: components/ReleaseLog/ReleaseLog
+# defaultMessage: attivo
+msgid "currentActive"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 # defaultMessage: Curriculum vitae
 msgid "curriculum_vitae"

package/locales/en/LC_MESSAGES/volto.po

@@ -433,6 +433,11 @@ msgstr "- open in a new tab"
 msgid "Open in a new tab"
 msgstr ""
 
+#: components/ItaliaTheme/Pagination/PaginationItem
+# defaultMessage: Pagina
+msgid "Page"
+msgstr "Page"
+
 #: components/ItaliaTheme/manage/Widgets/PathFiltersWidget
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Filtro
@@ -1064,6 +1069,11 @@ msgstr "Biography"
 msgid "block_bg_color"
 msgstr ""
 
+#: components/ItaliaTheme/Breadcrumbs/Breadcrumbs
+# defaultMessage: Percorso di navigazione
+msgid "breadcrumb"
+msgstr "Navigation path"
+
 #: components/ItaliaTheme/Blocks/Calendar/ListingSidebar
 # defaultMessage: Calendario
 msgid "calendarBlockSidebarTitle"
@@ -1360,6 +1370,12 @@ msgstr "Cured by"
 msgid "cured_by_people"
 msgstr "People"
 
+#: components/ItaliaTheme/Header/HeaderSearch/SearchModal
+#: components/ReleaseLog/ReleaseLog
+# defaultMessage: attivo
+msgid "currentActive"
+msgstr "active"
+
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 # defaultMessage: Curriculum vitae
 msgid "curriculum_vitae"

package/locales/es/LC_MESSAGES/volto.po

@@ -442,6 +442,11 @@ msgstr "- abrir en una nueva pestaña"
 msgid "Open in a new tab"
 msgstr "Abrir en un nueva pestaña"
 
+#: components/ItaliaTheme/Pagination/PaginationItem
+# defaultMessage: Pagina
+msgid "Page"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/PathFiltersWidget
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Filtro
@@ -1073,6 +1078,11 @@ msgstr "Biografía"
 msgid "block_bg_color"
 msgstr "Color de fondo"
 
+#: components/ItaliaTheme/Breadcrumbs/Breadcrumbs
+# defaultMessage: Percorso di navigazione
+msgid "breadcrumb"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/Calendar/ListingSidebar
 # defaultMessage: Calendario
 msgid "calendarBlockSidebarTitle"
@@ -1369,6 +1379,12 @@ msgstr "Editado por"
 msgid "cured_by_people"
 msgstr "Gente"
 
+#: components/ItaliaTheme/Header/HeaderSearch/SearchModal
+#: components/ReleaseLog/ReleaseLog
+# defaultMessage: attivo
+msgid "currentActive"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 # defaultMessage: Curriculum vitae
 msgid "curriculum_vitae"

package/locales/fr/LC_MESSAGES/volto.po

@@ -450,6 +450,11 @@ msgstr ""
 msgid "Open in a new tab"
 msgstr ""
 
+#: components/ItaliaTheme/Pagination/PaginationItem
+# defaultMessage: Pagina
+msgid "Page"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/PathFiltersWidget
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Filtro
@@ -1081,6 +1086,11 @@ msgstr "Biographie"
 msgid "block_bg_color"
 msgstr ""
 
+#: components/ItaliaTheme/Breadcrumbs/Breadcrumbs
+# defaultMessage: Percorso di navigazione
+msgid "breadcrumb"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/Calendar/ListingSidebar
 # defaultMessage: Calendario
 msgid "calendarBlockSidebarTitle"
@@ -1377,6 +1387,12 @@ msgstr "Édité par"
 msgid "cured_by_people"
 msgstr "Gens"
 
+#: components/ItaliaTheme/Header/HeaderSearch/SearchModal
+#: components/ReleaseLog/ReleaseLog
+# defaultMessage: attivo
+msgid "currentActive"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 # defaultMessage: Curriculum vitae
 msgid "curriculum_vitae"

package/locales/it/LC_MESSAGES/volto.po

@@ -433,6 +433,11 @@ msgstr "- apri in nuova scheda"
 msgid "Open in a new tab"
 msgstr "Apri in un nuovo tab"
 
+#: components/ItaliaTheme/Pagination/PaginationItem
+# defaultMessage: Pagina
+msgid "Page"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/PathFiltersWidget
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Filtro
@@ -1064,6 +1069,11 @@ msgstr "Biografia"
 msgid "block_bg_color"
 msgstr "Colore di sfondo"
 
+#: components/ItaliaTheme/Breadcrumbs/Breadcrumbs
+# defaultMessage: Percorso di navigazione
+msgid "breadcrumb"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/Calendar/ListingSidebar
 # defaultMessage: Calendario
 msgid "calendarBlockSidebarTitle"
@@ -1360,6 +1370,12 @@ msgstr "A cura di"
 msgid "cured_by_people"
 msgstr "Persone"
 
+#: components/ItaliaTheme/Header/HeaderSearch/SearchModal
+#: components/ReleaseLog/ReleaseLog
+# defaultMessage: attivo
+msgid "currentActive"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 # defaultMessage: Curriculum vitae
 msgid "curriculum_vitae"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-11-14T17:26:17.874Z\n"
+"POT-Creation-Date: 2023-11-22T09:06:53.905Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -435,6 +435,11 @@ msgstr ""
 msgid "Open in a new tab"
 msgstr ""
 
+#: components/ItaliaTheme/Pagination/PaginationItem
+# defaultMessage: Pagina
+msgid "Page"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/PathFiltersWidget
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Filtro
@@ -1066,6 +1071,11 @@ msgstr ""
 msgid "block_bg_color"
 msgstr ""
 
+#: components/ItaliaTheme/Breadcrumbs/Breadcrumbs
+# defaultMessage: Percorso di navigazione
+msgid "breadcrumb"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/Calendar/ListingSidebar
 # defaultMessage: Calendario
 msgid "calendarBlockSidebarTitle"
@@ -1362,6 +1372,12 @@ msgstr ""
 msgid "cured_by_people"
 msgstr ""
 
+#: components/ItaliaTheme/Header/HeaderSearch/SearchModal
+#: components/ReleaseLog/ReleaseLog
+# defaultMessage: attivo
+msgid "currentActive"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 # defaultMessage: Curriculum vitae
 msgid "curriculum_vitae"

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "10.4.2",
+  "version": "11.0.0-alpha.1",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -119,13 +119,14 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-export-default-from": "7.18.9",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-throw-expressions": "7.18.6",
     "@eeacms/volto-taxonomy": "^1.0.0",
     "@loadable/babel-plugin": "5.13.2",
     "@plone-collective/volto-sentry": "0.3.0",
-    "bootstrap-italia": "2.2.0",
+    "bootstrap-italia": "2.6.1",
     "classnames": "^2.3.2",
-    "design-react-kit": "italia/design-react-kit#fc9b40257ba3cb613141faf217f1f5b806489740",
+    "design-react-kit": "5.0.0-1",
     "htmldiff-js": "1.0.5",
     "marked": "9.0.0",
     "react-dropzone": "11.0.1",
@@ -189,7 +190,7 @@
     "stylelint-prettier": "4.0.2"
   },
   "peerDependencies": {
-    "@plone/volto": "17.0.0-alpha.19"
+    "@plone/volto": "17.5.0"
   },
   "packageManager": "yarn@3.2.3"
 }

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2023-11-23'
+releaseDate: '2023-11-21'
 softwareType: standalone/web
-softwareVersion: 10.4.2
+softwareVersion: 10.4.1
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/razzle.extend.js

@@ -108,23 +108,6 @@ const modify = (webpackConfig, { target, dev }, webpackObject) => {
   const babelLoader = webpackConfig.module.rules.find(babelLoaderFinder);
   babelLoader.include.push(/node_modules\/design-react-kit/);
 
-  webpackConfig.resolve.alias = {
-    // TODO remove the next two when implemented in core
-    '@plone/volto/components/theme/Image/Image': `${__dirname}/src/components/Image/Image.jsx`,
-    '@plone/volto/helpers/Image/Image': `${__dirname}/src/components/Image/helpers.js`,
-    ...webpackConfig.resolve.alias,
-    // 'design-comuni-plone-theme': `${__dirname}/src`,
-  };
-
-  // remove unused languages. (TODO: move to ENV at build time)
-  // webpackConfig.plugins.push(
-  //   new webpackObject.ContextReplacementPlugin(
-  //     /moment[/\\]locale$/,
-  //     /(it|it-it|en-us|en-gb)$/,
-  //   ),
-  //   // Ignore all locale files of moment.js - new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-  // );
-
   return webpackConfig;
 };
 

package/src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx

@@ -1,10 +1,7 @@
 import { Button, Container } from 'design-react-kit';
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { useRef, useState, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import Image from '@plone/volto/components/theme/Image/Image';
 import PropTypes from 'prop-types';
 import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { UniversalLink } from '@plone/volto/components';
@@ -27,6 +24,7 @@ const messages = defineMessages({
   },
 });
 
+
 const Block = ({
   data,
   block,
@@ -40,6 +38,7 @@ const Block = ({
   selected,
 }) => {
   const intl = useIntl();
+  const Image = config.getComponent({ name: 'Image' }).component;
   const title = data?.cta_title?.blocks[0]?.text;
   const hasImage = data?.showImage && data?.ctaImage?.length > 0;
   const content = data?.cta_content;
@@ -78,20 +77,18 @@ const Block = ({
       }}
     >
       {hasImage && data?.ctaImage?.length > 0 && (
-        <Image
-          itemUrl={data.ctaImage[0]['@id']}
-          image={
-            data.ctaImage[0].image_scales?.[
-              data.ctaImage[0].image_field
-            ]?.[0] || data.ctaImage[0]['@id']
-          }
-          key={data.ctaImage[0]['@id']}
-          alt=""
-          aria-hidden="true"
-          loading="lazy"
-          useOriginal={false}
-          role="presentation"
-        />
+        <figure className="img-wrapper">
+          <Image
+            item={data.ctaImage?.[0]}
+            sizes="100vw"
+            loading="lazy"
+            responsive={true}
+            alt=""
+            aria-hidden="true"
+            role="presentation"
+            key={data.ctaImage[0]['@id']}
+          />
+        </figure>
       )}
       <Container tag="div" className="px-3 px-md-4">
         <div className="cta-tile-text">

package/src/components/ItaliaTheme/Blocks/Calendar/Item.jsx

@@ -1,6 +1,7 @@
+/*
+ * Component Item of Calendar block
+ */
 import React from 'react';
-import moment from 'moment';
-
 import { useDispatch, useSelector } from 'react-redux';
 import { defineMessages, useIntl } from 'react-intl';
 import { Spinner } from 'design-react-kit';
@@ -9,9 +10,8 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 import { getCalendarDayResults } from 'design-comuni-plone-theme/actions';
 import { ConditionalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import Image from '@plone/volto/components/theme/Image/Image';
-
 import { viewDate } from 'design-comuni-plone-theme/helpers';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   scadenza_bando: {
@@ -30,7 +30,7 @@ const messages = defineMessages({
 
 const Item = ({ day, path, query, inEditMode, data }) => {
   const intl = useIntl();
-
+  const Image = config.getComponent({ name: 'Image' }).component;
   const calendarDayResults = useSelector(
     (state) => state.calendarDaySearch.subrequests,
   );
@@ -79,6 +79,13 @@ const Item = ({ day, path, query, inEditMode, data }) => {
         {calendarDayResults[day] ? (
           calendarDayResults[day].items[day]?.map((item, index) => {
             const eventHasImage = Object.keys(item.image_scales).length > 0;
+            const item_start = new Date(item.start);
+            const item_start_time = item_start
+              ? `${item_start.getHours()}:${item_start
+                  .getMinutes()
+                  .toString()
+                  .padStart(2, '0')}`
+              : null;
 
             return (
               <div key={index} className="calendar-item">
@@ -86,19 +93,16 @@ const Item = ({ day, path, query, inEditMode, data }) => {
                   {show_preview_img && eventHasImage && (
                     <div className="item-img">
                       <Image
-                        image={
-                          item.image_scales?.preview_image?.[0] ||
-                          item.image_scales?.image?.[0]
-                        }
-                        itemUrl={item['@id']}
+                        item={item}
                         alt=""
-                        containerClassName="img-wrapper"
+                        className="img-fluid"
+                        sizes="80px"
                       />
                     </div>
                   )}
                   <div className="item-info">
                     <div>{item?.type}</div>
-                    <div>{moment(item.start).format('HH:mm')}</div>
+                    {item_start_time && <div>{item_start_time}</div>}
                     <div className="calendar-type">
                       <ConditionalLink
                         condition={!inEditMode}

package/src/components/ItaliaTheme/Blocks/Calendar/ListingSidebar.jsx

@@ -9,6 +9,7 @@ import { LocationFiltersWidget } from 'design-comuni-plone-theme/components/Ital
 
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   calendarBlockSidebarTitle: {
@@ -55,7 +56,6 @@ const ListingSidebar = (props) => {
 
     setActiveAccIndex(newIndex);
   }
-
   return (
     <Segment.Group raised>
       <header className="header pulled">
@@ -128,7 +128,10 @@ const ListingSidebar = (props) => {
           )}
         </Accordion.Title>
         <Accordion.Content active={activeAccIndex === 1}>
-          <ListingData {...props} />
+          <ListingData
+            blocksConfig={{ listing: config.blocks.blocksConfig.listing }}
+            {...props}
+          />
         </Accordion.Content>
       </Accordion>
     </Segment.Group>

package/src/components/ItaliaTheme/Blocks/HighlightedContent/Body.jsx

@@ -14,7 +14,6 @@ import {
   CardReadMore,
 } from 'design-react-kit';
 
-import Image from '@plone/volto/components/theme/Image/Image';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
 import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
@@ -23,10 +22,12 @@ import {
   getItemIcon,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { viewDate } from 'design-comuni-plone-theme/helpers';
+import config from '@plone/volto/registry';
 
 const Body = (props) => {
   const { content, block } = props;
   const intl = useIntl();
+  const Image = config.getComponent({ name: 'Image' }).component;
   const icon = getItemIcon(content);
 
   const { show_type = true, show_section } = block;
@@ -38,12 +39,15 @@ const Body = (props) => {
         {(content.preview_image || content.image) && (
           <Col lg={{ size: 6, offset: 1, order: 2 }}>
             <Image
-              image={content.preview_image || content.image}
+              item={content}
+              imageField={content.preview_image ? 'preview_image' : 'image'}
               alt=""
               className={cx('item-image', {
                 'natural-image-size': block.natural_image_size,
               })}
               role={null}
+              responsive={true}
+              sizes="(max-width:768px) 90vw, (max-width:1024px) 450px, 560px"
             />
           </Col>
         )}

package/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx

@@ -1,3 +1,6 @@
+/*
+ * componente per visulizzare un CT "Persona" nei Listing o in aclune pagine
+ */
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -115,7 +118,6 @@ const CardWithImageTemplate = (props) => {
                 ) : (
                   <Card
                     className={cx('listing-item card-bg', {
-                      'card-img': showImage,
                       'card-teaser-image card-flex no-after':
                         item['@type'] === 'Persona',
                     })}

package/src/components/ItaliaTheme/Blocks/Listing/CardWithSlideUpTextTemplate.jsx

@@ -53,7 +53,7 @@ const CardWithSlideUpTextTemplate = (props) => {
         </div>
         <div className="grid mb-3 mt-5">
           {items.map((item, index) => {
-            const image = getListingImageBackground(item, 'teaser');
+            const image = getListingImageBackground(item, 'large');
             const category = getCategory(item, show_type, show_section, props);
             const date = hide_dates
               ? null
@@ -93,14 +93,16 @@ const CardWithSlideUpTextTemplate = (props) => {
                   {show_description && item.description && (
                     <p>{item.description}</p>
                   )}
-                  <CardReadMore
-                    iconName="it-arrow-right"
-                    tag={UniversalLink}
-                    item={!isEditMode ? item : null}
-                    href={isEditMode ? '#' : null}
-                    text={intl.formatMessage(messages.vedi)}
-                    className="justify-content-end"
-                  />
+                  <div className="read-more">
+                    <CardReadMore
+                      iconName="it-arrow-right"
+                      tag={UniversalLink}
+                      item={!isEditMode ? item : null}
+                      href={isEditMode ? '#' : null}
+                      text={intl.formatMessage(messages.vedi)}
+                      className="justify-content-end"
+                    />
+                  </div>
                 </div>
               </UniversalLink>
             );