design-comuni-plone-theme 11.11.1 → 11.12.0

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-05-02T09:19:12.781Z\n"
+"POT-Creation-Date: 2024-05-15T15:55:46.048Z\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"
@@ -106,6 +106,11 @@ msgstr ""
 msgid "Cerca per parola chiave"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Pulisci i campi
+msgid "Clear dates"
+msgstr ""
+
 #: helpers/Translations/searchBlockExtendedTranslations
 # defaultMessage: Clear filters
 msgid "Clear filters"
@@ -2994,6 +2999,11 @@ msgstr ""
 msgid "rrule_nd"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: di
+msgid "rrule_on"
+msgstr ""
+
 #: overrideTranslations
 # defaultMessage: di
 msgid "rrule_on the"
@@ -3284,6 +3294,11 @@ msgstr ""
 msgid "search_endDate"
 msgstr ""
 
+#: components/ItaliaTheme/View/FAQ/FaqFolder/SearchBar
+# defaultMessage: Search icon
+msgid "search_icon"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Dove cercare
 msgid "search_sections"

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.11.1",
+  "version": "11.12.0",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -147,10 +147,10 @@
     "volto-dropdownmenu": "4.1.1",
     "volto-editablefooter": "5.1.1",
     "volto-feedback": "0.3.0",
-    "volto-form-block": "3.7.2",
-    "volto-gdpr-privacy": "2.2.1",
+    "volto-form-block": "3.8.3",
+    "volto-gdpr-privacy": "2.2.5",
     "volto-google-analytics": "2.0.0",
-    "volto-multilingual-widget": "3.0.0",
+    "volto-multilingual-widget": "3.2.1",
     "volto-querywidget-with-browser": "0.4.2",
     "volto-rss-block": "3.0.0",
     "volto-secondarymenu": "4.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-05-02'
+releaseDate: '2024-05-21'
 softwareType: standalone/web
-softwareVersion: 11.11.1
+softwareVersion: 11.12.0
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/Blocks/IconBlocks/Block/ViewBlock.jsx

@@ -10,7 +10,6 @@ import { useIntl, defineMessages } from 'react-intl';
 import { UniversalLink } from '@plone/volto/components';
 
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { RichTextRender } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 import { Card, CardBody, CardReadMore } from 'design-react-kit';
 import config from '@plone/volto/registry';
 
@@ -51,7 +50,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
       <CardBody tag="div">
         {data.icon?.length > 0 && (
           <div className="iconblock-icon">
-            <Icon icon={data.icon} aria-hidden={true} />
+            <Icon icon={data.icon} aria-hidden={true} title={cardTitle} />
           </div>
         )}
 

package/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx

