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

package/src/components/IconList/tests/{IconList.conformance.test.js → IconList.conformance.test.jsx}

@@ -1,9 +1,9 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 // Mock Tooltip komponent
-jest.mock("../../Tooltip", () => ({
+vi.mock("../../Tooltip", () => ({
   InfoTooltip: ({ children, placement, ...props }) => (
     <span className="tooltip" data-tooltip-placement={placement} {...props}>
       <svg className="bold" />

package/src/components/IconList/tests/{IconList.unit.test.js → IconList.unit.test.jsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 // Mock Tooltip komponent
-jest.mock('../../Tooltip', () => ({
+vi.mock('../../Tooltip', () => ({
   InfoTooltip: ({ children, ...props }) => <div data-testid="info-tooltip" {...props}>{children}</div>,
 }));
 

package/src/components/IconList/tests/{Item.unit.test.js → Item.unit.test.jsx}

@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react";
 
 // Mock Tooltip komponent
-jest.mock("../../Tooltip", () => ({
+vi.mock("../../Tooltip", () => ({
   InfoTooltip: ({ children, placement, className = "", ...props }) => (
     <span
       className={`tooltip ${className}`.trim()}

package/src/components/Image/tests/{Image.conformance.test.js → Image.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Image } from "../";
 

package/src/components/Image/tests/{Image.unit.test.js → Image.unit.test.jsx}

@@ -2,7 +2,16 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 
 // Mock breakpoints since SCSS modules don't work in tests
-jest.mock("../../../styles/export/breakpoint", () => ({
+vi.mock("../../../styles/export/breakpoint", () => ({
+  default: {
+    xs: "0px",
+    sm: "480px",
+    md: "768px",
+    lg: "992px",
+    xl: "1240px",
+    xxl: "1380px",
+    xxxl: "1920px",
+  },
   xs: "0px",
   sm: "480px",
   md: "768px",
@@ -105,8 +114,8 @@ describe("Image Component", () => {
 
     it("renders with correct src attribute for string src", () => {
       const { container } = render(<Image alt="test" src={singleSource} />);
-      expect(container.querySelector("img").src).toEqual(
-        "http://localhost" + singleSource,
+      expect(new URL(container.querySelector("img").src).pathname).toEqual(
+        singleSource,
       );
     });
 

package/src/components/Link/tests/{Link.conformance.test.js → Link.conformance.test.jsx}

@@ -19,8 +19,8 @@ Conformance tests for the Link component:
   - Does not create unnecessary wrapper elements.
 */
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
-import "@testing-library/jest-dom";
+import { axe } from 'vitest-axe';
+import "@testing-library/jest-dom/vitest";
 
 import { Link } from "../";
 

package/src/components/Link/tests/{Link.unit.test.js → Link.unit.test.jsx}

@@ -25,14 +25,14 @@ Unit tests for the Link component:
   - Has correct display name 'Link'.
 */
 import { render, screen, fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom";
+import "@testing-library/jest-dom/vitest";
 
 import { Link } from "../";
 
 // Mock console.warn to test warning messages
 const originalWarn = console.warn;
 beforeEach(() => {
-  console.warn = jest.fn();
+  console.warn = vi.fn();
 });
 
 afterEach(() => {
@@ -142,8 +142,8 @@ describe("Link Component", () => {
     });
 
     it("forwards event handlers", () => {
-      const handleClick = jest.fn();
-      const handleMouseEnter = jest.fn();
+      const handleClick = vi.fn();
+      const handleMouseEnter = vi.fn();
 
       render(
         <Link
@@ -242,7 +242,7 @@ describe("Link Component", () => {
     });
 
     it("supports keyboard navigation", () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
 
       render(
         <Link href="/" onClick={handleClick} data-testid="link">

package/src/components/List/tests/{List.conformance.test.js → List.conformance.test.jsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
+import { axe } from 'vitest-axe';
 
 import { List, ListItem } from '../';
 

package/src/components/Loader/tests/{Loader.conformance.test.js → Loader.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Loader } from "../";
 

package/src/components/Megamenu/Megamenu.static.ts

@@ -240,6 +240,40 @@ export default class Megamenu {
     });
   }
 
+  isInMobilePanel(element: HTMLElement | null) {
+    return Boolean(
+      element && this.mobilePanels.some((panel) => panel.contains(element)),
+    );
+  }
+
+  getFocusRestoreTarget() {
+    const lastFocused = this.lastFocusedElement;
+    if (
+      lastFocused &&
+      lastFocused.isConnected &&
+      !this.isInMobilePanel(lastFocused)
+    ) {
+      return lastFocused;
+    }
+
+    const target = this.activeMobileTarget;
+    if (target) {
+      const matchingTrigger = this.mobileMenuButtons.find(
+        (button) =>
+          this.getTargetFromElement(button) === target &&
+          !this.isInMobilePanel(button),
+      );
+      if (matchingTrigger) {
+        return matchingTrigger;
+      }
+    }
+
+    return (
+      this.mobileMenuButtons.find((button) => !this.isInMobilePanel(button)) ||
+      null
+    );
+  }
+
   setMobilePanelState(panel: HTMLElement, isOpen: boolean) {
     panel.classList.toggle(this.config.activeClass, isOpen);
     panel.setAttribute("aria-hidden", isOpen ? "false" : "true");
@@ -448,14 +482,26 @@ export default class Megamenu {
       return;
     }
 
+    // Store the element that opened the menu for focus restoration
+    // BEFORE changing panel states, so activeElement is captured correctly.
+    this.lastFocusedElement =
+      source || (document.activeElement as HTMLElement | null);
+
+    // Move focus out of any panel about to be hidden to prevent
+    // the browser from blocking aria-hidden on a focused descendant.
+    const focused = document.activeElement as HTMLElement | null;
+    if (
+      focused &&
+      focused !== panel &&
+      this.mobilePanels.some((p) => p !== panel && p.contains(focused))
+    ) {
+      focused.blur();
+    }
+
     // Keep one side panel active at a time.
     this.mobilePanels.forEach((mobilePanel) => {
       this.setMobilePanelState(mobilePanel, mobilePanel === panel);
     });
-
-    // Store the element that opened the menu for focus restoration.
-    this.lastFocusedElement =
-      source || (document.activeElement as HTMLElement | null);
     this.activeMobilePanel = panel;
     this.activeMobileTarget = target;
     this.syncMobileButtonState();
@@ -479,6 +525,15 @@ export default class Megamenu {
       return;
     }
 
+    // Move focus out of the panel BEFORE setting aria-hidden to prevent
+    // the browser from blocking aria-hidden on a focused descendant.
+    const restoreTarget = this.getFocusRestoreTarget();
+    if (restoreTarget) {
+      restoreTarget.focus();
+    } else {
+      (document.activeElement as HTMLElement | null)?.blur?.();
+    }
+
     this.mobilePanels.forEach((panel) => {
       this.setMobilePanelState(panel, false);
     });
@@ -487,10 +542,6 @@ export default class Megamenu {
     this.closeAllAccordions();
     this.removeFocusTrap();
 
-    if (this.isKeyboardUser && this.lastFocusedElement) {
-      this.lastFocusedElement.focus();
-    }
-
     this.activeMobilePanel = null;
     this.activeMobileTarget = null;
     this.lastFocusedElement = null;

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/MegamenuSearchContent.tsx

@@ -2,12 +2,14 @@ import cx from "classnames";
 
 import {
   CLASS_INPUT,
-  CLASS_INPUT_SEARCH_RESPONSIVE,
-  CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
+  CLASS_INPUT_WRAPPER,
+  CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE,
+  CLASS_INPUT_WRAPPER_SEARCH_ICON_WITH_PLACEHOLDER,
   CLASS_LIST_INLINE,
   CLASS_SUBNAV,
   CLASS_SUBNAV_ITEM,
   CLASS_TAG,
+  CLASS_CAPTION,
 } from "./constants";
 import { searchResultItems, searchTerms } from "./data";
 
@@ -34,22 +36,26 @@ export const MegamenuSearchContent = ({
         {inputLabel}
       </label>
 
-      <input
+      <span
         className={cx(
-          CLASS_INPUT,
-          CLASS_INPUT_SEARCH_RESPONSIVE,
-          CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
+          CLASS_INPUT_WRAPPER,
+          CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE,
+          CLASS_INPUT_WRAPPER_SEARCH_ICON_WITH_PLACEHOLDER,
         )}
-        id={inputId}
-        type="text"
-        placeholder="Hľadať"
-        name="search"
-        defaultValue={searchValue}
-      />
+      >
+        <input
+          className={CLASS_INPUT}
+          id={inputId}
+          type="text"
+          placeholder="Hľadať"
+          name="search"
+          defaultValue={searchValue}
+        />
+      </span>
 
       {hasSearchEmpty ? (
         <>
-          <p>Najhľadanejši výrazy</p>
+          <p className={CLASS_CAPTION}>Najhľadanejši výrazy</p>
           <ul className={CLASS_LIST_INLINE}>
             {searchTerms.map((item) => (
               <li key={item}>
@@ -64,7 +70,9 @@ export const MegamenuSearchContent = ({
         <ul className={CLASS_SUBNAV}>
           {searchResultItems.map((item) => (
             <li key={item} className={CLASS_SUBNAV_ITEM}>
-              <a href="#">{item}</a>
+              <a href="#" className="no-underline">
+                {item}
+              </a>
             </li>
           ))}
         </ul>

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`;
@@ -60,6 +61,9 @@ export const CLASS_ACCORDION_ICON = `${CLASS_ROOT}__accordion-icon`;
 export const CLASS_ACCORDION_BODY = `${CLASS_ROOT}__accordion-body`;
 
 export const CLASS_INPUT = `${CLASS_ROOT}__input`;
+export const CLASS_INPUT_WRAPPER = `${CLASS_ROOT}__input-wrapper`;
+export const CLASS_INPUT_WRAPPER_SEARCH_ICON_WITH_PLACEHOLDER = `${CLASS_ROOT}__input-wrapper--search-icon-with-placeholder`;
+export const CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE = `${CLASS_ROOT}__input-wrapper--search-responsive`;
 export const CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER = `${CLASS_ROOT}__input--search-icon-with-placeholder`;
 export const CLASS_INPUT_SEARCH_RESPONSIVE = `${CLASS_ROOT}__input--search-responsive`;
 

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

@@ -36,6 +36,10 @@
     margin-top: 0 !important;
   }
 
+  .no-underline {
+    text-decoration: none !important;
+  }
+
   ul {
     @include typography.list-unstyled();
     margin-bottom: convert.to-rem(30px);
@@ -441,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;
@@ -458,7 +468,7 @@
 @mixin subnav-item {
   display: flex;
   gap: convert.to-rem(10px);
-  margin-bottom: convert.to-rem(15px) !important;
+  margin-bottom: convert.to-rem(10px) !important;
 
   &:last-child {
     margin-bottom: 0 !important;
@@ -633,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;
   }
 }
 
@@ -876,9 +894,36 @@
       @include input.width($width);
     }
   }
+}
+
+@mixin input-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  margin-bottom: convert.to-rem(30px);
 
   &--search-icon-with-placeholder {
-    @include input.search-icon-with-placeholder();
+    isolation: isolate;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: convert.to-rem(8px);
+      width: convert.to-rem(20px);
+      height: convert.to-rem(20px);
+      transform: translateY(-50%);
+      background-image: inputConfig.$background-image-search-icon;
+      background-repeat: no-repeat;
+      pointer-events: none;
+      z-index: 2;
+    }
+
+    #{config.$class-root}__input {
+      background-image: none !important;
+      padding-left: convert.to-rem(40px);
+      margin-bottom: 0;
+    }
   }
 
   &--search-responsive {

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 {
@@ -241,6 +245,10 @@
     @include mixins.input;
   }
 
+  &__input-wrapper {
+    @include mixins.input-wrapper;
+  }
+
   &__tag {
     @include mixins.tag;
 

package/src/components/Modal/tests/{Modal.conformance.test.js → Modal.conformance.test.jsx}

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Button } from "../../Button";
 import { Modal, ModalProductHeader } from "../";
@@ -40,7 +40,7 @@ it("is valid html", () => {
 });
 
 it("is accessible", async () => {
-  window.scrollTo = jest.fn();
+  window.scrollTo = vi.fn();
   const { container } = render(example);
 
   fireEvent.click(container.querySelector('[data-test-id="open-button"]'));

package/src/components/Pagination/tests/{Item.unit.test.js → Item.unit.test.jsx}

@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment jsdom
  */
 
 import React from 'react';

package/src/components/Pagination/tests/{Pagination.conformance.test.js → Pagination.conformance.test.jsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
+import { axe } from 'vitest-axe';
 
 import { Pagination } from '../Pagination.tsx';
 

package/src/components/Pagination/tests/{Separator.unit.test.js → Separator.unit.test.jsx}

@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment jsdom
  */
 
 import React from 'react';

package/src/components/Pill/tests/{Pill.conformance.test.js → Pill.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Pill } from "../";
 

package/src/components/Progress/tests/{Progress.conformance.test.js → Progress.conformance.test.jsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
+import { axe } from 'vitest-axe';
 
 import { Progress } from '../';
 

package/src/components/PromoBanner/tests/{PromoBanner.conformance.test.js → PromoBanner.conformance.test.jsx}

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 import userEvent from "@testing-library/user-event";
 
 import { PromoBanner } from "../";
@@ -18,7 +18,7 @@ import { PromoBanner } from "../";
  * - Image element validation
  *
  * ♿ ACCESSIBILITY (A11y)
- * - WCAG 2.1 compliance using jest-axe
+ * - WCAG 2.1 compliance checks
  * - Proper use of semantic HTML elements
  * - Image alt attributes
  * - Interactive elements (buttons, links)
@@ -621,7 +621,7 @@ describe("PromoBanner Component Conformance Tests", () => {
   describe("Integration Tests", () => {
     it("works with interactive elements", async () => {
       const user = userEvent.setup();
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
 
       render(
         <PromoBanner>
@@ -639,7 +639,7 @@ describe("PromoBanner Component Conformance Tests", () => {
 
     it("handles form submission within banner", async () => {
       const user = userEvent.setup();
-      const handleSubmit = jest.fn((e) => e.preventDefault());
+      const handleSubmit = vi.fn((e) => e.preventDefault());
 
       render(
         <PromoBanner>
@@ -688,7 +688,7 @@ describe("PromoBanner Component Conformance Tests", () => {
 
     it("works with keyboard navigation", async () => {
       const user = userEvent.setup();
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
 
       render(
         <PromoBanner>
@@ -725,8 +725,8 @@ describe("PromoBanner Component Conformance Tests", () => {
 
     it("handles event propagation correctly", async () => {
       const user = userEvent.setup();
-      const bannerClick = jest.fn();
-      const buttonClick = jest.fn((e) => e.stopPropagation());
+      const bannerClick = vi.fn();
+      const buttonClick = vi.fn((e) => e.stopPropagation());
 
       render(
         <PromoBanner onClick={bannerClick}>

package/src/components/PromoBanner/tests/{PromoBanner.unit.test.js → PromoBanner.unit.test.jsx}

@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment jsdom
  */
 
 import React from "react";

package/src/components/PromotionCard/tests/{PromotionCard.conformance.test.js → PromotionCard.conformance.test.jsx}

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 import userEvent from "@testing-library/user-event";
 
 import { PromotionCard } from "../";
@@ -17,7 +17,7 @@ import { PromotionCard } from "../";
  * - Card wrapper structure
  *
  * ♿ ACCESSIBILITY (A11y)
- * - WCAG 2.1 compliance using jest-axe
+ * - WCAG 2.1 compliance checks
  * - Proper use of semantic HTML elements
  * - ARIA attributes and their validity
  * - Interactive elements (buttons, links)
@@ -455,7 +455,7 @@ describe("PromotionCard Component Conformance Tests", () => {
   describe("Integration Tests", () => {
     it("works with interactive elements", async () => {
       const user = userEvent.setup();
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
 
       render(
         <PromotionCard>
@@ -518,7 +518,7 @@ describe("PromotionCard Component Conformance Tests", () => {
 
     it("works with Card integration for complex interactions", async () => {
       const user = userEvent.setup();
-      const handleSubmit = jest.fn((e) => e.preventDefault());
+      const handleSubmit = vi.fn((e) => e.preventDefault());
 
       render(
         <PromotionCard color="background-contrast">

package/src/components/PromotionCard/tests/{PromotionCard.unit.test.js → PromotionCard.unit.test.jsx}

@@ -338,7 +338,7 @@ describe("PromotionCard Component Unit Tests", () => {
     });
 
     it("passes through event handlers", () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       const { getByTestId } = render(
         <PromotionCard
           data-testid="test-promotion-card"

package/src/components/Section/tests/{Section.conformance.test.js → Section.conformance.test.jsx}

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 import userEvent from "@testing-library/user-event";
 
 import { Section } from "../";
@@ -17,7 +17,7 @@ import { Section } from "../";
  * - Container wrapper structure
  *
  * ♿ ACCESSIBILITY (A11y)
- * - WCAG 2.1 compliance using jest-axe
+ * - WCAG 2.1 compliance checks
  * - Proper use of semantic HTML tags
  * - ARIA attributes and their validity
  * - Interactive elements (buttons, inputs, selects)
@@ -450,7 +450,7 @@ describe("Section Conformance Tests", () => {
 
     it("works with interactive components", async () => {
       const user = userEvent.setup();
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
 
       render(
         <Section>
@@ -487,7 +487,7 @@ describe("Section Conformance Tests", () => {
 
     it("works with Container wrapper for complex interactions", async () => {
       const user = userEvent.setup();
-      const handleSubmit = jest.fn((e) => {
+      const handleSubmit = vi.fn((e) => {
         e.preventDefault();
       });
 

package/src/components/Section/tests/{Section.unit.test.js → Section.unit.test.jsx}

@@ -618,7 +618,7 @@ describe("Section Component Unit Tests", () => {
     });
 
     it("passes through event handlers", () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       const { getByTestId } = render(
         <Section data-testid="test-section" onClick={handleClick} />,
       );