design-comuni-plone-theme 11.9.1 → 11.10.1

package/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js

@@ -1,5 +1,3 @@
-import { useRef, useEffect } from 'react';
-
 export const getCategory = (item, show_type, show_section, props) => {
   let cat = [];
 
@@ -17,71 +15,3 @@ export const getCategory = (item, show_type, show_section, props) => {
   }
   return null;
 };
-export const visibleSlideTitle = (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 rect = e.getBoundingClientRect();
-    return rect.left >= 0 && rect.right <= window.innerWidth;
-  });
-};
-
-export const useSlider = (userAutoplay) => {
-  const slider = useRef(null);
-  const onIntersection = (entries, opt) => {
-    entries.forEach((entry) =>
-      entry.target.classList.toggle('visible', entry.isIntersecting),
-    );
-  };
-  const observer = new IntersectionObserver(onIntersection, {
-    root: null,
-    threshold: 0.5,
-  });
-  if (document.querySelector('.block.listing.slider'))
-    observer.observe(document.querySelector('.block.listing.slider'));
-  useEffect(() => {
-    return () => observer.disconnect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const focusNext = (currentSlide) => {
-    const sliderElement = document.querySelector('.block.listing.slider');
-    if (!sliderElement) return;
-    const sliderIsVisible = sliderElement.classList.contains('visible');
-
-    if (!sliderIsVisible) {
-      slider.current.slickPause();
-      return;
-    }
-    const slide = sliderElement.querySelectorAll(
-      `a.slide-link[data-slide="${currentSlide}"]`,
-    );
-
-    if ((userAutoplay && !slide) || (userAutoplay && !slide.length > 0)) return;
-
-    // Custom handling of focus for a11y
-    const link = visibleSlideTitle(
-      `a.slide-link[data-slide="${currentSlide}"]`,
-    );
-
-    if (!link || document.activeElement === link) {
-      return;
-    }
-    // eslint-disable-next-line no-unused-expressions
-    else if (
-      // if the focus was already on a slide, move it to the current one
-      Array.from(document.querySelectorAll('.slick-slide')).some((el) =>
-        el.contains(document.activeElement),
-      )
-    ) {
-      link.focus();
-    }
-  };
-
-  return {
-    slider,
-    focusNext,
-  };
-};

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

@@ -4,22 +4,26 @@
 import 'slick-carousel/slick/slick.css';
 import 'design-comuni-plone-theme/components/slick-carousel/slick/slick-theme.css';
 
+import React, { useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
 import { Col, Container, Row } from 'design-react-kit';
+
+import { UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
 import {
   ListingImage,
   ListingLinkMore,
   NextArrow,
   PrevArrow,
+  SingleSlideWrapper,
+  CarouselWrapper,
+  ButtonPlayPause,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import React, { useRef, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
 import { GalleryPreview } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import PropTypes from 'prop-types';
-import { UniversalLink } from '@plone/volto/components';
-import cx from 'classnames';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const messages = defineMessages({
   viewImage: {
@@ -30,14 +34,6 @@ const messages = defineMessages({
     id: 'gallery_viewPreview',
     defaultMessage: "Vedi l'anteprima di",
   },
-  play: {
-    id: 'Play slider',
-    defaultMessage: 'Play',
-  },
-  pause: {
-    id: 'Pause slider',
-    defaultMessage: 'Metti in pausa',
-  },
 });
 
 const PhotogalleryTemplate = ({
@@ -116,21 +112,12 @@ const PhotogalleryTemplate = ({
     prevArrow: <PrevArrow />,
     appendDots: (dots) => (
       <div>
-        <div className="play-pause-wrapper">
-          <button
-            onClick={() => toggleAutoplay()}
-            title={
-              autoplay
-                ? intl.formatMessage(messages.pause)
-                : intl.formatMessage(messages.play)
-            }
-          >
-            <Icon
-              key={autoplay ? 'pause' : 'play'}
-              icon={autoplay ? 'pause' : 'play'}
-            />
-          </button>
-        </div>
+        <ButtonPlayPause
+          onClick={toggleAutoplay}
+          autoplay={autoplay}
+          showLabel={false}
+        />
+
         <ul className="slick-dots" style={{ margin: '0px' }}>
           {dots}
         </ul>
@@ -162,7 +149,7 @@ const PhotogalleryTemplate = ({
           </Row>
         )}
         <div className="slider-container px-4 px-md-0">
-          <div className="it-carousel-all it-card-bg">
+          <CarouselWrapper className="it-card-bg">
             <Slider {...settings} ref={slider}>
               {items.map((item, i) => {
                 const image = ListingImage({
@@ -178,11 +165,12 @@ const PhotogalleryTemplate = ({
                   }px`,
                 });
                 return (
-                  <div
-                    className={cx('it-single-slide-wrapper', {
+                  <SingleSlideWrapper
+                    className={cx('', {
                       'single-slide': items.length === 1,
                     })}
                     key={item['@id']}
+                    index={i}
                   >
                     {!show_image_popup ? (
                       <UniversalLink
@@ -218,7 +206,7 @@ const PhotogalleryTemplate = ({
                         {figure(image, item)}
                       </a>
                     )}
-                  </div>
+                  </SingleSlideWrapper>
                 );
               })}
             </Slider>
@@ -231,7 +219,7 @@ const PhotogalleryTemplate = ({
                 items={items}
               />
             ) : null}
-          </div>
+          </CarouselWrapper>
         </div>
         <ListingLinkMore
           title={linkTitle}

package/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
+import moment from 'moment';
+import cx from 'classnames';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  CardText,
+  CardReadMore,
+} from 'design-react-kit';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { UniversalLink } from '@plone/volto/components';
+
+import { CardCategory } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
+import {
+  getItemIcon,
+  ListingCategory,
+  ListingText,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import {
+  getCalendarDate,
+  getEventRecurrenceMore,
+  getComponentWithFallback,
+} from 'design-comuni-plone-theme/helpers';
+
+const messages = defineMessages({
+  card_detail_label: { id: 'Card detail label', defaultMessage: 'Vedi' },
+  publication_date: {
+    id: 'publication_date',
+    defaultMessage: 'Data di pubblicazione',
+  },
+  update_date: {
+    id: 'update_date',
+    defaultMessage: 'Data di aggiornamento',
+  },
+});
+
+const SimpleCardDefault = (props) => {
+  const intl = useIntl();
+
+  moment.locale(intl.locale);
+
+  const {
+    item,
+    isEditMode,
+    show_icon = true,
+    show_section = true,
+    show_type,
+    show_description = true,
+    show_detail_link,
+    detail_link_label,
+    hide_dates,
+    id_lighthouse,
+    rrule,
+    index,
+  } = props;
+
+  const getItemClass = (item) => {
+    let className = null;
+    switch (item['@type']) {
+      case 'News Item':
+        className =
+          item.tipologia_notizia
+            ?.map?.((tipologia) =>
+              tipologia.token.toLowerCase().replace(' ', '_'),
+            )
+            .join(' ') ?? '';
+        break;
+      default:
+        className = null;
+        break;
+    }
+    return className;
+  };
+
+  const icon = show_icon ? getItemIcon(item) : null;
+  const itemTitle = item.title || item.id;
+  const date = hide_dates ? null : getCalendarDate(item, rrule.rrulestr);
+  const eventRecurrenceMore = hide_dates
+    ? null
+    : getEventRecurrenceMore(item, isEditMode);
+  const listingText = show_description ? <ListingText item={item} /> : null;
+  const category = getCategory(item, show_type, show_section, props);
+  const type = item['@type'];
+
+  const BlockExtraTags = getComponentWithFallback({
+    name: 'BlockExtraTags',
+    dependencies: ['SimpleCardDefault', type],
+  }).component;
+
+  return (
+    <Card
+      className={`align-items-top rounded shadow no-after ${getItemClass(
+        item,
+      )} simple-card-default-item`}
+      noWrapper
+      teaser
+      key={index}
+    >
+      <CardBody
+        className={cx('', {
+          'pb-5': show_detail_link || eventRecurrenceMore,
+        })}
+      >
+        {(icon || category || date) && (
+          <CardCategory iconName={icon} date={date}>
+            {category && (
+              <span className="text fw-bold">
+                <ListingCategory category={category} item={item} />
+              </span>
+            )}
+          </CardCategory>
+        )}
+        <CardTitle tag="h3">
+          <UniversalLink
+            item={!isEditMode ? item : null}
+            href={isEditMode ? '#' : null}
+            data-element={id_lighthouse}
+            tabIndex={0}
+          >
+            {itemTitle}
+          </UniversalLink>
+        </CardTitle>
+        {listingText && (
+          <CardText className={cx('', { 'mb-5': eventRecurrenceMore })}>
+            {listingText}
+            {(type === 'Modulo' || type === 'Documento') && !hide_dates && (
+              <div className="document-date mt-3">
+                {item?.effective && (
+                  <p className="mb-0">
+                    <strong>
+                      {intl.formatMessage(messages.publication_date)}:{' '}
+                    </strong>
+                    {moment(item.effective).format('DD-MM-YYYY')}
+                  </p>
+                )}
+                {item?.modified && (
+                  <p className="mb-0">
+                    <strong>
+                      {intl.formatMessage(messages.update_date)}:{' '}
+                    </strong>
+                    {moment(item.modified).format('DD-MM-YYYY')}
+                  </p>
+                )}
+              </div>
+            )}
+          </CardText>
+        )}
+        <BlockExtraTags {...props} item={item} itemIndex={index} />
+        {eventRecurrenceMore}
+        {show_detail_link && (
+          <CardReadMore
+            iconName="it-arrow-right"
+            tag={UniversalLink}
+            item={!isEditMode ? item : null}
+            href={isEditMode ? '#' : null}
+            text={
+              detail_link_label ||
+              intl.formatMessage(messages.card_detail_label)
+            }
+            aria-hidden="true"
+          />
+        )}
+      </CardBody>
+    </Card>
+  );
+};
+
+SimpleCardDefault.propTypes = {
+  item: PropTypes.any.isRequired,
+  isEditMode: PropTypes.bool,
+};
+
+export default injectLazyLibs(['rrule'])(SimpleCardDefault);

package/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx

@@ -1,76 +1,25 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, useIntl } from 'react-intl';
-import moment from 'moment';
-import { v4 as uuid } from 'uuid';
 import cx from 'classnames';
-import {
-  Card,
-  CardBody,
-  CardTitle,
-  CardText,
-  CardReadMore,
-  Button,
-  Row,
-  Col,
-} from 'design-react-kit';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { UniversalLink } from '@plone/volto/components';
-
-import { CardCategory } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
-import {
-  getItemIcon,
-  ListingCategory,
-  ListingText,
-  ListingLinkMore,
-} from 'design-comuni-plone-theme/components/ItaliaTheme';
-import {
-  getCalendarDate,
-  getEventRecurrenceMore,
-  getComponentWithFallback,
-} from 'design-comuni-plone-theme/helpers';
-
-const messages = defineMessages({
-  card_detail_label: { id: 'Card detail label', defaultMessage: 'Vedi' },
-  publication_date: {
-    id: 'publication_date',
-    defaultMessage: 'Data di pubblicazione',
-  },
-  update_date: {
-    id: 'update_date',
-    defaultMessage: 'Data di aggiornamento',
-  },
-});
+import { Button, Row, Col } from 'design-react-kit';
+import { v4 as uuid } from 'uuid';
+import SimpleCardDefault from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault';
+import { ListingLinkMore } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const SimpleCardTemplateDefault = (props) => {
-  const intl = useIntl();
-
-  moment.locale(intl.locale);
-
   const {
     items,
-    isEditMode,
     linkTitle,
     linkHref,
     linkAlign,
     titleLine,
-    show_icon = true,
-    show_section = true,
-    show_type,
-    show_description = true,
-    show_detail_link,
-    detail_link_label,
     title,
     show_block_bg,
-    hide_dates,
     path_filters,
     show_path_filters,
     addFilters,
     additionalFilters = [],
-    id_lighthouse,
     linkmore_id_lighthouse,
-    rrule,
   } = props;
 
   const resultsUID = uuid();
@@ -85,24 +34,6 @@ const SimpleCardTemplateDefault = (props) => {
 
   const [pathFilter, setPathFilter] = useState(currentPathFilter?.[0] || null);
 
-  const getItemClass = (item) => {
-    let className = null;
-    switch (item['@type']) {
-      case 'News Item':
-        className =
-          item.tipologia_notizia
-            ?.map?.((tipologia) =>
-              tipologia.token.toLowerCase().replace(' ', '_'),
-            )
-            .join(' ') ?? '';
-        break;
-      default:
-        className = null;
-        break;
-    }
-    return className;
-  };
-
   const path_filters_buttons =
     show_path_filters && path_filters
       ? Object.keys(path_filters)
@@ -185,101 +116,9 @@ const SimpleCardTemplateDefault = (props) => {
         className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal card-teaser-block-3 mb-3"
         id={resultsUID + '_results'}
       >
-        {items.map((item, index) => {
-          const icon = show_icon ? getItemIcon(item) : null;
-          const itemTitle = item.title || item.id;
-          const date = hide_dates
-            ? null
-            : getCalendarDate(item, rrule.rrulestr);
-          const eventRecurrenceMore = hide_dates
-            ? null
-            : getEventRecurrenceMore(item, isEditMode);
-          const listingText = show_description ? (
-            <ListingText item={item} />
-          ) : null;
-          const category = getCategory(item, show_type, show_section, props);
-          const type = item['@type'];
-
-          const BlockExtraTags = getComponentWithFallback({
-            name: 'BlockExtraTags',
-            dependencies: ['SimpleCardTemplateDefault', type],
-          }).component;
-
-          return (
-            <Card
-              className={`align-items-top rounded shadow ${getItemClass(item)}`}
-              noWrapper
-              teaser
-              key={index}
-            >
-              <CardBody
-                className={cx('', {
-                  'pb-5': show_detail_link || eventRecurrenceMore,
-                })}
-              >
-                {(icon || category || date) && (
-                  <CardCategory iconName={icon} date={date}>
-                    {category && (
-                      <span className="text fw-bold">
-                        <ListingCategory category={category} item={item} />
-                      </span>
-                    )}
-                  </CardCategory>
-                )}
-                <CardTitle tag="h3">
-                  <UniversalLink
-                    item={!isEditMode ? item : null}
-                    href={isEditMode ? '#' : null}
-                    data-element={id_lighthouse}
-                  >
-                    {itemTitle}
-                  </UniversalLink>
-                </CardTitle>
-                {listingText && (
-                  <CardText className={cx('', { 'mb-5': eventRecurrenceMore })}>
-                    {listingText}
-                    {(type === 'Modulo' || type === 'Documento') &&
-                      !hide_dates && (
-                        <div className="document-date mt-3">
-                          {item?.effective && (
-                            <p className="mb-0">
-                              <strong>
-                                {intl.formatMessage(messages.publication_date)}:{' '}
-                              </strong>
-                              {moment(item.effective).format('DD-MM-YYYY')}
-                            </p>
-                          )}
-                          {item?.modified && (
-                            <p className="mb-0">
-                              <strong>
-                                {intl.formatMessage(messages.update_date)}:{' '}
-                              </strong>
-                              {moment(item.modified).format('DD-MM-YYYY')}
-                            </p>
-                          )}
-                        </div>
-                      )}
-                  </CardText>
-                )}
-                <BlockExtraTags {...props} item={item} itemIndex={index} />
-                {eventRecurrenceMore}
-                {show_detail_link && (
-                  <CardReadMore
-                    iconName="it-arrow-right"
-                    tag={UniversalLink}
-                    item={!isEditMode ? item : null}
-                    href={isEditMode ? '#' : null}
-                    text={
-                      detail_link_label ||
-                      intl.formatMessage(messages.card_detail_label)
-                    }
-                    aria-hidden="true"
-                  />
-                )}
-              </CardBody>
-            </Card>
-          );
-        })}
+        {items.map((item, index) => (
+          <SimpleCardDefault {...props} item={item} index={index} key={index} />
+        ))}
       </div>
 
       <ListingLinkMore
@@ -295,9 +134,8 @@ const SimpleCardTemplateDefault = (props) => {
 
 SimpleCardTemplateDefault.propTypes = {
   items: PropTypes.arrayOf(PropTypes.any).isRequired,
-  isEditMode: PropTypes.bool,
   linkTitle: PropTypes.any,
   linkHref: PropTypes.any,
 };
 
-export default injectLazyLibs(['rrule'])(SimpleCardTemplateDefault);
+export default SimpleCardTemplateDefault;

package/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { defineMessages } from 'react-intl';
+import { UniversalLink } from '@plone/volto/components';
+import { Container } from 'design-react-kit';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+
+const messages = defineMessages({
+  openLink: {
+    id: 'openLink',
+    defaultMessage: 'Apri il link',
+  },
+});
+const SlideItemDefault = ({
+  item,
+  index,
+  image,
+  show_image_title,
+  full_width,
+  intl,
+  setUserAutoplay,
+  userAutoplay,
+  slider,
+}) => {
+  return (
+    <React.Fragment>
+      {image ? (
+        <figure className="img-wrapper">{image}</figure>
+      ) : (
+        <div className="img-placeholder"></div>
+      )}
+      {show_image_title && (
+        <div className="slide-title">
+          <UniversalLink
+            item={item}
+            tabIndex={0}
+            data-slide={index}
+            className={'slide-link no-external-if-link'}
+          >
+            {full_width ? (
+              <Container>
+                {item.title}{' '}
+                <Icon
+                  icon="arrow-right"
+                  key="arrow-right-fw"
+                  title={intl.formatMessage(messages.openLink)}
+                />
+              </Container>
+            ) : (
+              <>
+                {item.title}{' '}
+                <Icon
+                  icon="arrow-right"
+                  key="arrow-right"
+                  title={intl.formatMessage(messages.openLink)}
+                />
+              </>
+            )}
+          </UniversalLink>
+        </div>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default SlideItemDefault;