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

package/src/components/CarouselHero/tests/CarouselHero.visual.test.jsx

@@ -0,0 +1,90 @@
+import { beforeEach, describe, expect, test } from "vitest";
+import { page } from "vitest/browser";
+import { render } from "vitest-browser-react";
+
+import { CarouselHero, CarouselHeroItem } from "../";
+
+const slides = (
+  <>
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+1">
+      <h2>Slide 1</h2>
+      <p>First slide content</p>
+    </CarouselHeroItem>
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+2">
+      <h2>Slide 2</h2>
+      <p>Second slide content</p>
+    </CarouselHeroItem>
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+3">
+      <h2>Slide 3</h2>
+      <p>Third slide content</p>
+    </CarouselHeroItem>
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+4">
+      <h2>Slide 4</h2>
+      <p>Fourth slide content</p>
+    </CarouselHeroItem>
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+5">
+      <h2>Slide 5</h2>
+      <p>Fifth slide content</p>
+    </CarouselHeroItem>
+  </>
+);
+
+const tabs = [
+  { label: "Motorola Edge 50 Fusion" },
+  { label: "3 mesiace zadarmo" },
+  { label: "Nekonečné dáta" },
+  { label: "iPhone16 Pro" },
+  { label: "HONOR 200" },
+];
+
+async function getCarouselState() {
+  return page.evaluate(() => {
+    const element = document.getElementById("carousel-hero-regression");
+    const instance = element?.ODS_CarouselHero?.instance;
+
+    return {
+      activeIndex: instance?.activeIndex,
+      realIndex: instance?.realIndex,
+      transform: instance?.wrapperEl?.style.transform ?? "",
+    };
+  });
+}
+
+describe("CarouselHero visual flow", () => {
+  beforeEach(async () => {
+    await page.viewport(1280, 720);
+  });
+
+  test("wraps and keeps adjacent tab navigation short", async () => {
+    render(
+      <CarouselHero id="carousel-hero-regression" tabs={tabs}>
+        {slides}
+      </CarouselHero>,
+    );
+
+    await expect(page.getByRole("tab", { name: "HONOR 200" })).toBeVisible();
+
+    await page.getByRole("tab", { name: "HONOR 200" }).click();
+    await page.waitForTimeout(500);
+
+    let state = await getCarouselState();
+    expect(state.realIndex).toBe(4);
+    expect(state.activeIndex).toBe(4);
+
+    await page.getByRole("button", { name: "Nasledujúci snímok" }).click();
+    await page.waitForTimeout(500);
+
+    state = await getCarouselState();
+    expect(state.realIndex).toBe(0);
+    expect(state.activeIndex).toBe(0);
+
+    await page.getByRole("tab", { name: "3 mesiace zadarmo" }).click();
+    await page.waitForTimeout(500);
+
+    state = await getCarouselState();
+    expect(state.realIndex).toBe(1);
+    expect(state.activeIndex).toBe(1);
+    expect(state.transform).toContain("translate3d");
+    expect(state.transform).toContain("-");
+  });
+});

package/src/components/CarouselHero/tests/{CarouselHeroItem.conformance.test.js → CarouselHeroItem.conformance.test.jsx}

