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

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

@@ -0,0 +1,61 @@
+import { render } from "@testing-library/react";
+
+import { CardProductHeader } from "../CardProductHeader";
+
+describe("rendering CardProductHeader", () => {
+  it("has default class card__product-header", () => {
+    const { getByTestId } = render(
+      <CardProductHeader data-testid="test-id">Header</CardProductHeader>,
+    );
+    expect(getByTestId("test-id")).toHaveClass("card__product-header");
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(
+      <CardProductHeader>Product Header</CardProductHeader>,
+    );
+    expect(getByText("Product Header")).toBeInTheDocument();
+  });
+
+  it("renders image if provided", () => {
+    const { getByAltText } = render(
+      <CardProductHeader image={<img src="#" alt="product" />}>
+        Product Header
+      </CardProductHeader>,
+    );
+    expect(getByAltText("product")).toBeInTheDocument();
+  });
+
+  it("has additional class when className is set", () => {
+    const { getByTestId } = render(
+      <CardProductHeader data-testid="test-id" className="test-class" />,
+    );
+    expect(getByTestId("test-id")).toHaveClass("card__product-header");
+    expect(getByTestId("test-id")).toHaveClass("test-class");
+  });
+
+  it('has card__product-header--space-small class when space="small"', () => {
+    const { getByTestId } = render(
+      <CardProductHeader data-testid="test-id" space="small" />,
+    );
+    expect(getByTestId("test-id")).toHaveClass(
+      "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/Card/tests/CardSection.unit.test.js

@@ -0,0 +1,61 @@
+import { render } from "@testing-library/react";
+
+import { CardSection } from "../CardSection";
+
+describe("rendering CardSection", () => {
+  describe("initial state", () => {
+    it("has default class card__section", () => {
+      const { getByTestId } = render(<CardSection data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("card__section");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<CardSection>CardSection</CardSection>);
+      expect(getByText("CardSection")).toBeInTheDocument();
+    });
+
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <CardSection data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("card__section");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+
+    ["white", "black", "orange"].map((color) => {
+      it(`bg-${color} class when color is ${color}`, () => {
+        const { getByTestId } = render(
+          <CardSection data-testid="test-id" color={color} />,
+        );
+        expect(getByTestId("test-id")).toHaveClass(`bg-${color}`);
+      });
+    });
+
+    it(`has card__section--fill class when isFilling is passed`, () => {
+      const { getByTestId } = render(
+        <CardSection data-testid="test-id" isFilling />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("card__section--fill");
+    });
+    it(`doenst have card__section--fill class when isFilling isnt passed`, () => {
+      const { container } = render(<CardSection data-testid="test-id" />);
+      expect(
+        container.getElementsByClassName("card__section--fill").length,
+      ).toBe(0);
+    });
+    it('has card__section--space-small class when space="small"', () => {
+      const { getByTestId } = render(
+        <CardSection data-testid="test-id" space="small" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("card__section--space-small");
+    });
+    it("does not have card__section--space-small class when space is not set", () => {
+      const { getByTestId } = render(<CardSection data-testid="test-id" />);
+      expect(getByTestId("test-id")).not.toHaveClass(
+        "card__section--space-small",
+      );
+    });
+  });
+});

package/src/components/Card/tests/data.ts

@@ -0,0 +1,44 @@
+const data = [
+  [
+    {
+      fill: false,
+      content:
+        "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.",
+    },
+    {
+      fill: false,
+      content:
+        "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus.",
+    },
+  ],
+  [
+    {
+      fill: true,
+      content:
+        "Maecenas sed diam eget risus varius blandit sit amet non magna.",
+    },
+    { fill: true, content: "Nulla vitae elit libero, a pharetra augue." },
+  ],
+  [
+    {
+      fill: true,
+      content:
+        "Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris.",
+    },
+    { fill: false, content: "Sed posuere consectetur est at lobortis." },
+  ],
+  [
+    {
+      fill: false,
+      content:
+        "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris.",
+    },
+    {
+      fill: true,
+      content:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.",
+    },
+  ],
+];
+
+export default data;

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

@@ -0,0 +1,159 @@
+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 Carousel from "./";
+
+import { defaultConfig } from "./Carousel.static.js";
+
+export const SlideExample = ({ num, ...props }) => (
+  <React.Fragment {...props}>
+    <Image
+      className="mb-small"
+      src="https://placehold.co/800x300?text=Placeholder"
+      alt="image with desc example"
+    />
+    <h3 className="mb-none">Slide {num + 1}</h3>
+    <p>lorem ipsum dolor</p>
+  </React.Fragment>
+);
+
+export const imageItems = Array(13)
+  .fill()
+  .map((_, index) => <SlideExample key={index.toString()} num={index} />);
+
+# Carousel
+
+Slideshow for cycling through image, text or combined elements.
+
+## 🧭 Navigation
+
+Carousel uses directional buttons to enable slide by slide progression and pagination dots for quickly jumping to desired slide. Directional buttons and pagination dots are visible for `md` and larger viewports.
+
+On smaller viewports, the navigation elements are hidden and element is controlled using native horizontal scrolling.
+
+Directional buttons of a fullwidth carousel can overflow page content if there is enough space. [See example](#breakout-directional-buttons).
+
+## ↔️ Slide width
+
+Carousel shows 1.2 slides by default. This behavior is necessary for basic usability on small viewports, where directional buttons and pagination dots [are hidden](#navigation).
+
+Although this behavior [can be overriden](#custom-options) per breakpoint, it should be preserved for small viewports in order to provide a visual cue that there is content available to the sides.
+
+## 🚫💪 Hero content not allowed
+
+Do not use Carousel for cycling hero banners or any other fullwidth banners. User research has clearly shown that a single (personalised) banner performs better than multiple different banners.
+
+<Preview>
+  <Carousel id="carousel-default" items={imageItems} />
+</Preview>
+
+## Dark background
+
+<Preview bgTheme="black">
+  <Carousel isInverse id="carousel-dark" items={imageItems} />
+</Preview>
+
+## Breakout directional buttons
+
+When a Carousel is a direct descendant of a [Container](/styleguide/components/container), directional buttons can break outside the content column in order to align the slides with other fullwidth elements.
+
+Such situation can occur on `md`, `lg`, `xl` and `xxl` breakpoints, when the viewport is large enough to accomodate directional buttons outside the container.
+
+Please note that preview size does not represent viewport size and directional buttons will overflow the preview area. TODO: use test case iframe to show real behaviour in preview.
+
+<Preview>
+  <Container>
+    <p>Example container content</p>
+    <Carousel id="carousel-default" items={imageItems} />
+    <p>Example container content</p>
+  </Container>
+</Preview>
+
+## Custom options
+
+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}
+    swiperOptions={{
+      slidesPerView: 2.2,
+      breakpoints: {
+        [parseInt(breakpoint.md)]: {
+          slidesPerView: 3,
+        },
+      },
+    }}
+  />
+</Preview>
+
+## JS module reference
+
+All elements with `data-carousel` are initialized on `window.DOMContentLoaded` event.
+
+### Custom initialization example:
+
+```js
+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)",
+};
+
+<DocsTable
+  data={Object.keys(defaultConfig).map((key) => ({
+    prop: key,
+    type: typeof defaultConfig[key],
+    default: JSON.stringify(defaultConfig[key]),
+    description: descriptions[key],
+  }))}
+/>
+
+### Swiper.js methods
+
+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.
+
+```js
+const instance = document.querySelector(el).ODS_Carousel;
+/*
+  instance.method();
+*/
+```
+
+<DocsTable
+  data={[
+    {
+      prop: "destroy",
+      type: "func",
+      default: `() => {
+  this.instance.destroy(); // Swiper.js method
+}`,
+      description: "Destroy the instance - removes all listeners",
+    },
+    {
+      prop: "update",
+      type: "func",
+      default: `() => {
+  this.instance.update(); // Swiper.js method
+}`,
+      description: "Updates an instance.",
+    },
+  ]}
+/>
+
+## Props
+
+<ComponentDocs title="<Carousel />" component={Carousel} />

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

@@ -0,0 +1,261 @@
+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 {
+  SELECTOR_PREV,
+  SELECTOR_NEXT,
+  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 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>`;
+    },
+  },
+  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: SwiperOptions;
+  viewport!: HTMLElement;
+  track!: HTMLElement;
+  instance!: Swiper;
+
+  constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
+    this.element = element;
+    this.config = {
+      ...defaultConfig,
+      ...config,
+      scrollbar: {
+        ...((defaultConfig.scrollbar ?? {}) as object),
+        ...((config?.scrollbar ?? {}) as object),
+        el: this.element.querySelector(
+          SELECTOR_SCROLLBAR,
+        ) as HTMLElement | null,
+      },
+    };
+
+    this.handleSlideChange = this.handleSlideChange.bind(this);
+    this.updateTooltipPosition = this.updateTooltipPosition.bind(this);
+
+    (this.element as any).ODS_Carousel = this;
+
+    // Defer initialization to ensure DOM is ready
+    requestAnimationFrame(() => {
+      this.init();
+    });
+    return this;
+  }
+
+  init() {
+    this.getElements();
+
+    if (this.element.hasAttribute("data-swiper-options")) {
+      this.getCustomOptions();
+    }
+
+    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 = {
+      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,
+      },
+    };
+
+    this.config = {
+      ...this.config,
+      ...elements,
+    };
+  }
+
+  getCustomOptions() {
+    const passedSwiperOptions = this.element.getAttribute(
+      "data-swiper-options",
+    );
+    if (!passedSwiperOptions) return;
+    const parsedSwiperOptions = JSON.parse(passedSwiperOptions);
+
+    this.config = {
+      ...this.config,
+      ...parsedSwiperOptions,
+    };
+  }
+
+  /**
+   * 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.
+   */
+  handleSlideChange() {
+    const activeSlide = this.track.querySelector(SELECTOR_ACTIVE);
+    const nonActiveSlides = this.track.querySelectorAll(
+      `.${CLASS_SLIDE}:not(${SELECTOR_ACTIVE})`,
+    );
+
+    if (activeSlide) {
+      this.updateTooltipPosition(activeSlide as HTMLElement);
+    }
+
+    if (nonActiveSlides.length > 0) {
+      this.hideAllTooltips(nonActiveSlides);
+    }
+  }
+
+  /**
+   * Updates the position of tooltips for the given element.
+   * @param {HTMLElement} element - The element containing tooltip triggers.
+   */
+  updateTooltipPosition(element: HTMLElement) {
+    const tooltipTriggers = element.querySelectorAll(
+      '[data-tooltip-trigger="true"]',
+    );
+
+    if (tooltipTriggers.length > 0) {
+      tooltipTriggers.forEach((tooltipElement) => {
+        const tooltipId = tooltipElement.getAttribute("aria-describedby");
+        if (!tooltipId) return;
+        const tooltipDiv = document.getElementById(tooltipId);
+        if (!tooltipDiv) return;
+        const tooltipInstance = Tooltip.getInstance(tooltipDiv);
+
+        if (tooltipInstance) {
+          tooltipInstance.update();
+        }
+      });
+    }
+  }
+
+  /**
+   * Hides all tooltips for the given elements.
+   * @param {NodeListOf<HTMLElement>} elements - The elements containing tooltip triggers.
+   */
+  hideAllTooltips(elements: NodeListOf<Element>) {
+    elements.forEach((element) => {
+      const allTooltips = element.querySelectorAll(
+        '[data-tooltip-trigger="true"]',
+      );
+
+      if (allTooltips.length > 0) {
+        allTooltips.forEach((tooltipElement) => {
+          const tooltipId = tooltipElement.getAttribute("aria-describedby");
+          if (!tooltipId) return;
+          const tooltipDiv = document.getElementById(tooltipId);
+          if (!tooltipDiv) return;
+          const tooltipInstance = Tooltip.getInstance(tooltipDiv);
+
+          if (tooltipInstance) {
+            tooltipInstance.hide();
+            (tooltipElement as HTMLElement).blur();
+          }
+        });
+      }
+    });
+  }
+
+  destroy() {
+    if (this.instance) {
+      this.instance.destroy();
+    }
+  }
+
+  update() {
+    if (this.instance) {
+      this.instance.update();
+    }
+  }
+
+  static getInstance(el: HTMLElement): Carousel | null {
+    return el && (el as any).ODS_Carousel ? (el as any).ODS_Carousel : null;
+  }
+}

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React, { ReactNode, HTMLAttributes } from "react";
+import cx from "classnames";
+
+import { Icon } from "../Icon";
+
+import { CarouselItem } from "./CarouselItem";
+import CarouselStatic from "./Carousel.static";
+import {
+  CLASS_ROOT,
+  CLASS_VIEWPORT_WRAPPER,
+  CLASS_VIEWPORT,
+  CLASS_NEXT,
+  CLASS_PREV,
+  CLASS_DOTS,
+  CLASS_TRACK,
+  CLASS_SCROLLBAR_DRAG,
+  CLASS_SCROLLBAR,
+} from "./constants";
+import { useStatic } from "@/utils/hooks";
+
+interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+  /** Swiper.js (https://swiperjs.com/) options object */
+  swiperOptions?: Record<string, any>;
+  /** Inverse colors */
+  colorScheme?: "light" | "dark";
+  /** Carousel items */
+  items: ReactNode[];
+  className?: string;
+}
+
+const Carousel: React.FC<CarouselProps> = ({
+  className,
+  swiperOptions,
+  items,
+  colorScheme,
+  ...other
+}) => {
+  const [carouselRef] = useStatic(CarouselStatic);
+
+  const carouselItems = items.map((item, i) => (
+    <CarouselItem key={i.toString()}>{item}</CarouselItem>
+  ));
+
+  const classes = cx(CLASS_ROOT, className, {
+    "is-dark": colorScheme === "dark",
+    "is-light": colorScheme === "light",
+  });
+
+  const elementClasses = {
+    prev: cx(CLASS_PREV),
+    next: cx(CLASS_NEXT),
+    dots: cx(CLASS_DOTS, "show-md"),
+  };
+
+  return (
+    <div
+      className={classes}
+      ref={carouselRef}
+      data-carousel
+      {...(swiperOptions
+        ? { "data-swiper-options": JSON.stringify(swiperOptions) }
+        : {})}
+      {...other}
+    >
+      <div className={CLASS_VIEWPORT_WRAPPER}>
+        <div className={CLASS_VIEWPORT}>
+          <div className={CLASS_TRACK}>{carouselItems}</div>
+        </div>
+        <button
+          type="button"
+          aria-label="Naspäť"
+          className={elementClasses.prev}
+        >
+          <Icon size="medium" name="chevron-left" />
+        </button>
+        <button
+          type="button"
+          aria-label="Ďalej"
+          className={elementClasses.next}
+        >
+          <Icon size="medium" name="chevron-right" />
+        </button>
+      </div>
+
+      <div role="tablist" className={elementClasses.dots} />
+
+      <div className={cx(CLASS_SCROLLBAR, "hide-md")}>
+        <div className={CLASS_SCROLLBAR_DRAG} />
+      </div>
+    </div>
+  );
+};
+
+Carousel.displayName = "Carousel";
+
+export { Carousel };