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

package/src/components/CarouselPromotions/CarouselPromotions.mdx

@@ -0,0 +1,246 @@
+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 CarouselPromotions from './';
+import CarouselPromotionsItem from './CarouselPromotionsItem';
+
+import phones from '../../assets/images/developers/phones.png';
+
+import { defaultConfig } from './CarouselPromotions.static.js';
+import Icon from '../Icon';
+
+export const SlideExample = ({ ...props }) => (
+  <CarouselPromotionsItem
+    {...props}
+    image={<Image src={phones} alt="Two phones" />}
+    title="Online ochrana pre váš digitálny svet"
+    subtitle="Orange je tu, aby ste mohli používať internet bezpečne a bez obáv."
+  />
+);
+
+export const SlideExamplePictureTag = ({ num, ...props }) => (
+  <CarouselPromotionsItem
+    {...props}
+    image={
+      <Image
+        src={{
+          default: phones,
+          lg: phones,
+        }}
+        alt="Two phones"
+      />
+    }
+    title="Online ochrana pre váš digitálny svet"
+    subtitle="Orange je tu, aby ste mohli používať internet bezpečne a bez obáv."
+  />
+);
+
+export const imageItems = Array(4)
+  .fill()
+  .map((_, index) => (
+    <SlideExample
+      key={index.toString()}
+      num={index}
+      color={index === 0 && 'black'}
+    />
+  ));
+
+export const imageDarkItems = Array(4)
+  .fill()
+  .map((_, index) => (
+    <SlideExample key={index.toString()} color={index === 0 && 'black'} />
+  ));
+
+export const imageItemsWithHref = Array(4)
+  .fill()
+  .map((_, index) => (
+    <SlideExample
+      key={index.toString()}
+      num={index}
+      href={'#carousel-for-promotions'}
+      color={index === 0 && 'black'}
+    />
+  ));
+
+export const imageItemsWithPicture = Array(4)
+  .fill()
+  .map((_, index) => (
+    <SlideExamplePictureTag
+      key={index.toString()}
+      color={index === 0 && 'black'}
+    />
+  ));
+
+# Carousel for promotions
+
+## Light background
+
+<Preview>
+  <CarouselPromotions id="carousel-light">{imageItems}</CarouselPromotions>
+</Preview>
+
+## Dark background
+
+<Preview>
+  <CarouselPromotions isInverse id="carousel-dark">
+    {imageDarkItems}
+  </CarouselPromotions>
+</Preview>
+
+## With links
+
+You can specify a hyperlink for each slide by using the anchor tag with the `carousel-promotions__slide` class.
+
+<Preview>
+  <CarouselPromotions id="carousel-href">
+    {imageItemsWithHref}
+  </CarouselPromotions>
+</Preview>
+
+## Autoplay
+
+You can specify autoplay interval by setting the `data-interval` attribute to a value in milliseconds. The minimum value is 1000ms. If no value is provided, or the provided value is 0, null or undefined, the autoplay is disabled.
+
+Due to the nature of Glider.js and requirements for animations, each dot has an SVG automatically rendered in it's innerHTML. This happens only if the autoplay is enabled.
+When window size changes, Glider.js re-renders the whole pagination and the SVGs are re-rendered as well. This causes the countdown timer to reset.
+
+<Preview>
+  <CarouselPromotions id="carousel-autoplay" data-interval={5000}>
+    {imageItems}
+  </CarouselPromotions>
+  <br />
+  <br />
+  <CarouselPromotions isInverse id="carousel-autoplay" data-interval={5000}>
+    {imageItems}
+  </CarouselPromotions>
+</Preview>
+
+## With picture tag
+
+The carousel accepts a picture tag as a source for the image. For more information please refer to [Image component documentation](/components/image#picture-element).
+
+<Preview>
+  <CarouselPromotions id="carousel-picture-tag">
+    {imageItemsWithPicture}
+  </CarouselPromotions>
+</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),
+with an additional property `interval` which represents the scroll interval in milliseconds.
+
+<Preview>
+  <CarouselPromotions
+    id="carousel-custom-options"
+    gliderOptions={{
+      slidesToShow: 1,
+      responsive: [
+        {
+          breakpoint: parseInt(breakpoint.md),
+          settings: {
+            slidesToShow: 1.1,
+            slidesToScroll: 1,
+          },
+        },
+      ],
+    }}
+  >
+    {imageItems}
+  </CarouselPromotions>
+</Preview>
+
+## JS module reference
+
+All elements with `data-carousel-promotions` are initialized on `window.DOMContentLoaded` event.
+
+### Custom initialization example:
+
+```js
+const myCarousel = new window.ODS.modules.CarouselPromotions(element, config);
+```
+
+With autoplay:
+
+```js
+const myCarousel = new window.ODS.modules.CarouselPromotions(element, {
+  ...config,
+  interval: 5000,
+});
+```
+
+### Default config
+
+export const descriptions = {
+  arrows: 'Arrows selectors for navigation',
+  dots: 'Dots selector',
+  rewind:
+    'Allows to rewind the slider to the first slide, when the last slide is reached',
+  slidesToShow: 'Number of slides to show',
+  skipTrack: 'Skip additional wrapper for slides (track wrapper)',
+  interval:
+    'Interval for automatic slide change in milliseconds. When set to 0, null or undefined - automatic slide change is disabled. Minimum value is 1000ms.',
+};
+
+<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_CarouselPromotions;
+/*
+  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="<CarouselPromotions />" component={CarouselPromotions} />
+
+## Notes
+
+Because of lack of time, we did not implement recommended a11y corrections:
+
+- carousel dots should have [minimum 24px clickable area](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) (currently 8px)
+- autoplay is not good UX and a11y pattern according to [this](https://shouldiuseacarousel.com/)
+
+### Missing
+
+- Screenshot tests

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

@@ -0,0 +1,287 @@
+import { Swiper } from "swiper";
+import type { SwiperOptions } from "swiper/types";
+import {
+  Navigation,
+  Pagination,
+  A11y,
+  Keyboard,
+  Autoplay,
+} from "swiper/modules";
+
+import {
+  SELECTOR_DOTS,
+  SELECTOR_VIEWPORT,
+  CLASS_DOT_CIRCLE,
+  CLASS_DOT_SVG,
+  CLASS_AUTOPLAY,
+  CLASS_SHOWING_INVERTED_SLIDE,
+  CLASS_TRACK,
+  CLASS_SLIDE,
+  CLASS_DOT,
+  CLASS_ACTIVE,
+} from "./constants";
+
+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: SwiperOptions;
+  viewport!: HTMLElement;
+  instance!: Swiper;
+  interval: number = 0;
+  autoplayTimer?: NodeJS.Timeout;
+
+  constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+    this.interval = 0;
+
+    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-swiper-options")) {
+      this.getCustomOptions();
+    }
+
+    if (this.element.hasAttribute("data-interval")) {
+      this.interval = parseInt(this.element.getAttribute("data-interval")!);
+    }
+
+    const isIntervalValid = this.isIntervalValid();
+
+    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.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();
+          }
+        },
+      },
+    });
+
+    const paginationEl = this.element.querySelector(
+      SELECTOR_DOTS,
+    ) as HTMLElement | null;
+    if (paginationEl && isIntervalValid) {
+      paginationEl.addEventListener("animationend", this.autoplayAnimationEnd);
+      paginationEl.addEventListener("click", () => {
+        this.stopAutoplay();
+      });
+    }
+  }
+
+  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) {
+    if (e instanceof AnimationEvent && e.animationName === "countdown") {
+      this.scrollToNextSlide();
+    }
+  }
+
+  get isAutoplayEnabled() {
+    return this.interval > 0;
+  }
+
+  isIntervalValid(): boolean {
+    const interval = parseInt(String(this.interval));
+    return !isNaN(interval) && interval >= 1000;
+  }
+
+  scrollToNextSlide() {
+    if (!this.instance || !this.instance.slides) {
+      return;
+    }
+    const slidesCount = this.instance.slides.length;
+    if (slidesCount <= 0) {
+      return;
+    }
+    const currentSlideIndex = this.instance.activeIndex || 0;
+    this.instance.slideTo((currentSlideIndex + 1) % slidesCount);
+  }
+
+  getElements() {
+    this.viewport = this.element.querySelector(SELECTOR_VIEWPORT)!;
+
+    // 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 = {
+      pagination: {
+        ...((this.config.pagination ?? {}) as object),
+        el: paginationEl,
+        clickable: true,
+        bulletClass: CLASS_DOT,
+        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,
+    };
+  }
+
+  fixPaginationButtonType() {
+    const dots = Array.from(
+      this.element.querySelectorAll(`${SELECTOR_DOTS} > *`),
+    );
+
+    dots.forEach((dot) => (dot as HTMLElement).setAttribute("type", "button"));
+  }
+
+  static createSvgDot(): SVGSVGElement {
+    const svgNS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("class", CLASS_DOT_SVG);
+    svg.setAttribute("width", "12");
+    svg.setAttribute("height", "12");
+    svg.setAttribute("viewBox", "0 0 12 12");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("xmlns", svgNS);
+
+    const circle = document.createElementNS(svgNS, "circle");
+    circle.setAttribute("class", CLASS_DOT_CIRCLE);
+    circle.setAttribute("r", "5");
+    circle.setAttribute("cx", "6");
+    circle.setAttribute("cy", "6");
+
+    svg.appendChild(circle);
+
+    return svg;
+  }
+
+  renderSvgDotsForAnimation() {
+    const dots = Array.from(
+      this.element.querySelectorAll(`${SELECTOR_DOTS} > *`),
+    );
+
+    const svg = CarouselPromotions.createSvgDot();
+    (svg.querySelector("circle") as SVGCircleElement).style.animationDuration =
+      `${this.interval}ms`;
+
+    dots.forEach((dot) => {
+      dot.innerHTML = "";
+      dot.appendChild(svg.cloneNode(true));
+    });
+  }
+
+  destroy() {
+    if (this.instance) {
+      this.instance.destroy();
+    }
+  }
+
+  update() {
+    if (this.instance) {
+      this.instance.update();
+    }
+  }
+
+  static getInstance(el: HTMLElement): CarouselPromotions | null {
+    return el && (el as any).ODS_CarouselPromotions
+      ? (el as any).ODS_CarouselPromotions
+      : null;
+  }
+}

package/src/components/CarouselPromotions/CarouselPromotions.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import cx from "classnames";
+
+import CarouselPromotionsStatic from "./CarouselPromotions.static";
+import {
+  CLASS_ROOT,
+  CLASS_VIEWPORT_WRAPPER,
+  CLASS_VIEWPORT,
+  CLASS_NEXT,
+  CLASS_DOTS,
+  CLASS_TRACK,
+} from "./constants";
+import { useStatic } from "@/utils/hooks";
+
+interface CarouselPromotionsProps {
+  className?: string;
+  swiperOptions?: Record<string, any>;
+  colorScheme?: "light" | "dark";
+  children?: ReactNode;
+  [key: string]: any;
+}
+
+const CarouselPromotions: React.FC<CarouselPromotionsProps> = ({
+  className,
+  swiperOptions,
+  colorScheme,
+  children,
+  ...other
+}) => {
+  const [carouselRef] = useStatic(CarouselPromotionsStatic);
+
+  const classes = cx(CLASS_ROOT, className, {
+    "is-light": colorScheme === "light",
+    "is-dark": colorScheme === "dark",
+  });
+
+  const elementClasses = {
+    next: cx(CLASS_NEXT, "hide-lg"),
+    dots: cx(CLASS_DOTS),
+  };
+
+  return (
+    <div
+      className={classes}
+      ref={carouselRef}
+      data-carousel-promotions
+      {...(swiperOptions
+        ? { "data-swiper-options": JSON.stringify(swiperOptions) }
+        : {})}
+      {...other}
+    >
+      <div className={CLASS_VIEWPORT_WRAPPER}>
+        <div className={CLASS_VIEWPORT}>
+          <div className={CLASS_TRACK}>{children}</div>
+        </div>
+      </div>
+      <div role="tablist" className={elementClasses.dots} />
+    </div>
+  );
+};
+
+CarouselPromotions.displayName = "CarouselPromotions";
+
+export { CarouselPromotions };

package/src/components/CarouselPromotions/CarouselPromotionsItem.tsx

@@ -0,0 +1,53 @@
+import React, { ReactElement } from "react";
+import cx from "classnames";
+
+import {
+  CLASS_SLIDE,
+  CLASS_TITLE,
+  CLASS_IMAGE,
+  CLASS_SLIDE_CONTENT,
+} from "./constants";
+
+const CLASS_ROOT = CLASS_SLIDE;
+
+interface CarouselPromotionsItemProps {
+  className?: string;
+  href?: string;
+  image?: ReactElement;
+  subtitle?: string;
+  title?: string;
+  color?: "black";
+  [key: string]: any;
+}
+
+const CarouselPromotionsItem: React.FC<CarouselPromotionsItemProps> = ({
+  className,
+  href,
+  image,
+  title,
+  subtitle,
+  color,
+  ...other
+}) => {
+  const classes = cx(
+    CLASS_ROOT,
+    { [`${CLASS_ROOT}--black`]: color === "black" },
+    className,
+  );
+
+  const Tag = href ? "a" : "div";
+
+  return (
+    <Tag className={classes} {...other} href={href ? href : undefined}>
+      <div className={CLASS_IMAGE}>{image}</div>
+      <div className={CLASS_SLIDE_CONTENT}>
+        <h3 className={CLASS_TITLE}>{title}</h3>
+        <p>{subtitle}</p>
+      </div>
+    </Tag>
+  );
+};
+
+CarouselPromotionsItem.displayName = "CarouselPromotionsItem";
+
+export { CarouselPromotionsItem };

package/src/components/CarouselPromotions/constants.ts

@@ -0,0 +1,23 @@
+export const CLASS_ROOT = "carousel-promotions";
+
+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_TRACK = `${CLASS_ROOT}__track`;
+export const CLASS_SLIDE = `${CLASS_ROOT}__slide`;
+export const CLASS_SLIDE_CONTENT = `${CLASS_ROOT}__content`;
+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}`;
+export const SELECTOR_DOTS = `.${CLASS_DOTS}`;

package/src/components/CarouselPromotions/index.ts

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