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

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

@@ -0,0 +1,51 @@
+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",
+    );
+  });
+});

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/Carousel.mdx

@@ -0,0 +1,163 @@
+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-glider-options` attribute. The attribute accepts a JSON string representing a [Glider.js options object](https://nickpiscitelli.github.io/Glider.js/#settings)
+
+<Preview>
+  <Carousel
+    id="carousel-custom-options"
+    items={imageItems}
+    gliderOptions={{
+      slidesToShow: 2.2,
+      responsive: [
+        {
+          breakpoint: parseInt(breakpoint.md),
+          settings: {
+            slidesToShow: 3,
+            slidesToScroll: 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],
+  }))}
+/>
+
+### Glider.js methods
+
+Glider.js has it's own methods which are well documented at [Glider.js docs](https://nickpiscitelli.github.io/Glider.js/)
+
+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(); // Glider.js method
+}`,
+      description: 'Destroy the instance - removes all listeners',
+    },
+    {
+      prop: 'update',
+      type: 'func',
+      default: `() => {
+  this.instance.refresh(); // Glider.js method
+}`,
+      description: 'Updates an instance.',
+    },
+  ]}
+/>
+
+## Props
+
+<ComponentDocs title="<Carousel />" component={Carousel} />

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

@@ -0,0 +1,227 @@
+import Glider from "@lighting-beetle/glider-js";
+
+import Tooltip from "../Tooltip/Tooltip.static"; // Import the Tooltip class
+
+import {
+  SELECTOR_PREV,
+  SELECTOR_NEXT,
+  SELECTOR_DOTS,
+  SELECTOR_VIEWPORT,
+  SELECTOR_TRACK,
+} 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,
+  },
+  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",
+  },
+};
+
+export default class Carousel {
+  element: HTMLElement;
+  config: CarouselConfig & {
+    arrows: {
+      prev: HTMLElement | null;
+      next: HTMLElement | null;
+    };
+    dots: HTMLElement | null;
+  };
+  viewport!: HTMLElement;
+  track!: HTMLElement;
+  instance!: any;
+
+  constructor(element: HTMLElement, config?: Partial<CarouselConfig>) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config } as any;
+
+    this.fixPaginationButtonType = this.fixPaginationButtonType.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.updateTooltipPosition = this.updateTooltipPosition.bind(this);
+
+    (this.element as any).ODS_Carousel = this;
+
+    this.init();
+    return this;
+  }
+
+  init() {
+    this.getElements();
+
+    if (this.element.hasAttribute("data-glider-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);
+  }
+
+  getElements() {
+    this.viewport = this.element.querySelector(SELECTOR_VIEWPORT)!;
+    this.track = this.viewport.querySelector(SELECTOR_TRACK)!;
+
+    const elements = {
+      arrows: {
+        prev: this.element.querySelector(SELECTOR_PREV),
+        next: this.element.querySelector(SELECTOR_NEXT),
+      },
+      dots: this.element.querySelector(SELECTOR_DOTS),
+    };
+
+    // @ts-expect-error config is not typed to accept HTMLElement | null
+    this.config = {
+      ...this.config,
+      ...elements,
+    };
+  }
+
+  getCustomOptions() {
+    const passedGliderOptions = this.element.getAttribute(
+      "data-glider-options",
+    );
+    if (!passedGliderOptions) return;
+    const parsedGliderOptions = JSON.parse(passedGliderOptions);
+
+    this.config = {
+      ...this.config,
+      ...parsedGliderOptions,
+    };
+  }
+
+  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.
+   * Updates the tooltip position for the active slide and hides tooltips for non-active slides.
+   */
+  handleScroll() {
+    const activeSlide = this.track.querySelector(".active");
+    const nonActiveSlides = this.track.querySelectorAll(
+      ".glider-slide:not(.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() {
+    this.instance.destroy();
+  }
+
+  update() {
+    this.instance.refresh();
+  }
+
+  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,93 @@
+"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_BLINDS,
+  CLASS_NEXT,
+  CLASS_PREV,
+  CLASS_DOTS,
+  CLASS_TRACK,
+} from "./constants";
+import { useStatic } from "@/utils/hooks";
+
+interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+  /** Glider.js (https://nickpiscitelli.github.io/Glider.js/) options object */
+  gliderOptions?: Record<string, any>;
+  /** Inverse colors */
+  colorScheme?: "light" | "dark";
+  /** Carousel items */
+  items: ReactNode[];
+  className?: string;
+}
+
+const Carousel: React.FC<CarouselProps> = ({
+  className,
+  gliderOptions,
+  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
+      {...(gliderOptions
+        ? { "data-glider-options": JSON.stringify(gliderOptions) }
+        : {})}
+      {...other}
+    >
+      <div className={CLASS_VIEWPORT_WRAPPER}>
+        <div className={CLASS_VIEWPORT}>
+          <div className={CLASS_TRACK}>{carouselItems}</div>
+        </div>
+        <div className={CLASS_BLINDS}></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>
+  );
+};
+
+Carousel.displayName = "Carousel";
+
+export { Carousel };

package/src/components/Carousel/CarouselItem.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+import cx from "classnames";
+
+import { CLASS_SLIDE } from "./constants";
+
+const CLASS_ROOT = CLASS_SLIDE;
+
+interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CarouselItem: React.FC<CarouselItemProps> = ({
+  className,
+  children,
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
+};
+
+CarouselItem.displayName = "CarouselItem";
+
+export { CarouselItem };

package/src/components/Carousel/constants.ts

@@ -0,0 +1,18 @@
+export const CLASS_ROOT = 'carousel';
+
+export const CLASS_WRAPPER = `${CLASS_ROOT}`;
+export const CLASS_VIEWPORT_WRAPPER = `${CLASS_ROOT}__viewport-wrapper`;
+export const CLASS_VIEWPORT = `${CLASS_ROOT}__viewport`;
+export const CLASS_BLINDS = `${CLASS_ROOT}__blinds`;
+export const CLASS_TRACK = `${CLASS_ROOT}__track`;
+export const CLASS_SLIDE = `${CLASS_ROOT}__slide`;
+export const CLASS_PREV = `${CLASS_ROOT}__prev`;
+export const CLASS_NEXT = `${CLASS_ROOT}__next`;
+export const CLASS_DOTS = `${CLASS_ROOT}__pagination`;
+
+export const SELECTOR_WRAPPER = `.${CLASS_WRAPPER}`;
+export const SELECTOR_VIEWPORT = `.${CLASS_VIEWPORT}`;
+export const SELECTOR_TRACK = `.${CLASS_TRACK}`;
+export const SELECTOR_PREV = `.${CLASS_PREV}`;
+export const SELECTOR_NEXT = `.${CLASS_NEXT}`;
+export const SELECTOR_DOTS = `.${CLASS_DOTS}`;

package/src/components/Carousel/index.ts

@@ -0,0 +1,4 @@
+import "./styles/style.scss";
+
+export { Carousel } from "./Carousel";
+export { CarouselItem } from "./CarouselItem";