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

package/src/components/Breadcrumbs/tests/Breadcrumbs.integration.test.js

@@ -27,21 +27,13 @@ describe("Breadcrumbs Integration Tests", () => {
       expect(listItems).toHaveLength(6);
       expect(anchors).toHaveLength(5); // Last item has no URL
 
-      // Check all text content
-      deepNavigation.forEach((item, index) => {
-        expect(listItems[index].textContent).toBe(item.text);
-      });
-
-      // Check all URLs
-      deepNavigation.slice(0, -1).forEach((item, index) => {
-        expect(anchors[index]).toHaveAttribute("href", item.url);
-      });
-
       // Last anchor should have aria-current
       expect(anchors[anchors.length - 1]).toHaveAttribute(
         "aria-current",
         "page",
       );
+      // Last item should be plain text
+      expect(listItems[listItems.length - 1].querySelector("a")).toBeNull();
     });
 
     it("handles e-commerce navigation correctly", () => {
@@ -80,15 +72,22 @@ describe("Breadcrumbs Integration Tests", () => {
       ];
 
       const { container } = render(
-        <Breadcrumbs items={multilingualNav} label="Navigation" darkMode />,
+        <Breadcrumbs
+          items={multilingualNav}
+          label="Navigation"
+          colorScheme="dark"
+        />,
       );
 
       const nav = container.querySelector("nav");
-      expect(nav).toHaveClass("osk-breadcrumbs--dark");
+      expect(nav).toHaveClass("osk-breadcrumbs");
+      expect(nav).toHaveClass("is-dark");
       expect(nav).toHaveAttribute("aria-label", "Navigation");
 
       const listItems = container.querySelectorAll("li");
       expect(listItems).toHaveLength(4);
+      // Last item should be plain text, not a link
+      expect(listItems[listItems.length - 1].querySelector("a")).toBeNull();
     });
   });
 
