design-comuni-plone-theme 11.29.2 → 12.0.0

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import Block from '../TextCard/SimpleCard/Block';
+import View from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/TextCard/SimpleCard/View';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -12,34 +12,18 @@ const mockStore = configureStore(middlewares);
 
 const mock_fields = {
   '@type': 'testo_riquadro_semplice',
-  simple_card_content: {
-    blocks: [
-      {
-        data: {},
-        depth: 0,
-        entityRanges: [],
-        inlineStyleRanges: [],
-        key: 'a898u',
-        text: 'Is this just fantasy?',
-        type: 'unstyled',
-      },
-    ],
-    entityMap: {},
-  },
-  simple_card_title: {
-    blocks: [
-      {
-        data: {},
-        depth: 0,
-        entityRanges: [],
-        inlineStyleRanges: [],
-        key: '23dhi',
-        text: 'Is this the real life?',
-        type: 'unstyled',
-      },
-    ],
-    entityMap: {},
-  },
+  simple_card_content: [
+    {
+      children: [
+        {
+          text: 'Is this just fantasy?',
+        },
+      ],
+      type: 'p',
+    },
+  ],
+
+  simple_card_title: 'Is this the real life?',
 };
 
 const store = mockStore({
@@ -53,7 +37,7 @@ test('View renders all fields', async () => {
   render(
     <Provider store={store}>
       <MemoryRouter>
-        <Block data={mock_fields} block={{ id: '1234' }} />
+        <View data={mock_fields} block={{ id: '1234' }} />
       </MemoryRouter>
     </Provider>,
   );

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

@@ -4,28 +4,20 @@ import { useIntl } from 'react-intl';
 import { SiteProperty } from 'volto-site-settings';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 
-const BrandText = ({ mobile = false, subsite, getParent = false }) => {
+const BrandText = ({ mobile = false }) => {
   const intl = useIntl();
-  // TODO DEPRECATED: remove and only use SiteProperty
-  const deprecatedSiteTitle =
-    subsite?.title || getSiteProperty('siteTitle', intl.locale);
   let title = SiteProperty({
     property: 'site_title',
-    forceValue: deprecatedSiteTitle,
     defaultValue: getSiteProperty('siteTitle', intl.locale),
     getValue: true,
-    getParent: getParent,
+    getParent: false,
   });
 
-  // TODO DEPRECATED: remove and only use SiteProperty
-  const deprecatedSiteSubtitle =
-    subsite?.description || getSiteProperty('siteSubtitle', intl.locale);
   const description = SiteProperty({
     property: 'site_subtitle',
-    forceValue: deprecatedSiteSubtitle,
     defaultValue: getSiteProperty('siteSubtitle', intl.locale),
     getValue: true,
-    getParent: getParent,
+    getParent: false,
   });
   const titleSplit = title?.split('\n') ?? null;
   title = titleSplit?.map((t, i) => (
@@ -37,11 +29,13 @@ const BrandText = ({ mobile = false, subsite, getParent = false }) => {
 
   return (
     <div className="it-brand-text">
-      {title && <p className="no_toc h2">{title}</p>}
+      {title && <div className="it-brand-title">{title}</div>}
       {description && (
-        <p className={cx('no_toc h3', { 'd-none d-md-block': !mobile })}>
+        <div
+          className={cx('it-brand-tagline', { 'd-none d-md-block': !mobile })}
+        >
           {description}
-        </p>
+        </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 getParent={true} />;
+  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;

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

@@ -4,6 +4,7 @@
  */
 
 import React, { useEffect } from 'react';
+
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
@@ -17,6 +18,8 @@ import {
   FooterSocials,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
+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({
@@ -41,10 +44,15 @@ const FooterInfos = () => {
   }, [dispatch, location]);
 
   //filter rootpaths
-  const footerColumns = getItemsByPath(
+  let footerColumns = getItemsByPath(
     footerConfiguration,
     location?.pathname?.length ? location.pathname : homepath,
   );
+  footerColumns.forEach((column) => {
+    if (__CLIENT__) {
+      column.slateText = fromHtml(column.text);
+    }
+  });
 
   const colWidth =
     12 / (footerColumns.length < N_COLUMNS ? footerColumns.length : N_COLUMNS);
@@ -77,13 +85,18 @@ const FooterInfos = () => {
               )}
             </p>
             {column.showSocial && <FooterSocials />}
-
-            <div
-              dangerouslySetInnerHTML={{
-                __html: flattenHTMLToAppURL(column.text.data),
-              }}
-            />
-
+            {column.slateText ? (
+              <TextBlockView data={{ value: column.slateText }} />
+            ) : (
+              column.text && (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: flattenHTMLToAppURL(column.text.data),
+                  }}
+                />
+              )
+            )}
+            {/* <TextBlockView id={index} data={{ value: data.text }} /> */}
             {column.newsletterSubscribe && <FooterNewsletterSubscribe />}
           </Col>
         ))}

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

@@ -60,15 +60,15 @@ const FooterNavigation = () => {
                     title: item.title,
                   }}
                 />
-                <Link
-                  to={item.url}
+                <UniversalLink
+                  href={item.url}
                   title={
                     intl.formatMessage(messages.goToPage) + ': ' + item.title
                   }
                   className={markFooterLinks ? 'underlined' : ''}
                 >
                   {item.title}
-                </Link>
+                </UniversalLink>
               </h4>
               {/* DEPRECATED: isFooterCollapsed to be removed in version 12 */}
               {!config.settings.isFooterCollapsed &&

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

@@ -36,15 +36,8 @@ const HeaderSlim = () => {
 
   const staticParentSiteTitle = getSiteProperty('parentSiteTitle', intl.locale);
 
-  // TODO DEPRECATED use only SiteProperty
-  const deprecatedSubsiteParentSiteTitle = getSiteProperty(
-    'subsiteParentSiteTitle',
-    intl.locale,
-  );
-
   const subsiteParentSiteTitle = SiteProperty({
     property: 'site_title',
-    forceValue: deprecatedSubsiteParentSiteTitle,
     defaultValue: getSiteProperty('subsiteParentSiteTitle', intl.locale),
     getValue: true,
     getParent: true,

package/src/components/ItaliaTheme/Icons/Icon.jsx

@@ -12,7 +12,6 @@ import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaThem
 
 const Icon = (props) => {
   const { icon, className, color, size, padding, ...rest } = props;
-
   if (icon) {
     const classes = classNames(
       'icon',

package/src/components/ItaliaTheme/MegaMenu/MegaMenu.jsx

@@ -137,7 +137,6 @@ const MegaMenu = ({ item, pathname }) => {
   } else {
     //megamenu
     let hasBlocks = hasBlocksData(item);
-
     if (item?.blocks && Object.keys(item.blocks).length === 1) {
       let b = item.blocks[Object.keys(item.blocks)[0]];
 
@@ -156,6 +155,11 @@ const MegaMenu = ({ item, pathname }) => {
           }
         }
       }
+      if (b['@type'] === 'slate') {
+        if (b.plaintext?.length === 0) {
+          hasBlocks = false;
+        }
+      }
     }
 
     const childrenGroups = [];

package/src/components/ItaliaTheme/View/BandoView/BandoApprofondimenti.jsx

@@ -30,9 +30,8 @@ const BandoApprofondimenti = ({ content }) => {
           title={item.title}
           description={item.description}
           download_url={item.url}
-          item={item}
+          item={item} //viene utilizzato nelle customizzazioni per ottenere altre proprietà
         />
-        // item={item} viene utilizzato nelle customizzazioni per ottenere altre proprietà
       );
     } else if (item.type === 'Collegamento') {
       return (

package/src/components/ItaliaTheme/View/CartellaModulisticaView/DocRow.jsx

@@ -27,9 +27,15 @@ const Downloads = ({ item, titleDoc }) => {
         titleDoc !== item.title && <div className="title">{item.title}</div>
       )}
       <div className="downloads">
-        <DownloadFileFormat file={item?.file_principale} />
-        <DownloadFileFormat file={item?.formato_alternativo_1} />
-        <DownloadFileFormat file={item?.formato_alternativo_2} />
+        <DownloadFileFormat file={item?.file_principale} title={item.title} />
+        <DownloadFileFormat
+          file={item?.formato_alternativo_1}
+          title={item.title}
+        />
+        <DownloadFileFormat
+          file={item?.formato_alternativo_2}
+          title={item.title}
+        />
       </div>
     </React.Fragment>
   ) : (
@@ -37,6 +43,7 @@ const Downloads = ({ item, titleDoc }) => {
       href={item.remoteUrl || flattenToAppURL(item['@id'])}
       title={item.title}
       className="modulistica-link"
+      item={item}
     >
       <div className="title">{item.title}</div>
       <FontAwesomeIcon
@@ -51,7 +58,6 @@ const Downloads = ({ item, titleDoc }) => {
 
 const DocRow = ({ doc }) => {
   const [itemOpen, setItemOpen] = useState(false);
-
   const titleWrapper = (
     <div
       className={cx('title-wrap', {
@@ -59,7 +65,10 @@ const DocRow = ({ doc }) => {
       })}
     >
       <div id={`title-${doc.id}`} className="title">
-        <UniversalLink href={doc.remoteUrl || flattenToAppURL(doc['@id'])}>
+        <UniversalLink
+          href={doc.remoteUrl || flattenToAppURL(doc['@id'])}
+          item={doc}
+        >
           {doc.title}
         </UniversalLink>
         {doc?.description && (

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

@@ -2,7 +2,7 @@ import React from 'react';
 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 { UniversalLink } from '@plone/volto/components';
 import Icon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon';
 
 const messages = defineMessages({
@@ -12,8 +12,15 @@ const messages = defineMessages({
   },
 });
 
-const Attachment = ({ title, description, download_url }) => {
+const Attachment = ({ title, description, download_url, item = {} }) => {
   const intl = useIntl();
+  let _item = { ...item };
+  if (item['@type'] === 'File') {
+    _item = item.file;
+  }
+  if (item['@type'] === 'Image') {
+    _item = item.image;
+  }
   return (
     <Card
       className="card card-teaser shadow p-4 mt-3 rounded attachment"
@@ -27,7 +34,16 @@ const Attachment = ({ title, description, download_url }) => {
       />
       <CardBody tag="div">
         <CardTitle className="h5">
-          <a href={flattenToAppURL(download_url)}>{title}</a>
+          <UniversalLink
+            item={{
+              ..._item,
+              '@id': download_url,
+            }}
+            title={title}
+            aria-label={title}
+          >
+            {title}
+          </UniversalLink>
         </CardTitle>
         {description && <p>{description}</p>}
       </CardBody>

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

@@ -52,7 +52,6 @@ const Attachments = ({
           {
             'path.depth': 1,
             sort_on: 'getObjPositionInParent',
-            metadata_fields: '_all',
             fullobjects: 1,
             // the default maximum b_size allowed in redturtle.volto is 500
             b_size: 499,

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { FontAwesomeIcon as IconFA } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { defineMessages, useIntl } from 'react-intl';
-import { Icon } from '@plone/volto/components';
+import { Icon, UniversalLink } from '@plone/volto/components';
 import { getFileViewFormat } from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
@@ -23,6 +23,8 @@ const DownloadFileFormat = ({
   formatsize = '2x',
   className,
   showLabel = false,
+  title,
+  hideFileFormatLabel = false,
 }) => {
   const intl = useIntl();
   const defaultIcon = { lib: 'far', name: 'file', svg_format: false };
@@ -40,15 +42,17 @@ const DownloadFileFormat = ({
 
     icon = viewFormat?.icon ?? defaultIcon;
   }
-  const pdfFile = file?.download?.includes('@@display-file');
 
   return file ? (
-    <a
-      href={flattenToAppURL(file.download)}
+    <UniversalLink
+      item={{
+        ...file,
+        ['@id']: file.download,
+      }}
       title={file.filename}
       className={className}
-      target={pdfFile ? '_blank' : '_self'}
-      rel={pdfFile ? 'noopener noreferrer' : ''}
+      aria-label={(title ?? file.filename) + ': ' + label}
+      hideFileFormat={hideFileFormatLabel}
     >
       {!icon.svg_format ? (
         <IconFA
@@ -61,7 +65,7 @@ const DownloadFileFormat = ({
         <Icon className="icon-svg-custom" name={icon.name} />
       )}
       {showLabel && <span className="ms-4">{label}</span>}
-    </a>
+    </UniversalLink>
   ) : null;
 };
 

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

@@ -14,6 +14,7 @@ import {
   CarouselWrapper,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { useSlider } from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/slider';
+
 import PropTypes from 'prop-types';
 import { contentFolderHasItems } from 'design-comuni-plone-theme/helpers';
 import { UniversalLink } from '@plone/volto/components';

package/src/components/ItaliaTheme/View/Commons/PageHeader/PageHeaderEventDates.jsx

@@ -61,7 +61,6 @@ const PageHeaderEventDates = ({ content, moment, rrule }) => {
       const isWeekdaySunday = content.recurrence
         .split('BYDAY')[1]
         ?.includes('SU');
-
       const RRULE_LANGUAGE = rrulei18n(intl, Moment);
       eventRecurrenceText = rruleSet.rrules()[0]?.toText(
         (t) => {

package/src/components/ItaliaTheme/View/Commons/PageHeader/PageHeaderLinkServizio.jsx

@@ -8,8 +8,12 @@ const PageHeaderLinkServizio = ({ content }) => {
     content.canale_digitale_link &&
     !content.stato_servizio ? (
     <div className="mb-4">
-      <p className="draftjs-buttons">
-        <UniversalLink href={content.canale_digitale_link}>
+      <p className="canale-digitale">
+        <UniversalLink
+          className="btn btn-primary btn-lg"
+          href={content.canale_digitale_link}
+          data-element="service-online-access"
+        >
           {intl.formatMessage(messages.canale_digitale_link)}
         </UniversalLink>
       </p>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { flattenDeep, values } from 'lodash';
+import { values } from 'lodash';
 import { flattenHTMLToAppURL } from '@plone/volto/helpers';
 import { hasBlocksData } from '@plone/volto/helpers';
 import { RenderBlocks } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
@@ -11,14 +11,16 @@ const richTextHasContent = (data) => {
     //ReactDOMServer.renderToStaticMarkup(RenderBlocks({ data: data })),
     const renderedBlocks = RenderBlocks({ data: data });
 
-    const textBlocks = values(data.blocks).filter((b) => b['@type'] === 'text');
+    const textBlocks = values(data.blocks).filter(
+      (b) => b['@type'] === 'slate',
+    );
     const noTextBlocks = values(data.blocks).filter(
-      (b) => b['@type'] !== 'text',
+      (b) => b['@type'] !== 'slate',
     );
 
-    const textContent = flattenDeep(
-      textBlocks?.map((block) => block.text?.blocks?.map((b) => b.text) ?? []),
-    )?.filter((b) => b != null && b.trim().length > 0)?.[0];
+    const textContent = textBlocks?.filter(
+      (b) => b.plaintext != null && b.plaintext?.trim().length > 0,
+    )?.[0];
 
     return (
       renderedBlocks !== null &&

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

@@ -22,26 +22,23 @@ it('renders content', () => {
         <RichText
           data={{
             blocks: {
-              'c3aac6c5-b8d9-48b7-bc01-a7211248548b': {
-                '@type': 'text',
-                text: {
-                  blocks: [
-                    {
-                      data: {},
-                      depth: 0,
-                      entityRanges: [],
-                      inlineStyleRanges: [],
-                      key: 'e0m83',
-                      text: 'Un mega evento con delle mega iniziative',
-                      type: 'unstyled',
-                    },
-                  ],
-                  entityMap: {},
-                },
+              '77317d1d-92a1-4e94-946c-f00647c71f32': {
+                '@type': 'slate',
+                plaintext: 'Un mega evento con delle mega iniziative',
+                value: [
+                  {
+                    children: [
+                      {
+                        text: 'Un mega evento con delle mega iniziative',
+                      },
+                    ],
+                    type: 'p',
+                  },
+                ],
               },
             },
             blocks_layout: {
-              items: ['c3aac6c5-b8d9-48b7-bc01-a7211248548b'],
+              items: ['77317d1d-92a1-4e94-946c-f00647c71f32'],
             },
           }}
         />

package/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno.jsx

@@ -11,7 +11,7 @@ const EventoContattiOrganizzatoreEsterno = ({ content }) => {
     content?.telefono ||
     content?.email ||
     content?.fax ? (
-    <div className="mb-5">
+    <div className="mb-5 ">
       <Card
         className="card card-teaser rounded shadow mt-3"
         noWrapper={true}

package/src/components/ItaliaTheme/View/EventoView/EventoUlterioriInformazioni.jsx

@@ -16,10 +16,6 @@ const messages = defineMessages({
     id: 'event_url',
     defaultMessage: "Url dell'evento",
   },
-  patrocinato_da: {
-    id: 'patrocinato_da',
-    defaultMessage: 'Patrocinato da',
-  },
   strutture_politiche: {
     id: 'event_strutture_politiche',
     defaultMessage: 'Strutture politiche coinvolte',

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

@@ -27,18 +27,21 @@ const ServizioAccedi = ({ content }) => {
         >
           {content.canale_digitale_link && (
             <div className="mb-4">
-              {/* TODO */}
-              <p
-                className="draftjs-buttons"
-                data-element="service-online-access"
-              >
-                <UniversalLink href={content.canale_digitale_link}>
+              <p data-element="service-online-access">
+                <UniversalLink
+                  href={content.canale_digitale_link}
+                  className="btn btn-primary mobile-full"
+                >
                   {intl.formatMessage(messages.canale_digitale_link)}
                 </UniversalLink>
               </p>
             </div>
           )}
-          <RichText data={content.prenota_appuntamento} content={content} />
+          <RichText
+            data={content.prenota_appuntamento}
+            content={content}
+            serif={false}
+          />
           {content.canale_fisico?.map?.((canale) => (
             <div className="mt-3">
               <OfficeCard

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

@@ -10,17 +10,18 @@ const fieldDataToPlainText = (field) => {
       if (index > 0) accumulator += ' ';
       accumulator += field.blocks[item].text?.blocks[0].text ?? '';
     }
+    if (field.blocks[item]['@type'] === 'slate') {
+      if (index > 0) accumulator += ' ';
+      accumulator += field.blocks[item].plaintext ?? '';
+    }
     return accumulator;
   }, '');
 };
 
 const ServizioMetatag = ({ content }) => {
   const intl = useIntl();
-  // TODO DEPRECATED use only SiteProperty
-  const deprecatedSiteTitle = getSiteProperty('siteTitle', intl.locale);
   let siteTitle = SiteProperty({
     property: 'site_title',
-    forceValue: deprecatedSiteTitle,
     getValue: true,
     defaultTitle: getSiteProperty('siteTitle', intl.locale),
   });