design-comuni-plone-theme 8.5.0 → 8.5.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 
 
+## [8.5.1](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.5.0...v8.5.1) (2023-09-18)
+
+
+### Bug Fixes
+
+* added clear float to page sections ([#324](https://github.com/RedTurtle/design-comuni-plone-theme/issues/324)) ([7f1e46d](https://github.com/RedTurtle/design-comuni-plone-theme/commit/7f1e46d42b8cae11b04f68b3a01988c3e9226db7))
+* fix cContacts block horizontal alignment ([#329](https://github.com/RedTurtle/design-comuni-plone-theme/issues/329)) ([b68ee5e](https://github.com/RedTurtle/design-comuni-plone-theme/commit/b68ee5e9901c81db0048dc2eb29f9611cdc3fb5a))
+* fix Content in Evidence template when there's more than one item ([#327](https://github.com/RedTurtle/design-comuni-plone-theme/issues/327)) ([049f520](https://github.com/RedTurtle/design-comuni-plone-theme/commit/049f5205685d2010982cf4a990479f719142fadf))
+* fix height of icons in Icons Block ([#330](https://github.com/RedTurtle/design-comuni-plone-theme/issues/330)) ([c77ada8](https://github.com/RedTurtle/design-comuni-plone-theme/commit/c77ada86763de62060f95b2fec52a824cbe76011))
+* gridBlock edit overlapping when using 4 columns and adding image block ([#322](https://github.com/RedTurtle/design-comuni-plone-theme/issues/322)) ([018deb7](https://github.com/RedTurtle/design-comuni-plone-theme/commit/018deb7081b3830df526304330349855e5b79d4d))
+* load of locations data in LocationsMap ([#323](https://github.com/RedTurtle/design-comuni-plone-theme/issues/323)) ([093f08b](https://github.com/RedTurtle/design-comuni-plone-theme/commit/093f08bcdb92c46053ec78878b1ed2e375efd2ff))
+* slider a11y ([3d5bcc4](https://github.com/RedTurtle/design-comuni-plone-theme/commit/3d5bcc485c6d280647712ad2d0e3ccf6b8c4974a))
+* updated volto-dropdownmenu to remove upload image when editing dropdownmenu blocks ([#331](https://github.com/RedTurtle/design-comuni-plone-theme/issues/331)) ([2c5605f](https://github.com/RedTurtle/design-comuni-plone-theme/commit/2c5605f3be09632c923196eedc166485c15b04a3))
+
+
+### Documentation
+
+* updated publiccode ([55e59c7](https://github.com/RedTurtle/design-comuni-plone-theme/commit/55e59c7822ca93330c4d509461d0cd32a9b2ea0b))
+
 ## [8.5.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.4.6...v8.5.0) (2023-09-05)
 
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "8.5.0",
+  "version": "8.5.1",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -130,7 +130,7 @@
     "typeface-titillium-web": "0.0.72",
     "volto-blocks-widget": "3.1.0",
     "volto-data-grid-widget": "2.2.1",
-    "volto-dropdownmenu": "4.0.0",
+    "volto-dropdownmenu": "4.1.0",
     "volto-editablefooter": "5.0.1",
     "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: '2023-09-05'
+releaseDate: '2023-09-18'
 softwareType: standalone/web
-softwareVersion: 8.5.0
+softwareVersion: 8.5.1
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/Blocks/ContactsBlock/Block/ViewBlock.jsx

@@ -20,7 +20,7 @@ import { checkRedraftHasContent } from 'design-comuni-plone-theme/helpers';
 const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
   return (
     <Card
-      className="card-bg rounded subblock-view"
+      className="card-bg rounded subblock-view "
       noWrapper={false}
       space
       tag="div"

package/src/components/ItaliaTheme/Blocks/ContactsBlock/Edit.jsx

@@ -106,7 +106,7 @@ class Edit extends SubblocksEdit {
             </div>
 
             <SubblocksWrapper node={this.node}>
-              <Row>
+              <Row className="justify-content-center">
                 {this.state.subblocks.map((subblock, subindex) => (
                   <Col lg="4" key={subblock.id}>
                     <EditBlock
@@ -120,7 +120,7 @@ class Edit extends SubblocksEdit {
                 ))}
 
                 {this.props.selected && (
-                  <Col lg={4}>
+                  <Col lg={12} className="text-center pb-3">
                     {this.renderAddBlockButton(
                       this.props.intl.formatMessage(messages.addItem),
                     )}

package/src/components/ItaliaTheme/Blocks/ContactsBlock/View.jsx

@@ -42,9 +42,9 @@ const AccordionView = ({ data, block }) => {
                 )}
               </div>
             </div>
-            <Row>
+            <Row className="justify-content-center">
               {data.subblocks.map((subblock, index) => (
-                <Col lg="4" key={subblock.id}>
+                <Col lg="4" key={subblock.id} className="pb-3">
                   <ViewBlock
                     data={subblock}
                     key={index}

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

@@ -137,6 +137,7 @@ const BandiInEvidenceTemplate = ({
                     )}
 
                     {/* Tipologia */}
+
                     {show_tipologia && item.tipologia_bando?.title?.length > 0 && (
                       <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
                         <div className="bando-dati-label me-2">
@@ -206,10 +207,12 @@ const BandiInEvidenceTemplate = ({
                             className={cx('bando-state', {
                               open: item.bando_state?.includes('open'),
                               closed: item.bando_state?.includes('closed'),
-                              scheduled:
-                                item.bando_state?.includes('scheduled'),
-                              'in-progress':
-                                item.bando_state?.includes('inProgress'),
+                              scheduled: item.bando_state?.includes(
+                                'scheduled',
+                              ),
+                              'in-progress': item.bando_state?.includes(
+                                'inProgress',
+                              ),
                             })}
                           >
                             {intl.formatMessage(messages[item.bando_state[0]])}

package/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js

@@ -61,7 +61,7 @@ export const useSlider = (userAutoplay) => {
 
     if ((userAutoplay && !slide) || (userAutoplay && !slide.length > 0)) return;
 
-    // Custom handling of focus as per Arter a11y audit and request
+    // Custom handling of focus for a11y
     const link = visibleSlideTitle(
       `a.slide-link[data-slide="${currentSlide}"]`,
     );
@@ -70,7 +70,14 @@ export const useSlider = (userAutoplay) => {
       return;
     }
     // eslint-disable-next-line no-unused-expressions
-    else link.focus();
+    else if (
+      // if the focus was already on a slide, move it to the current one
+      Array.from(document.querySelectorAll('.slick-slide')).some((el) =>
+        el.contains(document.activeElement),
+      )
+    ) {
+      link.focus();
+    }
   };
 
   return {

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

@@ -50,7 +50,7 @@ const messages = defineMessages({
 });
 
 function NextArrow(props) {
-  // Custom handling of focus as per Arter a11y audit and request
+  // Custom handling of focus for a11y
   const { className, style, onClick, intl, currentSlide } = props;
   const handleClick = (options) => {
     onClick(options, false);
@@ -85,7 +85,7 @@ function NextArrow(props) {
 }
 
 function PrevArrow(props) {
-  // Custom handling of focus as per Arter a11y audit and request
+  // Custom handling of focus for a11y
   const {
     className,
     style,
@@ -225,7 +225,7 @@ const SliderTemplate = ({
   };
 
   const renderCustomDots = (props) => {
-    // Custom handling of focus as per Arter a11y audit and request
+    // Custom handling of focus for a11y
     return (
       <ul
         className="slick-dots"
@@ -281,13 +281,13 @@ const SliderTemplate = ({
     pauseOnDotsHover: true,
     swipe: true,
     swipeToSlide: true,
-    focusOnSelect: true,
+    focusOnSelect: false,
     draggable: true,
     accessibility: true,
     nextArrow: <NextArrow intl={intl} focusNext={focusNext} />,
     prevArrow: <PrevArrow intl={intl} focusNext={focusNext} />,
     appendDots: renderCustomDots,
-    // Custom handling of focus as per Arter a11y audit and request
+    // Custom handling of focus for a11y
     afterChange: focusNext,
     responsive: [
       {

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

@@ -43,12 +43,7 @@ const LocationsMap = ({ center, locations }) => {
 
   useEffect(() => {
     venues.forEach((loc) => {
-      if (
-        !fetchedLocations?.[loc.key]?.loading &&
-        !fetchedLocations?.[loc.key]?.loaded
-      ) {
-        dispatch(getContent(loc.url, null, loc.key));
-      }
+      dispatch(getContent(loc.url, null, loc.key));
     });
 
     return () =>

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

@@ -48,13 +48,13 @@ const Metadata = ({
         </h4>
       )}
       {children}
-      <p className="font-serif mb-0 mt-4">
+      <p className="font-serif mb-0 mt-4 last-modified">
         <strong>{intl.formatMessage(messages.modified)}:</strong>{' '}
         {viewDate(intl.locale, content.modified, 'DD-MM-Y, HH:MM')}
       </p>
       {content.rights && (
         <>
-          <p className="font-serif mb-0 mt-4">
+          <p className="font-serif mb-0 mt-4 metadata">
             {intl.formatMessage(messages.rights)}
           </p>
           <strong>{content.rights}</strong>

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

@@ -31,7 +31,7 @@ const RichText = ({
     <>
       {title && (
         <Tag
-          className={cx('mt-4', {
+          className={cx('mt-4 it-page-subsection', {
             'fw-bold': title_size === 'h6',
           })}
         >

package/src/components/ItaliaTheme/View/EventoView/EventoCosE.jsx

@@ -45,7 +45,9 @@ const EventoCosE = ({ content }) => {
     >
       {content?.persone_amministrazione?.length > 0 && (
         <>
-          <h5>{intl.formatMessage(messages.parteciperanno)}</h5>
+          <h5 className="parteciperanno-section">
+            {intl.formatMessage(messages.parteciperanno)}
+          </h5>
           {content.persone_amministrazione.map((item, i) => (
             <UniversalLink
               href={flattenToAppURL(item['@id'])}

package/src/components/ItaliaTheme/View/EventoView/EventoUlterioriInformazioni.jsx

@@ -43,7 +43,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
       {richTextHasContent(content?.ulteriori_informazioni) && (
         <HelpBox text={content?.ulteriori_informazioni} />
       )}
-
       {content?.event_url && (
         <div className="mt-4">
           <h5>{intl.formatMessage(messages.event_url)}</h5>
@@ -52,7 +51,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
           </UniversalLink>
         </div>
       )}
-
       {richTextHasContent(content?.patrocinato_da) && (
         <div className="mt-4">
           {richTextHasContent(content?.patrocinato_da) && (
@@ -66,7 +64,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
           )}
         </div>
       )}
-
       {content?.strutture_politiche.length > 0 && (
         <div className="mt-4">
           <h5>{intl.formatMessage(messages.strutture_politiche)}</h5>

package/src/config/Blocks/blocks.js

@@ -364,10 +364,9 @@ const italiaBlocks = {
 
 const getItaliaBlocks = (config) => {
   delete config.blocks.blocksConfig.teaser;
-  config.blocks.blocksConfig.gridBlock.allowedBlocks =
-    config.blocks.blocksConfig.gridBlock.allowedBlocks
-      .filter((item) => !['slate', 'teaser'].includes(item))
-      .concat(['text']);
+  config.blocks.blocksConfig.gridBlock.allowedBlocks = config.blocks.blocksConfig.gridBlock.allowedBlocks
+    .filter((item) => !['slate', 'teaser'].includes(item))
+    .concat(['text']);
   return italiaBlocks;
 };
 export default getItaliaBlocks;

package/src/customizations/volto/components/manage/Blocks/Grid/Edit.jsx

@@ -0,0 +1,55 @@
+/**
+ * Customizations:
+ * - make the block full-width and fix overlapping ui for
+ *   some inner blocks like image using custom class
+ */
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { useState } from 'react';
+import ContainerEdit from '@plone/volto/components/manage/Blocks/Container/Edit';
+
+const GridBlockEdit = (props) => {
+  const { data } = props;
+
+  const columnsLength = data?.blocks_layout?.items?.length || 0;
+  const [selectedBlock, setSelectedBlock] = useState(null);
+
+  return (
+    <div
+      className={cx({
+        one: columnsLength === 1,
+        two: columnsLength === 2,
+        three: columnsLength === 3,
+        four: columnsLength >= 4,
+        'grid-items': true,
+        'full-width': true,
+      })}
+      // This is required to enabling a small "in-between" clickable area
+      // for bringing the Grid sidebar alive once you have selected an inner block
+      onClick={(e) => {
+        if (!e.block) setSelectedBlock(null);
+      }}
+      role="presentation"
+    >
+      <div className="gridBlock-container">
+        <ContainerEdit
+          {...props}
+          selectedBlock={selectedBlock}
+          setSelectedBlock={setSelectedBlock}
+          direction="horizontal"
+        />
+      </div>
+    </div>
+  );
+};
+
+GridBlockEdit.propTypes = {
+  block: PropTypes.string.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  pathname: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  manage: PropTypes.bool.isRequired,
+};
+
+export default GridBlockEdit;

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

@@ -44,7 +44,7 @@
   @media (min-width: #{map-get($grid-breakpoints, lg)}) {
     .content-in-evidence:nth-of-type(2n) {
       .order-lg-2 {
-        order: 1;
+        order: 1 !important;
 
         &.offset-lg-1 {
           margin-left: 0;

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

@@ -0,0 +1,27 @@
+.block.gridBlock {
+  margin-top: 2rem;
+  .full-width {
+    height: unset !important;
+  }
+  .gridBlock-container {
+    max-width: 1320px;
+    padding: 0 4px;
+    margin: auto;
+    position: relative;
+    .toolbar {
+      left: 16px !important;
+    }
+    .block {
+      .image {
+        .ui.message {
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+        .ui.input {
+          font-size: 14px;
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+}

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

@@ -167,8 +167,8 @@
       }
 
       .icon {
-        width: 3.35rem;
-        height: auto;
+        width: auto;
+        height: 4rem;
         color: $tertiary;
       }
     }

package/src/theme/ItaliaTheme/Components/_cmp-timeline.scss

@@ -26,6 +26,7 @@
 
 .calendar-vertical {
   color: $link-color;
+  clear: both;
 
   &::after {
     display: block;

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

@@ -1,4 +1,8 @@
 body.contenttype-event {
+  .parteciperanno-section {
+    clear: both;
+  }
+
   .supported-by {
     margin-bottom: 1rem;
   }

package/src/theme/ItaliaTheme/_common.scss

@@ -3,6 +3,7 @@
   .text-justify {
     text-align: justify;
   }
+
   button.btn,
   button.rounded-right {
     &:focus {
@@ -30,6 +31,7 @@
 
   a.btn-tertiary {
     color: $tertiary-text !important;
+
     &:focus {
       border-color: $focus-outline-color;
       box-shadow: inset 0 1px 0 $focus-outline-color,
@@ -58,6 +60,7 @@
       }
     }
   }
+
   .btn-primary,
   .btn-secondary,
   .btn-tertiary,
@@ -66,12 +69,15 @@
       fill: $external-link-fill-buttons !important;
     }
   }
+
   .external-link {
     fill: $link-color !important;
+
     &:hover {
       fill: #004080 !important;
     }
   }
+
   .it-footer-small-prints-list .external-link {
     fill: $external-link-fill-subfooter !important;
   }
@@ -80,3 +86,9 @@
 .icon.external-link.icon-xs {
   height: 1rem;
 }
+
+section.it-page-section,
+.last-modified,
+.it-page-subsection {
+  clear: both;
+}

package/src/theme/ItaliaTheme/_main.scss

@@ -143,6 +143,7 @@ iframe {
 
   .draftjs-buttons {
     margin: 0;
+    clear: both;
 
     a {
       display: inline-block;

package/src/theme/site.scss

@@ -88,6 +88,7 @@
 @import 'ItaliaTheme/Blocks/HTML';
 @import 'ItaliaTheme/Blocks/simpleCardTemplate';
 @import 'ItaliaTheme/Blocks/search';
+@import 'ItaliaTheme/Blocks/gridBlock';
 
 @import 'ItaliaTheme/Views/uo';
 @import 'ItaliaTheme/Views/evento';