@orangesk/orange-design-system 2.0.0-beta.3 → 2.0.0-beta.4

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

@@ -0,0 +1,289 @@
+import { render } from "@testing-library/react";
+
+import { CarouselHero } from "../CarouselHero";
+import { CarouselHeroItem } from "../CarouselHeroItem";
+
+describe("rendering CarouselHero", () => {
+  describe("initial state", () => {
+    it("has default class carousel-hero", () => {
+      const { getByTestId } = render(<CarouselHero data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("carousel-hero");
+    });
+
+    it("has data-carousel-hero attribute", () => {
+      const { container } = render(<CarouselHero />);
+      expect(container.querySelector(".carousel-hero")).toHaveAttribute(
+        "data-carousel-hero",
+      );
+    });
+
+    it("has default class carousel-hero__viewport-wrapper", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__viewport-wrapper")
+          .length,
+      ).toBe(1);
+    });
+
+    it("has default class carousel-hero__viewport", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__viewport").length,
+      ).toBe(1);
+    });
+
+    it("has default class carousel-hero__track", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__track").length,
+      ).toBe(1);
+    });
+
+    it("has default class carousel-hero__controls", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__controls").length,
+      ).toBe(1);
+    });
+
+    it("has default class carousel-hero__navigation", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__navigation").length,
+      ).toBe(1);
+    });
+
+    it("has default class carousel-hero__pagination", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__pagination").length,
+      ).toBe(1);
+    });
+
+    it("renders navigation controls (prev/next)", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__prev").length,
+      ).toBe(1);
+      expect(
+        container.getElementsByClassName("carousel-hero__next").length,
+      ).toBe(1);
+    });
+  });
+
+  describe("passed props", () => {
+    const tabs = [{ label: "Tab 1" }, { label: "Tab 2" }, { label: "Tab 3" }];
+
+    const children = (
+      <>
+        <CarouselHeroItem
+          key="slide-1"
+          title="Test Title 1"
+          image="https://placehold.co/720x560"
+        >
+          <p>Test content 1</p>
+        </CarouselHeroItem>
+        <CarouselHeroItem
+          key="slide-2"
+          title="Test Title 2"
+          image="https://placehold.co/720x560"
+        >
+          <p>Test content 2</p>
+        </CarouselHeroItem>
+      </>
+    );
+
+    it("renders children slides", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+      const slides = container.getElementsByClassName("carousel-hero__slide");
+      expect(slides.length).toBe(2);
+      expect(slides[0]).toHaveTextContent("Test Title 1");
+      expect(slides[1]).toHaveTextContent("Test Title 2");
+    });
+
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <CarouselHero data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("carousel-hero");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+
+    it("has is-light class when colorScheme is light", () => {
+      const { getByTestId } = render(
+        <CarouselHero data-testid="test-id" colorScheme="light" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-light");
+    });
+
+    it("does not have is-light class by default", () => {
+      const { getByTestId } = render(<CarouselHero data-testid="test-id" />);
+      expect(getByTestId("test-id")).not.toHaveClass("is-light");
+    });
+
+    it("renders tabs when tabs prop is provided", () => {
+      const { container } = render(
+        <CarouselHero tabs={tabs}>{children}</CarouselHero>,
+      );
+
+      const tabsContainer = container.querySelector(".carousel-hero__tabs");
+      expect(tabsContainer).toBeInTheDocument();
+      expect(tabsContainer).toHaveAttribute("role", "tablist");
+
+      const tabButtons = container.querySelectorAll(".carousel-hero__tab");
+      expect(tabButtons.length).toBe(3);
+      expect(tabButtons[0]).toHaveTextContent("Tab 1");
+      expect(tabButtons[1]).toHaveTextContent("Tab 2");
+      expect(tabButtons[2]).toHaveTextContent("Tab 3");
+    });
+
+    it("does not render tabs when tabs prop is empty", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+
+      const tabsContainer = container.querySelector(".carousel-hero__tabs");
+      expect(tabsContainer).not.toBeInTheDocument();
+    });
+
+    it("sets proper ARIA attributes on tabs", () => {
+      const { container } = render(
+        <CarouselHero tabs={tabs}>{children}</CarouselHero>,
+      );
+
+      const tabButtons = container.querySelectorAll(".carousel-hero__tab");
+
+      // First tab should be active
+      expect(tabButtons[0]).toHaveAttribute("role", "tab");
+      expect(tabButtons[0]).toHaveAttribute("aria-selected", "true");
+      expect(tabButtons[0]).toHaveAttribute("tabIndex", "0");
+
+      // Other tabs should not be active
+      expect(tabButtons[1]).toHaveAttribute("aria-selected", "false");
+      expect(tabButtons[1]).toHaveAttribute("tabIndex", "-1");
+      expect(tabButtons[2]).toHaveAttribute("aria-selected", "false");
+      expect(tabButtons[2]).toHaveAttribute("tabIndex", "-1");
+    });
+
+    it("shows play/pause button when interval is provided", () => {
+      const { container } = render(
+        <CarouselHero interval={3000}>{children}</CarouselHero>,
+      );
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(1);
+    });
+
+    it("does not show play/pause button when interval is not provided", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(0);
+    });
+
+    it("does not show play/pause button when interval is 0", () => {
+      const { container } = render(
+        <CarouselHero interval={0}>{children}</CarouselHero>,
+      );
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(0);
+    });
+
+    it("sets data-interval attribute when interval is provided", () => {
+      const { container } = render(
+        <CarouselHero interval={5000}>{children}</CarouselHero>,
+      );
+
+      const carousel = container.querySelector(".carousel-hero");
+      expect(carousel).toHaveAttribute("data-interval", "5000");
+    });
+
+    it("does not set data-interval attribute when interval is not provided", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+
+      const carousel = container.querySelector(".carousel-hero");
+      expect(carousel).not.toHaveAttribute("data-interval");
+    });
+  });
+
+  describe("swiperOptions prop", () => {
+    const children = (
+      <CarouselHeroItem
+        key="slide-1"
+        title="Test Title"
+        image="https://placehold.co/720x560"
+      >
+        <p>Test content</p>
+      </CarouselHeroItem>
+    );
+
+    it("sets data-swiper-options attribute when swiperOptions prop is provided", () => {
+      const swiperOptions = { speed: 500, loop: true };
+      const { container } = render(
+        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+      );
+
+      const carousel = container.querySelector(".carousel-hero");
+      expect(carousel.getAttribute("data-swiper-options")).toBe(
+        JSON.stringify(swiperOptions),
+      );
+    });
+
+    it("does not set data-swiper-options attribute when swiperOptions prop is not provided", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+
+      const carousel = container.querySelector(".carousel-hero");
+      expect(carousel.hasAttribute("data-swiper-options")).toBe(false);
+    });
+  });
+
+  describe("Swiper integration", () => {
+    const children = (
+      <>
+        <CarouselHeroItem
+          key="slide-1"
+          title="Test Title 1"
+          image="https://placehold.co/720x560"
+        >
+          <p>Test content 1</p>
+        </CarouselHeroItem>
+        <CarouselHeroItem
+          key="slide-2"
+          title="Test Title 2"
+          image="https://placehold.co/720x560"
+        >
+          <p>Test content 2</p>
+        </CarouselHeroItem>
+      </>
+    );
+
+    it("track element uses carousel-hero__track class which maps to swiper-wrapper", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+      expect(
+        container.querySelector(".carousel-hero__track"),
+      ).toBeInTheDocument();
+    });
+
+    it("slide elements use carousel-hero__slide class which maps to swiper-slide", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+      const slides = container.getElementsByClassName("carousel-hero__slide");
+      expect(slides.length).toBe(2);
+    });
+
+    it("viewport element uses carousel-hero__viewport class which maps to swiper-container", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+      expect(
+        container.querySelector(".carousel-hero__viewport"),
+      ).toBeInTheDocument();
+    });
+
+    it("pagination element uses carousel-hero__pagination class which maps to swiper-pagination", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+      expect(
+        container.querySelector(".carousel-hero__pagination"),
+      ).toBeInTheDocument();
+    });
+  });
+});

