@orangesk/orange-design-system 2.0.0-beta.11 → 2.0.0-beta.13

package/src/components/Carousel/tests/Carousel.static.test.js

@@ -0,0 +1,403 @@
+/**
+ * @jest-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(),
+    activeIndex: 0,
+    isBeginning: true,
+    isEnd: false,
+  })),
+}));
+
+// Mock Swiper modules
+jest.mock("swiper/modules", () => ({
+  Navigation: {},
+  Pagination: {},
+  Scrollbar: {},
+  A11y: {},
+  Keyboard: {},
+}));
+
+describe("Carousel Static - External Controls", () => {
+  let carouselElement;
+  let carouselInstance;
+  let mockSwiperInstance;
+
+  beforeEach(() => {
+    // Clear all mocks
+    jest.clearAllMocks();
+
+    // Create mock Swiper instance
+    mockSwiperInstance = {
+      slideNext: jest.fn(),
+      slidePrev: jest.fn(),
+      destroy: jest.fn(),
+      update: jest.fn(),
+      on: jest.fn(),
+      activeIndex: 0,
+      isBeginning: true,
+      isEnd: false,
+    };
+
+    Swiper.mockImplementation(() => mockSwiperInstance);
+
+    // Set up DOM
+    document.body.innerHTML = `
+      <div class="carousel" data-carousel-id="test-carousel" id="test-carousel">
+        <div class="carousel__viewport">
+          <div class="carousel__track">
+            <div class="carousel__slide">Slide 1</div>
+            <div class="carousel__slide">Slide 2</div>
+            <div class="carousel__slide">Slide 3</div>
+          </div>
+        </div>
+        <div class="carousel__pagination"></div>
+      </div>
+      <button data-carousel-controls="test-carousel" data-carousel-action="prev" id="prev-btn">Previous</button>
+      <button data-carousel-controls="test-carousel" data-carousel-action="next" id="next-btn">Next</button>
+    `;
+
+    carouselElement = document.querySelector(".carousel");
+
+    // Mock requestAnimationFrame to execute synchronously
+    global.requestAnimationFrame = jest.fn((cb) => cb());
+
+    carouselInstance = new Carousel(carouselElement);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    // Restore requestAnimationFrame
+    global.requestAnimationFrame = undefined;
+  });
+
+  describe("External Controls Initialization", () => {
+    it("should find and initialize external controls", () => {
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      expect(prevButton.hasAttribute("data-carousel-initialized")).toBe(true);
+      expect(nextButton.hasAttribute("data-carousel-initialized")).toBe(true);
+      expect(prevButton.getAttribute("aria-label")).toBe(
+        "Predchádzajúci snímok",
+      );
+      expect(nextButton.getAttribute("aria-label")).toBe("Nasledujúci snímok");
+      expect(prevButton.getAttribute("type")).toBe("button");
+      expect(nextButton.getAttribute("type")).toBe("button");
+    });
+
+    it("should not initialize controls without carousel ID", () => {
+      // Create carousel without ID
+      document.body.innerHTML = `
+        <div class="carousel">
+          <div class="carousel__viewport">
+            <div class="carousel__track">
+              <div class="carousel__slide">Slide 1</div>
+            </div>
+          </div>
+        </div>
+        <button data-carousel-controls="missing-carousel" data-carousel-action="next">Next</button>
+      `;
+
+      const element = document.querySelector(".carousel");
+      new Carousel(element);
+      const button = document.querySelector("button");
+
+      expect(button.hasAttribute("data-carousel-initialized")).toBe(false);
+    });
+
+    it("should skip already initialized controls", () => {
+      // Mark button as already initialized
+      const prevButton = document.getElementById("prev-btn");
+      prevButton.setAttribute("data-carousel-initialized", "true");
+
+      // Create new carousel instance
+      new Carousel(carouselElement);
+
+      // Should not double-initialize
+      expect(prevButton.getAttribute("data-carousel-initialized")).toBe("true");
+    });
+  });
+
+  describe("External Controls Navigation", () => {
+    it("should call slideNext when next button is clicked", () => {
+      const nextButton = document.getElementById("next-btn");
+      nextButton.click();
+
+      expect(mockSwiperInstance.slideNext).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call slidePrev when prev button is clicked", () => {
+      // Ensure button is not disabled by setting carousel state
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = false;
+      carouselInstance.updateExternalControlsState();
+
+      const prevButton = document.getElementById("prev-btn");
+      prevButton.click();
+
+      expect(mockSwiperInstance.slidePrev).toHaveBeenCalledTimes(1);
+    });
+
+    it("should prevent default behavior on button click", () => {
+      const nextButton = document.getElementById("next-btn");
+      const mockEvent = new Event("click");
+      mockEvent.preventDefault = jest.fn();
+
+      nextButton.dispatchEvent(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+    });
+
+    it("should not navigate when button is disabled", () => {
+      const nextButton = document.getElementById("next-btn");
+      nextButton.setAttribute("disabled", "true");
+
+      nextButton.click();
+
+      expect(mockSwiperInstance.slideNext).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("External Controls State Management", () => {
+    it("should disable prev button when at beginning", () => {
+      mockSwiperInstance.isBeginning = true;
+      mockSwiperInstance.isEnd = false;
+
+      carouselInstance.updateExternalControlsState();
+
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      expect(prevButton.hasAttribute("disabled")).toBe(true);
+      expect(prevButton.getAttribute("aria-disabled")).toBe("true");
+
+      expect(nextButton.hasAttribute("disabled")).toBe(false);
+      expect(nextButton.getAttribute("aria-disabled")).toBe("false");
+    });
+
+    it("should disable next button when at end", () => {
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = true;
+
+      carouselInstance.updateExternalControlsState();
+
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      expect(nextButton.hasAttribute("disabled")).toBe(true);
+      expect(nextButton.getAttribute("aria-disabled")).toBe("true");
+
+      expect(prevButton.hasAttribute("disabled")).toBe(false);
+      expect(prevButton.getAttribute("aria-disabled")).toBe("false");
+    });
+
+    it("should enable both buttons when in middle", () => {
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = false;
+
+      carouselInstance.updateExternalControlsState();
+
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      expect(prevButton.hasAttribute("disabled")).toBe(false);
+      expect(nextButton.hasAttribute("disabled")).toBe(false);
+      expect(prevButton.getAttribute("aria-disabled")).toBe("false");
+      expect(nextButton.getAttribute("aria-disabled")).toBe("false");
+    });
+
+    it("should update controls state on slide change transition end", () => {
+      const updateStatesSpy = jest.spyOn(
+        carouselInstance,
+        "updateExternalControlsState",
+      );
+
+      // Get the slideChangeTransitionEnd callback from Swiper initialization
+      const swiperOnCallArgs = mockSwiperInstance.on.mock.calls.find(
+        (call) => call[0] === "slideChangeTransitionEnd",
+      );
+
+      if (swiperOnCallArgs) {
+        const callback = swiperOnCallArgs[1];
+        callback();
+        expect(updateStatesSpy).toHaveBeenCalled();
+      }
+    });
+  });
+
+  describe("Multiple Control Sets", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <div class="carousel" data-carousel-id="test-carousel">
+          <div class="carousel__viewport">
+            <div class="carousel__track">
+              <div class="carousel__slide">Slide 1</div>
+              <div class="carousel__slide">Slide 2</div>
+            </div>
+          </div>
+        </div>
+        <button data-carousel-controls="test-carousel" data-carousel-action="prev" id="prev-btn-1">Prev 1</button>
+        <button data-carousel-controls="test-carousel" data-carousel-action="next" id="next-btn-1">Next 1</button>
+        <button data-carousel-controls="test-carousel" data-carousel-action="prev" id="prev-btn-2">Prev 2</button>
+        <button data-carousel-controls="test-carousel" data-carousel-action="next" id="next-btn-2">Next 2</button>
+      `;
+
+      carouselElement = document.querySelector(".carousel");
+
+      // Mock requestAnimationFrame to execute synchronously
+      global.requestAnimationFrame = jest.fn((cb) => cb());
+
+      carouselInstance = new Carousel(carouselElement);
+    });
+
+    it("should initialize multiple control sets", () => {
+      const buttons = document.querySelectorAll(
+        '[data-carousel-controls="test-carousel"]',
+      );
+
+      buttons.forEach((button) => {
+        expect(button.hasAttribute("data-carousel-initialized")).toBe(true);
+      });
+    });
+
+    it("should update state for all control sets", () => {
+      mockSwiperInstance.isBeginning = true;
+      mockSwiperInstance.isEnd = false;
+
+      carouselInstance.updateExternalControlsState();
+
+      const prevButtons = document.querySelectorAll(
+        '[data-carousel-action="prev"]',
+      );
+      const nextButtons = document.querySelectorAll(
+        '[data-carousel-action="next"]',
+      );
+
+      prevButtons.forEach((button) => {
+        expect(button.hasAttribute("disabled")).toBe(true);
+        expect(button.getAttribute("aria-disabled")).toBe("true");
+      });
+
+      nextButtons.forEach((button) => {
+        expect(button.hasAttribute("disabled")).toBe(false);
+        expect(button.getAttribute("aria-disabled")).toBe("false");
+      });
+    });
+  });
+
+  describe("Cleanup", () => {
+    it("should clean up external controls on destroy", () => {
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      // Verify controls are initialized
+      expect(prevButton.hasAttribute("data-carousel-initialized")).toBe(true);
+      expect(nextButton.hasAttribute("data-carousel-initialized")).toBe(true);
+
+      // Destroy carousel
+      carouselInstance.destroy();
+
+      // Verify cleanup
+      expect(prevButton.hasAttribute("data-carousel-initialized")).toBe(false);
+      expect(nextButton.hasAttribute("data-carousel-initialized")).toBe(false);
+      expect(mockSwiperInstance.destroy).toHaveBeenCalled();
+    });
+
+    it("should remove event listeners on destroy", () => {
+      const nextButton = document.getElementById("next-btn");
+
+      // Store reference to click handler
+      const clickHandler = nextButton._carouselClickHandler;
+      expect(clickHandler).toBeDefined();
+
+      carouselInstance.destroy();
+
+      // Handler reference should be removed
+      expect(nextButton._carouselClickHandler).toBeUndefined();
+    });
+  });
+
+  describe("Static Methods", () => {
+    it("should get instance by ID", () => {
+      const foundInstance = Carousel.getInstanceById("test-carousel");
+      expect(foundInstance).toBe(carouselInstance);
+    });
+
+    it("should get instance by data-carousel-id", () => {
+      document.body.innerHTML = `
+        <div class="carousel" data-carousel-id="data-id-carousel">
+          <div class="carousel__viewport">
+            <div class="carousel__track">
+              <div class="carousel__slide">Slide 1</div>
+            </div>
+          </div>
+        </div>
+      `;
+
+      const element = document.querySelector(".carousel");
+      const instance = new Carousel(element);
+      const foundInstance = Carousel.getInstanceById("data-id-carousel");
+
+      expect(foundInstance).toBe(instance);
+    });
+
+    it("should return null for non-existent carousel", () => {
+      const foundInstance = Carousel.getInstanceById("non-existent");
+      expect(foundInstance).toBe(null);
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle controls without valid action", () => {
+      document.body.innerHTML = `
+        <div class="carousel" data-carousel-id="test-carousel">
+          <div class="carousel__viewport">
+            <div class="carousel__track">
+              <div class="carousel__slide">Slide 1</div>
+            </div>
+          </div>
+        </div>
+        <button data-carousel-controls="test-carousel" data-carousel-action="invalid">Invalid</button>
+      `;
+
+      const element = document.querySelector(".carousel");
+      new Carousel(element);
+
+      const button = document.querySelector("button");
+      button.click();
+
+      // Should not crash and should not call slideNext/slidePrev
+      expect(mockSwiperInstance.slideNext).not.toHaveBeenCalled();
+      expect(mockSwiperInstance.slidePrev).not.toHaveBeenCalled();
+    });
+
+    it("should handle updateExternalControlsState without instance", () => {
+      carouselInstance.instance = null;
+
+      // Should not crash
+      expect(() => {
+        carouselInstance.updateExternalControlsState();
+      }).not.toThrow();
+    });
+
+    it("should handle updateExternalControlsState without carouselId", () => {
+      carouselInstance.carouselId = null;
+
+      // Should not crash
+      expect(() => {
+        carouselInstance.updateExternalControlsState();
+      }).not.toThrow();
+    });
+  });
+});

package/src/components/Carousel/tests/Carousel.unit.test.js

@@ -204,4 +204,72 @@ describe("rendering Carousel", () => {
       expect(carousel).not.toHaveClass("is-light");
     });
   });
+
+  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 id="test-carousel" items={items} />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveAttribute("id", "test-carousel");
+    });
+
+    it("should support external controls via data attributes", () => {
+      const { container } = render(
+        <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(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("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).toHaveAttribute("id", "test-id");
+      expect(carousel).toHaveAttribute("data-carousel-id", "test-data-id");
+    });
+  });
 });

package/src/components/Cover/Cover.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import cx from 'classnames';
+import React from "react";
+import cx from "classnames";
 
-import { Image } from '../Image';
+import { Image } from "../Image";
 
 interface CoverProps {
   /** Background image source. URL string or an object of breakpoint: url pairs
@@ -19,22 +19,24 @@ interface CoverProps {
 }
   * ```
   */
