@orangesk/orange-design-system 3.9.0 → 3.11.0

package/src/components/Carousel/tests/Carousel.lifecycle.test.ts

@@ -0,0 +1,223 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import Carousel from "../Carousel.static";
+
+describe("Carousel lifecycle with real Swiper", () => {
+  let element: HTMLElement;
+  let carousel: Carousel;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) =>
+      setTimeout(() => callback(0), 16),
+    );
+    vi.stubGlobal("cancelAnimationFrame", clearTimeout);
+    document.body.innerHTML = `<div class="carousel" data-carousel-id="lifecycle-carousel">
+      <div class="carousel__viewport-wrapper"><div class="carousel__viewport"><div class="carousel__track">
+        <div class="carousel__slide">First</div><div class="carousel__slide">Second</div><div class="carousel__slide">Third</div>
+      </div></div></div>
+    </div><span data-carousel-controls="lifecycle-carousel" data-carousel-slide-index="1">Second</span>`;
+    element = document.querySelector(".carousel")!;
+    for (const node of [
+      element,
+      element.querySelector(".carousel__viewport")!,
+    ]) {
+      Object.defineProperty(node, "clientWidth", {
+        configurable: true,
+        value: 500,
+      });
+      Object.defineProperty(node, "clientHeight", {
+        configurable: true,
+        value: 200,
+      });
+    }
+  });
+
+  afterEach(() => {
+    carousel?.destroy();
+    vi.clearAllTimers();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    document.body.innerHTML = "";
+  });
+
+  it("does not initialize a carousel destroyed before its first frame", () => {
+    carousel = new Carousel(element);
+    carousel.destroy();
+    vi.advanceTimersByTime(100);
+    expect(element.querySelector(".swiper-initialized")).toBeNull();
+    expect(Carousel.getInstance(element)).toBeNull();
+  });
+
+  it("reuses the existing instance instead of initializing a second Swiper", () => {
+    carousel = new Carousel(element);
+    const repeated = new Carousel(element);
+    expect(repeated).toBe(carousel);
+  });
+
+  it("removes keyboard navigation handlers when destroyed", () => {
+    carousel = new Carousel(element);
+    vi.advanceTimersByTime(100);
+    const control = document.querySelector("[data-carousel-controls]")!;
+    carousel.destroy();
+    const event = new KeyboardEvent("keydown", {
+      key: "Enter",
+      cancelable: true,
+    });
+    control.dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(false);
+  });
+
+  it("does not trigger another Swiper update for a height-only resize", () => {
+    const observers: {
+      callback: ResizeObserverCallback;
+      targets: Element[];
+    }[] = [];
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        record: { callback: ResizeObserverCallback; targets: Element[] };
+        constructor(callback: ResizeObserverCallback) {
+          this.record = { callback, targets: [] };
+          observers.push(this.record);
+        }
+        observe(target: Element) {
+          this.record.targets.push(target);
+        }
+        disconnect() {}
+        unobserve() {}
+      },
+    );
+    carousel = new Carousel(element);
+    vi.advanceTimersByTime(100);
+    const firstSlide = element.querySelector(".carousel__slide")!;
+    const observer = observers.find((o) => o.targets.includes(firstSlide))!;
+    const update = vi.spyOn(carousel.instance, "update");
+    const notify = (target: Element, width: number, height: number) =>
+      observer.callback(
+        [
+          {
+            target,
+            contentRect: new DOMRect(0, 0, width, height),
+            borderBoxSize: [],
+            contentBoxSize: [],
+            devicePixelContentBoxSize: [],
+          },
+        ],
+        {} as ResizeObserver,
+      );
+    notify(firstSlide, 413.333, 250);
+    vi.advanceTimersByTime(32);
+    expect(update).not.toHaveBeenCalled();
+    Object.defineProperty(carousel.viewport, "clientWidth", { value: 600 });
+    notify(carousel.viewport, 600, 250);
+    vi.advanceTimersByTime(32);
+    expect(carousel.instance.width).toBe(600);
+  });
+
+  it("keeps an overflowing carousel enabled with percentage spacing", () => {
+    element
+      .querySelectorAll<HTMLElement>(".carousel__slide")
+      .forEach((slide) => {
+        Object.defineProperty(slide, "offsetWidth", {
+          get: () => Math.round(Number.parseFloat(slide.style.width) || 0),
+        });
+      });
+    carousel = new Carousel(element, {
+      slidesPerView: 2.8,
+      spaceBetween: "10%",
+      breakpoints: {},
+    });
+    vi.advanceTimersByTime(100);
+    expect(carousel.instance.virtualSize).toBeGreaterThan(500);
+    expect(carousel.instance.enabled).toBe(true);
+  });
+
+  it("keeps unequal centered slides enabled when their content overflows", () => {
+    const slides = [
+      ...element.querySelectorAll<HTMLElement>(".carousel__slide"),
+    ];
+    slides[2].remove();
+    slides[0].style.cssText =
+      "width:350px;box-sizing:border-box;padding:0;margin:0";
+    slides[1].style.cssText =
+      "width:200px;box-sizing:border-box;padding:0;margin:0";
+    carousel = new Carousel(element, {
+      slidesPerView: "auto",
+      centeredSlides: true,
+      spaceBetween: 20,
+      breakpoints: {},
+    });
+    vi.advanceTimersByTime(100);
+    expect(carousel.instance.virtualSize).toBe(570);
+    expect(carousel.instance.enabled).toBe(true);
+  });
+
+  it("disables auto slides that exactly fill the viewport", () => {
+    const slides = [
+      ...element.querySelectorAll<HTMLElement>(".carousel__slide"),
+    ];
+    slides[2].remove();
+    slides[0].style.cssText =
+      "width:300px;box-sizing:border-box;padding:0;margin:0";
+    slides[1].style.cssText =
+      "width:180px;box-sizing:border-box;padding:0;margin:0";
+    carousel = new Carousel(element, {
+      slidesPerView: "auto",
+      spaceBetween: 20,
+      breakpoints: {},
+    });
+    vi.advanceTimersByTime(100);
+    expect(carousel.instance.virtualSize).toBe(500);
+    expect(carousel.instance.enabled).toBe(false);
+  });
+
+  it.each(["", "carousel--bleed-right", "carousel--bleed-right-no-left"])(
+    "updates navigation and overflow after changing slides with %s",
+    (variant) => {
+      if (variant) element.classList.add(variant);
+      element.classList.add("carousel--side-arrows");
+      element.insertAdjacentHTML(
+        "beforeend",
+        '<div class="carousel__side-arrows"></div>',
+      );
+      document.body.insertAdjacentHTML(
+        "beforeend",
+        '<button data-carousel-controls="lifecycle-carousel" data-carousel-action="next">Next</button>',
+      );
+      carousel = new Carousel(element, {
+        slidesPerView: 3,
+        spaceBetween: 20,
+        breakpoints: {},
+      });
+      vi.advanceTimersByTime(100);
+      const next = document.querySelector<HTMLButtonElement>(
+        '[data-carousel-action="next"]',
+      )!;
+      const arrows = element.querySelector<HTMLElement>(
+        ".carousel__side-arrows",
+      )!;
+      expect(carousel.instance.enabled).toBe(false);
+      carousel.track.insertAdjacentHTML(
+        "beforeend",
+        '<div class="carousel__slide">Fourth</div>',
+      );
+      carousel.update();
+      expect(carousel.instance.enabled).toBe(true);
+      expect(next.disabled).toBe(false);
+      expect(arrows.hidden).toBe(false);
+      if (variant)
+        expect(
+          element.style.getPropertyValue("--carousel-bleed-shell-width"),
+        ).not.toBe("100%");
+      carousel.track.lastElementChild!.remove();
+      carousel.update();
+      expect(carousel.instance.enabled).toBe(false);
+      expect(next.disabled).toBe(true);
+      expect(arrows.hidden).toBe(true);
+      if (variant)
+        expect(
+          element.style.getPropertyValue("--carousel-bleed-shell-width"),
+        ).toBe("100%");
+    },
+  );
+});

