@orangesk/orange-design-system 3.8.0 → 3.10.0

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -30,7 +30,7 @@ import {
   CLASS_TAG_TRANSPARENT,
 } from "./constants";
 import { getMegamenuIds } from "./ids";
-import { MegamenuIcon } from "./MegaMenuIcon";
+import { MegamenuIcon, MegamenuSpritePathProvider } from "./MegaMenuIcon";
 import type { MegamenuProps } from "./Megamenu";
 import { MegamenuSearchContent } from "./MegamenuSearchContent";
 import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
@@ -63,7 +63,7 @@ export const MegamenuBlog = ({
   const { hasSearchEmpty, hasSearchFilled, showSearchState, searchValue } =
     getMegamenuSearchState(searchEmpty, searchFilled);
 
-  return (
+  const content = (
     <header>
       <nav
         className={cx(CLASS_ROOT, className, {
@@ -392,4 +392,16 @@ export const MegamenuBlog = ({
       <div className={CLASS_SPACER_SMALL} aria-hidden="true" />
     </header>
   );
+
+  return (
+    <MegamenuSpritePathProvider
+      value={
+        isB2B || className?.split(/\s+/).includes("is-dark")
+          ? "/megamenu-sprite-dark.svg"
+          : "/megamenu-sprite-light.svg"
+      }
+    >
+      {content}
+    </MegamenuSpritePathProvider>
+  );
 };

package/src/components/Megamenu/MegamenuSearchContent.tsx

@@ -12,6 +12,7 @@ import {
   CLASS_TAG,
 } from "./constants";
 import { searchResultItems, searchTerms } from "./data";
+import { MegamenuIcon } from "./MegaMenuIcon";
 
 type MegamenuSearchContentProps = {
   inputId: string;
@@ -43,6 +44,12 @@ export const MegamenuSearchContent = ({
           CLASS_INPUT_WRAPPER_SEARCH_ICON_WITH_PLACEHOLDER,
         )}
       >
+        <MegamenuIcon
+          name="input-search"
+          className="megamenu__input-search-icon"
+          width={20}
+          height={20}
+        />
         <input
           className={CLASS_INPUT}
           id={inputId}
@@ -51,6 +58,12 @@ export const MegamenuSearchContent = ({
           name="search"
           defaultValue={searchValue}
         />
+        <MegamenuIcon
+          name="input-valid"
+          className="megamenu__input-status-icon"
+          width={16}
+          height={16}
+        />
       </span>
 
       {hasSearchEmpty ? (

package/src/components/Megamenu/MyOrangeMobilePanel.tsx

@@ -133,27 +133,21 @@ export const MyOrangeMobilePanel = ({
                   className={CLASS_MOBILE_APP_CARD_STORE}
                   aria-label="Stiahnuť aplikáciu z App Store"
                 >
-                  <img
-                    src={isB2B ? "/apple--white.svg" : "/apple.svg"}
-                    alt=""
-                  />
+                  <MegamenuIcon name="store-apple" width={24} height={25} />
                 </a>
                 <a
                   href="#"
                   className={CLASS_MOBILE_APP_CARD_STORE}
                   aria-label="Stiahnuť aplikáciu z Google Play"
                 >
-                  <img src={isB2B ? "/play--white.svg" : "/play.svg"} alt="" />
+                  <MegamenuIcon name="store-play" width={24} height={24} />
                 </a>
                 <a
                   href="#"
                   className={CLASS_MOBILE_APP_CARD_STORE}
                   aria-label="Stiahnuť aplikáciu z Huawei AppGallery"
                 >
-                  <img
-                    src={isB2B ? "/huawei--white.svg" : "/huawei.svg"}
-                    alt=""
-                  />
+                  <MegamenuIcon name="store-huawei" width={24} height={24} />
                 </a>
               </div>
             </div>

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

@@ -102,11 +102,16 @@
   }
 
   * {
-    box-sizing: border-box;
     letter-spacing: convert.to-rem(-0.1px);
     line-height: convert.to-rem(18px);
   }
 
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   ::selection {
     background-color: base.$selection-background;
     color: base.$text-color;
@@ -263,7 +268,7 @@
 }
 
 @mixin nav-item-lead {
-  margin-right: convert.to-rem(10px);
+  margin-right: 0;
 }
 
 @mixin nav-item-push {
@@ -418,7 +423,7 @@
   }
 
   &.is-active {
-    color: var(--color-border-accent);
+    color: var(--color-border-accent) !important;
   }
 }
 
@@ -523,6 +528,7 @@
   &:focus,
   &:active,
   &.is-active {
+    color: var(--color-text-default) !important;
     box-shadow: config.$active-line;
   }
 
@@ -637,7 +643,7 @@
     min-width: 0;
   }
 
-  > #{config.$class-root}__nav:last-child {
+  > #{config.$class-root}__nav:last-child:not(:first-child) {
     flex: 0 0 auto;
     width: auto;
   }
@@ -946,7 +952,8 @@
   align-items: center;
   height: convert.to-rem(40px);
 
-  img {
+  img,
+  svg {
     display: block;
     width: auto;
     max-width: convert.to-rem(52px);
@@ -1102,34 +1109,6 @@
   fill: currentColor;
   display: inline-block;
   vertical-align: middle;
-
-  &__use {
-    display: inline;
-
-    // Light theme (default) - show only light version
-    &--light {
-      display: inline;
-    }
-
-    &--dark {
-      display: none;
-    }
-  }
-
-  // Dark theme context - show only dark version
-  .is-dark &,
-  [data-theme="dark"] &,
-  .dark & {
-    &__use {
-      &--light {
-        display: none;
-      }
-
-      &--dark {
-        display: inline;
-      }
-    }
-  }
 }
 
 @mixin overlay {
@@ -1265,7 +1244,7 @@
 
 @mixin input {
   @include input.base();
-  @include input.states();
+  @include input.states($valid-icon: false);
   max-width: unset !important;
   margin-bottom: convert.to-rem(30px);
 
@@ -1296,16 +1275,14 @@
   &--search-icon-with-placeholder {
     isolation: isolate;
 
-    &::before {
-      content: "";
+    .megamenu__input-search-icon {
       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;
+      color: #f15e00;
       pointer-events: none;
       z-index: 2;
     }
@@ -1315,6 +1292,21 @@
       padding-left: convert.to-rem(40px);
       margin-bottom: 0;
     }
+
+    .megamenu__input-status-icon {
+      position: absolute;
+      top: 50%;
+      right: convert.to-rem(10px);
+      width: convert.to-rem(16px);
+      height: convert.to-rem(16px);
+      transform: translateY(-50%);
+      pointer-events: none;
+      z-index: 2;
+    }
+
+    #{config.$class-root}__input:not(.is-valid) ~ .megamenu__input-status-icon {
+      display: none;
+    }
   }
 
   &--search-responsive {

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

@@ -1,7 +1,10 @@
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+
 import { render } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
 
 import { Megamenu, MegamenuBlog } from "../";
+import MegamenuController from "../Megamenu.static";
 
 describe("Megamenu logo markup", () => {
   it("separates top links from the language switcher without a spacer item", () => {
@@ -148,6 +151,56 @@ describe("Megamenu logo markup", () => {
     expect(container).not.toHaveTextContent("0905 123 456");
   });
 
+  it.each([false, true])(
+    "renders My Orange as SSO links without account panel markup (B2B: %s)",
+    (isB2B) => {
+      const { container } = render(
+        <Megamenu
+          isLoggedIn={false}
+          myOrangeHref="/sso"
+          isB2B={isB2B}
+          notSticky
+        />,
+      );
+      const links = container.querySelectorAll('a[href="/sso"]');
+
+      expect(links).toHaveLength(2);
+      for (const link of links) {
+        expect(link).toHaveTextContent("Môj Orange");
+        expect(link).not.toHaveAttribute("data-megamenu-mobile-toggle");
+        expect(link).not.toHaveAttribute("aria-haspopup");
+        expect(link).not.toHaveAttribute("aria-expanded");
+      }
+      expect(
+        container.querySelector('[data-megamenu-mobile-target="my-orange"]'),
+      ).toBeNull();
+      expect(
+        container.querySelector('[data-megamenu-mobile-panel="my-orange"]'),
+      ).toBeNull();
+      expect(container.querySelector(".megamenu__mobile-account")).toBeNull();
+      expect(
+        container.querySelector('[data-megamenu-mobile-panel="main"]'),
+      ).toBeInTheDocument();
+
+      const controller = new MegamenuController(
+        container.querySelector("[data-megamenu]"),
+      );
+      try {
+        container.querySelector('[data-megamenu-mobile-target="main"]').click();
+        expect(
+          container.querySelector('[data-megamenu-mobile-panel="main"]'),
+        ).toHaveAttribute("aria-hidden", "false");
+        expect(links[0]).toHaveAttribute("href", "/sso");
+        controller.closeMobileMenu();
+        expect(
+          container.querySelector('[data-megamenu-mobile-panel="main"]'),
+        ).toHaveAttribute("aria-hidden", "true");
+      } finally {
+        controller.destroy();
+      }
+    },
+  );
+
   it("renders optional cart item count", () => {
     const { container } = render(<Megamenu cartItems={3} notSticky />);
 
@@ -175,3 +228,108 @@ describe("Megamenu logo markup", () => {
     expect(cart?.nextElementSibling).not.toBeInTheDocument();
   });
 });
+
+describe("Megamenu vendor sprite markup", () => {
+  it.each([
+    ["main B2C", Megamenu, false],
+    ["main B2B", Megamenu, true],
+    ["blog B2C", MegamenuBlog, false],
+    ["blog B2B", MegamenuBlog, true],
+  ])(
+    "resolves every SVG in %s through the external sprite",
+    (_, Component, isB2B) => {
+      const spritePath = `/megamenu-sprite-${isB2B ? "dark" : "light"}.svg`;
+      const sprite = new DOMParser().parseFromString(
+        readFileSync(`public${spritePath}`, "utf8"),
+        "image/svg+xml",
+      );
+      const { container } = render(
+        <Component isB2B={isB2B} className={isB2B ? "is-dark" : undefined} />,
+      );
+
+      expect(
+        container.querySelector("svg path, svg rect, svg circle"),
+      ).toBeNull();
+      expect(container.querySelector('img[src$=".svg"]')).toBeNull();
+      for (const use of container.querySelectorAll("svg use")) {
+        const href = use.getAttribute("href") || use.getAttribute("xlink:href");
+        expect(href).toMatch(new RegExp(`^${spritePath}#`));
+        expect(use.parentElement.querySelectorAll("use")).toHaveLength(1);
+        expect(sprite.getElementById(href.split("#")[1])).not.toBeNull();
+      }
+      for (const wrapper of container.querySelectorAll(
+        ".megamenu__input-wrapper",
+      )) {
+        expect(
+          wrapper.querySelector(".megamenu__input-search-icon use"),
+        ).not.toBeNull();
+        expect(
+          wrapper.querySelector(".megamenu__input-status-icon use"),
+        ).not.toBeNull();
+      }
+    },
+  );
+});
+
+describe("Megamenu dedicated sprites", () => {
+  it("keeps megamenu-owned sources and symbols out of the global sprite", () => {
+    const globalSprite = new DOMParser().parseFromString(
+      readFileSync("public/sprite.svg", "utf8"),
+      "image/svg+xml",
+    );
+    const sources = readdirSync("src/assets/megamenu").filter((file) =>
+      file.endsWith(".svg"),
+    );
+
+    expect(sources.length).toBeGreaterThan(0);
+    for (const file of sources) {
+      expect(existsSync(`src/assets/icons/${file}`), file).toBe(false);
+      expect(globalSprite.getElementById(file.slice(0, -4)), file).toBeNull();
+    }
+    expect(globalSprite.getElementById("rewards-accent")).toBeNull();
+  });
+
+  it("ships matching symbol IDs with theme colors and no unrelated global icons", () => {
+    const parse = (theme) =>
+      new DOMParser().parseFromString(
+        readFileSync(`public/megamenu-sprite-${theme}.svg`, "utf8"),
+        "image/svg+xml",
+      );
+    const light = parse("light");
+    const dark = parse("dark");
+    const ids = (doc) =>
+      Array.from(doc.querySelectorAll("symbol"), (s) => s.id);
+    expect(ids(light)).toEqual(ids(dark));
+    expect(ids(light)).toHaveLength(20);
+    expect(light.getElementById("user").getAttribute("fill")).toBe("#000");
+    expect(dark.getElementById("user").getAttribute("fill")).toBe("#fff");
+    expect(light.getElementById("linkedin")).toBeNull();
+    expect(light.getElementById("megamenu-logo").outerHTML).not.toEqual(
+      dark.getElementById("megamenu-logo").outerHTML,
+    );
+    expect(light.getElementById("store-apple").outerHTML).not.toEqual(
+      dark.getElementById("store-apple").outerHTML,
+    );
+    for (const doc of [light, dark]) {
+      expect(doc.querySelector("parsererror")).toBeNull();
+      for (const element of doc.querySelectorAll("[clip-path]")) {
+        const id = element
+          .getAttribute("clip-path")
+          .match(/url\(#([^)]+)\)/)?.[1];
+        expect(doc.getElementById(id)).not.toBeNull();
+      }
+    }
+  });
+});
+
+it.each([Megamenu, MegamenuBlog])(
+  "uses the dark sprite for an explicit dark navigation class",
+  (Component) => {
+    const { container } = render(<Component className="is-dark" />);
+    for (const use of container.querySelectorAll("use")) {
+      expect(use.getAttribute("xlink:href")).toMatch(
+        /^\/megamenu-sprite-dark\.svg#/,
+      );
+    }
+  },
+);

package/src/components/Alert/tests/Alert.visual.test.jsx

@@ -1,137 +0,0 @@
-import { beforeEach, describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { Button } from "../../Button";
-import { Alert } from "../";
-
-describe("Alert visual regression", () => {
-  beforeEach(async () => {
-    await page.viewport(1280, 720);
-  });
-
-  test("Preview: title", async () => {
-    render(
-      <Alert data-testid="alert-title" title="Toto je jednoduchá sprava" />,
-    );
-
-    await expect(page.getByTestId("alert-title")).toMatchScreenshot(
-      "alert-preview-title",
-    );
-  });
-
-  test("Preview: title and description", async () => {
-    render(
-      <Alert
-        data-testid="alert-title-description"
-        title="Dobre vediet!"
-        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
-      />,
-    );
-
-    await expect(page.getByTestId("alert-title-description")).toMatchScreenshot(
-      "alert-preview-title-description",
-    );
-  });
-
-  test("Preview: title and buttons", async () => {
-    render(
-      <Alert
-        data-testid="alert-title-buttons"
-        title="Prosim prihlaste sa."
-        actionButtons={[
-          <Button key="login">Prihlasit sa</Button>,
-          <Button key="hide">Skryt</Button>,
-        ]}
-      />,
-    );
-
-    await expect(page.getByTestId("alert-title-buttons")).toMatchScreenshot(
-      "alert-preview-title-buttons",
-    );
-  });
-
-  test("Preview: title, description and buttons", async () => {
-    render(
-      <Alert
-        data-testid="alert-title-description-buttons"
-        title="Prihlasit sa je jednoduche a rozumne"
-        description="Napr. prihlaseni pouzivatelia vidia krajsie ceny."
-        actionButtons={<Button>Prihlasit sa</Button>}
-      />,
-    );
-
-    await expect(
-      page.getByTestId("alert-title-description-buttons"),
-    ).toMatchScreenshot("alert-preview-title-description-buttons");
-  });
-
-  test("Preview: success type", async () => {
-    render(
-      <Alert
-        data-testid="alert-success"
-        type="success"
-        title="Vyborne. Vsetko prebehlo rychlo a hladko"
-      />,
-    );
-
-    await expect(page.getByTestId("alert-success")).toMatchScreenshot(
-      "alert-preview-success",
-    );
-  });
-
-  test("Preview: warning type", async () => {
-    render(
-      <Alert
-        data-testid="alert-warning"
-        type="warning"
-        title="Na toto si daj pozor!"
-      />,
-    );
-
-    await expect(page.getByTestId("alert-warning")).toMatchScreenshot(
-      "alert-preview-warning",
-    );
-  });
-
-  test("Preview: danger type", async () => {
-    render(
-      <Alert data-testid="alert-danger" type="danger" title="Stala sa chyba" />,
-    );
-
-    await expect(page.getByTestId("alert-danger")).toMatchScreenshot(
-      "alert-preview-danger",
-    );
-  });
-
-  test("Preview: custom title renderer", async () => {
-    render(
-      <Alert
-        data-testid="alert-custom-title"
-        title="Prihlasit sa je jednoduche a rozumne"
-        renderTitle={(props) => (
-          <h3 className="alert__title mb-medium">{props.title}</h3>
-        )}
-        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
-      />,
-    );
-
-    await expect(page.getByTestId("alert-custom-title")).toMatchScreenshot(
-      "alert-preview-custom-title",
-    );
-  });
-
-  test("Preview: full width", async () => {
-    render(
-      <Alert
-        data-testid="alert-full-width"
-        isFullWidth
-        title="Dobre vediet!"
-        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
-      />,
-    );
-
-    await expect(page.getByTestId("alert-full-width")).toMatchScreenshot(
-      "alert-preview-full-width",
-    );
-  });
-});

package/src/components/CarouselHero/tests/CarouselHero.visual.test.jsx

@@ -1,90 +0,0 @@
-import { beforeEach, describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-
-import { CarouselHero, CarouselHeroItem } from "../";
-
-const slides = (
-  <>
-    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+1">
-      <h2>Slide 1</h2>
-      <p>First slide content</p>
-    </CarouselHeroItem>
-    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+2">
-      <h2>Slide 2</h2>
-      <p>Second slide content</p>
-    </CarouselHeroItem>
-    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+3">
-      <h2>Slide 3</h2>
-      <p>Third slide content</p>
-    </CarouselHeroItem>
-    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+4">
-      <h2>Slide 4</h2>
-      <p>Fourth slide content</p>
-    </CarouselHeroItem>
-    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+5">
-      <h2>Slide 5</h2>
-      <p>Fifth slide content</p>
-    </CarouselHeroItem>
-  </>
-);
-
-const tabs = [
-  { label: "Motorola Edge 50 Fusion" },
-  { label: "3 mesiace zadarmo" },
-  { label: "Nekonečné dáta" },
-  { label: "iPhone16 Pro" },
-  { label: "HONOR 200" },
-];
-
-async function getCarouselState() {
-  return page.evaluate(() => {
-    const element = document.getElementById("carousel-hero-regression");
-    const instance = element?.ODS_CarouselHero?.instance;
-
-    return {
-      activeIndex: instance?.activeIndex,
-      realIndex: instance?.realIndex,
-      transform: instance?.wrapperEl?.style.transform ?? "",
-    };
-  });
-}
-
-describe("CarouselHero visual flow", () => {
-  beforeEach(async () => {
-    await page.viewport(1280, 720);
-  });
-
-  test("wraps and keeps adjacent tab navigation short", async () => {
-    render(
-      <CarouselHero id="carousel-hero-regression" tabs={tabs}>
-        {slides}
-      </CarouselHero>,
-    );
-
-    await expect(page.getByRole("tab", { name: "HONOR 200" })).toBeVisible();
-
-    await page.getByRole("tab", { name: "HONOR 200" }).click();
-    await page.waitForTimeout(500);
-
-    let state = await getCarouselState();
-    expect(state.realIndex).toBe(4);
-    expect(state.activeIndex).toBe(4);
-
-    await page.getByRole("button", { name: "Nasledujúci snímok" }).click();
-    await page.waitForTimeout(500);
-
-    state = await getCarouselState();
-    expect(state.realIndex).toBe(0);
-    expect(state.activeIndex).toBe(0);
-
-    await page.getByRole("tab", { name: "3 mesiace zadarmo" }).click();
-    await page.waitForTimeout(500);
-
-    state = await getCarouselState();
-    expect(state.realIndex).toBe(1);
-    expect(state.activeIndex).toBe(1);
-    expect(state.transform).toContain("translate3d");
-    expect(state.transform).toContain("-");
-  });
-});