@kitconcept/volto-light-theme 7.0.0-alpha.19 → 7.0.0-alpha.20

package/.changelog.draft

@@ -1,13 +1,11 @@
-## 7.0.0-alpha.19 (2025-07-25)
+## 7.0.0-alpha.20 (2025-07-29)
 
-### Bugfix
+### Feature
 
-- Fix the listing body width in grid listing variation. @iFlameing [#618](https://github.com/kitconcept/volto-light-theme/pull/618)
+- Added Slider Variations @Tishasoumya-02 
 
-### Internal
+### Bugfix
 
-- Add cypress test for sort_on, sort_order for eventCalendar block. @iFlameing [#619](https://github.com/kitconcept/volto-light-theme/pull/619)
-- Fix alt tag fallback to title if srcAlt is missing in IconLinkList @iRohitSingh [#620](https://github.com/kitconcept/volto-light-theme/pull/620)
-- Use volto-dsgvo-banner 2.5.1 @sneridagh 
+- Fix alt tag fallback in IconLinkList @iRohitSingh [#621](https://github.com/kitconcept/volto-light-theme/pull/621)
 
 

package/CHANGELOG.md

@@ -8,6 +8,16 @@
 
 <!-- towncrier release notes start -->
 
+## 7.0.0-alpha.20 (2025-07-29)
+
+### Feature
+
+- Added Slider Variations @Tishasoumya-02 
+
+### Bugfix
+
+- Fix alt tag fallback in IconLinkList @iRohitSingh [#621](https://github.com/kitconcept/volto-light-theme/pull/621)
+
 ## 7.0.0-alpha.19 (2025-07-25)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.0.0-alpha.19",
+  "version": "7.0.0-alpha.20",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -42,7 +42,7 @@
     "typescript": "^5.7.3",
     "release-it": "^19.0.3",
     "vitest": "^3.1.2",
-    "@plone/types": "1.4.5"
+    "@plone/types": "1.4.1"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
@@ -52,6 +52,8 @@
     "react-aria-components": "^1.7.0",
     "react-colorful": "^5.6.1",
     "uuid": "^11.0.0",
+    "embla-carousel-autoplay": "^8.0.0",
+    "embla-carousel-react": "^8.0.0",
     "@plone/components": "^3.0.2"
   },
   "peerDependencies": {

package/src/components/Blocks/Slider/DefaultBody.jsx

@@ -100,6 +100,7 @@ const SliderBody = ({
           <MaybeWrap
             condition={!isEditMode}
             as={UniversalLink}
+            className="link-container"
             href={href['@id']}
             target={
               data.openLinkInNewTab ||

package/src/components/Blocks/Slider/SliderVariants.jsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import { Input, Button, Message } from 'semantic-ui-react';
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+import cx from 'classnames';
+import navTreeSVG from '@plone/volto/icons/nav.svg';
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  PleaseChooseContent: {
+    id: 'Please choose an existing content as source for this element',
+    defaultMessage:
+      'Please choose an existing content as source for this element',
+  },
+  moreInfo: {
+    id: 'moreInfo',
+    defaultMessage: 'More info',
+  },
+  source: {
+    id: 'Source',
+    defaultMessage: 'Source',
+  },
+  ButtonText: {
+    id: 'Continue reading',
+    defaultMessage: 'Continue reading',
+  },
+});
+
+const DefaultImage = (props) => <img {...props} alt={props.alt || ''} />;
+
+const SliderVariants = ({
+  index,
+  onChangeBlock,
+  block,
+  data,
+  dataBlock,
+  isEditMode,
+  openObjectBrowser,
+}) => {
+  const intl = useIntl();
+  const href = data.href?.[0];
+  const image = data.preview_image?.[0];
+
+  const Image = config.getComponent('Image').component || DefaultImage;
+  const { openExternalLinkInNewTab } = config.settings;
+
+  const handleClick = () => {
+    openObjectBrowser({
+      onSelectItem: (url, document) => {
+        dataBlock.slides[index].title = document.Title;
+        dataBlock.slides[index].description = document.Description;
+        dataBlock.slides[index].href = [
+          {
+            '@id': document['@id'],
+            Title: document.Title,
+            Description: document.Description,
+            title: document.Title,
+            image_field: document.image_field,
+            hasPreviewImage: document.hasPreviewImage,
+          },
+        ];
+        onChangeBlock(block, dataBlock);
+      },
+      mode: 'link',
+    });
+  };
+
+  return (
+    <div
+      className={cx('grid-teaser-item top', {
+        'empty-slide': !href && isEditMode,
+      })}
+    >
+      {!href && isEditMode && (
+        <Message>
+          <div className="grid-teaser-item default">
+            <img src={imageBlockSVG} alt="" />
+            <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
+            <div className="toolbar-inner">
+              <Button.Group>
+                <Button onClick={handleClick} icon basic>
+                  <Icon name={navTreeSVG} size="24px" />
+                </Button>
+              </Button.Group>
+              <Input
+                placeholder={`${intl.formatMessage(messages.source)}...`}
+                onClick={handleClick}
+                onFocus={(e) => e.target.blur()}
+              />
+            </div>
+          </div>
+        </Message>
+      )}
+      {href && (
+        <MaybeWrap
+          condition={!isEditMode}
+          as={UniversalLink}
+          href={href['@id']}
+          className="link-container"
+          target={
+            data.openLinkInNewTab ||
+            (openExternalLinkInNewTab && !isInternalURL(href['@id']))
+              ? '_blank'
+              : null
+          }
+          tabIndex="-1"
+        >
+          <div
+            className={cx(
+              'teaser-item top',
+              `has--slider--flagAlign--${data.flagAlign}`,
+              dataBlock.variation,
+            )}
+          >
+            {(href?.hasPreviewImage || href.image_field || image) && (
+              <div className="highlight-image-wrapper gradient">
+                <Image
+                  item={image || href}
+                  imageField={image ? image.image_field : href.image_field}
+                  alt=""
+                  loading="lazy"
+                  responsive={true}
+                />
+              </div>
+            )}
+            <div className="teaser-item-title fix-width-issue">
+              <div className="title">
+                {data?.head_title && (
+                  <span className="supertitle">{data?.head_title}</span>
+                )}
+                <h2>{data?.nav_title || data?.title}</h2>
+              </div>
+              <p>{data?.description}</p>
+
+              {!data.hideButton && (
+                <Button tabIndex={'-1'}>
+                  {data.buttonText || intl.formatMessage(messages.ButtonText)}
+                </Button>
+              )}
+            </div>
+          </div>
+        </MaybeWrap>
+      )}
+    </div>
+  );
+};
+
+export default SliderVariants;

package/src/components/Blocks/Slider/View.jsx

@@ -0,0 +1,179 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Message } from 'semantic-ui-react';
+import useEmblaCarousel from 'embla-carousel-react';
+import Autoplay from 'embla-carousel-autoplay';
+import cx from 'classnames';
+import { defineMessages, useIntl } from 'react-intl';
+import Body from '@kitconcept/volto-slider-block/components/Body';
+import withBlockExtensions from '@plone/volto/helpers/Extensions/withBlockExtensions';
+import {
+  DotButton,
+  NextButton,
+  PrevButton,
+} from '@kitconcept/volto-slider-block/components/DotsAndArrows';
+import teaserTemplate from '@kitconcept/volto-slider-block/icons/teaser-template.svg';
+
+const messages = defineMessages({
+  PleaseChooseContent: {
+    id: 'Please choose an existing content as source for this element',
+    defaultMessage:
+      'Please choose an existing content as source for this element',
+  },
+});
+
+const SliderView = (props) => {
+  const {
+    className,
+    data,
+    isEditMode = false,
+    block,
+    openObjectBrowser,
+    onChangeBlock,
+    slideIndex,
+    setSlideIndex,
+  } = props;
+  const intl = useIntl();
+
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollSnaps, setScrollSnaps] = useState([]);
+  const autoplay =
+    data.autoplayEnabled !== undefined ? data.autoplayEnabled : false;
+  const autoplayOptions = {
+    delay: data.autoplayDelay,
+    jump: data.autoplayJump,
+  };
+  const plugins = isEditMode ? [] : autoplay ? [Autoplay(autoplayOptions)] : [];
+
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, plugins);
+
+  const scrollPrev = useCallback(() => {
+    if (emblaApi) {
+      emblaApi.scrollPrev();
+      setSlideIndex && setSlideIndex(selectedIndex - 1);
+    }
+  }, [emblaApi, selectedIndex, setSlideIndex]);
+
+  const scrollNext = useCallback(() => {
+    if (emblaApi) {
+      emblaApi.scrollNext();
+      setSlideIndex && setSlideIndex(selectedIndex + 1);
+    }
+  }, [emblaApi, selectedIndex, setSlideIndex]);
+
+  const scrollTo = useCallback(
+    (index) => {
+      if (emblaApi) {
+        emblaApi.scrollTo(index);
+        setSlideIndex && setSlideIndex(index);
+      }
+    },
+    [emblaApi, setSlideIndex],
+  );
+
+  const onInit = useCallback((emblaApi) => {
+    setScrollSnaps(emblaApi.scrollSnapList());
+  }, []);
+
+  const onSelect = useCallback((emblaApi) => {
+    setSelectedIndex(emblaApi.selectedScrollSnap());
+    setPrevBtnDisabled(!emblaApi.canScrollPrev());
+    setNextBtnDisabled(!emblaApi.canScrollNext());
+  }, []);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+
+    onInit(emblaApi);
+    onSelect(emblaApi);
+    emblaApi.on('reInit', onInit);
+    emblaApi.on('reInit', onSelect);
+    emblaApi.on('select', onSelect);
+  }, [emblaApi, onInit, onSelect]);
+
+  useEffect(() => {
+    // This syncs the current slide with the objectwidget (or other sources
+    // able to access the slider context)
+    // that can modify the SliderContext (and come here via props slideIndex)
+    if (isEditMode) {
+      scrollTo(slideIndex);
+    }
+  }, [slideIndex, scrollTo, isEditMode]);
+
+  const sliderContainerWidth = emblaApi
+    ?.rootNode()
+    .getBoundingClientRect().width;
+
+  return (
+    <>
+      {/* START CUSTOMIZATION */}
+      <div
+        className={cx('block slider', data.variation || 'default', className)}
+        style={{ '--slider-container-width': `${sliderContainerWidth}px` }}
+      >
+        {/* END CUSTOMIZATION */}
+        {(data.slides?.length === 0 || !data.slides) && isEditMode && (
+          <Message>
+            <div className="teaser-item default">
+              <img src={teaserTemplate} alt="" />
+              <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
+            </div>
+          </Message>
+        )}
+        {data.slides?.length > 0 && (
+          <>
+            <div className="slider-wrapper">
+              {!data.hideArrows && data.slides?.length > 1 && (
+                <>
+                  <PrevButton onClick={scrollPrev} disabled={prevBtnDisabled} />
+                  <NextButton onClick={scrollNext} disabled={nextBtnDisabled} />
+                </>
+              )}
+
+              <div className="slider-viewport" ref={emblaRef}>
+                <div className="slider-container">
+                  {data.slides &&
+                    data.slides.map((item, index) => {
+                      return (
+                        <div key={item['@id']} className="slider-slide">
+                          <Body
+                            {...props}
+                            key={item['@id']}
+                            data={item}
+                            isEditMode={isEditMode}
+                            dataBlock={data}
+                            index={index}
+                            block={block}
+                            openObjectBrowser={openObjectBrowser}
+                            onChangeBlock={onChangeBlock}
+                            isActive={selectedIndex === index}
+                          />
+                        </div>
+                      );
+                    })}
+                </div>
+              </div>
+            </div>
+            {data.slides?.length > 1 && (
+              <div className="slider-dots">
+                {scrollSnaps.map((_, index) => (
+                  <DotButton
+                    key={index}
+                    index={index}
+                    onClick={() => scrollTo(index)}
+                    className={'slider-dot'.concat(
+                      index === selectedIndex ? ' slider-dot--selected' : '',
+                    )}
+                  />
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default withBlockExtensions(SliderView);

package/src/components/StickyMenu/StickyMenu.tsx

@@ -21,6 +21,8 @@ const StickyMenu = ({ content }: { content: Content }) => {
   return (
     <div
       className="sticky-menu"
+      role="navigation"
+      aria-label="Sticky menu"
       style={
         {
           '--sticky-menu-color': sticky_menu_color,

package/src/config/blocks.tsx

@@ -45,6 +45,8 @@ import SearchBlockViewEvent from '../components/Blocks/EventCalendar/Search/Sear
 import SearchBlockEditEvent from '../components/Blocks/EventCalendar/Search/SearchBlockEdit';
 import SearchBlockSchemaEvent from '../components/Blocks/EventCalendar/Search/schema';
 import EventCalenderTemplate from '../components/Blocks/EventCalendar/Search/components/EventTemplate';
+import SliderVariants from '../components/Blocks/Slider/SliderVariants';
+import DefaultBody from '../customizations/@kitconcept/volto-slider-block/components/DefaultBody';
 
 declare module '@plone/types' {
   export interface BlocksConfigData {
@@ -414,6 +416,40 @@ export default function install(config: ConfigType) {
   // Slider Block
   config.blocks.blocksConfig.slider = {
     ...config.blocks.blocksConfig.slider,
+    variations: [
+      {
+        id: 'default',
+        title: 'Default',
+        isDefault: true,
+        view: DefaultBody,
+      },
+      {
+        id: 'full-height',
+        title: 'Full Height',
+        view: SliderVariants,
+      },
+      {
+        id: 'side',
+        title: 'Side',
+        view: SliderVariants,
+      },
+      /* Why do we have two full-side variations?
+      because in listings we don't want to show the eventCalender variation and we dont
+      have any way to remove it from the list of variations in listing blocks because
+      in eventCaledarblock we use listingbody component for showing the variation.
+      you can see the css in listing.scss where we are hiding the option 3 using css
+      line no.6 */
+      {
+        id: 'full-side',
+        title: 'Full Side',
+        view: SliderVariants,
+      },
+      {
+        id: 'full-side',
+        title: 'Full Side',
+        view: SliderVariants,
+      },
+    ],
     schemaEnhancer: sliderBlockSchemaEnhancer,
   };
 

package/src/customizations/@kitconcept/volto-slider-block/components/View.jsx

@@ -0,0 +1,11 @@
+/**
+ * OVERRIDE View.jsx
+ * REASON: Adding variants.
+ * VERSION: 6.3.1
+ * DATE: 2025-07-18
+ * DEVELOPER: @Tishasoumya-02
+ */
+
+import View from '../../../../components/Blocks/Slider/View';
+
+export default View;

package/src/primitives/IconLinkList.tsx

@@ -59,10 +59,7 @@ const IconLinkList = (props: IconLinkListProps) => {
                   openLinkInNewTab={item.openInNewTab}
                 >
                   <div className="image-wrapper">
-                    <img
-                      src={itemInfo.src}
-                      alt={itemInfo.srcAlt || itemInfo.title}
-                    />
+                    <img src={itemInfo.src} alt={itemInfo.srcAlt || ''} />
                   </div>
                   <span>{itemInfo.title}</span>
                 </ConditionalLink>

package/src/theme/blocks/_slider.scss

@@ -8,32 +8,41 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
   }
 
   .slider-viewport {
-    margin-bottom: 0;
+    margin-bottom: $spacing-medium;
   }
 
   .slider-dots {
-    padding-bottom: 40px;
-  }
-
-  .highlight-image-wrapper {
-    display: flex; // Small gap was appearing between the wrapper and the image (??)
-
-    img {
-      // Override Volto's Image Component inline style aspect ratio.
-      aspect-ratio: var(
-        --image-aspect-ratio,
-        $sliderImagesAspectRatio
-      ) !important;
-    }
+    padding-bottom: $spacing-medium;
   }
 
   .teaser-item,
   .grid-teaser-item {
     flex-direction: column;
+    @media only screen and (max-width: $computer-width) {
+      height: 100%;
+    }
   }
+  .link-container {
+    @media only screen and (max-width: $computer-width) {
+      height: 100%;
+    }
+  }
+
   .teaser-item {
-    padding-bottom: $spacing-medium;
+    .highlight-image-wrapper {
+      display: flex; // Small gap was appearing between the wrapper and the image (??)
 
+      img {
+        // Override Volto's Image Component inline style aspect ratio.
+        aspect-ratio: var(
+          --image-aspect-ratio,
+          $sliderImagesAspectRatio
+        ) !important;
+      }
+    }
+    @media only screen and (max-width: $computer-width) {
+      display: flex;
+    }
     .teaser-item-title {
       position: absolute;
       top: 50%;
@@ -51,6 +60,7 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
       @media only screen and (max-width: $computer-width) {
         position: static;
         width: 100%;
+        height: 100%;
         padding: 60px 20px;
         background: $black;
         transform: none;
@@ -112,4 +122,243 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
     line-height: 20px;
     text-align: center;
   }
+
+  &.side {
+    .teaser-item {
+      display: grid;
+      align-items: center;
+      padding: 0 130px;
+      aspect-ratio: 16/9;
+      background: rgba(0, 0, 0, 0.75);
+      gap: 70px;
+      grid-template-areas: 'images content';
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto;
+      @media only screen and (max-width: $computer-width) {
+        display: flex;
+        padding: 0 0;
+        aspect-ratio: auto;
+        gap: 0;
+      }
+
+      &.has--slider--flagAlign--right {
+        grid-template-areas: 'images content';
+      }
+      &.has--slider--flagAlign--left {
+        grid-template-areas: 'content images';
+      }
+
+      .highlight-image-wrapper {
+        grid-area: images;
+
+        img {
+          aspect-ratio: var(
+            --image-aspect-ratio,
+            $sliderImagesAspectRatio
+          ) !important;
+
+          @media only screen and (max-width: $computer-width) {
+            width: 100%;
+          }
+        }
+      }
+      .teaser-item-title {
+        position: relative;
+        top: 0;
+        width: 100%;
+        align-content: center;
+        padding: 0;
+        background: none;
+        color: white;
+        grid-area: content;
+        transform: none;
+
+        @media only screen and (max-width: $computer-width) {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          padding: 60px 20px;
+          background: $black;
+          transform: none;
+        }
+      }
+    }
+    .slider-button {
+      width: 130px;
+      background: rgba(0, 0, 0, 0);
+
+      svg.icon {
+        width: 50px !important;
+        height: 50px !important;
+        padding: 40px;
+        background: rgba(0, 0, 0, 0.15);
+      }
+    }
+  }
+  &.full-side {
+    .teaser-item {
+      display: grid;
+      align-items: center;
+      aspect-ratio: 16/9;
+      background: rgba(0, 0, 0, 0.75);
+      gap: 60px;
+      grid-template-areas: 'images content';
+      grid-template-columns: 3fr 2fr;
+      grid-template-rows: auto;
+
+      @media only screen and (max-width: $computer-width) {
+        display: flex;
+        padding-right: 0;
+        padding-left: 0;
+        aspect-ratio: auto;
+        gap: 0;
+      }
+
+      &.has--slider--flagAlign--right {
+        padding-right: 130px;
+        grid-template-areas: 'images content';
+        grid-template-columns: 3fr 2fr;
+        @media only screen and (max-width: $computer-width) {
+          padding-right: 0;
+        }
+      }
+      &.has--slider--flagAlign--left {
+        padding-left: 130px;
+        grid-template-areas: 'content images';
+        grid-template-columns: 2fr 3fr;
+        @media only screen and (max-width: $computer-width) {
+          padding-left: 0;
+        }
+      }
+
+      .highlight-image-wrapper {
+        grid-area: images;
+        img {
+          aspect-ratio: var(
+            --image-aspect-ratio,
+            $sliderImagesAspectRatio
+          ) !important;
+
+          @media only screen and (max-width: $computer-width) {
+            width: 100%;
+          }
+        }
+      }
+
+      .teaser-item-title {
+        position: relative;
+        top: 0;
+        width: 100%;
+        align-self: center;
+        padding: 0;
+        background: none;
+        color: white;
+        grid-area: content;
+        transform: none;
+
+        @media only screen and (max-width: $computer-width) {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          padding: 60px 20px;
+          background: $black;
+          transform: none;
+        }
+      }
+    }
+    .slider-button {
+      width: 130px;
+      background: rgba(0, 0, 0, 0);
+      svg.icon {
+        width: 50px !important;
+        height: 50px !important;
+        padding: 40px;
+        background: rgba(0, 0, 0, 0.15);
+      }
+    }
+  }
+
+  &.full-height {
+    .teaser-item {
+      display: grid;
+      aspect-ratio: 16/9;
+      background: rgba(0, 0, 0, 0.75);
+      grid-template-areas: 'images content';
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto;
+
+      @media only screen and (max-width: $computer-width) {
+        display: flex;
+        padding-right: 0;
+        padding-left: 0;
+        aspect-ratio: auto;
+      }
+
+      &.has--slider--flagAlign--right {
+        grid-template-areas: 'images content';
+        .teaser-item-title {
+          padding-left: 74px; //Adding gap between the image & content
+          @media only screen and (max-width: $computer-width) {
+            padding-left: 20px;
+          }
+        }
+      }
+      &.has--slider--flagAlign--left {
+        grid-template-areas: 'content images';
+        .teaser-item-title {
+          padding-right: 74px; //Adding gap between the image & content
+          @media only screen and (max-width: $computer-width) {
+            padding-right: 20px;
+          }
+        }
+      }
+
+      .highlight-image-wrapper {
+        grid-area: images;
+
+        img {
+          aspect-ratio: var(
+            --image-aspect-ratio,
+            $sliderImagesAspectRatio
+          ) !important;
+
+          @media only screen and (max-width: $computer-width) {
+            width: 100%;
+          }
+        }
+      }
+      .teaser-item-title {
+        position: relative;
+        top: 0;
+        width: 100%;
+        align-self: center;
+        padding: $spacing-medium 130px;
+        background: none;
+        color: white;
+        grid-area: content;
+
+        transform: translateY(0);
+
+        @media only screen and (max-width: $computer-width) {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          padding: 60px 20px;
+          background: $black;
+          transform: none;
+        }
+      }
+    }
+    .slider-button {
+      width: 130px;
+      background: rgba(0, 0, 0, 0);
+
+      svg.icon {
+        width: 50px !important;
+        height: 50px !important;
+        padding: 40px;
+        background: rgba(0, 0, 0, 0.15);
+      }
+    }
+  }
 }