package/src/components/Footer/Footer.tsx

@@ -1,6 +1,5 @@
 import cx from "classnames";
 import React from "react";
-import { SocialButton } from "../SocialButton";
 import {
   CLASS_ACCORDION_ICON,
   CLASS_ACCORDION_TOGGLE,
@@ -24,15 +23,26 @@ import {
   CLASS_TITLE,
 } from "./constants";
 import footerData, { apps, socials } from "./data";
-import { PlanObnovyImage } from "./PlanObnovy";
+import { FooterIcon } from "./FooterIcon";
 
 interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {
   data?: typeof footerData;
   className?: string;
+  /** Override the theme sprite URL for a custom hosting location. */
+  spritePath?: string;
 }
 
-const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
+const Footer: React.FC<FooterProps> = ({
+  className,
+  data = footerData,
+  spritePath,
+}) => {
   const accordionIdPrefix = `footer-${React.useId().replace(/:/g, "")}`;
+  const themeSpritePath =
+    spritePath ??
+    (className?.split(/\s+/).includes("is-dark")
+      ? "/footer-sprite-dark.svg"
+      : "/footer-sprite-light.svg");
 
   return (
     <footer className={cx(CLASS_ROOT, className)} data-footer>
@@ -43,45 +53,12 @@ const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
             aria-label="Odkaz na úvodnú stránku"
             className={CLASS_LOGO}
           >
-            <svg
+            <FooterIcon
+              name="logo"
+              spritePath={themeSpritePath}
               width="48"
               height="48"
-              viewBox="0 0 48 48"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M48 0H0V48H48V0Z" fill="black" />
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M48 48H0V0H48V48Z"
-                fill="#FF7900"
-              />
-              <path
-                d="M5.9078 44.1298C4.1702 44.1298 2.60156 43.0229 2.60156 40.6047C2.60156 38.1855 4.16924 37.0796 5.9078 37.0796C7.6454 37.0796 9.21116 38.1865 9.21116 40.6047C9.21116 43.0229 7.64636 44.1298 5.9078 44.1298ZM5.9078 38.5657C4.59356 38.5657 4.35356 39.7494 4.35356 40.6047C4.35356 41.4591 4.59356 42.6457 5.9078 42.6457C7.22204 42.6457 7.46204 41.4601 7.46204 40.6047C7.46204 39.7503 7.22204 38.5657 5.9078 38.5657Z"
-                fill="white"
-              />
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M10.418 37.2559H12.0912V38.0412C12.41 37.6179 13.1952 37.1196 13.9316 37.1196C14.0016 37.1196 14.088 37.1196 14.16 37.1283V38.7795H14.0736C13.3095 38.7795 12.4733 38.8985 12.2026 39.4927V43.9356H10.418V37.2559Z"
-                fill="white"
-              />
-              <path
-                d="M18.831 43.3547C18.1777 43.7913 17.4087 44.0223 16.623 44.0181C15.375 44.0181 14.6367 43.1887 14.6367 42.0751C14.6367 40.5794 16.0114 39.7903 18.8444 39.4706V39.0981C18.8444 38.6133 18.4767 38.3291 17.7961 38.3291C17.1164 38.3291 16.5634 38.5989 16.165 39.0971L14.9794 38.4223C15.6015 37.5506 16.55 37.1147 17.8239 37.1147C19.5673 37.1147 20.5455 37.8703 20.5455 39.0981C20.5455 39.0981 20.5436 43.9269 20.5455 43.9394H18.9865L18.831 43.3547ZM16.3686 41.9474C16.3686 42.3967 16.6498 42.8162 17.1606 42.8162C17.7126 42.8162 18.2511 42.5877 18.7887 42.1125V40.5304C17.1471 40.733 16.3686 41.1573 16.3686 41.9474Z"
-                fill="white"
-              />
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M21.9336 37.4342L23.3899 37.2336L23.5512 38.0256C24.371 37.4246 25.0229 37.1059 25.8437 37.1059C27.2184 37.1059 27.9288 37.8355 27.9288 39.2793V43.9296H26.1691V39.5846C26.1691 38.7667 25.9579 38.399 25.3214 38.399C24.7973 38.399 24.2731 38.6361 23.6741 39.1392V43.9296H21.9336V37.4342Z"
-                fill="white"
-              />
-              <path
-                d="M32.2317 42.5003C33.5642 42.4907 33.6784 41.1323 33.6784 40.2491C33.6784 39.2008 33.1677 38.355 32.2192 38.355C31.5885 38.355 30.8819 38.8158 30.8819 40.3221C30.8819 41.1438 30.9405 42.5118 32.2317 42.5003ZM35.3671 37.2328V43.5582C35.3671 44.6718 35.2787 46.515 32.0983 46.5314C30.785 46.541 29.5658 46.013 29.3239 44.8677L31.0567 44.5874C31.1296 44.9166 31.3322 45.2421 32.3152 45.2421C33.2263 45.2421 33.664 44.8072 33.664 43.7637V42.9851L33.641 42.9611C33.3616 43.4622 32.9373 43.9355 31.9168 43.9355C30.3578 43.9355 29.1328 42.8546 29.1328 40.5966C29.1328 38.3627 30.3981 37.1118 31.817 37.109C33.1514 37.107 33.6429 37.7147 33.76 38.0334L33.736 38.0315L33.8829 37.2328H35.3671ZM39.5709 44.0584C37.6029 44.0584 36.4279 42.7912 36.4279 40.5928C36.4279 38.3704 37.6163 37.1051 39.5431 37.1051C41.4698 37.1051 42.616 38.3339 42.616 40.5045C42.616 40.6216 42.6016 40.7349 42.6016 40.8501H38.1539C38.1664 42.1173 38.6925 42.7557 39.7274 42.7557C40.3907 42.7557 40.8314 42.4869 41.2442 41.9003L42.5306 42.6136C41.9642 43.5611 40.9427 44.0584 39.5709 44.0584ZM40.8899 39.7096C40.8899 38.8178 40.3773 38.2917 39.5431 38.2917C38.7482 38.2917 38.2519 38.8062 38.1827 39.7106L40.8899 39.7096ZM45.6256 34.7214L44.9776 36.3966L44.3191 34.7214H43.7546V36.9294H44.1203V35.0872H44.1299L44.8547 36.9304H45.088L45.808 35.0872H45.8195V36.9304H46.1824V34.7224L45.6256 34.7214ZM41.56 34.7214V35.0152H42.2503V36.9304H42.6151V35.0152H43.3072V34.7214H41.56Z"
-                fill="white"
-              />
-            </svg>
+            />
           </a>
           <ul
             className={cx(
@@ -94,11 +71,17 @@ const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
             <li className={CLASS_LIST_BREAK_SM_DOWN} aria-hidden="true" />
             {socials.map((social, index) => (
               <li key={`footer-social-link-${index}`}>
-                <SocialButton
-                  name={social.name}
+                <a
+                  className={`social-button social-button--${social.name}`}
                   href={social.url}
                   aria-label={social.label}
-                />
+                >
+                  <FooterIcon
+                    name={social.name}
+                    spritePath={themeSpritePath}
+                    className="icon icon--medium"
+                  />
+                </a>
               </li>
             ))}
           </ul>
@@ -122,17 +105,12 @@ const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
               >
                 <span className={CLASS_TITLE}>{column.title}</span>
                 <span className={CLASS_ACCORDION_ICON} aria-hidden="true">
-                  <svg
+                  <FooterIcon
+                    name="chevron-down"
+                    spritePath={themeSpritePath}
                     width="24"
                     height="24"
-                    viewBox="0 0 80 80"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M66.666 33.333 40 60 13.333 33.333 20 26.667l20 20 20-20 6.666 6.666Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                  />
                 </span>
               </button>
               <ul
@@ -166,7 +144,14 @@ const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
             {apps.map((app, index) => (
               <li key={`footer-app-link-${index}`}>
                 <a href={app.url} target="_blank" rel="noopener noreferrer">
-                  <img src={app.src} alt={app.label} />
+                  <FooterIcon
+                    name={app.icon}
+                    spritePath={themeSpritePath}
+                    width={app.width}
+                    height={40}
+                    role="img"
+                    aria-label={app.label}
+                  />
                 </a>
               </li>
             ))}
@@ -176,7 +161,12 @@ const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
             href="https://www.orange.sk/orange-slovensko/plan-obnovy"
             aria-label="Plán obnovy"
           >
-            <PlanObnovyImage />
+            <FooterIcon
+              name="plan-obnovy"
+              spritePath={themeSpritePath}
+              width="260"
+              height="60"
+            />
           </a>
         </div>
 

package/src/components/Footer/FooterIcon.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+interface FooterIconProps extends React.SVGAttributes<SVGSVGElement> {
+  name: string;
+  spritePath: string;
+}
+
+export const FooterIcon = ({ name, spritePath, ...other }: FooterIconProps) => (
+  <svg aria-hidden={other["aria-label"] ? undefined : "true"} {...other}>
+    <use xlinkHref={`${spritePath}#${name}`} />
+  </svg>
+);

package/src/components/Footer/data.ts

@@ -102,12 +102,14 @@ export const socials: Array<{ name: SocialName; url: string; label: string }> =
 export const apps = [
   {
     label: "App Store",
-    src: "/appstore.svg",
+    icon: "appstore",
+    width: 120,
     url: "https://apps.apple.com/sk/app/m%C3%B4j-orange/id519421813",
   },
   {
     label: "Google Play",
-    src: "/googleplay.svg",
+    icon: "googleplay",
+    width: 135,
     url: "https://play.google.com/store/apps/details?id=sk.orange.android.orangego",
   },
 ];

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

@@ -1,8 +1,71 @@
+import { readFileSync } from "node:fs";
 import { render } from "@testing-library/react";
 import footerData from "../data";
 import { Footer } from "../Footer";
 
 describe("Footer", () => {
+  it.each([
+    [undefined, "/footer-sprite-light.svg"],
+    ["custom-footer is-dark", "/footer-sprite-dark.svg"],
+  ])("uses a complete standalone sprite for %s", (className, spritePath) => {
+    const { container } = render(<Footer className={className} />);
+    const sprite = new DOMParser().parseFromString(
+      readFileSync(`public${spritePath}`, "utf8"),
+      "image/svg+xml",
+    );
+    expect(sprite.querySelector("parsererror")).toBeNull();
+    expect(sprite.querySelectorAll("symbol")).toHaveLength(10);
+    const references = Array.from(container.querySelectorAll("use"));
+    expect(references).toHaveLength(13);
+    for (const reference of references) {
+      const href = reference.getAttribute("xlink:href");
+      expect(href).toMatch(new RegExp(`^${spritePath}#`));
+      expect(sprite.getElementById(href.split("#")[1])).not.toBeNull();
+    }
+    expect(container.querySelector("img, path")).toBeNull();
+    for (const element of sprite.querySelectorAll("[clip-path]")) {
+      const id = element
+        .getAttribute("clip-path")
+        .match(/url\(#([^)]+)\)/)?.[1];
+      expect(sprite.getElementById(id)).not.toBeNull();
+    }
+  });
+
+  it("supports a custom sprite hosting URL", () => {
+    const { container } = render(<Footer spritePath="/assets/footer.svg" />);
+    for (const reference of container.querySelectorAll("use")) {
+      expect(reference.getAttribute("xlink:href")).toMatch(
+        /^\/assets\/footer\.svg#/,
+      );
+    }
+  });
+
+  it("keeps social interaction colors and fixes theme colors in each sprite", () => {
+    for (const [theme, color] of [
+      ["light", "#000000"],
+      ["dark", "#ffffff"],
+    ]) {
+      const sprite = new DOMParser().parseFromString(
+        readFileSync(`public/footer-sprite-${theme}.svg`, "utf8"),
+        "image/svg+xml",
+      );
+      for (const name of ["chevron-down", "plan-obnovy"]) {
+        const symbol = sprite.getElementById(name);
+        expect(symbol.outerHTML).not.toContain("currentColor");
+        const colors = [
+          symbol.getAttribute("fill"),
+          ...Array.from(symbol.querySelectorAll("[fill]"), (element) =>
+            element.getAttribute("fill"),
+          ),
+        ];
+        expect(colors).toContain(color === "#000000" ? "#000" : "#fff");
+      }
+      expect(sprite.getElementById("facebook-2").outerHTML).toContain(
+        "currentColor",
+      );
+    }
+  });
+
   it("renders without crashing", () => {
     const { getByRole } = render(<Footer />);
     // Should render a footer landmark

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

@@ -10,7 +10,7 @@
   transform: translateZ(0);
 }
 
-@mixin states($config: config.$states) {
+@mixin states($config: config.$states, $valid-icon: true) {
   @include generate.css-map($config, "default");
 
   &:focus {
@@ -40,7 +40,9 @@
 
   &.is-valid {
     padding-right: convert.to-rem(36px);
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath d='M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z M3.40550597,6.68901229 C2.99100286,7.0539857 2.95085113,7.6858763 3.31582458,8.1003794 L5.77477826,10.8930318 C6.1397517,11.3075349 6.7716423,11.3476866 7.18614541,10.9827132 C7.20478962,10.9662968 7.22281563,10.9491914 7.24018594,10.9314326 L11.8941565,6.17336831 C12.2803381,5.7785491 12.2733359,5.14542284 11.8785167,4.75924123 C11.4836975,4.37305961 10.8505712,4.38006176 10.4643896,4.77488097 L7.31720124,7.9924615 C6.93101963,8.3872807 6.29789337,8.3942828 5.90307416,8.0081012 C5.88531533,7.9907309 5.86820993,7.9727049 5.85179355,7.9540607 L4.81687313,6.77869369 C4.45189969,6.36419058 3.82000909,6.32403885 3.40550597,6.68901229 Z' fill='%2332c832' /%3E%3C/svg%3E");
+    @if $valid-icon {
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath d='M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z M3.40550597,6.68901229 C2.99100286,7.0539857 2.95085113,7.6858763 3.31582458,8.1003794 L5.77477826,10.8930318 C6.1397517,11.3075349 6.7716423,11.3476866 7.18614541,10.9827132 C7.20478962,10.9662968 7.22281563,10.9491914 7.24018594,10.9314326 L11.8941565,6.17336831 C12.2803381,5.7785491 12.2733359,5.14542284 11.8785167,4.75924123 C11.4836975,4.37305961 10.8505712,4.38006176 10.4643896,4.77488097 L7.31720124,7.9924615 C6.93101963,8.3872807 6.29789337,8.3942828 5.90307416,8.0081012 C5.88531533,7.9907309 5.86820993,7.9727049 5.85179355,7.9540607 L4.81687313,6.77869369 C4.45189969,6.36419058 3.82000909,6.32403885 3.40550597,6.68901229 Z' fill='%2332c832' /%3E%3C/svg%3E");
+    }
     background-size: convert.to-rem(16px);
     background-position: calc(100% - #{convert.to-rem(10px)});
     background-repeat: no-repeat;

package/src/components/Megamenu/Logo.tsx

@@ -1,13 +1,13 @@
+import { MegamenuIcon } from "./MegaMenuIcon";
+
 export const Logo: React.FC = () => {
   return (
-    <svg
+    <MegamenuIcon
+      name="logo-line"
+      width="40"
+      height="40"
       viewBox="0 0 40 40"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
-    >
-      <path d="M40 0H0V40H40V0Z" fill="#FF7900" />
-      <path d="M34.2897 28.57H5.71973V34.28H34.2897V28.57Z" fill="white" />
-    </svg>
+    />
   );
 };

package/src/components/Megamenu/LogoJeTu.tsx

@@ -1,65 +1,13 @@
+import { MegamenuIcon } from "./MegaMenuIcon";
+
 export const LogoJeTu: React.FC = () => {
   return (
-    <svg
+    <MegamenuIcon
+      name="megamenu-logo"
       width="40"
       height="67"
       viewBox="0 0 40 67"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_21208_2750)">
-        <rect width="40" height="40" fill="white" />
-        <rect width="40" height="40" fill="#FF7900" />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M35.4467 29.1254H36.0214V28.8803H34.5679V29.1254H35.1425V30.7169H35.4467V29.1254ZM38.1126 30.7169H38.4154V28.8859H37.9521L37.4126 30.2803L36.8647 28.8859H36.3971V30.7169H36.7V29.1831H36.7084L37.3098 30.7169H37.5014L38.1028 29.1831H38.1126V30.7169Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M30.2988 33.7648C30.2988 35.5929 31.2763 36.645 32.9143 36.645C34.0566 36.645 34.9045 36.231 35.3763 35.445L34.3045 34.8507C33.9622 35.3324 33.5974 35.5549 33.0439 35.5549C32.1833 35.5549 31.7467 35.0239 31.7354 33.9718H35.4354C35.4354 33.9274 35.4382 33.8817 35.441 33.8352C35.4438 33.7873 35.4467 33.7387 35.4467 33.6901C35.4467 31.8831 34.496 30.8619 32.8904 30.8619C31.2847 30.8619 30.2988 31.9366 30.2988 33.7648ZM32.8904 31.8507C33.5876 31.8507 34.0101 32.2873 34.0101 33.031H31.7636C31.8186 32.2732 32.2312 31.8507 32.8904 31.8507Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M29.4168 36.2296V30.969L28.1858 30.9718L28.0715 31.6068C27.9579 31.3346 27.5372 30.8676 26.4689 30.8676C25.2872 30.869 24.2351 31.9085 24.2351 33.7662C24.2351 35.6451 25.2562 36.5437 26.5506 36.5437C27.3999 36.5437 27.7534 36.1493 27.9858 35.7352L28.0055 35.7549V36.4014C28.0055 37.2704 27.6379 37.6338 26.8788 37.6338C26.0605 37.6338 25.8943 37.3606 25.8337 37.0873L24.39 37.3197C24.5929 38.2747 25.6055 38.7042 26.6971 38.7042C29.3464 38.6873 29.4168 37.1592 29.4168 36.2296ZM28.0114 33.4775C28.0114 34.2155 27.9184 35.3437 26.8086 35.3521C25.7353 35.3592 25.6874 34.2254 25.6874 33.538C25.6874 32.2859 26.2734 31.9028 26.7987 31.9028C27.5889 31.9028 28.0114 32.6099 28.0114 33.4775Z"
-          fill="white"
-        />
-        <path
-          d="M18.2454 31.1366L19.4552 30.969L19.5876 31.6281C20.2707 31.1281 20.813 30.8619 21.4961 30.8619C22.6397 30.8619 23.2285 31.469 23.2285 32.6704V36.5394H21.7679V32.9253C21.7679 32.245 21.5904 31.9394 21.0637 31.9394C20.6271 31.9394 20.1918 32.1408 19.6961 32.5563V36.5422H18.2454V31.1366Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M13.8309 36.6085C14.4826 36.6109 15.1202 36.4186 15.6619 36.0563L15.7957 36.5451H17.0915V32.5169C17.0915 31.4958 16.2859 30.869 14.838 30.869C13.7769 30.8681 12.9873 31.2296 12.469 31.9535L13.4549 32.5169C13.7788 32.1009 14.2814 31.864 14.8084 31.8789C15.3746 31.8789 15.6816 32.1127 15.6816 32.5169V32.8254C13.3253 33.0916 12.1816 33.7507 12.1816 34.9944C12.1816 35.9183 12.7943 36.6085 13.8309 36.6085ZM14.2719 35.6099C13.8484 35.6099 13.6133 35.2614 13.6127 34.8887C13.6137 34.2319 14.2616 33.8816 15.6268 33.7085V35.024C15.1789 35.4183 14.7324 35.6099 14.2719 35.6099ZM13.6127 34.8887C13.6127 34.8882 13.6127 34.8878 13.6127 34.8873V34.8901C13.6127 34.8897 13.6127 34.8892 13.6127 34.8887Z"
-          fill="white"
-        />
-        <path
-          d="M8.66626 30.9859H10.0564V31.6394C10.4387 31.1829 10.9929 30.905 11.5874 30.8718C11.6505 30.8702 11.7136 30.8735 11.7761 30.8817V32.2535H11.7057C11.0691 32.2535 10.3733 32.3521 10.1564 32.8465V36.5422H8.66626V30.9859Z"
-          fill="white"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M2.16504 33.7733C2.16504 35.7845 3.46786 36.7057 4.91433 36.7057C6.35941 36.7057 7.66363 35.7873 7.66363 33.7775C7.66363 31.7676 6.36081 30.8451 4.91433 30.8451C3.46786 30.8451 2.16504 31.762 2.16504 33.7733ZM3.61982 33.7676C3.61982 33.0634 3.82263 32.0775 4.91418 32.0775C6.00573 32.0775 6.20855 33.0564 6.20855 33.7676C6.20855 34.4789 6.00573 35.4648 4.91418 35.4648C3.82263 35.4648 3.61982 34.4719 3.61982 33.7676Z"
-          fill="white"
-        />
-      </g>
-      <path
-        d="M5.17993 48.9411V58.7468C5.17993 59.2294 5.12534 59.648 5.01587 60.0016C4.91751 60.3582 4.73923 60.6555 4.47974 60.8903C4.23215 61.1371 3.89396 61.3132 3.46899 61.4225C3.04305 61.5441 2.50403 61.6052 1.85376 61.6052C1.55135 61.6051 1.27816 61.5807 1.03442 61.5319L0.994385 61.5241V59.3054L1.06079 59.3298C1.18497 59.3749 1.35889 59.3991 1.58423 59.3991C1.84115 59.3991 2.06033 59.3467 2.24341 59.2438L2.24731 59.2419C2.42503 59.1581 2.52466 58.961 2.52466 58.6208V48.9411H5.17993ZM11.8215 48.6891C12.6201 48.6892 13.3188 48.8463 13.9153 49.1628H13.9143C14.5087 49.4661 14.9946 49.8788 15.3713 50.4011C15.7594 50.9225 16.0387 51.5165 16.2083 52.1823C16.3776 52.8477 16.4372 53.5433 16.3889 54.2682L16.386 54.3151H9.67896C9.72114 55.1097 9.92735 55.6774 10.2903 56.029C10.6621 56.3892 11.1998 56.5729 11.9114 56.5729C12.4184 56.5729 12.8518 56.4489 13.2141 56.2038C13.5814 55.9431 13.7996 55.6758 13.8792 55.403L13.8899 55.3669H16.2463L16.2249 55.4323C15.8625 56.5556 15.3054 57.3652 14.5491 57.8532C13.7956 58.3393 12.8853 58.5807 11.8215 58.5807C11.0844 58.5807 10.418 58.4665 9.82349 58.236L9.82251 58.235C9.22844 57.9925 8.72398 57.653 8.31079 57.2155C7.89803 56.7784 7.57705 56.2565 7.34692 55.6511V55.6501C7.12873 55.044 7.01978 54.378 7.01978 53.653C7.01978 52.9515 7.13417 52.2972 7.3645 51.6911C7.59477 51.0852 7.92285 50.5629 8.3479 50.1257C8.77246 49.6771 9.27609 49.3254 9.85767 49.071C10.4525 48.816 11.1075 48.6891 11.8215 48.6891ZM32.8323 48.9411V54.2468C32.8323 55.0107 32.9514 55.5757 33.1838 55.9479L33.2776 56.072C33.516 56.3432 33.8932 56.4831 34.4202 56.4831C35.1064 56.4831 35.5924 56.2819 35.8918 55.8903C36.1938 55.4835 36.3499 54.8133 36.3499 53.8688V48.9411H39.0061V58.3474H36.4758V57.0866C36.1525 57.6029 35.739 57.981 35.2327 58.2165C34.7106 58.4592 34.1756 58.5807 33.6282 58.5807C33.0262 58.5807 32.5135 58.5119 32.092 58.3718L31.9172 58.3073C31.4784 58.1245 31.1284 57.8675 30.8704 57.5358V57.5349C30.6136 57.1925 30.4309 56.784 30.3215 56.3102L30.3206 56.3093C30.2238 55.8255 30.176 55.2933 30.176 54.7145V48.9411H32.8323ZM27.1672 46.1511V48.9411H29.0393V50.7507H27.1672V55.3093C27.1673 55.5226 27.1854 55.698 27.22 55.8366C27.2547 55.9753 27.3053 56.0741 27.3684 56.1374C27.4317 56.2007 27.5304 56.2521 27.6692 56.2868C27.8079 56.3215 27.9839 56.3386 28.1975 56.3386C28.34 56.3386 28.4764 56.3328 28.6067 56.321C28.7371 56.3091 28.8616 56.2919 28.9797 56.2682L29.0393 56.2556V58.3395L28.9973 58.3464C28.7791 58.3827 28.5372 58.4066 28.2717 58.4186C28.007 58.4307 27.7482 58.4372 27.4954 58.4372C27.0969 58.4372 26.7157 58.4069 26.3528 58.3464V58.3454C26 58.2965 25.6822 58.194 25.4006 58.0349L25.3997 58.0339C25.1276 57.873 24.9112 57.6445 24.7512 57.3493C24.5899 57.0515 24.511 56.664 24.511 56.1911V50.7507H22.9631V48.9411H24.511V46.1511H27.1672ZM11.7493 50.7145C11.3972 50.7146 11.098 50.7697 10.8499 50.8766L10.7463 50.9255C10.4885 51.0544 10.2774 51.2174 10.1145 51.4147C9.96176 51.6145 9.85162 51.8264 9.78149 52.0485L9.78052 52.0475C9.72728 52.2502 9.69466 52.4329 9.67993 52.5954H13.7219C13.601 51.9822 13.3928 51.5194 13.0989 51.2028L13.0979 51.2018C12.8106 50.8803 12.3645 50.7145 11.7493 50.7145ZM5.17993 45.3952V47.6013H2.52466V45.3952H5.17993Z"
-        fill="var(--color-text-default)"
-        stroke="var(--color-text-default)"
-        strokeWidth="0.1"
-      />
-      <defs>
-        <clipPath id="clip0_21208_2750">
-          <rect width="40" height="40" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
+      aria-hidden="true"
+    />
   );
 };

package/src/components/Megamenu/MegaMenuIcon.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import cx from "classnames";
 import React from "react";
 
@@ -13,15 +15,31 @@ export interface MegaMenuIconProps extends React.SVGAttributes<SVGSVGElement> {
 }
 
 const CLASS_ROOT = "megamenu-icon";
+const MegamenuSpritePathContext = React.createContext(
+  "/megamenu-sprite-light.svg",
+);
+
+export const MegamenuSpritePathProvider = ({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: string;
+}) => (
+  <MegamenuSpritePathContext.Provider value={value}>
+    {children}
+  </MegamenuSpritePathContext.Provider>
+);
 
 const MegamenuIcon: React.FC<MegaMenuIconProps> = ({
   className,
   alt,
   name,
-  spritePath = "/sprite.svg",
+  spritePath,
   ...other
 }) => {
   const classes = cx(CLASS_ROOT, className);
+  const themeSpritePath = React.useContext(MegamenuSpritePathContext);
 
   return (
     <svg
@@ -31,16 +49,7 @@ const MegamenuIcon: React.FC<MegaMenuIconProps> = ({
       {...other}
     >
       {alt !== undefined && alt.length > 0 && <title>{alt}</title>}
-      {/* Light theme version (default) */}
-      <use
-        className={`${CLASS_ROOT}__use ${CLASS_ROOT}__use--light`}
-        xlinkHref={`${spritePath}#${name}`}
-      />
-      {/* Dark theme version */}
-      <use
-        className={`${CLASS_ROOT}__use ${CLASS_ROOT}__use--dark`}
-        xlinkHref={`${spritePath}#${name}`}
-      />
+      <use xlinkHref={`${spritePath ?? themeSpritePath}#${name}`} />
     </svg>
   );
 };