@orangesk/orange-design-system 3.7.0 → 3.9.0

package/src/components/Carousel/CHANGELOG.md

@@ -1,11 +0,0 @@
-- **BREAKING**: Migrated `Carousel` component from Glider.js to Swiper.js library
-  - Replaced `@lighting-beetle/glider-js` dependency with `swiper`
-  - Updated `CarouselConfig` interface to extend `SwiperOptions` instead of Glider config
-  - Changed initialization from `new Glider()` to `new Swiper()` with required modules (Navigation, Pagination, Scrollbar, A11y)
-  - Updated prop name from `gliderOptions` to `swiperOptions` in React component
-  - Enhanced keyboard navigation support for pagination buttons (Arrow keys, Home/End, Tab navigation)
-  - Added tooltip position updates on slide changes for better tooltip integration
-  - Improved accessibility with proper ARIA attributes and Slovak language messages
-  - Updated slide classes from glider-specific to swiper-specific (`swiper-slide`, `swiper-wrapper`)
-  - Modified breakpoint configuration format to match Swiper's API
-  - Added automatic element detection and configuration for navigation, pagination, and scrollbar

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

@@ -1,90 +0,0 @@
-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("-");
-  });
-});