-  bgSrc: string | {
-    default: string;
-    xs?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    xxl?: string;
-    xxxl?: string;
-  };
+  bgSrc:
+    | string
+    | {
+        default: string;
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        xxl?: string;
+        xxxl?: string;
+      };
   /** Set vertical position of image */
-  bgPosition?: 'top' | 'center' | 'bottom';
+  bgPosition?: "top" | "center" | "bottom";
   /** Applies custom classNames to overlay content */
   contentClass?: string;
   /** Cover size */
-  size?: 'small' | 'medium' | 'large';
+  size?: "small" | "medium" | "large" | "xlarge";
   /** Additional className for the cover container */
   className?: string;
   /** Children content */
@@ -43,13 +45,13 @@ interface CoverProps {
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'cover';
+const CLASS_ROOT = "cover";
 
 const Cover: React.FC<CoverProps> = ({
   className,
   children,
   contentClass,
-  bgPosition = 'center',
+  bgPosition = "center",
   bgSrc,
   size,
   ...other
@@ -59,13 +61,13 @@ const Cover: React.FC<CoverProps> = ({
     {
       [`${CLASS_ROOT}--${size}`]: size,
     },
-    className
+    className,
   );
 
   const contentClasses = cx(`${CLASS_ROOT}__content`, contentClass);
 
   const bgImgClassName = cx(`${CLASS_ROOT}__image`, {
-    [`${CLASS_ROOT}__image--${bgPosition}`]: bgPosition !== 'center',
+    [`${CLASS_ROOT}__image--${bgPosition}`]: bgPosition !== "center",
   });
 
   return (
@@ -76,6 +78,6 @@ const Cover: React.FC<CoverProps> = ({
   );
 };
 
-Cover.displayName = 'Cover';
+Cover.displayName = "Cover";
 
 export { Cover };

package/src/components/Cover/styles/config.scss

@@ -1,5 +1,5 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
 
 $sizes: (
   small: (
@@ -8,7 +8,7 @@ $sizes: (
     ),
     md: (
       min-height: convert.to-rem(255px),
-    )
+    ),
   ),
   medium: (
     default: (
@@ -19,7 +19,7 @@ $sizes: (
     ),
     lg: (
       min-height: convert.to-rem(295px),
-    )
+    ),
   ),
   large: (
     default: (
@@ -30,13 +30,24 @@ $sizes: (
     ),
     lg: (
       min-height: convert.to-rem(460px),
-    )
+    ),
+  ),
+  xlarge: (
+    default: (
+      min-height: convert.to-rem(600px),
+    ),
+    md: (
+      min-height: convert.to-rem(760px),
+    ),
+    lg: (
+      min-height: convert.to-rem(760px),
+    ),
   ),
 );
 
 $spacing: (
   default: (
-    padding-top: space.get('small'),
+    padding-top: space.get("small"),
     padding-bottom: 0.1px,
   ),
   md: (
@@ -44,12 +55,12 @@ $spacing: (
     padding-bottom: space.get(),
   ),
   lg: (
-    padding-top: space.get('large'),
-    padding-bottom: space.get('large'),
-  )
+    padding-top: space.get("large"),
+    padding-bottom: space.get("large"),
+  ),
 );
 
 $positions: (
-  'top': 50% 0,
-  'bottom': 50% 100%,
-);
+  "top": 50% 0,
+  "bottom": 50% 100%,
+);

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

@@ -1,7 +1,7 @@
 @use "sass:map";
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/generate';
-@use './config';
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/generate";
+@use "./config";
 
 @mixin base {
   position: relative;
@@ -12,6 +12,7 @@
   position: relative;
   transform: translate3d(0, 0, 0);
   z-index: 1;
+  width: 100%;
 }
 
 @mixin content-size($size, $config: config.$sizes) {
@@ -34,10 +35,10 @@
   img {
     width: 100%;
     height: 100%;
-    object-fit: cover;  
+    object-fit: cover;
   }
 }
 
 @mixin image-position($position, $config: config.$positions) {
   object-position: map.get($config, $position);
-}
+}