@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -26,6 +26,8 @@ import {
   SELECTOR_ACTIVE,
   CLASS_SLIDE_NEXT,
   CLASS_SLIDE_PREV,
+  CLASS_BLEED_RIGHT,
+  CLASS_VIEWPORT_WRAPPER,
 } from "./constants";
 
 export const defaultConfig: SwiperOptions = {
@@ -48,6 +50,7 @@ export const defaultConfig: SwiperOptions = {
     enabled: true,
     horizontalClass: CLASS_SCROLLBAR_HORIZONTAL,
     dragClass: CLASS_SCROLLBAR_DRAG,
+    hide: false,
   },
   slidesPerView: 1.2,
   a11y: {
@@ -83,6 +86,7 @@ export default class Carousel {
   viewport!: HTMLElement;
   track!: HTMLElement;
   instance!: Swiper;
+  carouselId?: string;
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
     this.element = element;
@@ -103,7 +107,6 @@ export default class Carousel {
 
     (this.element as any).ODS_Carousel = this;
 
-    // Defer initialization to ensure DOM is ready
     requestAnimationFrame(() => {
       this.init();
     });
@@ -119,18 +122,110 @@ export default class Carousel {
 
     this.instance = new Swiper(this.viewport, {
       ...this.config,
+      enabled: false,
       modules: [Navigation, Pagination, Scrollbar, A11y, Keyboard],
       on: {
         slideChange: this.handleSlideChange,
+        slideChangeTransitionEnd: () => {
+          this.updateExternalControlsState();
+        },
       },
     });
+
+    this.updateCarouselEnabledState();
+
+    if (this.element.classList.contains(CLASS_BLEED_RIGHT)) {
+      this.adjustConfigForBleedRight();
+      this.fixBleedRightScrollbar();
+    }
+
+    if (this.instance && typeof this.instance.on === "function") {
+      this.instance.on("resize", () => {
+        this.updateCarouselEnabledState();
+      });
+    }
+
+    this.initExternalControls();
+  }
+
+  /**
+   * Fix scrollbar drag size and position for bleed-right carousels.
+   * Overrides Swiper's default scrollbar calculations to work correctly with bleed-right layouts.
+   */
+  fixBleedRightScrollbar() {
+    const updateScrollbar = () => {
+      const viewportWrapper = this.element.querySelector(
+        `.${CLASS_VIEWPORT_WRAPPER}`,
+      ) as HTMLElement;
+      const scrollbar = this.instance?.scrollbar;
+
+      if (!viewportWrapper || !scrollbar || !scrollbar.dragEl) {
+        return;
+      }
+
+      const slidesCount = this.instance.slides.length;
+      const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
+
+      // Only show scrollbar when there are more slides than visible at once
+      if (slidesCount > slidesPerView) {
+        if (scrollbar.el) {
+          scrollbar.el.style.display = "";
+        }
+
+        const scrollbarWidth = scrollbar.el.offsetWidth;
+
+        // Calculate drag handle size based on the ratio of visible slides to total slides
+        // Example: 3 visible out of 5 total = 60% of scrollbar width
+        const visibleRatio = slidesPerView / slidesCount;
+        const dragSize = visibleRatio * scrollbarWidth;
+        // Ensure minimum 30px for usability
+        const finalDragSize = Math.max(dragSize, 30);
+
+        scrollbar.dragEl.style.width = `${finalDragSize}px`;
+        scrollbar.dragEl.style.display = "";
+
+        // Calculate scrollbar position based on carousel's actual scroll position
+        const maxScrollableSlides = slidesCount - slidesPerView;
+        const currentTranslate = Math.abs(this.instance.translate || 0);
+        const slideSize = this.instance.slidesSizesGrid?.[0] || 0;
+
+        // Determine how far we've scrolled as a ratio (0 = start, 1 = end)
+        const maxTranslateValue = maxScrollableSlides * slideSize;
+        const scrollRatio =
+          maxTranslateValue > 0
+            ? Math.min(currentTranslate / maxTranslateValue, 1)
+            : 0;
+
+        // Position scrollbar drag handle proportionally
+        const maxDragTranslate = scrollbarWidth - finalDragSize;
+        const dragTranslateX = scrollRatio * maxDragTranslate;
+
+        scrollbar.dragEl.style.transform = `translate3d(${dragTranslateX}px, 0, 0)`;
+      } else {
+        // Hide scrollbar when all slides are visible (no scrolling needed)
+        if (scrollbar.el) {
+          scrollbar.el.style.display = "none";
+        }
+      }
+    };
+
+    // Initial update (double requestAnimationFrame ensures DOM is fully ready)
+    requestAnimationFrame(() => {
+      requestAnimationFrame(updateScrollbar);
+    });
+
+    // Keep scrollbar in sync with carousel state changes
+    this.instance.on("progress", updateScrollbar);
+    this.instance.on("slideChange", updateScrollbar);
+    this.instance.on("resize", updateScrollbar);
+    this.instance.on("update", updateScrollbar);
+    this.instance.on("setTranslate", updateScrollbar);
   }
 
   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;
@@ -148,7 +243,7 @@ export default class Carousel {
         ...((this.config.pagination ?? {}) as object),
         el: paginationEl,
         clickable: true,
-        bulletClass: "carousel__pagination-item",
+        bulletClass: CLASS_DOT,
         bulletActiveClass: CLASS_ACTIVE,
       },
     };
@@ -173,9 +268,94 @@ export default class Carousel {
   }
 
   /**
-   * 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.
+   * Enable or disable the carousel based on whether content requires scrolling.
+   * Carousel is enabled only when there are more slides than can fit in the current viewport.
+   */
+  private updateCarouselEnabledState(): void {
+    if (!this.instance || !this.instance.params) return;
+
+    const slidesCount = this.instance.slides.length;
+    const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
+
+    if (slidesCount > slidesPerView) {
+      this.instance.enable();
+    } else {
+      this.instance.disable();
+    }
+  }
+
+  /**
+   * Calculate how much the carousel should extend beyond the container (bleed effect).
+   * On screens 2560px and wider, the bleed effect is disabled.
+   */
+  private calculateBleedAmount(container: HTMLElement): number {
+    const containerWidth = container.offsetWidth;
+    const halfViewportWidth = window.innerWidth / 2;
+    const halfContainerWidth = containerWidth / 2;
+    let bleedAmount = halfViewportWidth - halfContainerWidth;
+
+    if (window.innerWidth >= 2560) {
+      bleedAmount = 0;
+    }
+
+    return Math.max(bleedAmount, 0);
+  }
+
+  /**
+   * Apply the bleed offset to extend the carousel beyond the container edge.
+   * Only applies when content exceeds the visible area.
+   */
+  private applyBleedOffset(
+    viewportWrapper: HTMLElement,
+    bleedAmount: number,
+  ): void {
+    // Safety check: ensure instance and params are initialized
+    if (!this.instance || !this.instance.params) {
+      return;
+    }
+
+    const visibleWidth = viewportWrapper.clientWidth;
+    const totalWidth = this.track.scrollWidth;
+    const contentFitsWithoutScroll = totalWidth <= visibleWidth + 5;
+
+    if (bleedAmount > 0 && !contentFitsWithoutScroll) {
+      this.instance.params.slidesOffsetAfter = bleedAmount;
+    } else {
+      this.instance.params.slidesOffsetAfter = 0;
+    }
+
+    this.instance.update();
+  }
+
+  /**
+   * Configure bleed-right carousel to extend beyond the container edge.
+   * Calculates the exact offset needed for the carousel to reach the viewport edge
+   * while keeping the last slide aligned with the container edge when scrolled to the end.
+   */
+  adjustConfigForBleedRight() {
+    requestAnimationFrame(() => {
+      const container = this.element.closest(".container") as HTMLElement;
+      if (!container || !this.instance) return;
+
+      const viewportWrapper = this.element.querySelector(
+        `.${CLASS_VIEWPORT_WRAPPER}`,
+      ) as HTMLElement;
+      if (!viewportWrapper) return;
+
+      const bleedAmount = this.calculateBleedAmount(container);
+      this.applyBleedOffset(viewportWrapper, bleedAmount);
+
+      // Recalculate bleed on window resize
+      this.instance.on("resize", () => {
+        const newBleedAmount = this.calculateBleedAmount(container);
+        this.applyBleedOffset(viewportWrapper, newBleedAmount);
+      });
+    });
+  }
+
+  /**
+   * Handle carousel slide change events.
+   * Updates tooltip positions and accessibility states for the active slide.
    */
   handleSlideChange() {
     const activeSlide = this.track.querySelector(SELECTOR_ACTIVE);
@@ -190,11 +370,12 @@ export default class Carousel {
     if (nonActiveSlides.length > 0) {
       this.hideAllTooltips(nonActiveSlides);
     }
+
+    this.updateExternalControlsState();
   }
 
   /**
-   * Updates the position of tooltips for the given element.
-   * @param {HTMLElement} element - The element containing tooltip triggers.
+   * Update tooltip positions for elements within a slide.
    */
   updateTooltipPosition(element: HTMLElement) {
     const tooltipTriggers = element.querySelectorAll(
@@ -217,8 +398,7 @@ export default class Carousel {
   }
 
   /**
-   * Hides all tooltips for the given elements.
-   * @param {NodeListOf<HTMLElement>} elements - The elements containing tooltip triggers.
+   * Hide all tooltips for non-active slides.
    */
   hideAllTooltips(elements: NodeListOf<Element>) {
     elements.forEach((element) => {
@@ -243,7 +423,178 @@ export default class Carousel {
     });
   }
 
+  /**
+   * Initialize external navigation controls that reference this carousel via data attributes.
+   * Supports prev/next buttons placed anywhere in the DOM.
+   */
+  initExternalControls() {
+    const carouselId = this.element.dataset.carouselId || this.element.id;
+
+    if (!carouselId) {
+      return;
+    }
+
+    this.carouselId = carouselId;
+
+    const controlElements = document.querySelectorAll(
+      `[data-carousel-controls="${carouselId}"]`,
+    );
+
+    controlElements.forEach((control) => {
+      const htmlControl = control as HTMLElement;
+
+      if (htmlControl.hasAttribute("data-carousel-initialized")) {
+        return;
+      }
+
+      if ((htmlControl as any)._carouselClickHandler) {
+        htmlControl.removeEventListener(
+          "click",
+          (htmlControl as any)._carouselClickHandler,
+        );
+      }
+
+      const action = htmlControl.dataset.carouselAction;
+
+      const clickHandler = (e: Event) => {
+        e.preventDefault();
+        if (htmlControl.hasAttribute("disabled")) {
+          return;
+        }
+        if (action === "next") {
+          this.slideNext();
+        } else if (action === "prev") {
+          this.slidePrev();
+        }
+      };
+
+      if (action === "next" || action === "prev") {
+        htmlControl.addEventListener("click", clickHandler);
+
+        htmlControl.setAttribute(
+          "aria-label",
+          action === "next"
+            ? this.config.a11y?.nextSlideMessage || "Nasledujúci snímok"
+            : this.config.a11y?.prevSlideMessage || "Predchádzajúci snímok",
+        );
+        htmlControl.setAttribute("type", "button");
+
+        (htmlControl as any)._carouselClickHandler = clickHandler;
+      }
+
+      htmlControl.setAttribute("data-carousel-initialized", "true");
+    });
+
+    this.updateExternalControlsState();
+  }
+
+  /**
+   * Update the disabled state of external navigation controls.
+   * Controls are disabled at the start/end of the carousel based on slide position.
+   */
+  updateExternalControlsState() {
+    if (!this.carouselId || !this.instance) {
+      return;
+    }
+
+    const isAtStart = this.instance.isBeginning;
+    const slidesCount = this.instance.slides.length;
+    const slidesPerView = this.instance.params.slidesPerView as number;
+    const activeIndex = this.instance.activeIndex;
+
+    // Check if we've reached the end (when there are no more slides to scroll to)
+    const isAtEnd = activeIndex + slidesPerView >= slidesCount;
+
+    const prevControls = document.querySelectorAll(
+      `[data-carousel-controls="${this.carouselId}"][data-carousel-action="prev"]`,
+    );
+
+    const nextControls = document.querySelectorAll(
+      `[data-carousel-controls="${this.carouselId}"][data-carousel-action="next"]`,
+    );
+
+    prevControls.forEach((control) => {
+      const htmlControl = control as HTMLElement;
+      if (isAtStart) {
+        htmlControl.setAttribute("disabled", "true");
+        htmlControl.setAttribute("aria-disabled", "true");
+        htmlControl.style.cursor = "not-allowed";
+      } else {
+        htmlControl.removeAttribute("disabled");
+        htmlControl.setAttribute("aria-disabled", "false");
+        htmlControl.style.cursor = "pointer";
+      }
+    });
+
+    nextControls.forEach((control) => {
+      const htmlControl = control as HTMLElement;
+      if (isAtEnd) {
+        htmlControl.setAttribute("disabled", "true");
+        htmlControl.setAttribute("aria-disabled", "true");
+        htmlControl.style.cursor = "not-allowed";
+      } else {
+        htmlControl.removeAttribute("disabled");
+        htmlControl.setAttribute("aria-disabled", "false");
+        htmlControl.style.cursor = "pointer";
+      }
+    });
+  }
+
+  /**
+   * Navigate to the next slide.
+   */
+  slideNext() {
+    if (this.instance) {
+      this.instance.slideNext();
+    }
+  }
+
+  /**
+   * Navigate to the previous slide.
+   */
+  slidePrev() {
+    if (this.instance) {
+      this.instance.slidePrev();
+    }
+  }
+
+  /**
+   * Get the current active slide index.
+   */
+  getActiveIndex(): number {
+    return this.instance ? this.instance.activeIndex : 0;
+  }
+
+  /**
+   * Register a callback for slide change events.
+   */
+  onSlideChange(callback: (activeIndex: number) => void) {
+    if (this.instance) {
+      this.instance.on("slideChange", () => {
+        callback(this.instance.activeIndex);
+      });
+    }
+  }
+
   destroy() {
+    // Clean up external controls
+    if (this.carouselId) {
+      const controlElements = document.querySelectorAll(
+        `[data-carousel-controls="${this.carouselId}"]`,
+      );
+      controlElements.forEach((control) => {
+        const htmlControl = control as HTMLElement;
+        if ((htmlControl as any)._carouselClickHandler) {
+          htmlControl.removeEventListener(
+            "click",
+            (htmlControl as any)._carouselClickHandler,
+          );
+          delete (htmlControl as any)._carouselClickHandler;
+        }
+        htmlControl.removeAttribute("data-carousel-initialized");
+      });
+    }
+
     if (this.instance) {
       this.instance.destroy();
     }
@@ -258,4 +609,14 @@ export default class Carousel {
   static getInstance(el: HTMLElement): Carousel | null {
     return el && (el as any).ODS_Carousel ? (el as any).ODS_Carousel : null;
   }
+
+  /**
+   * Find a carousel instance by its ID or data-carousel-id attribute.
+   */
+  static getInstanceById(carouselId: string): Carousel | null {
+    const element =
+      document.querySelector(`[data-carousel-id="${carouselId}"]`) ||
+      document.getElementById(carouselId);
+    return element ? this.getInstance(element as HTMLElement) : null;
+  }
 }

package/src/components/Carousel/Carousel.tsx

@@ -23,10 +23,12 @@ 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[];
+  /** Always show scrollbar and hide dots */
+  showScrollbar?: boolean;
+  /** Make carousel bleed to the right edge of screen while keeping left aligned with container */
+  bleedRight?: boolean;
   className?: string;
 }
 
@@ -34,7 +36,8 @@ const Carousel: React.FC<CarouselProps> = ({
   className,
   swiperOptions,
   items,
-  colorScheme,
+  showScrollbar = false,
+  bleedRight = false,
   ...other
 }) => {
   const [carouselRef] = useStatic(CarouselStatic);
@@ -44,23 +47,33 @@ const Carousel: React.FC<CarouselProps> = ({
   ));
 
   const classes = cx(CLASS_ROOT, className, {
-    "is-dark": colorScheme === "dark",
-    "is-light": colorScheme === "light",
+    [`${CLASS_ROOT}--scrollbar`]: showScrollbar,
+    [`${CLASS_ROOT}--bleed-right`]: bleedRight,
   });
 
   const elementClasses = {
     prev: cx(CLASS_PREV),
     next: cx(CLASS_NEXT),
-    dots: cx(CLASS_DOTS, "show-md"),
+    dots: cx(CLASS_DOTS, showScrollbar ? "hide" : "show-md"),
   };
 
+  // Only override pagination when showScrollbar is true
+  const customSwiperOptions = showScrollbar
+    ? {
+        pagination: {
+          enabled: false,
+        },
+        ...swiperOptions,
+      }
+    : swiperOptions;
+
   return (
     <div
       className={classes}
       ref={carouselRef}
       data-carousel
-      {...(swiperOptions
-        ? { "data-swiper-options": JSON.stringify(swiperOptions) }
+      {...(showScrollbar || swiperOptions
+        ? { "data-swiper-options": JSON.stringify(customSwiperOptions) }
         : {})}
       {...other}
     >
@@ -68,25 +81,29 @@ const Carousel: React.FC<CarouselProps> = ({
         <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>
+        {showScrollbar ? null : (
+          <>
+            <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} />
+      {!showScrollbar && <div role="tablist" className={elementClasses.dots} />}
 
-      <div className={cx(CLASS_SCROLLBAR, "hide-md")}>
+      <div className={cx(CLASS_SCROLLBAR, !showScrollbar && "hide-md")}>
         <div className={CLASS_SCROLLBAR_DRAG} />
       </div>
     </div>

package/src/components/Carousel/constants.ts

@@ -14,6 +14,8 @@ export const CLASS_SCROLLBAR = `${CLASS_ROOT}__scrollbar`;
 export const CLASS_SCROLLBAR_HORIZONTAL = `${CLASS_ROOT}__scrollbar-horizontal`;
 export const CLASS_SCROLLBAR_DRAG = `${CLASS_ROOT}__scrollbar-drag`;
 export const CLASS_ACTIVE = "is-active";
+export const CLASS_SCROLLBAR_VARIANT = `${CLASS_ROOT}--scrollbar`;
+export const CLASS_BLEED_RIGHT = `${CLASS_ROOT}--bleed-right`;
 
 export const SELECTOR_VIEWPORT = `.${CLASS_VIEWPORT}`;
 export const SELECTOR_TRACK = `.${CLASS_TRACK}`;

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

@@ -25,7 +25,6 @@ $breakout-buttons-breakpoints: (
 );
 
 $viewport-horizontal-spacing: (
-  "default": -#{space.get("small")},
   // button dimension + space - slide padding,
-  "md": convert.to-rem(50px),
+  "md": convert.to-rem(50px)
 );

package/src/components/Carousel/styles/mixins.scss

@@ -18,7 +18,7 @@
   flex-direction: column;
   margin: 0 auto;
   position: relative;
-  margin-bottom: config.$space;
+  margin-bottom: space.get("large");
 }
 
 @mixin viewport-wrapper {
@@ -43,6 +43,11 @@
     }
   }
 
+  .carousel--scrollbar & {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
   @include breakpoint.get("sm", "down") {
     padding-bottom: math.div(config.$space, 2);
   }
@@ -88,15 +93,19 @@
       margin-right: -#{convert.to-rem(60px)};
     }
   }
+
+  &.carousel--bleed-right {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 @mixin slide-base {
   display: flex;
   flex-direction: column;
   max-width: 100%;
-  // width: auto !important;
   flex: 0 0 auto;
-  padding: 0 math.div(config.$space, 2);
+  padding: 0 convert.to-rem(20px) 0 0;
   user-select: none;
 
   > * {
@@ -193,4 +202,34 @@
   opacity: 1;
   background-color: var(--color-fill-contrast);
   border-radius: 99px;
+  height: convert.to-rem(6px);
+}
+
+@mixin scrollbar-variant {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+@mixin bleed-right-variant {
+  // Allow overflow on the left side at the carousel container level
+  overflow: visible;
+
+  .carousel__viewport-wrapper {
+    // Allow overflow from viewport
+    overflow: visible;
+  }
+
+  .carousel__viewport {
+    // Extend the viewport to the right edge of the screen
+    width: calc(100% + 50vw - 50%);
+    margin-right: 0;
+    margin-left: 0 !important; // Don't add left margin - let content flow naturally
+    overflow: visible !important; // Allow content to overflow on left side
+    overflow-y: hidden; // Still hide vertical overflow
+
+    // On very large screens (above 2K), stop the bleeding effect entirely
+    @media (min-width: 2560px) {
+      width: 100%;
+    }
+  }
 }

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

@@ -5,6 +5,14 @@
   .carousel {
     @include mixins.base;
 
+    &--scrollbar {
+      @include mixins.scrollbar-variant;
+    }
+
+    &--bleed-right {
+      @include mixins.bleed-right-variant;
+    }
+
     .container > & {
       @include mixins.base-breakout-buttons;
     }