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

package/src/components/ItaliaTheme/Breadcrumbs/Breadcrumbs.jsx

@@ -12,11 +12,16 @@ import { matchPath } from 'react-router';
 import { useLocation } from 'react-router-dom';
 import { isEqual, isEmpty } from 'lodash';
 import { getBreadcrumbs } from '@plone/volto/actions';
-import { getBaseUrl, flattenToAppURL } from '@plone/volto/helpers';
+import {
+  getBaseUrl,
+  flattenToAppURL,
+  hasApiExpander,
+} from '@plone/volto/helpers';
 
 import { UniversalLink } from '@plone/volto/components';
 import { Row, Col, BreadcrumbItem } from 'design-react-kit';
 import GoogleBreadcrumbs from 'design-comuni-plone-theme/components/ItaliaTheme/Breadcrumbs/GoogleBreadcrumbs';
+import { useHomePath } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -73,13 +78,15 @@ const Breadcrumbs = ({ pathname }) => {
   /** fine della gestione delle rotte statiche */
 
   useEffect(() => {
-    let actualPathForBreadcrumbs = pathname;
-    const { path, buildFullNavTree } = getCurrentPathFromAddonRoutes();
-    if (buildFullNavTree) {
-      const replacedPath = path.replace('**/', '');
-      actualPathForBreadcrumbs = pathname.replace(replacedPath, '');
+    if (!hasApiExpander('breadcrumbs', getBaseUrl(pathname))) {
+      let actualPathForBreadcrumbs = pathname;
+      const { path, buildFullNavTree } = getCurrentPathFromAddonRoutes();
+      if (buildFullNavTree) {
+        const replacedPath = path.replace('**/', '');
+        actualPathForBreadcrumbs = pathname.replace(replacedPath, '');
+      }
+      dispatch(getBreadcrumbs(getBaseUrl(actualPathForBreadcrumbs)));
     }
-    dispatch(getBreadcrumbs(getBaseUrl(actualPathForBreadcrumbs)));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname]);
 
@@ -92,6 +99,7 @@ const Breadcrumbs = ({ pathname }) => {
       items = [];
     }
   }
+  const homepath = useHomePath();
 
   return items?.length > 0 ? (
     <>
@@ -104,7 +112,7 @@ const Breadcrumbs = ({ pathname }) => {
           >
             <ol className="breadcrumb" data-element="breadcrumb">
               <BreadcrumbItem tag="li">
-                <UniversalLink href="/">
+                <UniversalLink href={homepath}>
                   {intl.formatMessage(messages.home)}
                 </UniversalLink>
                 <span className="separator">/</span>

package/src/components/ItaliaTheme/Cards/CardCategory.jsx

@@ -38,9 +38,8 @@ const CardCategory = (props) => {
   const categoryText = !href && children && (
     <span className="text">{children}</span>
   );
-  const categoryIcon = iconName && (
-    <Icon icon={iconName} title={intl.formatMessage(messages.categoryIcon)} />
-  );
+  const iconTitle = rest.title || intl.formatMessage(messages.categoryIcon);
+  const categoryIcon = iconName && <Icon icon={iconName} title={iconTitle} />;
 
   return (
     <div className={classes} {...rest}>

package/src/components/ItaliaTheme/Cards/CardPersona.jsx

@@ -8,6 +8,7 @@ import {
   ListingCategory,
   ListingImage,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 
 export const CardPersona = ({
   item,
@@ -20,13 +21,7 @@ export const CardPersona = ({
   type,
   isEditMode,
 }) => {
-  const image = ListingImage({
-    item,
-    sizes: '130px',
-    showTitleAttr: false,
-  });
-
-  const hasImage = image !== null && showImage;
+  const hasImage = contentHasImage(item) && showImage;
 
   return (
     <Card
@@ -58,7 +53,9 @@ export const CardPersona = ({
           )}
         </CardBody>
         {hasImage && (
-          <div className="card-image card-image-rounded">{image}</div>
+          <div className="card-image card-image-rounded">
+            <ListingImage item={item} sizes="130px" />
+          </div>
         )}
       </div>
     </Card>

package/src/components/ItaliaTheme/CustomerSatisfaction/FeedbackForm.jsx

@@ -20,6 +20,8 @@ import {
   submitFeedback,
   resetSubmitFeedback,
   getFeedbackThreshold,
+  isFeedbackEnabledForRoute,
+  getStaticFeedbackRouteTitle,
 } from 'volto-feedback';
 import cx from 'classnames';
 import AnswersStep from './Steps/AnswersStep';
@@ -27,14 +29,16 @@ import CommentsStep from './Steps/CommentsStep';
 import RTRating from './Steps/Commons/Rating';
 import { PropTypes } from 'prop-types';
 
+import 'volto-feedback/components/FeedbackForm/feedback-form.css';
+
 const messages = defineMessages({
   title: {
     id: 'feedback_form_title',
     defaultMessage: 'How clear is the information on this page?',
   },
-  service_title: {
-    id: 'feedback_form_title_service',
-    defaultMessage: 'How easy was it to use this service?',
+  aria_title_feedback: {
+    id: 'feedback_form_aria_title',
+    defaultMessage: 'Feedback form',
   },
   yes: {
     id: 'feedback_form_yes',
@@ -120,7 +124,7 @@ const messages = defineMessages({
   },
 });
 
-const FeedbackForm = ({ contentType, pathname }) => {
+const FeedbackForm = ({ title, pathname }) => {
   const intl = useIntl();
   const location = useLocation();
   const path = pathname ?? location.pathname ?? '/';
@@ -234,15 +238,26 @@ const FeedbackForm = ({ contentType, pathname }) => {
   const sendFormData = () => {
     if (invalidForm) return;
     setStep(2);
+    let content =
+      isFeedbackEnabledForRoute(path) && isCmsUi(path)
+        ? getStaticFeedbackRouteTitle(path)
+        : path;
+    if (typeof content === 'object' && content.id)
+      content = intl.formatMessage(content);
     const data = {
       ...formData,
       ...(captcha && { 'g-recaptcha-response': validToken }),
       answer: getTranslatedQuestion(intl, formData.answer),
+      content,
     };
-    dispatch(submitFeedback(path, data));
+    dispatch(submitFeedback(data));
     resetFormData();
   };
 
+  if (!isFeedbackEnabledForRoute(path)) {
+    return null;
+  }
+
   let action = path?.length > 1 ? path.replace(/\//g, '') : path;
   if (action?.length > 0) {
     action = action?.replace(/-/g, '_');
@@ -250,16 +265,16 @@ const FeedbackForm = ({ contentType, pathname }) => {
     action = 'homepage';
   }
 
-  if (isCmsUi(path)) {
-    return null;
-  }
-
   return (
     <section className="bg-primary customer-satisfaction">
       <Container>
         <Row className="d-flex justify-content-center bg-primary">
           <Col className="col-12 col-lg-6">
-            <div className="feedback-form" role="form">
+            <div
+              className="feedback-form"
+              role="form"
+              aria-label={intl.formatMessage(messages.aria_title_feedback)}
+            >
               <Card
                 className="shadow card-wrapper py-4 px-4"
                 data-element="feedback"
@@ -273,18 +288,7 @@ const FeedbackForm = ({ contentType, pathname }) => {
                         className="title-medium-2-semi-bold mb-0"
                         data-element="feedback-title"
                       >
-                        {/* Il validatore a quanto pare fa il check per titolo.
-                            Il titolo da specifiche deve essere diverso per Servizi, ma loro non lo sanno
-                            https://github.com/italia/pa-website-validator/blob/main/src/storage/municipality/feedbackComponentStructure.ts#L8
-                        */}
-                        {/* {contentType === 'Servizio'
-                          ? intl.formatMessage(messages.service_title)
-                          : intl.formatMessage(messages.title)} */}
-
-                        {/* Aggiunto titolo per compatibilità modello AGID di io-cittadino */}
-                        {contentType === 'ModelloPratica'
-                          ? intl.formatMessage(messages.service_title)
-                          : intl.formatMessage(messages.title)}
+                        {title || intl.formatMessage(messages.title)}
                       </h2>
                       <div className="rating-container mb-0">
                         <RTRating
@@ -455,7 +459,7 @@ const FeedbackForm = ({ contentType, pathname }) => {
 };
 
 FeedbackForm.propTypes = {
-  contentType: PropTypes.string,
+  title: PropTypes.string,
   pathname: PropTypes.string,
 };
 

package/src/components/ItaliaTheme/CustomerSatisfaction/Steps/AnswersStep.jsx

@@ -95,6 +95,7 @@ const AnswersStep = ({
                 checked={s === selectedAnswer}
                 value={s}
                 onChange={handleAnswerChange}
+                autocomplete="off"
               />
               <Label
                 for={'positive-' + s}

package/src/components/ItaliaTheme/CustomerSatisfaction/Steps/CommentsStep.jsx

@@ -80,6 +80,7 @@ const CommentsStep = ({
               invalid={invalid}
               className="mt-1"
               data-element="feedback-input-text"
+              autoComplete="off"
             />
           </FormGroup>
         </Form>

package/src/components/ItaliaTheme/Footer/FooterInfos.jsx

@@ -20,6 +20,7 @@ import {
 
 import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import { fromHtml } from 'design-comuni-plone-theme/config/Slate/utils';
+import { useHomePath } from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
   goToPage: {
@@ -33,7 +34,7 @@ const FooterInfos = () => {
   const N_COLUMNS = 4;
   const location = useLocation();
   const dispatch = useDispatch();
-
+  const homepath = useHomePath();
   const footerConfiguration = useSelector(
     (state) => state.editableFooterColumns?.result,
   );
@@ -45,7 +46,7 @@ const FooterInfos = () => {
   //filter rootpaths
   let footerColumns = getItemsByPath(
     footerConfiguration,
-    location?.pathname?.length ? location.pathname : '/',
+    location?.pathname?.length ? location.pathname : homepath,
   );
   footerColumns.forEach((column) => {
     if (__CLIENT__) {
@@ -69,7 +70,7 @@ const FooterInfos = () => {
             widths={['xs', 'sm', 'md', 'lg', 'xl']}
             key={index}
           >
-            <h4>
+            <p className="h4">
               {column?.title && (
                 <ConditionalLink
                   condition={column.titleLink?.length > 0}
@@ -82,7 +83,7 @@ const FooterInfos = () => {
                   {column.title}
                 </ConditionalLink>
               )}
-            </h4>
+            </p>
             {column.showSocial && <FooterSocials />}
             {column.slateText ? (
               <TextBlockView data={{ value: column.slateText }} />

package/src/components/ItaliaTheme/Footer/FooterMain.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import { Container, Row, Col } from 'design-react-kit';
 
 import { UniversalLink } from '@plone/volto/components';
+import { FooterTop } from 'volto-editablefooter';
 import {
   FooterNavigation,
   FooterInfos,
@@ -14,8 +15,7 @@ import {
   BrandTextFooter,
   FooterPNRRLogo,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/';
-
-import { FooterTop } from 'volto-editablefooter';
+import { useHomePath } from 'design-comuni-plone-theme/helpers';
 
 /**
  * FooterMain component class.
@@ -24,7 +24,7 @@ import { FooterTop } from 'volto-editablefooter';
  */
 const FooterMain = () => {
   const footerTopContent = FooterTop();
-
+  const homepath = useHomePath();
   return (
     <div className="it-footer-main">
       <Container tag="div">
@@ -35,7 +35,7 @@ const FooterMain = () => {
                 {footerTopContent ?? (
                   <>
                     <FooterPNRRLogo />
-                    <UniversalLink href="/">
+                    <UniversalLink href={homepath}>
                       <LogoFooter />
                       <BrandTextFooter />
                     </UniversalLink>

package/src/components/ItaliaTheme/Footer/FooterSmall.jsx

@@ -5,15 +5,18 @@
 
 import React, { useEffect } from 'react';
 import cx from 'classnames';
-import { UniversalLink } from '@plone/volto/components';
 import { defineMessages, useIntl } from 'react-intl';
 import { Container } from 'design-react-kit';
-import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 import { useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { getSubFooter, getItemsByPath } from 'volto-subfooter';
-import { flattenToAppURL } from '@plone/volto/helpers';
 import { displayBanner } from 'volto-gdpr-privacy';
+import { UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import {
+  getSiteProperty,
+  useHomePath,
+} from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
   goToPage: {
@@ -35,7 +38,7 @@ const FooterSmall = () => {
   const intl = useIntl();
   const pathname = useLocation().pathname;
   const dispatch = useDispatch();
-
+  const homepath = useHomePath();
   const subFooter = useSelector((state) => state.subFooter?.result);
   const subFooterItems = getItemsByPath(subFooter, pathname)?.filter(
     (item) => item.visible,
@@ -54,7 +57,9 @@ const FooterSmall = () => {
           {subFooterItems?.length > 0 &&
             subFooterItems.map((item, index) => {
               let url =
-                item.href || flattenToAppURL(item.linkUrl?.[0]?.['@id']) || '/';
+                item.href ||
+                flattenToAppURL(item.linkUrl?.[0]?.['@id']) ||
+                homepath;
               return (
                 <li
                   className={cx('list-inline-item', {

package/src/components/ItaliaTheme/Header/HeaderCenter.jsx

@@ -15,6 +15,7 @@ import {
   HeaderSearch,
   BrandText,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useHomePath } from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
   logoSubsiteAlt: {
@@ -32,22 +33,20 @@ const HeaderCenter = () => {
   const subsite = useSelector((state) => state.subsite?.data);
   const logoSubsite = subsite?.subsite_logo && (
     <figure className="icon">
-      <img
-        src={flattenToAppURL(subsite.subsite_logo.scales?.mini?.download)}
-        alt={intl.formatMessage(messages.logoSubsiteAlt)}
-      />
+      <Logo alt={intl.formatMessage(messages.logoSubsiteAlt)} />
     </figure>
   );
+  const homepath = useHomePath();
 
   return (
     <Header small={false} theme="" type="center">
       <HeaderContent>
         <div className="it-brand-wrapper ps-4">
           <UniversalLink
-            href={subsite?.['@id'] ? flattenToAppURL(subsite['@id']) : '/'}
+            href={subsite?.['@id'] ? flattenToAppURL(subsite['@id']) : homepath}
             title={intl.formatMessage(messages.subsiteUniversalLink)}
           >
-            {subsite?.subsite_logo ? logoSubsite : <Logo />}
+            {subsite?.subsite_logo ? logoSubsite : <Logo className="icon" />}
             <BrandText subsite={subsite} />
           </UniversalLink>
         </div>

package/src/components/ItaliaTheme/Header/HeaderSearch/HeaderSearch.jsx

@@ -13,6 +13,10 @@ const messages = defineMessages({
     id: 'Cerca',
     defaultMessage: 'Cerca',
   },
+  searchLabel: {
+    id: 'searchLabel',
+    defaultMessage: 'Cerca nel sito',
+  },
 });
 
 const HeaderSearch = () => {
@@ -21,7 +25,11 @@ const HeaderSearch = () => {
 
   return (
     <>
-      <div className="it-search-wrapper">
+      <div
+        className="it-search-wrapper"
+        role="search"
+        aria-label={intl.formatMessage(messages.searchLabel)}
+      >
         <span className="d-none d-md-block">
           {intl.formatMessage(messages.search)}
         </span>

package/src/components/ItaliaTheme/Header/HeaderSearch/SearchModal.jsx

@@ -28,6 +28,7 @@ import {
   Input,
   Label,
   Toggle,
+  Spinner,
 } from 'design-react-kit';
 
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
@@ -165,6 +166,10 @@ const messages = defineMessages({
     id: 'currentActive',
     defaultMessage: 'attivo',
   },
+  searchLabel: {
+    id: 'searchLabel',
+    defaultMessage: 'Cerca nel sito',
+  },
 });
 
 const SearchModal = ({ closeModal, show }) => {
@@ -173,6 +178,7 @@ const SearchModal = ({ closeModal, show }) => {
   const dispatch = useDispatch();
   const location = useLocation();
 
+  const [redirectingToResults, setRedirectingToResults] = useState(false);
   const [advancedSearch, setAdvancedSearch] = useState(false);
   const [advancedTab, setAdvancedTab] = useState(null);
   const [searchableText, setSearchableText] = useState(
@@ -296,10 +302,11 @@ const SearchModal = ({ closeModal, show }) => {
     setOptions((prevOptions) => ({ ...prevOptions, [optId]: value }));
 
   const submitSearch = () => {
+    setRedirectingToResults(true);
     setAdvancedSearch(false);
-    setTimeout(() => {
-      closeModal();
-    }, 500);
+    // setTimeout(() => {
+    //   closeModal();
+    // }, 500);
   };
 
   const handleEnterSearch = (e) => {
@@ -331,6 +338,7 @@ const SearchModal = ({ closeModal, show }) => {
       id="search-modal"
       isOpen={show}
       toggle={closeModal}
+      role="alertdialog"
     >
       <ModalHeader toggle={closeModal}>
         <Container>
@@ -389,7 +397,11 @@ const SearchModal = ({ closeModal, show }) => {
             <>
               <div className="search-filters search-filters-text">
                 <div className="form-group">
-                  <div className="input-group mb-3">
+                  <div
+                    className="input-group mb-3"
+                    role="search"
+                    aria-label={intl.formatMessage(messages.searchLabel)}
+                  >
                     <input
                       id="search-text"
                       type="text"
@@ -923,6 +935,11 @@ const SearchModal = ({ closeModal, show }) => {
             </div>
           )}
         </Container>
+        {redirectingToResults && (
+          <div className="overlay loading-results">
+            <Spinner active />
+          </div>
+        )}
       </ModalBody>
     </Modal>
   );

package/src/components/ItaliaTheme/Header/HeaderSlim/HeaderSlim.jsx

@@ -12,24 +12,46 @@ import {
   HeaderContent,
   HeaderRightZone,
 } from 'design-react-kit';
-import { useIntl } from 'react-intl';
-import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
+import { defineMessages, useIntl } from 'react-intl';
+import {
+  getSiteProperty,
+  useHomePath,
+} from 'design-comuni-plone-theme/helpers';
+import { SiteProperty } from 'volto-site-settings';
+
+const messages = defineMessages({
+  utilityMenu: {
+    id: 'utilityMenu',
+    defaultMessage: 'Utility Menu',
+  },
+});
 
 const HeaderSlim = () => {
   const subsite = useSelector((state) => state.subsite?.data);
   const intl = useIntl();
-
+  const homepath = useHomePath();
   const parentSiteURL = subsite
-    ? '/'
+    ? homepath
     : getSiteProperty('parentSiteURL', intl.locale);
 
-  const parentSiteTile = subsite
-    ? getSiteProperty('subsiteParentSiteTitle', intl.locale)
-    : getSiteProperty('parentSiteTitle', intl.locale);
+  const staticParentSiteTitle = getSiteProperty('parentSiteTitle', intl.locale);
+
+  const subsiteParentSiteTitle = SiteProperty({
+    property: 'site_title',
+    defaultValue: getSiteProperty('subsiteParentSiteTitle', intl.locale),
+    getValue: true,
+    getParent: true,
+  });
 
   const target = subsite ? null : '_blank';
   return (
-    <Header small={false} theme="" type="slim" role="navigation">
+    <Header
+      small={false}
+      theme=""
+      type="slim"
+      role="navigation"
+      aria-label={intl.formatMessage(messages.utilityMenu)}
+    >
       <HeaderContent>
         <HeaderBrand
           responsive
@@ -37,7 +59,8 @@ const HeaderSlim = () => {
           target={target}
           rel="noopener noreferrer"
         >
-          {parentSiteTile}
+          {!subsite && staticParentSiteTitle}
+          {subsite && (subsiteParentSiteTitle?.replaceAll('\\n', ' - ') ?? '')}
         </HeaderBrand>
         <HeaderRightZone>
           <HeaderSlimRightZone />

package/src/components/ItaliaTheme/Header/HeaderSlim/LoginButton.jsx

@@ -9,7 +9,7 @@ import { Button } from 'design-react-kit';
 const LoginButton = ({ children, baseLoginUrl, size = 'full' }) => {
   return baseLoginUrl ? (
     <Button
-      className="btn-icon"
+      className="btn-icon login-button"
       color="primary"
       href={baseLoginUrl}
       icon={false}

package/src/components/ItaliaTheme/Header/HeaderSlim/TertiaryMenu.jsx

@@ -7,10 +7,10 @@ import React, { useEffect } from 'react';
 import cx from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { useIntl } from 'react-intl';
 import { Nav, NavItem, NavLink } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { useIntl } from 'react-intl';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 import { getSlimHeader, getItemsByPath } from 'volto-slimheader';
 
@@ -26,7 +26,7 @@ const TertiaryMenu = () => {
       return {
         url: item.href || flattenToAppURL(item.linkUrl?.[0]?.['@id']) || '/',
         title: item.title,
-        inEvidence:item.inEvidence
+        inEvidence: item.inEvidence,
       };
     });
 

package/src/components/ItaliaTheme/Header/ParentSiteMenu.jsx

@@ -8,12 +8,23 @@ import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Nav, NavItem, NavLink } from 'design-react-kit';
+import { useHomePath } from 'design-comuni-plone-theme/helpers';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  parent_site_menu: {
+    id: 'parent_site_menu',
+    defaultMessage: 'Main site menu',
+  },
+});
 
 const ParentSiteMenu = () => {
+  const intl = useIntl();
   const dropdownMenu = useSelector(
     (state) => state.dropdownMenuNavItems?.result,
   );
   const subsite = useSelector((state) => state.subsite?.data);
+  const homepath = useHomePath();
 
   let menu = null;
   if (subsite) {
@@ -23,7 +34,7 @@ const ParentSiteMenu = () => {
     let i = url_split.length - 1;
     while (i > 0) {
       let s = url_split.slice(0, i).join('/');
-      s = s.length === 0 ? '/' : s;
+      s = s.length === 0 ? homepath : s;
       // eslint-disable-next-line no-loop-func
       dropdownMenu.forEach((m) => {
         if (m.rootPath === s) {
@@ -37,7 +48,11 @@ const ParentSiteMenu = () => {
   }
 
   return subsite && menu ? (
-    <Nav vertical={false} className="parent-site-menu">
+    <Nav
+      vertical={false}
+      className="parent-site-menu"
+      aria-label={intl.formatMessage(messages.parent_site_menu)}
+    >
       {menu.items.map((navitem, id) => (
         <NavItem tag="li" key={id}>
           <NavLink