design-comuni-plone-theme 8.0.2 → 8.1.0

package/.eslintignore

@@ -0,0 +1,4 @@
+container-query-polyfill.modern.js
+cypress
+node_modules
+acceptance

package/.eslintrc.js

@@ -1,59 +1,45 @@
-const fs = require('fs');
-const path = require('path');
-
-const projectRootPath = fs.realpathSync('.'); // __dirname
-
-let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
-
-let configFile;
-if (fs.existsSync(`${this.projectRootPath}/tsconfig.json`))
-  configFile = `${this.projectRootPath}/tsconfig.json`;
-else if (fs.existsSync(`${this.projectRootPath}/jsconfig.json`))
-  configFile = `${this.projectRootPath}/jsconfig.json`;
-
-if (configFile) {
-  const jsConfig = require(configFile).compilerOptions;
-  const pathsConfig = jsConfig.paths;
-  if (pathsConfig['@plone/volto'])
-    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
-}
-
-const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
-const reg = new AddonConfigurationRegistry(projectRootPath);
-
-// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map((o) => [
-  o,
-  reg.packages[o].modulePath,
-]);
-
 module.exports = {
-  extends: `${voltoPath}/.eslintrc`,
-  settings: {
-    'import/resolver': {
-      alias: {
-        map: [
-          // TODO remove the next two when implemented in core
-          [
-            '@plone/volto/components/theme/Image/Image',
-            path.resolve(`${projectRootPath}/src/components/Image/Image.jsx`),
-          ],
-          [
-            '@plone/volto/helpers/Image/Image',
-            path.resolve(`${projectRootPath}/src/components/Image/helpers.js`),
-          ],
-
-          ['@plone/volto', '@plone/volto/src'],
-          ...addonAliases,
-          ['@package', `${__dirname}/src`],
-          ['@root', `${__dirname}/src`],
-          ['~', `${__dirname}/src`],
-        ],
-        extensions: ['.js', '.jsx', '.json'],
-      },
-      'babel-plugin-root-import': {
-        rootPathSuffix: 'src',
-      },
+  extends: ['react-app', 'prettier', 'plugin:jsx-a11y/recommended'],
+  plugins: ['prettier', 'react-hooks', 'jsx-a11y'],
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+    mocha: true,
+    jasmine: true,
+  },
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true,
     },
   },
+  rules: {
+    'import/no-unresolved': 0,
+    'no-alert': 1,
+    'no-console': 1,
+    'no-debugger': 1,
+    'prettier/prettier': ['error', { trailingComma: 'all', singleQuote: true }],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'react/react-in-jsx-scope': 'off',
+  },
+  globals: {
+    root: true,
+    __DEVELOPMENT__: true,
+    __CLIENT__: true,
+    __SERVER__: true,
+    __DISABLE_SSR__: true,
+    __DEVTOOLS__: true,
+    __DEBUG__: true,
+    __SSR__: true,
+    __SENTRY__: true,
+    cy: true,
+    Cypress: true,
+    jest: true,
+    socket: true,
+    webpackIsomorphicTools: true,
+  },
 };

package/.prettierignore

@@ -1,2 +1,3 @@
+container-query-polyfill.modern.js
 CHANGELOG.md
 README.md

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 
 