@@ -1,3 +1,4 @@
+import { UniversalLink } from '@plone/volto/components';
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
@@ -15,9 +16,9 @@ const ListingImage = ({
   const Image = config.getComponent({ name: 'Image' }).component;
   let commonImageProps = {
     item,
-    'aria-hidden': true,
-    alt: imageProps.alt ?? '',
-    role: 'presentation',
+    'aria-hidden': imageProps.alt || item.title ? false : true,
+    alt: imageProps.alt ?? item.title ?? '',
+    role: imageProps.alt || item.title ? '' : 'presentation',
     className,
     loading,
     responsive,
@@ -28,7 +29,10 @@ const ListingImage = ({
     commonImageProps = { ...commonImageProps, title: item.title };
   // photogallery needs to check for null image
   // https://stackoverflow.com/questions/33136399/is-there-a-way-to-tell-if-reactelement-renders-null
-  const image = Image(commonImageProps);
+
+  const image = (
+    <UniversalLink item={item}>{Image(commonImageProps)}</UniversalLink>
+  );
   if (image === null)
     return showDefault ? <img src={DefaultImageSVG} alt="" /> : null;
 

package/src/components/ItaliaTheme/Blocks/Listing/SmallBlockLinksTemplate.jsx

@@ -42,6 +42,7 @@ const SmallBlockLinksTemplate = ({
               item,
               sizes: '(max-width:575px) 520px, 200px',
               style: {},
+              alt: item.title,
             });
 
             return (

package/src/components/ItaliaTheme/Breadcrumbs/Breadcrumbs.jsx

@@ -12,7 +12,11 @@ import { matchPath } from 'react-router';
 import { useLocation } from 'react-router-dom';
 import { isEqual, isEmpty } from 'lodash';
 import { getBreadcrumbs } from '@plone/volto/actions';
-import { getBaseUrl, flattenToAppURL } from '@plone/volto/helpers';
+import {
+  getBaseUrl,
+  flattenToAppURL,
+  hasApiExpander,
+} from '@plone/volto/helpers';
 
 import { UniversalLink } from '@plone/volto/components';
 import { Row, Col, BreadcrumbItem } from 'design-react-kit';
@@ -73,13 +77,15 @@ const Breadcrumbs = ({ pathname }) => {
   /** fine della gestione delle rotte statiche */
 
   useEffect(() => {
-    let actualPathForBreadcrumbs = pathname;
-    const { path, buildFullNavTree } = getCurrentPathFromAddonRoutes();
-    if (buildFullNavTree) {
-      const replacedPath = path.replace('**/', '');
-      actualPathForBreadcrumbs = pathname.replace(replacedPath, '');
+    if (!hasApiExpander('breadcrumbs', getBaseUrl(pathname))) {
+      let actualPathForBreadcrumbs = pathname;
+      const { path, buildFullNavTree } = getCurrentPathFromAddonRoutes();
+      if (buildFullNavTree) {
+        const replacedPath = path.replace('**/', '');
+        actualPathForBreadcrumbs = pathname.replace(replacedPath, '');
+      }
+      dispatch(getBreadcrumbs(getBaseUrl(actualPathForBreadcrumbs)));
     }
-    dispatch(getBreadcrumbs(getBaseUrl(actualPathForBreadcrumbs)));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname]);
 

package/src/components/ItaliaTheme/Header/HeaderSlim/TertiaryMenu.jsx

@@ -26,7 +26,7 @@ const TertiaryMenu = () => {
       return {
         url: item.href || flattenToAppURL(item.linkUrl?.[0]?.['@id']) || '/',
         title: item.title,
-        inEvidence:item.inEvidence
+        inEvidence: item.inEvidence,
       };
     });
 

package/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx

@@ -36,10 +36,10 @@ const FontAwesomeIcon = (props) => {
       prefixKey === 'fab'
         ? 'brands'
         : prefixKey === 'far'
-        ? 'regular'
-        : prefixKey != null
-        ? prefixKey
-        : 'solid',
+          ? 'regular'
+          : prefixKey != null
+            ? prefixKey
+            : 'solid',
       iconName,
     ];
   };

package/src/components/ItaliaTheme/Pagination/Pagination.jsx

@@ -81,6 +81,9 @@ class Pagination extends Component {
       totalPages,
     });
 
+    const inactivePrevButton = activePage === 1;
+    const inactiveForwButton = activePage === this.props.totalPages;
+
     return (
       <Pager
         className="justify-content-center mt-5"
@@ -96,6 +99,8 @@ class Pagination extends Component {
                   onClick={this.handleItemClick}
                   type={type}
                   ellipsisItem={ellipsisItem}
+                  isPrevButtonInactive={inactivePrevButton}
+                  isForwButtonInactive={inactiveForwButton}
                 >
                   {value}
                 </PaginationItem>

package/src/components/ItaliaTheme/Pagination/PaginationItem.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import cx from 'classnames';
 import _ from 'lodash';
 import keyboardKey from 'keyboard-key';
 import PropTypes from 'prop-types';
@@ -50,6 +51,9 @@ class PaginationItem extends Component {
       'nextItem',
       'lastItem',
     ]),
+
+    isPrevButtonInactive: PropTypes.bool,
+    isForwButtonInactive: PropTypes.bool,
   };
 
   handleClick = (e) => {
@@ -63,7 +67,15 @@ class PaginationItem extends Component {
   };
 
   render() {
-    const { active, type, children, intl, ellipsisItem } = this.props;
+    const {
+      active,
+      type,
+      children,
+      intl,
+      ellipsisItem,
+      isPrevButtonInactive,
+      isForwButtonInactive,
+    } = this.props;
     const disabled = this.props.disabled || type === 'ellipsisItem';
     return (
       <PagerItem disabled={disabled}>
@@ -79,6 +91,7 @@ class PaginationItem extends Component {
                 icon="it-chevron-left"
                 style={{ ariaHidden: true }}
                 color="primary"
+                className={cx({ disabled: isPrevButtonInactive })}
                 title={intl.formatMessage(messages.prevPage)}
               />
 
@@ -93,6 +106,7 @@ class PaginationItem extends Component {
                 icon="it-chevron-right"
                 style={{ ariaHidden: true }}
                 color="primary"
+                className={cx({ disabled: isForwButtonInactive })}
                 title={intl.formatMessage(messages.nextPage)}
               />
               <span className="visually-hidden">

package/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx

@@ -12,6 +12,7 @@ const SingleSlideWrapper = (props) => {
   const wrapperKey = key ?? 'slide-wrapper-' + index;
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <div
       className={`it-single-slide-wrapper ${className ?? ''}`}
       key={wrapperKey}
@@ -30,6 +31,7 @@ const SingleSlideWrapper = (props) => {
         //e.preventDefault();
         //e.stopPropagation();
       }}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex={0}
     >
       {children}

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

@@ -1,42 +1,13 @@
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import { Card, CardBody, CardText, CardTitle, Icon } from 'design-react-kit';
-import { getContent, resetContent } from '@plone/volto/actions';
 import { UniversalLink } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+
 import { renderPDCItemValue } from 'design-comuni-plone-theme/helpers';
 import { useIntl } from 'react-intl';
 
 const ContactsCard = ({ contact = {}, show_title = false, ...rest }) => {
-  const dispatch = useDispatch();
   const intl = useIntl();
   const contactUrl = contact['@id'];
 
-  const { loading, loaded, error, data } = useSelector(
-    (state) => state.content.subrequests[flattenToAppURL(contactUrl)] ?? {},
-  );
-
-  useEffect(() => {
-    if (!loading && !loaded) {
-      dispatch(
-        getContent(
-          flattenToAppURL(contactUrl),
-          null,
-          flattenToAppURL(contactUrl),
-        ),
-      );
-    }
-  }, [dispatch, contactUrl, loading, loaded]);
-
-  useEffect(
-    () => () => dispatch(resetContent(flattenToAppURL(contactUrl))),
-    [dispatch, contactUrl],
-  );
-
-  if (error) {
-    return null;
-  }
-
   return (
     <Card
       teaser
@@ -54,7 +25,7 @@ const ContactsCard = ({ contact = {}, show_title = false, ...rest }) => {
           )}
         </CardTitle>
         <CardText>
-          {data?.value_punto_contatto.map((pdc, index) => (
+          {contact?.value_punto_contatto?.map((pdc, index) => (
             <span key={index}>
               <strong>
                 <span className="pdc-type">{pdc.pdc_type}</span>

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

@@ -48,6 +48,9 @@ const PageHeaderBando = ({ content }) => {
                 }
                 padding={false}
                 size=""
+                title={`${intl.formatMessage(messages.bando)} ${
+                  content.bando_state[1]
+                }`}
               />
               {intl.formatMessage(messages.bando)}{' '}
               <BandoStatus content={content} />

package/src/components/ItaliaTheme/View/DocumentoView/DocumentoAccedereServizio.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import {
-  RichText,
   RichTextSection,
   GenericCard,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
@@ -24,13 +23,11 @@ const DocumentoAccedereServizio = ({ content }) => {
     >
       <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
         {content.servizi_collegati?.map((servizio, i) => (
-          <GenericCard key={servizio['@id']} item={servizio} showimage={false}>
-            <RichText
-              serif={false}
-              data={servizio.canale_digitale}
-              add_class="mt-3"
-            />
-          </GenericCard>
+          <GenericCard
+            key={servizio['@id']}
+            item={servizio}
+            showimage={false}
+          ></GenericCard>
         ))}
       </div>
     </RichTextSection>

package/src/components/ItaliaTheme/View/FAQ/FaqFolder/SearchBar.jsx

@@ -14,6 +14,10 @@ const messages = defineMessages({
     id: 'faq_search',
     defaultMessage: 'Type in a keyword to find answers',
   },
+  search_icon: {
+    id: 'search_icon',
+    defaultMessage: 'Search icon',
+  },
 });
 
 /**
@@ -41,6 +45,7 @@ const SearchBar = ({ searchableText, setSearchableText }) => {
                   style={{
                     ariaHidden: true,
                   }}
+                  title={intl.formatMessage(messages.search_icon)}
                 />
               </div>
             </div>

package/src/components/ItaliaTheme/View/PersonaView/PersonaDocumenti.jsx

@@ -205,7 +205,6 @@ const PersonaDocumenti = ({ content }) => {
           />
         </RichTextSection>
       )}
-
     </>
   );
 };

package/src/components/ItaliaTheme/View/ServizioView/ServizioCondizioni.jsx

@@ -30,7 +30,11 @@ const ServizioCondizioni = ({ content }) => {
           data-element="service-file"
         >
           <span className="list-item-title-icon-wrapper">
-            <Icon icon="it-clip" className="icon-primary me-1" />
+            <Icon
+              icon="it-clip"
+              className="icon-primary me-1"
+              title={intl.formatMessage(messages.condizioni_link)}
+            />
             {intl.formatMessage(messages.condizioni_link)} (
             {label ? <span className="text-uppercase">{label} </span> : ''}
             <span className="list-item">

package/src/components/ItaliaTheme/View/UOView/UOServices.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import {
   Row,
@@ -9,6 +9,7 @@ import {
   CardTitle,
   CardText,
 } from 'design-react-kit';
+import { Pagination } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { UniversalLink } from '@plone/volto/components';
 
 const messages = defineMessages({
@@ -18,9 +19,35 @@ const messages = defineMessages({
   },
 });
 
+//* Pagination **/
+const divideServicesIntoBatches = (arr, batchSize) => {
+  const batches = [];
+  for (let i = 0; i < arr.length; i += batchSize) {
+    batches.push(arr.slice(i, i + batchSize));
+  }
+  return batches;
+};
+
 const UOServices = ({ content }) => {
   const intl = useIntl();
 
+  const [currentPage, setCurrentPage] = useState(1);
+  const bSize = 4;
+
+  //* Calcolo numero pagine
+
+  const servizi_offerti =
+    content.servizi_offerti === undefined || content.servizi_offerti === null
+      ? []
+      : content.servizi_offerti;
+
+  const pageNumbers = Math.ceil(servizi_offerti.length / bSize);
+
+  const onPaginationChange = (activePage) => {
+    const current = activePage?.children ?? 1;
+    setCurrentPage(current);
+  };
+
   return content?.servizi_offerti?.length > 0 ? (
     <section
       id={'servizi_offerti'}
@@ -30,7 +57,9 @@ const UOServices = ({ content }) => {
         {intl.formatMessage(messages.servizi_offerti)}
       </h2>
       <Row className="card-wrapper card-teaser-wrapper align-items-stretch">
-        {content?.servizi_offerti?.map((servizio, i) => (
+        {divideServicesIntoBatches(content?.servizi_offerti, bSize)[
+          currentPage - 1
+        ]?.map((servizio, i) => (
           <Col xs="12" lg="6">
             <Card className="shadow rounded card-big-io-comune p-3 my-3">
               <CardBody>
@@ -46,6 +75,13 @@ const UOServices = ({ content }) => {
           </Col>
         ))}
       </Row>
+      <div className="pagination-wrapper">
+        <Pagination
+          activePage={currentPage}
+          totalPages={pageNumbers}
+          onPageChange={(e, { activePage }) => onPaginationChange(activePage)}
+        />
+      </div>
     </section>
   ) : null;
 };

package/src/components/ItaliaTheme/manage/Widgets/SearchSectionsConfigurationWidget/SearchSectionsConfigurationForm.jsx

@@ -50,7 +50,7 @@ const SearchSectionsConfigurationForm = ({
   useEffect(() => {
     document
       .querySelector('form.ui.form')
-      .addEventListener('click', preventClick);
+      ?.addEventListener('click', preventClick);
 
     document.querySelectorAll('form.ui.form input').forEach((item) => {
       item.addEventListener('keypress', preventEnter);
@@ -59,7 +59,7 @@ const SearchSectionsConfigurationForm = ({
     return () => {
       document
         .querySelector('form.ui.form')
-        .removeEventListener('click', preventClick);
+        ?.removeEventListener('click', preventClick);
       document.querySelectorAll('form.ui.form input').forEach((item) => {
         item.removeEventListener('keypress', preventEnter);
       });

package/src/config/italiaConfig.js

@@ -66,8 +66,8 @@ import { schemaListing } from 'design-comuni-plone-theme/components/ItaliaTheme/
 
 import reducers from 'design-comuni-plone-theme/reducers';
 
-const ReleaseLog = loadable(() =>
-  import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
+const ReleaseLog = loadable(
+  () => import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
 );
 
 const messages = defineMessages({

package/src/customizations/volto/components/manage/Blocks/Search/components/DateRangeFacet.jsx

@@ -22,6 +22,10 @@ const messages = defineMessages({
     id: 'End Date',
     defaultMessage: 'End Date',
   },
+  clearDates: {
+    id: 'Clear dates',
+    defaultMessage: 'Pulisci i campi',
+  },
 });
 
 const PrevIcon = () => (
@@ -64,7 +68,17 @@ const customArrowIcon = (props) => {
   );
 };
 
-const CloseIcon = () => <Icon icon="it-close" size="24px" className="close" />;
+const CloseIcon = (props) => {
+  const { intl } = props;
+  return (
+    <Icon
+      icon="it-close"
+      size="24px"
+      className="close"
+      title={intl.formatMessage(messages.clearDates)}
+    />
+  );
+};
 
 const DateRangeFacet = (props) => {
   const { facet, isEditMode, onChange, value, reactDates, intl, lang } = props;
@@ -89,7 +103,7 @@ const DateRangeFacet = (props) => {
             disabled={isEditMode}
             noBorder
             showClearDates
-            customCloseIcon={<CloseIcon />}
+            customCloseIcon={<CloseIcon {...props} />}
             displayFormat={moment.localeData(lang).longDateFormat('L')}
             focusedInput={focused}
             onFocusChange={(focusedInput) => setFocused(focusedInput)}

package/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx

@@ -126,7 +126,9 @@ const UniversalLink = ({
           config.settings.siteProperties.markSpecialLinks && (
             <Icon
               icon="it-external-link"
-              title={title}
+              title={`${title ? title + ' - ' : ''}${intl.formatMessage({
+                id: 'opensInNewTab',
+              })}`}
               size="xs"
               className="ms-1 align-sub external-link"
             />

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

@@ -0,0 +1,78 @@
+/*
+CUSTOMIZATIONS:
+- used design-react-kit components to render form result
+*/
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+import { Button, Alert } from 'design-react-kit';
+import { getFieldName } from 'volto-form-block/components/utils';
+
+const messages = defineMessages({
+  success: {
+    id: 'form_submit_success',
+    defaultMessage: 'Sent!',
+  },
+  reset: {
+    id: 'form_reset',
+    defaultMessage: 'Clear',
+  },
+});
+
+const alertTransition = {
+  appear: true,
+  baseClass: 'fade',
+  baseClassActive: 'show',
+  enter: true,
+  exit: true,
+  in: true,
+  mountOnEnter: false,
+  tag: 'div',
+  timeout: 150,
+  unmountOnExit: true,
+};
+
+/* Function that replaces variables from the user customized message  */
+const replaceMessage = (text, sent_data) => {
+  let i = 0;
+  while (i < sent_data.length) {
+    let idField = getFieldName(sent_data[i].label, sent_data[i].field_id);
+    text = text.replaceAll('${' + idField + '}', sent_data[i].value ?? '');
+    i++;
+  }
+  text = text.replaceAll(/\$\{[^}]*\}/gm, ''); //replace empty fields with nothing
+  text = text.replaceAll('\n', '<br/>');
+  return text;
+};
+
+const FormResult = ({ formState, data, resetFormState }) => {
+  const intl = useIntl();
+  return (
+    <Alert color="success" fade isOpen tag="div" transition={alertTransition}>
+      <h4>{intl.formatMessage(messages.success)}</h4>
+      <br />
+      {/* Custom message */}
+      {data.send_message && (
+        <>
+          <p
+            dangerouslySetInnerHTML={{
+              __html: replaceMessage(data.send_message, formState.result.data),
+            }}
+          />
+          <br />
+        </>
+      )}
+      <Button
+        color="primary"
+        outline
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          resetFormState();
+        }}
+      >
+        {intl.formatMessage(messages.reset)}
+      </Button>
+    </Alert>
+  );
+};
+export default FormResult;