design-comuni-plone-theme 10.3.0 → 10.4.0

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-11-07T09:01:50.705Z\n"
+"POT-Creation-Date: 2023-11-14T17:26:17.874Z\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"
@@ -73,6 +73,7 @@ msgstr ""
 msgid "CardImageRight"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Alert/Sidebar
 #: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
 # defaultMessage: Dimensione immagine
 msgid "CardImageSize"
@@ -120,21 +121,6 @@ msgstr ""
 msgid "Color"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/Alert/Sidebar
-# defaultMessage: Rosso
-msgid "Color_danger"
-msgstr ""
-
-#: components/ItaliaTheme/Blocks/Alert/Sidebar
-# defaultMessage: Giallo
-msgid "Color_warning"
-msgstr ""
-
-#: components/ItaliaTheme/Blocks/Alert/Sidebar
-# defaultMessage: Arancione
-msgid "Color_warning_orange"
-msgstr ""
-
 #: components/ItaliaTheme/View/EventoView/EventoContatti
 # defaultMessage: Contatti
 msgid "Contatti"
@@ -698,7 +684,7 @@ msgstr ""
 msgid "VenuesSmall"
 msgstr ""
 
-#: components/ItaliaTheme/View/VenueView/VenueDescription
+#: components/ItaliaTheme/View/VenueView/VenueMultimedia
 # defaultMessage: Video
 msgid "Video"
 msgstr ""
@@ -1008,7 +994,7 @@ msgstr ""
 msgid "bando_data_pubblicazione"
 msgstr ""
 
-#: components/ItaliaTheme/View/BandoView/BandoText
+#: components/ItaliaTheme/View/BandoView/BandoTextDestinatari
 # defaultMessage: Destinatari del bando
 msgid "bando_destinatari"
 msgstr ""
@@ -1019,7 +1005,7 @@ msgid "bando_effective"
 msgstr ""
 
 #: components/ItaliaTheme/Blocks/Listing/BandiInEvidenceTemplate
-#: components/ItaliaTheme/View/BandoView/BandoText
+#: components/ItaliaTheme/View/BandoView/BandoTextEnte
 # defaultMessage: Ente
 msgid "bando_ente"
 msgstr ""
@@ -1204,6 +1190,16 @@ msgstr ""
 msgid "codice_ipa"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Alert/Sidebar
+# defaultMessage: Rosso
+msgid "color_danger"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Alert/Sidebar
+# defaultMessage: Arancione
+msgid "color_orange"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/ContactsBlock/Sidebar
 #: components/ItaliaTheme/Blocks/HighlightedContent/Sidebar
 # defaultMessage: Primario
@@ -1215,6 +1211,11 @@ msgstr ""
 msgid "color_transparent"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Alert/Sidebar
+# defaultMessage: Giallo
+msgid "color_warning"
+msgstr ""
+
 #: components/ItaliaTheme/View/IncaricoView/IncaricoView
 #: components/ItaliaTheme/View/PersonaView/PersonaDocumenti
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
@@ -1799,7 +1800,7 @@ msgstr ""
 msgid "edit_social_links"
 msgstr ""
 
-#: components/ItaliaTheme/View/VenueView/VenueDescription
+#: components/ItaliaTheme/View/VenueView/VenueElementiDiInteresse
 # defaultMessage: Elementi di interesse
 msgid "elementi_di_interesse"
 msgstr ""
@@ -2355,7 +2356,7 @@ msgid "logo-subsite-alt"
 msgstr ""
 
 #: components/ItaliaTheme/View/PuntoDiContattoView/RelatedItemsChipsPDC
-#: components/ItaliaTheme/View/VenueView/VenueDescription
+#: components/ItaliaTheme/View/VenueView/VenueLuoghiCorrelati
 # defaultMessage: Luoghi correlati
 msgid "luoghi_correlati"
 msgstr ""
@@ -3736,7 +3737,7 @@ msgstr ""
 msgid "timeline_tempi_scadenze_validation_error"
 msgstr ""
 
-#: components/ItaliaTheme/View/BandoView/BandoText
+#: components/ItaliaTheme/View/BandoView/BandoTextTipologia
 # defaultMessage: Tipologia del bando
 msgid "tipologia_bando"
 msgstr ""
