design-comuni-plone-theme 10.2.2 → 10.4.0

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/Listing/BandiInEvidenceTemplate.jsx

@@ -19,6 +19,8 @@ import {
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { viewDate } from 'design-comuni-plone-theme/helpers';
 
+import { BandoStatus } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+
 const messages = defineMessages({
   vedi: {
     id: 'bando_vedi',
@@ -40,22 +42,6 @@ const messages = defineMessages({
     id: 'bando_stato',
     defaultMessage: 'Stato:',
   },
-  open: {
-    id: 'bando_open',
-    defaultMessage: 'Attivo',
-  },
-  scheduled: {
-    id: 'bando_scheduled',
-    defaultMessage: 'Programmato',
-  },
-  closed: {
-    id: 'bando_closed',
-    defaultMessage: 'Scaduto',
-  },
-  inProgress: {
-    id: 'bando_inProgress',
-    defaultMessage: 'In corso',
-  },
   ente: {
     id: 'bando_ente',
     defaultMessage: 'Ente',
@@ -137,14 +123,13 @@ const BandiInEvidenceTemplate = ({
                     )}
 
                     {/* Tipologia */}
-
-                    {show_tipologia && item.tipologia_bando?.title?.length > 0 && (
+                    {show_tipologia && item?.tipologia_bando && (
                       <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
                         <div className="bando-dati-label me-2">
                           {intl.formatMessage(messages.tipologia)}:
                         </div>
                         <span className="bando-dati-date">
-                          {item.tipologia_bando?.title}
+                          {item.tipologia_bando}
                         </span>
                       </span>
                     )}
@@ -215,7 +200,7 @@ const BandiInEvidenceTemplate = ({
                               ),
                             })}
                           >
-                            {intl.formatMessage(messages[item.bando_state[0]])}
+                            <BandoStatus content={item} />
                           </div>
                         </span>
                       </span>

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;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  ente: {
+    id: 'bando_ente',
+    defaultMessage: 'Ente erogatore',
+  },
+});
+
+const BandoTextEnte = ({ content }) => {
+  const intl = useIntl();
+  return 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.propTypes = {
+  content: PropTypes.shape({
+    ente_bando: PropTypes.arrayOf(PropTypes.string),
+  }).isRequired,
+};
+export default BandoTextEnte;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  tipologia_bando: {
+    id: 'tipologia_bando',
+    defaultMessage: 'Tipologia del bando',
+  },
+});
+
+const BandoTextTipologia = ({ content }) => {
+  const intl = useIntl();
+  return content?.tipologia_bando ? (
+    <>
+      <h3 className="h5">{intl.formatMessage(messages.tipologia_bando)}</h3>
+      <span>{content.tipologia_bando.title}</span>
+    </>
+  ) : (
+    <></>
+  );
+};
+
+BandoTextTipologia.propTypes = {
+  content: PropTypes.shape({
+    tipologia_bando: PropTypes.shape({
+      title: PropTypes.string,
+      token: PropTypes.string,
+    }),
+  }).isRequired,
+};
+export default BandoTextTipologia;

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

@@ -0,0 +1,38 @@
+/**
+ * Importante: (06/11/2023)
+ * Component creato per essere possibile customizzare in modo più efficiente le traduzioni per lo status dei bandi.
+ * Deve essere cancellato dopo l'aggiornamento di Volto
+ */
+
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  open: {
+    id: 'bando_open',
+    defaultMessage: 'Attivo',
+  },
+  closed: {
+    id: 'bando_closed',
+    defaultMessage: 'Scaduto',
+  },
+  inProgress: {
+    id: 'bando_inProgress',
+    defaultMessage: 'In corso',
+  },
+  scheduled: {
+    id: 'bando_scheduled',
+    defaultMessage: 'Programmato',
+  },
+});
+
+/**
+ * BandoStatus view component class.
+ * @function BandoStatus
+ */
+
+const BandoStatus = ({ content }) => {
+  const intl = useIntl();
+  return <>{intl.formatMessage(messages[content.bando_state[0]])}</>;
+};
+
+export default BandoStatus;