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

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

@@ -68,7 +68,7 @@ const Edit = (props) => {
                   {...otherProps}
                   data={data}
                   fieldName="text"
-                  selected={selectedField === 'text'}
+                  selected={selected && selectedField === 'text'}
                   block={block}
                   placeholder={intl.formatMessage(messages.text)}
                   setSelected={setSelectedField}
@@ -100,7 +100,7 @@ const Edit = (props) => {
                   data={data}
                   block={block}
                   fieldName="countdown_text"
-                  selected={selectedField === 'countdown_text'}
+                  selected={selected && selectedField === 'countdown_text'}
                   placeholder={intl.formatMessage(messages.text)}
                   setSelected={setSelectedField}
                   focusPrevField={() => {

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

@@ -75,6 +75,11 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
         o: 'plone.app.querystring.operation.selection.any',
         v: ['Event'],
       },
+      {
+        i: 'rassegna',
+        o: 'plone.app.querystring.operation.boolean.isFalse',
+        v: '',
+      },
     ];
 
     [filterOne, filterTwo, filterThree].forEach((f) => {
@@ -98,9 +103,11 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
       getQueryStringResults(
         subsite ? flattenToAppURL(subsite['@id']) : '',
         {
-          fullobjects: 1,
           query: query,
+          metadata_fields: '_all',
           b_size: b_size,
+          sort_order: 'ascending',
+          sort_on: 'start',
         },
         id + '_events_search',
         page,
@@ -175,6 +182,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
                 <>
                   {React.createElement(filterOne.widget.component, {
                     ...filterOne.widget?.props,
+                    blockID: id,
                     id: 'filterOne',
                     onChange: (filter, value) => {
                       dispatchFilter({
@@ -188,6 +196,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
               {filterTwo &&
                 React.createElement(filterTwo.widget?.component, {
                   ...filterTwo.widget?.props,
+                  blockID: id,
                   id: 'filterTwo',
                   onChange: (filter, value) =>
                     dispatchFilter({
@@ -198,6 +207,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
               {filterThree &&
                 React.createElement(filterThree.widget?.component, {
                   ...filterThree.widget?.props,
+                  blockID: id,
                   id: 'filterThree',
                   onChange: (filter, value) =>
                     dispatchFilter({
@@ -211,6 +221,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
                 icon={false}
                 tag="button"
                 className="my-2 my-lg-1"
+                type="submit"
               >
                 {intl.formatMessage(messages.find)}
               </Button>
@@ -223,7 +234,11 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
         items?.length > 0 ? (
           <div className="mt-4" ref={resultsRef} aria-live="polite">
             <div className="block listing">
-              <CardWithImageTemplate items={items} full_width={false} />
+              <CardWithImageTemplate
+                items={items}
+                full_width={false}
+                always_show_image={data.always_show_image}
+              />
             </div>
             {querystringResults.total > b_size && (
               <Pagination

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

@@ -36,6 +36,8 @@ const DefaultFilters = () => {
   const intl = useIntl();
   moment.locale(intl.locale);
   const subsite = useSelector((state) => state.subsite?.data);
+  const isSubsiteValid = subsite && Object.keys(subsite).length > 0;
+  const path = isSubsiteValid ? flattenToAppURL(subsite['@id']) : '/';
 
   return {
     text_filter: {
@@ -67,19 +69,10 @@ const DefaultFilters = () => {
           value: null,
           isSearchable: true,
           options: {
-            dispatch: {
-              path: subsite ? flattenToAppURL(subsite['@id']) : '/',
-              portal_types: ['Venue'],
-              fullobjects: 0,
-              b_size: 10000,
-              subrequests_name: 'venues',
-              additionalParams: {
-                sort_on: 'sortable_title',
-                sort_order: 'ascending',
-              },
-            },
+            vocabulary: 'design.plone.vocabularies.event_location',
             placeholder: intl.formatMessage(messages.venues),
           },
+          optionsQuerySize: -1,
         },
       },
       query: (value, query) => {
@@ -99,12 +92,12 @@ const DefaultFilters = () => {
         component: DateFilter,
         props: {
           value: {
-            startDate: moment().startOf('day'),
-            endDate: moment().endOf('day'),
+            startDate: null,
+            endDate: null,
           },
           showClearDates: true,
-          defaultStart: moment().startOf('day'),
-          defaultEnd: moment().endOf('day'),
+          defaultStart: null,
+          defaultEnd: null,
           isOutsideRange: () => false,
         },
       },

package/src/components/ItaliaTheme/Blocks/EventSearch/Sidebar.jsx

@@ -75,6 +75,10 @@ const messages = defineMessages({
     id: 'searchBlock_show_default_results',
     defaultMessage: 'Di default, mostra i risultati',
   },
+  always_show_image: {
+    id: 'searchBlock_always_show_image',
+    defaultMessage: "Mostra l'immagine per tutti gli elementi",
+  },
 });
 
 const Sidebar = (props) => {
@@ -161,11 +165,18 @@ const Sidebar = (props) => {
           <CheckboxWidget
             id="show_default_results"
             title={props.intl.formatMessage(messages.show_default_results)}
-            value={
-              props.data.show_default_results
-                ? props.data.show_default_results
-                : false
-            }
+            value={props.data.show_default_results}
+            onChange={(id, value) => {
+              props.onChangeBlock(props.block, {
+                ...props.data,
+                [id]: value,
+              });
+            }}
+          />
+          <CheckboxWidget
+            id="always_show_image"
+            title={props.intl.formatMessage(messages.always_show_image)}
+            value={props.data.always_show_image}
             onChange={(id, value) => {
               props.onChangeBlock(props.block, {
                 ...props.data,

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

@@ -54,13 +54,13 @@ class EditBlock extends SubblockEdit {
 
   componentDidMount() {
     // eslint-disable-next-line no-unused-expressions
-    this.subblock_ref?.current?.addEventListener('keydown', (e) => {
-      if (e.keyCode === 13) {
-        if (!(this.state.focusOn === 'text')) {
-          this.setState({ focusOn: 'text' });
-        }
-      }
-    });
+    // this.subblock_ref?.current?.addEventListener('keydown', (e) => {
+    //   if (e.keyCode === 13) {
+    //     if (!(this.state.focusOn === 'text')) {
+    //       this.setState({ focusOn: 'text' });
+    //     }
+    //   }
+    // });
   }
   /**
    * Render method.
@@ -149,6 +149,11 @@ class EditBlock extends SubblockEdit {
                 fieldName="text"
                 selected={this.props.selected && this.state.focusOn === 'text'}
                 setSelected={(f) => {
+                  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 });
                 }}
                 onChangeBlock={(block, _data) => {

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

@@ -1,6 +1,6 @@
 /**
  * ViewBlock.
- * @module components/ItaliaTheme/Blocks/Accordion/Block/ViewBlock
+ * @module components/ItaliaTheme/Blocks/IconBlocks/Block/ViewBlock
  */
 
 import React from 'react';
@@ -9,7 +9,6 @@ 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 { TextBlockView } from '@plone/volto-slate/blocks/Text';
@@ -26,16 +25,7 @@ const messages = defineMessages({
  * @class ViewBlock
  * @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 ViewBlock = ({ data, isOpen, toggle, id, index, blockHasTitle }) => {
   const intl = useIntl();
 
   return (
@@ -48,11 +38,15 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
       <CardBody tag="div">
         {data.icon?.length > 0 && (
           <div className="iconblock-icon">
-            <Icon icon={data.icon} aria-hidden={true} />
+            <Icon icon={data.icon} aria-hidden={true} title={data.title} />
           </div>
         )}
 
-        {data.title && <div className="iconblock-title">{data.title}</div>}
+        {data.title && (
+          <div className="iconblock-title">
+            {blockHasTitle ? <h3>{data.title}</h3> : data.title}
+          </div>
+        )}
         {data.text && (
           <div className="iconblock-text">
             <TextBlockView data={{ value: data.text }} />

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

@@ -52,7 +52,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 });
@@ -121,7 +124,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">
               <Image
@@ -151,6 +158,10 @@ class Edit extends SubblocksEdit {
                       selectedField: f,
                       subIndexSelected: -1,
                     });
+                    if (!this.props.selected) {
+                      //a11y - per il focus del blocco da tastiera
+                      this.props.onSelectBlock(this.props.block);
+                    }
                   }}
                   placeholder={this.props.intl.formatMessage(messages.title)}
                   focusNextField={() => {
@@ -200,7 +211,10 @@ class Edit extends SubblocksEdit {
                       isLast={subindex === this.state.subblocks?.length - 1}
                       openObjectBrowser={this.props.openObjectBrowser}
                       onFocusPreviousBlock={() => {
-                        this.setState({ selectedField: 'description' });
+                        this.setState({
+                          selectedField: 'description',
+                          subIndexSelected: -1,
+                        });
                       }}
                     />
                   </Col>

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

@@ -40,7 +40,11 @@ const IconsBlockView = ({ data, block }) => {
           )}
           <Container className="px-md-4">
             <div className="block-header">
-              {data.title && <div className="title">{data.title}</div>}
+              {data.title && (
+                <div className="title">
+                  <h2>{data.title}</h2>
+                </div>
+              )}
               {data.description && (
                 <div className="description">
                   <TextBlockView data={{ value: data.description }} />
@@ -55,6 +59,7 @@ const IconsBlockView = ({ data, block }) => {
                     key={index}
                     id={id}
                     index={index}
+                    blockHasTitle={!!data.title}
                   />
                 </Col>
               ))}

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

@@ -51,14 +51,17 @@ const AttachmentCardTemplate = ({
         <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal card-teaser-block-3 mb-3">
           {items.map((item, index) => {
             let itemUrl = { ...item };
-            if (item['@type'] === 'File') {
+            //la parte qui sotto commentata non serve perchè gestisce gia tutto UniversalLink e in view si vedrebbe /@@download/file duplicato nell url
+            if (
+              item['@type'] === 'File' &&
+              item?.mime_type === 'application/pdf'
+            ) {
               itemUrl = {
                 ...item,
                 file: item,
-                '@id':
-                  show_pdf_preview && item?.mime_type === 'application/pdf'
-                    ? item?.['@id'] + '/@@display-file/file'
-                    : item?.['@id'] + '/@@download/file',
+                '@id': show_pdf_preview
+                  ? item?.['@id'] + '/@@display-file/file'
+                  : item?.['@id'] + '/@@download/file',
               };
             }
 
@@ -85,6 +88,7 @@ const AttachmentCardTemplate = ({
                       item={!isEditMode ? itemUrl : null}
                       href={isEditMode ? '#' : null}
                       data-element={id_lighthouse}
+                      download={!show_pdf_preview}
                     >
                       {item.title || item.id}
                     </UniversalLink>

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

@@ -21,6 +21,7 @@ import {
   getCalendarDate,
   getEventRecurrenceMore,
   getComponentWithFallback,
+  contentHasImage,
 } from 'design-comuni-plone-theme/helpers';
 import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
 
@@ -31,6 +32,7 @@ import {
   ListingImage,
   ListingText,
   CardPersona,
+  RassegnaInfo,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const CardWithImageDefault = (props) => {
@@ -60,10 +62,10 @@ const CardWithImageDefault = (props) => {
     : 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 showImage = contentHasImage(
+    item,
+    index < imagesToShow || always_show_image,
+  );
   const category = getCategory(item, show_type, show_section, props);
   const topics = show_topics ? item.tassonomia_argomenti : null;
 
@@ -71,6 +73,8 @@ const CardWithImageDefault = (props) => {
     name: 'BlockExtraTags',
     dependencies: ['CardWithImageDefault', item['@type']],
   }).component;
+  const isEventAppointment =
+    item?.parent?.['@type'] === 'Event' && item?.['@type'] === 'Event';
 
   return (
     <>
@@ -102,7 +106,7 @@ const CardWithImageDefault = (props) => {
               })}
             >
               <div className="img-responsive img-responsive-panoramic">
-                <figure className="img-wrapper">{image}</figure>
+                <ListingImage item={item} />
                 {item['@type'] === 'Event' && (
                   <CardCalendar
                     start={item.start}
@@ -119,7 +123,12 @@ const CardWithImageDefault = (props) => {
                 <ListingCategory category={category} item={item} />
               </CardCategory>
             )}
-            <CardTitle tag="h3">
+            <CardTitle
+              tag="h3"
+              className={`${
+                isEventAppointment ? 'rassegna-appointment-title' : ''
+              }`}
+            >
               <UniversalLink
                 item={!isEditMode ? item : null}
                 href={isEditMode ? '#' : ''}
@@ -129,6 +138,7 @@ const CardWithImageDefault = (props) => {
                 {item.title || item.id}
               </UniversalLink>
             </CardTitle>
+            {isEventAppointment && <RassegnaInfo eventoPadre={item.parent} />}
             {listingText && (
               <CardText
                 className={cx('', {
@@ -141,7 +151,7 @@ const CardWithImageDefault = (props) => {
             <BlockExtraTags {...props} item={item} itemIndex={index} />
             {topics?.length > 0 && (
               <div
-                className={cx('', {
+                className={cx('card-with-image-additional-links', {
                   'mb-3': eventRecurrenceMore,
                 })}
               >

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

@@ -69,17 +69,13 @@ const CardWithSlideUpTextTemplate = (props) => {
             }).component;
 
             return (
-              <UniversalLink
-                item={!isEditMode ? item : null}
-                href={isEditMode ? '#' : null}
+              <div
+                className="listing-item box bg-img"
                 style={
                   image && {
                     backgroundImage: `url(${image})`,
                   }
                 }
-                className="listing-item box bg-img"
-                key={index}
-                data-element={id_lighthouse}
               >
                 <div className="bg-gradient"></div>
                 {(category || date) && (
@@ -89,14 +85,24 @@ const CardWithSlideUpTextTemplate = (props) => {
                     {date}
                   </div>
                 )}
-                <h3
-                  className={cx('title', {
-                    ellipsis: title.length > 50,
+                <UniversalLink
+                  item={!isEditMode ? item : null}
+                  href={isEditMode ? '#' : null}
+                  key={index}
+                  data-element={id_lighthouse}
+                  className={cx('title-link', {
+                    'auto-margin-link': !category && !date,
                   })}
-                  title={title.length > 50 ? title : undefined}
                 >
-                  {title.substring(0, 50)}
-                </h3>
+                  <h3
+                    className={cx('title', {
+                      ellipsis: title.length > 50,
+                    })}
+                    title={title.length > 50 ? title : undefined}
+                  >
+                    {title.substring(0, 50)}
+                  </h3>
+                </UniversalLink>
                 <div className="box-slide-up">
                   {show_description && item.description && (
                     <p>{item.description}</p>
@@ -111,7 +117,12 @@ const CardWithSlideUpTextTemplate = (props) => {
                     className="justify-content-end"
                   />
                 </div>
-              </UniversalLink>
+                <UniversalLink
+                  item={!isEditMode ? item : null}
+                  className="card-link"
+                  aria-hidden="true"
+                ></UniversalLink>
+              </div>
             );
           })}
         </div>

package/src/components/ItaliaTheme/Blocks/Listing/Commons/CardCalendar.jsx

@@ -84,7 +84,7 @@ export const CardCalendar = ({ start, end, recurrence, rrule }) => {
     } else if (recurrenceDates) {
       let dateFormat = 'DD/MM';
       if (
-        !recurrenceDates?.recurrenceStart.isSame(
+        !recurrenceDates?.recurrenceStart?.isSame(
           recurrenceDates?.recurrenceEnd,
           'year',
         )

package/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx

@@ -1,38 +1,83 @@
+import { UniversalLink } from '@plone/volto/components';
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
+const ListingImageWrapper = ({ children, item, noWrapLink }) => {
+  return noWrapLink ? (
+    children
+  ) : (
+    <UniversalLink item={item} className="img-wrapper">
+      {children}
+    </UniversalLink>
+  );
+};
+
 const ListingImage = ({
   item = {},
   loading = 'lazy',
   showDefault = false,
   className = 'listing-image',
   responsive = true,
-  showTitleAttr = true,
   sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:767px) 500px, 410px',
+  noWrapLink = false,
   ...imageProps
 }) => {
+  if (!contentHasImage(item) && !imageProps?.image_field) {
+    if (showDefault) {
+      return (
+        <ListingImageWrapper item={item} noWrapLink={noWrapLink}>
+          <img
+            src={DefaultImageSVG}
+            alt=""
+            sizes={sizes}
+            aria-hidden={true}
+            role="presentation"
+            className="listing-image responsive"
+            style={{
+              minHeight: 'unset',
+              height: '100%',
+            }}
+          />
+        </ListingImageWrapper>
+      );
+    } else return null;
+  }
   const Image = config.getComponent({ name: 'Image' }).component;
+
+  //Verifies if the item has a preview image or an header image
+  const showTitleAttr = !!(item.hasPreviewImage && item.preview_caption);
+
+  //Verifies with caption to show as alt and title text
+  const imageCaption =
+    item.hasPreviewImage && item.preview_caption ? item.preview_caption : null;
+
   let commonImageProps = {
     item,
-    'aria-hidden': true,
-    alt: imageProps.alt ?? '',
-    role: 'presentation',
+    'aria-hidden': imageProps.alt || item.title ? false : true,
+    alt: imageProps.alt ?? imageCaption ?? '',
+    role: imageProps.alt || item.title ? '' : 'presentation',
     className,
     loading,
     responsive,
     sizes,
     ...imageProps,
   };
-  if (showTitleAttr)
-    commonImageProps = { ...commonImageProps, title: item.title };
-  // photogallery needs to check for null image
-  // https://stackoverflow.com/questions/33136399/is-there-a-way-to-tell-if-reactelement-renders-null
-  const image = Image(commonImageProps);
-  if (image === null)
-    return showDefault ? <img src={DefaultImageSVG} alt="" /> : null;
-
-  return image;
+
+  // show title attribute if preview_caption or image_caption is present for the alt text
+  if (showTitleAttr) {
+    commonImageProps = {
+      ...commonImageProps,
+      title: imageCaption,
+    };
+  }
+
+  return (
+    <ListingImageWrapper item={item} noWrapLink={noWrapLink}>
+      <Image {...commonImageProps} />
+    </ListingImageWrapper>
+  );
 };
 
 export const getListingImageBackground = (item = {}, size = 'listing') => {

package/src/components/ItaliaTheme/Blocks/Listing/Commons/RassegnaInfo.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { UniversalLink } from '@plone/volto/components';
+
+const RassegnaInfo = ({ eventoPadre }) => {
+  const intl = useIntl();
+  return (
+    <div className="rassegna-info mb-3 mt-1">
+      <span className="rassegna-label">
+        {intl.formatMessage(messages.rassegna_label)}
+      </span>
+      <span className="rassegna-name">
+        <UniversalLink href={eventoPadre['@id']}>
+          {eventoPadre.title}
+        </UniversalLink>
+      </span>
+    </div>
+  );
+};
+
+const messages = defineMessages({
+  rassegna_label: {
+    id: 'rassegna_label',
+    defaultMessage: 'Rassegna:',
+  },
+});
+
+export default RassegnaInfo;