package/src/components/CarouselHero/tests/CarouselHeroItem.conformance.test.js

@@ -0,0 +1,142 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { CarouselHeroItem } from "../";
+
+const basicExample = (
+  <CarouselHeroItem
+    title="Basic Slide Title"
+    image="https://placehold.co/720x560?text=Basic"
+  >
+    <p>Basic slide content</p>
+  </CarouselHeroItem>
+);
+
+const exampleWithButton = (
+  <CarouselHeroItem
+    title="Slide with Button"
+    image="https://placehold.co/720x560?text=Button"
+  >
+    <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"
+  >
+    <p>This slide contains various content types:</p>
+    <ul>
+      <li>List item 1</li>
+      <li>List item 2</li>
+      <li>List item 3</li>
+    </ul>
+    <div>
+      <button type="button">Primary Action</button>
+      <button type="button">Secondary Action</button>
+    </div>
+  </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"
+  >
+    <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"
+  >
+    <p>Obsah so špeciálnymi znakmi: áéíóúôäňľščťžý.</p>
+    <p>Mathematical symbols: ∑ ∞ ± × ÷</p>
+  </CarouselHeroItem>
+);
+
+const exampleWithCustomClassName = (
+  <CarouselHeroItem
+    className="custom-slide-class"
+    title="Custom Styled Slide"
+    image="https://placehold.co/720x560?text=Custom"
+  >
+    <p>This slide has custom styling.</p>
+  </CarouselHeroItem>
+);
+
+describe("CarouselHeroItem conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(basicExample);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(basicExample);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHeroItem with button conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithButton);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithButton);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHeroItem with complex content conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithComplexContent);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithComplexContent);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHeroItem with long title conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithLongTitle);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithLongTitle);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHeroItem with special characters conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithSpecialCharacters);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithSpecialCharacters);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHeroItem with custom class conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithCustomClassName);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithCustomClassName);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/components/CarouselHero/tests/CarouselHeroItem.unit.test.js

@@ -0,0 +1,210 @@
+import { render } from "@testing-library/react";
+
+import { CarouselHeroItem } from "../CarouselHeroItem";
+
+describe("rendering CarouselHeroItem", () => {
+  describe("initial state", () => {
+    it("has default class carousel-hero__slide", () => {
+      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"
+        />,
+      );
+      expect(
+        container.getElementsByClassName("carousel-hero__slide-content").length,
+      ).toBe(1);
+    });
+
+    it("renders slide title", () => {
+      const { container } = render(
+        <CarouselHeroItem
+          title="Test Title"
+          image="https://placehold.co/720x560"
+        />,
+      );
+      const titleElement = container.querySelector(
+        ".carousel-hero__slide-title",
+      );
+      expect(titleElement).toBeInTheDocument();
+      expect(titleElement).toHaveTextContent("Test Title");
+      expect(titleElement.tagName).toBe("H1");
+      expect(titleElement).toHaveClass("h1");
+      expect(titleElement).toHaveClass("thin");
+    });
+
+    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 imageElement = container.querySelector(
+        ".carousel-hero__slide-image",
+      );
+      expect(imageElement).toBeInTheDocument();
+      expect(imageElement).toHaveAttribute("src", imageUrl);
+      expect(imageElement).toHaveAttribute("alt", `Obrázok ${title}`);
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children content", () => {
+      const { getByText } = render(
+        <CarouselHeroItem
+          title="Test Title"
+          image="https://placehold.co/720x560"
+        >
+          <p>Test content</p>
+          <button>Test button</button>
+        </CarouselHeroItem>,
+      );
+      expect(getByText("Test content")).toBeInTheDocument();
+      expect(getByText("Test button")).toBeInTheDocument();
+    });
+
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <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");
+    });
+
+    it("passes through other HTML attributes", () => {
+      const { getByTestId } = render(
+        <CarouselHeroItem
+          data-testid="test-id"
+          id="custom-id"
+          role="tabpanel"
+          title="Test Title"
+          image="https://placehold.co/720x560"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute("id", "custom-id");
+      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 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}`,
+      );
+    });
+
+    it("renders children in proper content container", () => {
+      const { container } = render(
+        <CarouselHeroItem
+          title="Test Title"
+          image="https://placehold.co/720x560"
+        >
+          <p data-testid="child-content">Child content</p>
+        </CarouselHeroItem>,
+      );
+
+      const contentContainer = container.querySelector(
+        ".carousel-hero__slide-content",
+      );
+      const childContent = container.querySelector(
+        "[data-testid='child-content']",
+      );
+
+      expect(contentContainer).toContainElement(childContent);
+    });
+
+    it("maintains proper DOM structure", () => {
+      const { container } = render(
+        <CarouselHeroItem
+          title="Test Title"
+          image="https://placehold.co/720x560"
+        >
+          <p>Content</p>
+        </CarouselHeroItem>,
+      );
+
+      const slide = container.querySelector(".carousel-hero__slide");
+      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 content contains title and children
+      expect(slideContent).toContainElement(slideTitle);
+      expect(slideContent).toHaveTextContent("Content");
+    });
+  });
+});

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

@@ -22,8 +22,8 @@ $base: (
 $states: (
   default: (
     color: var(--color-text-default),
-    background-color: var(--color-fill-disabled),
-    border-color: var(--color-fill-disabled),
+    background-color: var(--color-fill-moderate),
+    border-color: var(--color-fill-moderate),
   ),
   hover: (
     color: var(--color-text-inverse),

package/src/components/index.ts

@@ -20,6 +20,7 @@ import {
 } from "./Button";
 import { Buttons } from "./Buttons";
 import { Carousel } from "./Carousel";
+import { CarouselHero } from "./CarouselHero";
 import { CarouselPromotions } from "./CarouselPromotions";
 import { CartTable } from "./CartTable";
 import { Container } from "./Container";
@@ -114,6 +115,7 @@ export {
   CardProductHeader,
   CardSection,
   Carousel,
+  CarouselHero,
   CarouselPromotions,
   CartTable,
   Checkbox,