design-comuni-plone-theme 11.9.0 → 11.10.0

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

@@ -5,43 +5,26 @@ import 'slick-carousel/slick/slick.css';
 import 'design-comuni-plone-theme/components/slick-carousel/slick/slick-theme.css';
 import { Col, Container, Row } from 'design-react-kit';
 import {
-  Icon,
   ListingImage,
   ListingLinkMore,
+  SingleSlideWrapper,
+  CarouselWrapper,
+  ButtonPlayPause,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import {
-  useSlider,
-  visibleSlideTitle,
-} from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
+import { useSlider } from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/slider';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
-  viewImage: {
-    id: 'viewImage',
+  carouselItemAriaLabel: {
+    id: 'carousel-item-aria-label',
     defaultMessage:
       'Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra',
   },
-  play: {
-    id: 'Play slider',
-    defaultMessage: 'Seleziona per riprodurre',
-  },
-  pause: {
-    id: 'Pause slider',
-    defaultMessage: 'Seleziona per mettere in pausa',
-  },
-  precedente: {
-    id: 'precedente',
-    defaultMessage: 'Precedente',
-  },
-  successivo: {
-    id: 'successivo',
-    defaultMessage: 'Successivo',
-  },
   dots: {
     id: 'dots',
     defaultMessage: 'Navigazione elementi slider',
@@ -56,169 +39,29 @@ const messages = defineMessages({
   },
 });
 
-function NextArrow(props) {
-  // Custom handling of focus for a11y
-  const { className, style, onClick, intl, currentSlide } = props;
-  const handleClick = (options) => {
-    onClick(options, false);
-  };
-  const handleKeyboardUsers = (e) => {
-    if (e.key === 'Tab' && e.shiftKey) {
-      e.stopPropagation();
-      e.preventDefault();
-
-      const link = visibleSlideTitle(
-        `a.slide-link[data-slide="${currentSlide}"]`,
-      );
-      link && link.focus();
-    }
-  };
-
-  return (
-    <button
-      className={className}
-      style={{ ...style }}
-      onClick={handleClick}
-      title={intl.formatMessage(messages.successivo)}
-      aria-label={intl.formatMessage(messages.successivo)}
-      aria-hidden={true}
-      onKeyDown={handleKeyboardUsers}
-      id="sliderNextArrow"
-    >
-      <Icon
-        icon="chevron-right"
-        key="chevron-right"
-        title={intl.formatMessage(messages.successivo)}
-      />
-      <span class="visually-hidden">
-        {intl.formatMessage(messages.successivo)}
-      </span>
-    </button>
-  );
-}
-
-function PrevArrow(props) {
-  // Custom handling of focus for a11y
-  const {
-    className,
-    style,
-    onClick,
-    intl,
-    focusNext,
-    currentSlide,
-    slideCount,
-  } = props;
-  const handleClick = (options) => {
-    onClick(options, false);
-  };
-  const handleKeyboardUsers = (e) => {
-    if (e.key === 'Tab' && !e.shiftKey) {
-      e.stopPropagation();
-      e.preventDefault();
-      if (currentSlide < slideCount) {
-        const link = visibleSlideTitle(
-          `a.slide-link[data-slide="${currentSlide}"]`,
-        );
-        link && link.focus();
-      } else focusNext(0);
-    }
-  };
-  return (
-    <button
-      className={className}
-      style={{ ...style }}
-      onClick={handleClick}
-      title={intl.formatMessage(messages.precedente)}
-      aria-label={intl.formatMessage(messages.precedente)}
-      aria-hidden={true}
-      id="sliderPrevArrow"
-      onKeyDown={handleKeyboardUsers}
-    >
-      <Icon
-        icon="chevron-left"
-        key="chevron-left-prev"
-        title={intl.formatMessage(messages.precedente)}
-      />
-      <span class="visually-hidden">
-        {intl.formatMessage(messages.precedente)}
-      </span>
-    </button>
-  );
-}
+const Slide = (props) => {
+  const intl = useIntl();
+  const { item, index, appearance, appearanceProp, onKeyDown } = props;
 
-const Slide = ({
-  item,
-  index,
-  image,
-  show_image_title,
-  full_width,
-  intl,
-  setUserAutoplay,
-  userAutoplay,
-  slider,
-}) => {
-  const handleKeyboardUsers = (e) => {
-    const { key, shiftKey } = e;
-    if (key === 'Tab') {
-      e.stopPropagation();
-      e.preventDefault();
-      // Keeping auto pause off for now
-      // if (userAutoplay) setUserAutoplay(false);
-      // slider.current.slickPause();
-      let elementToFocus;
-      if (shiftKey) {
-        elementToFocus = document.getElementById('sliderPrevArrow');
-      } else elementToFocus = document.getElementById('sliderNextArrow');
-      elementToFocus.focus();
-    }
-  };
+  const appearances = config.blocks.blocksConfig.listing.variations.filter(
+    (v) => v.id === 'slider',
+  )[0]?.appearance;
+  const SlideItemAppearance = appearances[appearance] ?? appearances['default'];
 
   return (
-    <div
-      className="it-single-slide-wrapper"
+    <SingleSlideWrapper
       key={item['@id'] + index}
-      data-slide={index}
+      index={index}
+      onKeyDown={onKeyDown}
+      aria-label={
+        (props['aria-label'] ? props['aria-label'] + ' - ' : '') +
+        intl.formatMessage(messages.carouselItemAriaLabel)
+      }
     >
-      <div className="slide-wrapper">
-        {image ? (
-          <figure className="img-wrapper">{image}</figure>
-        ) : (
-          <div className="img-placeholder"></div>
-        )}
-        {show_image_title && (
-          <div className="slide-title">
-            <UniversalLink
-              item={item}
-              title={intl.formatMessage(messages.viewImage)}
-              tabIndex={0}
-              data-slide={index}
-              className={'slide-link no-external-if-link'}
-              onKeyDown={handleKeyboardUsers}
-            >
-              {full_width ? (
-                <Container>
-                  {item.title}{' '}
-                  <Icon
-                    icon="arrow-right"
-                    key="arrow-right-fw"
-                    title={intl.formatMessage(messages.openLink)}
-                  />
-                </Container>
-              ) : (
-                <>
-                  {item.title}{' '}
-                  <Icon
-                    icon="arrow-right"
-                    key="arrow-right"
-                    title={intl.formatMessage(messages.openLink)}
-                  />
-                </>
-              )}
-            </UniversalLink>
-          </div>
-        )}
+      <div className={'slide-wrapper'} role="presentation">
+        <SlideItemAppearance {...props} {...appearanceProp} intl={intl} />
       </div>
-    </div>
+    </SingleSlideWrapper>
   );
 };
 
@@ -235,13 +78,28 @@ const SliderTemplate = ({
   show_dots = true,
   autoplay = false,
   autoplay_speed = 2, //seconds
+  slide_appearance = 'default',
   reactSlick,
+  block,
+  ...otherProps
 }) => {
+  const block_id = block;
   const intl = useIntl();
+
   const [userAutoplay, setUserAutoplay] = useState(autoplay);
-  const nSlidesToShow = parseInt(slidesToShow);
+  const nSlidesToShow =
+    items.length < parseInt(slidesToShow)
+      ? items.length
+      : parseInt(slidesToShow);
   const Slider = reactSlick.default;
-  const { slider, focusNext } = useSlider(userAutoplay);
+  const {
+    slider,
+    focusSlide,
+    SliderNextArrow,
+    SliderPrevArrow,
+    handleSlideKeydown,
+  } = useSlider(userAutoplay, setUserAutoplay, block_id);
+
   const toggleAutoplay = () => {
     if (!slider?.current) return;
     if (userAutoplay) {
@@ -313,11 +171,11 @@ const SliderTemplate = ({
     focusOnSelect: false,
     draggable: true,
     accessibility: true,
-    nextArrow: <NextArrow intl={intl} focusNext={focusNext} />,
-    prevArrow: <PrevArrow intl={intl} focusNext={focusNext} />,
+    nextArrow: <SliderNextArrow intl={intl} />,
+    prevArrow: <SliderPrevArrow intl={intl} />,
     appendDots: renderCustomDots,
     // Custom handling of focus for a11y
-    afterChange: focusNext,
+    afterChange: focusSlide,
     responsive: [
       {
         breakpoint: 980,
@@ -333,7 +191,9 @@ const SliderTemplate = ({
     <div
       className={cx(`sliderTemplate slidesToShow-${nSlidesToShow || 1}`, {
         'no-margin': full_width,
+        ['appearance_' + slide_appearance]: slide_appearance,
       })}
+      id={'slider_' + block_id}
     >
       <Container className="px-4">
         {title && (
@@ -349,30 +209,11 @@ const SliderTemplate = ({
             'full-width': full_width,
           })}
         >
-          <div className="it-carousel-all it-card-bg">
+          <CarouselWrapper className="it-card-bg">
             {items?.length > nSlidesToShow && (
-              <div className="play-pause-wrapper">
-                <button
-                  onClick={toggleAutoplay}
-                  title={
-                    userAutoplay
-                      ? intl.formatMessage(messages.pause)
-                      : intl.formatMessage(messages.play)
-                  }
-                  tabIndex={0}
-                >
-                  <Icon
-                    key={userAutoplay ? 'pause' : 'play'}
-                    icon={userAutoplay ? 'pause' : 'play'}
-                    title={
-                      userAutoplay
-                        ? intl.formatMessage(messages.pause)
-                        : intl.formatMessage(messages.play)
-                    }
-                  />
-                  <span>{userAutoplay ? 'pause' : 'play'}</span>
-                </button>
-              </div>
+              <ButtonPlayPause onClick={toggleAutoplay} autoplay={userAutoplay}>
+                <span>{userAutoplay ? 'pause' : 'play'}</span>
+              </ButtonPlayPause>
             )}
 
             <Slider {...settings} ref={slider}>
@@ -383,6 +224,8 @@ const SliderTemplate = ({
                   sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`,
                   critical: true,
                 });
+                const nextIndex = index < items.length - 1 ? index + 1 : null;
+                const prevIndex = index > 0 ? index - 1 : null;
                 return (
                   <Slide
                     image={image}
@@ -390,15 +233,22 @@ const SliderTemplate = ({
                     full_width={full_width}
                     item={item}
                     show_image_title={show_image_title}
-                    intl={intl}
-                    setUserAutoplay={setUserAutoplay}
                     userAutoplay={userAutoplay}
                     slider={slider}
+                    appearance={slide_appearance}
+                    appearanceProp={otherProps}
+                    block_id={block_id}
+                    aria-label={
+                      !show_image_title && slide_appearance === 'default'
+                        ? item.title
+                        : null
+                    }
+                    onKeyDown={handleSlideKeydown(index, prevIndex, nextIndex)}
                   />
                 );
               })}
             </Slider>
-          </div>
+          </CarouselWrapper>
         </div>
         <ListingLinkMore title={linkTitle} href={linkHref} className="my-4" />
       </Container>

package/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx

@@ -7,10 +7,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { useIntl, defineMessages } from 'react-intl';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { Button, Container } from 'design-react-kit';
+
+import {
+  Icon,
+  CarouselWrapper,
+  NextArrow,
+  PrevArrow,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { Container } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
 
 /**
@@ -19,49 +23,7 @@ import { UniversalLink } from '@plone/volto/components';
  * @extends Component
  */
 
-const messages = defineMessages({
-  videogallery_next_arrow: {
-    id: 'videogallery_next_arrow',
-    defaultMessage: 'Prossimo video',
-  },
-  videogallery_prev_arrow: {
-    id: 'videogallery_prev_arrow',
-    defaultMessage: 'Video precedente',
-  },
-});
-
 const Body = ({ data, children, nItems = 0, reactSlick }) => {
-  const intl = useIntl();
-
-  const NextArrow = (props) => {
-    const { onClick, className } = props;
-    return (
-      <Button
-        outline
-        color={'unset'}
-        className={className}
-        onClick={onClick}
-        aria-label={intl.formatMessage(messages.videogallery_next_arrow)}
-      >
-        <FontAwesomeIcon icon={['fas', 'chevron-right']} />
-      </Button>
-    );
-  };
-  const PrevArrow = (props) => {
-    const { onClick, className } = props;
-    return (
-      <Button
-        outline
-        color={'unset'}
-        className={className}
-        onClick={onClick}
-        aria-label={intl.formatMessage(messages.videogallery_prev_arrow)}
-      >
-        <FontAwesomeIcon icon={['fas', 'chevron-left']} />
-      </Button>
-    );
-  };
-
   const Slider = reactSlick.default;
 
   const settings = {
@@ -127,9 +89,9 @@ const Body = ({ data, children, nItems = 0, reactSlick }) => {
         )}
 
         <div className="slider-container">
-          <div className="it-carousel-all">
+          <CarouselWrapper>
             <Slider {...settings}>{children}</Slider>
-          </div>
+          </CarouselWrapper>
         </div>
       </Container>
     </div>

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

@@ -14,6 +14,7 @@ import {
 import Sidebar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/VideoGallery/Sidebar';
 import Body from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/VideoGallery/Body';
 import EditBlock from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/VideoGallery/Block/EditBlock';
+import { SingleSlideWrapper } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const messages = defineMessages({
   addItem: {
@@ -51,14 +52,14 @@ class Edit extends SubblocksEdit {
         <SubblocksWrapper node={this.node}>
           <Body {...this.props} nItems={this.state.subblocks?.length}>
             {this.state.subblocks.map((subblock, subindex) => (
-              <div className="it-single-slide-wrapper" key={subblock.id}>
+              <SingleSlideWrapper key={subblock.id} index={subindex}>
                 <EditBlock
                   data={subblock}
                   index={subindex}
                   selected={this.isSubblockSelected(subindex)}
                   {...this.subblockProps}
                 />
-              </div>
+              </SingleSlideWrapper>
             ))}
             {this.state.subblocks.length === 0 && (
               <div>{this.props.intl.formatMessage(messages.noVideos)}</div>

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

@@ -7,6 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Body from './Body';
 import ViewBlock from './Block/ViewBlock';
+import { SingleSlideWrapper } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 /**
  * View icons blocks class.
@@ -18,9 +19,9 @@ const View = ({ data, block }) => {
     <div className="block video_gallery">
       <Body data={data} nItems={data.subblocks?.length}>
         {data.subblocks.map((subblock, subindex) => (
-          <div className="it-single-slide-wrapper" key={subindex}>
+          <SingleSlideWrapper key={subindex} index={subindex}>
             <ViewBlock data={subblock} />
-          </div>
+          </SingleSlideWrapper>
         ))}
       </Body>
     </div>

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

@@ -11,6 +11,7 @@ import { isEqual } from 'lodash';
 import { UniversalLink } from '@plone/volto/components';
 import { Row, Col, LinkList, LinkListItem } from 'design-react-kit';
 import { SectionIcon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -35,6 +36,8 @@ const FooterNavigation = () => {
     );
   }
 
+  const markFooterLinks = config.settings.siteProperties.markFooterLinks;
+
   return show_navigation ? (
     <>
       {items && (
@@ -65,6 +68,9 @@ const FooterNavigation = () => {
                   }
                 >
                   {item.title}
+                  {markFooterLinks && (
+                    <Icon icon="it-arrow-right" color="white" size="sm" />
+                  )}
                 </Link>
               </h4>
               {/* DEPRECATED: isFooterCollapsed to be removed in version 12 */}

package/src/components/ItaliaTheme/Header/HeaderSlim/TertiaryMenu.jsx

@@ -3,21 +3,50 @@
  * @module components/ItaliaTheme/Header/HeaderSlim/TertiaryMenu
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
+import cx from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import { Nav, NavItem, NavLink } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import { useIntl } from 'react-intl';
-import config from '@plone/volto/registry';
+import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
+import { getSlimHeader, getItemsByPath } from 'volto-slimheader';
 
 const TertiaryMenu = () => {
   const intl = useIntl();
-  let menu = config.settings.siteProperties.headerslimTertiaryMenu;
-  const items = menu[intl.locale];
+  const pathname = useLocation().pathname;
+  const dispatch = useDispatch();
+
+  const slimHeader = useSelector((state) => state.slimHeader?.result);
+  const slimHeaderItems = getItemsByPath(slimHeader, pathname)
+    ?.filter((item) => item.visible)
+    .map((item) => {
+      return {
+        url: item.href || flattenToAppURL(item.linkUrl?.[0]?.['@id']) || '/',
+        title: item.title,
+        inEvidence:item.inEvidence
+      };
+    });
+
+  const staticMenu =
+    getSiteProperty('headerslimTertiaryMenu', intl.locale) ?? [];
+
+  useEffect(() => {
+    dispatch(getSlimHeader());
+  }, [dispatch]);
+
+  const items = slimHeaderItems?.length > 0 ? slimHeaderItems : staticMenu;
 
   return items?.length > 0 ? (
     <Nav vertical={false} className="tertiary-menu">
       {items.map((navitem, id) => (
-        <NavItem tag="li" key={id}>
+        <NavItem
+          tag="li"
+          key={id}
+          className={cx('', { 'in-evidence': navitem.inEvidence })}
+        >
           <NavLink href={navitem.url} tag={UniversalLink}>
             <span>{navitem.title}</span>
           </NavLink>

package/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx

@@ -37,6 +37,8 @@ const FontAwesomeIcon = (props) => {
         ? 'brands'
         : prefixKey === 'far'
         ? 'regular'
+        : prefixKey != null
+        ? prefixKey
         : 'solid',
       iconName,
     ];

package/src/components/ItaliaTheme/MegaMenu/MegaMenu.jsx

@@ -114,11 +114,12 @@ const MegaMenu = ({ item, pathname }) => {
     return item.linkUrl?.length > 0 ? (
       <NavItem tag="li" active={isItemActive} role="none">
         <NavLink
+          className={isItemActive ? 'focus--mouse' : ''}
           href={item.linkUrl === '' ? '/' : null}
           item={item.linkUrl[0]?.['@id'] ? item.linkUrl[0] : '#'}
           tag={UniversalLink}
-          active={isItemActive}
           data-element={item.id_lighthouse}
+          active={isItemActive}
           role="menuitem"
         >
           <span dangerouslySetInnerHTML={{ __html: item.title }}></span>
@@ -239,7 +240,12 @@ const MegaMenu = ({ item, pathname }) => {
     }
 
     return (
-      <NavItem tag="li" className="megamenu" active={isItemActive} role="none">
+      <NavItem
+        tag="li"
+        className={isItemActive ? 'focus--mouse megamenu' : 'megamenu'}
+        active={isItemActive}
+        role="none"
+      >
         <UncontrolledDropdown
           nav
           inNavbar

package/src/components/ItaliaTheme/MenuSecondary/MenuSecondary.jsx

@@ -53,6 +53,9 @@ const MenuSecondary = ({ pathname }) => {
               <NavLink
                 href={url === '' ? '/' : flattenToAppURL(url)}
                 tag={UniversalLink}
+                className={
+                  isMenuActive(url) ? 'focus--mouse megamenu' : 'megamenu'
+                }
                 active={isMenuActive(url)}
                 data-element={item.id_lighthouse}
                 role="menuitem"

package/src/components/ItaliaTheme/Slider/ButtonPlayPause.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+const messages = defineMessages({
+  play: {
+    id: 'Play slider',
+    defaultMessage: 'Seleziona per riprodurre lo slider',
+  },
+  pause: {
+    id: 'Pause slider',
+    defaultMessage: 'Seleziona per mettere in pausa lo slider',
+  },
+});
+const ButtonPlayPause = ({ onClick, autoplay, showLabel = true, children }) => {
+  const intl = useIntl();
+
+  return (
+    <div className="play-pause-wrapper">
+      <button
+        onClick={onClick}
+        title={
+          autoplay
+            ? intl.formatMessage(messages.pause)
+            : intl.formatMessage(messages.play)
+        }
+        aria-label={
+          autoplay
+            ? intl.formatMessage(messages.pause)
+            : intl.formatMessage(messages.play)
+        }
+        tabIndex={0}
+      >
+        <Icon
+          key={autoplay ? 'pause' : 'play'}
+          icon={autoplay ? 'pause' : 'play'}
+          title={
+            autoplay
+              ? intl.formatMessage(messages.pause)
+              : intl.formatMessage(messages.play)
+          }
+        />
+        {showLabel && <span>{autoplay ? 'pause' : 'play'}</span>}
+      </button>
+    </div>
+  );
+};
+
+export default ButtonPlayPause;