@orangesk/orange-design-system 3.9.0 → 3.11.0

package/src/components/Megamenu/Megamenu.tsx

@@ -58,7 +58,7 @@ import {
 import type { MegamenuTile, MenuItem, MenuSection } from "./data";
 import { megamenuTiles, menuSections } from "./data";
 import { getMegamenuIds } from "./ids";
-import { MegamenuIcon } from "./MegaMenuIcon";
+import { MegamenuIcon, MegamenuSpritePathProvider } from "./MegaMenuIcon";
 import { MegamenuSearchContent } from "./MegamenuSearchContent";
 import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
 import {
@@ -79,6 +79,8 @@ export type MegamenuProps = {
   isB2B?: boolean;
   /** Controls whether My Orange panel shows logged-in or logged-out content. */
   isLoggedIn?: boolean;
+  /** Replaces My Orange panel triggers with links and omits the account panel. */
+  myOrangeHref?: string;
   /** Number of items displayed on the cart badge. Empty cart when omitted or zero. */
   cartItems?: number;
   /** Shows an orange dot for a non-empty cart when item count is unavailable. */
@@ -229,6 +231,7 @@ export const Megamenu = ({
   compactLogoOnly = false,
   isB2B = false,
   isLoggedIn = true,
+  myOrangeHref,
   cartItems,
   cartHasItems = false,
   tiles = megamenuTiles,
@@ -239,7 +242,36 @@ export const Megamenu = ({
   const hasCartItems = cartItems !== undefined && cartItems > 0;
   const showCartDot = cartHasItems && !hasCartItems;
 
-  return (
+  const myOrangeContent = (
+    <>
+      <MegamenuIcon
+        width={24}
+        height={24}
+        name="user"
+        className={CLASS_NAV_ICON}
+        aria-hidden="true"
+      />
+      Môj Orange
+    </>
+  );
+  const myOrangeControl = myOrangeHref ? (
+    <a href={myOrangeHref} className={CLASS_NAV_BUTTON}>
+      {myOrangeContent}
+    </a>
+  ) : (
+    <button
+      type="button"
+      className={CLASS_NAV_BUTTON}
+      data-megamenu-mobile-toggle
+      data-megamenu-mobile-target="my-orange"
+      aria-haspopup="dialog"
+      aria-expanded="false"
+    >
+      {myOrangeContent}
+    </button>
+  );
+
+  const content = (
     <header>
       <nav
         className={cx(CLASS_ROOT, className, {
@@ -391,7 +423,7 @@ export const Megamenu = ({
                   <MegamenuIcon
                     width={16}
                     height={16}
-                    name="rewards"
+                    name="rewards-accent"
                     className={CLASS_NAV_ICON_CTA}
                     aria-hidden="true"
                   />
@@ -468,25 +500,7 @@ export const Megamenu = ({
                   ) : null}
                 </a>
               </li>
-              <li className={CLASS_NAV_ITEM}>
-                <button
-                  type="button"
-                  className={CLASS_NAV_BUTTON}
-                  data-megamenu-mobile-toggle
-                  data-megamenu-mobile-target="my-orange"
-                  aria-haspopup="dialog"
-                  aria-expanded="false"
-                >
-                  <MegamenuIcon
-                    width={24}
-                    height={24}
-                    name="user"
-                    className={CLASS_NAV_ICON}
-                    aria-hidden="true"
-                  />
-                  Môj Orange
-                </button>
-              </li>
+              <li className={CLASS_NAV_ITEM}>{myOrangeControl}</li>
               <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_LG_UP)}>
                 <button
                   type="button"
@@ -639,7 +653,7 @@ export const Megamenu = ({
                       <MegamenuIcon
                         width={16}
                         height={16}
-                        name="rewards"
+                        name="rewards-accent"
                         className={CLASS_NAV_ICON_CTA}
                         aria-hidden="true"
                       />
@@ -657,25 +671,7 @@ export const Megamenu = ({
                     role="group"
                     aria-labelledby="mobile-quick-access-heading"
                   >
-                    <li className={CLASS_NAV_ITEM}>
-                      <button
-                        type="button"
-                        className={CLASS_NAV_BUTTON}
-                        data-megamenu-mobile-toggle
-                        data-megamenu-mobile-target="my-orange"
-                        aria-haspopup="dialog"
-                        aria-expanded="false"
-                      >
-                        <MegamenuIcon
-                          width={24}
-                          height={24}
-                          name="user"
-                          className={CLASS_NAV_ICON}
-                          aria-hidden="true"
-                        />
-                        Môj Orange
-                      </button>
-                    </li>
+                    <li className={CLASS_NAV_ITEM}>{myOrangeControl}</li>
                     <li className={CLASS_NAV_ITEM}>
                       <a href="/" className={CLASS_NAV_BUTTON}>
                         <MegamenuIcon
@@ -751,12 +747,14 @@ export const Megamenu = ({
           </div>
         </MegamenuMobilePanel>
 
-        <MyOrangeMobilePanel
-          panelId={ids.myOrangePanelId}
-          titleId={ids.myOrangeTitleId}
-          isB2B={isB2B}
-          isLoggedIn={isLoggedIn}
-        />
+        {!myOrangeHref ? (
+          <MyOrangeMobilePanel
+            panelId={ids.myOrangePanelId}
+            titleId={ids.myOrangeTitleId}
+            isB2B={isB2B}
+            isLoggedIn={isLoggedIn}
+          />
+        ) : null}
 
         <button
           aria-label="Zatvoriť dropdown menu"
@@ -767,4 +765,16 @@ export const Megamenu = ({
       <div className={CLASS_SPACER} 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/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

@@ -528,6 +528,7 @@
   &:focus,
   &:active,
   &.is-active {
+    color: var(--color-text-default) !important;
     box-shadow: config.$active-line;
   }
 
@@ -951,7 +952,8 @@
   align-items: center;
   height: convert.to-rem(40px);
 
-  img {
+  img,
+  svg {
     display: block;
     width: auto;
     max-width: convert.to-rem(52px);
@@ -1107,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 {
@@ -1270,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);
 
@@ -1301,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;
     }
@@ -1320,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#/,
+      );
+    }
+  },
+);