feat: updated volto-form-block v3.3.1 and added new features in custo…

…m components, fixed layout and invalid field messages and select from drop-down menu (#556) * feat!: upgrade to volto 17.5.0 (#382) * fix: change image component in ctablock * ci: upgrade volto * fix: change image component in hlcontent * fix: change image component listingimage * fix: change image component subevents * fix: change image component gallery * fix: change image component GenericCard * fix: change image component * fix: change image component (sponsor + venuesmall) * fix: change image component * fix: minutes with 00 format * docs: rimosso commento obsoleto * fix: review giulia * fix: review giulia * fix: scroll position on h2 .visually-hidden * feat: upgrade to volto 17.5.0 * docs: fix order Co-authored-by: Piero Nicolli <[email protected]> * fix: review piero * fix: sponsor evento without image * fix: gallery preview --------- Co-authored-by: Giulia Ghisini <[email protected]> Co-authored-by: Piero Nicolli <[email protected]> * feat!: upgrade to design-react-kit 5.0.0-1 and bootstrap-italia 2.6.1 (#407) * fix: change image component in ctablock * ci: upgrade volto * fix: change image component in hlcontent * fix: change image component listingimage * fix: change image component subevents * fix: change image component gallery * fix: change image component GenericCard * fix: change image component * fix: change image component (sponsor + venuesmall) * fix: change image component * fix: minutes with 00 format * docs: rimosso commento obsoleto * fix: review giulia * fix: review giulia * fix: scroll position on h2 .visually-hidden * feat: upgrade to volto 17.5.0 * docs: fix order Co-authored-by: Piero Nicolli <[email protected]> * fix: review piero * fix: sponsor evento without image * fix: gallery preview * feat: upgrade to design-react-kit 5.0.0-1 and bootstrap-italia 2.6.1 * fix: fix for new design-react-kit * fix: card image height changed like bootstrap-italia templates * fix: revert card image height changed like bootstrap-italia templates * fix: stepper style ul * fix. pr fixes * chore: updated locales * fix: screen reader for SearchModal * fix: screen reader in SearchModal * chore: update dependencies * fix: bootstrap imports * fix: locales * fix: duplicate css --------- Co-authored-by: Mauro Amico <[email protected]> Co-authored-by: Piero Nicolli <[email protected]> Co-authored-by: Piero Nicolli <[email protected]> * chore: release v11.0.0-alpha.0 * feat!: card image height from newest bootstrap-italia version (#406) * fix: change image component in ctablock * ci: upgrade volto * fix: change image component in hlcontent * fix: change image component listingimage * fix: change image component subevents * fix: change image component gallery * fix: change image component GenericCard * fix: change image component * fix: change image component (sponsor + venuesmall) * fix: change image component * fix: minutes with 00 format * docs: rimosso commento obsoleto * fix: review giulia * fix: review giulia * fix: scroll position on h2 .visually-hidden * feat: upgrade to volto 17.5.0 * docs: fix order Co-authored-by: Piero Nicolli <[email protected]> * fix: review piero * fix: sponsor evento without image * fix: gallery preview * feat: upgrade to design-react-kit 5.0.0-1 and bootstrap-italia 2.6.1 * fix: fix for new design-react-kit * fix: card image height changed like bootstrap-italia templates * fix: revert card image height changed like bootstrap-italia templates * fix: revert text-secondary class * fix: stepper style ul * fix. pr fixes * chore: updated locales * fix: screen reader for SearchModal * fix: screen reader in SearchModal * chore: update dependencies * fix: bootstrap imports * chore: release v11.0.0-alpha.0 * feat:change image card height --------- Co-authored-by: Mauro Amico <[email protected]> Co-authored-by: Piero Nicolli <[email protected]> Co-authored-by: Piero Nicolli <[email protected]> * fix: listing block card-slide-text-template read-more alignment (#416) * chore: release v11.0.0-alpha.1 * fix: image size in listing * fix: update volto-editablefooter to 5.0.3 * fix: gallery component for ct views breaking with newer backend versions (#422) * fix: background image for NumbersBlock and Countdown block (#423) * fix: background image for NumbersBlock and Countdown block * fix: tests * chore: release v11.0.0-alpha.2 * style: fixed input form style * docs: updated release.md and changelog files * fix: remain in form if there's errors on sending form * chore: updated input type file with aria-invalid and required attributes * chore: updated formView with legend tag for required fields * chore: updated locales and release.md * feat: updated volto-form-block v3.3.1 and added new features in custom components --------- Co-authored-by: Mauro Amico <[email protected]> Co-authored-by: Giulia Ghisini <[email protected]> Co-authored-by: Piero Nicolli <[email protected]> Co-authored-by: Giulia Ghisini <[email protected]> Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Mar 4, 2024 · 4a1d0ac · 4a1d0ac
1 parent 62aa71b
commit 4a1d0ac
Show file tree

Hide file tree

Showing 17 changed files with 288 additions and 30 deletions.
diff --git a/CHANGELOG.md b/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)
diff --git a/RELEASE.md b/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.
 - Migliorato il testo alternativo per il logo NextGenerationEU nel footer.
 
 ## Versione 11.5.1 (19/02/2024)
@@ -65,7 +76,6 @@
 ### Fix
 
 - Risolto un problema riguardante la visualizzazione delle date nelle card che rappresentano un CT Evento nei vari listati nel caso in cui l'evento si sviluppi su anni diversi
-
 - Risolto un problema di visualizzazione per la sezione Date e Orari nel CT Evento quando l'evento si sviluppa su anni diversi, ora viene mostrato anche l'anno se si rientra in questa casistica
 - Nel blocco elenco, sono stati sistemati i filtri per percorso quando si clicca sul bottone configurato.
 

diff --git a/locales/de/LC_MESSAGES/volto.po b/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"

diff --git a/locales/en/LC_MESSAGES/volto.po b/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"

diff --git a/locales/es/LC_MESSAGES/volto.po b/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"

diff --git a/locales/fr/LC_MESSAGES/volto.po b/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"

diff --git a/locales/it/LC_MESSAGES/volto.po b/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"

diff --git a/locales/volto.pot b/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"

diff --git a/package.json b/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",

diff --git a/src/components/ItaliaTheme/manage/Widgets/FileWidget.jsx b/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>

diff --git a/src/customizations/volto-form-block/components/Edit.jsx b/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(