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

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

@@ -19,7 +19,10 @@ import {
   ListingImage,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { getComponentWithFallback } from 'design-comuni-plone-theme/helpers';
+import {
+  getComponentWithFallback,
+  contentHasImage,
+} from 'design-comuni-plone-theme/helpers';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
 import config from '@plone/volto/registry';
@@ -56,14 +59,7 @@ const CompleteBlockLinksTemplate = (props) => {
         )}
         <Row className="items">
           {items.map((item, index) => {
-            const image = ListingImage({
-              item,
-              className: '',
-              sizes: '60px',
-              showTitleAttr: false,
-              alt: item.title,
-            });
-
+            const hasImage = contentHasImage(item);
             const BlockExtraTags = getComponentWithFallback({
               name: 'BlockExtraTags',
               dependencies: ['CompleteBlockLinksTemplate', item['@type']],
@@ -84,7 +80,16 @@ const CompleteBlockLinksTemplate = (props) => {
                     className={'no-external-if-link'}
                   >
                     <div className="d-flex">
-                      {image && <div className="image-container">{image}</div>}
+                      {hasImage && (
+                        <div className="image-container">
+                          <ListingImage
+                            item={item}
+                            className=""
+                            sizes="60px"
+                            alt={item.title}
+                          />
+                        </div>
+                      )}
                       <div>
                         <CardBody>
                           <CardTitle tag="h3" className="text-secondary">

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

@@ -23,6 +23,7 @@ import {
   getCalendarDate,
   getEventRecurrenceMore,
   getComponentWithFallback,
+  contentHasImage,
 } from 'design-comuni-plone-theme/helpers';
 import {
   ListingCategory,
@@ -31,6 +32,7 @@ import {
   getItemIcon,
   // ListingLinkMore,
   ListingImage,
+  RassegnaInfo,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const ContentInEvidenceTemplate = (props) => {
@@ -65,23 +67,27 @@ const ContentInEvidenceTemplate = (props) => {
           const date = getCalendarDate(item, rrule.rrulestr);
           const eventRecurrenceMore = getEventRecurrenceMore(item, isEditMode);
           const listingText = <ListingText item={item} />;
-          const image = ListingImage({
-            item,
-            className: 'item-image',
-            loading: 'eager',
-            sizes: '(max-width:425px) 400px, (max-width:767px) 520px, 650px',
-            showTitleAttr: false,
-          });
+          const hasImage = contentHasImage(item);
           const icon = getItemIcon(item);
           const BlockExtraTags = getComponentWithFallback({
             name: 'BlockExtraTags',
             dependencies: ['ContentInEvidenceTemplate', item['@type']],
           }).component;
 
+          const isEventAppointment =
+            item?.parent?.['@type'] === 'Event' && item?.['@type'] === 'Event';
+
           return (
             <Row key={item['@id']} className="content-in-evidence">
-              {image && (
-                <Col lg={{ size: 6, offset: 1, order: 2 }}>{image}</Col>
+              {hasImage && (
+                <Col lg={{ size: 6, offset: 1, order: 2 }}>
+                  <ListingImage
+                    item={item}
+                    className="item-image"
+                    loading="eager"
+                    sizes="(max-width:425px) 400px, (max-width:767px) 520px, 650px"
+                  />
+                </Col>
               )}
               <Col lg={{ size: 5, order: 1 }}>
                 <Card>
@@ -93,11 +99,19 @@ const ContentInEvidenceTemplate = (props) => {
                         item={item}
                       />
                     </CardCategory>
-                    <CardTitle tag="h2">
+                    <CardTitle
+                      tag="h2"
+                      className={`${
+                        isEventAppointment ? 'rassegna-appointment-title' : ''
+                      }`}
+                    >
                       <UniversalLink item={item} data-element={id_lighthouse}>
                         {item.title}
                       </UniversalLink>
                     </CardTitle>
+                    {isEventAppointment && (
+                      <RassegnaInfo eventoPadre={item.parent} />
+                    )}
                     <CardText>{listingText}</CardText>
 
                     {item.tassonomia_argomenti &&

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

@@ -7,7 +7,7 @@ import {
   ListingLinkMore,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { defineMessages, useIntl } from 'react-intl';
-
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { UniversalLink } from '@plone/volto/components';
@@ -58,9 +58,9 @@ const GridGalleryTemplate = ({
             let image = ListingImage({
               item,
               className: '',
-              showTitleAttr: false,
             });
             let scale = null;
+            let hasImage = contentHasImage(item);
             if (index % 7 === 0 || index % 7 === 6 || index % 7 === 3) {
               scale = 'great';
             }
@@ -83,6 +83,7 @@ const GridGalleryTemplate = ({
                   loading={critical ? 'eager' : 'lazy'}
                 />
               );
+              hasImage = true;
             }
 
             return (
@@ -94,7 +95,7 @@ const GridGalleryTemplate = ({
                   item={!isEditMode ? item : null}
                   href={isEditMode ? '#' : null}
                 >
-                  {image && (
+                  {hasImage && (
                     <picture className="volto-image responsive">
                       {image}
                     </picture>

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

@@ -23,6 +23,7 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import {
   getCalendarDate,
   getEventRecurrenceMore,
+  contentHasImage,
 } from 'design-comuni-plone-theme/helpers';
 import {
   CardCalendar,
@@ -33,6 +34,7 @@ import {
   ListingImage,
   CardCategory,
   CardPersona,
+  RassegnaInfo,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
 
@@ -86,19 +88,19 @@ const InEvidenceTemplate = (props) => {
             const listingText = show_description ? (
               <ListingText item={item} />
             ) : null;
-            const image = ListingImage({
-              item,
-              sizes: '(max-width:320px) 200px, 300px',
-              showTitleAttr: false,
-            });
+            const hasImage = contentHasImage(item);
             const category = getCategory(item, show_type, show_section, props);
             const topics = show_topics ? item.tassonomia_argomenti : null;
 
+            const isEventAppointment =
+              item?.parent?.['@type'] === 'Event' &&
+              item?.['@type'] === 'Event';
+
             return item['@type'] === 'Persona' ? (
               <CardPersona
                 item={item}
                 className="listing-item card-bg"
-                showImage={image ? true : false}
+                showImage={hasImage}
                 show_description={show_description}
                 icon={icon}
                 isEditMode={isEditMode}
@@ -106,10 +108,13 @@ const InEvidenceTemplate = (props) => {
               />
             ) : (
               <Card key={index} className={cx('listing-item card-bg')}>
-                {index === 0 && image && (
+                {index === 0 && hasImage && (
                   <div className="img-responsive-wrapper">
                     <div className="img-responsive">
-                      <figure className="img-wrapper">{image}</figure>
+                      <ListingImage
+                        item={item}
+                        sizes="(max-width:320px) 200px, 300px"
+                      />
                       {item['@type'] === 'Event' && (
                         <CardCalendar start={item.start} end={item.end} />
                       )}
@@ -124,7 +129,12 @@ const InEvidenceTemplate = (props) => {
                       )}
                     </CardCategory>
                   )}
-                  <CardTitle tag="h3">
+                  <CardTitle
+                    tag="h3"
+                    className={`${
+                      isEventAppointment ? 'rassegna-appointment-title' : ''
+                    }`}
+                  >
                     <UniversalLink
                       item={!isEditMode ? item : null}
                       href={isEditMode ? '#' : null}
@@ -133,6 +143,9 @@ const InEvidenceTemplate = (props) => {
                       {item.title || item.id}
                     </UniversalLink>
                   </CardTitle>
+                  {isEventAppointment && (
+                    <RassegnaInfo eventoPadre={item.parent} />
+                  )}
                   {listingText && (
                     <CardText
                       className={cx('', {

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

@@ -127,10 +127,10 @@ const PhotogalleryTemplate = ({
 
   const getCaption = (item) => item.description ?? item.rights ?? null;
 
-  const figure = (image, item) => {
+  const figure = (imageProps, item) => {
     return (
       <figure className="img-wrapper volto-image responsive">
-        {image}
+        <ListingImage {...imageProps} />
         {getCaption(item) && <figcaption>{getCaption(item)}</figcaption>}
       </figure>
     );
@@ -152,7 +152,7 @@ const PhotogalleryTemplate = ({
           <CarouselWrapper className="it-card-bg">
             <Slider {...settings} ref={slider}>
               {items.map((item, i) => {
-                const image = ListingImage({
+                const imageProps = {
                   item,
                   sizes: `(max-width:600px) 450px, (max-width:1024px) ${
                     items.length < 2 ? '1000' : '500'
@@ -160,10 +160,12 @@ const PhotogalleryTemplate = ({
                     items.length === 1
                       ? '1300'
                       : items.length === 2
-                        ? '650'
-                        : '450'
+                      ? '650'
+                      : '450'
                   }px`,
-                });
+                  noWrapLink: true,
+                  showDefault: true,
+                };
                 return (
                   <SingleSlideWrapper
                     className={cx('', {
@@ -178,7 +180,7 @@ const PhotogalleryTemplate = ({
                         openLinkInNewTab={true}
                         title={intl.formatMessage(messages.viewImage)}
                       >
-                        {figure(image, item)}
+                        {figure(imageProps, item)}
                       </UniversalLink>
                     ) : (
                       <a
@@ -203,7 +205,7 @@ const PhotogalleryTemplate = ({
                           messages.viewPreview,
                         )} ${item.title}`}
                       >
-                        {figure(image, item)}
+                        {figure(imageProps, item)}
                       </a>
                     )}
                   </SingleSlideWrapper>

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

@@ -22,6 +22,7 @@ import {
   getItemIcon,
   ListingText,
   ListingLinkMore,
+  RassegnaInfo,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import {
   getCalendarDate,
@@ -100,6 +101,10 @@ const RibbonCardTemplate = (props) => {
               name: 'BlockExtraTags',
               dependencies: ['RibbonCardTemplate', item['@type']],
             }).component;
+
+            const isEventAppointment =
+              item.parent?.['@type'] === 'Event' && item?.['@type'] === 'Event';
+
             return (
               <Col lg={4} sm={12} key={index}>
                 <Card
@@ -133,7 +138,12 @@ const RibbonCardTemplate = (props) => {
                     className={cx('', { 'mt-5': !showRibbon })}
                   >
                     {date && <div className="dates">{date}</div>}
-                    <CardTitle tag="h3">
+                    <CardTitle
+                      tag="h3"
+                      className={`${
+                        isEventAppointment ? 'rassegna-appointment-title' : ''
+                      }`}
+                    >
                       <UniversalLink
                         item={!isEditMode ? item : null}
                         href={isEditMode ? '#' : null}
@@ -142,6 +152,10 @@ const RibbonCardTemplate = (props) => {
                         {itemTitle}
                       </UniversalLink>
                     </CardTitle>
+                    {isEventAppointment && (
+                      <RassegnaInfo eventoPadre={item.parent} />
+                    )}
+
                     {listingText && <CardText>{listingText}</CardText>}
                     <BlockExtraTags {...props} item={item} itemIndex={index} />
                     {eventRecurrenceMore}

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

@@ -19,12 +19,14 @@ import {
   getItemIcon,
   ListingCategory,
   ListingText,
+  RassegnaInfo,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import {
   getCalendarDate,
   getEventRecurrenceMore,
   getComponentWithFallback,
 } from 'design-comuni-plone-theme/helpers';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   card_detail_label: { id: 'Card detail label', defaultMessage: 'Vedi' },
@@ -91,6 +93,12 @@ const SimpleCardDefault = (props) => {
     dependencies: ['SimpleCardDefault', type],
   }).component;
 
+  const isEventAppointment =
+    item?.parent?.['@type'] === 'Event' && item?.['@type'] === 'Event';
+
+  const showContentDateInListingFor =
+    config.settings.siteProperties.showContentDateInListingFor;
+
   return (
     <Card
       className={`align-items-top rounded shadow no-after ${getItemClass(
@@ -114,7 +122,12 @@ const SimpleCardDefault = (props) => {
             )}
           </CardCategory>
         )}
-        <CardTitle tag="h3">
+        <CardTitle
+          tag="h3"
+          className={`${
+            isEventAppointment ? 'rassegna-appointment-title' : ''
+          }`}
+        >
           <UniversalLink
             item={!isEditMode ? item : null}
             href={isEditMode ? '#' : null}
@@ -124,10 +137,11 @@ const SimpleCardDefault = (props) => {
             {itemTitle}
           </UniversalLink>
         </CardTitle>
+        {isEventAppointment && <RassegnaInfo eventoPadre={item.parent} />}
         {listingText && (
           <CardText className={cx('', { 'mb-5': eventRecurrenceMore })}>
             {listingText}
-            {(type === 'Modulo' || type === 'Documento') && !hide_dates && (
+            {showContentDateInListingFor.includes(type) && !hide_dates && (
               <div className="document-date mt-3">
                 {item?.effective && (
                   <p className="mb-0">

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

@@ -41,7 +41,7 @@ const messages = defineMessages({
 
 const Slide = (props) => {
   const intl = useIntl();
-  const { item, index, appearance, appearanceProp, onKeyDown } = props;
+  const { index, appearance, appearanceProp, onKeyDown } = props;
 
   const appearances = config.blocks.blocksConfig.listing.variations.filter(
     (v) => v.id === 'slider',
@@ -50,7 +50,6 @@ const Slide = (props) => {
 
   return (
     <SingleSlideWrapper
-      key={item['@id'] + index}
       index={index}
       onKeyDown={onKeyDown}
       aria-label={
@@ -130,6 +129,7 @@ const SliderTemplate = ({
             };
           return (
             <El
+              key={index}
               className={`${item.props.className} slick-dot`}
               tabIndex={-1}
               title={intl.formatMessage(messages.slideDot, {
@@ -218,16 +218,20 @@ const SliderTemplate = ({
 
             <Slider {...settings} ref={slider}>
               {items.map((item, index) => {
-                const image = ListingImage({
-                  item,
-                  loading: index === 0 ? 'eager' : 'lazy',
-                  sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`,
-                  critical: true,
-                });
+                const image = (
+                  <ListingImage
+                    item={item}
+                    loading={index === 0 ? 'eager' : 'lazy'}
+                    sizes={`max-width(991px) 620px, ${1300 / nSlidesToShow}px`}
+                    critical
+                    showDefault
+                  />
+                );
                 const nextIndex = index < items.length - 1 ? index + 1 : null;
                 const prevIndex = index > 0 ? index - 1 : null;
                 return (
                   <Slide
+                    key={item['@id'] + index}
                     image={image}
                     index={index}
                     full_width={full_width}

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

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { Container, Row, Col } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
-
 import {
   ListingLinkMore,
   ListingImage,
@@ -38,32 +37,31 @@ const SmallBlockLinksTemplate = ({
         )}
         <Row className="items">
           {items.map((item, index) => {
-            const image = ListingImage({
-              item,
-              sizes: '(max-width:575px) 520px, 200px',
-              style: {},
-            });
-
             return (
               <Col
                 md="3"
                 key={item['@id']}
                 className="col-item col-sm-4 col-lg-2"
               >
-                {image && (
-                  <div className="center-image-card">
-                    <UniversalLink
-                      item={!isEditMode ? item : null}
-                      href={isEditMode ? '#' : ''}
-                      className="img-link"
-                      overrideMarkSpecialLinks={
-                        override_links_accessibility_marker
-                      }
-                    >
-                      {image}
-                    </UniversalLink>
-                  </div>
-                )}
+                <div className="center-image-card">
+                  <UniversalLink
+                    item={!isEditMode ? item : null}
+                    href={isEditMode ? '#' : ''}
+                    className="img-link"
+                    overrideMarkSpecialLinks={
+                      override_links_accessibility_marker
+                    }
+                  >
+                    <ListingImage
+                      item={item}
+                      sizes="(max-width:575px) 520px, 200px"
+                      style={{}}
+                      alt={item.title}
+                      noWrapLink
+                      showDefault
+                    />
+                  </UniversalLink>
+                </div>
               </Col>
             );
           })}

package/src/components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock.jsx

@@ -80,9 +80,6 @@ class EditBlock extends SubblockEdit {
                 selected={this.props.selected && this.state.focusOn === 'title'}
                 setSelected={(f) => {
                   this.setState({ focusOn: f });
-                  if (!f) {
-                    this.props.onSubblockChangeFocus(-1);
-                  }
                 }}
                 block={this.props.block}
                 index={this.props.blockIndex}
@@ -120,10 +117,12 @@ class EditBlock extends SubblockEdit {
               fieldName="text"
               selected={this.props.selected && this.state.focusOn === 'text'}
               setSelected={(f) => {
-                this.setState({ focusOn: f });
-                if (!f) {
-                  this.props.onSubblockChangeFocus(-1);
+                if (!this.props.selected) {
+                  //a11y - per il focus del blocco da tastiera con navigazione inversa
+                  this.props.onSubblockChangeFocus(this.props.index);
+                  this.props.onSelectBlock(this.props.block);
                 }
+                this.setState({ focusOn: f });
               }}
               block={this.props.block}
               index={this.props.blockIndex}

package/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx

@@ -54,7 +54,10 @@ class Edit extends SubblocksEdit {
   UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.selected) {
       if (!this.props.selected) {
-        this.setState({ selectedField: 'title' });
+        if (!this.state.selectedField && this.state.subIndexSelected < 0) {
+          //a11y - test subIndexSelected<0 per gestire il focus con navigazione da tastiera al contrario (dal blocco successivo a questo blocco)
+          this.setState({ selectedField: 'title' });
+        }
       }
     } else {
       this.setState({ selectedField: null });
@@ -122,7 +125,11 @@ class Edit extends SubblocksEdit {
 
     return (
       <div className="public-ui" tabIndex="-1" ref={this.nodeF}>
-        <div className="full-width section py-5">
+        <div
+          className="full-width section py-5"
+          role="form"
+          aria-label={this.props.blocksConfig[this.props.type].title}
+        >
           {this.props.data?.background?.[0] ? (
             <div
               className="background-image"
@@ -186,7 +193,14 @@ class Edit extends SubblocksEdit {
                         fieldName="title"
                         selected={this.state.selectedField === 'title'}
                         setSelected={(f) => {
-                          this.setState({ selectedField: f });
+                          this.setState({
+                            selectedField: f,
+                            subIndexSelected: -1,
+                          });
+                          if (!this.props.selected) {
+                            //a11y - per il focus del blocco da tastiera
+                            this.props.onSelectBlock(this.props.block);
+                          }
                         }}
                         onChangeBlock={this.props.onChangeBlock}
                         placeholder={this.props.intl.formatMessage(

package/src/components/ItaliaTheme/Blocks/NumbersBlock/View.jsx

@@ -61,7 +61,11 @@ const NumbersView = ({ data, block }) => {
                     </div>
                   )}
 
-                  {data.title && <div className="title">{data.title}</div>}
+                  {data.title && (
+                    <div className="title">
+                      <h2>{data.title}</h2>
+                    </div>
+                  )}
                 </div>
               </Col>
 

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

@@ -77,6 +77,7 @@ const Body = ({ block, sections }) => {
                 e.key === 'Enter' ? navigate(inputText, searchFilters()) : null
               }
               aria-label={block.placeholder}
+              autocomplete="off"
             ></input>
           </div>
           <div className="buttonsContainer mt-2 d-flex">