@@ -3747,7 +3748,7 @@ msgstr ""
 msgid "tipologia_incarico"
 msgstr ""
 
-#: components/ItaliaTheme/View/VenueView/VenueDescription
+#: components/ItaliaTheme/View/VenueView/VenueTipologia
 # defaultMessage: Tipo di luogo
 msgid "tipologia_luogo"
 msgstr ""

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "10.3.0",
+  "version": "10.4.0",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",

package/publiccode.yml

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

package/src/components/ItaliaTheme/Blocks/Alert/Edit.jsx

@@ -59,8 +59,8 @@ class Edit extends Component {
 
   constructor(props) {
     super(props);
-    if (!this.props.data.color) {
-      this.props.data.color = 'warning';
+    if (!this.props.data.bg_color) {
+      this.props.data.bg_color = 'warning';
     }
     this.blockNode = React.createRef();
   }
@@ -78,8 +78,8 @@ class Edit extends Component {
         >
           <Row
             className={cx(
-              'row-full-width p-5',
-              'bg-alert-' + this.props.data.color,
+              'full-width p-5',
+              'bg-alert-' + this.props.data.bg_color,
             )}
           >
             <Container className="ui">
@@ -89,7 +89,11 @@ class Edit extends Component {
                     <img
                       src={`data:${this.props.data.image['content-type']};${this.props.data.image.encoding},${this.props.data.image.data}`}
                       alt=""
-                      className="left-image"
+                      className={cx('left-image', [
+                        this.props.data.sizeImage
+                          ? 'size-' + this.props.data.sizeImage
+                          : 'size-l',
+                      ])}
                     />
                   </Col>
                 )}

package/src/components/ItaliaTheme/Blocks/Alert/Sidebar.jsx

@@ -1,31 +1,36 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Form } from 'semantic-ui-react';
-import { Button, Grid, Segment } from 'semantic-ui-react';
+import { Segment } from 'semantic-ui-react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { FileWidget } from '@plone/volto/components';
+import { ColorListWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import ImageSizeWidget from '@plone/volto/components/manage/Widgets/ImageSizeWidget';
 
 const messages = defineMessages({
   Color: {
     id: 'Color',
     defaultMessage: 'Colore',
   },
-  Color_warning: {
-    id: 'Color_warning',
+  color_warning: {
+    id: 'color_warning',
     defaultMessage: 'Giallo',
   },
-  Color_warning_orange: {
-    id: 'Color_warning_orange',
+  color_orange: {
+    id: 'color_orange',
     defaultMessage: 'Arancione',
   },
-  Color_danger: {
-    id: 'Color_danger',
+  color_danger: {
+    id: 'color_danger',
     defaultMessage: 'Rosso',
   },
   Image: {
     id: 'Image',
     defaultMessage: 'Immagine',
   },
+  CardImageSize: {
+    id: 'CardImageSize',
+    defaultMessage: 'Dimensione immagine',
+  },
 });
 
 class Sidebar extends Component {
@@ -37,6 +42,21 @@ class Sidebar extends Component {
   };
 
   render() {
+    const bg_colors = [
+      {
+        name: 'info',
+        label: this.props.intl.formatMessage(messages.color_warning),
+      },
+      {
+        name: 'warning',
+        label: this.props.intl.formatMessage(messages.color_orange),
+      },
+      {
+        name: 'danger',
+        label: this.props.intl.formatMessage(messages.color_danger),
+      },
+    ];
+
     return (
       <Segment.Group raised>
         <header className="header pulled">
@@ -46,74 +66,18 @@ class Sidebar extends Component {
         </header>
 
         <Segment className="form">
-          <Form.Field inline required={this.props.required}>
-            <Grid>
-              <Grid.Row>
-                <Grid.Column width="4">
-                  <div className="wrapper">
-                    <label htmlFor="field-align">
-                      {this.props.intl.formatMessage(messages.Color)}
-                    </label>
-                  </div>
-                </Grid.Column>
-                <Grid.Column
-                  width="8"
-                  verticalAlign="middle"
-                  className="color-chooser"
-                >
-                  <Button.Group vertical compact>
-                    <Button
-                      icon
-                      basic={this.props.data.color !== 'warning'}
-                      color="yellow"
-                      onClick={(name, value) => {
-                        this.props.onChangeBlock(this.props.block, {
-                          ...this.props.data,
-                          color: 'warning',
-                        });
-                      }}
-                      active={this.props.data.color === 'warning'}
-                      content={this.props.intl.formatMessage(
-                        messages.Color_warning,
-                      )}
-                    />
-
-                    <Button
-                      icon
-                      basic={this.props.data.color !== 'warning-orange'}
-                      color="orange"
-                      onClick={(name, value) => {
-                        this.props.onChangeBlock(this.props.block, {
-                          ...this.props.data,
-                          color: 'warning-orange',
-                        });
-                      }}
-                      active={this.props.data.color === 'warning-orange'}
-                      content={this.props.intl.formatMessage(
-                        messages.Color_warning_orange,
-                      )}
-                    />
-
-                    <Button
-                      icon
-                      basic={this.props.data.color !== 'danger'}
-                      color="red"
-                      onClick={(name, value) => {
-                        this.props.onChangeBlock(this.props.block, {
-                          ...this.props.data,
-                          color: 'danger',
-                        });
-                      }}
-                      active={this.props.data.color === 'danger'}
-                      content={this.props.intl.formatMessage(
-                        messages.Color_danger,
-                      )}
-                    />
-                  </Button.Group>
-                </Grid.Column>
-              </Grid.Row>
-            </Grid>
-          </Form.Field>
+          <ColorListWidget
+            id="bg_color"
+            title={this.props.intl.formatMessage(messages.Color)}
+            value={this.props.data.bg_color}
+            onChange={(id, value) => {
+              this.props.onChangeBlock(this.props.block, {
+                ...this.props.data,
+                [id]: value,
+              });
+            }}
+            colors={bg_colors}
+          />
           <FileWidget
             id="image"
             title={this.props.intl.formatMessage(messages.Image)}
@@ -125,6 +89,17 @@ class Sidebar extends Component {
               });
             }}
           />
+          <ImageSizeWidget
+            id="sizeImage"
+            title={this.props.intl.formatMessage(messages.CardImageSize)}
+            onChange={(name, value) => {
+              this.props.onChangeBlock(this.props.block, {
+                ...this.props.data,
+                sizeImage: value,
+              });
+            }}
+            value={this.props.data.sizeImage}
+          />
         </Segment>
       </Segment.Group>
     );

package/src/components/ItaliaTheme/Blocks/Alert/View.jsx

@@ -29,7 +29,7 @@ const View = ({ data, pathname }) => {
 
   return (
     <section role="alert" className="block alertblock">
-      <div className={cx('full-width', 'bg-alert-' + data.color)}>
+      <div className={cx('full-width', 'bg-alert-' + data.bg_color)}>
         <Container className="p-4 pt-5 pb-5">
           <Row className="align-items-start">
             {data.image?.data && (
@@ -38,7 +38,9 @@ const View = ({ data, pathname }) => {
                   src={`data:${data.image['content-type']};${data.image.encoding},${data.image.data}`}
                   alt=""
                   aria-hidden="true"
-                  className="left-image"
+                  className={cx('left-image', [
+                    data.sizeImage ? 'size-' + data.sizeImage : 'size-l',
+                  ])}
                   loading="lazy"
                 />
               </Col>

package/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx

@@ -49,6 +49,7 @@ class Edit extends SubblocksEdit {
     super(props);
     this.state.selectedField = 'title';
   }
+
   /**
    * Render method.
    * @method render

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

@@ -11,7 +11,7 @@ const mockStore = configureStore(middlewares);
 
 const mock_fields = {
   '@type': 'alert',
-  color: 'warning',
+  bg_color: 'warning',
   image: {
     'content-type': 'image/jpeg',
     data:

package/src/components/ItaliaTheme/GalleryPreview/GalleryPreview.jsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { flattenToAppURL } from '@plone/volto/helpers';
-
 import PropTypes from 'prop-types';
 import { Modal, ModalBody, Button, ModalHeader } from 'design-react-kit';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   view_prev: {
@@ -31,18 +29,10 @@ const messages = defineMessages({
  */
 const GalleryPreview = ({ id, viewIndex, setViewIndex, items }) => {
   const intl = useIntl();
+
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const image = items[viewIndex];
 
-  let checkUrlImage = image?.image_field
-    ? image?.image_scales?.[image?.image_field]?.[0]?.scales?.larger?.download
-    : image?.image?.scales?.larger?.download ||
-      image?.image_scales?.image[0]?.scales?.larger?.download;
-
-  if (checkUrlImage?.startsWith('@@')) {
-    checkUrlImage = image['@id'] + '/' + checkUrlImage;
-  }
-
   const closeModal = () => {
     setViewIndex(null);
   };
@@ -74,7 +64,6 @@ const GalleryPreview = ({ id, viewIndex, setViewIndex, items }) => {
       {viewIndex != null && (
         <>
           <ModalHeader
-            closeButton={true}
             closeAriaLabel={intl.formatMessage(messages.close_preview)}
             toggle={closeModal}
           >
@@ -98,17 +87,15 @@ const GalleryPreview = ({ id, viewIndex, setViewIndex, items }) => {
                   <Icon color="" icon="it-arrow-left" padding={false} />
                 </Button>
               )}
-              <div className="image">
-                {checkUrlImage ? (
-                  <img
-                    src={flattenToAppURL(checkUrlImage)}
-                    loading="lazy"
-                    alt={image.title}
-                  />
-                ) : (
-                  <img src={DefaultImageSVG} alt="" />
-                )}
-              </div>
+
+              {image && (
+                <Image
+                  key={image['@id']}
+                  itemUrl={image['@id']}
+                  image={image['@id']}
+                  alt={image.title}
+                />
+              )}
 
               {items.length > 1 && (
                 <Button

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

@@ -27,7 +27,8 @@ const ParentSiteMenu = () => {
       // eslint-disable-next-line no-loop-func
       dropdownMenu.forEach((m) => {
         if (m.rootPath === s) {
-          menu = m;
+          // Filter non visible dropdown menu entries
+          menu = { ...m, items: m.items.filter((mi) => mi.visible) };
           i = 0;
         }
       });

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

@@ -7,7 +7,11 @@ import { fontAwesomeAliases } from 'design-comuni-plone-theme/helpers/index';
 
 const FontAwesomeIcon = (props) => {
   const { className, icon, prefix, title } = props;
-  const [loadedIcon, setLoadedIcon] = React.useState(null);
+  const [loadedIcon, setLoadedIcon] = React.useState({
+    module: null,
+    iconName: '',
+    family: 'solid',
+  });
 
   const getIconAlias = (icon, aliasList) => {
     if (icon in aliasList) {
@@ -17,40 +21,58 @@ const FontAwesomeIcon = (props) => {
     }
   };
 
-  let prefixKey = prefix;
-  let iconName = '';
-
-  if (Array.isArray(icon)) {
-    prefixKey = icon[0];
-    iconName = getIconAlias(icon[1], fontAwesomeAliases);
-  } else {
-    iconName = getIconAlias(icon, fontAwesomeAliases);
-  }
+  const getIconInfo = (icon, prefix) => {
+    let prefixKey = prefix;
+    let iconName = '';
+    if (Array.isArray(icon)) {
+      prefixKey = icon[0];
+      iconName = getIconAlias(icon[1], fontAwesomeAliases);
+    } else {
+      iconName = getIconAlias(icon, fontAwesomeAliases);
+    }
 
-  const prefixFolder =
-    prefixKey === 'fab' ? 'brands' : prefixKey === 'far' ? 'regular' : 'solid';
+    return [
+      prefixKey === 'fab'
+        ? 'brands'
+        : prefixKey === 'far'
+        ? 'regular'
+        : 'solid',
+      iconName,
+    ];
+  };
 
   React.useEffect(() => {
-    if (iconName && !loadedIcon) {
+    const [prefixFolder, iconName] = getIconInfo(icon, prefix);
+    if (
+      iconName &&
+      (iconName !== loadedIcon.iconName || prefixFolder !== loadedIcon.family)
+    ) {
       import(
         `design-comuni-plone-theme/icons/fontawesome-free-6.4.0-web/svgs/${prefixFolder}/${iconName}.svg`
       )
         .then((_loadedIcon) => {
-          setLoadedIcon(_loadedIcon);
+          setLoadedIcon({
+            module: _loadedIcon.default,
+            iconName,
+            family: prefixFolder,
+          });
         })
         .catch((error) => {});
     }
-  }, [iconName, loadedIcon, prefixFolder]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [icon, prefix, loadedIcon]);
 
-  return loadedIcon ? (
+  return loadedIcon.module ? (
     <svg
-      xmlns={loadedIcon.attributes && loadedIcon.attributes.xmlns}
-      viewBox={loadedIcon.attributes && loadedIcon.attributes.viewBox}
+      xmlns={loadedIcon.module.attributes && loadedIcon.module.attributes.xmlns}
+      viewBox={
+        loadedIcon.module.attributes && loadedIcon.module.attributes.viewBox
+      }
       className={`icon fa-icon ${className ?? ''}`}
       dangerouslySetInnerHTML={{
         __html: title
-          ? `<title>${title}</title>${loadedIcon.content}`
-          : loadedIcon.content,
+          ? `<title>${title}</title>${loadedIcon.module.content}`
+          : loadedIcon.module.content,
       }}
     />
   ) : icon ? (

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

@@ -7,23 +7,15 @@ import {
   richTextHasContent,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import BandoTextTipologia from 'design-comuni-plone-theme/components/ItaliaTheme/View/BandoView/BandoTextTipologia';
+import BandoTextDestinatari from 'design-comuni-plone-theme/components/ItaliaTheme/View/BandoView/BandoTextDestinatari';
+import BandoTextEnte from 'design-comuni-plone-theme/components/ItaliaTheme/View/BandoView/BandoTextEnte';
+
 const messages = defineMessages({
   descrizione: {
     id: 'descrizione_bando',
     defaultMessage: 'Descrizione',
   },
-  tipologia_bando: {
-    id: 'tipologia_bando',
-    defaultMessage: 'Tipologia del bando',
-  },
-  destinatari: {
-    id: 'bando_destinatari',
-    defaultMessage: 'Destinatari del bando',
-  },
-  ente: {
-    id: 'bando_ente',
-    defaultMessage: 'Ente erogatore',
-  },
 });
 
 const BandoText = ({ content }) => {
@@ -40,33 +32,11 @@ const BandoText = ({ content }) => {
       {/* DESCRIZIONE DEL BANDO */}
       {richTextHasContent(content?.text) && <RichText data={content?.text} />}
       {/* TIPOLOGIA DEL BANDO */}
-      {content?.tipologia_bando && (
-        <>
-          <h3 className="h5">{intl.formatMessage(messages.tipologia_bando)}</h3>
-          <span>{content.tipologia_bando.title}</span>
-        </>
-      )}
+      <BandoTextTipologia content={content} />
       {/* DESTINATARI DEL BANDO */}
-      {content?.destinatari?.length > 0 && (
-        <>
-          <h3 className="h5">{intl.formatMessage(messages.destinatari)}</h3>
-          {content.destinatari.map((item, i) => (
-            <p key={'destinatari-' + i}>{item.title}</p>
-          ))}
-        </>
-      )}
+      <BandoTextDestinatari content={content} />
       {/* ENTE DEL BANDO */}
-      {content?.ente_bando?.length > 0 && (
-        <>
-          <h3 className="h5">{intl.formatMessage(messages.ente)}</h3>
-          {content.ente_bando.map((item, i) => (
-            <span key={'ente_' + i}>
-              {item}
-              {i < content.ente_bando.length - 1 ? ', ' : ''}
-            </span>
-          ))}
-        </>
-      )}
+      <BandoTextEnte content={content} />
     </RichTextSection>
   ) : (
     <></>

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  destinatari: {
+    id: 'bando_destinatari',
+    defaultMessage: 'Destinatari del bando',
+  },
+});
+
+const BandoTextDestinatari = ({ content }) => {
+  const intl = useIntl();
+  return content?.destinatari?.length > 0 ? (
+    <>
+      <h3 className="h5">{intl.formatMessage(messages.destinatari)}</h3>
+      {content.destinatari.map((item, i) => (
+        <p key={'destinatari-' + i}>{item.title}</p>
+      ))}
+    </>
+  ) : (
+    <></>
+  );
+};
+
+BandoTextDestinatari.propTypes = {
+  content: PropTypes.shape({
+    destinatari: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        token: PropTypes.string,
+      }),
+    ),
+  }).isRequired,
+};
+export default BandoTextDestinatari;