design-comuni-plone-theme 11.9.1 → 11.10.1

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  successivo: {
+    id: 'successivo',
+    defaultMessage: 'Successivo',
+  },
+});
+
+export default function NextArrow(props) {
+  const intl = useIntl();
+  const { className, style, onClick, onKeyDown, title, id } = props;
+  const _title = title ?? intl.formatMessage(messages.successivo);
+  return (
+    <button
+      className={className}
+      style={{ ...style }}
+      onClick={onClick}
+      title={_title}
+      aria-label={_title}
+      aria-hidden={false}
+      onKeyDown={onKeyDown}
+      id={id}
+    >
+      <Icon icon="chevron-right" key="chevron-right" title={_title} />
+      <span class="visually-hidden">{_title}</span>
+    </button>
+  );
+}

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  precedente: {
+    id: 'precedente',
+    defaultMessage: 'Precedente',
+  },
+});
+
+export default function PrevArrow(props) {
+  const intl = useIntl();
+  const { className, style, onClick, onKeyDown, title, id } = props;
+
+  const _title = title ?? intl.formatMessage(messages.precedente);
+
+  return (
+    <button
+      className={className}
+      style={{ ...style }}
+      onClick={onClick}
+      title={_title}
+      aria-label={_title}
+      aria-hidden={false}
+      id={id}
+      onKeyDown={onKeyDown}
+    >
+      <Icon icon="chevron-left" key="chevron-left-prev" title={_title} />
+      <span class="visually-hidden">{_title}</span>
+    </button>
+  );
+}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+const messages = defineMessages({
+  carouselSlide: {
+    id: 'carouselSlide',
+    defaultMessage: 'Slide',
+  },
+});
+const SingleSlideWrapper = (props) => {
+  const { className, key, index, children, onKeyDown } = props;
+  const intl = useIntl();
+  const wrapperKey = key ?? 'slide-wrapper-' + index;
+
+  return (
+    <div
+      className={`it-single-slide-wrapper ${className ?? ''}`}
+      key={wrapperKey}
+      data-slide={index}
+      role="group"
+      aria-label={
+        intl.formatMessage(messages.carouselSlide) +
+        ' ' +
+        (index ? index + 1 : '') +
+        ' - ' +
+        (props['aria-label'] ?? '')
+      }
+      onKeyDown={onKeyDown}
+      onClick={(e) => {
+        //commentato perchè i link esterni non si aprivano
+        //e.preventDefault();
+        //e.stopPropagation();
+      }}
+      tabIndex={0}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default SingleSlideWrapper;

package/src/components/ItaliaTheme/Slider/slider.js

@@ -0,0 +1,203 @@
+import { useRef, useEffect } from 'react';
+import {
+  NextArrow,
+  PrevArrow,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
+
+export const useSlider = (userAutoplay, setUserAutoplay, block_id) => {
+  const slider = useRef(null);
+  const sliderContainer = document.getElementById('outside-slider-' + block_id);
+  const sliderElementSelector = `#slider_${block_id}`;
+  const sliderElement = document.querySelector(sliderElementSelector);
+  const onIntersection = (entries, opt) => {
+    entries.forEach((entry) =>
+      entry.target.classList.toggle('visible', entry.isIntersecting),
+    );
+  };
+  const observer = new IntersectionObserver(onIntersection, {
+    root: null,
+    threshold: 0.5,
+  });
+
+  const setAutoplay = (a) => {
+    setUserAutoplay(a);
+    slider.current.slickPause(a);
+  };
+
+  if (sliderContainer) observer.observe(sliderContainer);
+  useEffect(() => {
+    return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const focusSlide = (slideIndex) => {
+    if (!sliderElement) return;
+    const sliderIsVisible = sliderContainer?.classList?.contains('visible');
+
+    if (!sliderIsVisible) {
+      setAutoplay(false);
+      return;
+    }
+
+    const slide = document.querySelector(
+      `${sliderElementSelector} .slick-slide[data-index="${slideIndex}"] .it-single-slide-wrapper`,
+    );
+
+    if (userAutoplay && !slide) return;
+
+    if (!slide || document.activeElement === slide) {
+      return;
+    }
+
+    //se c'è l'autoplay e non ho il focus sullo, non faccio il focus sulle slide per non perdere il focus sull'elemento della pagina su cui sono e che sta fuori dallo slider.
+    const focusedSliderElement = Array.from(
+      document.querySelectorAll(sliderElementSelector),
+    ).some((node) => node.contains(document.activeElement));
+
+    if (focusedSliderElement) {
+      slide.focus();
+    }
+  };
+
+  const visibleSlide = (selector) => {
+    // Needed to deal with react-slick duplicating a lot of slides
+    // when used in infinite mode. It's an useless and counterproductive
+    // thing to do on their part, there are multiple issues opened.
+    // The lib is not actually mantained so...
+
+    return Array.from(document.querySelectorAll(selector)).find((e) => {
+      const slick_slide = e.closest('.slick-slide');
+      return !slick_slide.classList.contains('slick-cloned');
+    });
+  };
+
+  const SliderNextArrow = (props) => {
+    // Custom handling of focus for a11y
+    const { className, style, onClick, currentSlide } = props;
+    const handleClick = (options) => {
+      onClick(options, false);
+    };
+    const handleKeyboardUsers = (e) => {
+      if (e.key === 'Tab' && e.shiftKey) {
+        e.stopPropagation();
+        e.preventDefault();
+        setAutoplay(false);
+        const slide = visibleSlide(
+          `${sliderElementSelector} .slick-slide[data-index="${currentSlide}"]`,
+        );
+        slide && slide.focus();
+      }
+    };
+
+    return (
+      <NextArrow
+        className={className}
+        style={{ ...style }}
+        onClick={handleClick}
+        onKeyDown={handleKeyboardUsers}
+        id={'sliderNextArrow_' + block_id}
+      />
+    );
+  };
+
+  const SliderPrevArrow = (props) => {
+    // Custom handling of focus for a11y
+    const { className, style, onClick, currentSlide, slideCount } = props;
+    const handleClick = (options) => {
+      onClick(options, false);
+    };
+    const handleKeyboardUsers = (e) => {
+      if (e.key === 'Tab' && !e.shiftKey) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        setAutoplay(false);
+
+        if (currentSlide < slideCount) {
+          const slide = visibleSlide(
+            `${sliderElementSelector} .slick-slide[data-index="${currentSlide}"]`,
+          );
+
+          slide && slide.focus();
+        }
+      }
+    };
+    return (
+      <PrevArrow
+        className={className}
+        style={{ ...style }}
+        onClick={handleClick}
+        onKeyDown={handleKeyboardUsers}
+        id={'sliderPrevArrow_' + block_id}
+      />
+    );
+  };
+
+  const handleSlideKeydown = (index, prevIndex, nextIndex) => (e) => {
+    const { key, shiftKey } = e;
+
+    setAutoplay(false);
+
+    if (key === 'Tab') {
+      const slide_selector = `#slider_${block_id} .slick-slide[data-index="${index}"]`;
+
+      const focusableSlideElements = document.querySelectorAll(
+        `${slide_selector} a, ${slide_selector} button, ${slide_selector} [tabindex="0"]`,
+      );
+      const isFirstSlideFocusableElement =
+        e.target === focusableSlideElements[0];
+      const isLastSlideFocusableElement =
+        e.target === focusableSlideElements[focusableSlideElements.length - 1];
+
+      if (
+        (isFirstSlideFocusableElement && shiftKey) ||
+        (isLastSlideFocusableElement && !shiftKey)
+      ) {
+        e.preventDefault();
+        e.stopPropagation();
+        //shift+tab ed è il primo elemento focusabile nella slide, oppure tab ed è l'ultimo elemento focusabile nella slide
+        //go to next/prev slide or to next/prev button.
+      } else {
+        return; //continue doing default bhv of Tab key, to focus next focusable element inside slide.
+      }
+
+      if (shiftKey) {
+        if (prevIndex != null) {
+          slider.current.slickGoTo(prevIndex);
+        } else {
+          document.getElementById('sliderPrevArrow_' + block_id).focus();
+        }
+      } else {
+        if (nextIndex != null) {
+          slider.current.slickGoTo(nextIndex);
+        } else {
+          document.getElementById('sliderNextArrow_' + block_id).focus();
+        }
+      }
+    }
+
+    if (key === 'ArrowRight') {
+      if (nextIndex != null) {
+        e.preventDefault();
+        e.stopPropagation();
+        slider.current.slickGoTo(nextIndex);
+      }
+    }
+    if (key === 'ArrowLeft') {
+      if (prevIndex != null) {
+        e.preventDefault();
+        e.stopPropagation();
+        slider.current.slickGoTo(prevIndex);
+      }
+    }
+  };
+
+  return {
+    slider,
+    focusSlide,
+    visibleSlide,
+    SliderNextArrow,
+    SliderPrevArrow,
+    handleSlideKeydown,
+  };
+};

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

@@ -49,11 +49,12 @@ const ContactLink = ({ tel, fax, email, label = true, strong = false }) => {
   function replaceString(str, type) {
     const regex = type === 'mailto' ? emailRegex : phoneRegex;
     return str.split(regex).reduce((acc, substr, i) => {
-      if (substr.trim() !== '') return acc;
+      if (substr.trim() === '') return acc;
+
       return [
         ...acc,
         acc.length === 0 ? '' : ' ',
-        substr.test(regex) ? (
+        regex.test(substr) ? (
           <a
             key={`${type}-${i}`}
             href={`${type}:${substr

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

@@ -67,6 +67,14 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
   const end = viewDate(intl.locale, content.end);
   const openEnd = content?.open_end;
   const wholeDay = content?.whole_day;
+  const rdates = rruleSet?.rdates() ?? [];
+  const exdates = rruleSet?.exdates() ?? [];
+  const additionalDates = rdates.reduce((acc, curr) => {
+    const isExdate = exdates.some((b) => b.toString() === curr.toString());
+    if (!isExdate) {
+      return [...acc, curr];
+    } else return acc;
+  }, []);
 
   return content ? (
     <>
@@ -134,20 +142,20 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
           <strong>{recurrenceText}</strong>
         </div>
       )}
-      {rruleSet?.rdates().length > 0 && (
+      {additionalDates.length > 0 && (
         <div className="mt-4">
           <h5>{intl.formatMessage(messages.additional_dates)}</h5>
-          {rruleSet.rdates().map((additionalDate) => (
+          {additionalDates.map((additionalDate) => (
             <div className="font-serif">
               {viewDate(intl.locale, additionalDate, 'dddd DD MMMM YYYY')}
             </div>
           ))}
         </div>
       )}
-      {rruleSet?.exdates().length > 0 && (
+      {exdates.length > 0 && (
         <div className="mt-4">
           <h5>{intl.formatMessage(messages.excluded_dates)}</h5>
-          {rruleSet.exdates().map((exDate) => (
+          {exdates.map((exDate) => (
             <div className="font-serif">
               {viewDate(intl.locale, exDate, 'dddd DD MMMM YYYY')}
             </div>

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

@@ -8,7 +8,11 @@ import { resetSearchContent, searchContent } from '@plone/volto/actions';
 import { useDispatch, useSelector } from 'react-redux';
 
 import EmbeddedVideo from './EmbeddedVideo';
-import { GalleryPreview } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import {
+  GalleryPreview,
+  SingleSlideWrapper,
+  CarouselWrapper,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
 import PropTypes from 'prop-types';
 import { contentFolderHasItems } from 'design-comuni-plone-theme/helpers';
 import { UniversalLink } from '@plone/volto/components';
@@ -146,10 +150,10 @@ const Gallery = ({
                 {title_type === 'h5' && <h5 id={title_id}>{gallery_title}</h5>}
               </div>
             </div>
-            <div className="it-carousel-all it-card-bg">
+            <CarouselWrapper className="it-card-bg">
               <Slider {...getSettings(images.length)}>
                 {images.map((item, i) => (
-                  <div className="it-single-slide-wrapper" key={item['@id']}>
+                  <SingleSlideWrapper key={item['@id']} index={i}>
                     <figure>
                       <UniversalLink
                         item={item}
@@ -181,7 +185,7 @@ const Gallery = ({
                         {item.title}
                       </figcaption>
                     </figure>
-                  </div>
+                  </SingleSlideWrapper>
                 ))}
               </Slider>
 
@@ -191,7 +195,7 @@ const Gallery = ({
                 setViewIndex={setViewImageIndex}
                 items={images}
               />
-            </div>
+            </CarouselWrapper>
           </div>
         </div>
       ) : null}
@@ -219,20 +223,20 @@ const Gallery = ({
                 </div>
               </div>
             )}
-            <div className="it-carousel-all it-card-bg">
+            <CarouselWrapper className="it-card-bg">
               <Slider {...video_settings}>
                 {videos.map((item, i) => (
-                  <div className="it-single-slide-wrapper" key={item['@id']}>
+                  <SingleSlideWrapper key={item['@id']} index={i}>
                     <EmbeddedVideo
                       title={item.title}
                       key={item['@id'] ?? i}
                       id={item['@id'] ?? i}
                       video_url={item?.remoteUrl || item}
                     />
-                  </div>
+                  </SingleSlideWrapper>
                 ))}
               </Slider>
-            </div>
+            </CarouselWrapper>
           </div>
         </div>
       ) : null}

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

@@ -50,7 +50,7 @@ const Metadata = ({
       {children}
       <p className="font-serif mb-0 mt-4 last-modified">
         <strong>{intl.formatMessage(messages.modified)}:</strong>{' '}
-        {viewDate(intl.locale, content.modified, 'DD-MM-Y, HH:MM')}
+        {viewDate(intl.locale, content.modified, 'DD-MM-Y, HH:mm')}
       </p>
       {content.rights && (
         <>

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

@@ -16,6 +16,13 @@ const messages = defineMessages({
     defaultMessage: 'Blocco sconosciuto',
   },
 });
+const Wrapper = ({ block, id, children }) => {
+  return block['@type'] === 'listing' && block.variation === 'slider' ? (
+    <div id={`outside-slider-${id}`}>{children}</div>
+  ) : (
+    <>{children}</>
+  );
+};
 /**
  * RenderBlocks view component class.
  * @function RenderBlocks
@@ -57,15 +64,21 @@ const RenderBlocks = ({
       {map(items, (block) => {
         const blockType = blockContent[blocksFieldname]?.[block]?.['@type'];
         const Block = config.blocks.blocksConfig[blockType]?.['view'] || null;
+
         if (Block != null) {
           return (
-            <Block
-              key={block}
-              id={block}
-              properties={content ?? data}
-              data={blockContent[blocksFieldname][block]}
-              path={getBaseUrl(location?.pathname || '')}
-            />
+            <Wrapper block={blockContent[blocksFieldname]?.[block]} id={block}>
+              <Block
+                key={block}
+                id={block}
+                properties={content ?? data}
+                data={{
+                  ...blockContent[blocksFieldname][block],
+                  block: block,
+                }}
+                path={getBaseUrl(location?.pathname || '')}
+              />
+            </Wrapper>
           );
         } else {
           return (

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

@@ -42,11 +42,15 @@ const DocumentoDescrizione = ({ content }) => {
   return richTextHasContent(content.descrizione_estesa) ||
     contentFolderHasItems(content, 'multimedia') ||
     content.autori?.length > 0 ||
-    content.licenza_distribuzione?.length > 0 ? (
+    content.identificativo ||
+    content.licenza_distribuzione?.length > 0 ||
+    content.tipologia_licenze?.title ||
+    content.tipologia_documento?.length > 0 ||
+    content.tipologia_documenti_albopretorio?.title ? (
     <RichTextSection
       tag_id={'text-body'}
       title={intl.formatMessage(messages.descrizione)}
-      show_title={true}
+      show_title={richTextHasContent(content.descrizione_estesa)}
       data={content.descrizione_estesa}
     >
       {contentFolderHasItems(content, 'multimedia') && (
@@ -61,7 +65,7 @@ const DocumentoDescrizione = ({ content }) => {
       )}
       {content.identificativo && (
         <div className="mt-5">
-          <h4>{intl.formatMessage(messages.identificativo)}</h4>
+          <h3 className="h4">{intl.formatMessage(messages.identificativo)}</h3>
           <p className="font-serif">{content.identificativo}</p>
         </div>
       )}
@@ -71,7 +75,9 @@ const DocumentoDescrizione = ({ content }) => {
       {(content.licenza_distribuzione?.length > 0 ||
         content.tipologia_licenze?.title) && (
         <div className="mt-5">
-          <h4>{intl.formatMessage(messages.licenza_distribuzione)}</h4>
+          <h3 className="h4">
+            {intl.formatMessage(messages.licenza_distribuzione)}
+          </h3>
           {content.licenza_distribuzione?.length > 0 && (
             <p className="font-serif">{content.licenza_distribuzione}</p>
           )}
@@ -82,7 +88,9 @@ const DocumentoDescrizione = ({ content }) => {
       )}
       {content.tipologia_documento?.length > 0 && (
         <div className="mt-5">
-          <h4>{intl.formatMessage(messages.tipologia_documento)}</h4>
+          <h3 className="h4">
+            {intl.formatMessage(messages.tipologia_documento)}
+          </h3>
           {content.tipologia_documento.map((tipo) => (
             <p key={tipo.token} className="font-serif">
               {tipo.title}
@@ -92,9 +100,9 @@ const DocumentoDescrizione = ({ content }) => {
       )}
       {content.tipologia_documenti_albopretorio?.title && (
         <div className="mt-5">
-          <h4>
+          <h3 className="h4">
             {intl.formatMessage(messages.tipologia_documenti_albopretorio)}
-          </h4>
+          </h3>
           <p className="font-serif">
             {content.tipologia_documenti_albopretorio?.title}
           </p>

package/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno.jsx

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
 import { Card, CardBody } from 'design-react-kit';
 import {
   RichText,
@@ -6,12 +7,22 @@ import {
   ContactLink,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+const messages = defineMessages({
+  organizzatore: {
+    id: 'organizzatore',
+    defaultMessage: 'Organizzatore',
+  },
+});
+
 const EventoContattiOrganizzatoreEsterno = ({ content }) => {
+  const intl = useIntl();
+
   return richTextHasContent(content?.organizzato_da_esterno) ||
     content?.telefono ||
     content?.email ||
     content?.fax ? (
-    <div className="mb-5">
+    <div className="mb-5 mt-3">
+      <h3 className="h5">{intl.formatMessage(messages.organizzatore)}</h3>
       <Card
         className="card card-teaser rounded shadow mt-3"
         noWrapper={true}

package/src/components/ItaliaTheme/View/EventoView/EventoLuoghi.jsx

@@ -19,14 +19,14 @@ const EventoLuoghi = ({ content }) => {
   const intl = useIntl();
 
   return content?.luoghi_correlati?.length > 0 ||
-    content?.nome_sede > 0 ||
-    content?.street > 0 ||
+    content?.nome_sede?.length > 0 ||
+    content?.street?.length > 0 ||
     (content?.geolocation?.latitude && content?.geolocation?.longitude) ||
-    content?.zip_code ||
-    content?.city ||
-    content?.quartiere ||
-    content?.circoscrizione ||
-    content?.country ? (
+    content?.zip_code?.length > 0 ||
+    content?.city?.length > 0 ||
+    content?.quartiere?.length > 0 ||
+    content?.circoscrizione?.length > 0 ||
+    content?.country?.length > 0 ? (
     <RichTextSection
       tag_id="luoghi"
       title={intl.formatMessage(messages.luoghi)}

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

@@ -29,7 +29,7 @@ const UOServices = ({ content }) => {
       <h2 id={`header-servizi_offerti`} className="mb-3 h4">
         {intl.formatMessage(messages.servizi_offerti)}
       </h2>
-      <Row className="card-wrapper card-teaser-wrapper">
+      <Row className="card-wrapper card-teaser-wrapper align-items-stretch">
         {content?.servizi_offerti?.map((servizio, i) => (
           <Col xs="12" lg="6">
             <Card className="shadow rounded card-big-io-comune p-3 my-3">

package/src/components/ItaliaTheme/View/__tests__/ServizioMetadati.test.jsx

@@ -2235,7 +2235,7 @@ test('expect to render fields in page', async () => {
   );
 
   expect(screen.getByText(/Ultimo aggiornamento/i)).toBeInTheDocument();
-  expect(screen.getByText(/15-03-2023, 15:03/i)).toBeInTheDocument();
+  expect(screen.getByText(/15-03-2023, 15:56/i)).toBeInTheDocument();
 });
 
 test('todo', () => {

package/src/components/ItaliaTheme/index.js

@@ -83,11 +83,16 @@ export CardCalendar from 'design-comuni-plone-theme/components/ItaliaTheme/Block
 export ListingCategory from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingCategory';
 export ListingText from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingText';
 export ListingLinkMore from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingLinkMore';
-export NextArrow from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/NextArrow';
-export PrevArrow from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/PrevArrow';
+
 export ListingImage, {
   getListingImageBackground,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage';
 
+/*Slider*/
+export SingleSlideWrapper from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/SingleSlideWrapper';
+export CarouselWrapper from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/CarouselWrapper';
+export ButtonPlayPause from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/ButtonPlayPause';
+export NextArrow from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/NextArrow';
+export PrevArrow from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/PrevArrow';
 /********* ERROR PAGES ********* */
 export Unauthorized from 'design-comuni-plone-theme/components/ItaliaTheme/Unauthorized/Unauthorized';