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

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,9 @@ 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';
+
 const messages = defineMessages({
   goToPage: {
     id: 'Vai alla pagina',
@@ -39,10 +43,15 @@ const FooterInfos = () => {
   }, [dispatch, location]);
 
   //filter rootpaths
-  const footerColumns = getItemsByPath(
+  let footerColumns = getItemsByPath(
     footerConfiguration,
     location?.pathname?.length ? location.pathname : '/',
   );
+  footerColumns.forEach((column) => {
+    if (__CLIENT__) {
+      column.slateText = fromHtml(column.text);
+    }
+  });
 
   const colWidth =
     12 / (footerColumns.length < N_COLUMNS ? footerColumns.length : N_COLUMNS);
@@ -75,13 +84,18 @@ const FooterInfos = () => {
               )}
             </h4>
             {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/MegaMenu/MegaMenu.jsx

@@ -134,7 +134,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]];
 
@@ -153,6 +152,11 @@ const MegaMenu = ({ item, pathname }) => {
           }
         }
       }
+      if (b['@type'] === 'slate') {
+        if (b.plaintext?.length === 0) {
+          hasBlocks = false;
+        }
+      }
     }
 
     const childrenGroups = [];

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

@@ -26,9 +26,8 @@ const SingleSlideWrapper = (props) => {
       }
       onKeyDown={onKeyDown}
       onClick={(e) => {
-        //commentato perchè i link esterni non si aprivano
-        //e.preventDefault();
-        //e.stopPropagation();
+        e.preventDefault();
+        e.stopPropagation();
       }}
       tabIndex={0}
     >

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 === 'Link') {
       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';
 
 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/Module.jsx

@@ -43,12 +43,7 @@ const Module = ({ item }) => {
       <CardBody tag="div">
         <CardTitle className="h5">
           {modulo.file_principale ? (
-            <a
-              href={flattenToAppURL(modulo.file_principale.download)}
-              title={modulo.title ?? modulo.file_principale.filename}
-            >
-              {modulo.title ?? modulo.file_principale.filename}
-            </a>
+            modulo.title ?? modulo.file_principale.filename
           ) : modulo['@type'] === 'Link' ? (
             <UniversalLink item={modulo} title={modulo.title}>
               {modulo.title}
@@ -63,16 +58,22 @@ const Module = ({ item }) => {
           <DownloadFileFormat
             file={modulo.file_principale}
             showLabel={true}
+            title={modulo.title ?? modulo.file_principale.filename}
+            hideFileFormatLabel={true}
             className="mb-4"
           />
           <DownloadFileFormat
             file={modulo.formato_alternativo_1}
             showLabel={true}
+            title={modulo.title ?? modulo.formato_alternativo_1.filename}
+            hideFileFormatLabel={true}
             className="mb-4"
           />
           <DownloadFileFormat
             file={modulo.formato_alternativo_2}
             showLabel={true}
+            title={modulo.title ?? modulo.formato_alternativo_2.filename}
+            hideFileFormatLabel={true}
           />
         </div>
       </CardBody>

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/ServizioView/ServizioAccedi.jsx

@@ -27,12 +27,11 @@ 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>

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

@@ -8,6 +8,10 @@ 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;
   }, '');
 };

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

@@ -116,7 +116,18 @@ const mock_allfields = {
       '@type': 'title',
     },
     'd2043aa9-157f-4393-a51c-05811f6e760e': {
-      '@type': 'text',
+      '@type': 'slate',
+      plaintext: '',
+      value: [
+        {
+          children: [
+            {
+              text: '',
+            },
+          ],
+          type: 'p',
+        },
+      ],
     },
   },
   blocks_layout: {

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

@@ -116,21 +116,18 @@ const mock_allfields = {
   compensi: {
     blocks: {
       'f943ce1c-cc67-4568-8526-1281f01a9202': {
-        '@type': 'text',
-        text: {
-          blocks: [
-            {
-              data: {},
-              depth: 0,
-              entityRanges: [],
-              inlineStyleRanges: [],
-              key: '4ruln',
-              text: "You don't ever say too much",
-              type: 'unstyled',
-            },
-          ],
-          entityMap: {},
-        },
+        '@type': 'slate',
+        plaintext: "You don't ever say too much",
+        value: [
+          {
+            children: [
+              {
+                text: "You don't ever say too much",
+              },
+            ],
+            type: 'p',
+          },
+        ],
       },
     },
     blocks_layout: {
@@ -151,21 +148,18 @@ const mock_allfields = {
   importi_viaggio_servizio: {
     blocks: {
       '2d2dd70c-3af5-4ff8-816b-46b34ea186b7': {
-        '@type': 'text',
-        text: {
-          blocks: [
-            {
-              data: {},
-              depth: 0,
-              entityRanges: [],
-              inlineStyleRanges: [],
-              key: '3v7r',
-              text: "You don't really read into",
-              type: 'unstyled',
-            },
-          ],
-          entityMap: {},
-        },
+        '@type': 'slate',
+        plaintext: "You don't really read into",
+        value: [
+          {
+            children: [
+              {
+                text: "You don't really read into",
+              },
+            ],
+            type: 'p',
+          },
+        ],
       },
     },
     blocks_layout: {

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

@@ -77,7 +77,18 @@ const mock_allfields = {
       variation: 'simpleCard',
     },
     'e274abbd-0239-46ac-b3a8-dad1dee0691c': {
-      '@type': 'text',
+      '@type': 'slate',
+      plaintext: '',
+      value: [
+        {
+          children: [
+            {
+              text: '',
+            },
+          ],
+          type: 'p',
+        },
+      ],
     },
     'fcfde1bb-0d46-4678-bb6a-2f64fc0084b9': {
       '@type': 'title',
@@ -756,7 +767,18 @@ const store = mockStore({
           variation: 'simpleCard',
         },
         'e274abbd-0239-46ac-b3a8-dad1dee0691c': {
-          '@type': 'text',
+          '@type': 'slate',
+          plaintext: '',
+          value: [
+            {
+              children: [
+                {
+                  text: '',
+                },
+              ],
+              type: 'p',
+            },
+          ],
         },
         'fcfde1bb-0d46-4678-bb6a-2f64fc0084b9': {
           '@type': 'title',