design-comuni-plone-theme 11.9.0 → 11.10.0

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

@@ -38,6 +38,23 @@ export const addCardWithImageTemplateOptions = (
 
   pos = addDefaultOptions(schema, formData, intl, pos);
 
+  pos = imageCardTemplateOptions(schema, formData, intl, pos);
+
+  return pos;
+};
+
+/*questa funzione è riutilizzabile.
+Serve per fare in modo che le opzioni relative alla visualizzazione di ogni singola card,
+si possano riutilizzare in altre variations del blocco listing, dove appunto viene riutilizzato il componente di visualizzazione dell'elemento.
+Ad esempio, è stato usato anche nella variazione 'slider' per poter mostrare gli elementi con aspetto 'Card con immagine'.*/
+export const imageCardTemplateOptions = (
+  schema,
+  formData,
+  intl,
+  position,
+  hide_fields = [], //array of string
+) => {
+  let pos = position;
   pos = templatesOptions(
     schema,
     formData,
@@ -52,7 +69,7 @@ export const addCardWithImageTemplateOptions = (
       'hide_dates',
       'show_description',
       'show_topics',
-    ],
+    ].filter((f) => hide_fields.indexOf(f) < 0),
     {
       always_show_image: {
         default: false,
@@ -72,6 +89,5 @@ export const addCardWithImageTemplateOptions = (
     },
     pos,
   );
-
   return pos;
 };

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

@@ -79,28 +79,45 @@ export const addSimpleCardTemplateOptions = (
       pos,
     );
   } else {
-    pos = templatesOptions(
+    pos = simpleCardTemplateOptions_appearance_default(
       schema,
       formData,
       intl,
-      [
-        'show_icon',
-        'hide_dates',
-        'show_section',
-        'show_type',
-        'show_description',
-        'show_detail_link',
-        'show_path_filters',
-      ],
-      {
-        hide_dates: { default: false },
-        show_icon: { default: true },
-        show_type: { default: false },
-        show_detail_link: { default: false },
-        show_path_filters: { default: false },
-      },
       pos,
     );
   }
   return pos;
 };
+
+export const simpleCardTemplateOptions_appearance_default = (
+  schema,
+  formData,
+  intl,
+  position,
+  hide_fields = [], //array of string
+) => {
+  let pos = position;
+  pos = templatesOptions(
+    schema,
+    formData,
+    intl,
+    [
+      'show_icon',
+      'hide_dates',
+      'show_section',
+      'show_type',
+      'show_description',
+      'show_detail_link',
+      'show_path_filters',
+    ].filter((f) => hide_fields.indexOf(f) < 0),
+    {
+      hide_dates: { default: false },
+      show_icon: { default: true },
+      show_type: { default: false },
+      show_detail_link: { default: false },
+      show_path_filters: { default: false },
+    },
+    pos,
+  );
+  return pos;
+};

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

@@ -1,6 +1,8 @@
 import { defineMessages } from 'react-intl';
 
 import { addSchemaField } from 'design-comuni-plone-theme/config/Blocks/ListingOptions';
