@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

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

@@ -26,6 +26,7 @@ import {
   SELECTOR_ACTIVE,
   CLASS_SLIDE_NEXT,
   CLASS_SLIDE_PREV,
+  CLASS_BLEED_RIGHT,
 } from "./constants";
 
 export const defaultConfig: SwiperOptions = {
@@ -124,6 +125,11 @@ export default class Carousel {
         slideChange: this.handleSlideChange,
       },
     });
+
+    // Check if this is a bleed-right carousel and adjust after initialization
+    if (this.element.classList.contains(CLASS_BLEED_RIGHT)) {
+      this.adjustConfigForBleedRight();
+    }
   }
 
   getElements() {
@@ -148,7 +154,7 @@ export default class Carousel {
         ...((this.config.pagination ?? {}) as object),
         el: paginationEl,
         clickable: true,
-        bulletClass: "carousel__pagination-item",
+        bulletClass: CLASS_DOT,
         bulletActiveClass: CLASS_ACTIVE,
       },
     };
@@ -172,6 +178,66 @@ export default class Carousel {
     };
   }
 
+  adjustConfigForBleedRight() {
+    // For bleed-right variant, calculate the exact bleed amount dynamically
+    // This allows the last slide to scroll back to align with container edge
+
+    // Wait for next frame to ensure container has final dimensions
+    requestAnimationFrame(() => {
+      // Find the container element
+      const container = this.element.closest(".container") as HTMLElement;
+      if (!container || !this.instance) return;
+
+      // Calculate the actual bleed amount with limits to match CSS
+      const containerWidth = container.offsetWidth;
+      const halfViewportWidth = window.innerWidth / 2;
+      const halfContainerWidth = containerWidth / 2;
+      let bleedAmount = halfViewportWidth - halfContainerWidth;
+
+      // On very large screens (above 2K), stop the bleeding effect entirely
+      if (window.innerWidth >= 2560) {
+        bleedAmount = 0;
+      }
+
+      // Only add offset if there's actual bleeding (positive value)
+      if (bleedAmount > 0) {
+        // Update the Swiper configuration
+        this.instance.params.slidesOffsetAfter = bleedAmount;
+        this.instance.update();
+      } else {
+        // Remove offset if no bleeding should occur
+        this.instance.params.slidesOffsetAfter = 0;
+        this.instance.update();
+      }
+
+      // Also listen for window resize to recalculate
+      const handleResize = () => {
+        if (this.instance && container) {
+          const newContainerWidth = container.offsetWidth;
+          const newHalfViewportWidth = window.innerWidth / 2;
+          const newHalfContainerWidth = newContainerWidth / 2;
+          let newBleedAmount = newHalfViewportWidth - newHalfContainerWidth;
+
+          // Apply same limits as above
+          if (window.innerWidth >= 2560) {
+            newBleedAmount = 0;
+          }
+
+          if (newBleedAmount > 0) {
+            this.instance.params.slidesOffsetAfter = newBleedAmount;
+          } else {
+            this.instance.params.slidesOffsetAfter = 0;
+          }
+          this.instance.update();
+        }
+      };
+
+      // Remove any existing resize listener to avoid duplicates
+      window.removeEventListener("resize", handleResize);
+      window.addEventListener("resize", handleResize);
+    });
+  }
+
   /**
    * Handles the slide change event on the carousel.
    * Updates the tooltip position for the active slide and hides tooltips for non-active slides.

package/src/components/Carousel/Carousel.tsx

@@ -27,6 +27,10 @@ interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
   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;
 }
 
@@ -35,6 +39,8 @@ const Carousel: React.FC<CarouselProps> = ({
   swiperOptions,
   items,
   colorScheme,
+  showScrollbar = false,
+  bleedRight = false,
   ...other
 }) => {
   const [carouselRef] = useStatic(CarouselStatic);
@@ -46,21 +52,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 +86,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

@@ -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,28 @@
   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 {
+  .carousel__viewport {
+    // Extend the viewport to the right edge of the screen
+    width: calc(100% + 50vw - 50%);
+    margin-right: 0;
+
+    // Keep left margin for container alignment
+    @include breakpoint.get("md") {
+      margin-left: convert.to-rem(50px);
+    }
+
+    // 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;
     }