design-comuni-plone-theme 11.26.4 → 11.26.5

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/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 {

package/src/theme/ItaliaTheme/Components/_cardLocationItem.scss

@@ -3,3 +3,15 @@
     flex: 0 0 100%;
   }
 }
+
+.card-wrapper.card-teaser-wrapper .card-teaser.location-item .pin-icon {
+  margin-left: -0.5rem;
+  margin-right: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+// Full width for last odd card in locations
+.card-wrapper.card-teaser-wrapper
+  .card-teaser.location-item:nth-child(odd):last-child {
+  flex: 0 0 100%;
+}

package/src/theme/ItaliaTheme/Components/_cardPersona.scss

@@ -11,6 +11,10 @@
     // nel momento in cui riusciremo a togliere il padding 0 important
     // dalla classe .card-big-io-comune .card-body globalmente
     padding: 24px !important;
+
+    .card-text {
+      color: $gray-secondary;
+    }
   }
 
   .card-image {
@@ -28,6 +32,15 @@
   .card-title {
     font-size: $card-big-head-size;
     line-height: $card-big-head-l-h;
+
+    a {
+      font-weight: 700;
+    }
+  }
+
+  span.text {
+    font-weight: 600;
+    letter-spacing: 1px;
   }
 
   &.listing-item {
@@ -47,10 +60,15 @@
 
       h3.card-title {
         a {
-          font-size: 1.3rem;
+          font-size: 1.777rem;
           line-height: 1.5rem;
         }
       }
+
+      .card-text {
+        font-family: 'Lora' !important;
+        color: $card-p-color;
+      }
     }
   }
 }

package/src/theme/ItaliaTheme/Widgets/_blocksWidget.scss

@@ -14,3 +14,39 @@
     font-family: $font-family-sans-serif;
   }
 }
+
+// <h> styles for text editor content in CTs
+
+#main-content-section.it-page-sections-container .richtext-blocks {
+  h2 {
+    font-size: 1.555rem;
+    line-height: 1.428;
+    font-weight: 600;
+  }
+
+  h3 {
+    font-size: 1.35rem;
+    line-height: 1.25;
+    font-weight: 600;
+  }
+
+  h4 {
+    font-size: 1.35rem;
+    line-height: 1.25;
+    font-weight: 600;
+    color: $gray-600;
+  }
+
+  h5 {
+    font-size: 1.35rem;
+    line-height: 1.25;
+    font-weight: 600;
+    color: $gray-500;
+  }
+
+  h6 {
+    font-size: 1.2rem;
+    line-height: 1.15;
+    font-weight: 400;
+  }
+}

package/src/theme/_cms-ui.scss

@@ -298,6 +298,27 @@ body.cms-ui {
     }
   }
 
+  //cookie banner icons
+  // replaced icon code with left and right as they actually render correctly
+  // and rotated the icon
+  &.section-gdpr-cookie-settings {
+    .cookies-widget .move-buttons {
+      i.icon.arrow.up {
+        transform: rotate(90deg);
+        &::before {
+          content: '\e911';
+        }
+      }
+
+      i.icon.arrow.down {
+        transform: rotate(90deg);
+        &::before {
+          content: '\e905';
+        }
+      }
+    }
+  }
+
   .sidebar-container .object-listing,
   .icon-align-name {
     svg.icon {

package/src/theme/bootstrap-override/_bootstrap-italia-site.scss

@@ -140,6 +140,7 @@
   @import 'bootstrap-italia/src/scss/custom/dialog';
   @import 'bootstrap-italia/src/scss/custom/notifications';
   @import 'bootstrap-italia/src/scss/custom/avatar';
+  @import './bootstrap-italia/avatar';
   @import 'bootstrap-italia/src/scss/custom/thumbnav';
   @import 'bootstrap-italia/src/scss/custom/steppers';
   @import './bootstrap-italia/steppers';

package/src/theme/bootstrap-override/bootstrap-italia/_avatar.scss

@@ -0,0 +1,28 @@
+// @import 'bootstrap-italia/src/scss/variables';
+@use 'sass:math';
+// $avatar-base-size: 8px;
+
+.avatar {
+  &.size-lg {
+    //  Dal figma, sti tondi sono 64x64
+    width: $avatar-base-size * 8;
+    height: $avatar-base-size * 8;
+    p {
+      font-size: 24px;
+    }
+    .icon {
+      height: 28px;
+      width: 28px;
+    }
+    .avatar-presence,
+    .avatar-status {
+      right: 2px;
+      width: 14px;
+      height: 14px;
+    }
+
+    .avatar-status {
+      top: math.div($avatar-base-size, 28);
+    }
+  }
+}