design-comuni-plone-theme 11.9.1 → 11.10.0

package/src/components/ItaliaTheme/Blocks/Calendar/Body.jsx

@@ -3,8 +3,11 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useIntl, defineMessages } from 'react-intl';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import {
-  FontAwesomeIcon,
   ListingLinkMore,
+  CarouselWrapper,
+  SingleSlideWrapper,
+  NextArrow,
+  PrevArrow,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Card, Row, Col, Container, Button } from 'design-react-kit';
 import cx from 'classnames';
@@ -28,14 +31,6 @@ const messages = defineMessages({
     id: 'calendar_no_results',
     defaultMessage: 'Nessun evento disponibile al momento',
   },
-  calendar_next_arrow: {
-    id: 'calendar_next_arrow',
-    defaultMessage: 'Prossimi eventi',
-  },
-  calendar_prev_arrow: {
-    id: 'calendar_prev_arrow',
-    defaultMessage: 'Eventi precedenti',
-  },
 });
 
 const copyFields = ['limit', 'query', 'sort_on', 'sort_order', 'depth'];
@@ -169,43 +164,6 @@ const Body = ({ data, block, inEditMode, path, onChangeBlock, reactSlick }) => {
     setAdditionalFilters(filters);
   };
 
-  const NextArrow = (props) => {
-    const { onClick, className } = props;
-    return (
-      <Button
-        outline
-        color={'unset'}
-        className={className}
-        onClick={onClick}
-        aria-label={intl.formatMessage(messages.calendar_next_arrow)}
-      >
-        <FontAwesomeIcon
-          aria-hidden={true}
-          icon={['fas', 'chevron-right']}
-          title={intl.formatMessage(messages.calendar_next_arrow)}
-        />
-      </Button>
-    );
-  };
-  const PrevArrow = (props) => {
-    const { onClick, className } = props;
-    return (
-      <Button
-        outline
-        color={'unset'}
-        className={className}
-        onClick={onClick}
-        aria-label={intl.formatMessage(messages.calendar_prev_arrow)}
-      >
-        <FontAwesomeIcon
-          aria-hidden={true}
-          icon={['fas', 'chevron-left']}
-          title={intl.formatMessage(messages.calendar_prev_arrow)}
-        />
-      </Button>
-    );
-  };
-
   const settings = {
     dots: true,
     arrows: true,
@@ -330,19 +288,25 @@ const Body = ({ data, block, inEditMode, path, onChangeBlock, reactSlick }) => {
           </div>
           <div className="calendar-body">
             {calendarResults[block]?.items?.length > 0 ? (
-              <Slider {...settings}>
-                {calendarResults[block].items.map((day, index) => (
-                  <div key={index} className="body">
-                    <Item
-                      data={data}
-                      day={day}
-                      query={adaptedQuery}
-                      path={path}
-                      inEditMode={inEditMode}
-                    />
-                  </div>
-                ))}
-              </Slider>
+              <CarouselWrapper>
+                <Slider {...settings}>
+                  {calendarResults[block].items.map((day, index) => (
+                    <SingleSlideWrapper
+                      index={index}
+                      key={index}
+                      className="body"
+                    >
+                      <Item
+                        data={data}
+                        day={day}
+                        query={adaptedQuery}
+                        path={path}
+                        inEditMode={inEditMode}
+                      />
+                    </SingleSlideWrapper>
+                  ))}
+                </Slider>
+              </CarouselWrapper>
             ) : inEditMode ? (
               <span className="no-results">
                 {intl.formatMessage(messages.insert_filter)}

package/src/components/ItaliaTheme/Blocks/Common/SearchFilters/SelectFilter.jsx

@@ -4,7 +4,14 @@ import { SelectInput } from 'design-comuni-plone-theme/components';
 import { useDispatch, useSelector } from 'react-redux';
 import { searchContent, getVocabulary } from '@plone/volto/actions';
 
-const SelectFilter = ({ options, value, id, onChange, placeholder }) => {
+const SelectFilter = ({
+  options,
+  value,
+  id,
+  onChange,
+  placeholder,
+  isSearchable = false,
+}) => {
   const dispatch = useDispatch();
 
   const state = useSelector((state) => {
@@ -64,6 +71,7 @@ const SelectFilter = ({ options, value, id, onChange, placeholder }) => {
         }}
         options={select_options?.filter((opt) => !!opt.value?.toString()) ?? []}
         isClearable={true}
+        isSearchable={isSearchable}
         // components={{
         //   ClearIndicator: (props) => {
         //     const {

package/src/components/ItaliaTheme/Blocks/EventSearch/DefaultFilters.js

@@ -65,6 +65,7 @@ const DefaultFilters = () => {
         component: SelectFilter,
         props: {
           value: null,
+          isSearchable: true,
           options: {
             dispatch: {
               path: subsite ? flattenToAppURL(subsite['@id']) : '/',
@@ -72,6 +73,10 @@ const DefaultFilters = () => {
               fullobjects: 0,
               b_size: 10000,
               subrequests_name: 'venues',
+              additionalParams: {
+                sort_on: 'sortable_title',
+                sort_order: 'ascending',
+              },
             },
             placeholder: intl.formatMessage(messages.venues),
           },

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

@@ -10,6 +10,7 @@ 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';
 
@@ -26,6 +27,19 @@ const messages = defineMessages({
  * @extends Component
  */
 const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
+  const rawStringRenderer = {
+    blocks: {
+      unstyled: (children) => {
+        const text = children.map((child) => child[1]).join(''); // Join the text elements
+        return text.trim(); // Remove leading/trailing whitespace
+      },
+    },
+  };
+
+  const cardTitle = redraft(data.title, rawStringRenderer, {
+    cleanup: false,
+  });
+
   const intl = useIntl();
   return (
     <Card
@@ -65,6 +79,9 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
             tag={UniversalLink}
             href={data.href ?? '#'}
             text={data.linkMoreTitle || intl.formatMessage(messages.vedi)}
+            aria-label={`${
+              data.linkMoreTitle || intl.formatMessage(messages.vedi)
+            } ${data.title ? cardTitle[0] : ''}`}
           />
         )}
       </CardBody>

package/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx

@@ -0,0 +1,182 @@
+/*
+ * componente per visulizzare un elemento del template 'Card con immagine' del blocco listing con l'aspetto di default.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  CardText,
+  Chip,
+  ChipLabel,
+} from 'design-react-kit';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { CardCategory } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import {
+  getCalendarDate,
+  getEventRecurrenceMore,
+  getComponentWithFallback,
+} from 'design-comuni-plone-theme/helpers';
+import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
+
+import {
+  getItemIcon,
+  CardCalendar,
+  ListingCategory,
+  ListingImage,
+  ListingText,
+  CardPersona,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
+
+const CardWithImageDefault = (props) => {
+  const {
+    item,
+    index,
+    isEditMode,
+    always_show_image = false,
+    set_four_columns = false,
+    show_type = true,
+    show_section,
+    show_icon = true,
+    show_description = true,
+    show_topics = true,
+    hide_dates = false,
+    natural_image_size = false,
+    id_lighthouse,
+    rrule,
+  } = props;
+
+  const imagesToShow = set_four_columns ? 4 : 3;
+
+  const icon = show_icon ? getItemIcon(item) : null;
+  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 image = ListingImage({ item, showTitleAttr: false });
+
+  const showImage =
+    (index < imagesToShow || always_show_image) && image != null;
+  const category = getCategory(item, show_type, show_section, props);
+  const topics = show_topics ? item.tassonomia_argomenti : null;
+
+  const BlockExtraTags = getComponentWithFallback({
+    name: 'BlockExtraTags',
+    dependencies: ['CardWithImageDefault', item['@type']],
+  }).component;
+
+  return (
+    <>
+      {item['@type'] === 'Persona' ? (
+        <CardPersona
+          item={item}
+          className="card-bg shadow-sm"
+          showImage={showImage}
+          natural_image_size={natural_image_size}
+          show_description={show_description}
+          icon={icon}
+          type={category}
+          isEditMode={isEditMode}
+        />
+      ) : (
+        <Card
+          className={cx(
+            'card-with-image-default-item listing-item card-bg no-after',
+            {
+              'card-teaser-image card-flex': item['@type'] === 'Persona',
+            },
+          )}
+        >
+          {/* wrapperClassName="card-overlapping" */}
+          {showImage && (
+            <div
+              className={cx('img-responsive-wrapper', {
+                'natural-image-size': natural_image_size,
+              })}
+            >
+              <div className="img-responsive img-responsive-panoramic">
+                <figure className="img-wrapper">{image}</figure>
+                {item['@type'] === 'Event' && (
+                  <CardCalendar
+                    start={item.start}
+                    end={item.end}
+                    recurrence={item.recurrence}
+                  />
+                )}
+              </div>
+            </div>
+          )}
+          <CardBody className="px-4">
+            {(icon || category || date) && (
+              <CardCategory iconName={icon} date={date}>
+                <ListingCategory category={category} item={item} />
+              </CardCategory>
+            )}
+            <CardTitle tag="h3">
+              <UniversalLink
+                item={!isEditMode ? item : null}
+                href={isEditMode ? '#' : ''}
+                data-element={id_lighthouse}
+                tabIndex={0}
+              >
+                {item.title || item.id}
+              </UniversalLink>
+            </CardTitle>
+            {listingText && (
+              <CardText
+                className={cx('', {
+                  'mb-3': topics?.length > 0,
+                })}
+              >
+                {listingText}
+              </CardText>
+            )}
+            <BlockExtraTags {...props} item={item} itemIndex={index} />
+            {topics?.length > 0 && (
+              <div
+                className={cx('', {
+                  'mb-3': eventRecurrenceMore,
+                })}
+              >
+                {topics.map((argument, index) => (
+                  <UniversalLink
+                    href={flattenToAppURL(argument['@id'])}
+                    key={index}
+                    title={argument.title}
+                    className="text-decoration-none"
+                  >
+                    <Chip
+                      color="primary"
+                      disabled={false}
+                      simple
+                      tag="div"
+                      className="me-2"
+                    >
+                      <ChipLabel tag="span">{argument.title}</ChipLabel>
+                    </Chip>
+                  </UniversalLink>
+                ))}
+              </div>
+            )}
+
+            {eventRecurrenceMore}
+          </CardBody>
+        </Card>
+      )}
+    </>
+  );
+};
+
+CardWithImageDefault.propTypes = {
+  item: PropTypes.any.isRequired,
+  isEditMode: PropTypes.bool,
+};
+
+export default injectLazyLibs(['rrule'])(CardWithImageDefault);

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

@@ -1,68 +1,28 @@
 /*
- * componente per visulizzare un CT "Persona" nei Listing o in aclune pagine
+ * componente per visulizzare i risultati del blocco Listing con il template 'Card con immagine'
  */
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import {
-  Container,
-  Row,
-  Col,
-  Card,
-  CardBody,
-  CardTitle,
-  CardText,
-  Chip,
-  ChipLabel,
-} from 'design-react-kit';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { UniversalLink } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import {
-  CardCategory,
-  ListingLinkMore,
-} from 'design-comuni-plone-theme/components/ItaliaTheme';
-import {
-  getCalendarDate,
-  getEventRecurrenceMore,
-  getComponentWithFallback,
-} from 'design-comuni-plone-theme/helpers';
-import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
+import { Container, Row, Col } from 'design-react-kit';
+import { ListingLinkMore } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
-import {
-  getItemIcon,
-  CardCalendar,
-  ListingCategory,
-  ListingImage,
-  ListingText,
-  CardPersona,
-} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import CardWithImageDefault from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault';
 
 const CardWithImageTemplate = (props) => {
   const {
     items,
-    isEditMode,
     title,
     linkAlign,
     linkTitle,
     linkHref,
     show_block_bg = false,
-    always_show_image = false,
     set_four_columns = false,
-    show_type = false,
-    show_section,
-    show_icon = true,
-    show_description = true,
-    show_topics = true,
-    hide_dates = false,
-    natural_image_size = false,
-    id_lighthouse,
     linkmore_id_lighthouse,
     titleLine,
-    rrule,
   } = props;
-  const imagesToShow = set_four_columns ? 4 : 3;
+
   return (
     <div className="card-with-image-template">
       <Container className="px-4">
@@ -82,28 +42,6 @@ const CardWithImageTemplate = (props) => {
         )}
         <Row className="items">
           {items.map((item, index) => {
-            const icon = show_icon ? getItemIcon(item) : null;
-            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 image = ListingImage({ item, showTitleAttr: false });
-
-            const showImage =
-              (index < imagesToShow || always_show_image) && image != null;
-            const category = getCategory(item, show_type, show_section, props);
-            const topics = show_topics ? item.tassonomia_argomenti : null;
-
-            const BlockExtraTags = getComponentWithFallback({
-              name: 'BlockExtraTags',
-              dependencies: ['CardWithImageTemplate', item['@type']],
-            }).component;
             const layoutSelected = set_four_columns ? '3' : '4';
 
             return (
@@ -113,111 +51,7 @@ const CardWithImageTemplate = (props) => {
                 key={item['@id']}
                 className="col-item mb-3"
               >
-                {item['@type'] === 'Persona' ? (
-                  <CardPersona
-                    item={item}
-                    className="card-bg shadow-sm"
-                    showImage={showImage}
-                    natural_image_size={natural_image_size}
-                    show_description={show_description}
-                    icon={icon}
-                    type={category}
-                    isEditMode={isEditMode}
-                  />
-                ) : (
-                  <Card
-                    className={cx('listing-item card-bg', {
-                      'card-teaser-image card-flex no-after':
-                        item['@type'] === 'Persona',
-                    })}
-                  >
-                    {/* wrapperClassName="card-overlapping" */}
-                    {showImage && (
-                      <div
-                        className={cx('img-responsive-wrapper', {
-                          'natural-image-size': natural_image_size,
-                        })}
-                      >
-                        <div className="img-responsive img-responsive-panoramic">
-                          <figure className="img-wrapper">{image}</figure>
-                          {item['@type'] === 'Event' && (
-                            <CardCalendar
-                              start={item.start}
-                              end={item.end}
-                              recurrence={item.recurrence}
-                            />
-                          )}
-                        </div>
-                      </div>
-                    )}
-                    <CardBody className="px-4">
-                      {(icon || category || date) && (
-                        <CardCategory
-                          iconName={icon}
-                          date={date}
-                          className={cx('category-top categoryicon-top', {
-                            'wrap-dates-four-columns': set_four_columns,
-                          })}
-                        >
-                          <ListingCategory category={category} item={item} />
-                        </CardCategory>
-                      )}
-                      <CardTitle tag="h3">
-                        <UniversalLink
-                          item={!isEditMode ? item : null}
-                          href={isEditMode ? '#' : ''}
-                          data-element={id_lighthouse}
-                        >
-                          {item.title || item.id}
-                        </UniversalLink>
-                      </CardTitle>
-                      {listingText && (
-                        <CardText
-                          className={cx('', {
-                            'mb-3': topics?.length > 0,
-                          })}
-                        >
-                          {listingText}
-                        </CardText>
-                      )}
-                      <BlockExtraTags
-                        {...props}
-                        item={item}
-                        itemIndex={index}
-                      />
-                      {topics?.length > 0 && (
-                        <div
-                          className={cx('', {
-                            'mb-3': eventRecurrenceMore,
-                          })}
-                        >
-                          {topics.map((argument, index) => (
-                            <UniversalLink
-                              href={flattenToAppURL(argument['@id'])}
-                              key={index}
-                              title={argument.title}
-                              className="text-decoration-none"
-                            >
-                              <Chip
-                                color="primary"
-                                disabled={false}
-                                simple
-                                tag="div"
-                                className="me-2"
-                              >
-                                <ChipLabel tag="span">
-                                  {argument.title}
-                                </ChipLabel>
-                              </Chip>
-                            </UniversalLink>
-                          ))}
-                        </div>
-                      )}
-
-                      {eventRecurrenceMore}
-                    </CardBody>
-                  </Card>
-                )}
+                <CardWithImageDefault {...props} item={item} index={index} />
               </Col>
             );
           })}
@@ -242,4 +76,4 @@ CardWithImageTemplate.propTypes = {
   title: PropTypes.string,
 };
 
-export default injectLazyLibs(['rrule'])(CardWithImageTemplate);
+export default CardWithImageTemplate;

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,
-  };
-};