design-comuni-plone-theme 12.0.0-alpha.1 → 12.1.0

package/src/helpers/usePaginatedItemsSection.hook.ts

@@ -0,0 +1,63 @@
+import { useState, useMemo } from 'react';
+import type { IntlShape } from 'react-intl';
+
+interface usePaginatedItemsSectionProps {
+  data: Array<any> | null | undefined;
+  bSize?: number;
+}
+
+type ActivePage = {
+  active: boolean;
+  type: 'pageItem' | string;
+  ellipsisItem: '...' | string | null | undefined;
+  isPrevButtonInactive: boolean;
+  isForwButtonInactive: boolean;
+  children: number;
+  intl: IntlShape;
+};
+
+type PaginationFunctionExtraArgs = {
+  activePage: ActivePage;
+  onClick: (
+    e: MouseEvent | KeyboardEvent,
+    obj: PaginationFunctionExtraArgs,
+  ) => void;
+};
+
+export const DEFAULT_PAGINATED_CARDS_SECTION_BSIZE = 4;
+
+function getBatches(
+  arr: usePaginatedItemsSectionProps['data'],
+  batchSize: number,
+): any[][] {
+  const batches = [];
+  if (arr) {
+    for (let i = 0; i < arr.length; i += batchSize) {
+      batches.push(arr.slice(i, i + batchSize));
+    }
+  }
+  return batches;
+}
+
+export function usePaginatedItemsSection({
+  data,
+  bSize = DEFAULT_PAGINATED_CARDS_SECTION_BSIZE,
+}: usePaginatedItemsSectionProps) {
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  const pageNumbers = data ? Math.ceil(data.length / bSize) : 0;
+
+  const onPaginationChange = (
+    _e: MouseEvent | KeyboardEvent,
+    { activePage }: PaginationFunctionExtraArgs,
+  ) => {
+    const current = activePage?.children ?? 1;
+    setCurrentPage(current);
+  };
+  const batches: Array<any> = useMemo(() => {
+    const currentIndex = currentPage - 1;
+    return getBatches(data, bSize)[currentIndex];
+  }, [data, bSize, currentPage]);
+
+  return { batches, currentPage, onPaginationChange, pageNumbers };
+}

package/src/overrideTranslations.jsx

