From 58f60c7e3093353eb7cf62aabc6433580ace7431 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Thu, 24 Aug 2023 12:21:47 +0200 Subject: [PATCH 1/9] breaking: updated to volto 17.0.0-alpha.24 --- package.json | 4 +- yarn.lock | 157 ++++++++++++++++++++++++--------------------------- 2 files changed, 75 insertions(+), 86 deletions(-) diff --git a/package.json b/package.json index 11de9f9d2..d847e910d 100644 --- a/package.json +++ b/package.json @@ -175,7 +175,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.0.0-alpha.24", "@storybook/addon-actions": "^6.5.15", "@storybook/addon-controls": "6.5.15", "@storybook/addon-essentials": "^6.5.15", @@ -219,7 +219,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", diff --git a/yarn.lock b/yarn.lock index 0e2ac31a5..97e0dc4c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3291,9 +3291,9 @@ __metadata: languageName: node linkType: hard -"@cypress/request@npm:^2.88.10": - version: 2.88.10 - resolution: "@cypress/request@npm:2.88.10" +"@cypress/request@npm:^2.88.11": + version: 2.88.12 + resolution: "@cypress/request@npm:2.88.12" dependencies: aws-sign2: ~0.7.0 aws4: ^1.8.0 @@ -3308,12 +3308,12 @@ __metadata: json-stringify-safe: ~5.0.1 mime-types: ~2.1.19 performance-now: ^2.1.0 - qs: ~6.5.2 + qs: ~6.10.3 safe-buffer: ^5.1.2 - tough-cookie: ~2.5.0 + tough-cookie: ^4.1.3 tunnel-agent: ^0.6.0 uuid: ^8.3.2 - checksum: 69c3e3b332e9be4866a900f6bcca5d274d8cea6c99707fbcce061de8dbab11c9b1e39f4c017f6e83e6e682717781d4f6106fd6b7cf9546580fcfac353b6676cf + checksum: 2c6fbf7f3127d41bffca8374beaa8cf95450495a8a077b00309ea9d94dd2a4da450a77fe038e8ad26c97cdd7c39b65c53c850f8338ce9bc2dbe23ce2e2b48329 languageName: node linkType: hard @@ -4370,30 +4370,9 @@ __metadata: languageName: node linkType: hard -"@plone/scripts@npm:2.1.2": - version: 2.1.2 - resolution: "@plone/scripts@npm:2.1.2" - dependencies: - babel-plugin-react-intl: 5.1.17 - babel-preset-razzle: 4.2.17 - chalk: 4 - commander: 8.2.0 - fs-extra: 10.1.0 - git-url-parse: ^11.6.0 - mrs-developer: "*" - pofile: 1.0.10 - simple-git: 3.5.0 - bin: - addon: addon/index.js - changelogupdater: changelogupdater.cjs - i18n: i18n.cjs - checksum: 8afc64bd7cd2a60e5c9cdd552e54fe8aef48e91f57824ce4a03158c3ecde2fd40a2b7c66f0a9df90c60caf7e037edf670a1361b36667b6603da1c2e3244c1654 - languageName: node - linkType: hard - -"@plone/scripts@npm:^2.1.5": - version: 2.3.0 - resolution: "@plone/scripts@npm:2.3.0" +"@plone/scripts@npm:3.0.0, @plone/scripts@npm:^3.0.0": + version: 3.0.0 + resolution: "@plone/scripts@npm:3.0.0" dependencies: babel-plugin-react-intl: 5.1.17 babel-preset-razzle: 4.2.17 @@ -4403,18 +4382,17 @@ __metadata: git-url-parse: ^11.6.0 mrs-developer: "*" pofile: 1.0.10 - simple-git: 3.5.0 bin: addon: addon/index.js changelogupdater: changelogupdater.cjs i18n: i18n.cjs - checksum: 32dbbe4f9233e8d9b16ffc451c42d4753907b3f700665a4bed796c5642194890d8bda21deddd3d1efb1559df288b29c69d32cf7437f6f4ef0a5113722b6b79ba + checksum: c5a03a68fd16f731fd40bbf94e3bc6addb4395a04049eb98fbb95f1e1ebcc2468e003149b829261a1b577d50cce032d80dc99c8e812a126621f730f6e431cb97 languageName: node linkType: hard -"@plone/volto@npm:17.0.0-alpha.19": - version: 17.0.0-alpha.19 - resolution: "@plone/volto@npm:17.0.0-alpha.19" +"@plone/volto@npm:17.0.0-alpha.24": + version: 17.0.0-alpha.24 + resolution: "@plone/volto@npm:17.0.0-alpha.24" dependencies: "@babel/core": ^7.0.0 "@babel/plugin-proposal-export-default-from": 7.18.9 @@ -4429,8 +4407,8 @@ __metadata: "@loadable/component": 5.14.1 "@loadable/server": 5.14.0 "@loadable/webpack-plugin": 5.15.2 - "@plone/scripts": 2.1.2 - "@testing-library/cypress": 8.0.7 + "@plone/scripts": 3.0.0 + "@testing-library/cypress": 9.0.0 "@testing-library/jest-dom": 5.16.4 "@testing-library/react": 12.1.5 "@testing-library/react-hooks": 8.0.1 @@ -4448,8 +4426,8 @@ __metadata: connected-react-router: 6.8.0 crypto-random-string: 3.2.0 css-loader: 5.2.7 - cypress: 11.1.0 - cypress-axe: 1.0.0 + cypress: 12.17.1 + cypress-axe: 1.4.0 cypress-file-upload: 5.0.8 debug: 4.3.2 decorate-component-with-props: 1.2.1 @@ -4569,7 +4547,6 @@ __metadata: rrule: 2.7.1 semantic-ui-less: 2.4.1 semantic-ui-react: 2.0.3 - semver: 5.6.0 serialize-javascript: 3.1.0 slate: 0.84.0 slate-hyperscript: 0.81.3 @@ -4595,7 +4572,7 @@ __metadata: webpack-node-externals: 3.0.0 xmlrpc: 1.3.2 yarnhook: 0.5.1 - checksum: 00a129bf9579d7fecd80d80ea966292bbcdeb5e784d9a8a55b7151943b5eacd4753173aa9a55f99117c2e6fd5bf36f8aa054acf721ff055b9440da4a01aef944 + checksum: 89a1267db6dd69e75d87085ea59337c4bdd7c2fa8423397770c60686465ea8b13d313183c9d58ff58340d2f71590f2716f0c5baa9907404c25bc0d93d03b07da languageName: node linkType: hard @@ -6361,15 +6338,15 @@ __metadata: languageName: node linkType: hard -"@testing-library/cypress@npm:8.0.7": - version: 8.0.7 - resolution: "@testing-library/cypress@npm:8.0.7" +"@testing-library/cypress@npm:9.0.0": + version: 9.0.0 + resolution: "@testing-library/cypress@npm:9.0.0" dependencies: "@babel/runtime": ^7.14.6 "@testing-library/dom": ^8.1.0 peerDependencies: - cypress: ^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 - checksum: e005bc1a7ec808706c57e95ed312069fb5be39ea7362900dc2a32c09f124d478ade69ebcd7df88c076e3867ab328ae6e6ce13791bdf042621ff66b56552bf74b + cypress: ^12.0.0 + checksum: fbd24e8f0b8a60279b336de5f6bc0e7ad6fb31316eacab5128dacc7fccde1eb40935b90f2c3bddc7d814115fe3965c6dbf011785448cd15b5a5b0bc40ef5bb4c languageName: node linkType: hard @@ -10595,7 +10572,7 @@ __metadata: languageName: node linkType: hard -"commander@npm:^5.0.0, commander@npm:^5.1.0": +"commander@npm:^5.0.0": version: 5.1.0 resolution: "commander@npm:5.1.0" checksum: 0b7fec1712fbcc6230fcb161d8d73b4730fa91a21dc089515489402ad78810547683f058e2a9835929c212fead1d6a6ade70db28bbb03edbc2829a9ab7d69447 @@ -11724,13 +11701,13 @@ __metadata: languageName: node linkType: hard -"cypress-axe@npm:1.0.0": - version: 1.0.0 - resolution: "cypress-axe@npm:1.0.0" +"cypress-axe@npm:1.4.0": + version: 1.4.0 + resolution: "cypress-axe@npm:1.4.0" peerDependencies: axe-core: ^3 || ^4 - cypress: ^10 - checksum: 02b5d8ac11b659772fc11e587c61c75b86fdbd1dda7930ec76e02ed4f7e774d01a087bd21681460d9664d469f1bc778a8402825e9c7fd95e0aa2688264a381c2 + cypress: ^10 || ^11 || ^12 + checksum: b202de37c38aab899a9bb0f813069221bc14a9a76e1f3998595f7097d9296efac8c7679c81279e20ce023b69bcc379657a4d5fcfa3da342826cb22eec7938ef2 languageName: node linkType: hard @@ -11743,11 +11720,11 @@ __metadata: languageName: node linkType: hard -"cypress@npm:11.1.0": - version: 11.1.0 - resolution: "cypress@npm:11.1.0" +"cypress@npm:12.17.1": + version: 12.17.1 + resolution: "cypress@npm:12.17.1" dependencies: - "@cypress/request": ^2.88.10 + "@cypress/request": ^2.88.11 "@cypress/xvfb": ^1.2.4 "@types/node": ^14.14.31 "@types/sinonjs__fake-timers": 8.1.1 @@ -11761,10 +11738,10 @@ __metadata: check-more-types: ^2.24.0 cli-cursor: ^3.1.0 cli-table3: ~0.6.1 - commander: ^5.1.0 + commander: ^6.2.1 common-tags: ^1.8.0 dayjs: ^1.10.4 - debug: ^4.3.2 + debug: ^4.3.4 enquirer: ^2.3.6 eventemitter2: 6.4.7 execa: 4.1.0 @@ -11779,19 +11756,19 @@ __metadata: listr2: ^3.8.3 lodash: ^4.17.21 log-symbols: ^4.0.0 - minimist: ^1.2.6 + minimist: ^1.2.8 ospath: ^1.2.2 pretty-bytes: ^5.6.0 proxy-from-env: 1.0.0 request-progress: ^3.0.0 - semver: ^7.3.2 + semver: ^7.5.3 supports-color: ^8.1.1 tmp: ~0.2.1 untildify: ^4.0.0 yauzl: ^2.10.0 bin: cypress: bin/cypress - checksum: ee0097778cf3cdf3854325cabf19a60a7486d46ae70082034c05b22b203f21ff85a4871c08dadc6641be649a64c739a443dd3f2d6a5ab112fc9ead703e1f1be3 + checksum: 1f042e3e5931498bdf826cba09060939349e677fca8654c9695760acbec5a424cb69d3445ace57cf80deb496d770ffe571ef791dff72af24e7f560ee43986ee4 languageName: node linkType: hard @@ -12209,8 +12186,8 @@ __metadata: "@commitlint/config-conventional": ^12.0.0 "@loadable/babel-plugin": 5.13.2 "@plone-collective/volto-sentry": 0.3.0 - "@plone/scripts": ^2.1.5 - "@plone/volto": 17.0.0-alpha.19 + "@plone/scripts": ^3.0.0 + "@plone/volto": 17.0.0-alpha.24 "@release-it/conventional-changelog": ^2.0.1 "@storybook/addon-actions": ^6.5.15 "@storybook/addon-controls": 6.5.15 @@ -19789,7 +19766,7 @@ __metadata: languageName: node linkType: hard -"minimist@npm:^1.1.3": +"minimist@npm:^1.1.3, minimist@npm:^1.2.8": version: 1.2.8 resolution: "minimist@npm:1.2.8" checksum: 75a6d645fb122dad29c06a7597bddea977258957ed88d7a6df59b5cd3fe4a527e253e9bbf2e783e4b73657f9098b96a5fe96ab8a113655d4109108577ecf85b0 @@ -22739,6 +22716,15 @@ __metadata: languageName: node linkType: hard +"qs@npm:~6.10.3": + version: 6.10.4 + resolution: "qs@npm:6.10.4" + dependencies: + side-channel: ^1.0.4 + checksum: 31e4fedd759d01eae52dde6692abab175f9af3e639993c5caaa513a2a3607b34d8058d3ae52ceeccf37c3025f22ed5e90e9ddd6c2537e19c0562ddd10dc5b1eb + languageName: node + linkType: hard + "qs@npm:~6.5.2": version: 6.5.3 resolution: "qs@npm:6.5.3" @@ -25508,15 +25494,6 @@ __metadata: languageName: node linkType: hard -"semver@npm:5.6.0": - version: 5.6.0 - resolution: "semver@npm:5.6.0" - bin: - semver: ./bin/semver - checksum: 15409e2282f496e240cb2c3355f60e46b09df3820ed6cad359ae6d90e5395b5b75f38a46f91f478473ed65c8d1b086842cf1f7f1f6d26303003759ab8458e752 - languageName: node - linkType: hard - "semver@npm:7.3.5": version: 7.3.5 resolution: "semver@npm:7.3.5" @@ -25559,6 +25536,17 @@ __metadata: languageName: node linkType: hard +"semver@npm:^7.5.3": + version: 7.5.4 + resolution: "semver@npm:7.5.4" + dependencies: + lru-cache: ^6.0.0 + bin: + semver: bin/semver.js + checksum: 12d8ad952fa353b0995bf180cdac205a4068b759a140e5d3c608317098b3575ac2f1e09182206bf2eb26120e1c0ed8fb92c48c592f6099680de56bb071423ca3 + languageName: node + linkType: hard + "send@npm:0.17.2": version: 0.17.2 resolution: "send@npm:0.17.2" @@ -25876,17 +25864,6 @@ __metadata: languageName: node linkType: hard -"simple-git@npm:3.5.0": - version: 3.5.0 - resolution: "simple-git@npm:3.5.0" - dependencies: - "@kwsites/file-exists": ^1.1.1 - "@kwsites/promise-deferred": ^1.1.1 - debug: ^4.3.3 - checksum: be078d9e898d1dea99bb15d4f6927c0f61aafde73114c7423fb0efca6d6f99012da2a2f43b5e2151a1707994cc9c75139bc12e3d307dd25da48ed1dce1167748 - languageName: node - linkType: hard - "simple-git@npm:^3.3.0": version: 3.14.1 resolution: "simple-git@npm:3.14.1" @@ -27820,6 +27797,18 @@ __metadata: languageName: node linkType: hard +"tough-cookie@npm:^4.1.3": + version: 4.1.3 + resolution: "tough-cookie@npm:4.1.3" + dependencies: + psl: ^1.1.33 + punycode: ^2.1.1 + universalify: ^0.2.0 + url-parse: ^1.5.3 + checksum: c9226afff36492a52118432611af083d1d8493a53ff41ec4ea48e5b583aec744b989e4280bcf476c910ec1525a89a4a0f1cae81c08b18fb2ec3a9b3a72b91dcc + languageName: node + linkType: hard + "tough-cookie@npm:~2.5.0": version: 2.5.0 resolution: "tough-cookie@npm:2.5.0" From 6d08717da30a48e8dc77b337ebaa2bccc7e9ec46 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Thu, 31 Aug 2023 16:16:10 +0200 Subject: [PATCH 2/9] feat: replace component Image using Volto's --- .eslintrc.js | 9 -- package.json | 2 - razzle.config.js | 2 - .../Image/{Image.jsx => OldItalia_Image.jsx} | 10 +- src/components/Image/helpers.js | 8 +- .../ItaliaTheme/Blocks/CTABlock/Block.jsx | 26 +++-- .../Blocks/HighlightedContent/Body.jsx | 8 +- .../Blocks/Listing/CardWithImageTemplate.jsx | 2 +- .../Blocks/Listing/Commons/ListingImage.jsx | 52 ++++----- .../Blocks/Listing/GridGalleryTemplate.jsx | 1 + .../Blocks/Listing/InEvidenceTemplate.jsx | 1 + .../ItaliaTheme/View/Commons/ContactLink.jsx | 72 ++++++------ .../ItaliaTheme/View/Commons/Events.jsx | 104 ++++++++++-------- .../ItaliaTheme/View/Commons/Gallery.jsx | 8 +- .../ItaliaTheme/View/Commons/GenericCard.jsx | 10 +- .../ItaliaTheme/View/Commons/LocationItem.jsx | 19 +++- .../View/Commons/PageHeader/PageHeader.jsx | 9 +- .../View/Commons/RelatedArticles.jsx | 7 +- .../ItaliaTheme/View/Commons/RelatedItems.jsx | 1 - .../ItaliaTheme/View/Commons/Sponsors.jsx | 13 ++- .../ItaliaTheme/View/Commons/VenuesSmall.jsx | 18 ++- .../ItaliaTheme/View/Commons/WideImage.jsx | 7 +- .../DocumentoAccedereServizio.jsx | 7 +- .../ItaliaTheme/View/PageView/PageView.jsx | 9 +- .../PaginaArgomentoView.jsx | 7 +- src/config/italiaConfig.js | 2 +- .../Blocks/_cardWithImageAndInEvidence.scss | 38 +++---- .../Blocks/_completeBlockLinkstemplate.scss | 1 + theme/ItaliaTheme/Blocks/_ctaBlock.scss | 1 - theme/ItaliaTheme/Blocks/_sliderTemplate.scss | 2 +- theme/ItaliaTheme/Views/_common.scss | 45 +------- theme/ItaliaTheme/_main.scss | 8 +- 32 files changed, 252 insertions(+), 257 deletions(-) rename src/components/Image/{Image.jsx => OldItalia_Image.jsx} (95%) diff --git a/.eslintrc.js b/.eslintrc.js index aea3677db..d1690dd6b 100644 --- a/.eslintrc.js +++ b/.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'], }, diff --git a/package.json b/package.json index d847e910d..b514ffe64 100644 --- a/package.json +++ b/package.json @@ -49,8 +49,6 @@ "transformIgnorePatterns": [], "moduleNameMapper": { "\\.(css|less|scss|sass)$": "identity-obj-proxy", - "@plone/volto/components/theme/Image/Image": "/src/components/Image/Image.jsx", - "@plone/volto/helpers/Image/Image": "/src/components/Image/helpers.js", "@plone/volto/babel": "/node_modules/@plone/volto/babel", "@plone/volto/src/(.*)$": "/node_modules/@plone/volto/src/$1", "@plone/volto/(.*)$": "/node_modules/@plone/volto/src/$1", diff --git a/razzle.config.js b/razzle.config.js index 2172a40ed..5d423d7cc 100644 --- a/razzle.config.js +++ b/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 diff --git a/src/components/Image/Image.jsx b/src/components/Image/OldItalia_Image.jsx similarity index 95% rename from src/components/Image/Image.jsx rename to src/components/Image/OldItalia_Image.jsx index 79eaaccfd..311a18462 100644 --- a/src/components/Image/Image.jsx +++ b/src/components/Image/OldItalia_Image.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef, useState } from 'react'; - +//[ToDo]:rimuovere questo componente perche si userà quello di volto import PropTypes from 'prop-types'; // eslint-disable-next-line import/no-unresolved import { getImageAttributes } from '@plone/volto/helpers/Image/Image'; @@ -19,7 +19,7 @@ import { getImageAttributes } from '@plone/volto/helpers/Image/Image'; * @param {number} maxSize - maximum size to render * @param {boolean} useOriginal - whether to render original size */ -const Image = ({ +const OldItalia_Image = ({ image, imageField = 'image', alt = '', @@ -136,7 +136,7 @@ const Image = ({ ); }; -Image.propTypes = { +OldItalia_Image.propTypes = { imageField: PropTypes.string, image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired, alt: PropTypes.string, @@ -150,7 +150,7 @@ Image.propTypes = { useOriginal: PropTypes.bool, }; -Image.defaultProps = { +OldItalia_Image.defaultProps = { imageField: 'image', alt: '', role: 'img', @@ -158,4 +158,4 @@ Image.defaultProps = { useOriginal: false, }; -export default Image; +export default OldItalia_Image; diff --git a/src/components/Image/helpers.js b/src/components/Image/helpers.js index 8e5b693cf..77ec59693 100644 --- a/src/components/Image/helpers.js +++ b/src/components/Image/helpers.js @@ -1,6 +1,7 @@ import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers'; import config from '@plone/volto/registry'; +//[ToDo]:se in questa cartella rimane solo l'helper, spostare il file negli helpers e aggiornare l'upgrade-guide su sistemi const getImageType = (image) => { let imageType = 'external'; @@ -12,7 +13,8 @@ const getImageType = (image) => { Object.keys(image.scales).length > 0 ) { imageType = 'imageObject'; - } else if (typeof image === 'string' && isInternalURL(image)) { + } //[ToDo]:togliere tutte le if sopra perchè non verranno piu usate + else if (typeof image === 'string' && isInternalURL(image)) { imageType = 'internalUrl'; } return imageType; @@ -55,13 +57,13 @@ export const getImageAttributes = ( const imageType = getImageType(image); switch (imageType) { - case 'svg': + case 'svg': //[ToDo]:togliere questo case perchè non verrà piu usato attrs.src = flattenToAppURL(image.download); break; // Scales object from Plone restapi // ideal use of Plone images - case 'imageObject': + case 'imageObject': //[ToDo]:togliere questo case perchè non verrà piu usato const sortedScales = Object.values(image.scales) .filter((scale) => scale.width <= maxSize) .filter( diff --git a/src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx b/src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx index 2cabdcd61..ce3a655da 100644 --- a/src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx +++ b/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 (
{hasImage && data?.ctaImage?.length > 0 && ( - + + + )}
diff --git a/src/components/ItaliaTheme/Blocks/HighlightedContent/Body.jsx b/src/components/ItaliaTheme/Blocks/HighlightedContent/Body.jsx index 8475ff1c9..3d55f2117 100644 --- a/src/components/ItaliaTheme/Blocks/HighlightedContent/Body.jsx +++ b/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,21 @@ 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 (
{content.image && ( )} diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx index e29c39676..795855b52 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx @@ -81,7 +81,7 @@ const CardWithImageTemplate = (props) => { ) : null; - const image = ListingImage({ item }); + const image = ListingImage({ item, loading: 'lazy' }); const showImage = (index < imagesToShow || always_show_image) && image != null; diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx index c580604fe..7dce4a19a 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx @@ -1,44 +1,34 @@ -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/components/Image/helpers'; const ListingImage = ({ item, - showDefault = false, - useOriginal = false, - maxSize, + loading, className = 'listing-image', + responsive = true, ...imageProps }) => { - if (!item.image_field) { - if (showDefault) { - return ; - } - return null; - } else { - return ( - - ); - } + const PreviewImage = config.getComponent({ name: 'PreviewImage' }).component; + + return ( +
)} diff --git a/src/components/ItaliaTheme/View/Commons/WideImage.jsx b/src/components/ItaliaTheme/View/Commons/WideImage.jsx index 567c81188..be1611f5b 100644 --- a/src/components/ItaliaTheme/View/Commons/WideImage.jsx +++ b/src/components/ItaliaTheme/View/Commons/WideImage.jsx @@ -9,7 +9,7 @@ import config from '@plone/volto/registry'; * @params {object} content: Content object. * @returns {string} Markup of the component. */ -const WideImage = ({ image, title, caption, fullWidth = true }) => { +const WideImage = ({ image, title, caption, fullWidth = true, sizes }) => { const Image = config.getComponent({ name: 'Image' }).component; return ( @@ -23,6 +23,8 @@ const WideImage = ({ image, title, caption, fullWidth = true }) => { title={caption || title} critical key={image?.download} + sizes={sizes} + responsive={true} /> )} {caption && ( diff --git a/src/components/ItaliaTheme/View/PageView/PageView.jsx b/src/components/ItaliaTheme/View/PageView/PageView.jsx index 54989cdeb..b608ae9a4 100644 --- a/src/components/ItaliaTheme/View/PageView/PageView.jsx +++ b/src/components/ItaliaTheme/View/PageView/PageView.jsx @@ -97,6 +97,7 @@ const PageView = ({ content, token, location, history }) => { alt={content.title} key={content.image?.download} responsive={true} + sizes="250px" />
)} diff --git a/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoView.jsx b/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoView.jsx index 2196fc1f5..d42858f72 100644 --- a/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoView.jsx +++ b/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoView.jsx @@ -136,6 +136,7 @@ const PaginaArgomentoView = ({ content }) => { title={ searchResults[u['@id'].data?.image_caption] } + sizes="100px" />
)} @@ -161,6 +162,7 @@ const PaginaArgomentoView = ({ content }) => { title={content.caption ?? content.title} key={content.image.download} responsive={true} + sizes="100vw" /> diff --git a/src/components/Image/helpers.js b/src/helpers/image.js similarity index 90% rename from src/components/Image/helpers.js rename to src/helpers/image.js index 77ec59693..8e5b693cf 100644 --- a/src/components/Image/helpers.js +++ b/src/helpers/image.js @@ -1,7 +1,6 @@ import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers'; import config from '@plone/volto/registry'; -//[ToDo]:se in questa cartella rimane solo l'helper, spostare il file negli helpers e aggiornare l'upgrade-guide su sistemi const getImageType = (image) => { let imageType = 'external'; @@ -13,8 +12,7 @@ const getImageType = (image) => { Object.keys(image.scales).length > 0 ) { imageType = 'imageObject'; - } //[ToDo]:togliere tutte le if sopra perchè non verranno piu usate - else if (typeof image === 'string' && isInternalURL(image)) { + } else if (typeof image === 'string' && isInternalURL(image)) { imageType = 'internalUrl'; } return imageType; @@ -57,13 +55,13 @@ export const getImageAttributes = ( const imageType = getImageType(image); switch (imageType) { - case 'svg': //[ToDo]:togliere questo case perchè non verrà piu usato + case 'svg': attrs.src = flattenToAppURL(image.download); break; // Scales object from Plone restapi // ideal use of Plone images - case 'imageObject': //[ToDo]:togliere questo case perchè non verrà piu usato + case 'imageObject': const sortedScales = Object.values(image.scales) .filter((scale) => scale.width <= maxSize) .filter( diff --git a/src/helpers/index.js b/src/helpers/index.js index b2d992e30..8bd14cd24 100644 --- a/src/helpers/index.js +++ b/src/helpers/index.js @@ -33,3 +33,5 @@ export { blockIsNotEmptyPlaceholder, SSRRenderHtml, } from 'design-comuni-plone-theme/helpers/htmlDiff'; + +export { getImageAttributes } from 'design-comuni-plone-theme/helpers/image'; From a809acc8c2d016986acab72308bbf585cdb7061d Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Wed, 13 Sep 2023 11:08:03 +0200 Subject: [PATCH 6/9] fix: view images in listing --- .../Blocks/Listing/CardWithSlideUpTextTemplate.jsx | 2 +- .../Blocks/Listing/Commons/ListingImage.jsx | 1 - .../Blocks/Listing/GridGalleryTemplate.jsx | 4 ++-- .../Blocks/_completeBlockLinkstemplate.scss | 11 ++++------- theme/ItaliaTheme/Blocks/_sliderTemplate.scss | 4 ---- 5 files changed, 7 insertions(+), 15 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithSlideUpTextTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithSlideUpTextTemplate.jsx index b97a6f49b..02a5c4187 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CardWithSlideUpTextTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithSlideUpTextTemplate.jsx @@ -45,7 +45,7 @@ const CardWithSlideUpTextTemplate = (props) => {
{title &&

{title}

}
{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); diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx index 3dbd419f1..a84b56900 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx @@ -34,7 +34,6 @@ const ListingImage = ({ }; export const getListingImageBackground = (item, size) => { - //[ToDo]:vedere dove viene usato e verificare che funzioni bene let url = null; if (item.image_field) { url = getImageAttributes(item['@id'], { diff --git a/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx index 75d79877b..19d37c9db 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx @@ -71,8 +71,7 @@ const GridGalleryTemplate = ({ if (scale && item?.image?.scales?.[scale]) { image = ( - - {/*[ToDo]:togliere volto-image e gestire gli stili dell'immagine*/} + ); diff --git a/theme/ItaliaTheme/Blocks/_completeBlockLinkstemplate.scss b/theme/ItaliaTheme/Blocks/_completeBlockLinkstemplate.scss index 0cd25eaa6..6c462705e 100644 --- a/theme/ItaliaTheme/Blocks/_completeBlockLinkstemplate.scss +++ b/theme/ItaliaTheme/Blocks/_completeBlockLinkstemplate.scss @@ -20,13 +20,10 @@ border-radius: 50%; overflow: hidden; - .volto-image { - //[ToDo]:togliere volto-image e gestire gli stili dell'immagine - img { - width: 100%; - height: 100%; - object-fit: cover; - } + img { + width: 100%; + height: 100%; + object-fit: cover; } } diff --git a/theme/ItaliaTheme/Blocks/_sliderTemplate.scss b/theme/ItaliaTheme/Blocks/_sliderTemplate.scss index dbe5ac0df..de61cc585 100644 --- a/theme/ItaliaTheme/Blocks/_sliderTemplate.scss +++ b/theme/ItaliaTheme/Blocks/_sliderTemplate.scss @@ -101,10 +101,6 @@ img { min-width: 100%; min-height: 400px; - } - - .volto-image.responsive img, //[ToDo]:togliere volto-image e gestire gli stili dell'immagine - img { object-fit: cover; } From 41bf91093eb68181a0ebb768980d39ed3a5cac24 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Wed, 13 Sep 2023 12:50:04 +0200 Subject: [PATCH 7/9] fix: use Image instead PreviewImage in ListingImage --- package.json | 2 +- .../Blocks/Listing/Commons/ListingImage.jsx | 16 ++++++++++------ yarn.lock | 8 ++++---- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index c1d899e61..34d939a2a 100644 --- a/package.json +++ b/package.json @@ -173,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": "git+ssh://git@github.com:plone/volto.git#fix_preview_image", + "@plone/volto": "17.0.0-alpha.25", "@storybook/addon-actions": "^6.5.15", "@storybook/addon-controls": "6.5.15", "@storybook/addon-essentials": "^6.5.15", diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx index a84b56900..c887a3dd8 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx @@ -11,10 +11,13 @@ const ListingImage = ({ sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:768px) 400px, 300px', ...imageProps }) => { - const PreviewImage = config.getComponent({ name: 'PreviewImage' }).component; + const Image = config.getComponent({ name: 'Image' }).component; - return ( -