@orangesk/orange-design-system 2.0.0-alpha.2 → 2.0.0-alpha.3

package/src/components/CarouselPromotions/CarouselPromotions.static.ts

@@ -1,4 +1,12 @@
-import Glider from "@lighting-beetle/glider-js";
+import { Swiper } from "swiper";
+import type { SwiperOptions } from "swiper/types";
+import {
+  Navigation,
+  Pagination,
+  A11y,
+  Keyboard,
+  Autoplay,
+} from "swiper/modules";
 
 import {
   SELECTOR_DOTS,
@@ -7,84 +15,74 @@ import {
   CLASS_DOT_SVG,
   CLASS_AUTOPLAY,
   CLASS_SHOWING_INVERTED_SLIDE,
+  CLASS_TRACK,
+  CLASS_SLIDE,
+  CLASS_DOT,
+  CLASS_ACTIVE,
 } from "./constants";
 
-export interface CarouselPromotionsConfig {
-  slidesToShow: number;
-  dots: string;
-  skipTrack: boolean;
-  rewind: boolean;
-  interval: number;
-  scrollLock: boolean;
-  classes: {
-    glider: string;
-    track: string;
-    slide: string;
-    drag: string;
-    draggable: string;
-    disabled: string;
-    active: string;
-    visible: string;
-    dots: string;
-    dot: string;
-  };
-}
-
-export const defaultConfig: CarouselPromotionsConfig = {
-  slidesToShow: 1,
-  dots: SELECTOR_DOTS,
-  skipTrack: true,
-  rewind: true,
-  interval: 0,
-  scrollLock: true,
-  classes: {
-    glider: "carousel-promotions__viewport",
-    track: "carousel-promotions__track",
-    slide: "carousel-promotions__slide",
-    drag: "is-dragging",
-    draggable: "is-draggable",
-    disabled: "is-disabled",
-    active: "is-active",
-    visible: "is-visible",
-    dots: "carousel-promotions__pagination",
-    dot: "carousel-promotions__pagination-item",
+export const defaultConfig: SwiperOptions = {
+  pagination: {
+    el: SELECTOR_DOTS,
+    clickable: true,
+    bulletClass: CLASS_DOT,
+    bulletActiveClass: CLASS_ACTIVE,
+    renderBullet: (index, className) => {
+      return `<button aria-label="Stránka ${index + 1}" role="tab" class="${className}" type="button"></button>`;
+    },
+  },
+  slidesPerView: 1,
+  loop: true,
+  a11y: {
+    enabled: true,
+    prevSlideMessage: "Predchádzajúci snímok",
+    nextSlideMessage: "Nasledujúci snímok",
+    paginationBulletMessage: "Prejsť na snímok {index}",
+    containerMessage: "Carousel so snímkami",
+    containerRoleDescriptionMessage: "carousel",
+    itemRoleDescriptionMessage: "snímok",
+    firstSlideMessage: "Prvý snímok",
+    lastSlideMessage: "Posledný snímok",
+    slideLabelMessage: "Snímok",
   },
+  cssMode: false,
+  direction: "horizontal",
+  wrapperClass: CLASS_TRACK,
+  slideClass: CLASS_SLIDE,
+  slideActiveClass: CLASS_ACTIVE,
+  autoplay: false,
 };
 
 export default class CarouselPromotions {
   element: HTMLElement;
-  config: CarouselPromotionsConfig & { dots?: HTMLElement | null };
+  config: SwiperOptions;
   viewport!: HTMLElement;
-  instance: any;
+  instance!: Swiper;
   interval: number = 0;
+  autoplayTimer?: NodeJS.Timeout;
 
-  constructor(
-    element: HTMLElement,
-    config?: Partial<CarouselPromotionsConfig>,
-  ) {
+  constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
     this.element = element;
-    const mergedConfig = { ...defaultConfig, ...config };
-    const { interval, ...restConfig } = mergedConfig;
-    // @ts-expect-error config is not typed to accept HTMLElement | null
-    this.config = restConfig;
-    this.interval = parseInt(String(interval));
-    (this.element as any).ODS_CarouselPromotions = this;
+    this.config = { ...defaultConfig, ...config };
+    this.interval = 0;
 
-    this.gliderLoadedHandler = this.gliderLoadedHandler.bind(this);
-    this.gliderRefreshHandler = this.gliderRefreshHandler.bind(this);
+    this.handleSlideChange = this.handleSlideChange.bind(this);
     this.scrollToNextSlide = this.scrollToNextSlide.bind(this);
     this.autoplayAnimationEnd = this.autoplayAnimationEnd.bind(this);
 
     (this.element as any).ODS_CarouselPromotions = this;
 
+    // Defer initialization to ensure DOM is ready
+    // requestAnimationFrame(() => {
     this.init();
+    // });
     return this;
   }
 
   init() {
     this.getElements();
 
-    if (this.element.hasAttribute("data-glider-options")) {
+    if (this.element.hasAttribute("data-swiper-options")) {
       this.getCustomOptions();
     }
 
@@ -96,30 +94,41 @@ export default class CarouselPromotions {
 
     if (isIntervalValid) {
       this.element.classList.add(CLASS_AUTOPLAY);
+      this.config.autoplay = {
+        delay: this.interval,
+        disableOnInteraction: false,
+      };
     } else {
       this.interval = 0;
+      this.config.autoplay = false;
     }
 
-    this.element.addEventListener("glider-loaded", this.gliderLoadedHandler);
-    this.element.addEventListener("glider-refresh", this.gliderRefreshHandler);
-    this.element.addEventListener("glider-slide-visible", (e: any) => {
-      this.element.classList.remove(CLASS_SHOWING_INVERTED_SLIDE);
-      if (e.detail && e.detail.slide !== undefined) {
-        const slideIndex = e.detail.slide;
-        if (slideIndex % 2 === 1) {
-          this.element.classList.add(CLASS_SHOWING_INVERTED_SLIDE);
-        }
-      }
+    this.instance = new Swiper(this.viewport, {
+      ...this.config,
+      modules: [Navigation, Pagination, A11y, Keyboard, Autoplay],
+      on: {
+        slideChange: this.handleSlideChange,
+        init: () => {
+          this.fixPaginationButtonType();
+          if (this.isAutoplayEnabled) {
+            this.renderSvgDotsForAnimation();
+          }
+        },
+        update: () => {
+          this.fixPaginationButtonType();
+          if (this.isAutoplayEnabled) {
+            this.renderSvgDotsForAnimation();
+          }
+        },
+      },
     });
 
-    this.instance = new Glider(this.viewport, this.config);
-
-    if (this.instance && this.instance.dots && isIntervalValid) {
-      this.instance.dots.addEventListener(
-        "animationend",
-        this.autoplayAnimationEnd,
-      );
-      this.instance.dots.addEventListener("click", () => {
+    const paginationEl = this.element.querySelector(
+      SELECTOR_DOTS,
+    ) as HTMLElement | null;
+    if (paginationEl && isIntervalValid) {
+      paginationEl.addEventListener("animationend", this.autoplayAnimationEnd);
+      paginationEl.addEventListener("click", () => {
         this.stopAutoplay();
       });
     }
@@ -128,6 +137,23 @@ export default class CarouselPromotions {
   stopAutoplay() {
     this.interval = 0;
     this.element.classList.remove(CLASS_AUTOPLAY);
+    if (this.instance && this.instance.autoplay) {
+      this.instance.autoplay.stop();
+    }
+  }
+
+  /**
+   * Handles the slide change event on the carousel.
+   * Updates the inverted slide class based on slide index.
+   */
+  handleSlideChange() {
+    this.element.classList.remove(CLASS_SHOWING_INVERTED_SLIDE);
+    if (this.instance && this.instance.activeIndex !== undefined) {
+      const slideIndex = this.instance.activeIndex;
+      if (slideIndex % 2 === 1) {
+        this.element.classList.add(CLASS_SHOWING_INVERTED_SLIDE);
+      }
+    }
   }
 
   autoplayAnimationEnd(e: AnimationEvent) {
@@ -146,35 +172,38 @@ export default class CarouselPromotions {
   }
 
   scrollToNextSlide() {
+    if (!this.instance || !this.instance.slides) {
+      return;
+    }
     const slidesCount = this.instance.slides.length;
-    if (slidesCount < 0) {
+    if (slidesCount <= 0) {
       return;
     }
-    const currentSlideIndex = this.instance.getCurrentSlide();
-    this.instance.scrollItem((currentSlideIndex + 1) % slidesCount);
+    const currentSlideIndex = this.instance.activeIndex || 0;
+    this.instance.slideTo((currentSlideIndex + 1) % slidesCount);
   }
 
-  gliderLoadedHandler() {
-    this.fixPaginationButtonType();
-    if (this.isAutoplayEnabled) {
-      this.renderSvgDotsForAnimation();
-    }
-  }
+  getElements() {
+    this.viewport = this.element.querySelector(SELECTOR_VIEWPORT)!;
 
-  gliderRefreshHandler() {
-    this.fixPaginationButtonType();
-    if (this.isAutoplayEnabled) {
-      this.renderSvgDotsForAnimation();
+    // Ensure pagination container has proper role
+    const paginationEl = this.element.querySelector(
+      SELECTOR_DOTS,
+    ) as HTMLElement | null;
+    if (paginationEl && !paginationEl.hasAttribute("role")) {
+      paginationEl.setAttribute("role", "tablist");
     }
-  }
 
-  getElements() {
-    this.viewport = this.element.querySelector(SELECTOR_VIEWPORT)!;
     const elements = {
-      dots: this.element.querySelector(SELECTOR_DOTS),
+      pagination: {
+        ...((this.config.pagination ?? {}) as object),
+        el: paginationEl,
+        clickable: true,
+        bulletClass: CLASS_DOT,
+        bulletActiveClass: CLASS_ACTIVE,
+      },
     };
 
-    // @ts-expect-error config is not typed to accept HTMLElement | null
     this.config = {
       ...this.config,
       ...elements,
@@ -182,15 +211,15 @@ export default class CarouselPromotions {
   }
 
   getCustomOptions() {
-    const passedGliderOptions = this.element.getAttribute(
-      "data-glider-options",
+    const passedSwiperOptions = this.element.getAttribute(
+      "data-swiper-options",
     );
-    if (!passedGliderOptions) return;
-    const parsedGliderOptions = JSON.parse(passedGliderOptions);
+    if (!passedSwiperOptions) return;
+    const parsedSwiperOptions = JSON.parse(passedSwiperOptions);
 
     this.config = {
       ...this.config,
-      ...parsedGliderOptions,
+      ...parsedSwiperOptions,
     };
   }
 
@@ -239,11 +268,15 @@ export default class CarouselPromotions {
   }
 
   destroy() {
-    this.instance.destroy();
+    if (this.instance) {
+      this.instance.destroy();
+    }
   }
 
   update() {
-    this.instance.refresh();
+    if (this.instance) {
+      this.instance.update();
+    }
   }
 
   static getInstance(el: HTMLElement): CarouselPromotions | null {

package/src/components/CarouselPromotions/CarouselPromotions.tsx

@@ -16,22 +16,25 @@ import { useStatic } from "@/utils/hooks";
 
 interface CarouselPromotionsProps {
   className?: string;
-  gliderOptions?: Record<string, any>;
-  isInverse?: boolean;
+  swiperOptions?: Record<string, any>;
+  colorScheme?: "light" | "dark";
   children?: ReactNode;
   [key: string]: any;
 }
 
 const CarouselPromotions: React.FC<CarouselPromotionsProps> = ({
   className,
-  gliderOptions,
-  isInverse,
+  swiperOptions,
+  colorScheme,
   children,
   ...other
 }) => {
   const [carouselRef] = useStatic(CarouselPromotionsStatic);
 
-  const classes = cx(CLASS_ROOT, className, { "bg-black": isInverse });
+  const classes = cx(CLASS_ROOT, className, {
+    "is-light": colorScheme === "light",
+    "is-dark": colorScheme === "dark",
+  });
 
   const elementClasses = {
     next: cx(CLASS_NEXT, "hide-lg"),
@@ -43,8 +46,8 @@ const CarouselPromotions: React.FC<CarouselPromotionsProps> = ({
       className={classes}
       ref={carouselRef}
       data-carousel-promotions
-      {...(gliderOptions
-        ? { "data-glider-options": JSON.stringify(gliderOptions) }
+      {...(swiperOptions
+        ? { "data-swiper-options": JSON.stringify(swiperOptions) }
         : {})}
       {...other}
     >

package/src/components/CarouselPromotions/constants.ts

@@ -1,4 +1,4 @@
-export const CLASS_ROOT = 'carousel-promotions';
+export const CLASS_ROOT = "carousel-promotions";
 
 export const CLASS_WRAPPER = `${CLASS_ROOT}`;
 export const CLASS_VIEWPORT_WRAPPER = `${CLASS_ROOT}__viewport-wrapper`;
@@ -10,11 +10,13 @@ export const CLASS_TITLE = `${CLASS_ROOT}__title`;
 export const CLASS_IMAGE = `${CLASS_ROOT}__image`;
 export const CLASS_NEXT = `${CLASS_ROOT}__next`;
 export const CLASS_DOTS = `${CLASS_ROOT}__pagination`;
+export const CLASS_DOT = `${CLASS_ROOT}__pagination-item`;
 export const CLASS_DOT_SVG = `${CLASS_ROOT}__pagination-svg`;
 export const CLASS_DOT_CIRCLE = `${CLASS_ROOT}__pagination-circle`;
 export const CLASS_SHOWING_INVERTED_SLIDE = `${CLASS_ROOT}--slide-inverted`;
 
 export const CLASS_AUTOPLAY = `is-autoplay`;
+export const CLASS_ACTIVE = "is-active";
 
 export const SELECTOR_WRAPPER = `.${CLASS_WRAPPER}`;
 export const SELECTOR_VIEWPORT = `.${CLASS_VIEWPORT}`;

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

@@ -78,17 +78,167 @@ describe("rendering CarouselPromotions", () => {
       </>
     );
 
-    it("has number of pagination buttons with role tab equal to length of items array", () => {
+    it("has pagination container (buttons are rendered by Swiper after initialization)", () => {
       const { container } = render(
         <CarouselPromotions>{items}</CarouselPromotions>,
       );
-      expect(container.querySelectorAll(`button[role="tab"]`).length).toBe(3);
+      // Pagination buttons are dynamically created by Swiper.js after initialization
+      // so we just verify the pagination container exists
+      expect(
+        container.querySelector(".carousel-promotions__pagination"),
+      ).toBeInTheDocument();
+    });
+    it("has class is-dark when colorScheme='dark' is passed", () => {
+      const { getByTestId } = render(
+        <CarouselPromotions data-testid="test-id" colorScheme="dark">
+          {items}
+        </CarouselPromotions>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-dark");
+    });
+
+    it("has class is-light when colorScheme='light' is passed", () => {
+      const { getByTestId } = render(
+        <CarouselPromotions data-testid="test-id" colorScheme="light">
+          {items}
+        </CarouselPromotions>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-light");
+    });
+
+    it("passes swiperOptions as data-swiper-options attribute", () => {
+      const swiperOptions = { slidesPerView: 2 };
+      const { getByTestId } = render(
+        <CarouselPromotions data-testid="test-id" swiperOptions={swiperOptions}>
+          {items}
+        </CarouselPromotions>,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute(
+        "data-swiper-options",
+        JSON.stringify(swiperOptions),
+      );
+    });
+
+    it("does not set data-swiper-options attribute when swiperOptions prop is not provided", () => {
+      const { getByTestId } = render(
+        <CarouselPromotions data-testid="test-id">{items}</CarouselPromotions>,
+      );
+      expect(getByTestId("test-id").hasAttribute("data-swiper-options")).toBe(
+        false,
+      );
+    });
+  });
+
+  describe("Swiper integration", () => {
+    const items = (
+      <>
+        <CarouselPromotionsItem
+          image={
+            <Image
+              src={`https://placehold.co/800x150?text=slide`}
+              alt="Image"
+            />
+          }
+          title="Akcia za vernosť."
+          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
+        />
+        <CarouselPromotionsItem
+          image={
+            <Image
+              src={`https://placehold.co/800x150?text=slide`}
+              alt="Image"
+            />
+          }
+          title="Akcia za vernosť."
+          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
+        />
+      </>
+    );
+
+    it("track element uses carousel-promotions__track class which maps to swiper-wrapper", () => {
+      const { container } = render(
+        <CarouselPromotions>{items}</CarouselPromotions>,
+      );
+      expect(
+        container.querySelector(".carousel-promotions__track"),
+      ).toBeInTheDocument();
+    });
+
+    it("slide elements use carousel-promotions__slide class which maps to swiper-slide", () => {
+      const { container } = render(
+        <CarouselPromotions>{items}</CarouselPromotions>,
+      );
+      const slides = container.getElementsByClassName(
+        "carousel-promotions__slide",
+      );
+      for (let i = 0; i < slides.length; i++) {
+        expect(slides[i]).toHaveClass("carousel-promotions__slide");
+      }
+    });
+
+    it("viewport element is used as Swiper container", () => {
+      const { container } = render(
+        <CarouselPromotions>{items}</CarouselPromotions>,
+      );
+      expect(
+        container.querySelector(".carousel-promotions__viewport"),
+      ).toBeInTheDocument();
+    });
+
+    it("pagination container has proper accessibility attributes", () => {
+      const { container } = render(
+        <CarouselPromotions>{items}</CarouselPromotions>,
+      );
+      const pagination = container.querySelector(
+        ".carousel-promotions__pagination",
+      );
+      expect(pagination).toHaveAttribute("role", "tablist");
+    });
+
+    it("pagination container is empty initially (buttons are rendered by Swiper after initialization)", () => {
+      const { container } = render(
+        <CarouselPromotions>{items}</CarouselPromotions>,
+      );
+      // Pagination buttons are dynamically created by Swiper.js after initialization
+      const pagination = container.querySelector(
+        ".carousel-promotions__pagination",
+      );
+      expect(pagination.children.length).toBe(0);
+    });
+  });
+
+  describe("autoplay functionality", () => {
+    const items = (
+      <>
+        <CarouselPromotionsItem
+          image={
+            <Image
+              src={`https://placehold.co/800x150?text=slide`}
+              alt="Image"
+            />
+          }
+          title="Akcia za vernosť."
+          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
+        />
+      </>
+    );
+
+    it("adds data-interval attribute when provided", () => {
+      const { getByTestId } = render(
+        <CarouselPromotions data-testid="test-id" data-interval={5000}>
+          {items}
+        </CarouselPromotions>,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute("data-interval", "5000");
     });
-    it("has class bg-black when isInverse is passed", () => {
+
+    it("adds data-carousel-promotions attribute for component identification", () => {
       const { getByTestId } = render(
-        <CarouselPromotions data-testid="test-id" items={items} isInverse />,
+        <CarouselPromotions data-testid="test-id">{items}</CarouselPromotions>,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute(
+        "data-carousel-promotions",
       );
-      expect(getByTestId("test-id")).toHaveClass("bg-black");
     });
   });
 });

package/src/components/Code/Code.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { Highlight, Language, PrismTheme } from "prism-react-renderer";
+
+import oneDarkProTheme from "./oneDarkProTheme";
+import "./styles/style.scss";
+
+interface CodeProps {
+  /** Code to highlight. */
+  children?: string;
+  /** Supported languages. */
+  language?: Language;
+  /** Inline code preview with text. */
+  inline?: boolean;
+  /** Theme VSCode theme style object defined in https://github.com/FormidableLabs/prism-react-renderer#theming */
+  theme?: PrismTheme;
+  [key: string]: any;
+}
+
+interface RenderProps {
+  tokens: any[][];
+  style: React.CSSProperties;
+  getLineProps: (props: { line: any[]; key: number }) => any; 
+  getTokenProps: (props: { token: any; key: number }) => any;
+}
+
+const PreviewCode: React.FC<CodeProps> = ({
+  children,
+  language = "markup",
+  inline = true,
+  theme = oneDarkProTheme,
+  ...other
+}) => {
+  if (!children) {
+    return null;
+  }
+
+  const CodeTag = inline ? "span" : "div";
+
+  return (
+    <Highlight code={children} language={language} theme={theme}>
+      {({ tokens, style, getLineProps, getTokenProps }: RenderProps) => {
+        const highlight = tokens.map((line, i) => (
+          <CodeTag {...getLineProps({ line, key: i })} key={i}>
+            {line.map((token, key) => {
+              const tokenProps = getTokenProps({ token, key });
+              // Nahradiť "tag" s "code-tag" v className
+              if (tokenProps.className && tokenProps.className.includes('tag')) {
+                tokenProps.className = tokenProps.className.replace(/\btag\b/g, 'code-tag');
+              }
+              return <span {...tokenProps} key={key} />;
+            })}
+          </CodeTag>
+        ));
+
+        return (
+          <div
+            className={`code-container ${inline ? "inline" : "block"}`}
+            style={style}
+            {...other}
+          >
+            {inline ? (
+              <code
+                className={`code code--inline prism-code language-${language} code-inline`}
+              >
+                {highlight}
+              </code>
+            ) : (
+              <pre className={`language-${language} pre-block`}>
+                <code
+                  className={`code prism-code language-${language} code-block`}
+                >
+                  {highlight}
+                </code>
+              </pre>
+            )}
+          </div>
+        );
+      }}
+    </Highlight>
+  );
+};
+
+PreviewCode.displayName = "Code";
+
+export { PreviewCode };

package/src/components/Code/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { PreviewCode as Code } from './Code';
+
+export const CodeBlock: React.FC<any> = (props) => <Code inline={false} {...props} />;
+CodeBlock.displayName = 'CodeBlock';
+
+export const CodeBlockJSX: React.FC<any> = (props) => (
+  <Code inline={false} language="jsx" {...props} />
+);
+CodeBlockJSX.displayName = 'CodeBlockJSX';
+
+export const CodeJSX: React.FC<any> = (props) => <Code language="jsx" {...props} />;
+CodeJSX.displayName = 'CodeJSX';
+
+export default Code;