@orangesk/orange-design-system 2.0.0-beta.34 → 2.0.0-beta.36

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

@@ -184,7 +184,7 @@ describe("Accordion Component Tests", () => {
     describe("keyboard interactions", () => {
       let accordion;
       beforeEach(async () => {
-        window.document.getSelection = jest.fn();
+        window.document.getSelection = vi.fn();
         accordion = render(<TestingAccordion />);
         // Initialize static accordion behavior
         await waitForAccordionInteractivity(accordion.container);

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Alert } from "../";
 import { Link } from "../../Link";

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

@@ -72,7 +72,7 @@ describe("rendering", () => {
     });
 
     it("calls onClose when close button is clicked", () => {
-      const handleClose = jest.fn();
+      const handleClose = vi.fn();
       const { container } = render(
         <Alert title="Title" onClose={handleClose} />,
       );

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

@@ -0,0 +1,138 @@
+import { beforeEach, describe, expect, test } from "vitest";
+import { page } from "vitest/browser";
+import { render } from "vitest-browser-react";
+
+import { Alert } from "../";
+import { Button } from "../../Button";
+
+describe("Alert visual regression", () => {
+  beforeEach(async () => {
+    await page.viewport(1280, 720);
+  });
+
+  test("Preview: title", async () => {
+    render(
+      <Alert data-testid="alert-title" title="Toto je jednoduchá sprava" />,
+    );
+
+    await expect(page.getByTestId("alert-title")).toMatchScreenshot(
+      "alert-preview-title",
+    );
+  });
+
+  test("Preview: title and description", async () => {
+    render(
+      <Alert
+        data-testid="alert-title-description"
+        title="Dobre vediet!"
+        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
+      />,
+    );
+
+    await expect(page.getByTestId("alert-title-description")).toMatchScreenshot(
+      "alert-preview-title-description",
+    );
+  });
+
+  test("Preview: title and buttons", async () => {
+    render(
+      <Alert
+        data-testid="alert-title-buttons"
+        title="Prosim prihlaste sa."
+        actionButtons={[
+          <Button key="login">Prihlasit sa</Button>,
+          <Button key="hide">Skryt</Button>,
+        ]}
+      />,
+    );
+
+    await expect(page.getByTestId("alert-title-buttons")).toMatchScreenshot(
+      "alert-preview-title-buttons",
+    );
+  });
+
+  test("Preview: title, description and buttons", async () => {
+    render(
+      <Alert
+        data-testid="alert-title-description-buttons"
+        title="Prihlasit sa je jednoduche a rozumne"
+        description="Napr. prihlaseni pouzivatelia vidia krajsie ceny."
+        actionButtons={<Button>Prihlasit sa</Button>}
+      />,
+    );
+
+    await expect(
+      page.getByTestId("alert-title-description-buttons"),
+    ).toMatchScreenshot("alert-preview-title-description-buttons");
+  });
+
+  test("Preview: success type", async () => {
+    render(
+      <Alert
+        data-testid="alert-success"
+        type="success"
+        title="Vyborne. Vsetko prebehlo rychlo a hladko"
+      />,
+    );
+
+    await expect(page.getByTestId("alert-success")).toMatchScreenshot(
+      "alert-preview-success",
+    );
+  });
+
+  test("Preview: warning type", async () => {
+    render(
+      <Alert
+        data-testid="alert-warning"
+        type="warning"
+        title="Na toto si daj pozor!"
+      />,
+    );
+
+    await expect(page.getByTestId("alert-warning")).toMatchScreenshot(
+      "alert-preview-warning",
+    );
+  });
+
+  test("Preview: danger type", async () => {
+    render(
+      <Alert data-testid="alert-danger" type="danger" title="Stala sa chyba" />,
+    );
+
+    await expect(page.getByTestId("alert-danger")).toMatchScreenshot(
+      "alert-preview-danger",
+    );
+  });
+
+  test("Preview: custom title renderer", async () => {
+    render(
+      <Alert
+        data-testid="alert-custom-title"
+        title="Prihlasit sa je jednoduche a rozumne"
+        renderTitle={(props) => (
+          <h3 className="alert__title mb-medium">{props.title}</h3>
+        )}
+        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
+      />,
+    );
+
+    await expect(page.getByTestId("alert-custom-title")).toMatchScreenshot(
+      "alert-preview-custom-title",
+    );
+  });
+
+  test("Preview: full width", async () => {
+    render(
+      <Alert
+        data-testid="alert-full-width"
+        isFullWidth
+        title="Dobre vediet!"
+        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
+      />,
+    );
+
+    await expect(page.getByTestId("alert-full-width")).toMatchScreenshot(
+      "alert-preview-full-width",
+    );
+  });
+});

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { AnchorNavigation } from "../";
 

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Bar, BarItem } from "../";
 

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

@@ -1,6 +1,6 @@
 // TODO: Uncomment the tests below when the components are ready for conformance testing.
 // import { render } from "@testing-library/react";
-// import { axe } from "jest-axe";
+// import { axe } from 'vitest-axe';
 
 // import { Bar, BarItem } from "../../Bar";
 // import { Button } from "../../Button";

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

@@ -5,9 +5,9 @@ import { Context } from "../Context";
 
 describe("rendering BlockActionControl", () => {
   let isIndicating;
-  const setIsIndicating = jest.fn((val) => (isIndicating = val));
+  const setIsIndicating = vi.fn((val) => (isIndicating = val));
   let isActive;
-  const setIsActive = jest.fn((val) => (isActive = val));
+  const setIsActive = vi.fn((val) => (isActive = val));
   describe("passed props", () => {
     it("renders children", () => {
       const { container } = render(

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

@@ -98,11 +98,7 @@
     padding: space.get("xlarge");
 
     @include breakpoint.get("lg", "down") {
-      padding: space.get("xlarge") space.get("large");
-    }
-
-    @include breakpoint.get("sm", "down") {
-      padding: space.get("large") space.get("small");
+      padding: space.get("large");
     }
   }
 

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { BodyBanner } from "../";
 

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Breadcrumbs } from "../";
 

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Button, IconButton } from "..";
 

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

@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment jsdom
  */
 
 import React from "react";

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Button } from "../../Button";
 import { Buttons } from "../";

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Card, CardSection, CardProductHeader } from "../";
 

package/src/components/Carousel/Carousel.static.ts

@@ -92,6 +92,7 @@ export default class Carousel {
   track!: HTMLElement;
   instance!: Swiper;
   carouselId?: string;
+  private resizeObserver?: ResizeObserver;
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
     this.element = element;
@@ -153,6 +154,8 @@ export default class Carousel {
       });
     }
 
+    this.observeVisibilityChanges();
+
     this.initExternalControls();
 
     // Trigger a final update to notify listeners (like SameHeight) that carousel is ready
@@ -175,6 +178,29 @@ export default class Carousel {
     });
   }
 
+  private observeVisibilityChanges(): void {
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = new ResizeObserver(() => {
+      if (!this.instance || !this.viewport) {
+        return;
+      }
+
+      if (this.viewport.clientWidth <= 0) {
+        return;
+      }
+
+      this.instance.update();
+      this.updateCarouselEnabledState();
+      this.instance.scrollbar?.updateSize();
+    });
+
+    this.resizeObserver.observe(this.viewport);
+  }
+
   /**
    * Fix scrollbar drag size and position for bleed-right carousels.
    * Overrides Swiper's default scrollbar calculations to work correctly with bleed-right layouts.
@@ -301,6 +327,13 @@ export default class Carousel {
       this.instance.disable();
     }
 
+    const scrollbarEl = this.element.querySelector(
+      SELECTOR_SCROLLBAR,
+    ) as HTMLElement | null;
+    if (scrollbarEl) {
+      scrollbarEl.style.display = this.instance.enabled ? "" : "none";
+    }
+
     this.applyTrackMarginCompensation();
   }
 
@@ -641,6 +674,13 @@ export default class Carousel {
     if (this.instance) {
       this.instance.destroy();
     }
+
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = undefined;
+
+    if ((this.element as any).ODS_Carousel === this) {
+      delete (this.element as any).ODS_Carousel;
+    }
   }
 
   update() {

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Carousel } from "..";
 

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

@@ -1,37 +1,52 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment jsdom
  */
 
 import { Swiper } from "swiper";
 import Carousel from "../Carousel.static";
 
 // Mock Swiper
-jest.mock("swiper", () => ({
-  Swiper: jest.fn().mockImplementation(() => ({
-    slideNext: jest.fn(),
-    slidePrev: jest.fn(),
-    destroy: jest.fn(),
-    update: jest.fn(),
-    on: jest.fn(),
-    enable: jest.fn(),
-    disable: jest.fn(),
-    activeIndex: 0,
-    isBeginning: true,
-    isEnd: false,
-    slides: [{}, {}, {}],
-    params: {
-      slidesPerView: 1,
-    },
-  })),
+vi.mock("swiper", () => ({
+  Swiper: vi.fn().mockImplementation(function () {
+    let enabled = true;
+    return {
+      slideNext: vi.fn(),
+      slidePrev: vi.fn(),
+      destroy: vi.fn(),
+      update: vi.fn(),
+      on: vi.fn(),
+      enable: vi.fn(() => {
+        enabled = true;
+      }),
+      disable: vi.fn(() => {
+        enabled = false;
+      }),
+      get enabled() {
+        return enabled;
+      },
+      activeIndex: 0,
+      isBeginning: true,
+      isEnd: false,
+      slides: [{}, {}, {}],
+      params: {
+        slidesPerView: 1,
+      },
+      scrollbar: {
+        updateSize: vi.fn(),
+        el: document.createElement("div"),
+      },
+    };
+  }),
 }));
 
 // Mock Swiper modules
-jest.mock("swiper/modules", () => ({
+vi.mock("swiper/modules", () => ({
   Navigation: {},
   Pagination: {},
   Scrollbar: {},
   A11y: {},
   Keyboard: {},
+  Mousewheel: {},
 }));
 
 describe("Carousel Static - External Controls", () => {
@@ -41,17 +56,26 @@ describe("Carousel Static - External Controls", () => {
 
   beforeEach(() => {
     // Clear all mocks
-    jest.clearAllMocks();
+    vi.clearAllMocks();
 
     // Create mock Swiper instance
+    let enabled = true;
+
     mockSwiperInstance = {
-      slideNext: jest.fn(),
-      slidePrev: jest.fn(),
-      destroy: jest.fn(),
-      update: jest.fn(),
-      on: jest.fn(),
-      enable: jest.fn(),
-      disable: jest.fn(),
+      slideNext: vi.fn(),
+      slidePrev: vi.fn(),
+      destroy: vi.fn(),
+      update: vi.fn(),
+      on: vi.fn(),
+      enable: vi.fn(() => {
+        enabled = true;
+      }),
+      disable: vi.fn(() => {
+        enabled = false;
+      }),
+      get enabled() {
+        return enabled;
+      },
       activeIndex: 0,
       isBeginning: true,
       isEnd: false,
@@ -59,9 +83,15 @@ describe("Carousel Static - External Controls", () => {
       params: {
         slidesPerView: 1,
       },
+      scrollbar: {
+        updateSize: vi.fn(),
+        el: document.createElement("div"),
+      },
     };
 
-    Swiper.mockImplementation(() => mockSwiperInstance);
+    Swiper.mockImplementation(function () {
+      return mockSwiperInstance;
+    });
 
     // Set up DOM
     document.body.innerHTML = `
@@ -82,7 +112,7 @@ describe("Carousel Static - External Controls", () => {
     carouselElement = document.querySelector(".carousel");
 
     // Mock requestAnimationFrame to execute synchronously
-    global.requestAnimationFrame = jest.fn((cb) => cb());
+    global.requestAnimationFrame = vi.fn((cb) => cb());
 
     carouselInstance = new Carousel(carouselElement);
   });
@@ -164,7 +194,7 @@ describe("Carousel Static - External Controls", () => {
     it("should prevent default behavior on button click", () => {
       const nextButton = document.getElementById("next-btn");
       const mockEvent = new Event("click");
-      mockEvent.preventDefault = jest.fn();
+      mockEvent.preventDefault = vi.fn();
 
       nextButton.dispatchEvent(mockEvent);
 
@@ -231,7 +261,7 @@ describe("Carousel Static - External Controls", () => {
     });
 
     it("should update controls state on slide change transition end", () => {
-      const updateStatesSpy = jest.spyOn(
+      const updateStatesSpy = vi.spyOn(
         carouselInstance,
         "updateExternalControlsState",
       );
@@ -269,7 +299,7 @@ describe("Carousel Static - External Controls", () => {
       carouselElement = document.querySelector(".carousel");
 
       // Mock requestAnimationFrame to execute synchronously
-      global.requestAnimationFrame = jest.fn((cb) => cb());
+      global.requestAnimationFrame = vi.fn((cb) => cb());
 
       carouselInstance = new Carousel(carouselElement);
     });
@@ -421,17 +451,17 @@ describe("Carousel Static - Auto-Disable Feature", () => {
   let mockSwiperInstance;
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
 
     // Create mock Swiper instance with slides array
     mockSwiperInstance = {
-      slideNext: jest.fn(),
-      slidePrev: jest.fn(),
-      destroy: jest.fn(),
-      update: jest.fn(),
-      on: jest.fn(),
-      enable: jest.fn(),
-      disable: jest.fn(),
+      slideNext: vi.fn(),
+      slidePrev: vi.fn(),
+      destroy: vi.fn(),
+      update: vi.fn(),
+      on: vi.fn(),
+      enable: vi.fn(),
+      disable: vi.fn(),
       activeIndex: 0,
       isBeginning: true,
       isEnd: false,
@@ -441,7 +471,9 @@ describe("Carousel Static - Auto-Disable Feature", () => {
       },
     };
 
-    Swiper.mockImplementation(() => mockSwiperInstance);
+    Swiper.mockImplementation(function () {
+      return mockSwiperInstance;
+    });
 
     document.body.innerHTML = `
       <div class="carousel" data-carousel-id="test-carousel" id="test-carousel">
@@ -457,7 +489,7 @@ describe("Carousel Static - Auto-Disable Feature", () => {
     `;
 
     carouselElement = document.querySelector(".carousel");
-    global.requestAnimationFrame = jest.fn((cb) => cb());
+    global.requestAnimationFrame = vi.fn((cb) => cb());
   });
 
   afterEach(() => {

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "vitest-axe";
 
 import { CarouselHero, CarouselHeroItem } from "../";
 
@@ -83,47 +83,63 @@ const exampleWithComplexContent = (
 describe("CarouselHero conformance", () => {
   it("is valid html", () => {
     const { container } = render(basicExample);
-    expect(container).toHTMLValidate();
+    expect(container).toHTMLValidate({ rules: { "aria-label-misuse": "off" } });
   });
 
   it("is accessible", async () => {
     const { container } = render(basicExample);
-    expect(await axe(container)).toHaveNoViolations();
+    expect(
+      await axe(container, {
+        rules: { "aria-required-children": { enabled: false } },
+      }),
+    ).toHaveNoViolations();
   });
 });
 
 describe("CarouselHero with tabs conformance", () => {
   it("is valid html", () => {
     const { container } = render(exampleWithTabs);
-    expect(container).toHTMLValidate();
+    expect(container).toHTMLValidate({ rules: { "aria-label-misuse": "off" } });
   });
 
   it("is accessible", async () => {
     const { container } = render(exampleWithTabs);
-    expect(await axe(container)).toHaveNoViolations();
+    expect(
+      await axe(container, {
+        rules: { "aria-required-children": { enabled: false } },
+      }),
+    ).toHaveNoViolations();
   });
 });
 
 describe("CarouselHero with autoplay conformance", () => {
   it("is valid html", () => {
     const { container } = render(exampleWithAutoplay);
-    expect(container).toHTMLValidate();
+    expect(container).toHTMLValidate({ rules: { "aria-label-misuse": "off" } });
   });
 
   it("is accessible", async () => {
     const { container } = render(exampleWithAutoplay);
-    expect(await axe(container)).toHaveNoViolations();
+    expect(
+      await axe(container, {
+        rules: { "aria-required-children": { enabled: false } },
+      }),
+    ).toHaveNoViolations();
   });
 });
 
 describe("CarouselHero with complex content conformance", () => {
   it("is valid html", () => {
     const { container } = render(exampleWithComplexContent);
-    expect(container).toHTMLValidate();
+    expect(container).toHTMLValidate({ rules: { "aria-label-misuse": "off" } });
   });
 
   it("is accessible", async () => {
     const { container } = render(exampleWithComplexContent);
-    expect(await axe(container)).toHaveNoViolations();
+    expect(
+      await axe(container, {
+        rules: { "aria-required-children": { enabled: false } },
+      }),
+    ).toHaveNoViolations();
   });
 });

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { CarouselHeroItem } from "../";