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

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

@@ -20,14 +20,10 @@
  *    - Tests dark theme context
  */
 import { render } from "@testing-library/react";
-import { axe, toHaveNoViolations } from "jest-axe";
-import "jest-axe/extend-expect";
+import { axe } from "vitest-axe";
 
 import { Footer } from "../Footer";
 
-// Extension of expect for axe
-expect.extend(toHaveNoViolations);
-
 describe("Footer Conformance Tests", () => {
   describe("HTML Validity", () => {
     it("is valid html with default props", () => {

package/src/components/Forms/Autocomplete/Autocomplete.static.ts

@@ -50,6 +50,42 @@ export default class Autocomplete {
     }
     this.config = { ...this.config, ...elementConfig };
 
+    const customInputClassName = this.config.customInputClassName || "";
+    const customInputClassTokens = customInputClassName
+      .split(/\s+/)
+      .filter(Boolean);
+
+    const hasSearchIcon = customInputClassTokens.includes("input--search-icon");
+    const hasSearchIconWithPlaceholder = customInputClassTokens.includes(
+      "input--search-icon-with-placeholder",
+    );
+
+    this.config.customInputClassName = customInputClassTokens
+      .filter(
+        (token) =>
+          token !== "input--search-icon" &&
+          token !== "input--search-icon-with-placeholder",
+      )
+      .join(" ");
+
+    if (hasSearchIcon) {
+      this.config.wrapperClassName = [
+        this.config.wrapperClassName,
+        "autocomplete__wrapper--search-icon",
+      ]
+        .filter(Boolean)
+        .join(" ");
+    }
+
+    if (hasSearchIconWithPlaceholder) {
+      this.config.wrapperClassName = [
+        this.config.wrapperClassName,
+        "autocomplete__wrapper--search-icon-with-placeholder",
+      ]
+        .filter(Boolean)
+        .join(" ");
+    }
+
     // Dynamic import to avoid SSR issues
     const accessibleAutocomplete = (
       await import("@orangesk/accessible-autocomplete")

package/src/components/Forms/Autocomplete/styles/style.scss

@@ -1,8 +1,10 @@
 @use "./config";
 @use "./mixins";
 @use "../../TextInput/styles/mixins" as textMixins;
+@use "../../TextInput/styles/config" as textConfig;
 @use "../../styles/config" as commonConfig;
 @use "../../../../styles/tools/generate";
+@use "../../../../styles/tools/convert";
 
 @layer components {
   .autocomplete {
@@ -15,6 +17,46 @@
 
     &__wrapper {
       @include mixins.wrapper();
+
+      &--search-icon,
+      &--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: textConfig.$background-image-search-icon;
+          background-repeat: no-repeat;
+          pointer-events: none;
+          z-index: 3;
+        }
+
+        .autocomplete__input {
+          background-image: none !important;
+          padding-left: convert.to-rem(40px);
+          position: relative;
+          z-index: 1;
+        }
+
+        .autocomplete__hint {
+          padding-left: convert.to-rem(40px);
+        }
+      }
+
+      &--search-icon {
+        &::before {
+          opacity: 0;
+        }
+
+        &:has(.autocomplete__input:not(:focus):placeholder-shown)::before {
+          opacity: 1;
+        }
+      }
     }
 
     &__input {

package/src/components/Forms/Field/tests/{Autocomplete.Field.conformance.test.js → Autocomplete.Field.conformance.test.jsx}

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

package/src/components/Forms/Field/tests/{Checkbox.Field.conformance.test.js → Checkbox.Field.conformance.test.jsx}

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

package/src/components/Forms/Field/tests/{File.Field.conformance.test.js → File.Field.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Field } from "..";
 
@@ -28,7 +28,7 @@ const example = (
 );
 
 beforeAll(() => {
-  global.DataTransfer = jest.fn(() => ({ files: undefined }));
+  global.DataTransfer = vi.fn(() => ({ files: undefined }));
 });
 
 it("is valid html", () => {

package/src/components/Forms/Field/tests/{Group.Field.conformance.test.js → Group.Field.conformance.test.jsx}

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

package/src/components/Forms/Field/tests/{Radio.Field.conformance.test.js → Radio.Field.conformance.test.jsx}

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

package/src/components/Forms/Field/tests/{Rangeslider.Field.test.js → Rangeslider.Field.test.jsx}

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

package/src/components/Forms/Field/tests/{Select.Field.conformance.test.js → Select.Field.conformance.test.jsx}

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

package/src/components/Forms/Field/tests/{Text.Field.conformance.test.js → Text.Field.conformance.test.jsx}

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

package/src/components/Forms/Field/tests/{Textarea.Field.conformance.test.js → Textarea.Field.conformance.test.jsx}

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

package/src/components/Forms/TextInput/TextInput.tsx

@@ -15,8 +15,12 @@ export type TextInputType =
   | "text"
   | "url";
 
-export interface TextInputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+export type TextInputSearchIcon = "none" | "transient" | "persistent";
+
+export interface TextInputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> {
   /** Input html type. */
   htmlType?: TextInputType;
   /** Html id attribute. */
@@ -41,12 +45,15 @@ export interface TextInputProps
   width?: TextInputWidth;
   /** Additional CSS classes */
   className?: string;
+  /** Search icon mode. `transient` shows icon only on empty unfocused input, `persistent` keeps it visible with placeholder. */
+  searchIcon?: TextInputSearchIcon;
 }
 
 const defaultProps = {
   htmlType: "text" as TextInputType,
   size: "default" as TextInputSize,
   width: "default" as TextInputWidth,
+  searchIcon: "none" as TextInputSearchIcon,
 };
 
 const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
@@ -62,11 +69,15 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       size = defaultProps.size,
       htmlType = defaultProps.htmlType,
       width = defaultProps.width,
+      searchIcon = defaultProps.searchIcon,
       name,
       ...other
     },
     ref,
   ) => {
+    const hasSearchIcon = searchIcon === "transient";
+    const hasSearchIconWithPlaceholder = searchIcon === "persistent";
+
     const classes = cx(
       CLASS_ROOT,
       {
@@ -80,7 +91,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 
     const inputName = name || id;
 
-    return (
+    const inputElement = (
       <input
         className={classes}
         id={id}
@@ -93,6 +104,22 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         {...other}
       />
     );
+
+    if (hasSearchIcon || hasSearchIconWithPlaceholder) {
+      return (
+        <span
+          className={cx("text-input__wrapper", {
+            "text-input__wrapper--search-icon": hasSearchIcon,
+            "text-input__wrapper--search-icon-with-placeholder":
+              hasSearchIconWithPlaceholder,
+          })}
+        >
+          {inputElement}
+        </span>
+      );
+    }
+
+    return inputElement;
   },
 );
 

package/src/components/Forms/TextInput/styles/style.scss

@@ -3,6 +3,68 @@
 @use "./mixins";
 
 @layer components {
+  .text-input__wrapper {
+    position: relative;
+
+    &--search-icon,
+    &--search-icon-with-placeholder {
+      display: inline-block;
+
+      &:has(> .text-input--3ch) {
+        @include mixins.width(3ch);
+      }
+
+      &:has(> .text-input--8ch) {
+        @include mixins.width(8ch);
+      }
+
+      &:has(> .text-input--12ch) {
+        @include mixins.width(12ch);
+      }
+
+      &:has(> .text-input--fullwidth) {
+        @include mixins.width(fullwidth);
+      }
+
+      &:has(
+        > .text-input:not(.text-input--3ch):not(.text-input--8ch):not(
+            .text-input--12ch
+          ):not(.text-input--fullwidth)
+      ) {
+        @include mixins.width(default);
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0.5rem;
+        width: 1.25rem;
+        height: 1.25rem;
+        transform: translateY(-50%);
+        background-image: config.$background-image-search-icon;
+        background-repeat: no-repeat;
+        pointer-events: none;
+        z-index: 1;
+      }
+
+      > .text-input {
+        background-image: none !important;
+        padding-left: 2.5rem;
+      }
+    }
+
+    &--search-icon {
+      &::before {
+        opacity: 0;
+      }
+
+      &:has(> .text-input:not(:focus):placeholder-shown)::before {
+        opacity: 1;
+      }
+    }
+  }
+
   .text-input {
     @include mixins.base();
     @include mixins.states();

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

@@ -189,7 +189,7 @@ describe("GridCol complex scenarios", () => {
   });
 
   it("renders with event handlers", () => {
-    const handleClick = jest.fn();
+    const handleClick = vi.fn();
     const { getByTestId } = render(
       <GridCol
         data-testid="test-id"

package/src/components/Hero/tests/{Hero.conformance.test.js → Hero.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 { Hero } from "../";
 

package/src/components/Icon/index.ts

@@ -1,3 +1,4 @@
 export { SpritePathContext } from "./SpritePathContext";
+export { SpritePathProvider } from "./SpritePathContext";
 export { Icon } from "./Icon";
 export { Pictogram } from "./Pictogram";

package/src/components/Icon/tests/{Icon.conformance.test.js → Icon.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 { Icon } from "../";
 

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

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

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

@@ -1,28 +1,10 @@
 /**
- * @jest-environm    it("renders     it("light use points to base name, dark use points to name with --dark suffix", () => {
-      const { container } = render(<Pictogram name="pictogram-skylink" />);
-      const lightUse = container.querySelector(".icon__use--light");
-      const darkUse = container.querySelector(".icon__use--dark");
-
-      expect(lightUse?.getAttribute("xlink:href")).toBe(
-        "/sprite.svg#pictogram-skylink",
-      );
-      expect(darkUse?.getAttribute("xlink:href")).toBe(
-        "/sprite.svg#pictogram-skylink--dark",
-      );
-    });nd dark use elements", () => {
-      const { container } = render(<Pictogram name="pictogram-skylink" />);
-      const lightUse = container.querySelector(".icon__use--light");
-      const darkUse = container.querySelector(".icon__use--dark");
-
-      expect(lightUse).toBeInTheDocument();
-      expect(darkUse).toBeInTheDocument();
-    });m
+ * Unit tests for the Pictogram component.
  */
 
 import React from "react";
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Pictogram } from "../Pictogram";
 

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;