design-comuni-plone-theme 10.2.2 → 10.4.0

package/src/components/ItaliaTheme/View/Commons/PageHeader/PageHeaderBando.jsx

@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
+import { BandoStatus } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+
 /**
  * PageHeaderBando view component class.
  * @function PageHeaderBando
@@ -17,22 +19,6 @@ const messages = defineMessages({
     id: 'Bando',
     defaultMessage: 'Bando',
   },
-  open: {
-    id: 'bando_open',
-    defaultMessage: 'attivo',
-  },
-  closed: {
-    id: 'bando_closed',
-    defaultMessage: 'scaduto',
-  },
-  inProgress: {
-    id: 'bando_inProgress',
-    defaultMessage: 'in corso',
-  },
-  scheduled: {
-    id: 'bando_scheduled',
-    defaultMessage: 'programmato',
-  },
 });
 
 const PageHeaderBando = ({ content }) => {
@@ -64,7 +50,7 @@ const PageHeaderBando = ({ content }) => {
                 size=""
               />
               {intl.formatMessage(messages.bando)}{' '}
-              {intl.formatMessage(messages[content.bando_state[0]])}
+              <BandoStatus content={content} />
             </div>
           </div>
         </div>

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

@@ -28,6 +28,26 @@ const messages = defineMessages({
 
 const SearchSectionForm = ({ content }) => {
   const intl = useIntl();
+  const path = content['@id'];
+  const searchFilters = useSelector(
+    (state) => state?.searchFilters?.result?.sections,
+  );
+
+  const customPath = [];
+
+  const sections = searchFilters?.[0]?.items ?? [];
+
+  sections.forEach((section) => {
+    if (!section.items) {
+      return;
+    } else {
+      if (path === section['@id']) {
+        customPath.push(
+          section.items.map((item) => flattenToAppURL(item['@id'])),
+        );
+      }
+    }
+  });
 
   const subsite = useSelector((state) => state.subsite?.data);
   const [searchableText, setSearchableText] = useState('');
@@ -44,13 +64,14 @@ const SearchSectionForm = ({ content }) => {
             {},
             null,
             null,
-            null,
+            customPath.length > 0 ? customPath : null,
             subsite,
             intl.locale,
             false,
           ) +
-          '&custom_path=' +
-          flattenToAppURL(content['@id']);
+          (customPath.length === 0
+            ? `&custom_path=${flattenToAppURL(path)}`
+            : '');
     }
   };
   return (

package/src/components/ItaliaTheme/View/VenueView/VenueDescription.jsx

@@ -2,33 +2,18 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import {
   RichTextSection,
-  Gallery,
   richTextHasContent,
+  VenueTipologia,
+  VenueElementiDiInteresse,
+  VenueLuoghiCorrelati,
+  VenueMultimedia,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
-import { contentFolderHasItems } from 'design-comuni-plone-theme/helpers';
-import LocationItem from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/LocationItem';
 
 const messages = defineMessages({
   descrizione: {
     id: 'descrizione',
     defaultMessage: 'Descrizione',
   },
-  elementi_di_interesse: {
-    id: 'elementi_di_interesse',
-    defaultMessage: 'Elementi di interesse',
-  },
-  video: {
-    id: 'Video',
-    defaultMessage: 'Video',
-  },
-  luoghi_correlati: {
-    id: 'luoghi_correlati',
-    defaultMessage: 'Luoghi correlati',
-  },
-  tipologia_luogo: {
-    id: 'tipologia_luogo',
-    defaultMessage: 'Tipo di luogo',
-  },
 });
 
 const VenueDescription = ({ content }) => {
@@ -43,52 +28,11 @@ const VenueDescription = ({ content }) => {
           data={content.descrizione_completa}
         />
       )}
-      {content?.tipologia_luogo?.length > 0 && (
-        <RichTextSection
-          tag_id="tipologia"
-          title={intl.formatMessage(messages.tipologia_luogo)}
-        >
-          {content.tipologia_luogo.map((tipologia) => (
-            <p key={tipologia.token} className="font-serif">
-              {tipologia.title}
-            </p>
-          ))}
-        </RichTextSection>
-      )}
-      {richTextHasContent(content.elementi_di_interesse) && (
-        <RichTextSection
-          tag_id="elementi-di-interesse"
-          title={`${intl.formatMessage(messages.elementi_di_interesse)}`}
-          data={content.elementi_di_interesse}
-        />
-      )}
-      {content?.luoghi_correlati?.length > 0 && (
-        <RichTextSection
-          tag_id={'luoghi_correlati'}
-          title={intl.formatMessage(messages.luoghi_correlati)}
-        >
-          <div className="card-wrapper card-teaser-wrapper mb-5">
-            {content.luoghi_correlati?.map((item, i) => (
-              <LocationItem
-                key={item['@id'] + i}
-                location={item}
-                show_icon={false}
-                show_title_link={true}
-                load={true}
-                details_link={false}
-              />
-            ))}
-          </div>
-        </RichTextSection>
-      )}
-      {contentFolderHasItems(content, 'multimedia') && (
-        <Gallery
-          content={content}
-          folder_name={'multimedia'}
-          title_video={intl.formatMessage(messages.video)}
-          title_type="h5"
-        />
-      )}
+
+      <VenueTipologia content={content} />
+      <VenueElementiDiInteresse content={content} />
+      <VenueLuoghiCorrelati content={content} />
+      <VenueMultimedia content={content} />
     </>
   );
 };

package/src/components/ItaliaTheme/View/VenueView/VenueElementiDiInteresse.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import {
+  RichTextSection,
+  richTextHasContent,
+} from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+
+const messages = defineMessages({
+  elementi_di_interesse: {
+    id: 'elementi_di_interesse',
+    defaultMessage: 'Elementi di interesse',
+  },
+});
+
+const VenueElementiDiInteresse = ({ content }) => {
+  const intl = useIntl();
+  return richTextHasContent(content.elementi_di_interesse) ? (
+    <RichTextSection
+      tag_id="elementi-di-interesse"
+      title={`${intl.formatMessage(messages.elementi_di_interesse)}`}
+      data={content.elementi_di_interesse}
+    />
+  ) : null;
+};
+
+export default VenueElementiDiInteresse;

package/src/components/ItaliaTheme/View/VenueView/VenueLuoghiCorrelati.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { RichTextSection } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+
+import LocationItem from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/LocationItem';
+
+const messages = defineMessages({
+  luoghi_correlati: {
+    id: 'luoghi_correlati',
+    defaultMessage: 'Luoghi correlati',
+  },
+});
+
+const VenueLuoghiCorrelati = ({ content }) => {
+  const intl = useIntl();
+  return content?.luoghi_correlati?.length > 0 ? (
+    <RichTextSection
+      tag_id={'luoghi_correlati'}
+      title={intl.formatMessage(messages.luoghi_correlati)}
+    >
+      <div className="card-wrapper card-teaser-wrapper mb-5">
+        {content.luoghi_correlati?.map((item, i) => (
+          <LocationItem
+            key={item['@id'] + i}
+            location={item}
+            show_icon={false}
+            show_title_link={true}
+            load={true}
+            details_link={false}
+          />
+        ))}
+      </div>
+    </RichTextSection>
+  ) : null;
+};
+
+export default VenueLuoghiCorrelati;

package/src/components/ItaliaTheme/View/VenueView/VenueMultimedia.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Gallery } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import { contentFolderHasItems } from 'design-comuni-plone-theme/helpers';
+
+const messages = defineMessages({
+  video: {
+    id: 'Video',
+    defaultMessage: 'Video',
+  },
+});
+
+const VenueMultimedia = ({ content }) => {
+  const intl = useIntl();
+  return contentFolderHasItems(content, 'multimedia') ? (
+    <Gallery
+      content={content}
+      folder_name={'multimedia'}
+      title_video={intl.formatMessage(messages.video)}
+      title_type="h5"
+    />
+  ) : null;
+};
+
+export default VenueMultimedia;

package/src/components/ItaliaTheme/View/VenueView/VenueTipologia.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { RichTextSection } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+const messages = defineMessages({
+  tipologia_luogo: {
+    id: 'tipologia_luogo',
+    defaultMessage: 'Tipo di luogo',
+  },
+});
+
+const VenueTipologia = ({ content }) => {
+  const intl = useIntl();
+  return content?.tipologia_luogo?.length > 0 ? (
+    <RichTextSection
+      tag_id="tipologia"
+      title={intl.formatMessage(messages.tipologia_luogo)}
+    >
+      {content.tipologia_luogo.map((tipologia) => (
+        <p key={tipologia.token} className="font-serif">
+          {tipologia.title}
+        </p>
+      ))}
+    </RichTextSection>
+  ) : null;
+};
+
+export default VenueTipologia;

package/src/components/ItaliaTheme/View/index.js

@@ -73,6 +73,7 @@ export Sponsors from 'design-comuni-plone-theme/components/ItaliaTheme/View/Comm
 export RelatedItems from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/RelatedItems';
 export RelatedItemInEvidence from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/RelatedItemInEvidence/RelatedItemInEvidence';
 export DownloadFileFormat from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/DownloadFileFormat';
+export BandoStatus from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/BandoStatus';
 export BandoDates from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/BandoDates';
 
 /* --- View --- */
