@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/src/components/Carousel/tests/{Carousel.unit.test.js → Carousel.unit.test.jsx}

@@ -183,25 +183,130 @@ describe("rendering Carousel", () => {
       ).toBeInTheDocument();
     });
   });
-  describe("colorScheme prop", () => {
-    const items = [<p key="item1">item1</p>];
-    it("adds is-dark class when colorScheme is dark", () => {
+
+  describe("external controls integration", () => {
+    const items = [
+      <p key="item1">item1</p>,
+      <p key="item2">item2</p>,
+      <p key="item3">item3</p>,
+    ];
+
+    it("should render with data-carousel-id when id is provided", () => {
       const { container } = render(
-        <Carousel items={items} colorScheme="dark" />,
+        <Carousel id="test-carousel" items={items} />,
       );
-      expect(container.querySelector(".carousel")).toHaveClass("is-dark");
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveAttribute("id", "test-carousel");
     });
-    it("adds is-light class when colorScheme is light", () => {
+
+    it("should support external controls via data attributes", () => {
       const { container } = render(
-        <Carousel items={items} colorScheme="light" />,
+        <div>
+          <Carousel id="external-carousel" items={items} />
+          <button
+            data-carousel-controls="external-carousel"
+            data-carousel-action="prev"
+            data-testid="external-prev"
+          >
+            Previous
+          </button>
+          <button
+            data-carousel-controls="external-carousel"
+            data-carousel-action="next"
+            data-testid="external-next"
+          >
+            Next
+          </button>
+        </div>,
+      );
+
+      const carousel = container.querySelector(".carousel");
+      const prevButton = container.querySelector(
+        '[data-testid="external-prev"]',
+      );
+      const nextButton = container.querySelector(
+        '[data-testid="external-next"]',
       );
-      expect(container.querySelector(".carousel")).toHaveClass("is-light");
+
+      expect(carousel).toHaveAttribute("id", "external-carousel");
+      expect(prevButton).toHaveAttribute(
+        "data-carousel-controls",
+        "external-carousel",
+      );
+      expect(prevButton).toHaveAttribute("data-carousel-action", "prev");
+      expect(nextButton).toHaveAttribute(
+        "data-carousel-controls",
+        "external-carousel",
+      );
+      expect(nextButton).toHaveAttribute("data-carousel-action", "next");
     });
-    it("does not add color scheme classes when colorScheme is not provided", () => {
-      const { container } = render(<Carousel items={items} />);
+
+    it("should work with both id and data-carousel-id", () => {
+      const { container } = render(
+        <Carousel id="test-id" data-carousel-id="test-data-id" items={items} />,
+      );
+
       const carousel = container.querySelector(".carousel");
-      expect(carousel).not.toHaveClass("is-dark");
-      expect(carousel).not.toHaveClass("is-light");
+      expect(carousel).toHaveAttribute("id", "test-id");
+      expect(carousel).toHaveAttribute("data-carousel-id", "test-data-id");
+    });
+  });
+
+  describe("Auto-disable feature", () => {
+    const items = [
+      <p key="item1">item1</p>,
+      <p key="item2">item2</p>,
+      <p key="item3">item3</p>,
+    ];
+
+    it("should render carousel element with id for auto-disable feature", () => {
+      const { container } = render(
+        <Carousel id="auto-disable-test" items={items} />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveAttribute("id", "auto-disable-test");
+    });
+
+    it("should support swiperOptions with slidesPerView for auto-disable", () => {
+      const swiperOptions = {
+        slidesPerView: 2,
+        breakpoints: {
+          1240: {
+            slidesPerView: 3,
+          },
+        },
+      };
+      const { container } = render(
+        <Carousel items={items} swiperOptions={swiperOptions} />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel.getAttribute("data-swiper-options")).toContain(
+        "slidesPerView",
+      );
+    });
+
+    it("should work with bleedRight carousel and auto-disable", () => {
+      const { container } = render(
+        <Carousel items={items} bleedRight showScrollbar />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveClass("carousel--bleed-right");
+    });
+
+    it("should support minimal slides for testing auto-disable", () => {
+      const minimalItems = [<p key="item1">item1</p>];
+      const { container } = render(<Carousel items={minimalItems} />);
+      const slides = container.getElementsByClassName("carousel__slide");
+      expect(slides.length).toBe(1);
+    });
+
+    it("should support many slides for testing auto-disable with high slidesPerView", () => {
+      const manyItems = Array.from({ length: 10 }, (_, i) => (
+        <p key={`item${i}`}>item{i}</p>
+      ));
+      const { container } = render(<Carousel items={manyItems} />);
+      const slides = container.getElementsByClassName("carousel__slide");
+      expect(slides.length).toBe(10);
     });
   });
 });

package/src/components/CarouselHero/CarouselHero.static.ts

@@ -1,29 +1,29 @@
-import type { SwiperOptions } from "swiper/types";
+import { Swiper } from "swiper";
 import {
-  Navigation,
-  Pagination,
   A11y,
-  Keyboard,
   Autoplay,
+  Keyboard,
+  Navigation,
+  Pagination,
 } from "swiper/modules";
-import { Swiper } from "swiper";
+import type { SwiperOptions } from "swiper/types";
 
 import {
-  CLASS_SLIDE,
-  CLASS_TRACK,
   CLASS_ACTIVE,
-  CLASS_PLAYING,
+  CLASS_PAGINATION_CIRCLE,
+  CLASS_PAGINATION_ITEM,
+  CLASS_PAGINATION_SVG,
   CLASS_PAUSED,
-  SELECTOR_VIEWPORT,
-  SELECTOR_PREV,
+  CLASS_PLAYING,
+  CLASS_SLIDE,
+  CLASS_TRACK,
   SELECTOR_NEXT,
+  SELECTOR_PAGINATION,
   SELECTOR_PLAY_PAUSE,
-  SELECTOR_TABS,
+  SELECTOR_PREV,
   SELECTOR_TAB,
-  SELECTOR_PAGINATION,
-  CLASS_PAGINATION_ITEM,
-  CLASS_PAGINATION_SVG,
-  CLASS_PAGINATION_CIRCLE,
+  SELECTOR_TABS,
+  SELECTOR_VIEWPORT,
 } from "./constants";
 
 export const defaultConfig: SwiperOptions = {
@@ -61,11 +61,13 @@ export default class CarouselHero {
   tabs: HTMLElement[] = [];
   _dotAnimationJustStarted: boolean = false;
   _isDragging: boolean = false;
+  private resizeRafId?: number;
 
   private _boundTabClick!: (e: Event) => void;
   private _boundPrevClick!: () => void;
   private _boundNextClick!: () => void;
   private _boundPlayPauseClick!: () => void;
+  private _boundWindowResize!: () => void;
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
     this.element = element;
@@ -75,6 +77,7 @@ export default class CarouselHero {
     this._boundPrevClick = this._onUserNavigation.bind(this);
     this._boundNextClick = this._onUserNavigation.bind(this);
     this._boundPlayPauseClick = this._onPlayPauseClick.bind(this);
+    this._boundWindowResize = this._onWindowResize.bind(this);
     this.init();
     return this;
   }
@@ -91,7 +94,27 @@ export default class CarouselHero {
     if (this.hasAutoplay() && this.isAutoplayRunning()) {
       this.startDotAnimation();
     }
+
+    window.addEventListener("resize", this._boundWindowResize);
   }
+
+  private _onWindowResize() {
+    if (this.resizeRafId) {
+      cancelAnimationFrame(this.resizeRafId);
+    }
+
+    this.resizeRafId = requestAnimationFrame(() => {
+      this.resizeRafId = undefined;
+
+      if (!this.instance || !this.viewport) return;
+      if (this.viewport.clientWidth <= 0) return;
+
+      this.instance.update();
+      this.updateStates();
+      this.updatePlayPauseIcon();
+    });
+  }
+
   getElements() {
     this.viewport = this.element.querySelector(SELECTOR_VIEWPORT)!;
     const tabsContainer = this.element.querySelector(SELECTOR_TABS);
@@ -105,6 +128,13 @@ export default class CarouselHero {
       ? parseInt(this.element.getAttribute("data-interval")!) || 0
       : 0;
 
+    if (typeof this.config.a11y === "object" && this.config.a11y !== null) {
+      this.config.a11y = {
+        ...this.config.a11y,
+        slideRole: this.tabs.length > 0 ? "tabpanel" : "group",
+      };
+    }
+
     if (this.element.hasAttribute("data-swiper-options")) {
       try {
         const customOptions = JSON.parse(
@@ -116,8 +146,10 @@ export default class CarouselHero {
       }
     }
 
-    // Enable loop for smoother autoplay behavior
-    this.config.loop = true;
+    // Use rewind instead of loop to avoid DOM reordering at wrap points.
+    // Loop clones make tab navigation jump through extra slides after a wrap.
+    this.config.loop = false;
+    this.config.rewind = true;
 
     // Setup autoplay if interval is specified
     if (interval >= 1000) {
@@ -210,7 +242,7 @@ export default class CarouselHero {
     e.preventDefault();
     const tab = e.currentTarget as HTMLElement;
     const index = this.tabs.indexOf(tab);
-    if (index !== -1 && index !== this.instance?.activeIndex) {
+    if (index !== -1 && index !== this.instance?.realIndex) {
       this._onUserNavigation();
       this.goToSlide(index);
     }
@@ -251,19 +283,8 @@ export default class CarouselHero {
     if (this.isAutoplayRunning()) {
       this.instance.autoplay.stop();
     } else {
-      // Force Swiper to be on the correct slide before starting autoplay
-      const currentRealIndex = this.instance.realIndex;
-
-      // Ensure we're on the right slide (accounting for loop mode)
-      if (
-        this.instance.activeIndex !==
-        this.instance.slides.length + currentRealIndex
-      ) {
-        this.instance.slideTo(
-          this.instance.slides.length + currentRealIndex,
-          0,
-        );
-      }
+      // Update states to sync tabs and pagination with current slide position
+      this.updateStates();
 
       // Small delay to ensure slide position is stable before starting autoplay
       setTimeout(() => {
@@ -275,7 +296,13 @@ export default class CarouselHero {
   }
 
   goToSlide(index: number) {
-    if (!this.instance || this.instance.activeIndex === index) return;
+    if (!this.instance || this.instance.realIndex === index) return;
+
+    if (this.instance.params.loop) {
+      this.instance.slideToLoop(index);
+      return;
+    }
+
     this.instance.slideTo(index);
   }
 
@@ -283,7 +310,7 @@ export default class CarouselHero {
     if (!this.instance) return;
 
     // Use realIndex for loop mode, fallback to activeIndex
-    const realIndex = this.instance.realIndex ?? this.instance.activeIndex;
+    const realIndex = this.instance.realIndex ?? this.instance.activeIndex ?? 0;
 
     // Update tab states
     this.tabs.forEach((tab, index) => {
@@ -305,11 +332,8 @@ export default class CarouselHero {
 
     const bullets = paginationEl.querySelectorAll(`.${CLASS_PAGINATION_ITEM}`);
 
-    // With loop enabled, we need to get the real slide index
-    const realIndex = this.instance?.realIndex ?? activeIndex;
-
     bullets.forEach((bullet, index) => {
-      const isActive = index === realIndex;
+      const isActive = index === activeIndex;
       bullet.classList.toggle("is-active", isActive);
 
       // For carousels without autoplay, manually show/hide the SVG
@@ -515,6 +539,13 @@ export default class CarouselHero {
       nextButton.removeEventListener("click", this._boundNextClick);
     }
 
+    window.removeEventListener("resize", this._boundWindowResize);
+
+    if (this.resizeRafId) {
+      cancelAnimationFrame(this.resizeRafId);
+      this.resizeRafId = undefined;
+    }
+
     if (this.instance) {
       this.instance.destroy(true, true);
     }

package/src/components/CarouselHero/CarouselHero.tsx

@@ -1,104 +1,169 @@
 "use client";
 
-import React, { ReactNode } from "react";
 import cx from "classnames";
-
+import React, { ReactNode, useId } from "react";
+import { useStatic } from "@/utils/hooks";
+import { Container } from "../Container";
 import { Controls } from "../Controls";
-import { CarouselHeroItem } from "./CarouselHeroItem";
 import CarouselHeroStatic from "./CarouselHero.static";
+import { CarouselHeroItem } from "./CarouselHeroItem";
 import {
-  CLASS_ROOT,
-  CLASS_VIEWPORT_WRAPPER,
-  CLASS_VIEWPORT,
-  CLASS_PREV,
+  CLASS_NAVIGATION,
   CLASS_NEXT,
+  CLASS_PAGINATION,
   CLASS_PLAY_PAUSE,
-  CLASS_TABS,
+  CLASS_PREV,
+  CLASS_ROOT,
   CLASS_TAB,
-  CLASS_PAGINATION,
-  CLASS_CONTROLS,
+  CLASS_TABS,
   CLASS_TRACK,
-  CLASS_NAVIGATION,
+  CLASS_VIEWPORT,
+  CLASS_VIEWPORT_WRAPPER,
 } from "./constants";
-import { useStatic } from "@/utils/hooks";
+
+function getCarouselHeroSlides(children: ReactNode): React.ReactElement[] {
+  const slides: React.ReactElement[] = [];
+
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+
+    if (child.type === React.Fragment) {
+      slides.push(
+        ...getCarouselHeroSlides(
+          (child.props as { children?: ReactNode }).children,
+        ),
+      );
+      return;
+    }
+
+    slides.push(child);
+  });
+
+  return slides;
+}
 
 interface TabItem {
   label: string;
+  id?: string;
   [key: string]: any;
 }
 
+type CarouselHeroSlideElement = React.ReactElement<Record<string, any>>;
+
 interface CarouselHeroProps {
   className?: string;
   swiperOptions?: Record<string, any>;
-  colorScheme?: "light" | "dark";
   children?: ReactNode;
   tabs?: TabItem[];
   interval?: number;
+  enableAutoplay?: boolean;
   [key: string]: any;
 }
 
 const CarouselHero: React.FC<CarouselHeroProps> = ({
   className,
   swiperOptions,
-  colorScheme,
   children,
   tabs = [],
   interval,
+  enableAutoplay = false,
   ...other
 }) => {
   const [carouselRef] = useStatic(CarouselHeroStatic);
 
-  const classes = cx(CLASS_ROOT, className, {
-    "is-light": colorScheme === "light",
-    "is-dark": colorScheme === "dark",
-  });
+  const classes = cx(CLASS_ROOT, className);
+  const generatedId = `carousel-hero-${useId().replace(/:/g, "-")}`;
+  const carouselId =
+    typeof other.id === "string" && other.id ? other.id : generatedId;
+  const slideItems = getCarouselHeroSlides(
+    children,
+  ) as CarouselHeroSlideElement[];
+  const hasTabs = tabs.length > 0 && slideItems.length > 0;
+  const getTabId = (tab: TabItem | undefined, index: number) =>
+    typeof tab?.id === "string" && tab.id
+      ? tab.id
+      : `${carouselId}-tab-${index}`;
+  const getPanelId = (
+    slide: CarouselHeroSlideElement | undefined,
+    index: number,
+  ) =>
+    slide && typeof slide.props.id === "string" && slide.props.id
+      ? slide.props.id
+      : `${carouselId}-panel-${index}`;
 
   const elementClasses = {
-    prev: cx(CLASS_PREV),
-    next: cx(CLASS_NEXT),
-    playPause: cx(CLASS_PLAY_PAUSE),
-    tabs: cx(CLASS_TABS),
-    tab: cx(CLASS_TAB),
-    pagination: cx(CLASS_PAGINATION),
-    controls: cx(CLASS_CONTROLS),
+    prev: CLASS_PREV,
+    next: CLASS_NEXT,
+    playPause: CLASS_PLAY_PAUSE,
+    tabs: CLASS_TABS,
+    tab: CLASS_TAB,
+    pagination: CLASS_PAGINATION,
   };
 
+  const forwardedSwiperOptions = (() => {
+    if (!swiperOptions) return undefined;
+    if (enableAutoplay || !("autoplay" in swiperOptions)) return swiperOptions;
+
+    const { autoplay: _autoplay, ...rest } = swiperOptions;
+
+    return Object.keys(rest).length > 0 ? rest : undefined;
+  })();
+
   const hasAutoplay =
-    (swiperOptions?.autoplay &&
+    enableAutoplay &&
+    (((swiperOptions?.autoplay &&
       typeof swiperOptions.autoplay === "object" &&
-      (swiperOptions.autoplay as any).delay >= 1000) ||
-    (interval && interval >= 1000);
+      (swiperOptions.autoplay as any).delay >= 1000) as boolean) ||
+      !!(interval && interval >= 1000));
 
   const playPauseIcon = "pause";
+  const tabSlides = slideItems.map((slide, index) => {
+    if (!hasTabs) {
+      return slide;
+    }
+
+    const tabId = getTabId(tabs[index], index);
+    const panelId = getPanelId(slide, index);
+
+    return React.cloneElement(slide as CarouselHeroSlideElement, {
+      id: panelId,
+      role: "tabpanel",
+      "aria-labelledby": tabId,
+    });
+  });
 
   return (
     <div
       className={classes}
       ref={carouselRef}
       data-carousel-hero
-      {...(interval && interval >= 1000 ? { "data-interval": interval } : {})}
-      {...(swiperOptions
-        ? { "data-swiper-options": JSON.stringify(swiperOptions) }
+      {...(enableAutoplay && interval && interval >= 1000
+        ? { "data-interval": interval }
+        : {})}
+      {...(forwardedSwiperOptions
+        ? { "data-swiper-options": JSON.stringify(forwardedSwiperOptions) }
         : {})}
       {...other}
     >
       <div className={CLASS_VIEWPORT_WRAPPER}>
         <div className={CLASS_VIEWPORT}>
-          <div className={CLASS_TRACK}>{children}</div>
+          <div className={CLASS_TRACK}>{tabSlides}</div>
         </div>
       </div>
 
       {/* Controls container */}
-      <div className={elementClasses.controls}>
+      <Container className="d-flex">
         {/* Tab navigation */}
-        {tabs.length > 0 && (
+        {hasTabs && (
           <div className={elementClasses.tabs} role="tablist">
             {tabs.map((tab, index) => (
               <button
+                id={getTabId(tab, index)}
                 key={index}
                 type="button"
                 className={elementClasses.tab}
                 role="tab"
+                aria-controls={getPanelId(slideItems[index], index)}
                 aria-selected={index === 0 ? "true" : "false"}
                 tabIndex={index === 0 ? 0 : -1}
               >
@@ -116,14 +181,12 @@ const CarouselHero: React.FC<CarouselHeroProps> = ({
           <Controls
             className={elementClasses.prev}
             icon="chevron-left"
-            colorScheme={colorScheme}
             aria-label="Predchádzajúci snímok"
           />
 
           <Controls
             className={elementClasses.next}
             icon="chevron-right"
-            colorScheme={colorScheme}
             aria-label="Nasledujúci snímok"
           />
 
@@ -132,17 +195,16 @@ const CarouselHero: React.FC<CarouselHeroProps> = ({
             <Controls
               className={elementClasses.playPause}
               icon={playPauseIcon}
-              colorScheme={colorScheme}
               aria-label="Pozastaviť/Spustiť automatické prehrávanie"
             />
           )}
         </div>
-      </div>
+      </Container>
     </div>
   );
 };
 
 CarouselHero.displayName = "CarouselHero";
 
-export { CarouselHero, CarouselHeroItem };
 export type { CarouselHeroProps, TabItem };
+export { CarouselHero, CarouselHeroItem };

package/src/components/CarouselHero/CarouselHeroItem.tsx

@@ -1,7 +1,13 @@
-import React, { ReactNode, HTMLAttributes } from "react";
 import cx from "classnames";
+import React, { HTMLAttributes, ReactNode } from "react";
 import { Image } from "@/components/Image";
-import { CLASS_SLIDE } from "./constants";
+import { Container } from "../Container";
+import {
+  CLASS_SLIDE,
+  CLASS_SLIDE_CONTAINER,
+  CLASS_SLIDE_CONTENT,
+  CLASS_SLIDE_IMAGE,
+} from "./constants";
 
 const CLASS_ROOT = CLASS_SLIDE;
 
@@ -9,29 +15,22 @@ interface CarouselHeroItemProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
   children?: ReactNode;
   image: string;
-  title: string;
 }
 
 const CarouselHeroItem: React.FC<CarouselHeroItemProps> = ({
   className,
   children,
   image,
-  title,
   ...other
 }) => {
-  const classes = cx(CLASS_ROOT, "bg-black", className);
+  const classes = cx(CLASS_ROOT, className);
 
   return (
     <div className={classes} {...other}>
-      <div className="carousel-hero__slide-content">
-        <h1 className="h1 thin carousel-hero__slide-title">{title}</h1>
-        {children}
-      </div>
-      <Image
-        className={`${CLASS_ROOT}-image`}
-        src={image}
-        alt={`Obrázok ${title}`}
-      />
+      <Container className={CLASS_SLIDE_CONTAINER}>
+        <div className={CLASS_SLIDE_CONTENT}>{children}</div>
+        <Image className={CLASS_SLIDE_IMAGE} src={image} alt="Obrázok" />
+      </Container>
     </div>
   );
 };

package/src/components/CarouselHero/constants.ts

@@ -4,8 +4,8 @@ export const CLASS_VIEWPORT_WRAPPER = `${CLASS_ROOT}__viewport-wrapper`;
 export const CLASS_VIEWPORT = `${CLASS_ROOT}__viewport`;
 export const CLASS_TRACK = `${CLASS_ROOT}__track`;
 export const CLASS_SLIDE = `${CLASS_ROOT}__slide`;
+export const CLASS_SLIDE_CONTAINER = `${CLASS_ROOT}__slide-container`;
 export const CLASS_SLIDE_CONTENT = `${CLASS_ROOT}__slide-content`;
-export const CLASS_SLIDE_TITLE = `${CLASS_ROOT}__slide-title`;
 export const CLASS_SLIDE_SUBTITLE = `${CLASS_ROOT}__slide-subtitle`;
 export const CLASS_SLIDE_IMAGE_WRAPPER = `${CLASS_ROOT}__slide-image-wrapper`;
 export const CLASS_SLIDE_IMAGE = `${CLASS_ROOT}__slide-image`;
@@ -19,7 +19,6 @@ export const CLASS_PAGINATION = `${CLASS_ROOT}__pagination`;
 export const CLASS_PAGINATION_ITEM = `${CLASS_ROOT}__pagination-item`;
 export const CLASS_PAGINATION_SVG = `${CLASS_ROOT}__pagination-svg`;
 export const CLASS_PAGINATION_CIRCLE = `${CLASS_ROOT}__pagination-circle`;
-export const CLASS_CONTROLS = `${CLASS_ROOT}__controls`;
 export const CLASS_NAVIGATION = `${CLASS_ROOT}__navigation`;
 
 export const CLASS_ACTIVE = "is-active";

package/src/components/CarouselHero/index.ts

@@ -1,2 +1,2 @@
-export { CarouselHero, CarouselHeroItem } from "./CarouselHero";
 export type { CarouselHeroProps, TabItem } from "./CarouselHero";
+export { CarouselHero, CarouselHeroItem } from "./CarouselHero";