design-comuni-plone-theme 11.6.2 → 11.7.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 
 
+## [11.7.0](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.6.2...v11.7.0) (2024-03-15)
+
+
+### Features
+
+* editable footer top ([#528](https://github.com/redturtle/design-comuni-plone-theme/issues/528)) ([542e2ec](https://github.com/redturtle/design-comuni-plone-theme/commit/542e2ecc95be9b182f7d9f6b45ef893852587022))
+* update volto-feedback 0.3.0 ([3d9dfbe](https://github.com/redturtle/design-comuni-plone-theme/commit/3d9dfbe16111065ec04924430a6d3487ab6d1b05))
+* updated volto-form-block to fix multiple form in same page and added schema field custom validator ([#586](https://github.com/redturtle/design-comuni-plone-theme/issues/586)) ([407ae18](https://github.com/redturtle/design-comuni-plone-theme/commit/407ae18d876f6d5ada3095a2990ccbe3727ba06e))
+* view error for each form field, validate form config ([#578](https://github.com/redturtle/design-comuni-plone-theme/issues/578)) ([45e2f72](https://github.com/redturtle/design-comuni-plone-theme/commit/45e2f727ac6ea5f23f57661a1acef83f94b19a2e))
+
+
+### Bug Fixes
+
+* added condition for focus when going back within feedback form ([#588](https://github.com/redturtle/design-comuni-plone-theme/issues/588)) ([7911d89](https://github.com/redturtle/design-comuni-plone-theme/commit/7911d892e04fcb5584ba52d180f8bb79768d5c28))
+* button clear in form block ([68c8bf8](https://github.com/redturtle/design-comuni-plone-theme/commit/68c8bf85183edfeb53cd5525327d6210fae18df3))
+* button type of cancel button in form block ([9a10ff8](https://github.com/redturtle/design-comuni-plone-theme/commit/9a10ff8f40b20753c9400ceb6909e3ff5a543805))
+* default value for show_type in card-with-image-template ([#579](https://github.com/redturtle/design-comuni-plone-theme/issues/579)) ([fe95462](https://github.com/redturtle/design-comuni-plone-theme/commit/fe95462a49e99c5a442023d727676b485ab8edfe))
+* imaged full width view in edit mode ([#570](https://github.com/redturtle/design-comuni-plone-theme/issues/570)) ([053183b](https://github.com/redturtle/design-comuni-plone-theme/commit/053183baea2ce3e11b365bf29559ea532af33fc1))
+* restored right border in listing block small links template ([#582](https://github.com/redturtle/design-comuni-plone-theme/issues/582)) ([beb07ad](https://github.com/redturtle/design-comuni-plone-theme/commit/beb07ad251cb5e5b96c67c6a64ac01ea3f229526))
+* update volto-form-block for subdomain mail validation ([#584](https://github.com/redturtle/design-comuni-plone-theme/issues/584)) ([92939a2](https://github.com/redturtle/design-comuni-plone-theme/commit/92939a28e59d829e05423f83dc0564b9c008692e))
+
+
+### Maintenance
+
+* Update RELEASE.md ([f308e6b](https://github.com/redturtle/design-comuni-plone-theme/commit/f308e6bf000ca0d41ccfd63557f73b1372ab8faa))
+
+
+### Documentation
+
+* fix merge mistake in the release docs ([232af7a](https://github.com/redturtle/design-comuni-plone-theme/commit/232af7a1624724e60722c346533223bea95fd8be))
+* updated publiccode and release log ([3e48692](https://github.com/redturtle/design-comuni-plone-theme/commit/3e48692faa06bf6fff7ee16a06032e1b1e7dd782))
+
 ## [11.6.2](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.6.1...v11.6.2) (2024-03-08)
 
 

package/RELEASE.md

@@ -41,17 +41,32 @@
 - ...
 -->
 
-## Versione 11.6.1 (06/03/2024)
+## Versione 11.7.0 (15/03/2024)
+
+### Novità
+
+- Ora la fascia del footer contenente il logo e il nome del sito è configurabile da pannello di controllo.
+- Nel pannello di controllo dei Feedback, ora gli utenti con permesso di eliminare elementi da questa sezione, possono eliminare i feedback.
+
+### Migliorie
+
+- Nel blocco form, se in fase di compilazione ci sono degli errori, viene mostrato un messaggio di errore specifico per ogni campo con errori.
 
 ### Fix
 
-- Quando si imposta una ricorrenza per giorni feriali negli Eventi, viene visualizzato il testo corretto "ogni giorno feriale".
+- Il bordo destro della variazione Link solo immagine del blocco Elenco è stato ripristinato.
+- Se si mettono due blocchi Form nella stessa pagina, ora funzionano correttamente.
+- Aggiustato il modulo di Feedback quando si cambia valutazione dopo averne già selezionata un'altra.
 
-## Versione 11.6.0 (05/03/2024)
+## Versione 11.6.1 (06/03/2024)
 
 ### Fix
 
+- Quando si imposta una ricorrenza per giorni feriali negli Eventi, viene visualizzato il testo corretto "ogni giorno feriale".
 - Le icone social nel menu laterale mobile sono tutte dello stesso colore.
+
+## Versione 11.6.0 (05/03/2024)
+
 ### Migliorie
 
 - Nel blocco form è stata aggiunta una legenda per i campi obbligatori.

package/jest-addon.config.js

@@ -39,6 +39,8 @@ module.exports = {
     '^volto-dropdownmenu/(.*)$':
       '<rootDir>/node_modules/volto-dropdownmenu/src/$1',
     '^volto-feedback/(.*)$': '<rootDir>/node_modules/volto-feedback/src/$1',
+    '^volto-blocks-widget/(.*)$':
+      '<rootDir>/node_modules/volto-blocks-widget/src/$1',
   },
   collectCoverage: false,
   collectCoverageFrom: [

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.6.2",
+  "version": "11.7.0",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -141,12 +141,12 @@
     "typeface-lora": "0.0.72",
     "typeface-roboto-mono": "0.0.75",
     "typeface-titillium-web": "0.0.72",
-    "volto-blocks-widget": "3.1.0",
+    "volto-blocks-widget": "3.4.0",
     "volto-data-grid-widget": "2.3.1",
     "volto-dropdownmenu": "4.1.1",
-    "volto-editablefooter": "5.0.3",
-    "volto-feedback": "0.2.0",
-    "volto-form-block": "3.3.1",
+    "volto-editablefooter": "5.1.0",
+    "volto-feedback": "0.3.0",
+    "volto-form-block": "3.5.0",
     "volto-gdpr-privacy": "2.1.1",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "3.0.0",

package/publiccode.yml

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

package/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx

@@ -50,7 +50,7 @@ const CardWithImageTemplate = (props) => {
     show_block_bg = false,
     always_show_image = false,
     set_four_columns = false,
-    show_type = true,
+    show_type = false,
     show_section,
     show_icon = true,
     show_description = true,

package/src/components/ItaliaTheme/CustomerSatisfaction/FeedbackForm.jsx

@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useEffect,
-  useLayoutEffect,
-  useCallback,
-  useMemo,
-} from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { useIntl, defineMessages } from 'react-intl';
@@ -215,7 +209,9 @@ const FeedbackForm = ({ contentType, pathname }) => {
           satisfaction > threshold ? 'positive' : 'negative'
         }-${getFormFieldValue('answer')}`,
       );
-      selectedAnswer.focus();
+      if (selectedAnswer) {
+        selectedAnswer.focus();
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [step]);

package/src/components/ItaliaTheme/CustomerSatisfaction/Steps/CommentsStep.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
 import { TextArea, Form, FormGroup } from 'design-react-kit';
 import { defineMessages } from 'react-intl';
 import { FormHeader } from 'volto-feedback';

package/src/components/ItaliaTheme/Footer/FooterMain.jsx

@@ -15,12 +15,16 @@ import {
   FooterPNRRLogo,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/';
 
+import { FooterTop } from 'volto-editablefooter';
+
 /**
  * FooterMain component class.
  * @class FooterMain
  * @extends Component
  */
 const FooterMain = () => {
+  const footerTopContent = FooterTop();
+
   return (
     <div className="it-footer-main">
       <Container tag="div">
@@ -28,11 +32,15 @@ const FooterMain = () => {
           <Row className="clearfix" tag="div">
             <Col sm={12} tag="div" widths={['xs', 'sm', 'md', 'lg', 'xl']}>
               <div className="it-brand-wrapper">
-                <FooterPNRRLogo />
-                <UniversalLink href="/">
-                  <LogoFooter />
-                  <BrandTextFooter />
-                </UniversalLink>
+                {footerTopContent ?? (
+                  <>
+                    <FooterPNRRLogo />
+                    <UniversalLink href="/">
+                      <LogoFooter />
+                      <BrandTextFooter />
+                    </UniversalLink>
+                  </>
+                )}
               </div>
             </Col>
           </Row>

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

@@ -48,6 +48,9 @@ const RenderBlocks = ({
     if (block['@type'] === 'text' && !block.text) {
       return null;
     }
+    if (block['@type'] === 'slate' && block.plaintext?.length === 0) {
+      return null;
+    }
   }
   return items?.length > 0 ? (
     <>

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

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import { Dimmer, Button } from 'design-react-kit';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl, defineMessages, useIntl } from 'react-intl';
@@ -56,14 +57,25 @@ const messages = defineMessages({
  * @returns {string} Markup of the component.
  */
 const FileWidget = (props) => {
-  const { id, value, onChange, label, onEdit, infoText, required, invalid } =
-    props;
+  const {
+    id,
+    value,
+    onChange,
+    label,
+    onEdit,
+    infoText,
+    required,
+    invalid,
+    validationText,
+  } = props;
   const [isImage, setIsImage] = React.useState(false);
   const intl = useIntl();
 
   React.useEffect(() => {
     if (value && imageMimetypes.includes(value['content-type'])) {
       setIsImage(true);
+    } else {
+      setIsImage(false);
     }
   }, [value]);
 
@@ -150,7 +162,7 @@ const FileWidget = (props) => {
                 </div>
               )}
 
-              <small className="form-text text-muted">
+              <small className="form-text">
                 {value
                   ? intl.formatMessage(messages.replaceFile)
                   : intl.formatMessage(messages.addNewFile)}
@@ -171,7 +183,16 @@ const FileWidget = (props) => {
             </div>
           )}
         </Dropzone>
-        {infoText && <small className="form-text text-muted">{infoText}</small>}
+        {infoText && (
+          <small
+            className={cx('form-text', {
+              'invalid-feedback form-feedback just-validate-error-label form-feedback just-validate-error-label':
+                invalid,
+            })}
+          >
+            {infoText}
+          </small>
+        )}
         {value && (
           <div className="field-file-name">
             {value.filename}
@@ -189,6 +210,11 @@ const FileWidget = (props) => {
           </div>
         )}
       </div>
+      {validationText && (
+        <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
+          {validationText}
+        </div>
+      )}
     </div>
   );
 };

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

@@ -11,6 +11,7 @@ import React from 'react';
 import EditBlock from 'volto-form-block/components/EditBlock';
 // eslint-disable-next-line import/no-unresolved
 import Sidebar from 'volto-form-block/components/Sidebar';
+import ValidateConfigForm from 'volto-form-block/components/ValidateConfigForm';
 
 import { Card, CardBody, Button, Row, Col } from 'design-react-kit';
 import {
@@ -78,17 +79,18 @@ class Edit extends SubblocksEdit {
 
     return (
       <div className="public-ui">
-        <div className="px-4 py-5">
-          {this.props?.data?.title && <h2>{this.props.data.title}</h2>}
-          {this.props?.data?.description && (
-            <div className="block-description">
-              {this.props.data.description}
-            </div>
-          )}
-          <Card className="card-bg rounded py-3" noWrapper={false} tag="div">
-            <CardBody tag="div">
-              <SubblocksWrapper node={this.node}>
-                {/*this.state.subblocks.filter((s) => s.field_type === 'from')
+        <ValidateConfigForm data={this.props.data} onEdit={true}>
+          <div className="px-4 py-5">
+            {this.props?.data?.title && <h2>{this.props.data.title}</h2>}
+            {this.props?.data?.description && (
+              <div className="block-description">
+                {this.props.data.description}
+              </div>
+            )}
+            <Card className="card-bg rounded py-3" noWrapper={false} tag="div">
+              <CardBody tag="div">
+                <SubblocksWrapper node={this.node}>
+                  {/*this.state.subblocks.filter((s) => s.field_type === 'from')
                   .length == 0 && (
                   <Alert color="warning" fade isOpen tag="div">
                     <h4>{this.props.intl.formatMessage(messages.warning)}</h4>
@@ -98,48 +100,49 @@ class Edit extends SubblocksEdit {
                   </Alert>
                 )*/}
 
-                {this.state.subblocks.map((subblock, subindex) => (
-                  <div className="form-field" key={subblock.id}>
-                    <EditBlock
-                      data={subblock}
-                      index={subindex}
-                      selected={this.isSubblockSelected(subindex)}
-                      {...this.subblockProps}
-                      openObjectBrowser={this.props.openObjectBrowser}
-                    />
-                  </div>
-                ))}
+                  {this.state.subblocks.map((subblock, subindex) => (
+                    <div className="form-field" key={subblock.id}>
+                      <EditBlock
+                        data={subblock}
+                        index={subindex}
+                        selected={this.isSubblockSelected(subindex)}
+                        {...this.subblockProps}
+                        openObjectBrowser={this.props.openObjectBrowser}
+                      />
+                    </div>
+                  ))}
 
-                {this.props.selected && (
-                  <div className="form-field">
-                    {this.renderAddBlockButton(
-                      this.props.intl.formatMessage(messages.addField),
-                    )}
-                  </div>
-                )}
+                  {this.props.selected && (
+                    <div className="form-field">
+                      {this.renderAddBlockButton(
+                        this.props.intl.formatMessage(messages.addField),
+                      )}
+                    </div>
+                  )}
 
-                <Row>
-                  <Col align="center">
-                    {this.props.data?.show_cancel && (
-                      <Button color="secondary" className="me-2">
-                        {this.props.data.cancel_label ||
+                  <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(
-                            messages.default_cancel_label,
+                            messages.default_submit_label,
                           )}
                       </Button>
-                    )}
-                    <Button color="primary">
-                      {this.props.data.submit_label ||
-                        this.props.intl.formatMessage(
-                          messages.default_submit_label,
-                        )}
-                    </Button>
-                  </Col>
-                </Row>
-              </SubblocksWrapper>
-            </CardBody>
-          </Card>
-        </div>
+                    </Col>
+                  </Row>
+                </SubblocksWrapper>
+              </CardBody>
+            </Card>
+          </div>
+        </ValidateConfigForm>
 
         <SidebarPortal selected={this.props.selected || false}>
           <Sidebar

package/src/customizations/volto-form-block/components/Field.jsx

@@ -42,6 +42,7 @@ const Field = ({
   valid,
   disabled = false,
   formHasErrors = false,
+  errorMessage,
   id,
   reactSelect,
 }) => {
@@ -56,6 +57,15 @@ const Field = ({
     return !isOnEdit && !valid;
   };
 
+  const infoText = errorMessage ? (
+    <>
+      <div className="form-text">{description}</div>
+      {errorMessage}
+    </>
+  ) : (
+    description
+  );
+
   return (
     <div className="field">
       {field_type === 'text' && (
@@ -65,7 +75,7 @@ const Field = ({
           label={getLabel()}
           type="text"
           required={required}
-          infoText={description}
+          infoText={infoText}
           disabled={disabled}
           readOnly={disabled}
           invalid={isInvalid() ? 'true' : null}
@@ -83,14 +93,14 @@ const Field = ({
           tag="textarea"
           rows={10}
           required={required}
-          infoText={description}
+          infoText={infoText}
           disabled={disabled}
           readOnly={disabled}
           invalid={isInvalid() ? 'true' : null}
           onChange={(e) => {
             onChange(name, e.target.value);
           }}
-          {...(value ? { value } : {})}
+          value={value ?? undefined}
         />
       )}
       {field_type === 'select' && (
@@ -120,9 +130,13 @@ const Field = ({
               aria-label={intl.formatMessage(messages.select_a_value)}
               classNamePrefix="react-select"
               className={isInvalid() ? 'is-invalid' : ''}
+              value={value ? [{ value: value, label: value }] : []}
             />
-            {description && (
-              <small className="form-text text-muted">{description}</small>
+            {description && <small className="form-text">{description}</small>}
+            {errorMessage && (
+              <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
+                {errorMessage}
+              </div>
             )}
           </div>
         </div>
@@ -146,16 +160,19 @@ const Field = ({
                   onChange={(e) => {
                     onChange(name, v);
                   }}
-                  invalid={isInvalid() ? 'true' : null}
                   addon // Needed to avoid application of form-control class as of kit v4.0.2
+                  checked={value === v}
                 />
                 <Label for={v + name} check>
                   {v}
                 </Label>
               </FormGroup>
             ))}
-            {description && (
-              <small className="form-text text-muted">{description}</small>
+            {description && <small className="form-text">{description}</small>}
+            {errorMessage && (
+              <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
+                {errorMessage}
+              </div>
             )}
           </div>
         </div>
@@ -192,8 +209,11 @@ const Field = ({
                 </Label>
               </FormGroup>
             ))}
-            {description && (
-              <small className="form-text text-muted">{description}</small>
+            {description && <small className="form-text">{description}</small>}
+            {errorMessage && (
+              <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
+                {errorMessage}
+              </div>
             )}
           </div>
         </div>
@@ -222,8 +242,11 @@ const Field = ({
                 {getLabel()}
               </Label>
             </FormGroup>
-            {description && (
-              <small className="form-text text-muted">{description}</small>
+            {description && <small className="form-text">{description}</small>}
+            {errorMessage && (
+              <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
+                {errorMessage}
+              </div>
             )}
           </div>
         </div>
@@ -235,13 +258,14 @@ const Field = ({
           label={getLabel()}
           type="date"
           required={required}
-          infoText={description}
+          infoText={infoText}
           disabled={disabled}
           readOnly={disabled}
           invalid={isInvalid() ? 'true' : null}
           onChange={(e) => {
             onChange(name, e.target.value);
           }}
+          value={value ?? ''}
         />
       )}
       {field_type === 'attachment' && (
@@ -251,7 +275,7 @@ const Field = ({
           label={getLabel()}
           type="file"
           required={required}
-          infoText={description}
+          infoText={infoText}
           disabled={disabled}
           readOnly={disabled}
           invalid={isInvalid() ? 'true' : null}
@@ -267,14 +291,15 @@ const Field = ({
           label={getLabel()}
           type="email"
           required={true}
-          infoText={description}
+          infoText={infoText}
           disabled={disabled}
           readOnly={disabled}
           invalid={isInvalid() ? 'true' : null}
+          validationText={errorMessage}
           onChange={(e) => {
             onChange(name, e.target.value);
           }}
-          {...(value ? { value } : {})}
+          value={value ?? ''}
         />
       )}
       {field_type === 'static_text' &&
@@ -305,6 +330,7 @@ const Field = ({
               name={name}
               title={label}
               description={description}
+              infoText={infoText}
               required={required}
               onChange={onChange}
               value={value}

package/src/customizations/volto-form-block/components/FormView.jsx

@@ -38,9 +38,9 @@ const messages = defineMessages({
     id: 'Email Success',
     defaultMessage: 'Form inviato correttamente',
   },
-  empty_values: {
-    id: 'form_empty_values_validation',
-    defaultMessage: 'Compila i campi richiesti',
+  form_errors: {
+    id: 'form_errors_validation',
+    defaultMessage: 'Attenzione! Alcuni campi inseriti sono da controllare.',
   },
   reset: {
     id: 'form_reset',
@@ -62,6 +62,8 @@ const FormView = ({
   resetFormState,
   resetFormOnError,
   captcha,
+  id,
+  getErrorMessage,
 }) => {
   const intl = useIntl();
   const alertTransition = {
@@ -81,7 +83,7 @@ const FormView = ({
     config.settings.siteProperties.enableVoltoFormBlockCaptcha;
 
   const isValidField = (field) => {
-    return formErrors?.indexOf(field) < 0;
+    return formErrors?.filter((e) => e.field === field).length === 0;
   };
 
   /* Function that replaces variables from the user customized message  */
@@ -146,7 +148,15 @@ const FormView = ({
                       <br />
                     </>
                   )}
-                  <Button color="primary" outline onClick={resetFormState}>
+                  <Button
+                    color="primary"
+                    outline
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      resetFormState();
+                    }}
+                  >
                     {intl.formatMessage(messages.reset)}
                   </Button>
                 </Alert>
@@ -220,6 +230,7 @@ const FormView = ({
                                 : formData[name]?.value
                             }
                             valid={isValidField(name)}
+                            errorMessage={getErrorMessage(name)}
                             formHasErrors={formErrors.length > 0}
                           />
                         </Col>
@@ -238,7 +249,7 @@ const FormView = ({
                       transition={alertTransition}
                     >
                       <h4>{intl.formatMessage(messages.error)}</h4>
-                      <p>{intl.formatMessage(messages.empty_values)}</p>
+                      <p>{intl.formatMessage(messages.form_errors)}</p>
                     </Alert>
                   )}
                   {formState.error && (
@@ -259,8 +270,12 @@ const FormView = ({
                       {data?.show_cancel && (
                         <Button
                           color="secondary"
-                          type="clear"
-                          onClick={resetFormState}
+                          type="button"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            resetFormState();
+                          }}
                           className="me-2"
                         >
                           {data.cancel_label ||

package/src/theme/ItaliaTheme/Blocks/_cardWithImageAndInEvidence.scss

@@ -107,8 +107,10 @@
           font-weight: 400;
           letter-spacing: 1.1px;
         }
+
         &.wrap-dates-four-columns {
           flex-wrap: wrap;
+
           .data {
             margin-top: 0.5rem;
           }

package/src/theme/ItaliaTheme/Blocks/_ribbonCardTemplate.scss

@@ -25,8 +25,8 @@
       line-height: 1.44444rem;
 
       a {
-        text-decoration: none;
         display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
+        text-decoration: none;
 
         &:hover {
           text-decoration: underline;

package/src/theme/ItaliaTheme/Blocks/_simpleCardTemplate.scss

@@ -54,8 +54,8 @@
         a {
           @include rem-size(font-size, 24);
           @include rem-size(line-height, 26);
-          font-weight: 700;
           display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
+          font-weight: 700;
 
           &:hover,
           &:active {
@@ -128,9 +128,9 @@
       a {
         @include rem-size(font-size, 32);
         @include rem-size(line-height, 32);
+        display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
         font-weight: 700;
         text-decoration: none;
-        display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
 
         &:hover,
         &:active {

package/src/theme/ItaliaTheme/Blocks/_smallblockLinkstemplate.scss

@@ -13,7 +13,6 @@
     align-items: center;
     justify-content: center;
     border: 8px solid $white;
-    border-right: none;
     background: $white;
     box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
 

package/src/theme/ItaliaTheme/Components/_card.scss

@@ -150,9 +150,9 @@
       a {
         @include rem-size(font-size, 18);
         @include rem-size(line-height, 24);
+        display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
         font-weight: 600;
         text-decoration: none;
-        display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
       }
 
       a:hover {

package/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Views/_common.scss

@@ -13,6 +13,7 @@
   .progress {
     background-color: $subsite-primary-a0;
   }
+
   .progress-bar {
     @if $subsite-light-theme {
       background-color: $subsite-link-color;
@@ -39,6 +40,7 @@
         border-left: 2px solid $subsite-primary;
       }
     }
+
     .nav-link {
       // evita che il bordo a sinistra mostri il primary nel momento in cui si scorre
       @if $subsite-light-theme {
@@ -54,6 +56,7 @@
     h5 {
       color: $subsite-primary-text;
     }
+
     .chip {
       @if $subsite-light-theme {
         border-color: $subsite-link-color;
@@ -61,16 +64,20 @@
         .chip-label {
           color: $subsite-link-color;
         }
+
         &:hover {
           background-color: #fff;
         }
       } @else {
         border-color: $subsite-primary-text;
+
         .chip-label {
           color: $subsite-primary-text;
         }
+
         &:hover {
           background-color: #fff;
+
           .chip-label {
             color: $subsite-primary;
           }
@@ -118,6 +125,7 @@
     .draftjs-buttons a {
       background-color: $subsite-secondary !important;
       color: $subsite-secondary-text !important;
+
       &:hover {
         background-color: darken($subsite-secondary, 5%) !important;
       }
@@ -138,6 +146,7 @@
           &:before {
             background-color: $subsite-link-color;
           }
+
           &:after {
             background-color: $subsite-link-color;
           }
@@ -145,11 +154,13 @@
           &:before {
             background-color: $subsite-primary;
           }
+
           &:after {
             background-color: $subsite-primary;
           }
         }
       }
+
       .calendar-date-description .calendar-date-description-content {
         border-left: 8px solid $subsite-primary-a0;
       }
@@ -160,11 +171,13 @@
   .point-list-wrapper .point-list .point-list-aside.point-list-warning {
     @if $subsite-light-theme {
       color: $subsite-link-color;
+
       &:after {
         background-color: $subsite-link-color;
       }
     } @else {
       color: $subsite-primary;
+
       &:after {
         background-color: $subsite-primary;
       }

package/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Widgets/reactSelect.scss

@@ -9,6 +9,7 @@
         background-color: $subsite-primary-a0;
         color: color-contrast($subsite-primary-a0);
       }
+
       &.react-select__option--is-focused.react-select__option--is-selected,
       &.react-select__option--is-selected {
         background-color: $subsite-secondary;

package/src/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_navigation.scss

@@ -131,8 +131,8 @@
       .navbar-collapsable {
         .navbar-nav {
           li a.nav-link {
-            font-size: 16px;
             color: $subsite-link-color;
+            font-size: 16px;
 
             &.active {
               border-left-color: $subsite-link-color;

package/src/theme/ItaliaTheme/Views/_common.scss

@@ -68,14 +68,39 @@ picture.volto-image.responsive img.full-width,
   margin-left: -50vw !important;
   object-fit: cover;
 
+  $toolbar-width: 80px;
+  $toolbar-collapsed-width: 20px;
+  $sidebar-width: 375px;
+  $sidebar-collapsed-width: 20px;
+
   .has-toolbar & {
-    left: calc(50% + 40px);
-    width: calc(100vw - 80px) !important;
+    left: calc(50% + calc($toolbar-width / 2));
+    width: calc(100vw - $toolbar-width) !important;
+  }
+  .has-toolbar.has-sidebar & {
+    $toolbars-width: calc($toolbar-width + $sidebar-width);
+    left: calc(50% + calc($toolbars-width / 2));
+    width: calc(100vw - $toolbars-width) !important;
+  }
+  .has-toolbar.has-sidebar-collapsed & {
+    $toolbars-width: calc($toolbar-width + $sidebar-collapsed-width);
+    left: calc(50% + calc($toolbars-width / 2));
+    width: calc(100vw - $toolbars-width) !important;
   }
 
   .has-toolbar-collapsed & {
-    left: calc(50% + 10px);
-    width: calc(100vw - 20px) !important;
+    left: calc(50% + calc($toolbar-collapsed-width / 2));
+    width: calc(100vw - $toolbar-collapsed-width) !important;
+  }
+  .has-toolbar-collapsed.has-sidebar & {
+    $toolbars-width: calc($toolbar-collapsed-width + $sidebar-width);
+    left: calc(50% + calc($toolbars-width / 2));
+    width: calc(100vw - $toolbars-width) !important;
+  }
+  .has-toolbar-collapsed.has-sidebar-collapsed & {
+    $toolbars-width: calc($toolbar-collapsed-width + $sidebar-collapsed-width);
+    left: calc(50% + calc($toolbars-width / 2));
+    width: calc(100vw - $toolbars-width) !important;
   }
 }
 

package/src/theme/ItaliaTheme/_main.scss

@@ -328,6 +328,36 @@ iframe {
   }
 }
 
+//fix footer styles for volto-editablefooter footerTop field
+.it-footer .it-footer-main .it-brand-wrapper .footerTop,
+.footer-configuration-widget .footer-top-segment .block.gridBlock .grid-items {
+  h2 {
+    margin-bottom: 0;
+    font-size: 1.777778rem;
+    font-weight: 600;
+    letter-spacing: unset;
+    line-height: 1.1;
+  }
+
+  h3 {
+    font-weight: 600;
+  }
+
+  .block.image img {
+    width: auto;
+    height: 75px;
+  }
+
+  .block.gridBlock {
+    .col {
+      &:has(.block.image) {
+        width: auto;
+        flex: 0 0 auto;
+      }
+    }
+  }
+}
+
 .bg-light {
   --bs-light-rgb: #{red($primary-a0)}, #{green($primary-a0)},
     #{blue($primary-a0)};

package/src/theme/bootstrap-override/bootstrap-italia/_form.scss

@@ -5,12 +5,6 @@
 
   &.is-invalid {
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
-
-    small,
-    small.text-muted,
-    small.form-feedback.just-validate-error-label {
-      color: $danger !important;
-    }
   }
 
   .was-validated &:valid,
@@ -50,3 +44,8 @@
     }
   }
 }
+
+.invalid-feedback {
+  //nella versione vecchia di bootstrap-italia che usiamo (2.3.4) questa regola non c'è e serve.
+  display: block;
+}