design-comuni-plone-theme 11.26.5 → 11.28.0

package/src/components/ItaliaTheme/View/VenueView/VenueView.jsx

@@ -25,6 +25,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  venueContent: {
+    id: 'venueContent',
+    defaultMessage: 'Informazioni sulla struttura',
+  },
+});
+
 export const VenueViewSectionsOrder = [
   {
     /* HEADER IMAGE */
@@ -56,23 +69,18 @@ export const VenueViewSectionsOrder = [
  */
 const VenueView = ({ content }) => {
   const documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
-  useEffect(() => {
-    if (
-      content.nome_alternativo &&
-      !content.title?.includes(content.nome_alternativo)
-    ) {
-      content.subtitle = content.nome_alternativo;
-    }
-  });
-
   return (
     <>
       <div className="container px-4 my-4 luogo-view">
         <SkipToMainContent />
         <PageHeader
-          content={content}
+          content={{
+            ...content,
+            subtitle: content.nome_alternativo,
+          }}
           readingtime={null}
           showreadingtime={false}
           showdates={false}
@@ -82,7 +90,10 @@ const VenueView = ({ content }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
             )}
@@ -91,6 +102,8 @@ const VenueView = ({ content }) => {
             className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.venueContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/SelectInput/SelectInput.jsx

@@ -326,6 +326,7 @@ const SelectInput = ({
   const Select = reactSelect.default;
   return (
     <div className="bootstrap-select-wrapper">
+      {label && <label htmlFor={!labelledby ? id : undefined}>{label}</label>}
       <Select
         components={{
           MenuList,
@@ -347,7 +348,7 @@ const SelectInput = ({
         isMulti={isMulti}
         isClearable={isClearable}
         aria-label={labelDefined}
-        aria-labelledby={labelledby}
+        aria-labelledby={!label ? labelledby : undefined}
         aria-live="polite"
         ariaLiveMessages={getSelectAriaLiveMessages(intl)}
         noOptionsMessage={() =>

package/src/components/TextInput.jsx

@@ -17,6 +17,7 @@ export default function TextInput(props) {
     groupClassName,
     ...otherProps
   } = props;
+
   const [isFocused, setIsFocused] = useState(false);
 
   const toggleFocusLabel = () => {

package/src/config/Blocks/ListingOptions/cardWithSlideUpTextTemplate.js

@@ -13,12 +13,7 @@ export const addCardWithSlideUpTextTemplateOptions = (
 ) => {
   let pos = position;
 
-  // hidden to avoid use of lighthouse on this block
-  // which creates problems with asseverazione
-  // 1. clients instructed not to use this variation when data-element is needed
-  // 2. planned intervention to change structure of variation to allow use of
-  //    data element without wrapping entire card in link
-  // pos = addLighthouseField(schema, intl, pos);
+  pos = addLighthouseField(schema, intl, pos);
 
   pos = addDefaultOptions(schema, formData, intl, pos);
 

package/src/config/italiaConfig.js

@@ -72,8 +72,8 @@ import {
   FALLBACK_IMAGE_SRC_MAX_W,
 } from 'design-comuni-plone-theme/helpers/images';
 
-const ReleaseLog = loadable(() =>
-  import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
+const ReleaseLog = loadable(
+  () => import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
 );
 
 const messages = defineMessages({
@@ -81,6 +81,14 @@ const messages = defineMessages({
     id: 'search_brdc',
     defaultMessage: 'Ricerca',
   },
+  auth_ft: {
+    id: 'auth_ft',
+    defaultMessage: 'Login/Logout',
+  },
+  sitemap_ft: {
+    id: 'sitemap_ft',
+    defaultMessage: 'Sitemap',
+  },
 });
 
 export default function applyConfig(voltoConfig) {
@@ -284,6 +292,7 @@ export default function applyConfig(voltoConfig) {
       },
       enableFeedbackForm: true,
       noFeedbackFormFor: ['ModelloPratica'],
+      enableNoFeedbackFormFor: false,
       enableFeedbackFormCaptcha: false,
       enableVoltoFormBlockCaptcha: true,
       splitMegamenuColumns: true, //se impostato a false, non spezza le colonne con intestazioni nel megamenu
@@ -360,6 +369,18 @@ export default function applyConfig(voltoConfig) {
           pane: CommentsStep,
         },
       ],
+      // Enable Feedback component in your CMS/Non content routes
+      feedbackEnabledNonContentRoutes: [
+        ...(config.settings['volto-feedback']
+          ?.feedbackEnabledNonContentRoutes ?? []),
+        {
+          path: '/login',
+          feedbackTitle: messages.auth_ft,
+        },
+        // { path: '/logout', feedbackTitle: messages.auth_ft },
+        { path: '/sitemap', feedbackTitle: messages.sitemap_ft },
+        { path: '/search', feedbackTitle: messages.search_brdc },
+      ],
     },
     videoAllowExternalsDefault: false,
     showTrasparenzaFields: false,

package/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx

@@ -7,7 +7,7 @@
     the way to handle search sort. If searchableText is setted, discard default sorting and uses plone's ranking only if is configured from sidebar. (Changed applyDefaults fn passing usePloneRanking)
 */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import ListingBody from '@plone/volto/components/manage/Blocks/Listing/ListingBody';
 import { withBlockExtensions } from '@plone/volto/helpers';
@@ -21,6 +21,7 @@ import cx from 'classnames';
 import { isEqual, isFunction } from 'lodash';
 import { useSelector } from 'react-redux';
 import { compose } from 'redux';
+import { useEffect } from 'react';
 
 const getListingBodyVariation = (data) => {
   const { variations } = config.blocks.blocksConfig.listing;
@@ -109,9 +110,26 @@ const SearchBlockView = (props) => {
   }, [dataListingBodyVariation, mode]);
 
   const root = useSelector((state) => state.breadcrumbs.root);
+  const [defaultListingBodyData] = React.useState(
+    applyDefaults(searchData, root, data.usePloneRanking),
+  );
   const listingBodyData = applyDefaults(searchData, root, data.usePloneRanking);
+
   const { variations } = config.blocks.blocksConfig.listing;
   const listingBodyVariation = variations.find(({ id }) => id === selectedView);
+
+  const query = listingBodyData.query;
+  const resultsRef = React.forwardRef(null);
+
+  useEffect(() => {
+    if (
+      JSON.stringify(defaultListingBodyData.query) !== JSON.stringify(query)
+    ) {
+      //fai lo scroll solo quando vengono modificati i filtri dall'utente. Evita lo scroll al primo load
+      resultsRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [query]);
+
   if (!Layout) return null;
   return (
     <div className={cx('block search', { 'public-ui': mode === 'edit' })}>
@@ -120,6 +138,7 @@ const SearchBlockView = (props) => {
         isEditMode={mode === 'edit'}
         selectedView={selectedView}
         setSelectedView={setSelectedView}
+        resultsRef={resultsRef}
       >
         {/* Add class .block.listing to benefit from existing listing template styles */}
         <div className="block listing search-results">

package/src/customizations/volto/components/manage/Blocks/Search/layout/LeftColumnFacets.jsx

@@ -1,5 +1,6 @@
 /* CUSTOMIZATIONS:
   - Agid styling
+  - added resultsRef
 */
 import React from 'react';
 import {
@@ -33,6 +34,7 @@ const LeftColumnFacets = (props) => {
     isEditMode,
     querystring = {},
     searchData,
+    resultsRef,
     // mode = 'view',
     // variation,
   } = props;
@@ -117,24 +119,26 @@ const LeftColumnFacets = (props) => {
               </div>
             )}
 
-            <div className="search-results-count-sort d-flex align-center flex-wrap">
-              <SearchDetails
-                text={searchedText}
-                total={totalItems}
-                data={data}
-              />
-              <FilterList
-                {...props}
-                isEditMode={isEditMode}
-                setFacets={(f) => {
-                  flushSync(() => {
-                    setFacets(f);
-                    onTriggerSearch(searchedText || '', f);
-                  });
-                }}
-              />
+            <div ref={resultsRef} className="results-wrapper">
+              <div className="search-results-count-sort d-flex align-center flex-wrap">
+                <SearchDetails
+                  text={searchedText}
+                  total={totalItems}
+                  data={data}
+                />
+                <FilterList
+                  {...props}
+                  isEditMode={isEditMode}
+                  setFacets={(f) => {
+                    flushSync(() => {
+                      setFacets(f);
+                      onTriggerSearch(searchedText || '', f);
+                    });
+                  }}
+                />
+              </div>
+              {children}
             </div>
-            {children}
           </div>
         </Row>
       </Container>

package/src/customizations/volto/components/manage/Blocks/Search/layout/RightColumnFacets.jsx

@@ -1,5 +1,6 @@
 /* CUSTOMIZATIONS:
   - Agid styling
+  - added resultsRef
 */
 import React from 'react';
 import {
@@ -35,6 +36,7 @@ const RightColumnFacets = (props) => {
     isEditMode,
     querystring = {},
     searchData,
+    resultsRef,
     // mode = 'view',
     // variation,
   } = props;
@@ -72,24 +74,26 @@ const RightColumnFacets = (props) => {
               </div>
             )}
 
-            <div className="search-results-count-sort d-flex align-center flex-wrap">
-              <SearchDetails
-                text={searchedText}
-                total={totalItems}
-                data={data}
-              />
-              <FilterList
-                {...props}
-                isEditMode={isEditMode}
-                setFacets={(f) => {
-                  flushSync(() => {
-                    setFacets(f);
-                    onTriggerSearch(searchedText || '', f);
-                  });
-                }}
-              />
+            <div ref={resultsRef} className="results-wrapper">
+              <div className="search-results-count-sort d-flex align-center flex-wrap">
+                <SearchDetails
+                  text={searchedText}
+                  total={totalItems}
+                  data={data}
+                />
+                <FilterList
+                  {...props}
+                  isEditMode={isEditMode}
+                  setFacets={(f) => {
+                    flushSync(() => {
+                      setFacets(f);
+                      onTriggerSearch(searchedText || '', f);
+                    });
+                  }}
+                />
+              </div>
+              {children}
             </div>
-            {children}
           </div>
 
           {showColumn && (

package/src/customizations/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx

@@ -409,8 +409,8 @@ class RecurrenceWidget extends Component {
                 formValues['freq'] = FREQUENCES.MONDAYFRIDAY;
               } else
                 formValues[option] = value.map((d) => {
-                      return this.getWeekday(d);
-                    });
+                  return this.getWeekday(d);
+                });
             }
             break;
           case 'bymonthday':
@@ -441,8 +441,11 @@ class RecurrenceWidget extends Component {
               if (freq === FREQUENCES.YEARLY) {
                 formValues['yearly'] = 'byday';
               }
+              const weekday = this.getWeekday(value[0][0]);
+              weekday.n = value[0][1];
               formValues['weekdayOfTheMonth'] = value[0][0];
               formValues['weekdayOfTheMonthIndex'] = value[0][1];
+              formValues['byweekday'] = weekday;
             }
             break;
           case 'bymonth':

package/src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -25,15 +25,22 @@ const Footer = () => {
   useGoogleAnalytics();
   const currentContent = useSelector((state) => state.content?.data);
   const contentType = currentContent ? currentContent['@type'] : null;
-  const noFeedbackFormFor = config.settings.siteProperties.noFeedbackFormFor || [];
+  const noFeedbackFormFor =
+    config.settings.siteProperties.noFeedbackFormFor || [];
+  const showFeedbackForm = config.settings.siteProperties
+    .enableNoFeedbackFormFor
+    ? contentType &&
+      !noFeedbackFormFor.includes(contentType) &&
+      config.settings.siteProperties.enableFeedbackForm
+    : true;
 
   return (
     <>
-      {contentType &&
-        !noFeedbackFormFor.includes(contentType) &&
-        config.settings.siteProperties.enableFeedbackForm && (
+      {showFeedbackForm && (
+        <div className="public-ui" id="customer-satisfaction-form">
           <FeedbackForm />
-        )}
+        </div>
+      )}
 
       <SubsiteFooter />
       <footer className="it-footer" id="footer">

package/src/customizations/volto/components/theme/Navigation/Navigation.jsx

@@ -93,7 +93,12 @@ const Navigation = ({ pathname }) => {
   return (
     <Header theme="" type="navbar">
       {menu?.length > 0 ? (
-        <HeaderContent expand="lg" megamenu id="navigation">
+        <HeaderContent
+          expand="lg"
+          megamenu
+          id="navigation"
+          aria-label={intl.formatMessage(messages.mainMenu)}
+        >
           <HeaderToggler
             aria-controls="it-navigation-collapse"
             aria-expanded={collapseOpen}
@@ -142,7 +147,12 @@ const Navigation = ({ pathname }) => {
                   </UniversalLink>
                 </div>
                 {/* Main Menu */}
-                <Nav data-element="main-navigation" navbar role="menubar">
+                <Nav
+                  data-element="main-navigation"
+                  navbar
+                  role="menubar"
+                  aria-label={intl.formatMessage(messages.mainMenu)}
+                >
                   {menu
                     ?.filter((item) => item.visible)
                     ?.map((item, index) => (
@@ -206,6 +216,10 @@ const messages = defineMessages({
     id: 'toggleMenu_close',
     defaultMessage: 'Chiudi',
   },
+  mainMenu: {
+    id: 'mainMenu',
+    defaultMessage: 'Menu principale',
+  },
 });
 
 Navigation.propTypes = {

package/src/customizations/volto/helpers/FormValidation/FormValidation.js

@@ -100,11 +100,14 @@ const widgetValidation = {
   url: {
     isValidURL: (urlValue, urlObj, intlFunc) => {
       var urlRegex = new RegExp(
-        '^(https?:\\/\\/)?' + // validate protocol
-          '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // validate domain name
-          '((\\d{1,3}\\.){3}\\d{1,3}))|' + // validate OR ip (v4) address
-          '(localhost)' + // validate OR localhost address
-          '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // validate port and path
+        '^(https?:\\/\\/)?' + // optional protocol
+          '(' +
+          '([a-z\\d]+(-[a-z\\d]+)*\\.)+[a-z]{2,}|' + // validate domain name
+          '(\\d{1,3}\\.){3}\\d{1,3}|' + // OR ip (v4) address
+          'localhost' + // OR localhost
+          ')' +
+          '(\\:\\d+)?' + // optional port
+          '(\\/[-a-z\\d%_.~+]*)*' + // path
           '(\\?[;&a-z\\d%_.~+=-]*)?' + // validate query string
           '(\\#[-a-z\\d_]*)?$', // validate fragment locator
         'i',

package/src/customizations/volto-form-block/components/Field.jsx

@@ -64,6 +64,7 @@ const Field = ({
   errorMessage,
   id,
   reactSelect,
+  autocomplete,
 }) => {
   const intl = useIntl();
   const Select = reactSelect.default;
@@ -102,6 +103,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? ''}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'textarea' && (
@@ -120,6 +122,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? undefined}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'select' && (
@@ -151,6 +154,7 @@ const Field = ({
               classNamePrefix="react-select"
               className={isInvalid() ? 'is-invalid' : ''}
               value={value ? [{ value: value, label: value }] : []}
+              autoComplete={autocomplete}
             />
             {description && <small className="form-text">{description}</small>}
             {errorMessage && (
@@ -286,6 +290,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? ''}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'attachment' && (
@@ -320,6 +325,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? ''}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'static_text' &&
@@ -382,6 +388,7 @@ Field.propTypes = {
   value: PropTypes.any,
   formHasErrors: PropTypes.bool,
   onChange: PropTypes.func,
+  autoComplete: PropTypes.string,
 };
 
 export default injectLazyLibs('reactSelect')(Field);