@@ -21,6 +21,10 @@ defineMessages({
     id: 'rrule_in',
     defaultMessage: 'il giorno',
   },
+  rrule_on: {
+    id: 'rrule_on',
+    defaultMessage: 'di',
+  },
   rrule_on_the: {
     id: 'rrule_on the',
     defaultMessage: 'il',
@@ -60,4 +64,73 @@ defineMessages({
     id: 'toggleMenu_close',
     defaultMessage: 'Chiudi',
   },
+  mainMenu: {
+    id: 'mainMenu',
+    defaultMessage: 'Menu principale',
+  },
+  clearDates: {
+    id: 'Clear dates',
+    defaultMessage: 'Pulisci i campi',
+  },
+  success_warning: {
+    id: 'form_submit_success_warning',
+    defaultMessage: "Sei stato inserito in lista d'attesa",
+  },
+  success_warning_description: {
+    id: 'form_submit_success_warning_description',
+    defaultMessage:
+      "I tuoi dati sono stati inviati, ma è già stato raggiunto il limite di iscrizioni, sei stato inserito in lista d'attesa.",
+  },
+  field_unique_title: {
+    id: 'field_unique_title',
+    defaultMessage: 'Unique field',
+  },
+  field_unique_description: {
+    id: 'field_unique_description',
+    defaultMessage:
+      'Check this box if the value entered in this field can be used only once.',
+  },
+  set_limit: {
+    id: 'form_set_limit',
+    defaultMessage: 'Set a submission limit',
+  },
+  limit: {
+    id: 'form_limit',
+    defaultMessage: 'Submission limit',
+  },
+  modulistica_restraint: {
+    id: 'modulistica_restraint',
+    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',
+  },
+  // teaser block
+  teaser: {
+    id: 'Teaser',
+    defaultMessage: 'Teaser',
+  },
 });

package/src/theme/ItaliaTheme/Addons/volto-gdpr-privacy.scss

@@ -49,11 +49,6 @@
           outline: none;
           vertical-align: baseline;
 
-          input:focus ~ label::before {
-            box-shadow: $gdpr-focus-shadow !important;
-            outline: none !important;
-          }
-
           label {
             position: relative;
             display: block;
@@ -240,19 +235,6 @@ body.has-toolbar-collapsed {
   }
 }
 
-.gdpr-privacy-banner
-  .gdpr-privacy-content-wrapper
-  .gdpr-privacy-content
-  .buttons
-  button.gdpr-privacy-banner-button:focus,
-.gdpr-privacy-banner
-  .gdpr-privacy-content-wrapper
-  .gdpr-privacy-content
-  a:focus {
-  box-shadow: $gdpr-focus-shadow;
-  outline: none !important;
-}
-
 .gdpr-privacy-banner
   .gdpr-privacy-content-wrapper
   .gdpr-privacy-content

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

@@ -3,6 +3,11 @@ $accordion-icon-color: #7fb2e5;
 .block.accordion {
   .section.full-width {
     height: auto;
+    .title {
+      font-size: 2.35rem;
+      font-weight: bold;
+      line-height: 3rem;
+    }
 
     @media (max-width: #{map-get($grid-breakpoints, md)}) {
       padding: 0.5em;
@@ -38,10 +43,6 @@ $accordion-icon-color: #7fb2e5;
             top: -7px;
             right: 0;
             left: unset;
-
-            &:focus {
-              outline: 1px solid $focus-outline-color;
-            }
           }
 
           .accordion-header {

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

@@ -23,7 +23,8 @@
   }
 }
 
-.public-ui {
+.public-ui,
+body.cms-ui .public-ui {
   .block.alertblock,
   .alertblock {
     .full-width {
@@ -49,11 +50,8 @@
       h3,
       h4,
       h5,
-      h6 {
-        color: $alert-danger-text;
-      }
-
-      a {
+      h6,
+      a:not(.btn) {
         color: $alert-danger-text;
       }
     }
@@ -67,11 +65,8 @@
       h3,
       h4,
       h5,
-      h6 {
-        color: $alert-warning-text;
-      }
-
-      a {
+      h6,
+      a:not(.btn) {
         color: $alert-warning-text;
       }
     }

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;
 
@@ -39,7 +43,7 @@
           height: auto;
           padding: 0;
 
-          figure.img-wrapper {
+          .img-wrapper {
             position: static;
             margin: 0;
           }
@@ -99,6 +103,7 @@
       .text {
         font-weight: 600;
         letter-spacing: 1px;
+        color: $caption-text;
       }
 
       .data {
@@ -155,7 +160,7 @@
         height: auto;
         padding: 0;
 
-        figure.img-wrapper {
+        .img-wrapper {
           position: static;
           margin: 0;
         }

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

@@ -25,6 +25,10 @@
     padding: 1.2rem;
     text-decoration: none;
 
+    .title-link {
+      text-decoration: none;
+    }
+
     .title {
       z-index: 2;
       overflow: hidden;
@@ -43,6 +47,10 @@
       margin-top: auto !important;
     }
 
+    .auto-margin-link {
+      margin-top: auto;
+    }
+
     .category + .title {
       margin-top: 0 !important;
     }
@@ -77,6 +85,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 {
@@ -94,7 +112,7 @@
       height: 100%;
       --bs-gradient: linear-gradient(
         to bottom,
-        rgba(0, 0, 0, 0.3) 0%,
+        rgba(0, 0, 0, 0.5) 0%,
         #000 100%
       );
       opacity: 0.4;

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

@@ -3,18 +3,7 @@
     height: auto;
   }
 
-  .ui.basic.button.delete-button {
-    padding: 0.5rem;
-    text-align: center;
-
-    svg:not(:hover) {
-      fill: #fff !important;
-    }
-
-    &:hover {
-      border-radius: 100%;
-    }
-  }
+  @include blocks-with-bg-edit-buttons();
 
   .bg-primary {
     .block-header {
@@ -26,7 +15,7 @@
       .description h4,
       .description h5,
       .description h6,
-      .description a {
+      .description a:not(.btn) {
         color: $primary-text;
       }
     }
@@ -41,7 +30,8 @@
       .description h3,
       .description h4,
       .description h5,
-      .description h6 {
+      .description h6,
+      .description a:not(.btn) {
         color: $secondary-text;
       }
     }
@@ -74,10 +64,6 @@
     .card-wrapper {
       height: 100%;
     }
-
-    .ui.basic.button.delete-button {
-      padding: 0.36rem;
-    }
   }
 
   .button.add-element {
@@ -90,15 +76,15 @@
     }
 
     .contact-title {
+      margin-bottom: 1rem;
       font-size: 1.35rem;
       font-weight: bold;
       line-height: 1.4em;
-
-      margin-bottom: 1rem;
     }
 
     .contact-text {
       font-size: 0.9rem;
+
       .detached-slate-editor {
         margin-bottom: 1rem;
       }
@@ -106,32 +92,22 @@
 
     .contact-info {
       display: flex;
-
-      &:first-of-type {
-        align-items: center;
-
-        .icon-wrapper {
-          margin-top: 0;
-        }
-      }
-
-      &:not(:last-of-type) {
-        margin-bottom: 1rem;
-      }
+      align-items: center;
 
       [role='textbox'] {
         //slate editor
         width: 100%;
+
         &[data-slate-editor='true'] {
           min-height: 1em;
         }
       }
 
       .icon-wrapper {
-        margin-top: 0.2rem;
-        margin-right: 1rem;
         display: flex;
         align-items: center;
+        margin-top: 0.2rem;
+        margin-right: 1rem;
       }
 
       .tel {

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

@@ -1,3 +1,12 @@
+body.cms-ui,
+body.public-ui {
+  .block.count_down .public-ui {
+    a:not(.btn) {
+      color: $white; //to force color in cms-ui
+    }
+  }
+}
+
 .block.count_down .public-ui {
   color: $white;
 
@@ -6,7 +15,7 @@
   h4,
   h5,
   h6,
-  a {
+  a:not(.btn) {
     color: $white;
   }
 

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

@@ -22,9 +22,13 @@
       h2,
       h3 {
         margin: 0 0 1.5rem;
-        color: $secondary-text;
         font-size: 2.25rem;
       }
+      h2,
+      h3,
+      a:not(.btn) {
+        color: $secondary-text;
+      }
 
       p:last-of-type {
         margin-bottom: 0;
@@ -66,7 +70,7 @@
         display: flex;
       }
 
-      figure.img-wrapper,
+      .img-wrapper,
       picture {
         position: absolute;
         z-index: -1;
@@ -98,6 +102,7 @@
 
       .cta-tile-text {
         &,
+        a,
         h3 {
           color: #fff;
         }
@@ -128,12 +133,5 @@
 }
 
 .block.cta_block {
-  .ui.basic.button.delete-button {
-    color: #fff !important;
-
-    &:hover,
-    &:focus {
-      color: #000 !important;
-    }
-  }
+  @include blocks-with-bg-edit-buttons();
 }

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

@@ -1,45 +1,50 @@
 .public-ui {
   .block.form {
-    @media (max-width: #{map-get($grid-breakpoints, md)}) {
-      .form-group {
-        display: flex;
-        flex-direction: column;
-
-        label {
-          position: relative;
-          order: 1;
-          font-size: 0.777rem;
-          line-height: 1.375rem;
-          transform: none;
-          transform: none;
-          white-space: normal;
-
-          &.active {
+    .row {
+      max-width: 100%;
+
+      @media (max-width: #{map-get($grid-breakpoints, md)}) {
+        .form-group {
+          display: flex;
+          flex-direction: column;
+          max-width: 100%;
+
+          label {
+            position: relative;
+            order: 1;
             font-size: 0.777rem;
+            line-height: 1.375rem;
+            transform: none;
             transform: none;
+            white-space: normal;
+
+            &.active {
+              font-size: 0.777rem;
+              transform: none;
+            }
           }
-        }
 
-        input,
-        textarea,
-        .form-input-file {
-          order: 2;
-        }
+          input,
+          textarea,
+          .form-input-file {
+            order: 2;
+          }
 
-        input[type='date'] ~ label {
-          font-size: 0.777rem;
-          transform: none;
-        }
+          input[type='date'] ~ label {
+            font-size: 0.777rem;
+            transform: none;
+          }
 
-        small.form-text {
-          position: relative;
-          order: 3;
+          small.form-text {
+            position: relative;
+            order: 3;
+          }
         }
-      }
 
-      .form-input-file {
-        .dropzone-placeholder {
-          margin-top: 0;
+        .form-input-file {
+          .dropzone-placeholder {
+            margin-top: 0;
+          }
         }
       }
     }
@@ -65,6 +70,7 @@
   &,
   .volto-subblocks-wrapper,
   .form-field {
+    max-width: 100%;
     .single-block {
       .dragsubblock {
         top: 0.3rem;

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

@@ -19,39 +19,46 @@
       width: auto !important;
     }
 
-    &.listing {
-      &.simpleCard,
-      &.attachmentCardTemplate {
-        .card-teaser-block-3 {
-          > .card-teaser {
-            flex: 0 0 49%; //invece di 3 elementi per riga, ne mostro due perchè c'è poco spazio
+    @media (min-width: #{map-get($grid-breakpoints, md)}) {
+      &.listing {
+        &.simpleCard,
+        &.attachmentCardTemplate {
+          .card-teaser-block-3 {
+            > .card-teaser {
+              flex: 0 0 49%; //invece di 3 elementi per riga, ne mostro due perchè c'è poco spazio
+            }
           }
         }
-      }
 
-      &.cardWithImageTemplate,
-      &.ribbonCardTemplate,
-      &.completeBlockLinksTemplate {
-        .col-lg-4,
-        .col-xl-4,
-        .col-lg-3 {
-          width: 50%; //invece di 3 elementi per riga, ne mostro due perchè c'è poco spazio
+        &.cardWithImageTemplate,
+        &.ribbonCardTemplate,
+        &.completeBlockLinksTemplate {
+          .col-lg-4,
+          .col-xl-4,
+          .col-lg-3 {
+            width: 50%; //invece di 3 elementi per riga, ne mostro due perchè c'è poco spazio
+          }
         }
-      }
 
-      &.cardSlideUpTextTemplate,
-      &.quaresImageTemplate {
-        .grid {
-          grid-template-columns: 1fr 1fr;
+        &.cardSlideUpTextTemplate,
+        &.quaresImageTemplate {
+          .grid {
+            grid-template-columns: 1fr 1fr;
+          }
         }
-      }
 
-      &.bandiInEvidenceTemplate {
-        .bandi-in-evidence-cards-wrapper {
-          grid-template-columns: 1fr 1fr;
+        &.bandiInEvidenceTemplate {
+          .bandi-in-evidence-cards-wrapper {
+            grid-template-columns: 1fr 1fr;
+          }
         }
       }
     }
+
+    &.image img {
+      object-fit: contain;
+      object-position: center;
+    }
   }
 
   //in edit (cms-ui)
@@ -84,6 +91,15 @@
       }
     }
   }
+
+  @media (max-width: #{map-get($grid-breakpoints, md)}) {
+    > .row {
+      gap: 1em;
+      > .col {
+        flex: 1 0 100%;
+      }
+    }
+  }
 }
 
 body.cms-ui.has-toolbar.has-sidebar {