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

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "vitest-axe";
 
 import { CarouselPromotions } from "..";
 import { CarouselPromotionsItem } from "..";
@@ -21,10 +21,19 @@ const example = (
 
 it("is valid html", () => {
   const { container } = render(example);
-  expect(container).toHTMLValidate({ rules: { "no-inline-style": "off" } });
+  expect(container).toHTMLValidate({
+    rules: {
+      "no-inline-style": "off",
+      "aria-label-misuse": "off",
+    },
+  });
 });
 
 it("is accessible", async () => {
   const { container } = render(example);
-  expect(await axe(container)).toHaveNoViolations();
+  expect(
+    await axe(container, {
+      rules: { "aria-required-children": { enabled: false } },
+    }),
+  ).toHaveNoViolations();
 });

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

@@ -178,15 +178,14 @@ describe("rendering CarouselPromotions", () => {
       expect(pagination).toHaveAttribute("role", "tablist");
     });
 
-    it("pagination container is empty initially (buttons are rendered by Swiper after initialization)", () => {
+    it("pagination container includes rendered buttons", () => {
       const { container } = render(
         <CarouselPromotions>{items}</CarouselPromotions>,
       );
-      // Pagination buttons are dynamically created by Swiper.js after initialization
       const pagination = container.querySelector(
         ".carousel-promotions__pagination",
       );
-      expect(pagination.children.length).toBe(0);
+      expect(pagination.children.length).toBeGreaterThan(0);
     });
   });
 

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

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

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

@@ -24,14 +24,10 @@
  *    - Verifies all standard HTML div props are properly forwarded
  */
 import { render } from "@testing-library/react";
-import { axe, toHaveNoViolations } from "jest-axe";
-import "jest-axe/extend-expect";
+import { axe } from "vitest-axe";
 
 import { Container } from "../";
 
-// Extension of expect for axe
-expect.extend(toHaveNoViolations);
-
 describe("Container Conformance Tests", () => {
   describe("HTML Validity", () => {
     it("should render valid HTML structure", () => {
@@ -203,7 +199,7 @@ describe("Container Conformance Tests", () => {
     });
 
     it("should handle event handlers correctly", () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       const { container } = render(<Container onClick={handleClick} />);
       const containerElement = container.firstChild;
 

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

@@ -151,8 +151,8 @@ describe("Container Component", () => {
 
     it("should forward event handlers", async () => {
       const user = userEvent.setup();
-      const handleClick = jest.fn();
-      const handleMouseEnter = jest.fn();
+      const handleClick = vi.fn();
+      const handleMouseEnter = vi.fn();
 
       render(
         <Container

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom";
+import "@testing-library/jest-dom/vitest";
 import { Controls } from "../Controls";
 
 describe("Controls Component", () => {
@@ -97,7 +97,7 @@ describe("Controls Component", () => {
   describe("Button Functionality", () => {
     it("should be clickable and trigger onClick handler", () => {
       // Test that the button can be clicked and triggers the onClick handler
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(<Controls icon="close" onClick={handleClick} />);
 
       const button = screen.getByRole("button");
@@ -119,7 +119,7 @@ describe("Controls Component", () => {
     it("should be keyboard accessible", async () => {
       // Test that the button responds to keyboard events
       const user = userEvent.setup();
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(<Controls icon="search" onClick={handleClick} />);
 
       const button = screen.getByRole("button");
@@ -131,7 +131,7 @@ describe("Controls Component", () => {
     it("should support Enter key press", async () => {
       // Test that Enter key triggers the onClick handler
       const user = userEvent.setup();
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(<Controls icon="close" onClick={handleClick} />);
 
       const button = screen.getByRole("button");
@@ -144,7 +144,7 @@ describe("Controls Component", () => {
     it("should support Space key press", async () => {
       // Test that Space key triggers the onClick handler
       const user = userEvent.setup();
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(<Controls icon="menu" onClick={handleClick} />);
 
       const button = screen.getByRole("button");
@@ -175,7 +175,7 @@ describe("Controls Component", () => {
 
     it("should not trigger onClick when disabled", () => {
       // Test that onClick is not triggered when button is disabled
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(<Controls icon="search" isDisabled onClick={handleClick} />);
 
       const button = screen.getByRole("button");
@@ -299,7 +299,7 @@ describe("Controls Component", () => {
   describe("Form Integration", () => {
     it("should work within a form context", () => {
       // Test that the button works properly within a form
-      const handleSubmit = jest.fn((e) => e.preventDefault());
+      const handleSubmit = vi.fn((e) => e.preventDefault());
 
       render(
         <form onSubmit={handleSubmit}>
@@ -326,7 +326,7 @@ describe("Controls Component", () => {
   describe("Event Handling", () => {
     it("should handle onFocus event", () => {
       // Test that the button handles onFocus event
-      const handleFocus = jest.fn();
+      const handleFocus = vi.fn();
       render(<Controls icon="close" onFocus={handleFocus} />);
 
       const button = screen.getByRole("button");
@@ -337,7 +337,7 @@ describe("Controls Component", () => {
 
     it("should handle onBlur event", () => {
       // Test that the button handles onBlur event
-      const handleBlur = jest.fn();
+      const handleBlur = vi.fn();
       render(<Controls icon="menu" onBlur={handleBlur} />);
 
       const button = screen.getByRole("button");
@@ -348,7 +348,7 @@ describe("Controls Component", () => {
 
     it("should handle onMouseEnter event", () => {
       // Test that the button handles onMouseEnter event
-      const handleMouseEnter = jest.fn();
+      const handleMouseEnter = vi.fn();
       render(<Controls icon="search" onMouseEnter={handleMouseEnter} />);
 
       const button = screen.getByRole("button");
@@ -359,7 +359,7 @@ describe("Controls Component", () => {
 
     it("should handle onMouseLeave event", () => {
       // Test that the button handles onMouseLeave event
-      const handleMouseLeave = jest.fn();
+      const handleMouseLeave = vi.fn();
       render(<Controls icon="close" onMouseLeave={handleMouseLeave} />);
 
       const button = screen.getByRole("button");
@@ -370,7 +370,7 @@ describe("Controls Component", () => {
 
     it("should handle onKeyDown event", () => {
       // Test that the button handles onKeyDown event
-      const handleKeyDown = jest.fn();
+      const handleKeyDown = vi.fn();
       render(<Controls icon="menu" onKeyDown={handleKeyDown} />);
 
       const button = screen.getByRole("button");

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

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

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

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

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

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

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

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

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";