@@ -194,6 +195,10 @@ export VenueWhere from 'design-comuni-plone-theme/components/ItaliaTheme/View/Ve
 export VenuePublicTimetable from 'design-comuni-plone-theme/components/ItaliaTheme/View/VenueView/VenuePublicTimetable';
 export VenueContacts from 'design-comuni-plone-theme/components/ItaliaTheme/View/VenueView/VenueContacts';
 export VenueMoreInfos from 'design-comuni-plone-theme/components/ItaliaTheme/View/VenueView/VenueMoreInfos';
+export VenueTipologia from 'design-comuni-plone-theme/components/ItaliaTheme/View/VenueView/VenueTipologia';
+export VenueElementiDiInteresse from 'design-comuni-plone-theme/components/ItaliaTheme/View/VenueView/VenueElementiDiInteresse';
+export VenueLuoghiCorrelati from 'design-comuni-plone-theme/components/ItaliaTheme/View/VenueView/VenueLuoghiCorrelati';
+export VenueMultimedia from 'design-comuni-plone-theme/components/ItaliaTheme/View/VenueView/VenueMultimedia';
 
 export PuntoDiContattoView from 'design-comuni-plone-theme/components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView';
 export PuntoDiContattoPlaceholderAfterContent from 'design-comuni-plone-theme/components/ItaliaTheme/View/PuntoDiContattoView/Placeholder/AfterContent';

