feat: updated volto-form-block v3.3.1 and added new features in custom components, fixed layout and invalid field messages and select from drop-down menu

CHANGELOG.md

@@ -6773,4 +6773,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - added onclick to viewAll button [`baa258a`](https://github.com/RedTurtle/design-volto-theme/commit/baa258a983f9619b18f9c8d9fb078fe9b17f338b)
 - todo [`7814f01`](https://github.com/RedTurtle/design-volto-theme/commit/7814f01e5dd883c83bca4ecf53425ada9942d9ab)
 - updated gitignore with .history [`e73a28c`](https://github.com/RedTurtle/design-volto-theme/commit/e73a28c94176a172219c1a740a97047b5e2fa400)
-- Added nvmrc [`fd54a3c`](https://github.com/RedTurtle/design-volto-theme/commit/fd54a3cbcf8df22997f036919dfafda870f85db7)
+- Added nvmrc [`fd54a3c`](https://github.com/RedTurtle/design-volto-theme/commit/fd54a3cbcf8df22997f036919dfafda870f85db7)

RELEASE.md

@@ -43,11 +43,22 @@
 
 ## Versione X.X.X (dd/mm/yyyy)
 
+### Migliorie
+
+- Nel blocco form è stata aggiunta una legenda per i campi obbligatori.
+
+### Novità
+
+- Aggiornato il plugin del blocco Form, adesso si ha la possibilità di aggiungere un pulsante per resettare i campi e nella sidebar è presente un nuovo campo per creare un messaggio personalizzato dopo l'invio della form, i campi di tipo: testo, email, data e textarea hanno un identificativo che può essere utilizzato per restituire il valore di quei campi nel messaggio personalizzato.
+
 ### Fix
 
 - L'icona per aprire il menu in mobile è ora visibile anche quando l'header del sito è bianca.
 - La descrizione nelle card per i punti di contatto non mostrano più tutte le iniziali in maiuscolo.
 - Il colore dei link nel menu mobile è ora accessibile per tutti i temi.
+- Il layout dei campi di input "in errore" del blocco Form è stato uniformato.
+- La tendina delle select nel blocco Form non si sovrappone più ai campi sottostanti.
+- Sistemato alert di errore nel blocco Form che nascondeva il form quando un campo non era valido, ora continua a visualizzarsi anche la form.
 
 ## Versione 11.5.1 (19/02/2024)
 

locales/de/LC_MESSAGES/volto.po

@@ -2115,6 +2115,16 @@ msgstr ""
 msgid "fine_termine"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2275,6 +2285,11 @@ msgstr ""
 msgid "legami_strutture_figlie"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"

locales/en/LC_MESSAGES/volto.po

@@ -2100,6 +2100,16 @@ msgstr "Search"
 msgid "fine_termine"
 msgstr "End of term"
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr "Cancel"
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr "Restart"
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2260,6 +2270,11 @@ msgstr "Association service or office"
 msgid "legami_strutture_figlie"
 msgstr "Internal services or offices"
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr "Fields marked with (*) are required."
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"

locales/es/LC_MESSAGES/volto.po

@@ -2109,6 +2109,16 @@ msgstr "Buscar"
 msgid "fine_termine"
 msgstr "Fin de los términos"
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2269,6 +2279,11 @@ msgstr "Servicio u oficina de la asociación"
 msgid "legami_strutture_figlie"
 msgstr "Servicios internos u oficinas"
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"

locales/fr/LC_MESSAGES/volto.po

@@ -2117,6 +2117,16 @@ msgstr "Rechercher"
 msgid "fine_termine"
 msgstr "Fin du mandat"
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2277,6 +2287,11 @@ msgstr ""
 msgid "legami_strutture_figlie"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr "Les champs marqués d'une (*) sont obligatoires."
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"

locales/it/LC_MESSAGES/volto.po

@@ -2100,6 +2100,16 @@ msgstr "Cerca"
 msgid "fine_termine"
 msgstr "Fine termine"
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr "Annulla"
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr "Ricomincia"
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2260,6 +2270,11 @@ msgstr "Unità organizzativa genitore"
 msgid "legami_strutture_figlie"
 msgstr "Servizi o uffici interni"
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr "I campi contrassegnati da (*) sono obbligatori."
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"

locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-02-19T11:08:36.048Z\n"
+"POT-Creation-Date: 2024-02-29T16:36:05.160Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -2102,6 +2102,16 @@ msgstr ""
 msgid "fine_termine"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2262,6 +2272,11 @@ msgstr ""
 msgid "legami_strutture_figlie"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"

package.json

@@ -146,7 +146,7 @@
     "volto-dropdownmenu": "4.1.1",
     "volto-editablefooter": "5.0.3",
     "volto-feedback": "0.2.0",
-    "volto-form-block": "3.1.0",
+    "volto-form-block": "3.3.1",
     "volto-gdpr-privacy": "2.1.1",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "3.0.0",

src/components/ItaliaTheme/manage/Widgets/FileWidget.jsx

@@ -56,7 +56,8 @@ const messages = defineMessages({
  * @returns {string} Markup of the component.
  */
 const FileWidget = (props) => {
-  const { id, value, onChange, label, onEdit, infoText } = props;
+  const { id, value, onChange, label, onEdit, infoText, required, invalid } =
+    props;
   const [isImage, setIsImage] = React.useState(false);
   const intl = useIntl();
 
@@ -98,8 +99,18 @@ const FileWidget = (props) => {
     reader.readAsDataURL(files[0]);
   };
 
+  let attributes = {};
+  if (required) {
+    attributes.required = true;
+    attributes['aria-required'] = true;
+  }
+
+  const isInvalid = invalid === true || invalid === 'true';
+  if (isInvalid) {
+    attributes['aria-invalid'] = true;
+  }
   return (
-    <div className="form-group ">
+    <div className="form-group">
       <label htmlFor={`field-${id}`} className="active">
         {label}
       </label>
@@ -154,6 +165,7 @@ const FileWidget = (props) => {
                   name={id}
                   type="file"
                   disabled={props.disabled || null}
+                  {...attributes}
                 />
               )}
             </div>

src/customizations/volto-form-block/components/Edit.jsx

@@ -32,6 +32,10 @@ const messages = defineMessages({
     id: 'form_default_submit_label',
     defaultMessage: 'Invia',
   },
+  default_cancel_label: {
+    id: 'form_default_cancel_label',
+    defaultMessage: 'Annulla',
+  },
   warning: {
     id: 'form_edit_warning',
     defaultMessage: 'Attenzione!',
@@ -116,6 +120,14 @@ class Edit extends SubblocksEdit {
 
                 <Row>
                   <Col align="center">
+                    {this.props.data?.show_cancel && (
+                      <Button color="secondary" className="me-2">
+                        {this.props.data.cancel_label ||
+                          this.props.intl.formatMessage(
+                            messages.default_cancel_label,
+                          )}
+                      </Button>
+                    )}
                     <Button color="primary">
                       {this.props.data.submit_label ||
                         this.props.intl.formatMessage(