design-comuni-plone-theme 11.15.0 → 11.17.0

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/HeaderSlim/HeaderSlim.jsx

@@ -13,19 +13,36 @@ import {
   HeaderRightZone,
 } from 'design-react-kit';
 import { useIntl } from 'react-intl';
-import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
+import {
+  getSiteProperty,
+  useHomePath,
+} from 'design-comuni-plone-theme/helpers';
+import { SiteProperty } from 'volto-site-settings';
 
 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);
+
+  // TODO DEPRECATED use only SiteProperty
+  const deprecatedSubsiteParentSiteTitle = getSiteProperty(
+    'subsiteParentSiteTitle',
+    intl.locale,
+  );
+
+  const subsiteParentSiteTitle =
+    deprecatedSubsiteParentSiteTitle ||
+    SiteProperty({
+      property: 'site_title',
+      defaultValue: getSiteProperty('subsiteParentSiteTitle', intl.locale),
+      getValue: true,
+      getParent: true,
+    });
 
   const target = subsite ? null : '_blank';
   return (
@@ -37,7 +54,8 @@ const HeaderSlim = () => {
           target={target}
           rel="noopener noreferrer"
         >
-          {parentSiteTile}
+          {!subsite && staticParentSiteTitle}
+          {subsite && subsiteParentSiteTitle.replaceAll('\\n', ' - ')}
         </HeaderBrand>
         <HeaderRightZone>
           <HeaderSlimRightZone />

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

@@ -8,12 +8,14 @@ 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';
 
 const ParentSiteMenu = () => {
   const dropdownMenu = useSelector(
     (state) => state.dropdownMenuNavItems?.result,
   );
   const subsite = useSelector((state) => state.subsite?.data);
+  const homepath = useHomePath();
 
   let menu = null;
   if (subsite) {
@@ -23,7 +25,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) {

package/src/components/ItaliaTheme/Logo/Logo.jsx

@@ -10,9 +10,10 @@
  * Note the icon class.
  */
 
-/* SVG example */
-// import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-// const Logo = () => <Icon color="" icon="it-pa" padding={false} size="" />;
+/* SVG example
+ import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+ const Logo = () => <Icon color="" icon="it-pa" padding={false} size="" />;
+*/
 
 /* PNG example using https://www.npmjs.com/package/webpack-image-resize-loader *
  * works, but some issues with prettier and jest
@@ -20,9 +21,16 @@
 // eslint-disable-next-line import/no-unresolved
 //import logo from './logo.png?width=164';
 import logo from './logo.png';
+import { SiteProperty } from 'volto-site-settings';
 
-const Logo = () => (
-  <img className="icon" src={logo} width="82" height="82" alt="Logo" />
-);
-
+const Logo = ({ alt = 'Logo', className }) => {
+  return (
+    <SiteProperty
+      property="site_logo"
+      defaultValue={{ url: logo, width: 82, height: 82 }}
+      className={className}
+      alt={alt}
+    />
+  );
+};
 export default Logo;

package/src/components/ItaliaTheme/LogoFooter/LogoFooter.jsx

@@ -12,9 +12,17 @@
 
 // eslint-disable-next-line import/no-unresolved
 import logo from '../Logo/logo.png';
+import { SiteProperty } from 'volto-site-settings';
 
-const LogoFooter = () => (
-  <img className="icon" src={logo} width="82" height="82" alt="Logo" />
-);
+const LogoFooter = () => {
+  return (
+    <SiteProperty
+      property="site_logo_footer"
+      defaultValue={{ url: logo, width: 82, height: 82 }}
+      className="icon"
+      alt="Logo"
+    />
+  );
+};
 
 export default LogoFooter;

package/src/components/ItaliaTheme/Slider/NextArrow.jsx

@@ -25,7 +25,7 @@ export default function NextArrow(props) {
       id={id}
     >
       <Icon icon="chevron-right" key="chevron-right" title={_title} />
-      <span class="visually-hidden">{_title}</span>
+      <span className="visually-hidden">{_title}</span>
     </button>
   );
 }

package/src/components/ItaliaTheme/Slider/PrevArrow.jsx

@@ -27,7 +27,7 @@ export default function PrevArrow(props) {
       onKeyDown={onKeyDown}
     >
       <Icon icon="chevron-left" key="chevron-left-prev" title={_title} />
-      <span class="visually-hidden">{_title}</span>
+      <span className="visually-hidden">{_title}</span>
     </button>
   );
 }

package/src/components/ItaliaTheme/View/Commons/Actions.jsx

@@ -10,7 +10,7 @@ import {
   Button,
 } from 'design-react-kit';
 import { toPublicURL } from '@plone/volto/helpers';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import Icon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon';
 
 /**
  * Actions view component class.
@@ -98,7 +98,7 @@ const Actions = (props) => {
         <LinkList>
           {socials.map((item, i) => {
             const commonButtonProps = {
-              icon: false,
+              icon: undefined,
               title: item.title,
               alt: item.title,
               'aria-label': item.title,

package/src/components/ItaliaTheme/View/Commons/Argument/ArgumentIcon.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import Icon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon';
 
 /**
  * Dates view component class.

package/src/components/ItaliaTheme/View/Commons/Attachment.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import { Card, CardBody, CardTitle } from 'design-react-kit';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import Icon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon';
 
 const messages = defineMessages({
   attachment: {

package/src/components/ItaliaTheme/View/Commons/HelpBox.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Callout, CalloutTitle } from 'design-react-kit';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import Icon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon';
 import { RichText } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 const HelpBox = ({ text }) => {

package/src/components/ItaliaTheme/View/Commons/RenderBlocks.jsx

@@ -67,9 +67,12 @@ const RenderBlocks = ({
 
         if (Block != null) {
           return (
-            <Wrapper block={blockContent[blocksFieldname]?.[block]} id={block}>
+            <Wrapper
+              block={blockContent[blocksFieldname]?.[block]}
+              id={block}
+              key={block}
+            >
               <Block
-                key={block}
                 id={block}
                 properties={content ?? data}
                 data={{

package/src/components/ItaliaTheme/View/Commons/Sharing.jsx

@@ -11,7 +11,7 @@ import {
 } from 'design-react-kit';
 
 import { toPublicURL } from '@plone/volto/helpers';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import Icon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon';
 
 /**
  * Sharing view component class.

package/src/components/ItaliaTheme/View/Commons/__tests__/Dates.test.jsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Dates from '../Dates';
 

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

@@ -5,7 +5,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
 import { defineMessages, useIntl } from 'react-intl';
 import {
   PageHeader,
@@ -24,12 +23,26 @@ import {
 import { contentFolderHasItems } from 'design-comuni-plone-theme/helpers';
 import { UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const messages = defineMessages({
   tipologia_incarico: {
     id: 'tipologia_incarico',
     defaultMessage: 'Tipo di incarico',
   },
+  data_inizio_incarico: {
+    id: 'data_inizio_incarico',
+    defaultMessage: "Data di inizio dell'incarico",
+  },
+  data_conclusione_incarico: {
+    id: 'data_conclusione_incarico',
+    defaultMessage:
+      "Ha fatto parte dell'organizzazione comunale come {incarico} fino al",
+  },
+  data_insediamento: {
+    id: 'data_insediamento',
+    defaultMessage: 'Data di insediamento',
+  },
   importi_viaggio: {
     id: 'importi_viaggio',
     defaultMessage: 'Importi di viaggio e/o servizio',
@@ -54,10 +67,6 @@ const messages = defineMessages({
     id: 'data_conclusione',
     defaultMessage: 'Data conclusione incarico',
   },
-  data_insediamento: {
-    id: 'data_insediamento',
-    defaultMessage: 'Data insediamento',
-  },
   atto_nomina: {
     id: 'atto_nomina',
     defaultMessage: 'Atto di nomina',
@@ -69,9 +78,10 @@ const messages = defineMessages({
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const IncaricoView = (props) => {
-  const { content } = props;
+const IncaricoView = ({ content, moment: momentlib }) => {
+  const moment = momentlib.default;
   const intl = useIntl();
+
   return (
     <div className="container px-4 my-4 incarico-view">
       <SkipToMainContent />
@@ -93,6 +103,38 @@ const IncaricoView = (props) => {
             <div className="font-serif">{content.tipologia_incarico.title}</div>
           </RichTextSection>
         )}
+        {content.data_inizio_incarico && (
+          <RichTextSection
+            tag_id="data_inizio_incarico"
+            title={intl.formatMessage(messages.data_inizio_incarico)}
+          >
+            <div className="font-serif">
+              {moment(content.data_inizio_incarico).format('D-MM-YYYY')}
+            </div>
+          </RichTextSection>
+        )}
+        {content.data_conclusione_incarico && (
+          <RichTextSection
+            tag_id="data_conclusione_incarico"
+            title={intl.formatMessage(messages.data_conclusione_incarico, {
+              incarico: content.title,
+            })}
+          >
+            <div className="font-serif">
+              {moment(content.data_conclusione_incarico).format('D-MM-YYYY')}
+            </div>
+          </RichTextSection>
+        )}
+        {content.data_insediamento && (
+          <RichTextSection
+            tag_id="data_insediamento"
+            title={intl.formatMessage(messages.data_insediamento)}
+          >
+            <div className="font-serif">
+              {moment(content.data_insediamento).format('D-MM-YYYY')}
+            </div>
+          </RichTextSection>
+        )}
         {richTextHasContent(content.compensi) && (
           <RichTextSection
             data={content.compensi}
@@ -196,4 +238,4 @@ IncaricoView.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(IncaricoView);
+export default injectLazyLibs(['moment'])(IncaricoView);

package/src/components/ItaliaTheme/View/PersonaView/PersonaRuolo.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { UniversalLink } from '@plone/volto/components';
 import {
@@ -85,15 +86,12 @@ const PersonaRuolo = ({ content }) => {
   return (
     <>
       {content?.incarichi_persona?.length > 0 && (
-        <>
+        <React.Fragment key={content?.incarichi_persona[0]?.id}>
           <RichTextSection
             tag_id="incarico"
             title={intl.formatMessage(messages.ruolo)}
           >
-            <div
-              className="font-serif mb-3"
-              key={content?.incarichi_persona[0]?.id}
-            >
+            <div className="font-serif mb-3">
               <p>{content?.incarichi_persona[0]?.title}</p>
               {content?.incarichi_persona[0]?.atto_di_nomina && (
                 <UniversalLink
@@ -239,7 +237,7 @@ const PersonaRuolo = ({ content }) => {
               )}
             </RichTextSection>
           )}
-        </>
+        </React.Fragment>
       )}
 
       {content.incarichi_persona?.length > 1 && (

package/src/components/ItaliaTheme/View/ServizioView/ServizioMetatag.jsx

@@ -1,4 +1,6 @@
+import { useIntl } from 'react-intl';
 import { Helmet, toPublicURL, isInternalURL } from '@plone/volto/helpers';
+import { SiteProperty } from 'volto-site-settings';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 import { richTextHasContent } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
@@ -13,7 +15,17 @@ const fieldDataToPlainText = (field) => {
 };
 
 const ServizioMetatag = ({ content }) => {
-  const siteTitle = getSiteProperty('siteTitle');
+  const intl = useIntl();
+  // TODO DEPRECATED use only SiteProperty
+  const deprecatedSiteTitle = getSiteProperty('siteTitle', intl.locale);
+  let siteTitle =
+    deprecatedSiteTitle ||
+    SiteProperty({
+      property: 'site_title',
+      getValue: true,
+      defaultTitle: getSiteProperty('siteTitle', intl.locale),
+    });
+  siteTitle = siteTitle.replaceAll('\\n', ' - ');
 
   const schemaOrg = {
     '@context': 'https://schema.org',

package/src/components/ItaliaTheme/View/__tests__/ServizioTempiScadenze.test.jsx

@@ -14,7 +14,6 @@ const mockStore = configureStore(middlewares);
 // Warning: An update to Icon inside a test was not wrapped in act(...).
 // When testing, code that causes React state updates should be wrapped into act(...):
 jest.mock('design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon');
-// loadables.push('rrule');
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>

package/src/config/italiaConfig.js

@@ -35,6 +35,8 @@ import GenericAppExtras from 'design-comuni-plone-theme/components/ItaliaTheme/A
 import PageLoader from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/PageLoader';
 import TrackFocus from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/TrackFocus';
 import redraft from 'redraft';
+
+import SiteSettingsExtras from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/SiteSettingsExtras';
 import { loadables as ItaliaLoadables } from 'design-comuni-plone-theme/config/loadables';
 
 // CTs icons
@@ -298,6 +300,10 @@ export default function applyConfig(voltoConfig) {
         match: '',
         component: TrackFocus,
       },
+      {
+        match: '',
+        component: SiteSettingsExtras,
+      },
     ],
     maxFileUploadSize: null,
     'volto-blocks-widget': {
@@ -518,6 +524,10 @@ export default function applyConfig(voltoConfig) {
     ...config.components,
     BlockExtraTags: { component: () => null },
   };
+  config.registerComponent({
+    name: 'SiteSettingsExtras',
+    component: SiteSettingsExtras,
+  });
 
   // REDUCERS
   config.addonReducers = {

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

@@ -38,10 +38,7 @@ const Navigation = ({ pathname }) => {
   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="Logo"
-      />
+      <Logo />
     </figure>
   );
 
@@ -136,7 +133,11 @@ const Navigation = ({ pathname }) => {
                     }
                     onClick={() => setCollapseOpen(false)}
                   >
-                    {subsite?.subsite_logo ? logoSubsite : <Logo />}
+                    {subsite?.subsite_logo ? (
+                      logoSubsite
+                    ) : (
+                      <Logo className="icon" />
+                    )}
                     <BrandText mobile={true} subsite={subsite} />
                   </UniversalLink>
                 </div>

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -4,7 +4,7 @@
  */
 /*
  CUSTOMIZATIONS:
- - Add <link rel="shortcut icon" href="/favicon.ico" />
+ - Rimosso <link rel="shortcut icon" href="/favicon.ico" /> perchè creato da volto-site-settings
  - Add shrink-to-fit=no in viewport meta
  - Remove link for manifest and svg/apple icons
  */
@@ -122,7 +122,7 @@ class Html extends Component {
               })};`,
             }}
           />
-          <link rel="shortcut icon" href="/favicon.ico" />
+          {/* <link rel="shortcut icon" href="/favicon.ico" /> */}
           <meta property="og:type" content="website" />
           <meta name="generator" content="Plone 6 - https://plone.org" />
           <meta

package/src/helpers/index.js

@@ -52,3 +52,4 @@ export {
 export { commonSearchBlockMessages } from 'design-comuni-plone-theme/helpers/Translations/searchBlockExtendedTranslations';
 
 export { getComponentWithFallback } from 'design-comuni-plone-theme/helpers/registry';
+export { useHomePath } from 'design-comuni-plone-theme/helpers/url';

package/src/helpers/url.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+
+import config from '@plone/volto/registry';
+
+export const useHomePath = () => {
+  const [path, setPath] = useState('/');
+
+  const { locale } = useIntl();
+
+  useEffect(() => {
+    setPath(config.settings.isMultilingual ? '/' + locale : '/');
+  }, [locale]);
+  return path;
+};

package/src/theme/_cms-ui.scss

@@ -94,6 +94,12 @@ body.cms-ui {
     }
   }
 
+  .blocks-widget-container {
+    .block.table .toolbar {
+      top: -3.34rem;
+    }
+  }
+
   .it-header-wrapper,
   .public-ui {
     font-size: 18px;