design-comuni-plone-theme 11.26.3 → 11.26.5

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-12-12T10:58:07.184Z\n"
+"POT-Creation-Date: 2025-02-06T14:26:38.454Z\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"
@@ -195,6 +195,11 @@ msgstr ""
 msgid "Dimensione della mappa"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Add border to inner columns
+msgid "Divide each row into separate cells"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/TrasparenzaFields
 # defaultMessage: Download
 msgid "Download"
@@ -252,6 +257,11 @@ msgstr ""
 msgid "Hide all content types"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Hide headers
+msgid "Hide headers"
+msgstr ""
+
 #: components/ItaliaTheme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -366,6 +376,11 @@ msgstr ""
 msgid "Luogo location filter"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Make the table sortable
+msgid "Make the table sortable"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
 # defaultMessage: Medio
 msgid "Medio"
@@ -540,6 +555,11 @@ msgstr ""
 msgid "Select all or none"
 msgstr ""
 
+#: components/SelectInput/SelectInput
+# defaultMessage: Seleziona un'opzione
+msgid "SelectInput_default_label"
+msgstr ""
+
 #: components/ItaliaTheme/manage/Widgets/FileWidget
 # defaultMessage: Seleziona un file
 msgid "Seleziona un file"
@@ -571,6 +591,16 @@ msgstr ""
 msgid "Subscribe"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Table block
+msgid "Table block"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Table color inverted
+msgid "Table color inverted"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/Accordion/Block/EditBlock
 #: components/ItaliaTheme/Blocks/ContactsBlock/Block/EditBlock
 #: components/ItaliaTheme/Blocks/IconBlocks/Block/EditBlock
@@ -705,6 +735,11 @@ msgstr ""
 msgid "VideoGalleryBlock"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Visible only in view mode
+msgid "Visible only in view mode"
+msgstr ""
+
 #: components/ItaliaTheme/Unauthorized/Unauthorized
 # defaultMessage: You are trying to access a protected resource, please {login} first.
 msgid "You are trying to access a protected resource, please {login} first."
@@ -2814,16 +2849,11 @@ msgstr ""
 msgid "order_by"
 msgstr ""
 
-#: components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno
+#: components/ItaliaTheme/View/EventoView/EventoOrganizzatoDa
 # defaultMessage: Organizzato da
 msgid "organizzato_da"
 msgstr ""
 
-#: components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno
-# defaultMessage: Organizzatore
-msgid "organizzatore"
-msgstr ""
-
 #: components/ItaliaTheme/View/Commons/TrasparenzaFields
 #: components/ItaliaTheme/View/TrasparenzaView/DettagliProcedimentiView
 # defaultMessage: Organo competente adozione provvedimento finale
@@ -2871,6 +2901,7 @@ msgstr ""
 msgid "parteciperanno"
 msgstr ""
 
+#: components/ItaliaTheme/View/EventoView/EventoPatrocinatoDa
 #: components/ItaliaTheme/View/EventoView/EventoUlterioriInformazioni
 # defaultMessage: Patrocinato da
 msgid "patrocinato_da"
@@ -3709,7 +3740,7 @@ msgid "show_only_first_ribbon"
 msgstr ""
 
 #: config/Blocks/ListingOptions/attachmentCardTemplate
-# defaultMessage: Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata altrimenti vengono scaricati.
+# defaultMessage: Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata. Se non impostato, i PDF vengono scaricati.
 msgid "show_pdf_desc"
 msgstr ""
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.26.3",
+  "version": "11.26.5",
   "main": "src/index.js",
   "repository": {
     "type": "git",
@@ -165,7 +165,7 @@
     "volto-subblocks": "2.1.0",
     "volto-subfooter": "3.1.1",
     "volto-subsites": "4.0.2",
-    "volto-venue": "4.1.0",
+    "volto-venue": "4.1.1",
     "webpack-image-resize-loader": "^5.0.0"
   },
   "devDependencies": {
@@ -200,7 +200,7 @@
     "stylelint-prettier": "4.0.2"
   },
   "peerDependencies": {
-    "@plone/volto": "17.20.3"
+    "@plone/volto": "17.20.4"
   },
   "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: '2025-01-15'
