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

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

@@ -3,12 +3,9 @@
  * @module components/theme/View/DocumentoView/Modules
  */
 
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
-import { getContent, resetContent } from '@plone/volto/actions';
 
 import { Card, CardBody, CardTitle } from 'design-react-kit';
 
@@ -21,20 +18,7 @@ import { DownloadFileFormat } from 'design-comuni-plone-theme/components/ItaliaT
  * @returns {string} Markup of the component.
  */
 const Module = ({ item }) => {
-  const dispatch = useDispatch();
-  const subrequests = useSelector((state) => state.content.subrequests);
-  const url = flattenToAppURL(item['@id']);
-  const key = 'module_' + url;
-
-  useEffect(() => {
-    dispatch(getContent(url, null, key));
-    return () => dispatch(resetContent(key));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key]);
-
-  let modulo = subrequests?.[key]?.data;
-
-  return modulo ? (
+  return item ? (
     <Card
       className="card card-teaser shadow p-4 mt-3 rounded modulo"
       noWrapper={true}
@@ -42,37 +26,44 @@ const Module = ({ item }) => {
     >
       <CardBody tag="div">
         <CardTitle className="h5">
-          {modulo.file_principale ? (
-            modulo.title ?? modulo.file_principale.filename
-          ) : modulo['@type'] === 'Link' ? (
-            <UniversalLink item={modulo} title={modulo.title}>
-              {modulo.title}
+          {item.file_principale ? (
+            item.title ?? item.file_principale.filename
+          ) : item['@type'] === 'Link' ? (
+            <UniversalLink item={item} title={item.title}>
+              {item.title}
             </UniversalLink>
           ) : (
-            modulo.title
+            item.title
           )}
         </CardTitle>
 
-        {modulo.description && <p>{modulo.description}</p>}
+        {item.description && <p>{item.description}</p>}
         <div className="download-formats">
           <DownloadFileFormat
-            file={modulo.file_principale}
+            file={item.file}
+            showLabel={true}
+            title={item.title ?? item.file.filename}
+            hideFileFormatLabel={true}
+            className="mb-4"
+          />
+          <DownloadFileFormat
+            file={item.file_principale}
             showLabel={true}
-            title={modulo.title ?? modulo.file_principale.filename}
+            title={item.title ?? item.file_principale.filename}
             hideFileFormatLabel={true}
             className="mb-4"
           />
           <DownloadFileFormat
-            file={modulo.formato_alternativo_1}
+            file={item.formato_alternativo_1}
             showLabel={true}
-            title={modulo.title ?? modulo.formato_alternativo_1.filename}
+            title={item.title ?? item.formato_alternativo_1.filename}
             hideFileFormatLabel={true}
             className="mb-4"
           />
           <DownloadFileFormat
-            file={modulo.formato_alternativo_2}
+            file={item.formato_alternativo_2}
             showLabel={true}
-            title={modulo.title ?? modulo.formato_alternativo_2.filename}
+            title={item.title ?? item.formato_alternativo_2.filename}
             hideFileFormatLabel={true}
           />
         </div>

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

@@ -18,7 +18,9 @@ import {
  */
 const Modules = ({ content, title, id = 'documenti' }) => {
   const moduli =
-    content.items?.filter((item) => item.id !== 'multimedia') ?? [];
+    content.moduli_del_documento ??
+    content.items?.filter((item) => item.id !== 'multimedia') ??
+    [];
 
   return moduli.length > 0 ? (
     <RichTextSection tag_id={id} title={title}>

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

@@ -3,6 +3,7 @@ import { UniversalLink } from '@plone/volto/components';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
 /**
@@ -24,8 +25,7 @@ const OfficeCard = ({
 }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image =
-    showimage && Image({ item: office, sizes: '80px', loading: 'lazy' });
+  const showImage = showimage && contentHasImage(office);
 
   return (
     <div
@@ -74,7 +74,11 @@ const OfficeCard = ({
 
         {children && <div className="card-text">{children}</div>}
       </div>
-      {image && <div className="image-container">{image}</div>}
+      {showImage && (
+        <div className="avatar size-lg">
+          <Image item={office} sizes="80px" loading="lazy" />
+        </div>
+      )}
     </div>
   );
 };

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

@@ -56,6 +56,7 @@ const PageHeader = (props) => {
   } = props;
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
+  const subtitle = content.subtitle || content.sottotitolo;
   return (
     <div className="PageHeaderWrapper mb-4">
       <div className="row mb-2 mb-lg-0 page-header">
@@ -75,10 +76,8 @@ const PageHeader = (props) => {
           >
             {content.title}
           </h1>
-          <p className="h2">
-            {content.subtitle && `${content.subtitle}`}
-            {content.sottotitolo && `${content.sottotitolo}`}
-          </p>
+
+          {subtitle && <p className="h2">{subtitle}</p>}
 
           <PageHeaderEventDates content={content} />
 

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/Commons/PageHeader/PageHeaderDates.jsx

@@ -39,16 +39,6 @@ const PageHeaderDates = ({ content }) => {
               </div>
             </div>
           )}
-          {content.expires && content['@type'] !== 'News Item' && (
-            <div className="row">
-              <div className="col-12">
-                <small>{intl.formatMessage(messages.expire)}:</small>
-                <p className="font-monospace">
-                  {viewDate(intl.locale, content.expires, 'DD-MM-Y')}
-                </p>
-              </div>
-            </div>
-          )}
         </div>
       )}
     </>

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

@@ -4,12 +4,21 @@ import PropTypes from 'prop-types';
 
 import { rrulei18n } from '@plone/volto/components/manage/Widgets/RecurrenceWidget/Utils';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import {
+  getRealEventEnd,
+  getRecurrenceExceptionDates,
+} from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
   dateStart: {
     id: 'dal {dateStart} fino a conclusione',
     defaultMessage: 'dal {dateStart} fino a conclusione',
   },
+  exceptionDates: {
+    id: 'exceptionDates',
+    defaultMessage:
+      'con alcune eccezioni. Per maggiori informazioni controllare la sezione dedicata.',
+  },
 });
 
 /**
@@ -25,22 +34,50 @@ const PageHeaderEventDates = ({ content, moment, rrule }) => {
   Moment.locale(intl.locale);
 
   const rrulestr = rrule.rrulestr;
-  const wholeDay = content?.whole_day;
+
+  const rruleSet = content.recurrence
+    ? rrulestr(content?.recurrence, {
+        compatible: true, //If set to True, the parser will operate in RFC-compatible mode. Right now it means that unfold will be turned on, and if a DTSTART is found, it will be considered the first recurrence instance, as documented in the RFC.
+        forceset: true,
+      })
+    : null;
+
+  const actualEndDate = getRealEventEnd(content, rruleSet);
+
+  // const wholeDay = content?.whole_day;
   const openEnd = content?.open_end;
+  // show only start when event starts and ends in same day or if a recurrence is set
+  // because to set a recurrence, the event must have the same date as start and end date
   const renderOnlyStart =
     Moment(content.end).format('DD-MM-Y') ===
     Moment(content.start).format('DD-MM-Y');
+
   let eventRecurrenceText = null;
 
   if (content['@type'] === 'Event') {
     if (content.recurrence) {
-      const rruleSet = rrulestr(content.recurrence, {
-        compatible: true, //If set to True, the parser will operate in RFC-compatible mode. Right now it means that unfold will be turned on, and if a DTSTART is found, it will be considered the first recurrence instance, as documented in the RFC.
-        forceset: true,
-      });
+      const isRecurrenceByDay = content.recurrence.includes('BYDAY=+');
+      const isRecurrenceByMonthDay = content.recurrence.includes('BYMONTHDAY=');
+      const isWeekdaySunday = content.recurrence
+        .split('BYDAY')[1]
+        ?.includes('SU');
       const RRULE_LANGUAGE = rrulei18n(intl, Moment);
       eventRecurrenceText = rruleSet.rrules()[0]?.toText(
         (t) => {
+          if (
+            Moment.locale(intl.locale) === 'it' &&
+            (isRecurrenceByDay || isRecurrenceByMonthDay)
+          ) {
+            RRULE_LANGUAGE.strings.th = '°';
+            RRULE_LANGUAGE.strings.nd = '°';
+            RRULE_LANGUAGE.strings.rd = '°';
+            RRULE_LANGUAGE.strings.st = '°';
+
+            if (isWeekdaySunday) {
+              RRULE_LANGUAGE.strings['on the'] = 'la';
+            }
+          }
+
           return RRULE_LANGUAGE.strings[t];
         },
         RRULE_LANGUAGE,
@@ -48,15 +85,21 @@ const PageHeaderEventDates = ({ content, moment, rrule }) => {
       );
     }
   }
+
+  // format and save date into new variable depending on recurrence of event
+  const endDate = Moment(actualEndDate).format('DD-MM-Y');
+
+  // check if there are exception dates added to the recurrence to add info
+  const { additionalDates, removedDates } =
+    getRecurrenceExceptionDates(rruleSet);
+
   return content['@type'] === 'Event' ? (
-    <h4 className="py-2">
-      {!wholeDay &&
+    <p className="h4 py-2">
+      {(content.recurrence || !renderOnlyStart) &&
         !openEnd &&
-        !renderOnlyStart &&
-        `dal ${Moment(content.start).format('DD-MM-Y')} al ${Moment(
-          content.end,
-        ).format('DD-MM-Y')}`}
-      {(wholeDay || renderOnlyStart) &&
+        `dal ${Moment(content.start).format('DD-MM-Y')} al ${endDate}`}
+      {!content.recurrence &&
+        renderOnlyStart &&
         !openEnd &&
         `${Moment(content.start).format('DD-MM-Y')}`}
       {openEnd &&
@@ -64,9 +107,14 @@ const PageHeaderEventDates = ({ content, moment, rrule }) => {
           dateStart: `${Moment(content.start).format('DD-MM-Y')}`,
         })}
       {eventRecurrenceText && (
-        <div className="recurrence small">{eventRecurrenceText}</div>
+        <div className="recurrence small">
+          <span>{eventRecurrenceText}</span>
+          {(additionalDates.length > 0 || removedDates.length > 0) && (
+            <span> {intl.formatMessage(messages.exceptionDates)}</span>
+          )}
+        </div>
       )}
-    </h4>
+    </p>
   ) : null;
 };
 

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

@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Chip, ChipLabel } from 'design-react-kit';
 
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { UniversalLink } from '@plone/volto/components';
 
 /**
  * PageHeaderTassonomiaArgomenti view component class.
@@ -28,17 +28,16 @@ const PageHeaderTassonomiaArgomenti = ({ content }) => {
         <small>{intl.formatMessage(messages.topics)}</small>
       </h5>
       {content.tassonomia_argomenti.map((item, i) => (
-        <a
-          href={flattenToAppURL(item['@id'])}
+        <UniversalLink
+          item={item}
           key={item['@id']}
-          title={item.title}
           className="text-decoration-none me-2 d-inline-block"
           data-element="service-topic"
         >
           <Chip color="primary" disabled={false} large={false} simple tag="div">
             <ChipLabel tag="span">{item.title}</ChipLabel>
           </Chip>
-        </a>
+        </UniversalLink>
       ))}
     </div>
   ) : null;

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

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { OfficeCard } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import { usePaginatedItemsSection } from 'design-comuni-plone-theme/helpers';
+import { Pagination } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const RelatedArticles = ({
   id = 'related-articles',
@@ -12,6 +14,8 @@ const RelatedArticles = ({
   show_title = true,
   noMargin = false,
 }) => {
+  const { batches, currentPage, onPaginationChange, pageNumbers } =
+    usePaginatedItemsSection({ data: items });
   return (
     <article
       id={id}
@@ -27,7 +31,7 @@ const RelatedArticles = ({
       ) : null}
 
       <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
-        {items?.map((item, i) => (
+        {batches?.map((item, i) => (
           <OfficeCard
             key={item['@id']}
             office={item}
@@ -36,6 +40,13 @@ const RelatedArticles = ({
           />
         ))}
       </div>
+      {pageNumbers > 1 ? (
+        <Pagination
+          activePage={currentPage}
+          totalPages={pageNumbers}
+          onPageChange={onPaginationChange}
+        />
+      ) : null}
     </article>
   );
 };

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

@@ -3,6 +3,14 @@ import PropTypes from 'prop-types';
 import ItemInEvidence from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/RelatedItemInEvidence/ItemInEvidence';
 import Arguments from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/RelatedItemInEvidence/Arguments';
 import { Container, Row, Col } from 'design-react-kit';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  inEvidenceItems: {
+    id: 'inEvidenceItems',
+    defaultMessage: 'Contenuti in evidenza',
+  },
+});
 
 /**
  * RelatedItems view component class.
@@ -11,9 +19,14 @@ import { Container, Row, Col } from 'design-react-kit';
  * @returns {string} Markup of the component.
  */
 const RelatedItemInEvidence = ({ content }) => {
+  const intl = useIntl();
   return (
     content?.correlato_in_evidenza?.length > 0 && (
-      <section id="correlato-in-evidenza">
+      <section
+        id="correlato-in-evidenza"
+        role="complementary"
+        aria-label={intl.formatMessage(messages.inEvidenceItems)}
+      >
         <section className="section bg-primary">
           <div className="section-content">
             <Container>

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

@@ -71,7 +71,11 @@ const RelatedItems = ({
   }
 
   return related?.length > 0 || children ? (
-    <section id="contenuti-correlati">
+    <section
+      id="contenuti-correlati"
+      role="complementary"
+      aria-label={intl.formatMessage(messages.related_items)}
+    >
       <section className="section section-muted section-inset-shadow">
         <div className="section-content">
           <Container>
@@ -82,7 +86,9 @@ const RelatedItems = ({
                   <>
                     <Row>
                       <Col className="text-center">
-                        <h3>{intl.formatMessage(messages.related_items)}</h3>
+                        <h2 className="h3">
+                          {intl.formatMessage(messages.related_items)} ???
+                        </h2>
                       </Col>
                     </Row>
                     <Row className="mt-lg-4">
@@ -131,7 +137,9 @@ const RelatedItems = ({
               <>
                 <Row>
                   <Col className="text-center">
-                    <h3>{intl.formatMessage(messages.related_items)}</h3>
+                    <h2 className="h3">
+                      {intl.formatMessage(messages.related_items)}
+                    </h2>
                   </Col>
                 </Row>
                 <Row className="mt-lg-4">

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

@@ -67,9 +67,12 @@ const RenderBlocks = ({
 
         if (Block != null) {
           return (
-            <Wrapper block={blockContent[blocksFieldname]?.[block]} id={block}>
+            <Wrapper
+              block={blockContent[blocksFieldname]?.[block]}
+              id={block}
+              key={block}
+            >
               <Block
-                key={block}
                 id={block}
                 properties={content ?? data}
                 data={{

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

@@ -11,7 +11,7 @@ import {
 } from 'design-react-kit';
 
 import { toPublicURL } from '@plone/volto/helpers';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import Icon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon';
 
 /**
  * Sharing view component class.

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

@@ -24,6 +24,10 @@ const messages = defineMessages({
     id: 'Contenuto',
     defaultMessage: 'Contenuto',
   },
+  sideMenuNavigation: {
+    id: 'sideMenuNavigation',
+    defaultMessage: 'Navigazione della pagina',
+  },
 });
 
 const extractHeaders = (elements, intl) => {
@@ -151,7 +155,10 @@ const SideMenu = ({ data, content_uid }) => {
 
   return headers?.length > 0 ? (
     <div className="sticky-wrapper navbar-wrapper page-side-menu">
-      <nav className="navbar it-navscroll-wrapper navbar-expand-lg">
+      <nav
+        className="navbar it-navscroll-wrapper navbar-expand-lg"
+        aria-label={intl.formatMessage(messages.sideMenuNavigation)}
+      >
         <div className="menu-wrapper">
           <div className="link-list-wrapper menu-link-list">
             <div className="accordion-wrapper">
@@ -162,8 +169,9 @@ const SideMenu = ({ data, content_uid }) => {
                     setIsNavOpen(!isNavOpen);
                   }}
                   aria-controls="side-menu-body"
+                  aria-expanded={isNavOpen}
                 >
-                  <h3>{intl.formatMessage(messages.index)}</h3>
+                  <h2 className="h3">{intl.formatMessage(messages.index)}</h2>
                 </AccordionHeader>
                 <div className="mb-3">
                   <Progress
@@ -171,11 +179,7 @@ const SideMenu = ({ data, content_uid }) => {
                     role="progressbar"
                   />
                 </div>
-                <AccordionBody
-                  active={isNavOpen}
-                  id="side-menu-body"
-                  role="region"
-                >
+                <AccordionBody active={isNavOpen} id="side-menu-body">
                   <ul className="link-list" data-element="page-index">
                     {headers.map((item, i) => {
                       return (

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

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 import { searchContent, resetSearchContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import PropTypes from 'prop-types';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import { UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 
@@ -23,19 +24,22 @@ const messages = defineMessages({
  */
 const Sponsor = ({ item }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image =
-    item?.image &&
-    Image({
-      item: item,
-      sizes: '600px',
-      loading: 'lazy',
-      className: 'img-fluid',
-      alt: item.image.filename ?? item.title,
-    });
+  const showImage = contentHasImage(item);
+
   return item ? (
     <div className="sponsor-item">
       <UniversalLink href={item.remoteUrl}>
-        {image ? image : item.title}
+        {showImage ? (
+          <Image
+            item={item}
+            sizes="600px"
+            loading="lazy"
+            className="img-fluid"
+            alt={item.image.filename ?? item.title}
+          />
+        ) : (
+          item.title
+        )}
       </UniversalLink>
     </div>
   ) : null;

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

@@ -2,6 +2,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import config from '@plone/volto/registry';
 
@@ -26,13 +27,15 @@ const messages = defineMessages({
 const Location = ({ location, show_icon }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image = Image({ item: location, loading: 'lazy', sizes: '80px' });
+  const showImage = contentHasImage(location);
   return (
     location && (
-      <div className="card card-teaser shadow border-left-card mt-3 rounded location-item">
-        {show_icon && <Icon icon={'it-pin'} />}
+      <div className="card card-teaser shadow border-left-card mt-3 card-small rounded location-item">
         <div className="card-body">
-          <div className="card-title h5">{location.title}</div>
+          <div className="card-title h5">
+            {show_icon && <Icon icon={'it-pin'} />}
+            {location.title}
+          </div>
           <div className="card-text">
             {(location.street || location.zip_code) && (
               <p>
@@ -51,7 +54,11 @@ const Location = ({ location, show_icon }) => {
             </p>
           </div>
         </div>
-        {image && <div className="avatar size-xl">{image}</div>}
+        {showImage && (
+          <div className="avatar size-lg">
+            <Image item={location} loading="lazy" sizes="80px" />
+          </div>
+        )}
       </div>
     )
   );
@@ -65,7 +72,7 @@ const Location = ({ location, show_icon }) => {
  */
 const VenuesSmall = ({ venues, show_icon }) => {
   return venues ? (
-    <div className="card-wrapper card-teaser-wrapper">
+    <div className="card-wrapper card-teaser-wrapper align-items-stretch">
       {venues.map((item) => (
         <Location key={item['@id']} location={item} show_icon={show_icon} />
       ))}

package/src/components/ItaliaTheme/View/Commons/__tests__/Dates.test.jsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Dates from '../Dates';
 

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>