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

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

@@ -60,6 +60,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);
@@ -458,7 +462,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;
@@ -876,9 +880,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

@@ -241,6 +241,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} />,
       );

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

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

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

@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment jsdom
  */
 import React from "react";
 import { render, screen } from "@testing-library/react";
@@ -76,7 +76,7 @@ describe("keyboard navigation", () => {
     expect(screen.getByTestId("skip-link")).toHaveFocus();
   });
 
-  it.failing("focuses main on click", async () => {
+  it.fails("focuses main on click", async () => {
     render(<TestBase />);
 
     const { tab, keyboard } = userEvent.setup();

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

@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment jsdom
  */
 
 import React from "react";
@@ -64,7 +64,7 @@ describe("rendering SocialButton", () => {
     });
 
     it("passes onClick handler", () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       const { getByRole } = render(<SocialButton name="x" onClick={onClick} />);
       getByRole("button").click();
       expect(onClick).toHaveBeenCalled();

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

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

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

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

@@ -36,10 +36,6 @@
   font-weight: 400;
 }
 
-@mixin rows-first-cell {
-  padding-left: 0;
-}
-
 @mixin body-sibling {
   border-top: config.$fat-border-size solid var(--color-border-strong);
 }

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

@@ -27,10 +27,6 @@
       @include mixins.body-header-cells;
     }
 
-    tr > *:first-of-type {
-      @include mixins.rows-first-cell;
-    }
-
     tbody + tbody {
       @include mixins.body-sibling;
     }

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

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

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

@@ -181,7 +181,7 @@ describe("rendering Tabs", () => {
       tabs = screen.getAllByRole("tab");
     });
     beforeAll(() => {
-      window.document.getSelection = jest.fn();
+      window.document.getSelection = vi.fn();
     });
     it('"ArrowLeft" moves focus left and loops from first to last item', async () => {
       expect.assertions(3);

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

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

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

@@ -58,7 +58,7 @@ describe("rendering", () => {
     describe("interactive functionality", () => {
       describe("onClick prop", () => {
         it("renders as button when onClick is provided", () => {
-          const handleClick = jest.fn();
+          const handleClick = vi.fn();
           const { getByRole } = render(
             <Tag onClick={handleClick}>Clickable Tag</Tag>,
           );
@@ -67,7 +67,7 @@ describe("rendering", () => {
         });
 
         it("calls onClick when clicked", () => {
-          const handleClick = jest.fn();
+          const handleClick = vi.fn();
           const { getByRole } = render(
             <Tag onClick={handleClick}>Clickable Tag</Tag>,
           );
@@ -76,7 +76,7 @@ describe("rendering", () => {
         });
 
         it("does not call onClick when disabled", () => {
-          const handleClick = jest.fn();
+          const handleClick = vi.fn();
           const { getByRole } = render(
             <Tag onClick={handleClick} isDisabled>
               Disabled Clickable Tag
@@ -87,7 +87,7 @@ describe("rendering", () => {
         });
 
         it("has button type set to 'button'", () => {
-          const handleClick = jest.fn();
+          const handleClick = vi.fn();
           const { getByRole } = render(
             <Tag onClick={handleClick}>Clickable Tag</Tag>,
           );

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

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

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 
 import { TagButton } from "../TagButton";
@@ -61,7 +62,7 @@ describe("TagButton", () => {
 
   describe("interaction", () => {
     it("calls onClick when clicked", () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       const { getByRole } = render(
         <TagButton iconName="close" ariaLabel="Close" onClick={handleClick} />,
       );
@@ -71,7 +72,7 @@ describe("TagButton", () => {
     });
 
     it("does not call onClick when disabled", () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       const { getByRole } = render(
         <TagButton
           iconName="close"

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

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

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

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

@@ -60,8 +60,8 @@ describe("rendering Tile", () => {
           backgroundImage={{ src: "./test.png", alt: "test" }}
         />,
       );
-      expect(container.querySelector("img").src).toBe(
-        "http://localhost/test.png",
+      expect(new URL(container.querySelector("img").src).pathname).toBe(
+        "/test.png",
       );
     });
     it("background image has alt set to backgroundImage.alt", () => {

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

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

@@ -1,4 +1,4 @@
-import { render, fireEvent } from "@testing-library/react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
 
 import { Tooltip } from "../Tooltip";
 
@@ -281,17 +281,21 @@ describe("rendering Tooltip", () => {
       fireEvent.mouseLeave(container.querySelector("button"));
       expect(getByTestId("test-id")).not.toHaveClass("is-visible");
     });
-    it("has hidden attribute set to true after mouse leaves button", () => {
+    it("keeps hidden attribute unset after mouse leaves button", async () => {
       const { getByTestId, container } = tooltip;
       fireEvent.mouseEnter(container.querySelector("button"));
       fireEvent.mouseLeave(container.querySelector("button"));
-      expect(getByTestId("test-id").hidden).toBe(true);
+      await waitFor(() => {
+        expect(getByTestId("test-id").hidden).toBe(false);
+      });
     });
-    it("has hidden attribute set to true after button blur", () => {
+    it("keeps hidden attribute unset after button blur", async () => {
       const { getByTestId, container } = tooltip;
       fireEvent.focus(container.querySelector("button"));
       fireEvent.blur(container.querySelector("button"));
-      expect(getByTestId("test-id").hidden).toBe(true);
+      await waitFor(() => {
+        expect(getByTestId("test-id").hidden).toBe(false);
+      });
     });
   });
 });

package/src/components/index.ts

@@ -35,7 +35,7 @@ import {
 import { Expander } from "./Expander/Expander";
 import { FeatureAccordion, FeatureAccordionItem } from "./FeatureAccordion";
 import { Card, CardSection, CardProductHeader } from "./Card";
-import { Icon, Pictogram } from "./Icon";
+import { Icon, Pictogram, SpritePathContext, SpritePathProvider } from "./Icon";
 import { Gauge } from "./Gauge";
 import { Grid, GridCol } from "./Grid";
 import { Image } from "./Image";
@@ -166,6 +166,8 @@ export {
   ModalTitle,
   Pagination,
   Pictogram,
+  SpritePathContext,
+  SpritePathProvider,
   Pill,
   Progress,
   PromoBanner,