design-comuni-plone-theme 11.9.0 → 11.10.0

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-04-03T08:27:02.322Z\n"
+"POT-Creation-Date: 2024-04-09T13:53:31.353Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -38,6 +38,7 @@ msgid "Allow Externals"
 msgstr ""
 
 #: config/Blocks/ListingOptions/simpleCardTemplate
+#: config/Blocks/ListingOptions/sliderTemplate
 # defaultMessage: Aspetto
 msgid "Aspetto"
 msgstr ""
@@ -62,7 +63,7 @@ msgstr ""
 msgid "Block style"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
 #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
 # defaultMessage: Vedi
 msgid "Card detail label"
@@ -446,9 +447,8 @@ msgstr ""
 msgid "Path filter filtro"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Metti in pausa
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per mettere in pausa lo slider
 msgid "Pause slider"
 msgstr ""
 
@@ -463,9 +463,8 @@ msgstr ""
 msgid "Piccolo"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Play
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per riprodurre lo slider
 msgid "Play slider"
 msgstr ""
 
@@ -1099,26 +1098,21 @@ msgstr ""
 msgid "calendarBlockSidebarTitle"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Prossimi eventi
-msgid "calendar_next_arrow"
-msgstr ""
-
 #: components/ItaliaTheme/Blocks/Calendar/Body
 # defaultMessage: Nessun evento disponibile al momento
 msgid "calendar_no_results"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Eventi precedenti
-msgid "calendar_prev_arrow"
-msgstr ""
-
 #: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget
 # defaultMessage: Accedere al servizio
 msgid "canale_digitale_widget_title"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Aggiungi un argomento da visualizzare sulla card.
+msgid "cardDescription"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
 # defaultMessage: Seleziona l'immagine da mostrare
 msgid "cardImage"
@@ -1140,6 +1134,21 @@ msgstr ""
 msgid "card_width_image"
 msgstr ""
 
+#: components/ItaliaTheme/Slider/CarouselWrapper
+# defaultMessage: Carosello
+msgid "carousel"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
+msgid "carousel-item-aria-label"
+msgstr ""
+
+#: components/ItaliaTheme/Slider/SingleSlideWrapper
+# defaultMessage: Slide
+msgid "carouselSlide"
+msgstr ""
+
 #: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView
 # defaultMessage: Formati scaricabili
 msgid "cartellamodulistica_formati_scaricabili"
@@ -1155,6 +1164,11 @@ msgstr ""
 msgid "category_icon"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Allinea gli argomenti al centro
+msgid "centerAlignment"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Link al canale
 msgid "channel_link"
@@ -2207,6 +2221,11 @@ msgstr ""
 msgid "grid-gallery-max-items-exceeded"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Nascondi pulsante "Vedi tutti"
+msgid "hideButtonShowAll"
+msgstr ""
+
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Nascondi le date
 msgid "hide_dates"
@@ -2639,6 +2658,7 @@ msgstr ""
 msgid "openAccordion"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault
 #: components/ItaliaTheme/Blocks/Listing/SliderTemplate
 # defaultMessage: Apri il link
 msgid "openLink"
@@ -2730,6 +2750,11 @@ msgstr ""
 msgid "organizzato_da"
 msgstr ""
 
+#: components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno
+# defaultMessage: Organizzatore
+msgid "organizzatore"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/TrasparenzaFields
 #: components/ItaliaTheme/View/TrasparenzaView/DettagliProcedimentiView
 # defaultMessage: Organo competente adozione provvedimento finale
@@ -2823,7 +2848,7 @@ msgstr ""
 msgid "playStoreLink"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/PrevArrow
 # defaultMessage: Precedente
 msgid "precedente"
 msgstr ""
@@ -2849,7 +2874,7 @@ msgstr ""
 msgid "provvedimento_finale"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
 #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
 # defaultMessage: Data di pubblicazione
 msgid "publication_date"
@@ -3683,6 +3708,21 @@ msgstr ""
 msgid "slideDot"
 msgstr ""
 
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider.
+msgid "slider_listing_appearance_description"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card con immagine
+msgid "slider_listing_appearance_imagecard"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card semplice
+msgid "slider_listing_appearance_simplecard"
+msgstr ""
+
 #: config/Blocks/ListingOptions/sliderTemplate
 # defaultMessage: N° slide da mostrare
 msgid "slidesToShow"