@@ -1,32 +1,26 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "vitest-axe";
 
 import { CarouselHeroItem } from "../";
 
 const basicExample = (
-  <CarouselHeroItem
-    title="Basic Slide Title"
-    image="https://placehold.co/720x560?text=Basic"
-  >
+  <CarouselHeroItem image="https://placehold.co/720x560?text=Basic">
+    <h2>Basic Slide Title</h2>
     <p>Basic slide content</p>
   </CarouselHeroItem>
 );
 
 const exampleWithButton = (
-  <CarouselHeroItem
-    title="Slide with Button"
-    image="https://placehold.co/720x560?text=Button"
-  >
+  <CarouselHeroItem image="https://placehold.co/720x560?text=Button">
+    <h2>Slide with Button</h2>
     <p>This slide has interactive content.</p>
     <button type="button">Click me</button>
   </CarouselHeroItem>
 );
 
 const exampleWithComplexContent = (
-  <CarouselHeroItem
-    title="Complex Content Slide"
-    image="https://placehold.co/720x560?text=Complex"
-  >
+  <CarouselHeroItem image="https://placehold.co/720x560?text=Complex">
+    <h2>Complex Content Slide</h2>
     <p>This slide contains various content types:</p>
     <ul>
       <li>List item 1</li>
@@ -40,20 +34,19 @@ const exampleWithComplexContent = (
   </CarouselHeroItem>
 );
 
-const exampleWithLongTitle = (
-  <CarouselHeroItem
-    title="This is a Very Long Title That Should Still Be Accessible and Properly Rendered"
-    image="https://placehold.co/720x560?text=Long+Title"
-  >
+const exampleWithLongContent = (
+  <CarouselHeroItem image="https://placehold.co/720x560?text=Long+Title">
+    <h2>
+      This is a Very Long Title That Should Still Be Accessible and Properly
+      Rendered
+    </h2>
     <p>Content for slide with long title.</p>
   </CarouselHeroItem>
 );
 
 const exampleWithSpecialCharacters = (
-  <CarouselHeroItem
-    title="Špeciálny Titul s Diakritikou & Symbolmi €"
-    image="https://placehold.co/720x560?text=Special+Chars"
-  >
+  <CarouselHeroItem image="https://placehold.co/720x560?text=Special+Chars">
+    <h2>Špeciálny Titul s Diakritikou & Symbolmi €</h2>
     <p>Obsah so špeciálnymi znakmi: áéíóúôäňľščťžý.</p>
     <p>Mathematical symbols: ∑ ∞ ± × ÷</p>
   </CarouselHeroItem>
@@ -62,9 +55,9 @@ const exampleWithSpecialCharacters = (
 const exampleWithCustomClassName = (
   <CarouselHeroItem
     className="custom-slide-class"
-    title="Custom Styled Slide"
     image="https://placehold.co/720x560?text=Custom"
   >
+    <h2>Custom Styled Slide</h2>
     <p>This slide has custom styling.</p>
   </CarouselHeroItem>
 );
@@ -105,14 +98,14 @@ describe("CarouselHeroItem with complex content conformance", () => {
   });
 });
 
-describe("CarouselHeroItem with long title conformance", () => {
+describe("CarouselHeroItem with long content conformance", () => {
   it("is valid html", () => {
-    const { container } = render(exampleWithLongTitle);
+    const { container } = render(exampleWithLongContent);
     expect(container).toHTMLValidate();
   });
 
   it("is accessible", async () => {
-    const { container } = render(exampleWithLongTitle);
+    const { container } = render(exampleWithLongContent);
     expect(await axe(container)).toHaveNoViolations();
   });
 });

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

@@ -8,76 +8,48 @@ describe("rendering CarouselHeroItem", () => {
       const { getByTestId } = render(
         <CarouselHeroItem
           data-testid="test-id"
-          title="Test Title"
           image="https://placehold.co/720x560"
         />,
       );
       expect(getByTestId("test-id")).toHaveClass("carousel-hero__slide");
     });
 
-    it("has bg-black class by default", () => {
-      const { getByTestId } = render(
-        <CarouselHeroItem
-          data-testid="test-id"
-          title="Test Title"
-          image="https://placehold.co/720x560"
-        />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("bg-black");
-    });
-
     it("renders slide content container", () => {
       const { container } = render(
-        <CarouselHeroItem
-          title="Test Title"
-          image="https://placehold.co/720x560"
-        />,
+        <CarouselHeroItem image="https://placehold.co/720x560" />,
       );
       expect(
         container.getElementsByClassName("carousel-hero__slide-content").length,
       ).toBe(1);
     });
 
-    it("renders slide title", () => {
+    it("renders Container wrapper with proper class", () => {
       const { container } = render(
-        <CarouselHeroItem
-          title="Test Title"
-          image="https://placehold.co/720x560"
-        />,
-      );
-      const titleElement = container.querySelector(
-        ".carousel-hero__slide-title",
+        <CarouselHeroItem image="https://placehold.co/720x560" />,
       );
-      expect(titleElement).toBeInTheDocument();
-      expect(titleElement).toHaveTextContent("Test Title");
-      expect(titleElement.tagName).toBe("H1");
-      expect(titleElement).toHaveClass("h1");
-      expect(titleElement).toHaveClass("thin");
+      expect(
+        container.getElementsByClassName("carousel-hero__slide-container")
+          .length,
+      ).toBe(1);
     });
 
     it("renders image with proper attributes", () => {
       const imageUrl = "https://placehold.co/720x560";
-      const title = "Test Title";
-      const { container } = render(
-        <CarouselHeroItem title={title} image={imageUrl} />,
-      );
+      const { container } = render(<CarouselHeroItem image={imageUrl} />);
 
       const imageElement = container.querySelector(
         ".carousel-hero__slide-image",
       );
       expect(imageElement).toBeInTheDocument();
       expect(imageElement).toHaveAttribute("src", imageUrl);
-      expect(imageElement).toHaveAttribute("alt", `Obrázok ${title}`);
+      expect(imageElement).toHaveAttribute("alt", "Obrázok");
     });
   });
 
   describe("passed props", () => {
     it("renders children content", () => {
       const { getByText } = render(
-        <CarouselHeroItem
-          title="Test Title"
-          image="https://placehold.co/720x560"
-        >
+        <CarouselHeroItem image="https://placehold.co/720x560">
           <p>Test content</p>
           <button>Test button</button>
         </CarouselHeroItem>,
@@ -91,12 +63,10 @@ describe("rendering CarouselHeroItem", () => {
         <CarouselHeroItem
           data-testid="test-id"
           className="test-class"
-          title="Test Title"
           image="https://placehold.co/720x560"
         />,
       );
       expect(getByTestId("test-id")).toHaveClass("carousel-hero__slide");
-      expect(getByTestId("test-id")).toHaveClass("bg-black");
       expect(getByTestId("test-id")).toHaveClass("test-class");
     });
 
@@ -106,7 +76,6 @@ describe("rendering CarouselHeroItem", () => {
           data-testid="test-id"
           id="custom-id"
           role="tabpanel"
-          title="Test Title"
           image="https://placehold.co/720x560"
         />,
       );
@@ -114,59 +83,20 @@ describe("rendering CarouselHeroItem", () => {
       expect(getByTestId("test-id")).toHaveAttribute("role", "tabpanel");
     });
 
-    it("renders with different title text", () => {
-      const customTitle = "Custom Hero Title";
-      const { container } = render(
-        <CarouselHeroItem
-          title={customTitle}
-          image="https://placehold.co/720x560"
-        />,
-      );
-
-      const titleElement = container.querySelector(
-        ".carousel-hero__slide-title",
-      );
-      expect(titleElement).toHaveTextContent(customTitle);
-    });
-
     it("renders with different image source", () => {
       const customImage = "https://example.com/custom-image.jpg";
-      const title = "Test Title";
-      const { container } = render(
-        <CarouselHeroItem title={title} image={customImage} />,
-      );
+      const { container } = render(<CarouselHeroItem image={customImage} />);
 
       const imageElement = container.querySelector(
         ".carousel-hero__slide-image",
       );
       expect(imageElement).toHaveAttribute("src", customImage);
-      expect(imageElement).toHaveAttribute("alt", `Obrázok ${title}`);
-    });
-
-    it("handles special characters in title for image alt text", () => {
-      const titleWithSpecialChars = "Špeciálny Titul s Diakritikou & Symbolmi";
-      const { container } = render(
-        <CarouselHeroItem
-          title={titleWithSpecialChars}
-          image="https://placehold.co/720x560"
-        />,
-      );
-
-      const imageElement = container.querySelector(
-        ".carousel-hero__slide-image",
-      );
-      expect(imageElement).toHaveAttribute(
-        "alt",
-        `Obrázok ${titleWithSpecialChars}`,
-      );
+      expect(imageElement).toHaveAttribute("alt", "Obrázok");
     });
 
     it("renders children in proper content container", () => {
       const { container } = render(
-        <CarouselHeroItem
-          title="Test Title"
-          image="https://placehold.co/720x560"
-        >
+        <CarouselHeroItem image="https://placehold.co/720x560">
           <p data-testid="child-content">Child content</p>
         </CarouselHeroItem>,
       );
@@ -183,27 +113,30 @@ describe("rendering CarouselHeroItem", () => {
 
     it("maintains proper DOM structure", () => {
       const { container } = render(
-        <CarouselHeroItem
-          title="Test Title"
-          image="https://placehold.co/720x560"
-        >
+        <CarouselHeroItem image="https://placehold.co/720x560">
+          <h2>Title</h2>
           <p>Content</p>
         </CarouselHeroItem>,
       );
 
       const slide = container.querySelector(".carousel-hero__slide");
+      const slideContainer = container.querySelector(
+        ".carousel-hero__slide-container",
+      );
       const slideContent = container.querySelector(
         ".carousel-hero__slide-content",
       );
-      const slideTitle = container.querySelector(".carousel-hero__slide-title");
       const slideImage = container.querySelector(".carousel-hero__slide-image");
 
-      // Check that slide contains both content and image
-      expect(slide).toContainElement(slideContent);
-      expect(slide).toContainElement(slideImage);
+      // Check that slide contains the Container wrapper
+      expect(slide).toContainElement(slideContainer);
+
+      // Check that Container wrapper contains both content and image
+      expect(slideContainer).toContainElement(slideContent);
+      expect(slideContainer).toContainElement(slideImage);
 
-      // Check that slide content contains title and children
-      expect(slideContent).toContainElement(slideTitle);
+      // Check that slide content contains children
+      expect(slideContent).toHaveTextContent("Title");
       expect(slideContent).toHaveTextContent("Content");
     });
   });

package/src/components/CarouselPromotions/CarouselPromotions.static.ts

@@ -1,24 +1,24 @@
 import { Swiper } from "swiper";
-import type { SwiperOptions } from "swiper/types";
 import {
-  Navigation,
-  Pagination,
   A11y,
-  Keyboard,
   Autoplay,
+  Keyboard,
+  Navigation,
+  Pagination,
 } from "swiper/modules";
+import type { SwiperOptions } from "swiper/types";
 
 import {
-  SELECTOR_DOTS,
-  SELECTOR_VIEWPORT,
+  CLASS_ACTIVE,
+  CLASS_AUTOPLAY,
+  CLASS_DOT,
   CLASS_DOT_CIRCLE,
   CLASS_DOT_SVG,
-  CLASS_AUTOPLAY,
   CLASS_SHOWING_INVERTED_SLIDE,
-  CLASS_TRACK,
   CLASS_SLIDE,
-  CLASS_DOT,
-  CLASS_ACTIVE,
+  CLASS_TRACK,
+  SELECTOR_DOTS,
+  SELECTOR_VIEWPORT,
 } from "./constants";
 
 export const defaultConfig: SwiperOptions = {
@@ -60,6 +60,9 @@ export default class CarouselPromotions {
   instance!: Swiper;
   interval: number = 0;
   autoplayTimer?: NodeJS.Timeout;
+  private resizeRafId?: number;
+  private boundWindowResizeHandler: () => void;
+  private boundPaginationClickHandler: () => void;
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
     this.element = element;
@@ -69,6 +72,8 @@ export default class CarouselPromotions {
     this.handleSlideChange = this.handleSlideChange.bind(this);
     this.scrollToNextSlide = this.scrollToNextSlide.bind(this);
     this.autoplayAnimationEnd = this.autoplayAnimationEnd.bind(this);
+    this.boundWindowResizeHandler = this.handleWindowResize.bind(this);
+    this.boundPaginationClickHandler = this.handlePaginationClick.bind(this);
 
     (this.element as any).ODS_CarouselPromotions = this;
 
@@ -128,10 +133,39 @@ export default class CarouselPromotions {
     ) as HTMLElement | null;
     if (paginationEl && isIntervalValid) {
       paginationEl.addEventListener("animationend", this.autoplayAnimationEnd);
-      paginationEl.addEventListener("click", () => {
-        this.stopAutoplay();
-      });
+      paginationEl.addEventListener("click", this.boundPaginationClickHandler);
+    }
+
+    window.addEventListener("resize", this.boundWindowResizeHandler);
+  }
+
+  private handlePaginationClick() {
+    this.stopAutoplay();
+  }
+
+  private handleWindowResize() {
+    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.fixPaginationButtonType();
+
+      if (this.isAutoplayEnabled) {
+        this.renderSvgDotsForAnimation();
+      }
+    });
   }
 
   stopAutoplay() {
@@ -268,9 +302,34 @@ export default class CarouselPromotions {
   }
 
   destroy() {
+    window.removeEventListener("resize", this.boundWindowResizeHandler);
+
+    if (this.resizeRafId) {
+      cancelAnimationFrame(this.resizeRafId);
+      this.resizeRafId = undefined;
+    }
+
+    const paginationEl = this.element.querySelector(
+      SELECTOR_DOTS,
+    ) as HTMLElement | null;
+    if (paginationEl) {
+      paginationEl.removeEventListener(
+        "animationend",
+        this.autoplayAnimationEnd,
+      );
+      paginationEl.removeEventListener(
+        "click",
+        this.boundPaginationClickHandler,
+      );
+    }
+
     if (this.instance) {
       this.instance.destroy();
     }
+
+    if ((this.element as any).ODS_CarouselPromotions === this) {
+      delete (this.element as any).ODS_CarouselPromotions;
+    }
   }
 
   update() {

package/src/components/CarouselPromotions/CarouselPromotions.tsx

@@ -1,23 +1,21 @@
 "use client";
 
-import React, { ReactNode } from "react";
 import cx from "classnames";
-
+import React, { ReactNode } from "react";
+import { useStatic } from "@/utils/hooks";
 import CarouselPromotionsStatic from "./CarouselPromotions.static";
 import {
-  CLASS_ROOT,
-  CLASS_VIEWPORT_WRAPPER,
-  CLASS_VIEWPORT,
-  CLASS_NEXT,
   CLASS_DOTS,
+  CLASS_NEXT,
+  CLASS_ROOT,
   CLASS_TRACK,
+  CLASS_VIEWPORT,
+  CLASS_VIEWPORT_WRAPPER,
 } from "./constants";
-import { useStatic } from "@/utils/hooks";
 
 interface CarouselPromotionsProps {
   className?: string;
   swiperOptions?: Record<string, any>;
-  colorScheme?: "light" | "dark";
   children?: ReactNode;
   [key: string]: any;
 }
@@ -25,16 +23,12 @@ interface CarouselPromotionsProps {
 const CarouselPromotions: React.FC<CarouselPromotionsProps> = ({
   className,
   swiperOptions,
-  colorScheme,
   children,
   ...other
 }) => {
   const [carouselRef] = useStatic(CarouselPromotionsStatic);
 
-  const classes = cx(CLASS_ROOT, className, {
-    "is-light": colorScheme === "light",
-    "is-dark": colorScheme === "dark",
-  });
+  const classes = cx(CLASS_ROOT, className);
 
   const elementClasses = {
     next: cx(CLASS_NEXT, "hide-lg"),

package/src/components/CarouselPromotions/CarouselPromotionsItem.tsx

@@ -1,11 +1,11 @@
-import React, { ReactElement } from "react";
 import cx from "classnames";
+import React, { ReactElement } from "react";
 
 import {
-  CLASS_SLIDE,
-  CLASS_TITLE,
   CLASS_IMAGE,
+  CLASS_SLIDE,
   CLASS_SLIDE_CONTENT,
+  CLASS_TITLE,
 } from "./constants";
 
 const CLASS_ROOT = CLASS_SLIDE;

package/src/components/CarouselPromotions/styles/mixins.scss

@@ -17,7 +17,7 @@
 @mixin base {
   margin: 0 auto;
   position: relative;
-  margin-bottom: config.$space;
+  margin-bottom: space.get("large");
 }
 
 @mixin viewport-wrapper {
@@ -186,6 +186,8 @@
     {
       #{$property}: $value;
     }
+
+    margin-bottom: space.get();
   }
   @include breakpoint.get("lg") {
     @each $property,
@@ -193,9 +195,8 @@
     {
       #{$property}: $value;
     }
-
-    margin-bottom: space.get();
   }
+  font-weight: 700;
 }
 
 @mixin slide-content {
@@ -216,8 +217,10 @@
     padding: space.get("medium");
   }
 
-  @include breakpoint.get('md', 'down') {
-    @include generate.css-map(typography-config.$body-text, 'small');
+  @include breakpoint.get("md", "down") {
+    @include generate.responsive-css-map(
+      sass-map.get(typography-config.$body-text, "small")
+    );
   }
 }
 

package/src/components/CarouselPromotions/tests/{CarouselPromotions.conformance.test.js → CarouselPromotions.conformance.test.jsx}

@@ -1,9 +1,7 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
-
-import { CarouselPromotions } from "..";
-import { CarouselPromotionsItem } from "..";
+import { axe } from "vitest-axe";
 import { Image } from "../../Image";
+import { CarouselPromotions, CarouselPromotionsItem } from "..";
 
 const example = (
   <>
@@ -21,10 +19,19 @@ const example = (
 
 it("is valid html", () => {
   const { container } = render(example);
-  expect(container).toHTMLValidate({ rules: { "no-inline-style": "off" } });
+  expect(container).toHTMLValidate({
+    rules: {
+      "no-inline-style": "off",
+      "aria-label-misuse": "off",
+    },
+  });
 });
 
 it("is accessible", async () => {
   const { container } = render(example);
-  expect(await axe(container)).toHaveNoViolations();
+  expect(
+    await axe(container, {
+      rules: { "aria-required-children": { enabled: false } },
+    }),
+  ).toHaveNoViolations();
 });