@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

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

@@ -0,0 +1,346 @@
+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 container with d-flex class for controls", () => {
+      const { container } = render(<CarouselHero />);
+      expect(container.querySelector(".container.d-flex")).toBeInTheDocument();
+    });
+
+    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);
+    });
+
+    it("navigation controls have proper ARIA labels", () => {
+      const { container } = render(<CarouselHero />);
+
+      const prevButton = container.querySelector(".carousel-hero__prev");
+      const nextButton = container.querySelector(".carousel-hero__next");
+
+      expect(prevButton).toHaveAttribute("aria-label", "Predchádzajúci snímok");
+      expect(nextButton).toHaveAttribute("aria-label", "Nasledujúci snímok");
+    });
+
+    it("play/pause button has proper ARIA label when displayed", () => {
+      const { container } = render(<CarouselHero interval={3000} />);
+
+      const playPauseButton = container.querySelector(
+        ".carousel-hero__play-pause",
+      );
+      expect(playPauseButton).toHaveAttribute(
+        "aria-label",
+        "Pozastaviť/Spustiť automatické prehrávanie",
+      );
+    });
+  });
+
+  describe("passed props", () => {
+    const tabs = [{ label: "Tab 1" }, { label: "Tab 2" }, { label: "Tab 3" }];
+
+    const children = (
+      <>
+        <CarouselHeroItem key="slide-1" image="https://placehold.co/720x560">
+          <h2>Test Title 1</h2>
+          <p>Test content 1</p>
+        </CarouselHeroItem>
+        <CarouselHeroItem key="slide-2" image="https://placehold.co/720x560">
+          <h2>Test Title 2</h2>
+          <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("has is-dark class when colorScheme is dark", () => {
+      const { getByTestId } = render(
+        <CarouselHero data-testid="test-id" colorScheme="dark" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-dark");
+    });
+
+    it("does not have is-light or is-dark class by default", () => {
+      const { getByTestId } = render(<CarouselHero data-testid="test-id" />);
+      expect(getByTestId("test-id")).not.toHaveClass("is-light");
+      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
+    });
+
+    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" image="https://placehold.co/720x560">
+        <h2>Test Title</h2>
+        <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);
+    });
+
+    it("shows play/pause button when swiperOptions has autoplay with delay >= 1000ms", () => {
+      const swiperOptions = {
+        autoplay: {
+          delay: 3000,
+          disableOnInteraction: false,
+        },
+      };
+      const { container } = render(
+        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+      );
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(1);
+    });
+
+    it("does not show play/pause button when swiperOptions autoplay delay < 1000ms", () => {
+      const swiperOptions = {
+        autoplay: {
+          delay: 500,
+        },
+      };
+      const { container } = render(
+        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+      );
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(0);
+    });
+
+    it("does not show play/pause button when autoplay is boolean true", () => {
+      const swiperOptions = {
+        autoplay: true,
+      };
+      const { container } = render(
+        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+      );
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(0);
+    });
+  });
+
+  describe("Swiper integration", () => {
+    const children = (
+      <>
+        <CarouselHeroItem key="slide-1" image="https://placehold.co/720x560">
+          <h2>Test Title 1</h2>
+          <p>Test content 1</p>
+        </CarouselHeroItem>
+        <CarouselHeroItem key="slide-2" image="https://placehold.co/720x560">
+          <h2>Test Title 2</h2>
+          <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,135 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { CarouselHeroItem } from "../";
+
+const basicExample = (
+  <CarouselHeroItem image="https://placehold.co/720x560?text=Basic">
+    <h2>Basic Slide Title</h2>
+    <p>Basic slide content</p>
+  </CarouselHeroItem>
+);
+
+const exampleWithButton = (
+  <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 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>
+      <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 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 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>
+);
+
+const exampleWithCustomClassName = (
+  <CarouselHeroItem
+    className="custom-slide-class"
+    image="https://placehold.co/720x560?text=Custom"
+  >
+    <h2>Custom Styled Slide</h2>
+    <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 content conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithLongContent);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithLongContent);
+    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,143 @@
+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"
+          image="https://placehold.co/720x560"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("carousel-hero__slide");
+    });
+
+    it("renders slide content container", () => {
+      const { container } = render(
+        <CarouselHeroItem image="https://placehold.co/720x560" />,
+      );
+      expect(
+        container.getElementsByClassName("carousel-hero__slide-content").length,
+      ).toBe(1);
+    });
+
+    it("renders Container wrapper with proper class", () => {
+      const { container } = render(
+        <CarouselHeroItem image="https://placehold.co/720x560" />,
+      );
+      expect(
+        container.getElementsByClassName("carousel-hero__slide-container")
+          .length,
+      ).toBe(1);
+    });
+
+    it("renders image with proper attributes", () => {
+      const imageUrl = "https://placehold.co/720x560";
+      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");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children content", () => {
+      const { getByText } = render(
+        <CarouselHeroItem 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"
+          image="https://placehold.co/720x560"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("carousel-hero__slide");
+      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"
+          image="https://placehold.co/720x560"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute("id", "custom-id");
+      expect(getByTestId("test-id")).toHaveAttribute("role", "tabpanel");
+    });
+
+    it("renders with different image source", () => {
+      const customImage = "https://example.com/custom-image.jpg";
+      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");
+    });
+
+    it("renders children in proper content container", () => {
+      const { container } = render(
+        <CarouselHeroItem 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 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 slideImage = container.querySelector(".carousel-hero__slide-image");
+
+      // 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 children
+      expect(slideContent).toHaveTextContent("Title");
+      expect(slideContent).toHaveTextContent("Content");
+    });
+  });
+});

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

@@ -129,7 +129,7 @@
   display: flex;
   align-self: center;
   flex-shrink: 0;
-  margin: space.get('small');
+  margin: space.get("small");
 
   picture,
   img {
@@ -193,6 +193,8 @@
     {
       #{$property}: $value;
     }
+
+    margin-bottom: space.get();
   }
 }
 
@@ -200,7 +202,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: space.get('small') space.get('small') space.get('small') 0;
+  justify-content: center;
+  padding: space.get("small") space.get("small") space.get("small") 0;
 
   > *:last-child {
     margin-bottom: 0;
@@ -210,7 +213,11 @@
     height: 100%;
     max-width: convert.to-rem(545px);
     justify-content: space-between;
-    padding: space.get('medium');
+    padding: space.get("medium");
+  }
+
+  @include breakpoint.get('md', 'down') {
+    @include generate.css-map(typography-config.$body-text, 'small');
   }
 }
 

package/src/components/CartTable/FooterPriceColumn.tsx

@@ -22,10 +22,12 @@ const FooterPriceColumn: React.FC<FooterPriceColumnProps> = ({
 
   return (
     <>
-      {discount > 0 && <del className="color-gray">{formatPrice(price)}</del>}
+      {discount > 0 && (
+        <del className="text-secondary">{formatPrice(price)}</del>
+      )}
       <div>
         <div
-          className={cx("color-orange mb-none", {
+          className={cx("text-accent mb-none", {
             h4: size !== "large",
             h2: size === "large",
           })}
@@ -33,7 +35,7 @@ const FooterPriceColumn: React.FC<FooterPriceColumnProps> = ({
           {formatPrice(price - discount)}
         </div>
         <span
-          className={cx("color-orange mb-none", {
+          className={cx("text-accent mb-none", {
             h6: size !== "large",
             h3: size === "large",
           })}