Merge branch 'main' into bug_53272_cardPersona_image_layout

CHANGELOG.md

@@ -1,5 +1,46 @@
 
 
+## [11.8.1](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.8.0...v11.8.1) (2024-03-26)
+
+
+### Bug Fixes
+
+* moved HeaderSlim compoonent inside his folder to enable customizations ([#602](https://github.com/redturtle/design-comuni-plone-theme/issues/602)) ([38c6f3d](https://github.com/redturtle/design-comuni-plone-theme/commit/38c6f3d1312f3b7dbd2e73875cc51af0811adabd))
+* view background image in icons block ([#580](https://github.com/redturtle/design-comuni-plone-theme/issues/580)) ([fee11d1](https://github.com/redturtle/design-comuni-plone-theme/commit/fee11d1126f764d1cb4b3cde720714a1f2934b75))
+* volto-form-block ([#600](https://github.com/redturtle/design-comuni-plone-theme/issues/600)) ([9ac3cac](https://github.com/redturtle/design-comuni-plone-theme/commit/9ac3cac30ff846ae716b73fd1db2019e01760adc))
+
+
+### Documentation
+
+* updated publiccode ([ac87cf3](https://github.com/redturtle/design-comuni-plone-theme/commit/ac87cf398b789b1cd9dcd3c4cfed3030e8809499))
+
+## [11.8.0](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.7.0...v11.8.0) (2024-03-19)
+
+
+### Features
+
+* added download link to filename in file widget ([#587](https://github.com/redturtle/design-comuni-plone-theme/issues/587)) ([96649e2](https://github.com/redturtle/design-comuni-plone-theme/commit/96649e29e79a7b71bf93a27406baa4fc1994a213))
+* print styles for UO ([#581](https://github.com/redturtle/design-comuni-plone-theme/issues/581)) ([91b4752](https://github.com/redturtle/design-comuni-plone-theme/commit/91b47526b69b0957eba6c8e803798f4b3ffcf9bb))
+* TextWidget to add alt text to image ([#573](https://github.com/redturtle/design-comuni-plone-theme/issues/573)) ([d183f27](https://github.com/redturtle/design-comuni-plone-theme/commit/d183f2749a2604ebecb0f0df09ec8770d84c7f59))
+* updated volto-form-block with email validation ([#596](https://github.com/redturtle/design-comuni-plone-theme/issues/596)) ([c21f65b](https://github.com/redturtle/design-comuni-plone-theme/commit/c21f65bc7e54d2fa092ae4bcfbfd1c99670cab5c))
+
+
+### Bug Fixes
+
+* link in header doesn't change color when inside cms-ui ([#583](https://github.com/redturtle/design-comuni-plone-theme/issues/583)) ([d076b0a](https://github.com/redturtle/design-comuni-plone-theme/commit/d076b0a540cf3de3c9f7f08cefca27eff3917f70))
+* updated volto-querywidget-with-browser to fix infinite loops on lost reference ([#599](https://github.com/redturtle/design-comuni-plone-theme/issues/599)) ([c6d4cb6](https://github.com/redturtle/design-comuni-plone-theme/commit/c6d4cb6b51447514fedf2938f40031e42779644e))
+* view form block ([5ff7ea7](https://github.com/redturtle/design-comuni-plone-theme/commit/5ff7ea70474963e3dca126a44d531cc4dc17be74))
+
+
+### Maintenance
+
+* updated volto-form-block to fix view form ([80a6586](https://github.com/redturtle/design-comuni-plone-theme/commit/80a6586ac7d458c46efe51bcc4fa4a9cb3b8d619))
+
+
+### Documentation
+
+* updated publiccode and release log ([3c52c12](https://github.com/redturtle/design-comuni-plone-theme/commit/3c52c12edfed3c12a4fdac212b9f229644bf913f))
+
 ## [11.7.0](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.6.2...v11.7.0) (2024-03-15)
 
 

RELEASE.md

@@ -34,7 +34,7 @@
 
 ### Novità
 
-- ...  [`Istruzioni`](url della documentazione relativa alla novità)
+- ...
 
 ### Fix
 
@@ -46,6 +46,33 @@
 ### Fix
 
 - Aggiustato il layout della card per il CT persone quando è impostata un'immagine.
+### Migliorie
+
+- Migliorata l'accessibilità del blocco Icone.
+- ...
+
+### Novità
+
+- ...
+
+### Fix
+
+- ...
+
+## Versione 11.8.0 (19/03/2024)
+
+### Migliorie
+
+- Gli stili del tipo di contenuto Unità Organizzativa sono stati ottimizzati per la stampa.
+
+### Novità
+
+- È possibile scaricare il file o l'immagine caricata dal widget di upload file cliccando sul nome del file stesso.
+- È possibile aggiungere un testo alternativo per l'immagine del blocco Card con Immagine.
+
+### Fix
+
+- Nel blocco con icone, se era impostata una immagine di sfondo non si vedeva.
 
 ## Versione 11.7.0 (15/03/2024)
 

locales/de/LC_MESSAGES/volto.po

@@ -778,6 +778,11 @@ msgstr ""
 msgid "allegati"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
+# defaultMessage: Testo alternativo per l'immagine
+msgid "altText"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 # defaultMessage: Altre cariche
 msgid "altre_cariche"

locales/en/LC_MESSAGES/volto.po

@@ -763,6 +763,11 @@ msgstr "All topics"
 msgid "allegati"
 msgstr "Attached documents"
 
+#: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
+# defaultMessage: Testo alternativo per l'immagine
+msgid "altText"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 # defaultMessage: Altre cariche
 msgid "altre_cariche"

locales/es/LC_MESSAGES/volto.po

@@ -772,6 +772,11 @@ msgstr "Todos los temas"
 msgid "allegati"
 msgstr "Documentos adjuntos"
 
+#: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
+# defaultMessage: Testo alternativo per l'immagine
+msgid "altText"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 # defaultMessage: Altre cariche
 msgid "altre_cariche"

locales/fr/LC_MESSAGES/volto.po

@@ -780,6 +780,11 @@ msgstr "Tous les sujets"
 msgid "allegati"
 msgstr "Documents attachés"
 
+#: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
+# defaultMessage: Testo alternativo per l'immagine
+msgid "altText"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 # defaultMessage: Altre cariche
 msgid "altre_cariche"

locales/it/LC_MESSAGES/volto.po

@@ -763,6 +763,11 @@ msgstr "Tutti gli argomenti"
 msgid "allegati"
 msgstr "Documenti allegati"
 
+#: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
+# defaultMessage: Testo alternativo per l'immagine
+msgid "altText"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 # defaultMessage: Altre cariche
 msgid "altre_cariche"

locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-03-06T10:48:38.114Z\n"
+"POT-Creation-Date: 2024-03-07T15:23:38.346Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -765,6 +765,11 @@ msgstr ""
 msgid "allegati"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
+# defaultMessage: Testo alternativo per l'immagine
+msgid "altText"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 # defaultMessage: Altre cariche
 msgid "altre_cariche"

package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.7.0",
+  "version": "11.8.1",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -146,11 +146,11 @@
     "volto-dropdownmenu": "4.1.1",
     "volto-editablefooter": "5.1.0",
     "volto-feedback": "0.3.0",
-    "volto-form-block": "3.5.2",
+    "volto-form-block": "3.7.1",
     "volto-gdpr-privacy": "2.1.1",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "3.0.0",
-    "volto-querywidget-with-browser": "0.4.1",
+    "volto-querywidget-with-browser": "0.4.2",
     "volto-rss-block": "3.0.0",
     "volto-secondarymenu": "4.0.0",
     "volto-social-settings": "3.0.0",

publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2024-03-15'
+releaseDate: '2024-03-26'
 softwareType: standalone/web
-softwareVersion: 11.7.0
+softwareVersion: 11.8.1
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

src/components/ItaliaTheme/Blocks/IconBlocks/Block/ViewBlock.jsx

@@ -37,7 +37,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
       <CardBody tag="div">
         {data.icon?.length > 0 && (
           <div className="iconblock-icon">
-            <Icon icon={data.icon} />
+            <Icon icon={data.icon} aria-hidden={true} />
           </div>
         )}
 

src/components/ItaliaTheme/Blocks/IconBlocks/Edit.jsx

@@ -8,7 +8,7 @@ import { defineMessages } from 'react-intl';
 import { Container, Row, Col } from 'design-react-kit';
 
 import { SidebarPortal } from '@plone/volto/components';
-import { flattenToAppURL, addAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
 
 import {
@@ -21,6 +21,8 @@ import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaThe
 import EditBlock from './Block/EditBlock';
 import Sidebar from './Sidebar.jsx';
 
+import config from '@plone/volto/registry';
+
 const messages = defineMessages({
   addItem: {
     id: 'Add accordion item',
@@ -54,23 +56,23 @@ class Edit extends SubblocksEdit {
     if (__SERVER__) {
       return <div />;
     }
+    const Image = config.getComponent({ name: 'Image' }).component;
 
     return (
       <div className="public-ui">
         <div className="full-width section py-5">
           {this.props.data.background?.[0] ? (
-            <div
-              className="background-image"
-              style={{
-                backgroundImage: `url(${
-                  this.props.data.background[0]?.image?.scales?.huge
-                    ?.download ??
-                  addAppURL(this.props.data.background[0]?.['@id'])
-                })`,
-              }}
-            ></div>
+            <div className="background-image">
+              <Image
+                item={this.props.data.background[0]}
+                alt=""
+                role={null}
+                responsive={true}
+                sizes="100vw"
+              />
+            </div>
           ) : (
-            <div className="background-image"></div>
+            <div className="background-image no-image"></div>
           )}
 
           <Container className="px-md-4">

src/components/ItaliaTheme/Blocks/IconBlocks/Sidebar.jsx

@@ -58,7 +58,10 @@ const Sidebar = ({
             description=""
             required={false}
             widgetOptions={{
-              pattern_options: { selectableTypes: ['Image'] },
+              pattern_options: {
+                selectableTypes: ['Image'],
+                maximumSelectionSize: 1,
+              },
             }}
             value={data.background ?? []}
             onChange={(id, value) =>

src/components/ItaliaTheme/Blocks/IconBlocks/View.jsx

@@ -1,5 +1,5 @@
 /**
- * View Accordion block.
+ * View IconsBlock block.
  * @module components/ItaliaTheme/Blocks/Accordion/View
  */
 
@@ -8,35 +8,36 @@ import PropTypes from 'prop-types';
 import redraft from 'redraft';
 import ViewBlock from './Block/ViewBlock';
 import { Container, Row, Col } from 'design-react-kit';
-import { flattenToAppURL, addAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 import { checkRedraftHasContent } from 'design-comuni-plone-theme/helpers';
 
 /**
- * View Accordion block class.
+ * View IconsBlock block class.
  * @class View
  * @extends Component
  */
-const AccordionView = ({ data, block }) => {
+const IconsBlockView = ({ data, block }) => {
   const id = new Date().getTime();
+  const Image = config.getComponent({ name: 'Image' }).component;
 
   return (
     <div className="block iconBlocks">
       <div className="public-ui">
         <div className="full-width section py-5">
           {data.background?.[0] ? (
-            <div
-              className="background-image"
-              style={{
-                backgroundImage: `url(${
-                  data.background[0]?.image?.scales?.huge?.download ??
-                  addAppURL(data.background[0]?.['@id'])
-                })`,
-              }}
-            ></div>
+            <div className="background-image">
+              <Image
+                item={data.background[0]}
+                alt=""
+                role={null}
+                responsive={true}
+                sizes="100vw"
+              />
+            </div>
           ) : (
-            <div className="background-image"></div>
+            <div className="background-image no-image"></div>
           )}
           <Container className="px-md-4">
             <div className="block-header">
@@ -94,8 +95,8 @@ const AccordionView = ({ data, block }) => {
  * @property {Object} propTypes Property types.
  * @static
  */
-AccordionView.propTypes = {
+IconsBlockView.propTypes = {
   data: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default AccordionView;
+export default IconsBlockView;

src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Block.jsx

@@ -24,7 +24,7 @@ const messages = defineMessages({
   },
 });
 
-const renderImage = (image, showImage, sizeNatural) =>
+const renderImage = (image, showImage, sizeNatural, altText = '') =>
   showImage && image ? (
     <div className="img-responsive-wrapper">
       <div
@@ -35,7 +35,7 @@ const renderImage = (image, showImage, sizeNatural) =>
         <figure className="img-wrapper">
           <img
             src={`data:${image['content-type']};${image.encoding},${image.data}`}
-            alt=""
+            alt={altText}
             aria-hidden="true"
             loading="lazy"
           />
@@ -117,7 +117,12 @@ const Block = ({
               >
                 {hasImage && (
                   <Col className="my-1 px-0" key={'col-0'}>
-                    {renderImage(data?.image, hasImage, data?.sizeNatural)}
+                    {renderImage(
+                      data?.image,
+                      hasImage,
+                      data?.sizeNatural,
+                      data?.altText,
+                    )}
                   </Col>
                 )}
                 <div
@@ -170,7 +175,12 @@ const Block = ({
                 })}
               >
                 <Col className="my-1 p-0" key={'col-0'} data-testid={'col-0'}>
-                  {renderImage(data?.image, hasImage, data?.sizeNatural)}
+                  {renderImage(
+                    data?.image,
+                    hasImage,
+                    data?.sizeNatural,
+                    data?.altText,
+                  )}
                 </Col>
                 <div
                   key={'col-1'}