package/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { defineMessages, useIntl } from 'react-intl';
@@ -14,6 +13,7 @@ const messages = defineMessages({
 const IconPreviewWidget = ({ icon, onEdit, title, description, children }) => {
   const intl = useIntl();
   const parts = icon?.split(' ') ?? [];
+
   return (
     <Form.Field inline className="help" id="icon-preview-widget-id">
       <Grid>

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

@@ -5,69 +5,38 @@
       height: auto;
     }
 
-    .bg-alert-danger {
-      background-color: #a32219;
-      color: $white;
+    .draftjs-buttons a {
+      background-color: $white;
+      color: $body-color;
 
-      .public-DraftEditorPlaceholder-inner {
+      &:hover {
+        background-color: $black;
         color: $white;
       }
+    }
 
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: $white;
-      }
+    .bg-alert-danger {
+      background-color: $alert-danger;
+      color: $white;
 
       a {
         color: $white;
       }
     }
 
-    .bg-alert-warning-orange {
-      background-color: #eb973f;
-      color: $black;
-
-      .public-DraftEditorPlaceholder-inner {
-        color: $black;
-      }
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: $black;
-      }
+    .bg-alert-warning {
+      background-color: $alert-warning;
 
       a {
-        color: $black;
+        color: $body-color;
       }
     }
 
-    .bg-alert-warning {
-      background-color: #f0c250;
-      color: $black;
-
-      .public-DraftEditorPlaceholder-inner {
-        color: $black;
-      }
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: $black;
-      }
+    .bg-alert-info {
+      background-color: $alert-info;
 
       a {
-        color: $black;
+        color: $body-color;
       }
     }
 
@@ -81,35 +50,27 @@
       }
     }
 
-    .DraftEditor-root {
-      background: none;
-    }
-
     p {
       margin: 0;
     }
 
     img.left-image {
-      max-width: 80%;
       object-fit: unset;
-    }
+      max-width: 80%;
 
-    .image-col {
-      text-align: center;
-    }
+      &.size {
+        &-m {
+          max-width: 50%;
+        }
 
-    div + h3,
-    p + h3,
-    h3 + div,
-    h3 + p {
-      margin-top: 1.33rem;
+        &-s {
+          max-width: 30%;
+        }
+      }
     }
 
-    div + h2,
-    p + h2,
-    h2 + div,
-    h2 + p {
-      margin-top: 1rem;
+    .image-col {
+      text-align: center;
     }
   }
 }

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

@@ -23,30 +23,29 @@
       }
     }
 
