design-comuni-plone-theme 11.26.4 → 11.27.0

package/src/customizations/volto-form-block/components/Field.jsx

@@ -64,6 +64,7 @@ const Field = ({
   errorMessage,
   id,
   reactSelect,
+  autocomplete,
 }) => {
   const intl = useIntl();
   const Select = reactSelect.default;
@@ -102,6 +103,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? ''}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'textarea' && (
@@ -120,6 +122,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? undefined}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'select' && (
@@ -151,6 +154,7 @@ const Field = ({
               classNamePrefix="react-select"
               className={isInvalid() ? 'is-invalid' : ''}
               value={value ? [{ value: value, label: value }] : []}
+              autoComplete={autocomplete}
             />
             {description && <small className="form-text">{description}</small>}
             {errorMessage && (
@@ -286,6 +290,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? ''}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'attachment' && (
@@ -320,6 +325,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? ''}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'static_text' &&
@@ -382,6 +388,7 @@ Field.propTypes = {
   value: PropTypes.any,
   formHasErrors: PropTypes.bool,
   onChange: PropTypes.func,
+  autoComplete: PropTypes.string,
 };
 
 export default injectLazyLibs('reactSelect')(Field);

package/src/customizations/volto-form-block/fieldSchema.js

@@ -79,6 +79,199 @@ const messages = defineMessages({
     defaultMessage:
       'Check this box if the value entered in this field can be used only once.',
   },
+  field_autocomplete: {
+    id: 'field_autocomplete',
+    defaultMessage: '"Autocomplete" attribute',
+  },
+  field_autocomplete_description: {
+    id: 'field_autocomplete_description',
+    defaultMessage:
+      'This field adds the "autocomplete" attribute to the field. This allows to fill in the field automatically with the user info, if stored. For a complete list of these attributes and their use, visit <a>this page</a>',
+  },
+  field_autocomplete_name_complete: {
+    id: 'field_autocomplete_name_complete',
+    defaultMessage: 'Full name',
+  },
+  field_autocomplete_honorific_prefix: {
+    id: 'field_autocomplete_honorific_prefix',
+    defaultMessage: 'Prefix (ex. mr, mrs)',
+  },
+  field_autocomplete_given_name: {
+    id: 'field_autocomplete_given_name',
+    defaultMessage: 'Given name',
+  },
+  field_autocomplete_additional_name: {
+    id: 'field_autocomplete_additional_name',
+    defaultMessage: 'Additional name',
+  },
+  field_autocomplete_family_name: {
+    id: 'field_autocomplete_family_name',
+    defaultMessage: 'Family name',
+  },
+  field_autocomplete_honorific_suffix: {
+    id: 'field_autocomplete_honorific_suffix',
+    defaultMessage: 'Suffix (ex. jr, sr)',
+  },
+  field_autocomplete_nickname: {
+    id: 'field_autocomplete_nickname',
+    defaultMessage: 'Nickname',
+  },
+  field_autocomplete_email: {
+    id: 'field_autocomplete_email',
+    defaultMessage: 'Email',
+  },
+  field_autocomplete_username: {
+    id: 'field_autocomplete_username',
+    defaultMessage: 'Username',
+  },
+  field_autocomplete_new_password: {
+    id: 'field_autocomplete_new_password',
+    defaultMessage: 'New password',
+  },
+  field_autocomplete_current_password: {
+    id: 'field_autocomplete_current_password',
+    defaultMessage: 'Current password',
+  },
+  field_autocomplete_organization_title: {
+    id: 'field_autocomplete_organization_title',
+    defaultMessage: 'Organization title',
+  },
+  field_autocomplete_organization: {
+    id: 'field_autocomplete_organization',
+    defaultMessage: 'Organization',
+  },
+  field_autocomplete_street_address: {
+    id: 'field_autocomplete_street_address',
+    defaultMessage: 'Street address',
+  },
+  field_autocomplete_address_line1: {
+    id: 'field_autocomplete_address_line1',
+    defaultMessage: 'Address line 1',
+  },
+  field_autocomplete_address_line2: {
+    id: 'field_autocomplete_address_line2',
+    defaultMessage: 'Address line 2',
+  },
+  field_autocomplete_address_line3: {
+    id: 'field_autocomplete_address_line3',
+    defaultMessage: 'Address line 3',
+  },
+  field_autocomplete_country: {
+    id: 'field_autocomplete_country',
+    defaultMessage: 'Country',
+  },
+  field_autocomplete_country_name: {
+    id: 'field_autocomplete_country_name',
+    defaultMessage: 'Country name',
+  },
+  field_autocomplete_postal_code: {
+    id: 'field_autocomplete_postal_code',
+    defaultMessage: 'Postal code',
+  },
+  field_autocomplete_cc_name: {
+    id: 'field_autocomplete_cc_name',
+    defaultMessage: 'Cardholder name',
+  },
+  field_autocomplete_cc_given_name: {
+    id: 'field_autocomplete_cc_given_name',
+    defaultMessage: 'Cardholder given name',
+  },
+  field_autocomplete_cc_additional_name: {
+    id: 'field_autocomplete_cc_additional_name',
+    defaultMessage: 'Cardholder additional name',
+  },
+  field_autocomplete_cc_family_name: {
+    id: 'field_autocomplete_cc_family_name',
+    defaultMessage: 'Cardholder family name',
+  },
+  field_autocomplete_cc_number: {
+    id: 'field_autocomplete_cc_number',
+    defaultMessage: 'Credit card number',
+  },
+  field_autocomplete_cc_exp: {
+    id: 'field_autocomplete_cc_exp',
+    defaultMessage: 'Credit card expiration date',
+  },
+  field_autocomplete_cc_exp_month: {
+    id: 'field_autocomplete_cc_exp_month',
+    defaultMessage: 'Credit card expiration month',
+  },
+  field_autocomplete_cc_exp_year: {
+    id: 'field_autocomplete_cc_exp_year',
+    defaultMessage: 'Credit card expiration year',
+  },
+  field_autocomplete_cc_csc: {
+    id: 'field_autocomplete_cc_csc',
+    defaultMessage: 'Credit card security code',
+  },
+  field_autocomplete_cc_type: {
+    id: 'field_autocomplete_cc_type',
+    defaultMessage: 'Credit card type',
+  },
+  field_autocomplete_transaction_currency: {
+    id: 'field_autocomplete_transaction_currency',
+    defaultMessage: 'Transaction currency',
+  },
+  field_autocomplete_transaction_amount: {
+    id: 'field_autocomplete_transaction_amount',
+    defaultMessage: 'Transaction amount',
+  },
+  field_autocomplete_language: {
+    id: 'field_autocomplete_language',
+    defaultMessage: 'Language',
+  },
+  field_autocomplete_bday: {
+    id: 'field_autocomplete_bday',
+    defaultMessage: 'Birthday',
+  },
+  field_autocomplete_bday_day: {
+    id: 'field_autocomplete_bday_day',
+    defaultMessage: 'Birth day',
+  },
+  field_autocomplete_bday_month: {
+    id: 'field_autocomplete_bday_month',
+    defaultMessage: 'Birth month',
+  },
+  field_autocomplete_bday_year: {
+    id: 'field_autocomplete_bday_year',
+    defaultMessage: 'Birth year',
+  },
+  field_autocomplete_sex: {
+    id: 'field_autocomplete_sex',
+    defaultMessage: 'Gender',
+  },
+  field_autocomplete_tel: {
+    id: 'field_autocomplete_tel',
+    defaultMessage: 'Telephone number',
+  },
+  field_autocomplete_tel_country_code: {
+    id: 'field_autocomplete_tel_country_code',
+    defaultMessage: 'Telephone country code',
+  },
+  field_autocomplete_tel_national: {
+    id: 'field_autocomplete_tel_national',
+    defaultMessage: 'National telephone number',
+  },
+  field_autocomplete_tel_area_code: {
+    id: 'field_autocomplete_tel_area_code',
+    defaultMessage: 'Telephone area code',
+  },
+  field_autocomplete_tel_local: {
+    id: 'field_autocomplete_tel_local',
+    defaultMessage: 'Local telephone number',
+  },
+  field_autocomplete_tel_extension: {
+    id: 'field_autocomplete_tel_extension',
+    defaultMessage: 'Telephone extension',
+  },
+  field_autocomplete_url: {
+    id: 'field_autocomplete_url',
+    defaultMessage: 'Website URL',
+  },
+  field_autocomplete_photo: {
+    id: 'field_autocomplete_photo',
+    defaultMessage: 'Photo',
+  },
 });
 
 export default (props) => {
@@ -99,6 +292,132 @@ export default (props) => {
     ['static_text', intl.formatMessage(messages.field_type_static_text)],
     ['hidden', intl.formatMessage(messages.field_type_hidden)],
   ];
+
+  const autocompleteValues = [
+    ['name', intl.formatMessage(messages.field_autocomplete_name_complete)],
+    [
+      'honorific-prefix',
+      intl.formatMessage(messages.field_autocomplete_honorific_prefix),
+    ],
+    ['given-name', intl.formatMessage(messages.field_autocomplete_given_name)],
+    [
+      'additional-name',
+      intl.formatMessage(messages.field_autocomplete_additional_name),
+    ],
+    [
+      'family-name',
+      intl.formatMessage(messages.field_autocomplete_family_name),
+    ],
+    [
+      'honorific-suffix',
+      intl.formatMessage(messages.field_autocomplete_honorific_suffix),
+    ],
+    ['nickname', intl.formatMessage(messages.field_autocomplete_nickname)],
+    ['email', intl.formatMessage(messages.field_autocomplete_email)],
+    ['username', intl.formatMessage(messages.field_autocomplete_username)],
+    [
+      'new-password',
+      intl.formatMessage(messages.field_autocomplete_new_password),
+    ],
+    [
+      'current-password',
+      intl.formatMessage(messages.field_autocomplete_current_password),
+    ],
+    [
+      'organization-title',
+      intl.formatMessage(messages.field_autocomplete_organization_title),
+    ],
+
+    [
+      'organization',
+      intl.formatMessage(messages.field_autocomplete_organization),
+    ],
+    [
+      'street-address',
+      intl.formatMessage(messages.field_autocomplete_street_address),
+    ],
+    [
+      'address-line1',
+      intl.formatMessage(messages.field_autocomplete_address_line1),
+    ],
+    [
+      'address-line2',
+      intl.formatMessage(messages.field_autocomplete_address_line2),
+    ],
+    [
+      'address-line3',
+      intl.formatMessage(messages.field_autocomplete_address_line3),
+    ],
+    ['country', intl.formatMessage(messages.field_autocomplete_country)],
+    [
+      'country-name',
+      intl.formatMessage(messages.field_autocomplete_country_name),
+    ],
+    [
+      'postal-code',
+      intl.formatMessage(messages.field_autocomplete_postal_code),
+    ],
+    ['cc-name', intl.formatMessage(messages.field_autocomplete_cc_name)],
+    [
+      'cc-given-name',
+      intl.formatMessage(messages.field_autocomplete_cc_given_name),
+    ],
+    [
+      'cc-additional-name',
+      intl.formatMessage(messages.field_autocomplete_cc_additional_name),
+    ],
+    [
+      'cc-family-name',
+      intl.formatMessage(messages.field_autocomplete_cc_family_name),
+    ],
+    ['cc-number', intl.formatMessage(messages.field_autocomplete_cc_number)],
+    ['cc-exp', intl.formatMessage(messages.field_autocomplete_cc_exp)],
+    [
+      'cc-exp-month',
+      intl.formatMessage(messages.field_autocomplete_cc_exp_month),
+    ],
+    [
+      'cc-exp-year',
+      intl.formatMessage(messages.field_autocomplete_cc_exp_year),
+    ],
+    ['cc-csc', intl.formatMessage(messages.field_autocomplete_cc_csc)],
+    ['cc-type', intl.formatMessage(messages.field_autocomplete_cc_type)],
+    [
+      'transaction-currency',
+      intl.formatMessage(messages.field_autocomplete_transaction_currency),
+    ],
+    [
+      'transaction-amount',
+      intl.formatMessage(messages.field_autocomplete_transaction_amount),
+    ],
+    ['language', intl.formatMessage(messages.field_autocomplete_language)],
+    ['bday', intl.formatMessage(messages.field_autocomplete_bday)],
+    ['bday-day', intl.formatMessage(messages.field_autocomplete_bday_day)],
+    ['bday-month', intl.formatMessage(messages.field_autocomplete_bday_month)],
+    ['bday-year', intl.formatMessage(messages.field_autocomplete_bday_year)],
+    ['sex', intl.formatMessage(messages.field_autocomplete_sex)],
+    ['tel', intl.formatMessage(messages.field_autocomplete_tel)],
+    [
+      'tel-country-code',
+      intl.formatMessage(messages.field_autocomplete_tel_country_code),
+    ],
+    [
+      'tel-national',
+      intl.formatMessage(messages.field_autocomplete_tel_national),
+    ],
+    [
+      'tel-area-code',
+      intl.formatMessage(messages.field_autocomplete_tel_area_code),
+    ],
+    ['tel-local', intl.formatMessage(messages.field_autocomplete_tel_local)],
+    [
+      'tel-extension',
+      intl.formatMessage(messages.field_autocomplete_tel_extension),
+    ],
+    ['url', intl.formatMessage(messages.field_autocomplete_url)],
+    ['photo', intl.formatMessage(messages.field_autocomplete_photo)],
+  ];
+
   var attachmentDescription =
     props?.field_type === 'attachment'
       ? {
@@ -125,6 +444,13 @@ export default (props) => {
           'description',
           'field_type',
           ...schemaExtenderValues.fields,
+          ...(props?.field_type !== 'checkbox' &&
+          props?.field_type !== 'attachment' &&
+          props?.field_type !== 'single_choice' &&
+          props?.field_type !== 'multiple_choice' &&
+          props?.field_type !== 'static_text'
+            ? ['autocomplete']
+            : []),
           ...(props?.field_type === 'static_text' ? [] : ['required']),
           'unique',
         ],
@@ -150,6 +476,25 @@ export default (props) => {
         ],
         ...attachmentDescription,
       },
+      autocomplete: {
+        title: intl.formatMessage(messages.field_autocomplete),
+        type: 'string',
+        description: intl.formatMessage(
+          messages.field_autocomplete_description,
+          {
+            a: (...chunks) => (
+              <a
+                href="https://www.w3.org/TR/WCAG21/#input-purposes"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {chunks}
+              </a>
+            ),
+          },
+        ),
+        choices: autocompleteValues,
+      },
       required: {
         title: intl.formatMessage(messages.field_required),
         type: 'boolean',

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

@@ -64,6 +64,10 @@ defineMessages({
     id: 'toggleMenu_close',
     defaultMessage: 'Chiudi',
   },
+  mainMenu: {
+    id: 'mainMenu',
+    defaultMessage: 'Menu principale',
+  },
   clearDates: {
     id: 'Clear dates',
     defaultMessage: 'Pulisci i campi',

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;
 
@@ -99,6 +103,7 @@
       .text {
         font-weight: 600;
         letter-spacing: 1px;
+        color: $caption-text;
       }
 
       .data {

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

@@ -77,6 +77,16 @@
       }
     }
 
+    a.card-link {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 3;
+      background: transparent;
+    }
+
     a.read-more,
     a.read-more .text + .icon,
     a.read-more .text {

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/Blocks/_search.scss

@@ -129,6 +129,10 @@
         div[class*='-placeholder'] {
           color: #484848;
         }
+
+        input {
+          height: 100%;
+        }
       }
     }
   }
@@ -151,13 +155,15 @@
         border-color: hsl(210deg, 17.6470588235%, 43.35%) !important;
         border-bottom: 1px solid;
         font-size: 1rem;
-        transition: border-color 0.3s ease-in,
+        transition:
+          border-color 0.3s ease-in,
           background-color 0.2s cubic-bezier(0, 1, 0, 1) 0.2s;
 
         &[aria-expanded='true'] {
           border-color: transparent !important;
           box-shadow: 0 1rem 2rem -0.25rem rgba(0, 0, 0, 0.15) !important;
-          transition: background-color 0.2s cubic-bezier(0, 1, 0, 1),
+          transition:
+            background-color 0.2s cubic-bezier(0, 1, 0, 1),
             border-color 0.05s cubic-bezier(1, 0, 1, 0);
         }
 

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,17 @@
   .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;
+    color: $caption-text;
+    font-size: 0.875rem;
   }
 
   &.listing-item {
@@ -47,10 +62,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/ItaliaTheme/_ar.scss

@@ -1,6 +1,7 @@
 body.is-authenticated {
-  // se l'utente è autenticato e c'è la classe no-user-roles, allora si tratta di un utente del sito che accede solo all'area riservata
-  &.no-user-roles {
+  // se l'utente è autenticato e c'è la classe no-user-roles o role-citizen, allora si tratta di un 
+  // utente del sito (cittadino) che accede solo all'area riservata
+  &.no-user-roles, &.role-citizen {
     #toolbar,
     #sidebar {
       display: none;

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 {