design-comuni-plone-theme 11.2.1 → 11.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 
 
+## [11.3.0](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.2.1...v11.3.0) (2024-01-16)
+
+
+### Features
+
+* add new widget for event luoghi_correlati with custom form validation ([#485](https://github.com/redturtle/design-comuni-plone-theme/issues/485)) ([bea6407](https://github.com/redturtle/design-comuni-plone-theme/commit/bea64070b1cfe86781fd99c15cb492f34f95e4ff))
+* aggiunta descrizione nei punti di contatto ([#483](https://github.com/redturtle/design-comuni-plone-theme/issues/483)) ([3528f15](https://github.com/redturtle/design-comuni-plone-theme/commit/3528f15e902dfa58239be7ad309817e6c16556f7))
+
+
+### Bug Fixes
+
+* removed date filters previously set with getCalendarResults ([#487](https://github.com/redturtle/design-comuni-plone-theme/issues/487)) ([42aa789](https://github.com/redturtle/design-comuni-plone-theme/commit/42aa7898d5dfdee8017df5ec408cff326bba4d1f))
+* selectors for search block styles and added styles for dates ([#486](https://github.com/redturtle/design-comuni-plone-theme/issues/486)) ([b46fc68](https://github.com/redturtle/design-comuni-plone-theme/commit/b46fc6895dfddb9f6bd8d9a37569b8b56f3ccde5))
+* upgraded volto-dropdownmenu to 4.1.1 ([d3918e6](https://github.com/redturtle/design-comuni-plone-theme/commit/d3918e63c820ebe73835a7fdd335cd44d0e82f9f))
+
+
+### Documentation
+
+* updated publiccode and release log ([e6ea0d5](https://github.com/redturtle/design-comuni-plone-theme/commit/e6ea0d57cf6b9780989a01bfb87974ad34eceee6))
+
 ## [11.2.1](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.2.0...v11.2.1) (2024-01-15)
 
 

package/RELEASE.md

@@ -41,6 +41,18 @@
 - ...
 -->
 
+## Versione 11.3.0 (16/01/2024)
+
+### Novità
+
+- Aggiunto un campo descrizione nei punti di contatto per aiutare nella disambiguazione.
+- Ora per gli eventi è obbligatorio inserire il campo "Luoghi correlati" oppure compilare i campi dell'indirizzo.
+
+### Fix
+
+- Migliorati gli stili per i sottositi.
+- Risolto un problema con i filtri per data nel blocco Calendario.
+
 ## Versione 11.2.1 (15/01/2024)
 
 ### Migliorie

package/locales/de/LC_MESSAGES/volto.po

@@ -2251,11 +2251,6 @@ msgstr ""
 msgid "iter_del_procedimento"
 msgstr ""
 
-#: components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView
-# defaultMessage: {value}:
-msgid "label"
-msgstr ""
-
 #: components/ItaliaTheme/View/UOView/UOStructure
 # defaultMessage: Servizi o uffici di riferimento
 msgid "legami_altre_strutture"
@@ -2420,6 +2415,11 @@ msgstr ""
 msgid "luoghi_correlati"
 msgstr ""
 
+#: components/ItaliaTheme/manage/Widgets/LuoghiCorrelatiEventoWidget
+# defaultMessage: Luogo dell'evento
+msgid "luoghi_correlati_evento_widget_title"
+msgstr ""
+
 #: components/ItaliaTheme/View/NewsItemView/NewsItemLuoghiCorrelati
 # defaultMessage: Luoghi
 msgid "luoghi_notizia"

package/locales/en/LC_MESSAGES/volto.po

@@ -2236,11 +2236,6 @@ msgstr ""
 msgid "iter_del_procedimento"
 msgstr "Procedure of the procedure"
 
-#: components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView
-# defaultMessage: {value}:
-msgid "label"
-msgstr ""
-
 #: components/ItaliaTheme/View/UOView/UOStructure
 # defaultMessage: Servizi o uffici di riferimento
 msgid "legami_altre_strutture"
@@ -2405,6 +2400,11 @@ msgstr ""
 msgid "luoghi_correlati"
 msgstr ""
 
+#: components/ItaliaTheme/manage/Widgets/LuoghiCorrelatiEventoWidget
+# defaultMessage: Luogo dell'evento
+msgid "luoghi_correlati_evento_widget_title"
+msgstr "Event location"
+
 #: components/ItaliaTheme/View/NewsItemView/NewsItemLuoghiCorrelati
 # defaultMessage: Luoghi
 msgid "luoghi_notizia"

package/locales/es/LC_MESSAGES/volto.po

@@ -2245,11 +2245,6 @@ msgstr "Inserta un filtro del menú lateral para ver los resultados relacionados
 msgid "iter_del_procedimento"
 msgstr "Procedimiento"
 
-#: components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView
-# defaultMessage: {value}:
-msgid "label"
-msgstr ""
-
 #: components/ItaliaTheme/View/UOView/UOStructure
 # defaultMessage: Servizi o uffici di riferimento
 msgid "legami_altre_strutture"
@@ -2414,6 +2409,11 @@ msgstr ""
 msgid "luoghi_correlati"
 msgstr ""
 
+#: components/ItaliaTheme/manage/Widgets/LuoghiCorrelatiEventoWidget
+# defaultMessage: Luogo dell'evento
+msgid "luoghi_correlati_evento_widget_title"
+msgstr ""
+
 #: components/ItaliaTheme/View/NewsItemView/NewsItemLuoghiCorrelati
 # defaultMessage: Luoghi
 msgid "luoghi_notizia"

package/locales/fr/LC_MESSAGES/volto.po

@@ -2253,11 +2253,6 @@ msgstr ""
 msgid "iter_del_procedimento"
 msgstr "Procédure"
 
-#: components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView
-# defaultMessage: {value}:
-msgid "label"
-msgstr ""
-
 #: components/ItaliaTheme/View/UOView/UOStructure
 # defaultMessage: Servizi o uffici di riferimento
 msgid "legami_altre_strutture"
@@ -2422,6 +2417,11 @@ msgstr ""
 msgid "luoghi_correlati"
 msgstr ""
 
+#: components/ItaliaTheme/manage/Widgets/LuoghiCorrelatiEventoWidget
+# defaultMessage: Luogo dell'evento
+msgid "luoghi_correlati_evento_widget_title"
+msgstr ""
+
 #: components/ItaliaTheme/View/NewsItemView/NewsItemLuoghiCorrelati
 # defaultMessage: Luoghi
 msgid "luoghi_notizia"

package/locales/it/LC_MESSAGES/volto.po

@@ -2236,11 +2236,6 @@ msgstr "Inserire un filtro dal menù laterale per visualizzare i relativi risult
 msgid "iter_del_procedimento"
 msgstr "Iter del procedimento"
 
-#: components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView
-# defaultMessage: {value}:
-msgid "label"
-msgstr "{value}:"
-
 #: components/ItaliaTheme/View/UOView/UOStructure
 # defaultMessage: Servizi o uffici di riferimento
 msgid "legami_altre_strutture"
@@ -2405,6 +2400,11 @@ msgstr "Logo"
 msgid "luoghi_correlati"
 msgstr "Luoghi correlati"
 
+#: components/ItaliaTheme/manage/Widgets/LuoghiCorrelatiEventoWidget
+# defaultMessage: Luogo dell'evento
+msgid "luoghi_correlati_evento_widget_title"
+msgstr "Luogo dell'evento"
+
 #: components/ItaliaTheme/View/NewsItemView/NewsItemLuoghiCorrelati
 # defaultMessage: Luoghi
 msgid "luoghi_notizia"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-01-11T13:44:40.490Z\n"
+"POT-Creation-Date: 2024-01-15T16:05:18.583Z\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"
@@ -2238,11 +2238,6 @@ msgstr ""
 msgid "iter_del_procedimento"
 msgstr ""
 
-#: components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView
-# defaultMessage: {value}:
-msgid "label"
-msgstr ""
-
 #: components/ItaliaTheme/View/UOView/UOStructure
 # defaultMessage: Servizi o uffici di riferimento
 msgid "legami_altre_strutture"
@@ -2407,6 +2402,11 @@ msgstr ""
 msgid "luoghi_correlati"
 msgstr ""
 
+#: components/ItaliaTheme/manage/Widgets/LuoghiCorrelatiEventoWidget
+# defaultMessage: Luogo dell'evento
+msgid "luoghi_correlati_evento_widget_title"
+msgstr ""
+
 #: components/ItaliaTheme/View/NewsItemView/NewsItemLuoghiCorrelati
 # defaultMessage: Luoghi
 msgid "luoghi_notizia"

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.2.1",
+  "version": "11.3.0",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -143,7 +143,7 @@
     "typeface-titillium-web": "0.0.72",
     "volto-blocks-widget": "3.1.0",
     "volto-data-grid-widget": "2.3.1",
-    "volto-dropdownmenu": "4.1.0",
+    "volto-dropdownmenu": "4.1.1",
     "volto-editablefooter": "5.0.3",
     "volto-feedback": "0.1.5",
     "volto-form-block": "3.1.0",

package/publiccode.yml

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

package/src/components/ItaliaTheme/Blocks/Calendar/Item.jsx

@@ -40,6 +40,11 @@ const Item = ({ day, path, query, inEditMode, data }) => {
   const dayStart = _day.startOf('day').format('YYYY/MM/DD HH:mm');
   const dayEnd = _day.endOf('day').format('YYYY/MM/DD HH:mm');
 
+  // remove date filters previously set for getCalendarResults in Body
+  const filtersWithoutDate = query.query.filter(
+    (el) => !el.o.includes('.date.'),
+  );
+
   useDeepCompareEffect(() => {
     dispatch(
       getCalendarDayResults(
@@ -47,7 +52,7 @@ const Item = ({ day, path, query, inEditMode, data }) => {
         {
           ...query,
           query: [
-            ...query.query,
+            ...filtersWithoutDate,
             {
               i: 'start',
               o: 'plone.app.querystring.operation.date.between',

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

@@ -55,7 +55,10 @@ const ContactsCard = ({ contact = {}, show_title = false, ...rest }) => {
         <CardText>
           {data?.value_punto_contatto.map((pdc, index) => (
             <span key={index}>
-              <strong>{pdc.pdc_type}: </strong>
+              <strong>
+                {pdc.pdc_type}
+                {pdc.pdc_desc ? ` - ${pdc.pdc_desc}` : ''}:{' '}
+              </strong>
               {renderPDCItemValue(pdc)}
             </span>
           )) ?? null}

package/src/components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView.jsx

@@ -69,10 +69,6 @@ const messages = defineMessages({
     id: 'twitter',
     defaultMessage: 'Twitter',
   },
-  label: {
-    id: 'label',
-    defaultMessage: '{value}:',
-  },
   contatti: {
     id: 'contatti',
     defaultMessage: 'Contatti',
@@ -112,9 +108,8 @@ const PuntoDiContattoView = (props) => {
                   <h5 className="h6">
                     {messages[pdc?.pdc_type] === undefined
                       ? pdc?.pdc_type
-                      : intl.formatMessage(messages.label, {
-                          value: intl.formatMessage(messages[pdc?.pdc_type]),
-                        })}
+                      : intl.formatMessage(messages[pdc.pdc_type])}
+                    {pdc?.pdc_desc && ` - ${pdc.pdc_desc}`}:
                     <span className="ms-1">{renderPDCItemValue(pdc)}</span>
                   </h5>
                 </div>

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

@@ -0,0 +1,64 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { Form } from 'semantic-ui-react';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  luoghi_correlati_evento_widget_title: {
+    id: 'luoghi_correlati_evento_widget_title',
+    defaultMessage: "Luogo dell'evento",
+  },
+});
+
+const LuoghiCorrelatiEventoWidget = (props) => {
+  const Widget = config.widgets.factory['Relation List'];
+  const intl = useIntl();
+
+  return (
+    <Form.Field
+      inline
+      required={false}
+      className={cx(
+        'help',
+        'luoghi-correlati-evento-widget',
+        `field-wrapper-${props.id}`,
+        props?.multilingual_options?.language_independent
+          ? 'language-independent-field'
+          : null,
+      )}
+    >
+      <div className="introduction-helper-wrapper">
+        <h3 className="field-title">
+          {intl.formatMessage(messages.luoghi_correlati_evento_widget_title)}
+        </h3>
+        <p className="help">
+          Sezione obbligatoria secondo il{' '}
+          <a
+            target="_blank"
+            href="https://docs.italia.it/italia/designers-italia/design-comuni-docs/it/versione-corrente/conformita/buone-pratiche-asseverazione.html"
+            rel="noopener noreferrer"
+          >
+            documento di buone pratiche per l&apos;asseverazione dei siti
+          </a>
+          . Per confermare la presenza in pagina della relativa sezione devono
+          essere presenti:
+          <ul>
+            <li>
+              «Luoghi correlati» che è un campo con un riferimento ad un oggetto
+              di tipo Luogo già presente sul sito. Se compilato, questo campo è
+              sufficiente per la validazione della compilazione del modulo.
+            </li>
+            <li>
+              Se non è possibile compilare il campo «Luoghi correlati», è
+              necessario compilare almeno i campi «Nome sede», «Via», «Città» e
+              «Nazione» sottostanti.
+            </li>
+          </ul>
+        </p>
+      </div>
+      <Widget {...props} />
+    </Form.Field>
+  );
+};
+
+export default LuoghiCorrelatiEventoWidget;

package/src/config/Widgets/widgets.js

@@ -17,6 +17,7 @@ import {
   LocationFiltersWidget,
   CanaleDigitaleWidget,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import LuoghiCorrelatiEventoWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/LuoghiCorrelatiEventoWidget';
 
 const getItaliaWidgets = (config) => {
   config.registerComponent({
@@ -86,6 +87,7 @@ const getItaliaWidgets = (config) => {
       color_list: ColorListWidget,
       path_filters: PathFiltersWidget,
       location_filter: LocationFiltersWidget,
+      luoghi_correlati_evento: LuoghiCorrelatiEventoWidget,
     },
   };
 };

package/src/customizations/volto/components/manage/Widgets/SelectWidget.jsx

@@ -0,0 +1,314 @@
+/**
+ * SelectWidget component.
+ * @module components/manage/Widgets/SelectWidget
+ * Customizations:
+ * - pass props.onBlur to Select component
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { map } from 'lodash';
+import { defineMessages, injectIntl } from 'react-intl';
+import {
+  getVocabFromHint,
+  getVocabFromField,
+  getVocabFromItems,
+} from '@plone/volto/helpers';
+import { FormFieldWrapper } from '@plone/volto/components';
+import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
+import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
+
+import {
+  customSelectStyles,
+  DropdownIndicator,
+  ClearIndicator,
+  Option,
+  selectTheme,
+  MenuList,
+  MultiValueContainer,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+const messages = defineMessages({
+  default: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  idTitle: {
+    id: 'Short Name',
+    defaultMessage: 'Short Name',
+  },
+  idDescription: {
+    id: 'Used for programmatic access to the fieldset.',
+    defaultMessage: 'Used for programmatic access to the fieldset.',
+  },
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  description: {
+    id: 'Description',
+    defaultMessage: 'Description',
+  },
+  close: {
+    id: 'Close',
+    defaultMessage: 'Close',
+  },
+  choices: {
+    id: 'Choices',
+    defaultMessage: 'Choices',
+  },
+  required: {
+    id: 'Required',
+    defaultMessage: 'Required',
+  },
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+  no_value: {
+    id: 'No value',
+    defaultMessage: 'No value',
+  },
+  no_options: {
+    id: 'No options',
+    defaultMessage: 'No options',
+  },
+});
+
+/**
+ * SelectWidget component class.
+ * @function SelectWidget
+ * @returns {string} Markup of the component.
+ */
+class SelectWidget extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    required: PropTypes.bool,
+    error: PropTypes.arrayOf(PropTypes.string),
+    getVocabulary: PropTypes.func.isRequired,
+    getVocabularyTokenTitle: PropTypes.func.isRequired,
+    choices: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    ),
+    items: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    widgetOptions: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    value: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+      PropTypes.bool,
+      PropTypes.func,
+      PropTypes.array,
+    ]),
+    onChange: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
+    onClick: PropTypes.func,
+    onEdit: PropTypes.func,
+    onDelete: PropTypes.func,
+    wrapped: PropTypes.bool,
+    noValueOption: PropTypes.bool,
+    customOptionStyling: PropTypes.any,
+    isMulti: PropTypes.bool,
+    placeholder: PropTypes.string,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    items: {
+      vocabulary: null,
+    },
+    widgetOptions: {
+      vocabulary: null,
+    },
+    error: [],
+    choices: [],
+    value: null,
+    onChange: () => {},
+    onBlur: () => {},
+    onClick: () => {},
+    onEdit: null,
+    onDelete: null,
+    noValueOption: true,
+    customOptionStyling: null,
+  };
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    if (
+      (!this.props.choices || this.props.choices?.length === 0) &&
+      this.props.vocabBaseUrl
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.vocabBaseUrl !== prevProps.vocabBaseUrl &&
+      (!this.props.choices || this.props.choices?.length === 0)
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { id, choices, value, intl, onChange, onBlur } = this.props;
+    const normalizedValue = normalizeValue(choices, value, intl);
+    // Make sure that both disabled and isDisabled (from the DX layout feat work)
+    const disabled = this.props.disabled || this.props.isDisabled;
+    const Select = this.props.reactSelect.default;
+
+    let options = this.props.vocabBaseUrl
+      ? this.props.choices
+      : [
+          ...map(choices, (option) => ({
+            value: option[0],
+            label:
+              // Fix "None" on the serializer, to remove when fixed in p.restapi
+              option[1] !== 'None' && option[1] ? option[1] : option[0],
+          })),
+          // Only set "no-value" option if there's no default in the field
+          // TODO: also if this.props.defaultValue?
+          ...(this.props.noValueOption &&
+          (this.props.default === undefined || this.props.default === null)
+            ? [
+                {
+                  label: this.props.intl.formatMessage(messages.no_value),
+                  value: 'no-value',
+                },
+              ]
+            : []),
+        ];
+
+    const isMulti = this.props.isMulti
+      ? this.props.isMulti
+      : id === 'roles' || id === 'groups' || this.props.type === 'array';
+
+    return (
+      <FormFieldWrapper {...this.props}>
+        <Select
+          id={`field-${id}`}
+          key={choices}
+          name={id}
+          menuShouldScrollIntoView={false}
+          isDisabled={disabled}
+          isSearchable={true}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          isMulti={isMulti}
+          options={options}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            ...(options?.length > 25 && {
+              MenuList,
+            }),
+            MultiValueContainer,
+            DropdownIndicator,
+            ClearIndicator,
+            Option: this.props.customOptionStyling || Option,
+          }}
+          value={normalizedValue}
+          placeholder={
+            this.props.placeholder ??
+            this.props.intl.formatMessage(messages.select)
+          }
+          onChange={(selectedOption) => {
+            if (isMulti) {
+              return onChange(
+                id,
+                selectedOption.map((el) => el.value),
+              );
+            }
+            return onChange(
+              id,
+              selectedOption && selectedOption.value !== 'no-value'
+                ? selectedOption.value
+                : undefined,
+            );
+          }}
+          onBlur={() => onBlur(id, normalizedValue)}
+          isClearable
+        />
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export const SelectWidgetComponent = injectIntl(SelectWidget);
+
+export default compose(
+  injectLazyLibs(['reactSelect']),
+  connect(
+    (state, props) => {
+      const vocabBaseUrl = !props.choices
+        ? getVocabFromHint(props) ||
+          getVocabFromField(props) ||
+          getVocabFromItems(props)
+        : '';
+
+      const vocabState =
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.intl.locale];
+
+      // If the schema already has the choices in it, then do not try to get the vocab,
+      // even if there is one
+      if (props.choices) {
+        return {
+          choices: props.choices,
+          lang: state.intl.locale,
+        };
+      } else if (vocabState) {
+        return {
+          vocabBaseUrl,
+          choices: vocabState?.items ?? [],
+          lang: state.intl.locale,
+        };
+        // There is a moment that vocabState is not there yet, so we need to pass the
+        // vocabBaseUrl to the component.
+      } else if (vocabBaseUrl) {
+        return {
+          vocabBaseUrl,
+          lang: state.intl.locale,
+        };
+      }
+      return { lang: state.intl.locale };
+    },
+    { getVocabulary, getVocabularyTokenTitle },
+  ),
+)(SelectWidgetComponent);

package/src/helpers/FormValidation/FormValidationHelpers.js

@@ -254,4 +254,102 @@ export const eventFormValidationHelper = (
       errors['end'].push(formatMessage(customValidationMessages.event_end));
     }
   }
+
+  // Validazione dei campi obbligatori per il luogo
+  const fullMandatoryList = [
+    'luoghi_correlati',
+    'nome_sede',
+    'street',
+    'zip_code',
+    'city',
+    'country',
+  ];
+
+  // Luoghi correlati è stato modificato
+  if ('luoghi_correlati' in touchedField) {
+    if (
+      isEmpty(touchedField.luoghi_correlati) &&
+      // Se siamo qui vuol dire che luoghi correlati è stato svuotato.
+      (isEmpty(formData.nome_sede) ||
+        isEmpty(formData.street) ||
+        isEmpty(formData.zip_code) ||
+        isEmpty(formData.city) ||
+        isEmpty(formData.country))
+    ) {
+      // Se gli altri non sono tutti compilati, li metto tutti obbligatori
+      fields.push(...fullMandatoryList);
+    }
+  }
+  // Uno dei campi dell'indirizzo viene compilato.
+  // Per ciascuno controllo se luoghi_correlati è compilato.
+  // Se non lo è e ne manca almeno uno degli altri, metto tutto obbligatorio.
+  // Per ciascuno uso il touchedField quando è stato modificato lui stesso,
+  // mentre controllo da formData per gli altri.
+  else if ('nome_sede' in touchedField) {
+    if (
+      isEmpty(formData.luoghi_correlati) &&
+      (isEmpty(touchedField.nome_sede) ||
+        isEmpty(formData.street) ||
+        isEmpty(formData.zip_code) ||
+        isEmpty(formData.city) ||
+        isEmpty(formData.country))
+    ) {
+      fields.push(...fullMandatoryList);
+    }
+  } else if ('street' in touchedField) {
+    if (
+      isEmpty(formData.luoghi_correlati) &&
+      (isEmpty(formData.nome_sede) ||
+        isEmpty(touchedField.street) ||
+        isEmpty(formData.zip_code) ||
+        isEmpty(formData.city) ||
+        isEmpty(formData.country))
+    ) {
+      fields.push(...fullMandatoryList);
+    }
+  } else if ('zip_code' in touchedField) {
+    if (
+      isEmpty(formData.luoghi_correlati) &&
+      (isEmpty(formData.nome_sede) ||
+        isEmpty(formData.street) ||
+        isEmpty(touchedField.zip_code) ||
+        isEmpty(formData.city) ||
+        isEmpty(formData.country))
+    ) {
+      fields.push(...fullMandatoryList);
+    }
+  } else if ('city' in touchedField) {
+    if (
+      isEmpty(formData.luoghi_correlati) &&
+      (isEmpty(formData.nome_sede) ||
+        isEmpty(formData.street) ||
+        isEmpty(formData.zip_code) ||
+        isEmpty(touchedField.city) ||
+        isEmpty(formData.country))
+    ) {
+      fields.push(...fullMandatoryList);
+    }
+  } else if ('country' in touchedField) {
+    if (
+      isEmpty(formData.luoghi_correlati) &&
+      (isEmpty(formData.nome_sede) ||
+        isEmpty(formData.street) ||
+        isEmpty(formData.zip_code) ||
+        isEmpty(formData.city) ||
+        isEmpty(touchedField.country))
+    ) {
+      fields.push(...fullMandatoryList);
+    }
+  }
+  // Il campo modificato è un altro, faccio un check base su tutti i campi
+  else if (
+    isEmpty(formData.luoghi_correlati) &&
+    (isEmpty(formData.nome_sede) ||
+      isEmpty(formData.street) ||
+      isEmpty(formData.zip_code) ||
+      isEmpty(formData.city) ||
+      isEmpty(formData.country))
+  ) {
+    fields.push(...fullMandatoryList);
+  }
 };

package/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss

@@ -61,6 +61,7 @@
             }
           }
         }
+
         .date-filter {
           .DateRangePickerInput {
             .DateInput_input {
@@ -81,7 +82,7 @@
 
     .bg-secondary {
       .search-container {
-        .filter-wrapper {
+        &.filter-wrapper {
           .select-filter {
             .react-select__control {
               .react-select__placeholder {
@@ -93,7 +94,8 @@
               }
             }
           }
-          .date-filter {
+
+          &.date-filter {
             .DateRangePickerInput {
               .DateInput_input {
                 color: $subsite-secondary-text;
@@ -108,6 +110,17 @@
               }
             }
           }
+
+          &.date-filter .DateRangePickerInput {
+            .DateInput_input {
+              color: $subsite-secondary-text !important;
+            }
+
+            .DateRangePickerInput_arrow .DateRangePickerInput_arrow_svg,
+            .DateRangePickerInput_clearDates svg {
+              fill: $subsite-secondary-text !important;
+            }
+          }
         }
       }
     }

package/src/theme/ItaliaTheme/Widgets/_luoghiCorrelatiEventoWidget.scss

@@ -0,0 +1,15 @@
+.luoghi-correlati-evento-widget {
+  .introduction-helper-wrapper {
+    padding: 1rem 1rem 0 1rem;
+  }
+
+  .field-title::after {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-left: 5px;
+    background-color: #e40166;
+    content: '';
+  }
+}

package/src/theme/site.scss

@@ -118,6 +118,7 @@
 @import 'ItaliaTheme/Widgets/textInput';
 @import 'ItaliaTheme/Widgets/dataGridWidget';
 @import 'ItaliaTheme/Widgets/canaleDigitaleWidget';
+@import 'ItaliaTheme/Widgets/luoghiCorrelatiEventoWidget';
 @import 'ItaliaTheme/Components/megamenu';
 @import 'ItaliaTheme/Components/sharing';
 @import 'ItaliaTheme/Components/logo';