+releaseDate: '2025-02-06'
 softwareType: standalone/web
-softwareVersion: 11.26.3
+softwareVersion: 11.26.5
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ImageWithErrors/ImageWithErrors.jsx

@@ -11,7 +11,6 @@ const ImageWithErrors = ({ src, fallbackSrc = '', ...rest }) => {
       className,
       sizes,
     });
-
   let commonProps = { ...rest };
   const fallbackStyle = getFallbackImageStyle({
     src,

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

@@ -52,16 +52,18 @@ const AttachmentCardTemplate = ({
           {items.map((item, index) => {
             let itemUrl = { ...item };
             //la parte qui sotto commentata non serve perchè gestisce gia tutto UniversalLink e in view si vedrebbe /@@download/file duplicato nell url
-            // if (item['@type'] === 'File') {
-            //   itemUrl = {
-            //     ...item,
-            //     file: item,
-            //     '@id':
-            //       show_pdf_preview && item?.mime_type === 'application/pdf'
-            //         ? item?.['@id'] + '/@@display-file/file'
-            //         : item?.['@id'] + '/@@download/file',
-            //   };
-            // }
+            if (
+              item['@type'] === 'File' &&
+              item?.mime_type === 'application/pdf'
+            ) {
+              itemUrl = {
+                ...item,
+                file: item,
+                '@id': show_pdf_preview
+                  ? item?.['@id'] + '/@@display-file/file'
+                  : item?.['@id'] + '/@@download/file',
+              };
+            }
 
             return (
               <Card
@@ -86,6 +88,7 @@ const AttachmentCardTemplate = ({
                       item={!isEditMode ? itemUrl : null}
                       href={isEditMode ? '#' : null}
                       data-element={id_lighthouse}
+                      download={!show_pdf_preview}
                     >
                       {item.title || item.id}
                     </UniversalLink>

package/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx

@@ -21,6 +21,7 @@ import {
   getCalendarDate,
   getEventRecurrenceMore,
   getComponentWithFallback,
+  contentHasImage,
 } from 'design-comuni-plone-theme/helpers';
 import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
 
@@ -61,10 +62,10 @@ const CardWithImageDefault = (props) => {
     : getEventRecurrenceMore(item, isEditMode);
   const listingText = show_description ? <ListingText item={item} /> : null;
 
-  const image = ListingImage({ item, showTitleAttr: false });
-
-  const showImage =
-    (index < imagesToShow || always_show_image) && image != null;
+  const showImage = contentHasImage(
+    item,
+    index < imagesToShow || always_show_image,
+  );
   const category = getCategory(item, show_type, show_section, props);
   const topics = show_topics ? item.tassonomia_argomenti : null;
 
@@ -72,7 +73,6 @@ const CardWithImageDefault = (props) => {
     name: 'BlockExtraTags',
     dependencies: ['CardWithImageDefault', item['@type']],
   }).component;
-
   const isEventAppointment =
     item?.parent?.['@type'] === 'Event' && item?.['@type'] === 'Event';
 
@@ -106,7 +106,7 @@ const CardWithImageDefault = (props) => {
               })}
             >
               <div className="img-responsive img-responsive-panoramic">
-                {image}
+                <ListingImage item={item} showTitleAttr={false} />
                 {item['@type'] === 'Event' && (
                   <CardCalendar
                     start={item.start}
@@ -151,7 +151,7 @@ const CardWithImageDefault = (props) => {
             <BlockExtraTags {...props} item={item} itemIndex={index} />
             {topics?.length > 0 && (
               <div
-                className={cx('', {
+                className={cx('card-with-image-additional-links', {
                   'mb-3': eventRecurrenceMore,
                 })}
               >

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

@@ -1,8 +1,19 @@
 import { UniversalLink } from '@plone/volto/components';
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
+const ListingImageWrapper = ({ children, item, noWrapLink }) => {
+  return noWrapLink ? (
+    children
+  ) : (
+    <UniversalLink item={item} className="img-wrapper">
+      {children}
+    </UniversalLink>
+  );
+};
+
 const ListingImage = ({
   item = {},
   loading = 'lazy',
@@ -14,6 +25,26 @@ const ListingImage = ({
   noWrapLink = false,
   ...imageProps
 }) => {
+  if (!contentHasImage(item) && !imageProps?.image_field) {
+    if (showDefault) {
+      return (
+        <ListingImageWrapper item={item} noWrapLink={noWrapLink}>
+          <img
+            src={DefaultImageSVG}
+            alt=""
+            sizes={sizes}
+            aria-hidden={true}
+            role="presentation"
+            className="listing-image responsive"
+            style={{
+              minHeight: 'unset',
+              height: '100%',
+            }}
+          />
+        </ListingImageWrapper>
+      );
+    } else return null;
+  }
   const Image = config.getComponent({ name: 'Image' }).component;
   let commonImageProps = {
     item,
@@ -28,20 +59,11 @@ const ListingImage = ({
   };
   if (showTitleAttr)
     commonImageProps = { ...commonImageProps, title: item.title };
-  // photogallery needs to check for null image
-  // https://stackoverflow.com/questions/33136399/is-there-a-way-to-tell-if-reactelement-renders-null
-
-  const image = Image(commonImageProps);
-  const defaultImage = <img src={DefaultImageSVG} alt="" />;
-
-  if (image === null && !showDefault) return null;
 
-  return !noWrapLink ? (
-    <UniversalLink item={item} className="img-wrapper">
-      {image ?? defaultImage}
-    </UniversalLink>
-  ) : (
-    image ?? defaultImage
+  return (
+    <ListingImageWrapper item={item} noWrapLink={noWrapLink}>
+      <Image {...commonImageProps} />
+    </ListingImageWrapper>
   );
 };
 

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

@@ -19,7 +19,10 @@ import {
   ListingImage,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { getComponentWithFallback } from 'design-comuni-plone-theme/helpers';
+import {
+  getComponentWithFallback,
+  contentHasImage,
+} from 'design-comuni-plone-theme/helpers';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
 import config from '@plone/volto/registry';
@@ -56,14 +59,7 @@ const CompleteBlockLinksTemplate = (props) => {
         )}
         <Row className="items">
           {items.map((item, index) => {
-            const image = ListingImage({
-              item,
-              className: '',
-              sizes: '60px',
-              showTitleAttr: false,
-              alt: item.title,
-            });
-
+            const hasImage = contentHasImage(item);
             const BlockExtraTags = getComponentWithFallback({
               name: 'BlockExtraTags',
               dependencies: ['CompleteBlockLinksTemplate', item['@type']],
@@ -84,7 +80,17 @@ const CompleteBlockLinksTemplate = (props) => {
                     className={'no-external-if-link'}
                   >
                     <div className="d-flex">
-                      {image && <div className="image-container">{image}</div>}
+                      {hasImage && (
+                        <div className="image-container">
+                          <ListingImage
+                            item={item}
+                            className=""
+                            sizes="60px"
+                            showTitleAttr={false}
+                            alt={item.title}
+                          />
+                        </div>
+                      )}
                       <div>
                         <CardBody>
                           <CardTitle tag="h3" className="text-secondary">

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

@@ -23,6 +23,7 @@ import {
   getCalendarDate,
   getEventRecurrenceMore,
   getComponentWithFallback,
+  contentHasImage,
 } from 'design-comuni-plone-theme/helpers';
 import {
   ListingCategory,
@@ -66,13 +67,7 @@ const ContentInEvidenceTemplate = (props) => {
           const date = getCalendarDate(item, rrule.rrulestr);
           const eventRecurrenceMore = getEventRecurrenceMore(item, isEditMode);
           const listingText = <ListingText item={item} />;
-          const image = ListingImage({
-            item,
-            className: 'item-image',
-            loading: 'eager',
-            sizes: '(max-width:425px) 400px, (max-width:767px) 520px, 650px',
-            showTitleAttr: false,
-          });
+          const hasImage = contentHasImage(item);
           const icon = getItemIcon(item);
           const BlockExtraTags = getComponentWithFallback({
             name: 'BlockExtraTags',
@@ -84,8 +79,16 @@ const ContentInEvidenceTemplate = (props) => {
 
           return (
             <Row key={item['@id']} className="content-in-evidence">
-              {image && (
-                <Col lg={{ size: 6, offset: 1, order: 2 }}>{image}</Col>
+              {hasImage && (
+                <Col lg={{ size: 6, offset: 1, order: 2 }}>
+                  <ListingImage
+                    item={item}
+                    className="item-image"
+                    loading="eager"
+                    sizes="(max-width:425px) 400px, (max-width:767px) 520px, 650px"
+                    showTitleAttr={false}
+                  />
+                </Col>
               )}
               <Col lg={{ size: 5, order: 1 }}>
                 <Card>

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

@@ -7,7 +7,7 @@ import {
   ListingLinkMore,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { defineMessages, useIntl } from 'react-intl';
-
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { UniversalLink } from '@plone/volto/components';
@@ -55,12 +55,11 @@ const GridGalleryTemplate = ({
         )}
         <div className="grid-gallery-grid">
           {items.map((item, index) => {
-            let image = ListingImage({
-              item,
-              className: '',
-              showTitleAttr: false,
-            });
+            let image = (
+              <ListingImage item={item} className="" showTitleAttr={false} />
+            );
             let scale = null;
+            let hasImage = contentHasImage(item);
             if (index % 7 === 0 || index % 7 === 6 || index % 7 === 3) {
               scale = 'great';
             }
@@ -83,6 +82,7 @@ const GridGalleryTemplate = ({
                   loading={critical ? 'eager' : 'lazy'}
                 />
               );
+              hasImage = true;
             }
 
             return (
@@ -94,7 +94,7 @@ const GridGalleryTemplate = ({
                   item={!isEditMode ? item : null}
                   href={isEditMode ? '#' : null}
                 >
-                  {image && (
+                  {hasImage && (
                     <picture className="volto-image responsive">
                       {image}
                     </picture>

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

@@ -23,6 +23,7 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import {
   getCalendarDate,
   getEventRecurrenceMore,
+  contentHasImage,
 } from 'design-comuni-plone-theme/helpers';
 import {
   CardCalendar,
@@ -87,11 +88,7 @@ const InEvidenceTemplate = (props) => {
             const listingText = show_description ? (
               <ListingText item={item} />
             ) : null;
-            const image = ListingImage({
-              item,
-              sizes: '(max-width:320px) 200px, 300px',
-              showTitleAttr: false,
-            });
+            const hasImage = contentHasImage(item);
             const category = getCategory(item, show_type, show_section, props);
             const topics = show_topics ? item.tassonomia_argomenti : null;
 
@@ -103,7 +100,7 @@ const InEvidenceTemplate = (props) => {
               <CardPersona
                 item={item}
                 className="listing-item card-bg"
-                showImage={image ? true : false}
+                showImage={hasImage}
                 show_description={show_description}
                 icon={icon}
                 isEditMode={isEditMode}
@@ -111,10 +108,14 @@ const InEvidenceTemplate = (props) => {
               />
             ) : (
               <Card key={index} className={cx('listing-item card-bg')}>
-                {index === 0 && image && (
+                {index === 0 && hasImage && (
                   <div className="img-responsive-wrapper">
                     <div className="img-responsive">
-                      {image}
+                      <ListingImage
+                        item={item}
+                        sizes="(max-width:320px) 200px, 300px"
+                        showTitleAttr={false}
+                      />
                       {item['@type'] === 'Event' && (
                         <CardCalendar start={item.start} end={item.end} />
                       )}

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

@@ -127,10 +127,10 @@ const PhotogalleryTemplate = ({
 
   const getCaption = (item) => item.description ?? item.rights ?? null;
 
-  const figure = (image, item) => {
+  const figure = (imageProps, item) => {
     return (
       <figure className="img-wrapper volto-image responsive">
-        {image}
+        <ListingImage {...imageProps} />
         {getCaption(item) && <figcaption>{getCaption(item)}</figcaption>}
       </figure>
     );
@@ -152,7 +152,7 @@ const PhotogalleryTemplate = ({
           <CarouselWrapper className="it-card-bg">
             <Slider {...settings} ref={slider}>
               {items.map((item, i) => {
-                const image = ListingImage({
+                const imageProps = {
                   item,
                   sizes: `(max-width:600px) 450px, (max-width:1024px) ${
                     items.length < 2 ? '1000' : '500'
@@ -164,7 +164,8 @@ const PhotogalleryTemplate = ({
                       : '450'
                   }px`,
                   noWrapLink: true,
-                });
+                  showDefault: true,
+                };
                 return (
                   <SingleSlideWrapper
                     className={cx('', {
@@ -179,7 +180,7 @@ const PhotogalleryTemplate = ({
                         openLinkInNewTab={true}
                         title={intl.formatMessage(messages.viewImage)}
                       >
-                        {figure(image, item)}
+                        {figure(imageProps, item)}
                       </UniversalLink>
                     ) : (
                       <a
@@ -204,7 +205,7 @@ const PhotogalleryTemplate = ({
                           messages.viewPreview,
                         )} ${item.title}`}
                       >
-                        {figure(image, item)}
+                        {figure(imageProps, item)}
                       </a>
                     )}
                   </SingleSlideWrapper>

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

@@ -218,12 +218,15 @@ const SliderTemplate = ({
 
             <Slider {...settings} ref={slider}>
               {items.map((item, index) => {
-                const image = ListingImage({
-                  item,
-                  loading: index === 0 ? 'eager' : 'lazy',
-                  sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`,
-                  critical: true,
-                });
+                const image = (
+                  <ListingImage
+                    item={item}
+                    loading={index === 0 ? 'eager' : 'lazy'}
+                    sizes={`max-width(991px) 620px, ${1300 / nSlidesToShow}px`}
+                    critical
+                    showDefault
+                  />
+                );
                 const nextIndex = index < items.length - 1 ? index + 1 : null;
                 const prevIndex = index > 0 ? index - 1 : null;
                 return (

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

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { Container, Row, Col } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
-
 import {
   ListingLinkMore,
   ListingImage,
@@ -38,34 +37,31 @@ const SmallBlockLinksTemplate = ({
         )}
         <Row className="items">
           {items.map((item, index) => {
-            const image = ListingImage({
-              item,
-              sizes: '(max-width:575px) 520px, 200px',
-              style: {},
-              alt: item.title,
-              noWrapLink: true,
-            });
-
             return (
               <Col
                 md="3"
                 key={item['@id']}
                 className="col-item col-sm-4 col-lg-2"
               >
-                {image && (
-                  <div className="center-image-card">
-                    <UniversalLink
-                      item={!isEditMode ? item : null}
-                      href={isEditMode ? '#' : ''}
-                      className="img-link"
-                      overrideMarkSpecialLinks={
-                        override_links_accessibility_marker
-                      }
-                    >
-                      {image}
-                    </UniversalLink>
-                  </div>
-                )}
+                <div className="center-image-card">
+                  <UniversalLink
+                    item={!isEditMode ? item : null}
+                    href={isEditMode ? '#' : ''}
+                    className="img-link"
+                    overrideMarkSpecialLinks={
+                      override_links_accessibility_marker
+                    }
+                  >
+                    <ListingImage
+                      item={item}
+                      sizes="(max-width:575px) 520px, 200px"
+                      style={{}}
+                      alt={item.title}
+                      noWrapLink
+                      showDefault
+                    />
+                  </UniversalLink>
+                </div>
               </Col>
             );
           })}

package/src/components/ItaliaTheme/Cards/CardPersona.jsx

@@ -8,6 +8,7 @@ import {
   ListingCategory,
   ListingImage,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 
 export const CardPersona = ({
   item,
@@ -20,13 +21,7 @@ export const CardPersona = ({
   type,
   isEditMode,
 }) => {
-  const image = ListingImage({
-    item,
-    sizes: '130px',
-    showTitleAttr: false,
-  });
-
-  const hasImage = image !== null && showImage;
+  const hasImage = contentHasImage(item) && showImage;
 
   return (
     <Card
@@ -58,7 +53,9 @@ export const CardPersona = ({
           )}
         </CardBody>
         {hasImage && (
-          <div className="card-image card-image-rounded">{image}</div>
+          <div className="card-image card-image-rounded">
+            <ListingImage item={item} sizes="130px" showTitleAttr={false} />
+          </div>
         )}
       </div>
     </Card>