+    .modal-body {
+      padding-top: 0;
+    }
+
     .item-preview {
       position: relative;
       margin-bottom: 1.25rem;
-
-      .image {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
+      min-height: 72vh;
+      display: flex;
+      align-items: center;
+      text-align: center;
 
       img {
         width: auto !important;
         max-width: 100%;
-
         height: auto;
-        max-height: calc(100vh - 12rem);
+        max-height: 72vh;
       }
 
       button.btn {
         position: absolute;
         z-index: 1;
-
         top: 50%;
-
         border-radius: 100%;
         transform: translateY(-50%);
         height: 3.05rem;
@@ -70,8 +69,5 @@
         }
       }
     }
-    .modal-body {
-      padding-top: 0;
-    }
   }
 }

package/src/theme/ItaliaTheme/Subsites/_common.scss

@@ -10,4 +10,3 @@
 @import '~bootstrap/scss/mixins';
 
 @import 'mixin';
-@import 'homepage';

package/src/theme/ItaliaTheme/Views/_common.scss

@@ -292,6 +292,16 @@ div.sticky-wrapper {
   & > article.mt-5:first-of-type {
     margin-top: 0 !important;
   }
+
+  //gestione scroll per h2 con classe .visually-hidden: non devono avere il margine sopra altrimenti lo scroll si posiziona più in basso rispetto all'inizio del testo
+  .public-ui .h2,
+  .public-ui h2,
+  .h2,
+  h2 {
+    &.visually-hidden {
+      margin-top: 0 !important;
+    }
+  }
 }
 
 #view .it-carousel-wrapper .it-header-block .it-header-block-title h2.h4 {

package/src/theme/ItaliaTheme/_home.scss

@@ -9,3 +9,13 @@ body.public-ui.contenttype-lrf {
 .sidebar-container-enter-done {
   z-index: 150000 !important;
 }
+
+body.subsite.subsite-root {
+  &,
+  .public-ui {
+    .documentFirstHeading,
+    #briciole {
+      display: none;
+    }
+  }
+}

package/src/theme/_cms-ui.scss

@@ -367,6 +367,20 @@ body.cms-ui {
     .button.tertiary.active {
       background-color: $tertiary;
     }
+
+    // Alert block
+    .button.info,
+    .button.info.active {
+      background-color: $alert-info;
+    }
+    .button.warning,
+    .button.warning.active {
+      background-color: $alert-warning;
+    }
+    .button.danger,
+    .button.danger.active {
+      background-color: $alert-danger;
+    }
   }
 
   .path-filter-widget {

package/src/theme/_site-variables.scss

@@ -39,6 +39,11 @@ $caption-text: #455b71 !default;
 
 $primary-a0: hsl($primary-h, 62%, 97%) !default;
 
+// ALERT-BLOCK CUSTOM COLORS
+$alert-danger: #a32219;
+$alert-warning: #eb973f;
+$alert-info: #f0c250;
+
 $argument-icon-color: $tertiary !default;
 $argument-icon-bg: #f5f6f7 !default;
 $external-link-fill-buttons: $tertiary-text !default;

package/src/theme/ItaliaTheme/Subsites/_homepage.scss

@@ -1,9 +0,0 @@
-body.subsite.subsite-root {
-  &,
-  .public-ui {
-    .documentFirstHeading,
-    #briciole {
-      display: none;
-    }
-  }
-}