design-comuni-plone-theme 11.26.3 → 11.26.5

package/src/components/ItaliaTheme/View/Commons/GenericCard.jsx

@@ -4,7 +4,10 @@ import cx from 'classnames';
 
 import { UniversalLink } from '@plone/volto/components';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { getCalendarDate } from 'design-comuni-plone-theme/helpers';
+import {
+  getCalendarDate,
+  contentHasImage,
+} from 'design-comuni-plone-theme/helpers';
 import {
   Icon,
   CardCategory,
@@ -48,23 +51,21 @@ const GenericCard = ({
     </>
   );
   const cooked_image_field = image_field || item.image_field;
-  // (item.preview_image ? 'preview_image' : 'image');
-  const image =
-    showimage &&
-    item &&
-    Image({
-      item: item,
-      imageField: cooked_image_field,
-      alt: '',
-      title: item.title,
-    });
+  const showImage = showimage && contentHasImage(item) && cooked_image_field;
 
   return item ? (
-    image ? (
+    showImage ? (
       <div className={cx('genericcard card shadow rounded mt-3')}>
         <div className="img-responsive-wrapper">
           <div className="img-responsive img-responsive-panoramic">
-            <figure className="img-wrapper">{image}</figure>
+            <figure className="img-wrapper">
+              <Image
+                item={item}
+                imageField={cooked_image_field}
+                alt={''}
+                title={item.title}
+              />
+            </figure>
           </div>
         </div>
         <div className="card-body px-4">

package/src/components/ItaliaTheme/View/Commons/LocationItem.jsx

@@ -8,6 +8,7 @@ import { UniversalLink } from '@plone/volto/components';
 import PropTypes from 'prop-types';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -41,24 +42,25 @@ const LocationItem = ({
 }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image = Image({ item: location, sizes: '80px', loading: 'lazy' });
+  const showImage = contentHasImage(location) && location['@type'] === 'Venue';
   const address = ['street', 'city', 'zip_code']
     .map((key) => location?.[key])
     .filter(Boolean)
     .join(' - ');
 
   return location ? (
-    <div className="card card-teaser shadow mt-3 border-left-card card-big-io-comune p-4 rounded location-item">
-      {show_icon && (
-        <Icon
-          icon={'it-pin'}
-          title={intl.formatMessage(messages.icona_luoghi)}
-        />
-      )}
+    <div className="card card-teaser shadow mt-3 border-left-card card-big-io-comune pt-4 pb-4 ps-3 pe-4 rounded location-item">
       <div className="card-body">
         <div className="card-title h5 venue-card-title">
           {(location.nome_sede || location.title) && (
             <>
+              {show_icon && (
+                <Icon
+                  icon={'it-pin'}
+                  title={intl.formatMessage(messages.icona_luoghi)}
+                  className="pin-icon"
+                />
+              )}
               {location['@type'] === 'Venue' ||
               (location['@type'] === 'UnitaOrganizzativa' &&
                 show_title_link) ? (
@@ -104,7 +106,11 @@ const LocationItem = ({
           )}
         </div>
       </div>
-      {image && <div className="avatar size-xl">{image}</div>}
+      {showImage && (
+        <div className="avatar size-lg">
+          <Image item={location} sizes="80px" loading="lazy" />
+        </div>
+      )}
     </div>
   ) : (
     ''

package/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx

@@ -3,6 +3,7 @@ import { UniversalLink } from '@plone/volto/components';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
 /**
@@ -24,8 +25,7 @@ const OfficeCard = ({
 }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image =
-    showimage && Image({ item: office, sizes: '80px', loading: 'lazy' });
+  const showImage = showimage && contentHasImage(office);
 
   return (
     <div
@@ -74,7 +74,11 @@ const OfficeCard = ({
 
         {children && <div className="card-text">{children}</div>}
       </div>
-      {image && <div className="image-container">{image}</div>}
+      {showImage && (
+        <div className="avatar size-lg">
+          <Image item={office} sizes="80px" loading="lazy" />
+        </div>
+      )}
     </div>
   );
 };

package/src/components/ItaliaTheme/View/Commons/Sponsors.jsx

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 import { searchContent, resetSearchContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import PropTypes from 'prop-types';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import { UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 
@@ -23,19 +24,22 @@ const messages = defineMessages({
  */
 const Sponsor = ({ item }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image =
-    item?.image &&
-    Image({
-      item: item,
-      sizes: '600px',
-      loading: 'lazy',
-      className: 'img-fluid',
-      alt: item.image.filename ?? item.title,
-    });
+  const showImage = contentHasImage(item);
+
   return item ? (
     <div className="sponsor-item">
       <UniversalLink href={item.remoteUrl}>
-        {image ? image : item.title}
+        {showImage ? (
+          <Image
+            item={item}
+            sizes="600px"
+            loading="lazy"
+            className="img-fluid"
+            alt={item.image.filename ?? item.title}
+          />
+        ) : (
+          item.title
+        )}
       </UniversalLink>
     </div>
   ) : null;

package/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx

@@ -2,6 +2,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import config from '@plone/volto/registry';
 
@@ -26,13 +27,15 @@ const messages = defineMessages({
 const Location = ({ location, show_icon }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image = Image({ item: location, loading: 'lazy', sizes: '80px' });
+  const showImage = contentHasImage(location);
   return (
     location && (
-      <div className="card card-teaser shadow border-left-card mt-3 rounded location-item">
-        {show_icon && <Icon icon={'it-pin'} />}
+      <div className="card card-teaser shadow border-left-card mt-3 card-small rounded location-item">
         <div className="card-body">
-          <div className="card-title h5">{location.title}</div>
+          <div className="card-title h5">
+            {show_icon && <Icon icon={'it-pin'} />}
+            {location.title}
+          </div>
           <div className="card-text">
             {(location.street || location.zip_code) && (
               <p>
@@ -51,7 +54,11 @@ const Location = ({ location, show_icon }) => {
             </p>
           </div>
         </div>
-        {image && <div className="avatar size-xl">{image}</div>}
+        {showImage && (
+          <div className="avatar size-lg">
+            <Image item={location} loading="lazy" sizes="80px" />
+          </div>
+        )}
       </div>
     )
   );
@@ -65,7 +72,7 @@ const Location = ({ location, show_icon }) => {
  */
 const VenuesSmall = ({ venues, show_icon }) => {
   return venues ? (
-    <div className="card-wrapper card-teaser-wrapper">
+    <div className="card-wrapper card-teaser-wrapper align-items-stretch">
       {venues.map((item) => (
         <Location key={item['@id']} location={item} show_icon={show_icon} />
       ))}

package/src/components/ItaliaTheme/View/EventoView/EventoContatti.jsx

@@ -5,9 +5,10 @@ import {
   RichTextSection,
   ContactsCard,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
-import EventoContattiOrganizzatoreEsterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno';
-import EventoContattiOrganizzatoreInterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno';
+
 import EventoContattiSupportatoDa from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiSupportatoDa';
+import EventoOrganizzatoDa from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoOrganizzatoDa';
+import EventoPatrocinatoDa from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoPatrocinatoDa';
 
 const messages = defineMessages({
   contatti: {
@@ -31,14 +32,14 @@ const EventoContatti = ({ content }) => {
         <ContactsCard contact={contact} key={contact['@id']} />
       ))}
 
-      {/* ---organizzato da esterno */}
-      <EventoContattiOrganizzatoreEsterno content={content} />
-
-      {/* ---contatti interno */}
-      <EventoContattiOrganizzatoreInterno content={content} />
+      {/* ---organizzato da */}
+      <EventoOrganizzatoDa content={content} />
 
       {/* ---supportato da */}
       <EventoContattiSupportatoDa content={content} />
+
+      {/* ---patrocinato da */}
+      <EventoPatrocinatoDa content={content} />
     </RichTextSection>
   ) : null;
 };

package/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { defineMessages, useIntl } from 'react-intl';
 import { Card, CardBody } from 'design-react-kit';
 import {
   RichText,
@@ -7,22 +6,12 @@ import {
   ContactLink,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
-const messages = defineMessages({
-  organizzatore: {
-    id: 'organizzatore',
-    defaultMessage: 'Organizzatore',
-  },
-});
-
 const EventoContattiOrganizzatoreEsterno = ({ content }) => {
-  const intl = useIntl();
-
   return richTextHasContent(content?.organizzato_da_esterno) ||
     content?.telefono ||
     content?.email ||
     content?.fax ? (
-    <div className="mb-5 mt-3">
-      <h3 className="h5">{intl.formatMessage(messages.organizzatore)}</h3>
+    <div className="mb-5">
       <Card
         className="card card-teaser rounded shadow mt-3"
         noWrapper={true}

package/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno.jsx

@@ -1,23 +1,12 @@
 import PropTypes from 'prop-types';
-import { defineMessages, useIntl } from 'react-intl';
 import {
   richTextHasContent,
   OfficeCard,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
-const messages = defineMessages({
-  organizzato_da: {
-    id: 'organizzato_da',
-    defaultMessage: 'Organizzato da',
-  },
-});
-
 const EventoContattiOrganizzatoreInterno = ({ content }) => {
-  const intl = useIntl();
-
   return content?.organizzato_da_interno?.length > 0 ? (
-    <div className="mb-5">
-      <h3 className="h5">{intl.formatMessage(messages.organizzato_da)}</h3>
+    <div className="mb-3">
       {content?.organizzato_da_interno?.map((item, index) => (
         <OfficeCard
           margin_bottom={index < content?.organizzato_da_interno?.length - 1}

package/src/components/ItaliaTheme/View/EventoView/EventoOrganizzatoDa.jsx

@@ -0,0 +1,38 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { richTextHasContent } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import EventoContattiOrganizzatoreInterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno';
+import EventoContattiOrganizzatoreEsterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno';
+
+const messages = defineMessages({
+  organizzato_da: {
+    id: 'organizzato_da',
+    defaultMessage: 'Organizzato da',
+  },
+});
+
+const EventoOrganizzatoDa = ({ content }) => {
+  const intl = useIntl();
+
+  return content?.organizzato_da_interno?.length > 0 ||
+    richTextHasContent(content?.organizzato_da_esterno) ||
+    content?.telefono ||
+    content?.email ||
+    content?.fax ? (
+    <div className="mb-5 mt-3">
+      <h3 className="h5 mb-3">{intl.formatMessage(messages.organizzato_da)}</h3>
+
+      {content?.organizzato_da_interno.length > 0 && (
+        <EventoContattiOrganizzatoreInterno content={content} />
+      )}
+
+      {(richTextHasContent(content?.organizzato_da_esterno) ||
+        content?.telefono ||
+        content?.email ||
+        content?.fax) && (
+        <EventoContattiOrganizzatoreEsterno content={content} />
+      )}
+    </div>
+  ) : null;
+};
+
+export default EventoOrganizzatoDa;

package/src/components/ItaliaTheme/View/EventoView/EventoPatrocinatoDa.jsx

@@ -0,0 +1,38 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { Card, CardBody } from 'design-react-kit';
+
+import {
+  richTextHasContent,
+  RichText,
+} from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+
+const messages = defineMessages({
+  patrocinato_da: {
+    id: 'patrocinato_da',
+    defaultMessage: 'Patrocinato da',
+  },
+});
+
+const EventoPatrocinatoDa = ({ content }) => {
+  const intl = useIntl();
+  return richTextHasContent(content?.patrocinato_da) ? (
+    <div className="mb-5">
+      <h3 className="mt-4 patrocinato-da h5">
+        {intl.formatMessage(messages.patrocinato_da)}
+      </h3>
+      <Card
+        className="card card-teaser rounded shadow mt-3"
+        noWrapper={true}
+        tag="div"
+      >
+        <CardBody tag="div" className={'card-body pe-3'}>
+          <div className="mb-5">
+            <RichText data={content?.patrocinato_da} />
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  ) : null;
+};
+
+export default EventoPatrocinatoDa;

package/src/components/ItaliaTheme/View/EventoView/EventoUlterioriInformazioni.jsx

@@ -6,7 +6,6 @@ import { defineMessages, useIntl } from 'react-intl';
 import { UniversalLink } from '@plone/volto/components';
 import {
   richTextHasContent,
-  RichText,
   Metadata,
   HelpBox,
   GenericCard,
@@ -51,18 +50,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
           </UniversalLink>
         </div>
       )}
-      {richTextHasContent(content?.patrocinato_da) && (
-        <div className="mt-4">
-          {richTextHasContent(content?.patrocinato_da) && (
-            <div className="mb-5">
-              <RichText
-                title={intl.formatMessage(messages.patrocinato_da)}
-                data={content?.patrocinato_da}
-              />
-            </div>
-          )}
-        </div>
-      )}
       {content?.strutture_politiche?.length > 0 && (
         <div className="mt-4">
           <h3 className="h5">
@@ -91,11 +78,6 @@ EventoUlterioriInformazioni.propTypes = {
     ulteriori_informazioni: PropTypes.shape({
       data: PropTypes.string,
     }),
-    patrocinato_da: PropTypes.shape({
-      'content-type': PropTypes.string,
-      data: PropTypes.string,
-      encoding: PropTypes.string,
-    }),
     strutture_politiche: PropTypes.array,
     items: PropTypes.array,
   }).isRequired,

package/src/components/ItaliaTheme/View/NewsItemView/NewsItemText.jsx

@@ -16,6 +16,7 @@ const messages = defineMessages({
 
 const NewsItemText = ({ content }) => {
   const intl = useIntl();
+  if (typeof content !== 'object') return null;
 
   // NewsItem ha la descrizione_estesa (testo con blocchi)
   // altri CT (come i Comunicati Stampa) potrebbero avere `text`

package/src/components/SelectInput/SelectInput.jsx

@@ -92,6 +92,10 @@ const messages = defineMessages({
     id: 'dropdown_indicator',
     defaultMessage: 'Apri il menu',
   },
+  SelectInput_default_label: {
+    id: 'SelectInput_default_label',
+    defaultMessage: "Seleziona un'opzione",
+  },
 });
 
 const SelectContainer = injectLazyLibs('reactSelect')(({
@@ -313,14 +317,15 @@ const SelectInput = ({
   options,
   components = {},
   reactSelect,
+  labelledby,
   defaultValue,
 }) => {
   const intl = useIntl();
+  const labelDefined =
+    label || intl.formatMessage(messages.SelectInput_default_label);
   const Select = reactSelect.default;
   return (
     <div className="bootstrap-select-wrapper">
-      {label && <label htmlFor={id}>{label}</label>}
-
       <Select
         components={{
           MenuList,
@@ -341,9 +346,9 @@ const SelectInput = ({
         isSearchable={isSearchable}
         isMulti={isMulti}
         isClearable={isClearable}
-        aria-label={label}
+        aria-label={labelDefined}
+        aria-labelledby={labelledby}
         aria-live="polite"
-        aria-labelledby={id}
         ariaLiveMessages={getSelectAriaLiveMessages(intl)}
         noOptionsMessage={() =>
           intl.formatMessage(messages.select_noOptionsMessage)

package/src/config/Blocks/ListingOptions/attachmentCardTemplate.js

@@ -10,7 +10,7 @@ const messages = defineMessages({
   show_pdf_desc: {
     id: 'show_pdf_desc',
     defaultMessage:
-      "Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata altrimenti vengono scaricati.",
+      "Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata. Se non impostato, i PDF vengono scaricati.",
   },
 });
 

package/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx

@@ -5,6 +5,7 @@
  * CUSTOMIZATIONS:
  * - aggiunto icona per link esterni
  * - aggiunto title informativo per link esterni
+ * - aggiunta la condizione su @@display-file e @download-file per gestire i casi in cui questi parametri vengono imposti a monte
  */
 
 import React from 'react';
@@ -59,18 +60,21 @@ const UniversalLink = ({
       }
 
       //case: item of type 'File'
-      if (
-        !token &&
-        config.settings.downloadableObjects.includes(item['@type'])
-      ) {
-        url = `${url}/@@download/file`;
-      }
+      if (!url.includes('@@download') && !url.includes('@@display-file')) {
+        //se non è gia stato aggiunto il suffisso per il download nell'@id dell'item
+        if (
+          !token &&
+          config.settings.downloadableObjects.includes(item['@type'])
+        ) {
+          url = `${url}/@@download/file`;
+        }
 
-      if (
-        !token &&
-        config.settings.viewableInBrowserObjects.includes(item['@type'])
-      ) {
-        url = `${url}/@@display-file/file`;
+        if (
+          !token &&
+          config.settings.viewableInBrowserObjects.includes(item['@type'])
+        ) {
+          url = `${url}/@@display-file/file`;
+        }
       }
     }
   }

package/src/customizations/volto/components/theme/View/ListingView.jsx

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { PageHeader } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 import { ListingImage } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 
 /**
  * List view component class.
@@ -23,8 +24,7 @@ const ListingView = ({ content }) => (
     <PageHeader content={content} />
     <section id="content-core">
       {content.items.map((item) => {
-        const image = ListingImage({ item });
-
+        const hasImage = contentHasImage(item);
         return (
           <div key={item.url} className="listing-item my-4">
             <div>
@@ -35,7 +35,7 @@ const ListingView = ({ content }) => (
               </h2>
               {item.description && <p>{item.description}</p>}
             </div>
-            {image && <>{image}</>}
+            {hasImage && <ListingImage item={item} />}
           </div>
         );
       })}

package/src/helpers/images.js

@@ -50,4 +50,28 @@ const useFallbackImageSrc = ({
   return { currentSrc, handleError, getFallbackImageStyle };
 };
 
-export { FALLBACK_IMAGE_SRC, FALLBACK_IMAGE_SRC_MAX_W, useFallbackImageSrc };
+/*
+ Check if a Content item has a related image
+ This check is done on image_field and image_scales fields, which are
+ the default fields in a JSON response for a content in plone.restapi
+
+ @param {Object} item - The Plone item/brain/content
+*/
+const contentHasImage = (item) => {
+  if (!item) return false;
+  const isFromRealObject = !item.image_scales;
+  const imageFieldWithDefault = item.image_field || 'image';
+
+  const image = isFromRealObject
+    ? item[imageFieldWithDefault]
+    : item.image_scales[imageFieldWithDefault]?.[0];
+
+  return Boolean(image);
+};
+
+export {
+  FALLBACK_IMAGE_SRC,
+  FALLBACK_IMAGE_SRC_MAX_W,
+  useFallbackImageSrc,
+  contentHasImage,
+};

package/src/helpers/index.js

@@ -59,4 +59,7 @@ export {
   isResolveUID,
 } from 'design-comuni-plone-theme/helpers/url';
 export { usePaginatedItemsSection } from 'design-comuni-plone-theme/helpers/usePaginatedItemsSection.hook.ts';
-export { useFallbackImageSrc } from 'design-comuni-plone-theme/helpers/images';
+export {
+  useFallbackImageSrc,
+  contentHasImage,
+} from 'design-comuni-plone-theme/helpers/images';

package/src/overrideTranslations.jsx

@@ -99,4 +99,29 @@ defineMessages({
     defaultMessage:
       'As per the official information architecture outlined in measure 1.4.1, all forms must be properly uploaded in the designated section within Amministrazione > Documenti e Dati > Modulistica, and linked to the relevant service sheet. It is no longer possible to upload files and attachments directly into this container.',
   },
+  //table block
+  hideHeaders: {
+    id: 'Hide headers',
+    defaultMessage: 'Hide headers',
+  },
+  sortable: {
+    id: 'Make the table sortable',
+    defaultMessage: 'Make the table sortable',
+  },
+  sortableDescription: {
+    id: 'Visible only in view mode',
+    defaultMessage: 'Visible only in view mode',
+  },
+  inverted: {
+    id: 'Table color inverted',
+    defaultMessage: 'Table color inverted',
+  },
+  table_block: {
+    id: 'Table block',
+    defaultMessage: 'Table block',
+  },
+  divideRows: {
+    id: 'Divide each row into separate cells',
+    defaultMessage: 'Add border to inner columns',
+  },
 });

package/src/theme/ItaliaTheme/Blocks/_cardWithImage.scss

@@ -13,6 +13,10 @@
       display: inline-block;
     }
 
+    .card-with-image-additional-links a {
+      width: auto;
+    }
+
     .img-responsive-wrapper {
       width: inherit;
 

package/src/theme/ItaliaTheme/Blocks/_gridBlock.scss

@@ -89,6 +89,15 @@
       }
     }
   }
+
+  @media (max-width: #{map-get($grid-breakpoints, md)}) {
+    > .row {
+      gap: 1em;
+      > .col {
+        flex: 1 0 100%;
+      }
+    }
+  }
 }
 
 body.cms-ui.has-toolbar.has-sidebar {