+## [8.1.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.0.3...v8.1.0) (2023-07-20)
+
+
+### Features
+
+* add icon to external links for accessibility, configurable in theme settings ([#250](https://github.com/RedTurtle/design-comuni-plone-theme/issues/250)) ([cecc025](https://github.com/RedTurtle/design-comuni-plone-theme/commit/cecc0258a8336c0968fa906b29ecb97a8d541749))
+
+
+### Bug Fixes
+
+* a11y title in external links ([a9bd127](https://github.com/RedTurtle/design-comuni-plone-theme/commit/a9bd127f45db0af8593d4ac60fe03eba702e4038))
+* card persona styles ([2f10bde](https://github.com/RedTurtle/design-comuni-plone-theme/commit/2f10bde3bd590e74a25bb09b6ae968aac1562a08))
+* changed title of Altri Documenti section to Documenti ([#253](https://github.com/RedTurtle/design-comuni-plone-theme/issues/253)) ([2f84496](https://github.com/RedTurtle/design-comuni-plone-theme/commit/2f84496382dbc343bea959e6e326e9607a724670))
+* error while cherry-picking changes from v2 ([8d30c6f](https://github.com/RedTurtle/design-comuni-plone-theme/commit/8d30c6f9c01bca136beb477ba1dfc1ec9c5db790))
+* upgrade volto-data-grid-widget to 2.2.1 ([08bff18](https://github.com/RedTurtle/design-comuni-plone-theme/commit/08bff189d49e127545eaf98067554dd2ed8d6171))
+
+
+### Documentation
+
+* updated publiccode ([f27748c](https://github.com/RedTurtle/design-comuni-plone-theme/commit/f27748c57d1c1dea5dec20ba73b04e095fe4e259))
+
+
+### Maintenance
+
+* update linters config ([9c4b548](https://github.com/RedTurtle/design-comuni-plone-theme/commit/9c4b548b1dcfcda688d4b4229ad3bb339aacda91))
+* updated peer dep to volto 17.0.0-alpha.19 ([50625e6](https://github.com/RedTurtle/design-comuni-plone-theme/commit/50625e6e1314201b18357fd821b82499e6f607c4))
+
+## [8.0.3](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.0.2...v8.0.3) (2023-07-14)
+
+
+### Bug Fixes
+
+* added condition to SimpleCardTemplate for the effective/modified dates ([#251](https://github.com/RedTurtle/design-comuni-plone-theme/issues/251)) ([d578ffa](https://github.com/RedTurtle/design-comuni-plone-theme/commit/d578ffae3dcab1d4e73174762b6507288a93f9e6))
+* grid block view with bootstrap-italia ([aa594d8](https://github.com/RedTurtle/design-comuni-plone-theme/commit/aa594d854b45cab44159328131d0ab782781a4d3))
+* intl missing in SelectInput ([5c9f458](https://github.com/RedTurtle/design-comuni-plone-theme/commit/5c9f45831dc5b8301c832b47f56d4860bebb67da))
+
+
+### Documentation
+
+* updated publiccode ([31efc10](https://github.com/RedTurtle/design-comuni-plone-theme/commit/31efc10ddb1180ae69464371444e8045eba43221))
+
 ## [8.0.2](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.0.1...v8.0.2) (2023-07-14)
 
 

package/locales/de/LC_MESSAGES/volto.po

@@ -802,7 +802,7 @@ msgid "altre_modalita_invio"
 msgstr ""
 
 #: components/ItaliaTheme/View/ServizioView/ServizioAltriDocumenti
-# defaultMessage: Documenti correlati
+# defaultMessage: Documenti
 msgid "altri_documenti"
 msgstr ""
 
@@ -2540,6 +2540,11 @@ msgstr ""
 msgid "open_end"
 msgstr ""
 
+#: helpers/customizationsI18n
+# defaultMessage: Opens in new tab
+msgid "opensInNewTab"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Contenuto attivo
 msgid "optionActiveContentButton"

package/locales/en/LC_MESSAGES/volto.po

@@ -787,7 +787,7 @@ msgid "altre_modalita_invio"
 msgstr ""
 
 #: components/ItaliaTheme/View/ServizioView/ServizioAltriDocumenti
-# defaultMessage: Documenti correlati
+# defaultMessage: Documenti
 msgid "altri_documenti"
 msgstr "Other documents"
 
@@ -2525,6 +2525,11 @@ msgstr "Open link in a new tab"
 msgid "open_end"
 msgstr ""
 
+#: helpers/customizationsI18n
+# defaultMessage: Opens in new tab
+msgid "opensInNewTab"
+msgstr "Opens in new tab"
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Contenuto attivo
 msgid "optionActiveContentButton"

package/locales/es/LC_MESSAGES/volto.po

@@ -796,7 +796,7 @@ msgid "altre_modalita_invio"
 msgstr "Otros métodos de envío"
 
 #: components/ItaliaTheme/View/ServizioView/ServizioAltriDocumenti
-# defaultMessage: Documenti correlati
+# defaultMessage: Documenti
 msgid "altri_documenti"
 msgstr "Otros documentos"
 
@@ -2534,6 +2534,11 @@ msgstr "Abrir enlace en una pestaña nueva"
 msgid "open_end"
 msgstr "Este evento tiene una fecha de finalización abierta/variable."
 
+#: helpers/customizationsI18n
+# defaultMessage: Opens in new tab
+msgid "opensInNewTab"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Contenuto attivo
 msgid "optionActiveContentButton"

package/locales/fr/LC_MESSAGES/volto.po

@@ -804,7 +804,7 @@ msgid "altre_modalita_invio"
 msgstr ""
 
 #: components/ItaliaTheme/View/ServizioView/ServizioAltriDocumenti
-# defaultMessage: Documenti correlati
+# defaultMessage: Documenti
 msgid "altri_documenti"
 msgstr "Autres documents"
 
@@ -2542,6 +2542,11 @@ msgstr "Ouvrir le lien dans un nouvel onglet"
 msgid "open_end"
 msgstr ""
 
+#: helpers/customizationsI18n
+# defaultMessage: Opens in new tab
+msgid "opensInNewTab"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Contenuto attivo
 msgid "optionActiveContentButton"

package/locales/it/LC_MESSAGES/volto.po

@@ -787,9 +787,9 @@ msgid "altre_modalita_invio"
 msgstr "Altre modalità di invio"
 
 #: components/ItaliaTheme/View/ServizioView/ServizioAltriDocumenti
-# defaultMessage: Documenti correlati
+# defaultMessage: Documenti
 msgid "altri_documenti"
-msgstr "Altri documenti"
+msgstr "Documenti"
 
 #: config/Blocks/ListingOptions/cardWithImageTemplate
 # defaultMessage: Mostra l'immagine per tutti gli elementi
@@ -2525,6 +2525,11 @@ msgstr "Apri link in una nuova scheda"
 msgid "open_end"
 msgstr "Questo evento ha una data di fine aperta/variabile."
 
+#: helpers/customizationsI18n
+# defaultMessage: Opens in new tab
+msgid "opensInNewTab"
+msgstr "Si apre in una nuova scheda"
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Contenuto attivo
 msgid "optionActiveContentButton"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-06-30T12:14:35.795Z\n"
+"POT-Creation-Date: 2023-07-20T15:16:26.205Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -789,7 +789,7 @@ msgid "altre_modalita_invio"
 msgstr ""
 
 #: components/ItaliaTheme/View/ServizioView/ServizioAltriDocumenti
-# defaultMessage: Documenti correlati
+# defaultMessage: Documenti
 msgid "altri_documenti"
 msgstr ""
 
@@ -2527,6 +2527,11 @@ msgstr ""
 msgid "open_end"
 msgstr ""
 
+#: helpers/customizationsI18n
+# defaultMessage: Opens in new tab
+msgid "opensInNewTab"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Contenuto attivo
 msgid "optionActiveContentButton"

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "8.0.2",
+  "version": "8.1.0",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -55,6 +55,7 @@
   },
   "stylelint": {
     "extends": [
+      "stylelint-config-prettier",
       "stylelint-config-idiomatic-order"
     ],
     "plugins": [
@@ -128,7 +129,7 @@
     "typeface-roboto-mono": "0.0.75",
     "typeface-titillium-web": "0.0.72",
     "volto-blocks-widget": "3.1.0",
-    "volto-data-grid-widget": "2.2.0",
+    "volto-data-grid-widget": "2.2.1",
     "volto-dropdownmenu": "4.0.0",
     "volto-editablefooter": "5.0.1",
     "volto-feedback": "0.1.5",
@@ -151,19 +152,27 @@
     "@commitlint/config-conventional": "17.6.6",
     "@plone/scripts": "*",
     "@release-it/conventional-changelog": "5.1.1",
-    "eslint": "8.42.0",
-    "eslint-plugin-prettier": "^3.4.1",
+    "babel-eslint": "10.1.0",
+    "eslint": "6.8.0",
+    "eslint-config-prettier": "6.11.0",
+    "eslint-config-react-app": "5.2.1",
+    "eslint-plugin-flowtype": "4.7.0",
+    "eslint-plugin-import": "2.20.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-prettier": "3.1.3",
+    "eslint-plugin-react": "7.20.0",
+    "eslint-plugin-react-hooks": "4.0.2",
     "husky": "8.0.2",
     "lint-staged": "13.0.3",
-    "prettier": "^2.7.1",
-    "release-it": "15.11.0",
-    "stylelint": "15.10.1",
-    "stylelint-config-idiomatic-order": "^9.0.0",
-    "stylelint-config-prettier": "^9.0.3",
-    "stylelint-prettier": "^2.0.0"
+    "prettier": "2.0.5",
+    "release-it": "16.1.3",
+    "stylelint": "15.10.2",
+    "stylelint-config-idiomatic-order": "9.0.0",
+    "stylelint-config-prettier": "9.0.5",
+    "stylelint-prettier": "4.0.0"
   },
   "peerDependencies": {
-    "@plone/volto": "17.0.0-alpha.17"
+    "@plone/volto": "17.0.0-alpha.19"
   },
   "packageManager": "yarn@3.2.3"
 }

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2023-07-11'
+releaseDate: '2023-07-20'
 softwareType: standalone/web
-softwareVersion: 8.0.0
+softwareVersion: 8.0.4
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/Blocks/Accordion/Block/EditBlock.jsx

@@ -8,7 +8,7 @@ import { compose } from 'redux';
 import { injectIntl, defineMessages } from 'react-intl';
 
 import { injectDNDSubblocks, SubblockEdit, Subblock } from 'volto-subblocks';
-
+import { UniversalLink } from '@plone/volto/components';
 import { Button } from 'design-react-kit';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
@@ -146,11 +146,11 @@ class EditBlock extends SubblockEdit {
               </div>
               {this.props.data.href && (
                 <div className="link-more">
-                  <a href={this.props.data.href}>
+                  <UniversalLink href={this.props.data.href}>
                     {this.props.data.linkMoreTitle ||
                       this.props.intl.formatMessage(messages.vedi)}
                     <Icon icon="it-arrow-right" />
-                  </a>
+                  </UniversalLink>
                 </div>
               )}
             </div>

package/src/components/ItaliaTheme/Blocks/Accordion/Block/ViewBlock.jsx

@@ -9,6 +9,7 @@ import redraft from 'redraft';
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -66,10 +67,10 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
           </div>
           {data.href && (
             <div className="link-more">
-              <a href={data.href}>
+              <UniversalLink href={data.href}>
                 {data.linkMoreTitle || intl.formatMessage(messages.vedi)}
                 <Icon icon="it-arrow-right" />
-              </a>
+              </UniversalLink>
             </div>
           )}
         </div>

package/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx

@@ -189,6 +189,7 @@ const SimpleCardTemplateDefault = (props) => {
           ) : null;
           const category = getCategory(item, show_type, show_section, props);
           const type = item['@type'];
+
           return (
             <Card
               className={`align-items-top rounded shadow ${getItemClass(item)}`}
@@ -222,19 +223,27 @@ const SimpleCardTemplateDefault = (props) => {
                 {listingText && (
                   <CardText className={cx('', { 'mb-5': eventRecurrenceMore })}>
                     {listingText}
-                    {(type === 'Modulo' || type === 'Documento') && (
-                      <div className="document-date mt-3">
-                        <strong>
-                          {intl.formatMessage(messages.publication_date)}:{' '}
-                        </strong>
-                        {moment(item.CreationDate).format('DD-MM-YYYY')}
-                        <br />
-                        <strong>
-                          {intl.formatMessage(messages.update_date)}:{' '}
-                        </strong>
-                        {moment(item.modified).format('DD-MM-YYYY')}
-                      </div>
-                    )}
+                    {(type === 'Modulo' || type === 'Documento') &&
+                      !hide_dates && (
+                        <div className="document-date mt-3">
+                          {item?.effective && (
+                            <p className="mb-0">
+                              <strong>
+                                {intl.formatMessage(messages.publication_date)}:{' '}
+                              </strong>
+                              {moment(item.effective).format('DD-MM-YYYY')}
+                            </p>
+                          )}
+                          {item?.modified && (
+                            <p className="mb-0">
+                              <strong>
+                                {intl.formatMessage(messages.update_date)}:{' '}
+                              </strong>
+                              {moment(item.modified).format('DD-MM-YYYY')}
+                            </p>
+                          )}
+                        </div>
+                      )}
                   </CardText>
                 )}
                 {eventRecurrenceMore}

package/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx

@@ -10,6 +10,7 @@ import { Container } from 'design-react-kit';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { UniversalLink } from '@plone/volto/components';
 
 /**
  * View Video Gallery body class
@@ -61,13 +62,13 @@ const Body = ({ data, children, nItems = 0, reactSlick }) => {
           <div className="channel">
             <Icon color="primary" icon="it-youtube" className="me-2" />
             {data.channel_link ? (
-              <a
+              <UniversalLink
                 href={data.channel_link}
                 rel="noopener noreferrer"
                 target="_blank"
               >
                 {data.channel_link_title || data.channel_link}
-              </a>
+              </UniversalLink>
             ) : (
               <span>{data.channel_link_title}</span>
             )}

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

@@ -5,6 +5,7 @@ import AccordionView from '../Accordion/View';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import thunk from 'redux-thunk';
+import { MemoryRouter } from 'react-router-dom';
 
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
@@ -59,7 +60,9 @@ const store = mockStore({
 test('View renders all fields', async () => {
   render(
     <Provider store={store}>
-      <AccordionView data={mock_fields} />
+      <MemoryRouter>
+        <AccordionView data={mock_fields} />
+      </MemoryRouter>
     </Provider>,
   );
 

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

@@ -26,7 +26,7 @@ export const CardPersona = ({
     useOriginal: false,
   });
 
-  const hasImage = image !== null;
+  const hasImage = image !== null && showImage;
 
   return (
     <Card
@@ -53,15 +53,7 @@ export const CardPersona = ({
               {item.title || item.id}
             </UniversalLink>
           </CardTitle>
-          {listingText && (
-            <CardText
-              className={cx('', {
-                'card-with-picture': !!image,
-              })}
-            >
-              {listingText}
-            </CardText>
-          )}
+          {listingText && <CardText>{listingText}</CardText>}
         </CardBody>
         {showImage && (
           <div className="card-image card-image-rounded">{image}</div>

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

@@ -3,7 +3,7 @@
  * @module components/theme/Footer/FooterSmall
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import cx from 'classnames';
 import { UniversalLink } from '@plone/volto/components';
 import { defineMessages, useIntl } from 'react-intl';
@@ -35,22 +35,17 @@ const FooterSmall = () => {
   const intl = useIntl();
   const pathname = useLocation().pathname;
   const dispatch = useDispatch();
-  const [links, setLinks] = useState([]);
 
   const subFooter = useSelector((state) => state.subFooter?.result);
   const subFooterItems = getItemsByPath(subFooter, pathname)?.filter(
     (item) => item.visible,
   );
 
-  useEffect(() => {
-    dispatch(getSubFooter());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const links = getSiteProperty('smallFooterLinks', intl.locale) ?? [];
 
   useEffect(() => {
-    let _links = getSiteProperty('smallFooterLinks', intl.locale) ?? [];
-    setLinks(_links);
-  }, [intl.locale]);
+    dispatch(getSubFooter());
+  }, [dispatch]);
 
   return subFooterItems?.length > 0 || links.length > 0 || true ? (
     <div className="it-footer-small-prints clearfix">
@@ -70,11 +65,7 @@ const FooterSmall = () => {
                   })}
                   key={url + index}
                 >
-                  <UniversalLink
-                    data-element={item.id_lighthouse}
-                    href={url}
-                    title={item.title}
-                  >
+                  <UniversalLink data-element={item.id_lighthouse} href={url}>
                     {item.title}
                   </UniversalLink>
                 </li>
@@ -83,9 +74,7 @@ const FooterSmall = () => {
           {links?.length > 0 &&
             links.map((link) => (
               <li className="list-inline-item" key={link.url}>
-                <UniversalLink href={link.url} title={link.title}>
-                  {link.title}
-                </UniversalLink>
+                <UniversalLink href={link.url}>{link.title}</UniversalLink>
               </li>
             ))}
           <li className="list-inline-item">
@@ -95,7 +84,6 @@ const FooterSmall = () => {
                 e.preventDefault();
                 dispatch(displayBanner(true, true));
               }}
-              title={intl.formatMessage(messages.cookieSettings)}
             >
               {intl.formatMessage(messages.cookieSettings)}
             </button>

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

@@ -2,8 +2,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Chip, ChipLabel } from 'design-react-kit';
-import { Link } from 'react-router-dom';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { UniversalLink } from '@plone/volto/components';
 import {
   OfficeCard,
   RichTextSection,
@@ -57,8 +57,8 @@ const CuredBy = ({ office, people, title }) => {
               </h5>
             )}
             {people.map((item, i) => (
-              <Link
-                to={flattenToAppURL(item['@id'])}
+              <UniversalLink
+                href={flattenToAppURL(item['@id'])}
                 key={item['@id']}
                 className="text-decoration-none me-2"
               >
@@ -71,7 +71,7 @@ const CuredBy = ({ office, people, title }) => {
                 >
                   <ChipLabel tag="span">{item.title}</ChipLabel>
                 </Chip>
-              </Link>
+              </UniversalLink>
             ))}
           </div>
         ) : null}

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

@@ -5,6 +5,7 @@ import { getContent, resetContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { OSMMap } from 'volto-venue';
 import PropTypes from 'prop-types';
+import { UniversalLink } from '@plone/volto/components';
 
 /**
  * LocationsMap view component class.
@@ -62,7 +63,7 @@ const LocationsMap = ({ center, locations }) => {
       <div className="map-pin-popup">
         <div className="title">{item.title}</div>
         <p>
-          <a
+          <UniversalLink
             href={`http://maps.google.com/?q=${item.street ?? ''} ${
               item.zip_code ?? ''
             } ${item.city ?? ''} ${item.province ?? ''} ${
@@ -72,10 +73,10 @@ const LocationsMap = ({ center, locations }) => {
             rel="noopener noreferrer"
           >
             {intl.formatMessage(messages.view_on_googlemaps)}
-          </a>
+          </UniversalLink>
         </p>
         <p>
-          <a
+          <UniversalLink
             href={`https://bing.com/maps/default.aspx?where1=${
               item.street ?? ''
             } ${item.zip_code ?? ''} ${item.city ?? ''} ${item.province ?? ''}`}
@@ -83,10 +84,10 @@ const LocationsMap = ({ center, locations }) => {
             rel="noopener noreferrer"
           >
             {intl.formatMessage(messages.view_on_bingmaps)}
-          </a>
+          </UniversalLink>
         </p>
         <p>
-          <a
+          <UniversalLink
             href={`  http://maps.apple.com/?q=${item.street ?? ''} ${
               item.zip_code ?? ''
             } ${item.city ?? ''} ${item.province ?? ''}`}
@@ -94,7 +95,7 @@ const LocationsMap = ({ center, locations }) => {
             rel="noopener noreferrer"
           >
             {intl.formatMessage(messages.view_on_applemaps)}
-          </a>
+          </UniversalLink>
         </p>
       </div>
     );

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

@@ -5,6 +5,7 @@ import { searchContent, resetSearchContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import PropTypes from 'prop-types';
 import Image from '@plone/volto/components/theme/Image/Image';
+import { UniversalLink } from '@plone/volto/components';
 
 const messages = defineMessages({
   sponsors: {
@@ -44,14 +45,14 @@ const Sponsor = ({ item }) => {
         </div>
       ) : (
         <div className="sponsor-item">
-          <a
+          <UniversalLink
             href={item.remoteUrl}
             alt=""
             target="_blank"
             rel="noopener noreferrer"
           >
             {item.title}
-          </a>
+          </UniversalLink>
         </div>
       )}
     </>

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

@@ -10,7 +10,7 @@ import {
 const messages = defineMessages({
   altri_documenti: {
     id: 'altri_documenti',
-    defaultMessage: 'Documenti correlati',
+    defaultMessage: 'Documenti',
   },
 });
 

package/src/components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget.jsx

@@ -3,6 +3,7 @@ import { Form } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
+import { UniversalLink } from '@plone/volto/components';
 
 const messages = defineMessages({
   canale_digitale_widget_title: {
@@ -33,14 +34,9 @@ const CanaleDigitaleWidget = (props) => {
         </h3>
         <p className="help">
           Sezione obbligatoria ai fini della validazione AGID secondo i seguenti{' '}
-          <a
-            href="https://docs.italia.it/italia/designers-italia/app-valutazione-modelli-docs/it/versione-attuale/requisiti-e-modalita-verifica-comuni.html"
-            target="_blank"
-            noopener
-            noreferrer
-          >
+          <UniversalLink href="https://docs.italia.it/italia/designers-italia/app-valutazione-modelli-docs/it/versione-attuale/requisiti-e-modalita-verifica-comuni.html">
             termini
-          </a>
+          </UniversalLink>
           . Per confermare la presenza in pagina della relativa sezione devono
           essere presenti:
           <ul>

package/src/components/SelectInput/SelectInput.jsx

@@ -47,7 +47,8 @@ const messages = defineMessages({
       'premi la freccia a sinistra per evidenziare i valori selezionati',
   },
   ay11_toggle_values: {
-    id: 'ay11_select_Use left and right to toggle between focused values, press Backspace to remove the currently focused value',
+    id:
+      'ay11_select_Use left and right to toggle between focused values, press Backspace to remove the currently focused value',
     defaultMessage:
       'Usa le frecce destra e sinistra per attivare o disattivare i valori evidenziati, premi Backspace per rimuovere il valore corrente evidenziato',
   },
@@ -148,6 +149,8 @@ const GroupHeading = injectLazyLibs('reactSelect')((props) => {
 });
 
 const ClearIndicator = (props) => {
+  const intl = useIntl();
+
   const {
     innerProps: { ref, ...restInnerProps },
   } = props;
@@ -176,8 +179,13 @@ ClearIndicator.propTypes = {
 const getSelectAriaLiveMessages = (intl) => {
   return {
     guidance: (props) => {
-      const { isSearchable, isMulti, isDisabled, tabSelectsValue, context } =
-        props;
+      const {
+        isSearchable,
+        isMulti,
+        isDisabled,
+        tabSelectsValue,
+        context,
+      } = props;
       switch (context) {
         case 'menu':
           return `${intl.formatMessage(messages.ay11_up_down)}${

package/src/config/RichTextEditor/Plugins/AnchorPlugin/components/Link/index.jsx

@@ -2,6 +2,7 @@
  * Questo è il link quando viene mostrato dentro l'editor nelle viste di edit
  * Customizzato
  * - aggiunto data-element
+ * - aggiunto icona link esterno
  */
 import React from 'react';
 import PropTypes from 'prop-types';

package/src/config/italiaConfig.js

@@ -236,6 +236,7 @@ export default function applyConfig(voltoConfig) {
       enableVoltoFormBlockCaptcha: true,
       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
     },
     apiExpanders: [
       ...config.settings.apiExpanders,

package/src/customizations/volto/components/manage/Blocks/Grid/View.jsx

@@ -0,0 +1,47 @@
+/**
+ * Customizations:
+ * - used design-react-kit Grid component
+ */
+import { Row, Col } from 'design-react-kit';
+import cx from 'classnames';
+import { RenderBlocks } from '@plone/volto/components';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+const GridBlockView = (props) => {
+  const { data, path, className } = props;
+  const metadata = props.metadata || props.properties;
+  const columns = data.blocks_layout.items;
+  const blocksConfig =
+    config.blocks.blocksConfig[data['@type']].blocksConfig ||
+    props.blocksConfig;
+  const location = {
+    pathname: path,
+  };
+  return (
+    <div
+      className={cx('block', data['@type'], className, {
+        one: columns?.length === 1,
+        two: columns?.length === 2,
+        three: columns?.length === 3,
+        four: columns?.length === 4,
+      })}
+    >
+      {data.headline && <h2 className="headline">{data.headline}</h2>}
+
+      <Row>
+        <RenderBlocks
+          {...props}
+          blockWrapperTag={Col}
+          metadata={metadata}
+          content={data}
+          location={location}
+          blocksConfig={blocksConfig}
+          isContainer
+        />
+      </Row>
+    </div>
+  );
+};
+
+export default withBlockExtensions(GridBlockView);

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

@@ -0,0 +1,175 @@
+/*
+ * UniversalLink
+ * @module components/UniversalLink
+ *
+ * CUSTOMIZATIONS:
+ * - aggiunto icona per link esterni
+ * - aggiunto title informativo per link esterni
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { HashLink as Link } from 'react-router-hash-link';
+import { useSelector } from 'react-redux';
+import {
+  flattenToAppURL,
+  isInternalURL,
+  URLUtils,
+} from '@plone/volto/helpers/Url/Url';
+import { matchPath } from 'react-router';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+
+import config from '@plone/volto/registry';
+
+const UniversalLink = ({
+  href,
+  item = null,
+  openLinkInNewTab,
+  download = false,
+  children,
+  className = null,
+  title = null,
+  ...props
+}) => {
+  const intl = useIntl();
+  const token = useSelector((state) => state.userSession?.token);
+
+  let url = href;
+  if (!href && item) {
+    if (!item['@id']) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Invalid item passed to UniversalLink',
+        item,
+        props,
+        children,
+      );
+      url = '#';
+    } else {
+      //case: generic item
+      url = flattenToAppURL(item['@id']);
+
+      //case: item like a Link
+      let remoteUrl = item.remoteUrl || item.getRemoteUrl;
+      if (!token && remoteUrl) {
+        url = remoteUrl;
+      }
+
+      //case: item of type 'File'
+      if (
+        !token &&
+        config.settings.downloadableObjects.includes(item['@type'])
+      ) {
+        url = `${url}/@@download/file`;
+      }
+
+      if (
+        !token &&
+        config.settings.viewableInBrowserObjects.includes(item['@type'])
+      ) {
+        url = `${url}/@@display-file/file`;
+      }
+    }
+  }
+
+  const isBlacklisted =
+    (config.settings.externalRoutes ?? []).find((route) =>
+      matchPath(flattenToAppURL(url), route.match),
+    )?.length > 0;
+  const isExternal = !isInternalURL(url) || isBlacklisted;
+  const isDownload = (!isExternal && url.includes('@@download')) || download;
+  const isDisplayFile =
+    (!isExternal && url.includes('@@display-file')) || false;
+
+  const checkedURL = URLUtils.checkAndNormalizeUrl(url);
+
+  url = checkedURL.url;
+  let tag = (
+    <Link
+      to={flattenToAppURL(url)}
+      target={openLinkInNewTab ?? false ? '_blank' : null}
+      title={title}
+      className={className}
+      smooth={config.settings.hashLinkSmoothScroll}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+
+  if (isExternal) {
+    tag = (
+      <a
+        href={url}
+        title={`${title ? title + ' - ' : ''}${intl.formatMessage({
+          id: 'opensInNewTab',
+        })}`}
+        target={
+          !checkedURL.isMail &&
+          !checkedURL.isTelephone &&
+          !(openLinkInNewTab === false)
+            ? '_blank'
+            : null
+        }
+        rel="noopener noreferrer"
+        className={className}
+        {...props}
+      >
+        {children}
+        {config.settings.siteProperties.markSpecialLinks && (
+          <Icon
+            icon="it-external-link"
+            title={title}
+            size="xs"
+            className="align-top ms-1 external-link"
+          />
+        )}
+      </a>
+    );
+  } else if (isDownload) {
+    tag = (
+      <a
+        href={flattenToAppURL(url)}
+        download
+        title={title}
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  } else if (isDisplayFile) {
+    tag = (
+      <a
+        href={flattenToAppURL(url)}
+        title={title}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+  return tag;
+};
+
+UniversalLink.propTypes = {
+  href: PropTypes.string,
+  openLinkInNewTab: PropTypes.bool,
+  download: PropTypes.bool,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  item: PropTypes.shape({
+    '@id': PropTypes.string.isRequired,
+    remoteUrl: PropTypes.string, //of plone @type 'Link'
+  }),
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+};
+
+export default UniversalLink;

package/src/helpers/customizationsI18n.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+defineMessages({
+  opensInNewTab: {
+    id: 'opensInNewTab',
+    defaultMessage: 'Opens in new tab',
+  },
+});

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

@@ -41,6 +41,12 @@
         &:focus {
           background: $secondary-text;
           color: $secondary;
+          .external-link {
+            fill: #004080 !important;
+          }
+        }
+        .external-link {
+          fill: $external-link-fill-buttons !important;
         }
       }
 

package/src/theme/ItaliaTheme/Components/_card.scss

@@ -96,9 +96,6 @@
       @include rem-size(font-size, 18);
       @include rem-size(line-height, 24);
       font-family: 'Titillium Web' !important;
-      &.card-with-picture {
-        width: 60%;
-      }
     }
   }
 }

package/src/theme/ItaliaTheme/_common.scss

@@ -43,4 +43,21 @@
       }
     }
   }
+  .btn-primary,
+  .btn-secondary,
+  .btn-tertiary,
+  .draftjs-buttons {
+    .external-link {
+      fill: $external-link-fill-buttons !important;
+    }
+  }
+  .external-link {
+    fill: $link-color !important;
+    &:hover {
+      fill: #004080 !important;
+    }
+  }
+  .it-footer-small-prints-list .external-link {
+    fill: $external-link-fill-subfooter !important;
+  }
 }

package/src/theme/_site-variables.scss

@@ -45,6 +45,8 @@ $primary-a0: hsl($primary-h, 62%, 97%) !default;
 
 $argument-icon-color: $tertiary !default;
 $argument-icon-bg: #f5f6f7 !default;
+$external-link-fill-buttons: $tertiary-text !default;
+$external-link-fill-subfooter: $tertiary-text !default;
 
 // $dvt-header-center-max-height: 166px;
 // $header-center-max-height-mob: 80px;