@@ -3824,7 +3864,7 @@ msgstr ""
 msgid "subjects"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/NextArrow
 # defaultMessage: Successivo
 msgid "successivo"
 msgstr ""
@@ -4041,7 +4081,7 @@ msgstr ""
 msgid "uo_type"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
 #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
 # defaultMessage: Data di aggiornamento
 msgid "update_date"
@@ -4067,21 +4107,6 @@ msgstr ""
 msgid "venues"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Prossimo video
-msgid "videogallery_next_arrow"
-msgstr ""
-
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Video precedente
-msgid "videogallery_prev_arrow"
-msgstr ""
-
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
-msgid "viewImage"
-msgstr ""
-
 #: components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody
 # defaultMessage: Vedi tutti
 msgid "view_all"

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.9.0",
+  "version": "11.10.0",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -31,7 +31,8 @@
     "volto-data-grid-widget",
     "volto-querywidget-with-browser",
     "@eeacms/volto-taxonomy",
-    "volto-feedback"
+    "volto-feedback",
+    "volto-slimheader"
   ],
   "scripts": {
     "prepare": "husky install",
@@ -147,12 +148,13 @@
     "volto-editablefooter": "5.1.1",
     "volto-feedback": "0.3.0",
     "volto-form-block": "3.7.2",
-    "volto-gdpr-privacy": "2.1.1",
+    "volto-gdpr-privacy": "2.2.0",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "3.0.0",
     "volto-querywidget-with-browser": "0.4.2",
     "volto-rss-block": "3.0.0",
     "volto-secondarymenu": "4.0.0",
+    "volto-slimheader": "0.1.1",
     "volto-social-settings": "3.0.0",
     "volto-subblocks": "2.0.0",
     "volto-subfooter": "3.0.0",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2024-04-03'
+releaseDate: '2024-04-17'
 softwareType: standalone/web
-softwareVersion: 11.9.0
+softwareVersion: 11.10.0
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/AppExtras/TrackFocus.jsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react';
+
+const DATA_FOCUS_MOUSE = 'data-focus-mouse';
+const CLASS_NAME_MOUSE_FOCUS = 'focus--mouse';
+
+const TrackFocus = () => {
+  const usingMouse = useRef(false);
+
+  useEffect(() => {
+    const handleEvent = (e) => {
+      usingMouse.current = e.type === 'mousedown';
+    };
+    const handleFocusChange = (e) => {
+      if (e.target) {
+        if (usingMouse.current) {
+          e.target.classList.add(CLASS_NAME_MOUSE_FOCUS);
+          e.target.setAttribute(DATA_FOCUS_MOUSE, true);
+        } else {
+          e.target.classList.remove(CLASS_NAME_MOUSE_FOCUS);
+          e.target.removeAttribute(DATA_FOCUS_MOUSE);
+        }
+      }
+    };
+    const handleFocusOut = (e) => {
+      if (e.target) {
+        e.target.classList.remove(CLASS_NAME_MOUSE_FOCUS);
+        e.target.removeAttribute(DATA_FOCUS_MOUSE);
+      }
+    };
+
+    document.addEventListener('keydown', handleEvent);
+    document.addEventListener('mousedown', handleEvent);
+    document.addEventListener('focusin', handleFocusChange);
+    document.addEventListener('focusout', handleFocusOut);
+
+    return () => {
+      document.removeEventListener('keydown', handleEvent);
+      document.removeEventListener('mousedown', handleEvent);
+      document.removeEventListener('focusin', handleFocusChange);
+      document.removeEventListener('focusout', handleFocusOut);
+    };
+  }, []);
+
+  return null;
+};
+
+export default TrackFocus;

package/src/components/ItaliaTheme/Blocks/Accordion/View.jsx

@@ -20,7 +20,7 @@ const AccordionView = ({ data, block }) => {
   };
   const id = new Date().getTime();
   return (
-    <div className="block accordion">
+    <div className="block accordion border-bottom-0">
       <div className="public-ui">
         <div className="full-width section section-muted section-inset-shadow py-5">
           <Container className="px-md-4">

package/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/BodyWrapper.jsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
 
-const BodyWrapper = ({ data, inEditMode, children, id }) => {
+const BodyWrapper = ({ data, inEditMode, children, id, hasArguments }) => {
   return (
-    <div className={cx('container pt-5', { 'p-5': inEditMode })}>
+    <div
+      className={cx('container argumentsCardsWrapper', {
+        'pt-5': hasArguments,
+        'p-5': inEditMode,
+      })}
+    >
       <h2 id={id + 'title'}>{data.text}</h2>
-      <div className="grid mt-5">{children}</div>
+      {children?.length > 0 && <div className="grid mt-5">{children}</div>}
     </div>
   );
 };

package/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { defineMessages } from 'react-intl';
 import { UniversalLink, ConditionalLink } from '@plone/volto/components';
 import { Chip, ChipLabel, Button, Container } from 'design-react-kit';
+import cx from 'classnames';
 
 const messages = defineMessages({
   view_all: {
@@ -14,16 +15,22 @@ const messages = defineMessages({
   },
 });
 
-const BottomBody = ({ data, intl }) => {
+const BottomBody = ({ data, intl, hasArguments }) => {
   return data?.arguments?.length > 0 ? (
-    <Container className="text-center">
-      <div className="row d-lg-inline-flex align-items-center pt-5">
-        <div className="col-lg-auto">
+    <Container className="text-center argumentsChipsWrapper pb-3">
+      <div
+        className={cx('row d-lg-inline-flex align-items-center', {
+          'pt-5': hasArguments,
+        })}
+      >
+        <div
+          className={data?.centerAlignment ? 'col-lg-12 mb-3' : 'col-lg-auto'}
+        >
           <h6 className="text-uppercase text-center mt-1">
             {intl?.formatMessage(messages.otherArguments)}
           </h6>
         </div>
-        <div className="col-lg-auto">
+        <div className={data?.centerAlignment ? 'col-lg-12' : 'col-lg-auto'}>
           {data?.arguments?.map((argument, index) => (
             <Chip
               color="primary"
@@ -43,17 +50,19 @@ const BottomBody = ({ data, intl }) => {
         </div>
       </div>
 
-      <div className="link-button mt-5">
-        <Button
-          color="primary"
-          icon={false}
-          tag={UniversalLink}
-          href="/argomenti"
-          className="view-all text-decoration-none"
-        >
-          {intl?.formatMessage(messages.view_all)}
-        </Button>
-      </div>
+      {!data?.hideButtonShowAll && (
+        <div className="link-button mt-3">
+          <Button
+            color="primary"
+            icon={false}
+            tag={UniversalLink}
+            href="/argomenti"
+            className="view-all text-decoration-none"
+          >
+            {intl?.formatMessage(messages.view_all)}
+          </Button>
+        </div>
+      )}
     </Container>
   ) : null;
 };

package/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Edit.jsx

@@ -14,9 +14,13 @@ import { ArgumentsInEvidenceBackground } from 'design-comuni-plone-theme/compone
 
 class Edit extends SubblocksEdit {
   render() {
+    const hasArguments = this.props.data.subblocks?.some((subblock) => {
+      return subblock.argument?.length > 0;
+    });
+
     return (
       <div className="argumentInEvidence public-ui">
-        <ArgumentsInEvidenceBackground inEditMode={true} />
+        {hasArguments && <ArgumentsInEvidenceBackground inEditMode={true} />}
         <SubblocksWrapper node={this.node}>
           <BodyWrapper data={this.props.data} inEditMode={false}>
             {this.state.subblocks.map((subblock, subindex) => (
@@ -48,7 +52,11 @@ class Edit extends SubblocksEdit {
           />
         </SidebarPortal>
 
-        <BottomBody data={this.props.data} intl={this.props.intl} />
+        <BottomBody
+          hasArguments={true}
+          data={this.props.data}
+          intl={this.props.intl}
+        />
       </div>
     );
   }

package/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar.jsx

@@ -2,7 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Segment, Accordion } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Icon, ObjectBrowserWidget, TextWidget } from '@plone/volto/components';
+import {
+  Icon,
+  ObjectBrowserWidget,
+  TextWidget,
+  CheckboxWidget,
+} from '@plone/volto/components';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 import { defineMessages, useIntl } from 'react-intl';
@@ -20,6 +25,18 @@ const messages = defineMessages({
     id: 'argoment',
     defaultMessage: 'Argomento',
   },
+  cardDescription: {
+    id: 'cardDescription',
+    defaultMessage: 'Aggiungi un argomento da visualizzare sulla card.',
+  },
+  centerAlignment: {
+    id: 'centerAlignment',
+    defaultMessage: 'Allinea gli argomenti al centro',
+  },
+  hideButtonShowAll: {
+    id: 'hideButtonShowAll',
+    defaultMessage: 'Nascondi pulsante "Vedi tutti"',
+  },
 });
 
 const Sidebar = ({
@@ -33,7 +50,7 @@ const Sidebar = ({
   const intl = useIntl();
 
   return (
-    <Segment.Group raised>
+    <Segment.Group>
       <header className="header pulled">
         <h2>
           <FormattedMessage
@@ -69,6 +86,25 @@ const Sidebar = ({
               });
             }}
           />
+          <CheckboxWidget
+            id="centerAlignment"
+            title={intl.formatMessage(messages.centerAlignment)}
+            value={data.centerAlignment ? data.centerAlignment : false}
+            onChange={(name, value) => {
+              onChangeBlock(block, {
+                ...data,
+                centerAlignment: value,
+              });
+            }}
+          />
+          <CheckboxWidget
+            id="hideButtonShowAll"
+            title={intl.formatMessage(messages.hideButtonShowAll)}
+            value={data.hideButtonShowAll ? data.hideButtonShowAll : false}
+            onChange={(name, value) => {
+              onChangeBlock(block, { ...data, hideButtonShowAll: value });
+            }}
+          />
         </Accordion.Content>
       </Accordion>
       <Accordion fluid styled className="form">
@@ -92,7 +128,6 @@ const Sidebar = ({
                   <ObjectBrowserWidget
                     id={'ObjectBrowserWidget'}
                     title={intl.formatMessage(messages.argument)}
-                    required={true}
                     mode={'link'}
                     value={subblock.argument}
                     widgetOptions={{
@@ -100,6 +135,7 @@ const Sidebar = ({
                         selectableTypes: ['Pagina Argomento'],
                       },
                     }}
+                    description={intl.formatMessage(messages.cardDescription)}
                     onChange={(name, value) => {
                       onChangeSubBlock(index, {
                         ...subblock,

package/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/View.jsx

@@ -9,25 +9,40 @@ import { useIntl } from 'react-intl';
 const View = ({ data, id }) => {
   const currentIntl = useIntl();
 
+  const hasArguments = data.subblocks?.some((subblock) => {
+    return subblock.argument?.length > 0;
+  });
   return (
     <div className="block full-width">
       <div className="argumentInEvidence">
-        <ArgumentsInEvidenceBackground />
-        <BodyWrapper data={data} inEditMode={false} id={id}>
-          {data.subblocks
-            ?.filter((subblock) => {
-              return subblock.argument?.length > 0;
-            })
-            .map((subblock, index) => (
-              <Block
-                key={index}
-                data={subblock}
-                inEditMode={false}
-                intl={currentIntl}
-              />
-            ))}
-        </BodyWrapper>
-        <BottomBody data={data} intl={currentIntl} />
+        {hasArguments && <ArgumentsInEvidenceBackground />}
+        {(hasArguments || data.text) && (
+          <BodyWrapper
+            hasArguments={hasArguments}
+            data={data}
+            inEditMode={false}
+            id={id}
+          >
+            {data.subblocks
+              ?.filter((subblock) => {
+                return subblock.argument?.length > 0;
+              })
+              .map((subblock, index) => (
+                <Block
+                  key={index}
+                  data={subblock}
+                  inEditMode={false}
+                  intl={currentIntl}
+                />
+              ))}
+          </BodyWrapper>
+        )}
+
+        <BottomBody
+          hasArguments={hasArguments}
+          data={data}
+          intl={currentIntl}
+        />
       </div>
     </div>
   );