io-sanita-theme 2.5.2 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [2.6.0](https://github.com/RedTurtle/io-sanita-theme/compare/2.5.3...2.6.0) (2025-03-11)
+
+### Features
+
+* added all listing variation to Search block ([100880f](https://github.com/RedTurtle/io-sanita-theme/commit/100880f76bcccab88f4055eef6a8a996bc4bc108))
+
+### Bug Fixes
+
+* a11y Bando and Event dates ([233d8d1](https://github.com/RedTurtle/io-sanita-theme/commit/233d8d10bd6e6c606fbc79f2b7f4c46196cf5b2a))
+
+## [2.5.3](https://github.com/RedTurtle/io-sanita-theme/compare/2.5.2...2.5.3) (2025-03-05)
+
+### Bug Fixes
+
+* scroll bhv in paginations ([00b84e9](https://github.com/RedTurtle/io-sanita-theme/commit/00b84e9e2d8386552632fa92b968e59485638d1d))
+
 ## [2.5.2](https://github.com/RedTurtle/io-sanita-theme/compare/2.5.1...2.5.2) (2025-03-05)
 
 ### Bug Fixes

package/RELEASE.md

@@ -41,6 +41,12 @@
 - ...
  -->
 
+## Versione x.x.x (x/x/x)
+
+### Novità
+
+- ora nel blocco Cerca, è possibile selezionare tutte le variazioni del blocco elenco come aspetto dei risultati.
+
 ## Versione 2.5.0 (05/03/2025)
 
 ### Novità

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "io-sanita-theme",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "description": "io-sanita-theme: Volto add-on",
   "main": "src/index.js",
   "license": "MIT",

package/src/components/Blocks/SearchBandi/Body.jsx

@@ -10,6 +10,7 @@ import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { BandiTemplate } from 'io-sanita-theme/components/Blocks';
 import { Pagination } from 'io-sanita-theme/components';
 import { resetQuerystringResults } from 'io-sanita-theme/actions';
+import { scrollIntoView } from 'io-sanita-theme/helpers';
 
 const messages = defineMessages({
   find: {
@@ -146,8 +147,9 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock, blocksConfig }) => {
   );
 
   function handleQueryPaginationChange(e, { activePage }) {
-    resultsRef.current.scrollIntoView({ behavior: 'smooth' });
-    const current = activePage?.children ?? 1;
+    scrollIntoView({ ref: resultsRef.current });
+
+    const current = activePage?.children ?? activePage ?? 1;
     setCurrentPage(current);
     doRequest(current);
   }

package/src/components/Blocks/SearchFarmacia/Body.jsx

@@ -14,6 +14,7 @@ import SearchFilters from './SearchFilters';
 
 /* Style */
 import './search-farmacia.scss';
+import { scrollIntoView } from 'io-sanita-theme/helpers';
 
 const messages = defineMessages({
   results: {
@@ -205,7 +206,7 @@ const Body = ({ isEditMode, data, id }) => {
     activeScroll = true,
   ) => {
     if (resultsRef.current && activeScroll) {
-      resultsRef.current.scrollIntoView({ behavior: 'smooth' });
+      scrollIntoView({ ref: resultsRef.current });
     }
     setCurrentPage(activePage || 1);
   };

package/src/components/Blocks/SearchServiziProcedure/Body.jsx

@@ -15,6 +15,7 @@ import {
   SortByWidget,
   LinkedHeadline,
 } from 'io-sanita-theme/components';
+import { scrollIntoView } from 'io-sanita-theme/helpers';
 
 const messages = defineMessages({
   results: {
@@ -190,7 +191,7 @@ const Body = ({ data, id, path, properties, inEditMode }) => {
     activeScroll = true,
   ) => {
     if (resultsRef.current && activeScroll) {
-      resultsRef.current.scrollIntoView({ behavior: 'smooth' });
+      scrollIntoView({ ref: resultsRef.current });
     }
     const current = activePage ?? 1;
     setCurrentPage(current);
@@ -237,6 +238,7 @@ const Body = ({ data, id, path, properties, inEditMode }) => {
     (data.portal_type === 'Servizio'
       ? intl.formatMessage(messages.searchable_text_default_label_servizi)
       : intl.formatMessage(messages.searchable_text_default_label_procedura));
+
   return (
     <div className="block iosanita-block-search servizi-procedure">
       <div className="full-width bg-primary-lightest py-4">

package/src/components/Cards/CardSimple/CardSimple.jsx

@@ -30,6 +30,7 @@ export const CardSimple = ({
   titleTag = 'h5',
   titleDataElement,
   highlight, //se si vuole evidenziare un testo, ad esempio nei risultati delle ricerche
+  badgeText,
 }) => {
   const intl = useIntl();
   const date =
@@ -61,11 +62,13 @@ export const CardSimple = ({
   ) : (
     item.description
   );
+
+  const display_badge = isServizioOnline || badgeText?.length > 0;
   return (
     <Card className={`shadow rounded no-after card-simple ${className ?? ''}`}>
       <CardBody>
         <div className="card-body-main">
-          <CardTitle tag={titleTag} className={isServizioOnline ? 'mb-1' : ''}>
+          <CardTitle tag={titleTag} className={display_badge ? 'mb-1' : ''}>
             {item['@id'] ? (
               <UniversalLink
                 item={!isEditMode ? item : null}
@@ -80,11 +83,13 @@ export const CardSimple = ({
             )}
           </CardTitle>
 
-          {/* Chip servizio attivo */}
-          {isServizioOnline && (
+          {/* Chip badge: servizio attivo per servizi o badge con badgeText */}
+          {display_badge && (
             <div className={showDescription ? 'mb-3' : ''}>
               <Badge color="info">
-                {intl.formatMessage(messages.servizioOnline)}
+                {isServizioOnline
+                  ? intl.formatMessage(messages.servizioOnline)
+                  : badgeText}
               </Badge>
             </div>
           )}

package/src/components/View/Bando/Dates.jsx

@@ -90,11 +90,14 @@ const BandoDates = ({ content }) => {
         return (
           item.date && (
             <div className="point-list" key={index}>
-              <div className="point-list-aside point-list-warning">
-                <span className="point-date text-monospace">
+              <div
+                className="point-list-aside point-list-warning"
+                aria-label={item.date.format('DD MMMM Y')}
+              >
+                <span className="point-date text-monospace" aria-hidden={true}>
                   {item.date.format('DD')}
                 </span>
-                <span className="point-month text-monospace">
+                <span className="point-month text-monospace" aria-hidden={true}>
                   {item.date.format('MMM')}/{item.date.format('YY')}
                 </span>
               </div>

package/src/components/View/Evento/Dates.jsx

@@ -80,13 +80,20 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
     <>
       <div className="point-list-wrapper my-4 mb-5">
         <div className="point-list">
-          <div className="point-list-aside point-list-primary fw-normal">
-            <span className="point-date font-monospace">
+          <div
+            className="point-list-aside point-list-primary fw-normal"
+            aria-label={start.format('DD MMMM Y')}
+          >
+            <span className="point-date font-monospace" aria-hidden={true}>
               {start.format('DD')}
             </span>
-            <span className="point-month font-monospace">{start.format('MMMM')}</span>
+            <span className="point-month font-monospace" aria-hidden={true}>
+              {start.format('MMMM')}
+            </span>
             {!start.isSame(end, 'year') && (
-              <span className="point-month font-monospace">{start.format('YYYY')}</span>
+              <span className="point-month font-monospace" aria-hidden={true}>
+                {start.format('YYYY')}
+              </span>
             )}
           </div>
           <div className="point-list-content">
@@ -111,15 +118,18 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
         </div>
         {!openEnd && (
           <div className="point-list">
-            <div className="point-list-aside point-list-primary fw-normal">
-              <span className="point-date font-monospace">
+            <div
+              className="point-list-aside point-list-primary fw-normal"
+              aria-label={end.format('DD MMMM Y')}
+            >
+              <span className="point-date font-monospace" aria-hidden={true}>
                 {end.format('DD')}
               </span>
-              <span className="point-month font-monospace">
+              <span className="point-month font-monospace" aria-hidden={true}>
                 {end.format('MMMM')}
               </span>
               {!end.isSame(start, 'year') && (
-                <span className="point-month font-monospace">
+                <span className="point-month font-monospace" aria-hidden={true}>
                   {end.format('YYYY')}
                 </span>
               )}
@@ -149,7 +159,7 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
       {additionalDates.length > 0 && (
         <div className="mt-4">
           <h5>{intl.formatMessage(messages.additional_dates)}</h5>
-          {additionalDates.map((additionalDate,i) => (
+          {additionalDates.map((additionalDate, i) => (
             <div className="font-serif" key={i}>
               {viewDate(intl.locale, additionalDate, 'dddd DD MMMM YYYY')}
             </div>
@@ -159,8 +169,8 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
       {exdates.length > 0 && (
         <div className="mt-4">
           <h5>{intl.formatMessage(messages.excluded_dates)}</h5>
-          {exdates.map((exDate,i) => (
-            <div className="font-serif" key={'exdate'+i}>
+          {exdates.map((exDate, i) => (
+            <div className="font-serif" key={'exdate' + i}>
               {viewDate(intl.locale, exDate, 'dddd DD MMMM YYYY')}
             </div>
           ))}

package/src/components/View/commons/SideMenu/SideMenu.jsx

@@ -15,6 +15,7 @@ import {
   AccordionHeader,
 } from 'design-react-kit';
 import config from '@plone/volto/registry';
+import { scrollIntoView, getMainOffset } from 'io-sanita-theme/helpers';
 import './_sideMenu.scss';
 
 const messages = defineMessages({
@@ -91,14 +92,6 @@ const SideMenu = ({ data, content_uid }) => {
     headers?.[0]?.title ??
     intl.formatMessage(messages.progressBar);
 
-  const getMainOffset = () => {
-    return isClient
-      ? document.querySelector('.it-header-wrapper.it-header-sticky')
-          ?.clientHeight + 20
-      : 0;
-  };
-  const mainOffset = getMainOffset();
-
   const handleScroll = useCallback(() => {
     const windowHeight = window.innerHeight * 0.1;
     const mainOffset = getMainOffset();
@@ -161,16 +154,8 @@ const SideMenu = ({ data, content_uid }) => {
     // Scroll to section
     // setTimeout hack should wait for rerender after setIsNavOpen
     setTimeout(() => {
-      // document.getElementById(id)?.scrollIntoView?.({
-      //   behavior: 'smooth',
-      //   block: 'start',
-      // });
-
-      window.scrollTo({
-        behavior: 'smooth',
-        top: document.querySelector('#' + id).offsetTop - mainOffset,
-      });
-    }, 0);
+      scrollIntoView({ id });
+    });
   };
 
   const progressValue = useMemo(() => {
@@ -180,6 +165,8 @@ const SideMenu = ({ data, content_uid }) => {
       : 0;
   }, [scrollY, isClient]);
 
+  const mainOffset = getMainOffset();
+
   return headers?.length > 0 ? (
     <div
       className="navbar-wrapper page-side-menu affix-top"

package/src/config/blocks/index.js

@@ -74,6 +74,11 @@ export const applyIoSanitaBlocksConfig = (config) => {
   delete config.blocks.blocksConfig.teaser;
   delete config.blocks.blocksConfig.leadimage;
 
+  const listingVariations = [
+    ...config.blocks.blocksConfig.listing.variations,
+    ...getIoSanitaListingVariations(config),
+  ];
+
   config.blocks.blocksConfig = {
     ...config.blocks.blocksConfig,
 
@@ -81,10 +86,7 @@ export const applyIoSanitaBlocksConfig = (config) => {
       ...config.blocks.blocksConfig.listing,
       showLinkMore: true,
       blockSchema: schemaListing,
-      variations: [
-        ...config.blocks.blocksConfig.listing.variations,
-        ...getIoSanitaListingVariations(config),
-      ],
+      variations: listingVariations,
       listing_bg_colors: [], //{name:'blue', label:'Blu'},{name:'light-blue', label:'Light blue'},{name:'sidebar-background', label:'Grey'}
       listing_items_colors: [], //{name:'blue', label:'Blu'},{name:'light-blue', label:'Light blue'},{name:'sidebar-background', label:'Grey'}
       getAsyncData: null, // questo disabilita il ssr dei listing perché rallenta vistosamente la pagina
@@ -280,7 +282,9 @@ export const applyIoSanitaBlocksConfig = (config) => {
     },
     search: {
       ...config.blocks.blocksConfig.search,
-      templates: ['simpleCard', 'simpleListTemplate'],
+      templates: [
+        ...listingVariations.map((v) => v.id).filter((v) => v !== 'carousel'),
+      ],
     },
     searchMap: {
       id: 'searchMap',

package/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx

@@ -26,7 +26,10 @@ import {
   ListingContainer,
   //getPathFiltersButtons,
 } from 'io-sanita-theme/components/Blocks';
-import { checkRichTextHasContent } from 'io-sanita-theme/helpers';
+import {
+  checkRichTextHasContent,
+  scrollIntoView,
+} from 'io-sanita-theme/helpers';
 import config from '@plone/volto/registry';
 
 const Headline = ({ headlineTag, id, data = {}, listingItems, isEditMode }) => {
@@ -207,8 +210,8 @@ const ListingBody = withQuerystringResults((props) => {
                       }
 
                       if (!isEditMode && page != currentPage) {
-                        listingRef.current.scrollIntoView({
-                          behavior: 'smooth',
+                        scrollIntoView({
+                          ref: listingRef.current,
                         });
                       }
                       onPaginationChange(e, {

package/src/helpers/ClientPagination/clientPagination.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, createRef } from 'react';
+import { scrollIntoView } from 'io-sanita-theme/helpers';
 
 export const useClientPagination = ({ items, b_size = 4 }) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -16,9 +17,7 @@ export const useClientPagination = ({ items, b_size = 4 }) => {
   const onPaginationChange = (activePage) => {
     let page = activePage;
     if (page != currentPage && ref?.current) {
-      ref.current.scrollIntoView({
-        behavior: 'smooth',
-      });
+      scrollIntoView({ ref: ref.current });
     }
     setCurrentPage(page);
   };

package/src/helpers/index.js

@@ -81,3 +81,6 @@ export { getComponentWithFallback } from 'io-sanita-theme/helpers/registry';
 export SchemaOrg, {
   SchemaOrgUtils,
 } from 'io-sanita-theme/helpers/SchemaOrg/SchemaOrg';
+
+//scroll
+export { scrollIntoView, getMainOffset } from 'io-sanita-theme/helpers/scroll';

package/src/helpers/scroll.js

@@ -0,0 +1,22 @@
+/* scrollIntoView:
+pass ref prop (reactRef) or html id if item
+*/
+export const getMainOffset = () => {
+  return __CLIENT__
+    ? document.querySelector('.it-header-wrapper.it-header-sticky')
+        ?.clientHeight + 20
+    : 0;
+};
+
+export const scrollIntoView = ({ ref, id, behavior = 'smooth' }) => {
+  const mainOffset = getMainOffset();
+
+  const top = id
+    ? document.querySelector('#' + id).offsetTop - mainOffset
+    : ref.getBoundingClientRect().top + window.scrollY - mainOffset;
+
+  window.scrollTo({
+    behavior,
+    top: top,
+  });
+};