@orangesk/orange-design-system 2.0.0-beta.35 → 2.0.0-beta.36

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

@@ -92,6 +92,7 @@ export default class Carousel {
   track!: HTMLElement;
   instance!: Swiper;
   carouselId?: string;
+  private resizeObserver?: ResizeObserver;
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
     this.element = element;
@@ -153,6 +154,8 @@ export default class Carousel {
       });
     }
 
+    this.observeVisibilityChanges();
+
     this.initExternalControls();
 
     // Trigger a final update to notify listeners (like SameHeight) that carousel is ready
@@ -175,6 +178,29 @@ export default class Carousel {
     });
   }
 
+  private observeVisibilityChanges(): void {
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = new ResizeObserver(() => {
+      if (!this.instance || !this.viewport) {
+        return;
+      }
+
+      if (this.viewport.clientWidth <= 0) {
+        return;
+      }
+
+      this.instance.update();
+      this.updateCarouselEnabledState();
+      this.instance.scrollbar?.updateSize();
+    });
+
+    this.resizeObserver.observe(this.viewport);
+  }
+
   /**
    * Fix scrollbar drag size and position for bleed-right carousels.
    * Overrides Swiper's default scrollbar calculations to work correctly with bleed-right layouts.
@@ -301,6 +327,13 @@ export default class Carousel {
       this.instance.disable();
     }
 
+    const scrollbarEl = this.element.querySelector(
+      SELECTOR_SCROLLBAR,
+    ) as HTMLElement | null;
+    if (scrollbarEl) {
+      scrollbarEl.style.display = this.instance.enabled ? "" : "none";
+    }
+
     this.applyTrackMarginCompensation();
   }
 
@@ -641,6 +674,13 @@ export default class Carousel {
     if (this.instance) {
       this.instance.destroy();
     }
+
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = undefined;
+
+    if ((this.element as any).ODS_Carousel === this) {
+      delete (this.element as any).ODS_Carousel;
+    }
   }
 
   update() {

package/src/components/Carousel/tests/Carousel.static.test.jsx

@@ -8,14 +8,22 @@ import Carousel from "../Carousel.static";
 // Mock Swiper
 vi.mock("swiper", () => ({
   Swiper: vi.fn().mockImplementation(function () {
+    let enabled = true;
     return {
       slideNext: vi.fn(),
       slidePrev: vi.fn(),
       destroy: vi.fn(),
       update: vi.fn(),
       on: vi.fn(),
-      enable: vi.fn(),
-      disable: vi.fn(),
+      enable: vi.fn(() => {
+        enabled = true;
+      }),
+      disable: vi.fn(() => {
+        enabled = false;
+      }),
+      get enabled() {
+        return enabled;
+      },
       activeIndex: 0,
       isBeginning: true,
       isEnd: false,
@@ -23,6 +31,10 @@ vi.mock("swiper", () => ({
       params: {
         slidesPerView: 1,
       },
+      scrollbar: {
+        updateSize: vi.fn(),
+        el: document.createElement("div"),
+      },
     };
   }),
 }));
@@ -47,14 +59,23 @@ describe("Carousel Static - External Controls", () => {
     vi.clearAllMocks();
 
     // Create mock Swiper instance
+    let enabled = true;
+
     mockSwiperInstance = {
       slideNext: vi.fn(),
       slidePrev: vi.fn(),
       destroy: vi.fn(),
       update: vi.fn(),
       on: vi.fn(),
-      enable: vi.fn(),
-      disable: vi.fn(),
+      enable: vi.fn(() => {
+        enabled = true;
+      }),
+      disable: vi.fn(() => {
+        enabled = false;
+      }),
+      get enabled() {
+        return enabled;
+      },
       activeIndex: 0,
       isBeginning: true,
       isEnd: false,
@@ -62,6 +83,10 @@ describe("Carousel Static - External Controls", () => {
       params: {
         slidesPerView: 1,
       },
+      scrollbar: {
+        updateSize: vi.fn(),
+        el: document.createElement("div"),
+      },
     };
 
     Swiper.mockImplementation(function () {

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -13,6 +13,7 @@ import {
   CLASS_NAV_BUTTON,
   CLASS_NAV_DROPDOWN,
   CLASS_NAV_ICON,
+  CLASS_NAV_ICON_NO_GAP_MD_DOWN,
   CLASS_NAV_ITEM,
   CLASS_NAV_VERTICAL,
   CLASS_NAV_ITEM_MAIN,
@@ -158,7 +159,10 @@ export const MegamenuBlog = ({
                     width={24}
                     height={24}
                     name="user"
-                    className={CLASS_NAV_ICON}
+                    className={cx(
+                      CLASS_NAV_ICON,
+                      CLASS_NAV_ICON_NO_GAP_MD_DOWN,
+                    )}
                     aria-hidden="true"
                   />
                   <span className={CLASS_HIDE_MD_DOWN}>Môj Orange</span>

package/src/components/Megamenu/constants.ts

@@ -19,6 +19,7 @@ export const CLASS_NAV_LINK_NO_LINE = `${CLASS_ROOT}__nav-link--no-line`;
 export const CLASS_NAV_CART_ICON = `${CLASS_ROOT}__nav-cart-icon`;
 export const CLASS_NAV_SPACER = `${CLASS_ROOT}__nav-spacer`;
 export const CLASS_NAV_ICON = `${CLASS_ROOT}__nav-icon`;
+export const CLASS_NAV_ICON_NO_GAP_MD_DOWN = `${CLASS_NAV_ICON}--no-gap-md-down`;
 export const CLASS_NAV_LOGO = `${CLASS_ROOT}__nav-logo`;
 export const CLASS_NAV_BUTTON = `${CLASS_ROOT}__nav-button`;
 export const CLASS_NAV_BUTTON_INDICATOR = `${CLASS_ROOT}__nav-button--indicator`;

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

@@ -445,6 +445,12 @@
   margin-right: convert.to-rem(5px);
 }
 
+@mixin nav-icon-no-gap-md-down {
+  @include breakpoint.get("md", "down") {
+    margin-right: 0;
+  }
+}
+
 @mixin nav-spacer {
   display: flex;
   flex: 1 0 1px;
@@ -637,8 +643,16 @@
   margin-bottom: convert.to-rem(40px);
   text-decoration: none !important;
 
+  &:hover {
+    color: var(--color-text-inverse) !important;
+    background-color: var(--color-fill-contrast) !important;
+    border-color: transparent !important;
+  }
+
   &:active {
-    color: color.$black !important;
+    color: var(--color-fill-contrast) !important;
+    background-color: transparent !important;
+    border-color: var(--color-border-contrast) !important;
   }
 }
 

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

@@ -86,6 +86,10 @@
 
     &-icon {
       @include mixins.nav-icon;
+
+      &--no-gap-md-down {
+        @include mixins.nav-icon-no-gap-md-down;
+      }
     }
 
     &-spacer {