Merge branch 'main' into us_51461_icon_block_icons_aria_hidden_attribute

CHANGELOG.md

@@ -1,5 +1,19 @@
 
 
+## [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)
 
 

RELEASE.md

@@ -34,7 +34,7 @@
 
 ### Novità
 
-- ...  [`Istruzioni`](url della documentazione relativa alla novità)
+- ...
 
 ### Fix
 
@@ -46,6 +46,16 @@
 ### Migliorie
 
 - Migliorata l'accessibilità del blocco Icone.
+- ...
+
+### Novità
+
+- ...
+
+### Fix
+
+- ...
+
 ## Versione 11.8.0 (19/03/2024)
 
 ### Migliorie
@@ -57,6 +67,10 @@
 - È 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)
 
 ### Novità

package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.8.0",
+  "version": "11.8.1",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -146,7 +146,7 @@
     "volto-dropdownmenu": "4.1.1",
     "volto-editablefooter": "5.1.0",
     "volto-feedback": "0.3.0",
-    "volto-form-block": "3.7.0",
+    "volto-form-block": "3.7.1",
     "volto-gdpr-privacy": "2.1.1",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "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-19'
+releaseDate: '2024-03-26'
 softwareType: standalone/web
-softwareVersion: 11.8.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/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/__tests__/IconBlocks.test.jsx

@@ -378,10 +378,8 @@ test('View renders all fields', async () => {
     screen.getByText(/With his brim pulled way down low/i),
   ).toBeInTheDocument();
   //immagine di background
-  const backgroundImage = document.querySelector('.background-image');
-  expect(backgroundImage).toHaveStyle(
-    `background-image: url(http://localhost:3000/is-this-the-real-life/business-teamwork-join-hands-together-business-teamwork-concept_1150-1804.webp/@@images/image/huge);`,
-  );
+  const backgroundImage = document.querySelector('.background-image img');
+  expect(backgroundImage).toBeInTheDocument();
   //link ad altro
   expect(
     screen.getByRole('link', {

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

@@ -1,6 +1,6 @@
 /**
  * HeaderSlim component.
- * @module components/ItaliaTheme/Header/HeaderSlim
+ * @module components/ItaliaTheme/Header/HeaderSlim/HeaderSlim
  */
 
 import React from 'react';

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

@@ -1,6 +1,6 @@
 /**
  * HeaderSlim component.
- * @module components/ItaliaTheme/Header/HeaderSlim
+ * @module components/ItaliaTheme/Header/HeaderSlim/HeaderSlimRightZone
  */
 
 import React from 'react';

src/components/ItaliaTheme/Header/HeaderSlim/index.js

@@ -0,0 +1,3 @@
+import HeaderSlim from 'design-comuni-plone-theme/components/ItaliaTheme/Header/HeaderSlim/HeaderSlim';
+
+export default HeaderSlim;

src/components/ItaliaTheme/index.js

@@ -32,7 +32,7 @@ export GalleryPreview from 'design-comuni-plone-theme/components/ItaliaTheme/Gal
 
 /********* LAYOUT ********* */
 export LanguageSelector from 'design-comuni-plone-theme/components/ItaliaTheme/LanguageSelector/LanguageSelector';
-export HeaderSlim from 'design-comuni-plone-theme/components/ItaliaTheme/Header/HeaderSlim';
+export HeaderSlim from 'design-comuni-plone-theme/components/ItaliaTheme/Header/HeaderSlim/HeaderSlim';
 export HeaderSlimRightZone from 'design-comuni-plone-theme/components/ItaliaTheme/Header/HeaderSlim/HeaderSlimRightZone';
 export HeaderLogin from 'design-comuni-plone-theme/components/ItaliaTheme/Header/HeaderSlim/HeaderLogin';
 export LoginButton from 'design-comuni-plone-theme/components/ItaliaTheme/Header/HeaderSlim/LoginButton';

src/theme/ItaliaTheme/Blocks/_iconBlocks.scss

@@ -26,17 +26,35 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-position: top center;
-    background-repeat: no-repeat;
-    background-size: cover;
+    overflow: hidden;
 
+    img {
+      position: absolute;
+      min-width: 100%;
+      min-height: 100%;
+      height: auto;
+      width: auto;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      max-width: unset;
+    }
     &:after {
       position: absolute;
       width: 100%;
       height: 100%;
-      background-color: $primary;
+      background-color: rgba(
+        $primary,
+        0.85
+      ); // serve per fare la trasparenza sull'immagine di sfondo.
       content: '';
     }
+
+    &.no-image {
+      &:after {
+        background-color: $primary;
+      }
+    }
   }
 
   .block-header {

yarn.lock

@@ -6576,7 +6576,7 @@ __metadata:
     volto-dropdownmenu: 4.1.1
     volto-editablefooter: 5.1.0
     volto-feedback: 0.3.0
-    volto-form-block: 3.7.0
+    volto-form-block: 3.7.1
     volto-gdpr-privacy: 2.1.1
     volto-google-analytics: 2.0.0
     volto-multilingual-widget: 3.0.0
@@ -14355,9 +14355,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"volto-form-block@npm:3.7.0":
-  version: 3.7.0
-  resolution: "volto-form-block@npm:3.7.0"
+"volto-form-block@npm:3.7.1":
+  version: 3.7.1
+  resolution: "volto-form-block@npm:3.7.1"
   dependencies:
     "@hcaptcha/react-hcaptcha": ^0.3.6
     file-saver: ^2.0.5
@@ -14366,7 +14366,7 @@ __metadata:
   peerDependencies:
     "@plone/volto": ">=16.0.0-alpha.38"
     volto-subblocks: ^2.0.0
-  checksum: c2289a75f34027be1f8fb6f8a69628f9dfc4b773ed757cad83be7a0f42259e3efdac56d5c17dbaca98aff772abc6a1cff8edaef766fe395ad18270cb36f2cf98
+  checksum: 6cdbcb91d5bca43fa4ee828e7816df37573816854552fd00965053dd7f2496c8ee4c87838cbaa9d5e10b5496b51da1ed573ff3c300806f8d7a2e0ad55a8ca962
   languageName: node
   linkType: hard