+import { simpleCardTemplateOptions_appearance_default } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/simpleCardTemplate';
+import { imageCardTemplateOptions } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/cardWithImageTemplate';
 
 const messages = defineMessages({
   show_full_width: {
@@ -31,8 +33,28 @@ const messages = defineMessages({
     id: 'autoplay_speed_description',
     defaultMessage: 'La velocità di autoplay deve essere espressa in secondi.',
   },
+  appearance: {
+    id: 'Aspetto',
+    defaultMessage: 'Aspetto',
+  },
+  slider_listing_appearance_description: {
+    id: 'slider_listing_appearance_description',
+    defaultMessage:
+      "Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider.",
+  },
+  slider_listing_appearance_simplecard: {
+    id: 'slider_listing_appearance_simplecard',
+    defaultMessage: 'Card semplice',
+  },
+  slider_listing_appearance_imagecard: {
+    id: 'slider_listing_appearance_imagecard',
+    defaultMessage: 'Card con immagine',
+  },
 });
 
+export const SliderTemplateAppearance_SIMPLECARD = 'simple_card';
+export const SliderTemplateAppearance_IMAGECARD = 'image_card';
+
 export const addSliderTemplateOptions = (
   schema,
   formData,
@@ -51,16 +73,6 @@ export const addSliderTemplateOptions = (
   );
   pos++;
 
-  addSchemaField(
-    schema,
-    'show_image_title',
-    intl.formatMessage(messages.show_image_title),
-    null,
-    { type: 'boolean', default: true },
-    pos,
-  );
-  pos++;
-
   addSchemaField(
     schema,
     'show_dots',
@@ -91,7 +103,7 @@ export const addSliderTemplateOptions = (
   );
   pos++;
 
-  pos = addSchemaField(
+  addSchemaField(
     schema,
     'slidesToShow',
     intl.formatMessage(messages.slidesToShow),
@@ -99,5 +111,50 @@ export const addSliderTemplateOptions = (
     { type: 'number', default: 1 },
     pos,
   );
+  pos++;
+  //appearance options
+
+  let choices = [
+    [
+      SliderTemplateAppearance_SIMPLECARD,
+      intl.formatMessage(messages.slider_listing_appearance_simplecard),
+    ],
+    [
+      SliderTemplateAppearance_IMAGECARD,
+      intl.formatMessage(messages.slider_listing_appearance_imagecard),
+    ],
+  ];
+
+  addSchemaField(
+    schema,
+    'slide_appearance',
+    intl.formatMessage(messages.appearance),
+    intl.formatMessage(messages.slider_listing_appearance_description),
+    {
+      choices,
+    },
+    pos,
+  );
+  pos++;
+
+  if (formData.slide_appearance === SliderTemplateAppearance_SIMPLECARD) {
+    simpleCardTemplateOptions_appearance_default(schema, formData, intl, pos, [
+      'show_path_filters',
+    ]);
+    pos++;
+  } else if (formData.slide_appearance === SliderTemplateAppearance_IMAGECARD) {
+    imageCardTemplateOptions(schema, formData, intl, pos, ['set_four_columns']);
+    pos++;
+  } else {
+    addSchemaField(
+      schema,
+      'show_image_title',
+      intl.formatMessage(messages.show_image_title),
+      null,
+      { type: 'boolean', default: true },
+      pos,
+    );
+    pos++;
+  }
   return pos;
 };

package/src/config/Blocks/listingVariations.js

@@ -26,6 +26,9 @@ import PhotogalleryTemplateSkeleton from 'design-comuni-plone-theme/components/I
 
 import SliderTemplate from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/SliderTemplate';
 import SliderTemplateSkeleton from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/SliderTemplateSkeleton';
+import SlideItemDefault from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault';
+import SlideItemSimpleCard from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault';
+import SlideItemImageCard from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault';
 
 import GridGalleryTemplate from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate';
 import GridGalleryTemplateSkeleton from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/GridGalleryTemplateSkeleton';
@@ -229,6 +232,11 @@ const italiaListingVariations = [
       return schema;
     },
     cloneData: cloneBlock,
+    appearance: {
+      default: SlideItemDefault,
+      simple_card: SlideItemSimpleCard,
+      image_card: SlideItemImageCard,
+    },
   },
   {
     id: 'gridGalleryTemplate',

package/src/config/italiaConfig.js

@@ -33,6 +33,7 @@ import LeftColumnFacets from '@plone/volto/components/manage/Blocks/Search/layou
 import HandleAnchor from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/HandleAnchor';
 import GenericAppExtras from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/GenericAppExtras';
 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 { loadables as ItaliaLoadables } from 'design-comuni-plone-theme/config/loadables';
 
@@ -65,8 +66,8 @@ import { schemaListing } from 'design-comuni-plone-theme/components/ItaliaTheme/
 
 import reducers from 'design-comuni-plone-theme/reducers';
 
-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({
@@ -86,6 +87,7 @@ export default function applyConfig(voltoConfig) {
 
   config.settings = {
     ...config.settings,
+    openExternalLinkInNewTab: true,
     sentryOptions: (libraries) => ({
       ...voltoSentryOptions(libraries),
       ignoreErrors: [
@@ -216,6 +218,10 @@ export default function applyConfig(voltoConfig) {
       // arLogoutUrl: '/logout?e=1',
       // spidLogin: true, //se true, nella pagina di errore Unauthorized, mostra il pulsante per il login a Spid.
       headerslimTertiaryMenu: {
+        default: [
+          //{ title: 'Contatti', url: '/it/contatti' },
+          //{ title: 'Novità', url: '/it/novita' },
+        ],
         it: [
           //{ title: 'Contatti', url: '/it/contatti' },
           //{ title: 'Novità', url: '/it/novita' },
@@ -265,6 +271,7 @@ export default function applyConfig(voltoConfig) {
       splitMegamenuColumns: true, //se impostato a false, non spezza le colonne con intestazioni nel megamenu
       footerNavigationDepth: 2, //valori possibili: [1,2]. Se impostato ad 1 non verranno mostrati nel footer i link agli elementi contenuti nelle sezioni di primo livello.
       markSpecialLinks: true, // se impostato a false, non marca con icona i link esterni
+      markFooterLinks: false, // se impostato a true, viene aggiunta un'icona ai link del footer per renderli riconoscibili
     },
     apiExpanders: [
       ...config.settings.apiExpanders,
@@ -287,6 +294,10 @@ export default function applyConfig(voltoConfig) {
         match: '',
         component: PageLoader,
       },
+      {
+        match: '',
+        component: TrackFocus,
+      },
     ],
     maxFileUploadSize: null,
     'volto-blocks-widget': {

package/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx

@@ -5,6 +5,7 @@ CUSTOMIZATIONS:
 - 'background class' and 'block class'
 - 'background class' and 'block class' logic for search block
 - search block integration
+- pass 'block'  prop to listing variation
 */
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
@@ -37,7 +38,9 @@ const ListingBody = React.memo(
         loadingQuery,
         listingRef,
         additionalFilters,
+        block,
       } = props;
+
       let ListingBodyTemplate;
       let templateConfig;
       // Legacy support if template is present
@@ -97,6 +100,7 @@ const ListingBody = React.memo(
       // Also need to purge title from searchblock schema, it's the name of the listing template used
       const listingBodyProps =
         variation?.['@type'] !== 'search' ? data : { ...variation, title: '' };
+
       return (
         <div className="public-ui">
           {loadingQuery && (
@@ -114,6 +118,7 @@ const ListingBody = React.memo(
               <ListingBodyTemplate
                 items={listingItems}
                 isEditMode={isEditMode}
+                block={block}
                 {...listingBodyProps}
                 addFilters={addFilters}
                 additionalFilters={additionalFilters}

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

@@ -72,41 +72,32 @@ function SelectFacetFilterListEntry(props) {
     </>
   ) : (
     <>
-      {facets[facet]?.length > 0 && (
+      {((Array.isArray(facets?.[facet]) && facets?.[facet]?.length > 0) ||
+        (!Array.isArray(facets?.[facet]) && Boolean(facets?.[facet]))) && (
         <span className="label-title mb-2">
           {facetSettings.title ?? facetSettings?.field?.label}
         </span>
       )}
-      {facets[facet].map((entry, i) => {
-        const label = Array.isArray(selectedValue)
-          ? selectedValue?.find((sv) => sv.value === entry)?.label ?? ''
-          : '';
-        return (
-          <Label key={i} className="d-flex w-100 py-1">
-            <span>{label}</span>
-            <Button
-              className="p-0"
-              onClick={() => {
-                const entries = facets[facet].filter((item) => item !== entry);
-                !isEditMode &&
-                  setFacets({
-                    ...facets,
-                    [facet]: entries,
-                  });
-              }}
-              aria-label={intl.formatMessage(
-                commonSearchBlockMessages.clearFilter,
-                {
-                  filterName: label,
-                },
-              )}
-              title={intl.formatMessage(commonSearchBlockMessages.clearFilter, {
-                filterName: label,
-              })}
-            >
-              <Icon
-                icon="it-close"
-                size="md"
+      {Array.isArray(facets?.[facet]) &&
+        facets?.[facet]?.map((entry, i) => {
+          const label = Array.isArray(selectedValue)
+            ? selectedValue?.find((sv) => sv.value === entry)?.label ?? ''
+            : '';
+          return (
+            <Label key={i} className="d-flex w-100 py-1">
+              <span>{label}</span>
+              <Button
+                className="p-0"
+                onClick={() => {
+                  const entries = facets?.[facet]?.filter(
+                    (item) => item !== entry,
+                  );
+                  !isEditMode &&
+                    setFacets({
+                      ...facets,
+                      [facet]: entries,
+                    });
+                }}
                 aria-label={intl.formatMessage(
                   commonSearchBlockMessages.clearFilter,
                   {
@@ -119,11 +110,27 @@ function SelectFacetFilterListEntry(props) {
                     filterName: label,
                   },
                 )}
-              />
-            </Button>
-          </Label>
-        );
-      })}
+              >
+                <Icon
+                  icon="it-close"
+                  size="md"
+                  aria-label={intl.formatMessage(
+                    commonSearchBlockMessages.clearFilter,
+                    {
+                      filterName: label,
+                    },
+                  )}
+                  title={intl.formatMessage(
+                    commonSearchBlockMessages.clearFilter,
+                    {
+                      filterName: label,
+                    },
+                  )}
+                />
+              </Button>
+            </Label>
+          );
+        })}
     </>
   );
 }

package/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx

@@ -35,6 +35,7 @@ const UniversalLink = ({
 }) => {
   const intl = useIntl();
   const token = useSelector((state) => state.userSession?.token);
+  const { openExternalLinkInNewTab } = config.settings;
 
   let url = href;
   if (!href && item) {
@@ -85,6 +86,7 @@ const UniversalLink = ({
 
   const checkedURL = URLUtils.checkAndNormalizeUrl(url);
   url = checkedURL.url;
+
   let tag = (
     <Link
       to={flattenToAppURL(url)}
@@ -99,6 +101,11 @@ const UniversalLink = ({
   );
 
   if (isExternal) {
+    const openInNewTab =
+      openLinkInNewTab === null || openLinkInNewTab === undefined
+        ? openExternalLinkInNewTab
+        : openLinkInNewTab;
+
     tag = (
       <a
         href={url}
@@ -106,9 +113,7 @@ const UniversalLink = ({
           id: 'opensInNewTab',
         })}`}
         target={
-          !checkedURL.isMail &&
-          !checkedURL.isTelephone &&
-          !(openLinkInNewTab === false)
+          !checkedURL.isMail && !checkedURL.isTelephone && openInNewTab
             ? '_blank'
             : null
         }

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

@@ -87,8 +87,8 @@ const FileWidget = (props) => {
   const imgsrc = value?.download
     ? `${flattenToAppURL(value?.download)}?id=${Date.now()}`
     : null || value?.data
-    ? `data:${value['content-type']};${value.encoding},${value.data}`
-    : null;
+      ? `data:${value['content-type']};${value.encoding},${value.data}`
+      : null;
 
   /**
    * Drop handler

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

@@ -112,7 +112,11 @@ const Navigation = ({ pathname }) => {
           >
             <Icon
               icon="it-burger"
-              title={intl.formatMessage(messages.toggleNavigation)}
+              title={intl.formatMessage(messages.toggleMenu, {
+                action: collapseOpen
+                  ? intl.formatMessage(messages.toggleMenu_close)
+                  : intl.formatMessage(messages.toggleMenu_open),
+              })}
             />
           </HeaderToggler>
           <Collapse

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

@@ -0,0 +1,126 @@
+/*
+CUSTOMIZATIONS:
+- make it work, prop name lang was wrong, remove in volto 18
+*/
+
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { asyncConnect } from '@plone/volto/helpers';
+import { defineMessages, injectIntl } from 'react-intl';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import { Helmet, toBackendLang } from '@plone/volto/helpers';
+import { Link } from 'react-router-dom';
+import config from '@plone/volto/registry';
+
+import { getNavigation } from '@plone/volto/actions';
+
+const messages = defineMessages({
+  Sitemap: {
+    id: 'Sitemap',
+    defaultMessage: 'Sitemap',
+  },
+});
+
+export function getSitemapPath(pathname = '', lang) {
+  const prefix = pathname.replace(/\/sitemap$/gm, '').replace(/^\//, '');
+  const path = prefix || lang || '';
+  return path;
+}
+
+/**
+ * Sitemap function component.
+ * @function Sitemap
+ * @param {Object} props - Component properties.
+ * @returns {JSX.Element} - Rendered component.
+ */
+function Sitemap(props) {
+  const {
+    location: { pathname },
+    lang,
+    getNavigation,
+  } = props;
+
+  useEffect(() => {
+    const { settings } = config;
+    const language = settings.isMultilingual ? `${toBackendLang(lang)}` : null;
+    const path = getSitemapPath(pathname, language);
+    getNavigation(path, 4);
+  }, [pathname, lang, getNavigation]);
+
+  const renderItems = (items) => {
+    return (
+      <ul>
+        {items.map((item) => (
+          <li
+            key={item.url}
+            className={item.items?.length > 0 ? 'with-children' : ''}
+          >
+            <Link to={item.url}>{item.title}</Link>
+            {item.items && renderItems(item.items)}
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <div id="page-sitemap">
+      <Helmet title={props.intl.formatMessage(messages.Sitemap)} />
+      <Container className="view-wrapper">
+        <h1>{props.intl.formatMessage(messages.Sitemap)} </h1>
+        {props.items && renderItems(props.items)}
+      </Container>
+    </div>
+  );
+}
+
+Sitemap.propTypes = {
+  getNavigation: PropTypes.func.isRequired,
+  location: PropTypes.object.isRequired,
+  intl: PropTypes.object.isRequired,
+  lang: PropTypes.string.isRequired,
+  items: PropTypes.array.isRequired,
+};
+
+export const __test__ = compose(
+  injectIntl,
+  connect(
+    (state) => ({
+      items: state.navigation.items,
+      lang: state.intl.locale,
+    }),
+    { getNavigation },
+  ),
+)(Sitemap);
+
+export default compose(
+  injectIntl,
+  connect(
+    (state) => ({
+      items: state.navigation.items,
+      lang: state.intl.locale,
+    }),
+    { getNavigation },
+  ),
+  asyncConnect([
+    {
+      key: 'navigation',
+      promise: ({ location, store: { dispatch, getState } }) => {
+        if (!__SERVER__) return;
+        const { settings } = config;
+        const path = getSitemapPath(
+          location.pathname,
+          settings.isMultilingual
+            ? toBackendLang(getState().intl.locale)
+            : null,
+        );
+        return dispatch(getNavigation(path, 4));
+      },
+    },
+  ]),
+)(Sitemap);

package/src/helpers/config.js

@@ -16,7 +16,7 @@ export const getSiteProperty = (property, locale) => {
             value
           );
         } else {
-          return value.default ?? value;
+          return value.default ?? value[locale] ?? value;
         }
       default:
         break;

package/src/theme/ItaliaTheme/Blocks/_argumentsInEvidence.scss

@@ -10,10 +10,10 @@
     background-position: top center;
     background-repeat: no-repeat;
     background-size: cover;
-  }
-
-  h2 {
-    color: $primary-text !important;
+    + .volto-subblocks-wrapper .argumentsCardsWrapper h2,
+    + .argumentsCardsWrapper h2 {
+      color: $primary-text !important;
+    }
   }
 
   .grid {