Upgrade volto 17.2.0 (design-comuni-plone-theme v2)

.eslintrc.js

@@ -46,15 +46,6 @@ module.exports = {
           ...italiaAddonAliases,
           ['@package', `${__dirname}/src`],
           ['@italia', `${__dirname}/src`], // TODO deprecated: remove in version 8
-          // TODO remove the next two when implemented in core
-          [
-            '@plone/volto/components/theme/Image/Image',
-            path.resolve(`${projectRootPath}/src/components/Image/Image.jsx`),
-          ],
-          [
-            '@plone/volto/helpers/Image/Image',
-            path.resolve(`${projectRootPath}/src/components/Image/helpers.js`),
-          ],
         ],
         extensions: ['.js', '.jsx', '.json'],
       },

package.json

@@ -49,8 +49,6 @@
     "transformIgnorePatterns": [],
     "moduleNameMapper": {
       "\\.(css|less|scss|sass)$": "identity-obj-proxy",
-      "@plone/volto/components/theme/Image/Image": "<rootDir>/src/components/Image/Image.jsx",
-      "@plone/volto/helpers/Image/Image": "<rootDir>/src/components/Image/helpers.js",
       "@plone/volto/babel": "<rootDir>/node_modules/@plone/volto/babel",
       "@plone/volto/src/(.*)$": "<rootDir>/node_modules/@plone/volto/src/$1",
       "@plone/volto/(.*)$": "<rootDir>/node_modules/@plone/volto/src/$1",
@@ -175,7 +173,7 @@
     "@babel/plugin-proposal-throw-expressions": "7.18.6",
     "@loadable/babel-plugin": "5.13.2",
     "@plone-collective/volto-sentry": "0.3.0",
-    "@plone/volto": "17.0.0-alpha.19",
+    "@plone/volto": "17.2.0",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-controls": "6.5.15",
     "@storybook/addon-essentials": "^6.5.15",
@@ -220,7 +218,7 @@
     "@babel/core": "7.19.6",
     "@commitlint/cli": "^12.0.0",
     "@commitlint/config-conventional": "^12.0.0",
-    "@plone/scripts": "^2.1.5",
+    "@plone/scripts": "^3.0.0",
     "@release-it/conventional-changelog": "^2.0.1",
     "bundlewatch": "^0.3.3",
     "eslint-plugin-prettier": "^3.4.1",

razzle.config.js

@@ -126,8 +126,6 @@ module.exports = Object.assign({}, volto_config, {
 
     base_config.resolve.alias = {
       // TODO remove the next two when implemented in core
-      '@plone/volto/components/theme/Image/Image': `${projectRootPath}/src/components/Image/Image.jsx`,
-      '@plone/volto/helpers/Image/Image': `${projectRootPath}/src/components/Image/helpers.js`,
       ...webpackConfig.resolve.alias,
       ...base_config.resolve.alias,
       '@italia': `${projectRootPath}/src`, // TODO deprecated: remove in version 8

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

@@ -5,13 +5,12 @@ import React, { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 // monkey/customization attualmente in DVT
-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';
-import config from '@plone/volto/registry';
 import cx from 'classnames';
 import redraft from 'redraft';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   cta_title: {
@@ -47,6 +46,8 @@ const Block = ({
   const titleRef = useRef();
   const contentRef = useRef();
 
+  const Image = config.getComponent({ name: 'Image' }).component;
+
   return (
     <div
       className={cx('cta-block-wrapper', {
@@ -69,15 +70,18 @@ const Block = ({
       }}
     >
       {hasImage && data?.ctaImage?.length > 0 && (
-        <Image
-          image={data.ctaImage[0]['@id']}
-          key={data.ctaImage[0]['@id']}
-          alt=""
-          aria-hidden="true"
-          loading="lazy"
-          useOriginal={false}
-          role="presentation"
-        />
+        <picture>
+          <Image
+            item={data.ctaImage?.[0]}
+            sizes="100vw"
+            loading="lazy"
+            responsive={true}
+            alt=""
+            aria-hidden="true"
+            role="presentation"
+            key={data.ctaImage[0]['@id']}
+          />
+        </picture>
       )}
       <Container tag="div" className="px-3 px-md-4">
         <div className="cta-tile-text">

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

@@ -15,7 +15,7 @@ import {
 } from 'design-react-kit/dist/design-react-kit';
 
 // eslint-disable-next-line import/no-unresolved
-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';
@@ -24,6 +24,7 @@ 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;
@@ -33,18 +34,22 @@ const Body = (props) => {
   const { show_type = true, show_section } = block;
   const category = getCategory(content, show_type, show_section, props);
 
+  const Image = config.getComponent({ name: 'Image' }).component;
+
   return (
     <div className={`${block.bg_color ? 'bg-' + block.bg_color : ''}`}>
       <Row>
         {content.image && (
           <Col lg={{ size: 6, offset: 1, order: 2 }}>
             <Image
-              image={content.image}
+              item={content}
               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>
         )}

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

@@ -81,7 +81,7 @@ const CardWithImageTemplate = (props) => {
               <ListingText item={item} />
             ) : null;
 
-            const image = ListingImage({ item });
+            const image = ListingImage({ item, loading: 'lazy' });
 
             const showImage =
               (index < imagesToShow || always_show_image) && image != null;

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

@@ -45,7 +45,7 @@ const CardWithSlideUpTextTemplate = (props) => {
         <div className="title">{title && <h2>{title}</h2>}</div>
         <div className="grid mb-3 mt-5">
           {items.map((item, index) => {
-            let image = getListingImageBackground(item, 'teaser');
+            let image = getListingImageBackground(item, 'large');
             const category = getCategory(item, show_type, show_section, props);
             const date = hide_dates ? null : getCalendarDate(item);
 

src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx

@@ -1,41 +1,40 @@
-import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
-import Image from '@plone/volto/components/theme/Image/Image';
 import React from 'react';
-import { getImageAttributes } from '@plone/volto/helpers/Image/Image';
+
+import config from '@plone/volto/registry';
+import { getImageAttributes } from 'design-comuni-plone-theme/helpers';
 
 const ListingImage = ({
   item,
-  showDefault = false,
-  useOriginal = false,
-  maxSize,
+  loading,
   className = 'listing-image',
+  responsive = true,
+  sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:768px) 400px, 300px',
   ...imageProps
 }) => {
-  if (!item.image_field) {
-    if (showDefault) {
-      return <img src={DefaultImageSVG} alt="" />;
-    }
-    return null;
-  } else {
-    return (
-      <Image
-        className={className}
-        image={
-          item.image_scales?.[item.image_field]?.[0] ||
-          item.image ||
-          item['@id']
-        }
-        aria-hidden="true"
-        alt=""
-        title={item.title}
-        role="presentation"
-        imageField={item.image_field}
-        useOriginal={useOriginal}
-        maxSize={maxSize}
-        {...imageProps}
-      />
-    );
-  }
+  const Image = config.getComponent({ name: 'Image' }).component;
+
+  const image = (
+    <Image
+      aria-hidden="true"
+      alt=""
+      role="presentation"
+      className={className}
+      item={{
+        ...item,
+        image_field: 'image', //[ToDo]: rimuove image_field quando cekk ritorna i dati corretti per i listing
+        image: { ...item.image, download: item.image?.scales?.huge?.download }, //[ToDo]: rimuove image_field quando cekk ritorna i dati corretti per i listing
+      }}
+      loading={loading}
+      title={item.title}
+      responsive={responsive}
+      sizes={sizes}
+      {...imageProps}
+    />
+  );
+
+  if (!image) return null;
+
+  return image;
 };
 
 export const getListingImageBackground = (item, size) => {