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

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">

package/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Block.jsx

@@ -65,7 +65,7 @@ const Block = (props) => {
             data={data}
             block={block}
             fieldName="image_card_title"
-            selected={selectedField === 'image_card_title'}
+            selected={selected && selectedField === 'image_card_title'}
             onChangeBlock={(block, data) => onChange(data)}
             placeholder={intl.formatMessage(messages.image_card_title)}
             setSelected={setSelectedField}
@@ -123,7 +123,9 @@ const Block = (props) => {
                       data={data}
                       fieldName="image_card_content"
                       block={block}
-                      selected={selectedField === 'image_card_content'}
+                      selected={
+                        selected && selectedField === 'image_card_content'
+                      }
                       onChangeBlock={(block, data) => onChange(data)}
                       placeholder={intl.formatMessage(
                         messages.image_card_content,

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx

@@ -62,7 +62,7 @@ const Edit = (props) => {
                   data={data}
                   block={block}
                   fieldName="simple_card_title"
-                  selected={selectedField === 'simple_card_title'}
+                  selected={selected && selectedField === 'simple_card_title'}
                   onChangeBlock={onChangeBlock}
                   onSelectBlock={onSelectBlock}
                   placeholder={intl.formatMessage(messages.simple_card_title)}
@@ -79,7 +79,7 @@ const Edit = (props) => {
                   showToolbar={true}
                   data={data}
                   fieldName="simple_card_content"
-                  selected={selectedField === 'simple_card_content'}
+                  selected={selected && selectedField === 'simple_card_content'}
                   setSelected={setSelectedField}
                   block={block}
                   onChangeBlock={onChangeBlock}

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

@@ -88,7 +88,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
       getQueryStringResults(
         subsite ? flattenToAppURL(subsite['@id']) : '',
         {
-          fullobjects: 1,
+          metadata_fields: '_all',
           query: query,
           b_size: b_size,
         },
@@ -198,6 +198,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>
@@ -210,7 +211,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/UOSearch/Sidebar.jsx

@@ -6,6 +6,7 @@ import {
   SelectWidget,
   Icon,
   ObjectBrowserWidget,
+  CheckboxWidget,
 } from '@plone/volto/components';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
@@ -72,6 +73,10 @@ const messages = defineMessages({
     id: 'searchBlock_date_filter',
     defaultMessage: 'Filtro per date',
   },
+  always_show_image: {
+    id: 'searchBlock_always_show_image',
+    defaultMessage: "Mostra l'immagine per tutti gli elementi",
+  },
 });
 
 const Sidebar = (props) => {
@@ -153,6 +158,17 @@ const Sidebar = (props) => {
               });
             }}
           />
+          <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,
+                [id]: value,
+              });
+            }}
+          />
         </div>
       </Segment>
       <Accordion fluid styled className="form">

package/src/components/ItaliaTheme/Blocks/__tests__/Accordion.test.jsx

@@ -51,7 +51,4 @@ test('View renders all fields', async () => {
 
   expect(screen.getByText(/Accordion 1/i)).toBeInTheDocument();
   expect(screen.getByText(/Is this just fantasy/i)).toBeInTheDocument();
-  expect(
-    screen.getByRole('link', { name: /Caught in a landside/i }),
-  ).toBeInTheDocument();
 });

package/src/components/ItaliaTheme/BrandText/BrandText.jsx

@@ -1,18 +1,42 @@
 import React from 'react';
 import cx from 'classnames';
 import { useIntl } from 'react-intl';
+import { SiteProperty } from 'volto-site-settings';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 
-const BrandText = ({ mobile = false, subsite }) => {
+const BrandText = ({ mobile = false }) => {
   const intl = useIntl();
+  let title = SiteProperty({
+    property: 'site_title',
+    defaultValue: getSiteProperty('siteTitle', intl.locale),
+    getValue: true,
+    getParent: false,
+  });
+
+  const description = SiteProperty({
+    property: 'site_subtitle',
+    defaultValue: getSiteProperty('siteSubtitle', intl.locale),
+    getValue: true,
+    getParent: false,
+  });
+  const titleSplit = title?.split('\n') ?? null;
+  title = titleSplit?.map((t, i) => (
+    <React.Fragment key={i}>
+      {t}
+      {i < titleSplit.length - 1 && <br />}
+    </React.Fragment>
+  ));
+
   return (
     <div className="it-brand-text">
-      <p className="no_toc h2">
-        {subsite?.title || getSiteProperty('siteTitle', intl.locale)}
-      </p>
-      <p className={cx('no_toc h3', { 'd-none d-md-block': !mobile })}>
-        {subsite?.description || getSiteProperty('siteSubtitle', intl.locale)}
-      </p>
+      {title && <div className="it-brand-title">{title}</div>}
+      {description && (
+        <div
+          className={cx('it-brand-tagline', { 'd-none d-md-block': !mobile })}
+        >
+          {description}
+        </div>
+      )}
     </div>
   );
 };

package/src/components/ItaliaTheme/BrandTextFooter/BrandTextFooter.jsx

@@ -1,8 +1,37 @@
 import React from 'react';
-import { BrandText } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useIntl } from 'react-intl';
+import { SiteProperty } from 'volto-site-settings';
+import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 
 const BrandTextFooter = () => {
-  return <BrandText />;
+  const intl = useIntl();
+  let title = SiteProperty({
+    property: 'site_title',
+    defaultValue: getSiteProperty('siteTitle', intl.locale),
+    getValue: true,
+    getParent: true,
+  });
+
+  const description = SiteProperty({
+    property: 'site_subtitle',
+    defaultValue: getSiteProperty('siteSubtitle', intl.locale),
+    getValue: true,
+    getParent: true,
+  });
+  const titleSplit = title?.split('\n') ?? null;
+  title = titleSplit?.map((t, i) => (
+    <React.Fragment key={i}>
+      {t}
+      {i < titleSplit.length - 1 && <br />}
+    </React.Fragment>
+  ));
+
+  return (
+    <div className="it-brand-text">
+      {title && <div className="h2">{title}</div>}
+      {description && <div className="h3">{description}</div>}
+    </div>
+  );
 };
 
 export default BrandTextFooter;