@orangesk/orange-design-system 2.0.0-beta.40 → 2.0.0-beta.42

package/src/components/AnchorNavigation/tests/AnchorNavigation.unit.test.jsx

@@ -274,9 +274,63 @@ describe("rendering AnchorNavigation", () => {
       section.remove();
     });
 
+    it("prevents mousedown default on non-interactive content-right area", () => {
+      const { container } = render(
+        <AnchorNavigation items={basicItems}>
+          <div className="align-lg-right mb-none">
+            <span>16 €</span>
+            <span className="text-secondary">S viazanostou 24 mesiacov</span>
+          </div>
+          <a href="/senior-pausal/chcem-senior">Kupit Senior pausal</a>
+        </AnchorNavigation>,
+      );
+      const anchorNavigationElement = initializeAnchorNavigation(container);
+      const anchorNavigation = AnchorNavigationStatic.getInstance(
+        anchorNavigationElement,
+      );
+      const infoBlock = container.querySelector(".align-lg-right");
+
+      const downEvent = new MouseEvent("mousedown", {
+        bubbles: true,
+        cancelable: true,
+        button: 0,
+      });
+      infoBlock?.dispatchEvent(downEvent);
+
+      expect(downEvent.defaultPrevented).toBe(true);
+
+      anchorNavigation?.destroy();
+    });
+
+    it("does not prevent mousedown default on interactive content-right link", () => {
+      const { container } = render(
+        <AnchorNavigation items={basicItems}>
+          <a href="/senior-pausal/chcem-senior">Kupit Senior pausal</a>
+        </AnchorNavigation>,
+      );
+      const anchorNavigationElement = initializeAnchorNavigation(container);
+      const anchorNavigation = AnchorNavigationStatic.getInstance(
+        anchorNavigationElement,
+      );
+      const ctaLink = container.querySelector(
+        'a[href="/senior-pausal/chcem-senior"]',
+      );
+
+      const downEvent = new MouseEvent("mousedown", {
+        bubbles: true,
+        cancelable: true,
+        button: 0,
+      });
+      ctaLink?.dispatchEvent(downEvent);
+
+      expect(downEvent.defaultPrevented).toBe(false);
+
+      anchorNavigation?.destroy();
+    });
+
     it("scrolls active item using the left content viewport width", () => {
       const section = document.createElement("section");
-      section.id = "contact";
+      section.id = "pricing";
       document.body.appendChild(section);
 
       const { container } = render(
@@ -292,29 +346,53 @@ describe("rendering AnchorNavigation", () => {
       const contentLeft = container.querySelector(
         ".anchor-navigation__content-left",
       );
-      const activeLink = container.querySelector('a[href="#contact"]');
+      const activeLink = container.querySelector('a[href="#pricing"]');
       const scrollToSpy = vi.fn();
 
       Object.defineProperty(contentLeft, "clientWidth", {
         configurable: true,
         value: 180,
       });
+      Object.defineProperty(contentLeft, "scrollWidth", {
+        configurable: true,
+        value: 600,
+      });
       Object.defineProperty(contentLeft, "scrollLeft", {
         configurable: true,
         value: 0,
         writable: true,
       });
-      Object.defineProperty(activeLink, "offsetLeft", {
+      Object.defineProperty(contentLeft, "getBoundingClientRect", {
         configurable: true,
-        value: 220,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 180,
+          width: 180,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }),
       });
-      Object.defineProperty(activeLink, "clientWidth", {
+      Object.defineProperty(activeLink, "getBoundingClientRect", {
         configurable: true,
-        value: 80,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 220,
+          right: 300,
+          width: 80,
+          height: 0,
+          x: 220,
+          y: 0,
+          toJSON: () => ({}),
+        }),
       });
       contentLeft.scrollTo = scrollToSpy;
 
-      anchorNavigation.initScrollSpy("contact");
+      anchorNavigation.initScrollSpy("pricing");
 
       expect(scrollToSpy).toHaveBeenCalledWith({
         left: 170,
@@ -327,7 +405,7 @@ describe("rendering AnchorNavigation", () => {
 
     it("centers clicked active item even when it is already visible", () => {
       const section = document.createElement("section");
-      section.id = "contact";
+      section.id = "pricing";
       document.body.appendChild(section);
 
       const { container } = render(<AnchorNavigation items={basicItems} />);
@@ -338,29 +416,53 @@ describe("rendering AnchorNavigation", () => {
       const contentLeft = container.querySelector(
         ".anchor-navigation__content-left",
       );
-      const activeLink = container.querySelector('a[href="#contact"]');
+      const activeLink = container.querySelector('a[href="#pricing"]');
       const scrollToSpy = vi.fn();
 
       Object.defineProperty(contentLeft, "clientWidth", {
         configurable: true,
         value: 200,
       });
+      Object.defineProperty(contentLeft, "scrollWidth", {
+        configurable: true,
+        value: 600,
+      });
       Object.defineProperty(contentLeft, "scrollLeft", {
         configurable: true,
         value: 180,
         writable: true,
       });
-      Object.defineProperty(activeLink, "offsetLeft", {
+      Object.defineProperty(contentLeft, "getBoundingClientRect", {
         configurable: true,
-        value: 220,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 200,
+          width: 200,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }),
       });
-      Object.defineProperty(activeLink, "clientWidth", {
+      Object.defineProperty(activeLink, "getBoundingClientRect", {
         configurable: true,
-        value: 80,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 40,
+          right: 120,
+          width: 80,
+          height: 0,
+          x: 40,
+          y: 0,
+          toJSON: () => ({}),
+        }),
       });
       contentLeft.scrollTo = scrollToSpy;
 
-      anchorNavigation.initScrollSpy("contact");
+      anchorNavigation.initScrollSpy("pricing");
 
       expect(scrollToSpy).toHaveBeenCalledWith({
         left: 160,
@@ -371,6 +473,71 @@ describe("rendering AnchorNavigation", () => {
       section.remove();
     });
 
+    it("centers scroll-spy active item even when it is already visible", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+      const anchorNavigationElement = initializeAnchorNavigation(container);
+      const anchorNavigation = AnchorNavigationStatic.getInstance(
+        anchorNavigationElement,
+      );
+      const contentLeft = container.querySelector(
+        ".anchor-navigation__content-left",
+      );
+      const activeLink = container.querySelector('a[href="#pricing"]');
+      const scrollToSpy = vi.fn();
+
+      Object.defineProperty(contentLeft, "clientWidth", {
+        configurable: true,
+        value: 200,
+      });
+      Object.defineProperty(contentLeft, "scrollWidth", {
+        configurable: true,
+        value: 600,
+      });
+      Object.defineProperty(contentLeft, "scrollLeft", {
+        configurable: true,
+        value: 180,
+        writable: true,
+      });
+      Object.defineProperty(contentLeft, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 200,
+          width: 200,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+      Object.defineProperty(activeLink, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 40,
+          right: 120,
+          width: 80,
+          height: 0,
+          x: 40,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+      contentLeft.scrollTo = scrollToSpy;
+
+      anchorNavigation.scrollActiveLinkIntoView(contentLeft, activeLink, false);
+
+      expect(scrollToSpy).toHaveBeenCalledWith({
+        left: 160,
+        behavior: "smooth",
+      });
+
+      anchorNavigation?.destroy();
+    });
+
     it("does not duplicate anchor click handling after update", () => {
       const section = document.createElement("section");
       section.id = "features";
@@ -436,6 +603,87 @@ describe("rendering AnchorNavigation", () => {
       section.remove();
     });
 
+    it("realigns anchor after sticky offset changes during smooth scroll", () => {
+      vi.useFakeTimers();
+
+      const section = document.createElement("section");
+      section.id = "pricing";
+      Object.defineProperty(section, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 600 - window.scrollY,
+          bottom: 700 - window.scrollY,
+          left: 0,
+          right: 0,
+          width: 0,
+          height: 100,
+          x: 0,
+          y: 600,
+          toJSON: () => ({}),
+        }),
+      });
+      document.body.appendChild(section);
+
+      const megamenu = document.createElement("div");
+      megamenu.setAttribute("data-megamenu", "");
+      let megamenuHeight = 120;
+      Object.defineProperty(megamenu, "offsetHeight", {
+        configurable: true,
+        get: () => megamenuHeight,
+      });
+      document.body.appendChild(megamenu);
+
+      Object.defineProperty(window, "scrollY", {
+        configurable: true,
+        value: 0,
+        writable: true,
+      });
+
+      const scrollToSpy = vi
+        .spyOn(window, "scrollTo")
+        .mockImplementation((options) => {
+          if (typeof options === "object" && typeof options.top === "number") {
+            window.scrollY = options.top;
+          }
+        });
+
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+      const anchorNavigationElement = initializeAnchorNavigation(container);
+      const anchorNavigation = AnchorNavigationStatic.getInstance(
+        anchorNavigationElement,
+      );
+      const pricingLink = container.querySelector('a[href="#pricing"]');
+
+      Object.defineProperty(anchorNavigationElement, "offsetHeight", {
+        configurable: true,
+        value: 50,
+      });
+
+      fireEvent.click(pricingLink);
+
+      expect(scrollToSpy).toHaveBeenNthCalledWith(1, {
+        top: 430,
+        behavior: "smooth",
+      });
+
+      megamenuHeight = 80;
+      fireEvent.scroll(window);
+      vi.advanceTimersByTime(
+        AnchorNavigationStatic.SCROLL_END_DEBOUNCE_MS + 20,
+      );
+
+      expect(scrollToSpy).toHaveBeenNthCalledWith(2, {
+        top: 470,
+        behavior: "smooth",
+      });
+
+      anchorNavigation?.destroy();
+      scrollToSpy.mockRestore();
+      megamenu.remove();
+      section.remove();
+      vi.useRealTimers();
+    });
+
     it("toggles left and right overflow classes based on scroll position", () => {
       const { container } = render(<AnchorNavigation items={moreItems} />);
       const anchorNavigationElement = initializeAnchorNavigation(container);

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

@@ -9,31 +9,26 @@
 ) {
   display: flex;
   flex-flow: row wrap;
-  max-width: calc(100% - #{$spacing});
-  margin: ($spacing * -1) ($spacing * -1) space.get("large") 0;
+  gap: $spacing;
+  margin: 0 0 space.get("large") 0;
 
   #{$button-selector},
-  #{$button-selector}:last-child,
   #{$link-selector},
-  #{$link-selector}:last-child,
-  button#{$link-selector},
-  button#{$link-selector}:last-child {
-    margin: $spacing $spacing 0 0;
+  button#{$link-selector} {
+    margin: 0;
   }
 }
 
 @mixin stack-on-xs($spacing: config.$spacing, $button-selector: ".btn") {
   @include breakpoint.get("xs", "down") {
     flex-flow: column;
+    gap: $spacing;
     max-width: 100%;
     margin: 0 0 $spacing 0;
 
-    #{$button-selector}:not(:last-child),
-    #{$button-selector}:last-child,
-    button.link:not(:last-child),
-    button.link:last-child {
-      margin-right: 0;
-      margin-bottom: 0;
+    #{$button-selector},
+    button.link {
+      margin: 0;
     }
   }
 }

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

@@ -23,11 +23,15 @@
   }
 }
 
-@mixin grid-column-gap($size: "default", $column-gap: config.$column-gap) {
+@mixin grid-column-gap(
+  $size: "default",
+  $column-gap: config.$column-gap,
+  $force-important: false
+) {
   $gap: map.get($column-gap, $size);
 
   @if ($size == "default" or $size == "small") {
-    @if ($size == "default") {
+    @if ($size == "default" and not $force-important) {
       margin-left: -$gap;
       margin-right: -$gap;
     } @else {
@@ -46,7 +50,7 @@
   $size: "default",
   $column-gap: config.$column-gap
 ) {
-  @include grid-column-gap($size, $column-gap);
+  @include grid-column-gap($size, $column-gap, true);
 }
 
 @mixin grid-with-equal-height-content(
@@ -89,10 +93,14 @@
   max-width: 100%;
 }
 
-@mixin grid-col-column-gap($size: "default", $column-gap: config.$column-gap) {
+@mixin grid-col-column-gap(
+  $size: "default",
+  $column-gap: config.$column-gap,
+  $force-important: false
+) {
   $gap: map.get($column-gap, $size);
 
-  @if ($size == "default") {
+  @if ($size == "default" and not $force-important) {
     padding-left: $gap;
     padding-right: $gap;
   } @else if ($size == "small") {
@@ -110,7 +118,7 @@
   $size: "default",
   $column-gap: config.$column-gap
 ) {
-  @include grid-col-column-gap($size, $column-gap);
+  @include grid-col-column-gap($size, $column-gap, true);
 }
 
 @mixin column-size($width: config.$grid-base, $grid-base: config.$grid-base) {

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

@@ -27,7 +27,6 @@
 
 @mixin icon {
   vertical-align: middle;
-  transform: translateY(-4%);
 }
 
 @mixin icon-left {

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

@@ -97,6 +97,10 @@
   .divider {
     padding: 0;
   }
+
+  &:has(.divider) {
+    padding-bottom: 0;
+  }
 }
 
 @mixin close {