@@ -152,10 +151,13 @@ describe("Breadcrumbs Integration Tests", () => {
         { text: "Aktuálna stránka" },
       ];
 
-      const { container } = render(<Breadcrumbs items={items} darkMode />);
+      const { container } = render(
+        <Breadcrumbs items={items} colorScheme="dark" />,
+      );
 
       const nav = container.querySelector("nav");
-      expect(nav).toHaveClass("osk-breadcrumbs--dark");
+      expect(nav).toHaveClass("osk-breadcrumbs");
+      expect(nav).toHaveClass("is-dark");
     });
 
     it("combines custom classes with default classes", () => {

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

@@ -73,11 +73,14 @@ describe("rendering Breadcrumbs", () => {
       );
     });
 
-    it("has class osk-breadcrumbs--dark when darkMode prop is passed", () => {
-      const { container } = render(<Breadcrumbs items={[]} darkMode />);
-      expect(
-        container.getElementsByClassName("osk-breadcrumbs--dark").length,
-      ).toBe(1);
+    it('has class osk-breadcrumbs--dark when colorScheme="dark" is passed', () => {
+      const { container } = render(
+        <Breadcrumbs items={[]} colorScheme="dark" />,
+      );
+      expect(container.getElementsByClassName("osk-breadcrumbs").length).toBe(
+        1,
+      );
+      expect(container.getElementsByClassName("is-dark").length).toBe(1);
     });
 
     it("combines multiple CSS classes correctly", () => {
@@ -115,23 +118,28 @@ describe("rendering Breadcrumbs", () => {
     });
 
     it("if last item renders anchor element, this element has aria-current attribute set to 'page'", () => {
-      const { container } = render(<Breadcrumbs items={itemsArr} />);
-      const listElements = container.querySelectorAll("li");
-      expect(
-        listElements[listElements.length - 1].children[0].getAttribute(
-          "aria-current",
-        ),
-      ).toBe("page");
+      const items = [
+        { url: "/test1", text: "test1-text" },
+        { url: "/test2", text: "test2-text" },
+        { url: "/test3", text: "test3-text" },
+      ];
+      const { container } = render(<Breadcrumbs items={items} />);
+      const anchors = container.querySelectorAll("a");
+      expect(anchors[anchors.length - 1]).toHaveAttribute(
+        "aria-current",
+        "page",
+      );
     });
 
     it("marks last item as current page even without URL", () => {
-      const { container } = render(<Breadcrumbs items={complexItemsArr} />);
-      const listElements = container.querySelectorAll("li");
-      const lastItem = listElements[listElements.length - 1];
-
-      // Last item should not have an anchor tag since it has no URL
-      expect(lastItem.querySelector("a")).not.toBeInTheDocument();
-      expect(lastItem.textContent).toBe("Mobilné telefóny");
+      const items = [
+        { url: "/test1", text: "test1-text" },
+        { text: "test2-test" },
+      ];
+      const { container } = render(<Breadcrumbs items={items} />);
+      const listItems = container.querySelectorAll("li");
+      expect(listItems[listItems.length - 1].textContent).toBe("test2-test");
+      expect(listItems[listItems.length - 1].querySelector("a")).toBeNull();
     });
 
     it("renders all items with correct text content", () => {

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

@@ -7,14 +7,6 @@ $base: (
     font-size: convert.to-rem(18px),
     font-weight: bold,
     line-height: 1.111111,
-    transition-duration: 200ms,
-    transition-timing-function: ease-in-out,
-    transition-property: (
-      border-color,
-      background-color,
-      color,
-      outline-color,
-    ),
     border-radius: convert.to-rem(5px),
   ),
   active: (

package/src/components/Card/CardProductHeader.tsx

@@ -7,23 +7,25 @@ interface CardProductHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   space?: "small";
 }
 
-export const CLASS_ROOT = "card__product-header";
+export const CLASS_ROOT = "card__product";
 
 const CardProductHeader = React.forwardRef<
   HTMLDivElement,
   CardProductHeaderProps
 >(({ className, children, image, space, ...other }, ref) => {
   const classes = cx(
-    CLASS_ROOT,
+    `${CLASS_ROOT}-header`,
     {
-      [`${CLASS_ROOT}--space-small`]: space === "small",
+      [`${CLASS_ROOT}-header--space-small`]: space === "small",
     },
     className,
   );
 
+  const contentClasses = `${CLASS_ROOT}-content`;
+
   return (
     <div className={classes} ref={ref} {...other}>
-      <div>{children}</div>
+      <div className={contentClasses}>{children}</div>
       {image}
     </div>
   );

package/src/components/Card/styles/style.scss

@@ -17,21 +17,23 @@
       }
     }
 
-    &__product-header {
-      display: flex;
-      justify-content: space-between;
-
-      > div {
-        @include mixins.card-product-header(null);
+    &__product {
+      &-header {
+        display: flex;
+        justify-content: space-between;
+
+        > img {
+          @include mixins.card-product-image;
+        }
       }
 
-      &--space-small > div {
-        @include mixins.card-product-header(space.get());
+      &-content {
+        @include mixins.card-product-header(null);
       }
+    }
 
-      > img {
-        @include mixins.card-product-image;
-      }
+    &__product-header--space-small &__product-content {
+      @include mixins.card-product-header(space.get());
     }
   }
 }

package/src/components/Card/tests/CardProductHeader.unit.test.js

@@ -42,10 +42,20 @@ describe("rendering CardProductHeader", () => {
       "card__product-header--space-small",
     );
   });
+  
   it("does not have card__product-header--space-small class when space is not set", () => {
     const { getByTestId } = render(<CardProductHeader data-testid="test-id" />);
     expect(getByTestId("test-id")).not.toHaveClass(
       "card__product-header--space-small",
     );
   });
+
+  it("has content wrapper with card__product-content class", () => {
+    const { container } = render(
+      <CardProductHeader>Product Header</CardProductHeader>,
+    );
+    const contentWrapper = container.querySelector(".card__product-content");
+    expect(contentWrapper).toBeInTheDocument();
+    expect(contentWrapper).toHaveTextContent("Product Header");
+  });
 });

package/src/components/Carousel/CHANGELOG.md

@@ -0,0 +1,11 @@
+- **BREAKING**: Migrated `Carousel` component from Glider.js to Swiper.js library
+  - Replaced `@lighting-beetle/glider-js` dependency with `swiper`
+  - Updated `CarouselConfig` interface to extend `SwiperOptions` instead of Glider config
+  - Changed initialization from `new Glider()` to `new Swiper()` with required modules (Navigation, Pagination, Scrollbar, A11y)
+  - Updated prop name from `gliderOptions` to `swiperOptions` in React component
+  - Enhanced keyboard navigation support for pagination buttons (Arrow keys, Home/End, Tab navigation)
+  - Added tooltip position updates on slide changes for better tooltip integration
+  - Improved accessibility with proper ARIA attributes and Slovak language messages
+  - Updated slide classes from glider-specific to swiper-specific (`swiper-slide`, `swiper-wrapper`)
+  - Modified breakpoint configuration format to match Swiper's API
+  - Added automatic element detection and configuration for navigation, pagination, and scrollbar

package/src/components/Carousel/Carousel.mdx

@@ -1,14 +1,14 @@
-import cx from 'classnames';
-import { ComponentDocs, DocsTable } from '@lighting-beetle/lighter-styleguide';
+import cx from "classnames";
+import { ComponentDocs, DocsTable } from "@lighting-beetle/lighter-styleguide";
 
-import { Preview } from '../../styleguide/';
-import breakpoint from '../../styles/export/breakpoint.scss';
-import Image from '../Image/';
-import Container from '../Container';
+import { Preview } from "../../styleguide/";
+import breakpoint from "../../styles/export/breakpoint.scss";
+import Image from "../Image/";
+import Container from "../Container";
 
-import Carousel from './';
+import Carousel from "./";
 
-import { defaultConfig } from './Carousel.static.js';
+import { defaultConfig } from "./Carousel.static.js";
 
 export const SlideExample = ({ num, ...props }) => (
   <React.Fragment {...props}>
@@ -76,23 +76,19 @@ Please note that preview size does not represent viewport size and directional b
 
 ## Custom options
 
-Carousel [default configuration](#default-config) can be overriden before initialization using `data-glider-options` attribute. The attribute accepts a JSON string representing a [Glider.js options object](https://nickpiscitelli.github.io/Glider.js/#settings)
+Carousel [default configuration](#default-config) can be overriden before initialization using `data-swiper-options` attribute. The attribute accepts a JSON string representing a [Swiper.js options object](https://swiperjs.com/swiper-api#parameters)
 
 <Preview>
   <Carousel
     id="carousel-custom-options"
     items={imageItems}
-    gliderOptions={{
-      slidesToShow: 2.2,
-      responsive: [
-        {
-          breakpoint: parseInt(breakpoint.md),
-          settings: {
-            slidesToShow: 3,
-            slidesToScroll: 3,
-          },
+    swiperOptions={{
+      slidesPerView: 2.2,
+      breakpoints: {
+        [parseInt(breakpoint.md)]: {
+          slidesPerView: 3,
         },
-      ],
+      },
     }}
   />
 </Preview>
@@ -110,13 +106,13 @@ const myCarousel = new window.ODS.modules.Carousel(element, config);
 ### Default config
 
 export const descriptions = {
-  arrows: 'Arrows selectors for navigation',
-  dots: 'Dots selector',
-  skipTrack: 'Skip additional wrapper for slides (track wrapper)',
+  arrows: "Arrows selectors for navigation",
+  dots: "Dots selector",
+  skipTrack: "Skip additional wrapper for slides (track wrapper)",
 };
 
 <DocsTable
-  data={Object.keys(defaultConfig).map(key => ({
+  data={Object.keys(defaultConfig).map((key) => ({
     prop: key,
     type: typeof defaultConfig[key],
     default: JSON.stringify(defaultConfig[key]),
@@ -124,9 +120,9 @@ export const descriptions = {
   }))}
 />
 
-### Glider.js methods
+### Swiper.js methods
 
-Glider.js has it's own methods which are well documented at [Glider.js docs](https://nickpiscitelli.github.io/Glider.js/)
+Swiper.js has it's own methods which are well documented at [Swiper.js docs](https://swiperjs.com/swiper-api#methods--properties)
 
 Carousel component has it's own two important methods to destroy and update instance.
 
@@ -140,20 +136,20 @@ const instance = document.querySelector(el).ODS_Carousel;
 <DocsTable
   data={[
     {
-      prop: 'destroy',
-      type: 'func',
+      prop: "destroy",
+      type: "func",
       default: `() => {
-  this.instance.destroy(); // Glider.js method
+  this.instance.destroy(); // Swiper.js method
 }`,
-      description: 'Destroy the instance - removes all listeners',
+      description: "Destroy the instance - removes all listeners",
     },
     {
-      prop: 'update',
-      type: 'func',
+      prop: "update",
+      type: "func",
       default: `() => {
-  this.instance.refresh(); // Glider.js method
+  this.instance.update(); // Swiper.js method
 }`,
-      description: 'Updates an instance.',
+      description: "Updates an instance.",
     },
   ]}
 />

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

@@ -1,6 +1,14 @@
-import Glider from "@lighting-beetle/glider-js";
+import { Swiper } from "swiper";
+import type { SwiperOptions } from "swiper/types";
+import {
+  Navigation,
+  Pagination,
+  Scrollbar,
+  A11y,
+  Keyboard,
+} from "swiper/modules";
 
-import Tooltip from "../Tooltip/Tooltip.static"; // Import the Tooltip class
+import Tooltip from "../Tooltip/Tooltip.static";
 
 import {
   SELECTOR_PREV,
@@ -8,114 +16,143 @@ import {
   SELECTOR_DOTS,
   SELECTOR_VIEWPORT,
   SELECTOR_TRACK,
+  CLASS_SCROLLBAR_DRAG,
+  SELECTOR_SCROLLBAR,
+  CLASS_SCROLLBAR_HORIZONTAL,
+  CLASS_TRACK,
+  CLASS_SLIDE,
+  CLASS_DOT,
+  CLASS_ACTIVE,
+  SELECTOR_ACTIVE,
+  CLASS_SLIDE_NEXT,
+  CLASS_SLIDE_PREV,
 } from "./constants";
 
-export interface CarouselConfig {
-  arrows: {
-    prev: string;
-    next: string;
-  };
-  slidesToShow: number;
-  dots: string;
-  skipTrack: 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: CarouselConfig = {
-  arrows: {
-    prev: SELECTOR_PREV,
-    next: SELECTOR_NEXT,
+export const defaultConfig: SwiperOptions = {
+  navigation: {
+    nextEl: SELECTOR_NEXT,
+    prevEl: SELECTOR_PREV,
+  },
+  pagination: {
+    el: SELECTOR_DOTS,
+    clickable: true,
+    bulletClass: CLASS_DOT,
+    bulletActiveClass: CLASS_ACTIVE,
+    renderBullet: (index, className) => {
+      return `<button aria-label="Page ${index + 1}" role="tab" class="${className}" type="button"></button>`;
+    },
   },
-  slidesToShow: 1.2,
-  dots: SELECTOR_DOTS,
-  skipTrack: true,
-  classes: {
-    glider: "carousel__viewport",
-    track: "carousel__track",
-    slide: "carousel__slide",
-    drag: "is-dragging",
-    draggable: "is-draggable",
-    disabled: "is-disabled",
-    active: "is-active",
-    visible: "is-visible",
-    dots: "carousel__pagination",
-    dot: "carousel__pagination-item",
+  scrollbar: {
+    el: SELECTOR_SCROLLBAR,
+    draggable: true,
+    enabled: true,
+    horizontalClass: CLASS_SCROLLBAR_HORIZONTAL,
+    dragClass: CLASS_SCROLLBAR_DRAG,
   },
+  slidesPerView: 1.2,
+  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",
+  },
+  loop: false,
+  cssMode: false,
+  direction: "horizontal",
+  breakpoints: {
+    1240: {
+      slidesPerView: 1.6,
+    },
+  },
+  wrapperClass: CLASS_TRACK,
+  slideClass: CLASS_SLIDE,
+  slideActiveClass: CLASS_ACTIVE,
+  slideNextClass: CLASS_SLIDE_NEXT,
+  slidePrevClass: CLASS_SLIDE_PREV,
 };
 
 export default class Carousel {
   element: HTMLElement;
-  config: CarouselConfig & {
-    arrows: {
-      prev: HTMLElement | null;
-      next: HTMLElement | null;
-    };
-    dots: HTMLElement | null;
-  };
+  config: SwiperOptions;
   viewport!: HTMLElement;
   track!: HTMLElement;
-  instance!: any;
+  instance!: Swiper;
 
-  constructor(element: HTMLElement, config?: Partial<CarouselConfig>) {
+  constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
     this.element = element;
-    this.config = { ...defaultConfig, ...config } as any;
+    this.config = {
+      ...defaultConfig,
+      ...config,
+      scrollbar: {
+        ...((defaultConfig.scrollbar ?? {}) as object),
+        ...((config?.scrollbar ?? {}) as object),
+        el: this.element.querySelector(
+          SELECTOR_SCROLLBAR,
+        ) as HTMLElement | null,
+      },
+    };
 
-    this.fixPaginationButtonType = this.fixPaginationButtonType.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
+    this.handleSlideChange = this.handleSlideChange.bind(this);
     this.updateTooltipPosition = this.updateTooltipPosition.bind(this);
 
     (this.element as any).ODS_Carousel = this;
 
-    this.init();
+    // 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();
     }
 
-    this.element.addEventListener(
-      "glider-loaded",
-      this.fixPaginationButtonType,
-    );
-    this.element.addEventListener("glider-loaded", this.handleScroll);
-    this.element.addEventListener(
-      "glider-refresh",
-      this.fixPaginationButtonType,
-    );
-
-    this.viewport.addEventListener("scroll", this.handleScroll);
-
-    this.instance = new Glider(this.viewport, this.config);
+    this.instance = new Swiper(this.viewport, {
+      ...this.config,
+      modules: [Navigation, Pagination, Scrollbar, A11y, Keyboard],
+      on: {
+        slideChange: this.handleSlideChange,
+      },
+    });
   }
 
   getElements() {
     this.viewport = this.element.querySelector(SELECTOR_VIEWPORT)!;
     this.track = this.viewport.querySelector(SELECTOR_TRACK)!;
 
+    // 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");
+    }
+
     const elements = {
-      arrows: {
-        prev: this.element.querySelector(SELECTOR_PREV),
-        next: this.element.querySelector(SELECTOR_NEXT),
+      navigation: {
+        ...((this.config.navigation ?? {}) as object),
+        nextEl: this.element.querySelector(SELECTOR_NEXT) as HTMLElement | null,
+        prevEl: this.element.querySelector(SELECTOR_PREV) as HTMLElement | null,
+      },
+      pagination: {
+        ...((this.config.pagination ?? {}) as object),
+        el: paginationEl,
+        clickable: true,
+        bulletClass: "carousel__pagination-item",
+        bulletActiveClass: CLASS_ACTIVE,
       },
-      dots: this.element.querySelector(SELECTOR_DOTS),
     };
 
-    // @ts-expect-error config is not typed to accept HTMLElement | null
     this.config = {
       ...this.config,
       ...elements,
@@ -123,34 +160,27 @@ export default class Carousel {
   }
 
   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,
     };
   }
 
-  fixPaginationButtonType() {
-    const dots = Array.from(
-      this.element.querySelectorAll(`${SELECTOR_DOTS} > *`),
-    );
-
-    dots.forEach((dot) => (dot as HTMLElement).setAttribute("type", "button"));
-  }
-
   /**
-   * Handles the scroll event on the carousel viewport.
+   * Handles the slide change event on the carousel.
    * Updates the tooltip position for the active slide and hides tooltips for non-active slides.
+   * Also updates accessibility attributes for pagination buttons.
    */
-  handleScroll() {
-    const activeSlide = this.track.querySelector(".active");
+  handleSlideChange() {
+    const activeSlide = this.track.querySelector(SELECTOR_ACTIVE);
     const nonActiveSlides = this.track.querySelectorAll(
-      ".glider-slide:not(.active)",
+      `.${CLASS_SLIDE}:not(${SELECTOR_ACTIVE})`,
     );
 
     if (activeSlide) {
@@ -214,11 +244,15 @@ export default class Carousel {
   }
 
   destroy() {
-    this.instance.destroy();
+    if (this.instance) {
+      this.instance.destroy();
+    }
   }
 
   update() {
-    this.instance.refresh();
+    if (this.instance) {
+      this.instance.update();
+    }
   }
 
   static getInstance(el: HTMLElement): Carousel | null {