feat: editable footer top (#528)

* feat: configurable FooterTop * chore: updated volto-blocks-widget * fix: use new getEditableFooterData action * chore: back to getEditableFooterColumns * fix: tests * fix: RELEASE.md --------- Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Mar 13, 2024 · 542e2ec · 542e2ec
1 parent 45e2f72
commit 542e2ec
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 31 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -41,7 +41,11 @@
 - ...
 -->
 
-## Versione x.x.x (xx/xx/xxxx)
+## Versione X.X.X (xx/xx/xxxx)
+
+### Novità
+
+- Ora la fascia del footer contenente il logo e il nome del sito è configurabile da pannello di controllo
 
 ### Migliorie
 

diff --git a/jest-addon.config.js b/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: [

diff --git a/package.json b/package.json
@@ -141,10 +141,10 @@
     "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-editablefooter": "5.1.0",
     "volto-feedback": "0.2.0",
     "volto-form-block": "3.4.0",
     "volto-gdpr-privacy": "2.1.1",

diff --git a/src/components/ItaliaTheme/CustomerSatisfaction/FeedbackForm.jsx b/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';

diff --git a/src/components/ItaliaTheme/CustomerSatisfaction/Steps/CommentsStep.jsx b/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';

diff --git a/src/components/ItaliaTheme/Footer/FooterMain.jsx b/src/components/ItaliaTheme/Footer/FooterMain.jsx
@@ -15,24 +15,32 @@ 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">
         <section>
           <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>

diff --git a/src/theme/ItaliaTheme/Blocks/_cardWithImageAndInEvidence.scss b/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;
           }

diff --git a/src/theme/ItaliaTheme/Blocks/_ribbonCardTemplate.scss b/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;

diff --git a/src/theme/ItaliaTheme/Blocks/_simpleCardTemplate.scss b/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 {

diff --git a/src/theme/ItaliaTheme/Components/_card.scss b/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 {

diff --git a/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Views/_common.scss b/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,23 +56,28 @@
     h5 {
       color: $subsite-primary-text;
     }
+
     .chip {
       @if $subsite-light-theme {
         border-color: $subsite-link-color;
 
         .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,18 +146,21 @@
           &:before {
             background-color: $subsite-link-color;
           }
+
           &:after {
             background-color: $subsite-link-color;
           }
         } @else {
           &: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;
       }

diff --git a/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Widgets/reactSelect.scss b/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;

diff --git a/src/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_navigation.scss b/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;

diff --git a/src/theme/ItaliaTheme/_main.scss b/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)};

diff --git a/yarn.lock b/yarn.lock
@@ -6571,10 +6571,10 @@ __metadata:
     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-editablefooter: 5.1.0
     volto-feedback: 0.2.0
     volto-form-block: 3.4.0
     volto-gdpr-privacy: 2.1.1
@@ -14302,12 +14302,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"volto-blocks-widget@npm:3.1.0":
-  version: 3.1.0
-  resolution: "volto-blocks-widget@npm:3.1.0"
+"volto-blocks-widget@npm:3.4.0":
+  version: 3.4.0
+  resolution: "volto-blocks-widget@npm:3.4.0"
   peerDependencies:
     "@plone/volto": ">=16.0.0-alpha.38"
-  checksum: 91fc5fc102acdf17f8a8f733aef4331622246fc6b008a1c486dd21b08b71583332b53d32bb4a2b75529edaa5f740421c913e04a9565c09d03fbab41c5d700978
+  checksum: 355675359cc64b23c0357de8b952195a9693543a7e95c2c1f463b65fc7bd081d64aca8f2086e95775d5771f7071d681276f18a968e666dbead40e2c48ee9843a
   languageName: node
   linkType: hard
 
@@ -14331,14 +14331,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"volto-editablefooter@npm:5.0.3":
-  version: 5.0.3
-  resolution: "volto-editablefooter@npm:5.0.3"
+"volto-editablefooter@npm:5.1.0":
+  version: 5.1.0
+  resolution: "volto-editablefooter@npm:5.1.0"
   dependencies:
     react-outside-click-handler: 1.3.0
   peerDependencies:
     "@plone/volto": ">=16.0.0-alpha.38"
-  checksum: efbc8e7679dc78727fa465e238421346d682edc80780baa56baa8ec047e6009ed5dee436b120143c464427735820f2dac52fa98f9c46890a17f0e16c30a18c36
+    volto-blocks-widget: ">=3.4.0"
+  checksum: 2a1316344048e7447da39b513e067b9368f90057d1ef9bc6541ba0b9cd4a1c04b5246943677a5238d3391c30f3778320fe6e12f3f7c8f310adc61b1c6c8016ad
   languageName: node
   linkType: hard