@orangesk/orange-design-system 3.8.0 → 3.10.0

package/src/components/Carousel/Carousel.tsx

@@ -17,6 +17,8 @@ import {
   CLASS_ROOT,
   CLASS_SCROLLBAR,
   CLASS_SCROLLBAR_DRAG,
+  CLASS_SIDE_ARROWS,
+  CLASS_SIDE_ARROWS_VARIANT,
   CLASS_TRACK,
   CLASS_VIEWPORT,
   CLASS_VIEWPORT_WRAPPER,
@@ -37,6 +39,8 @@ interface CarouselProps<T = ReactNode> extends HTMLAttributes<HTMLDivElement> {
   bleedRight?: boolean;
   /** Make carousel bleed right from its root edge without bleeding left */
   bleedRightNoLeft?: boolean;
+  /** Show navigation arrows beside the first visible slide */
+  showSideArrows?: boolean;
   className?: string;
 }
 
@@ -53,6 +57,7 @@ const Carousel = <T,>({
   showScrollbar = false,
   bleedRight = false,
   bleedRightNoLeft = false,
+  showSideArrows = false,
   ...other
 }: CarouselProps<T>) => {
   const [carouselRef] = useStatic(CarouselStatic);
@@ -77,6 +82,7 @@ const Carousel = <T,>({
     [`${CLASS_ROOT}--scrollbar`]: showScrollbar,
     [`${CLASS_ROOT}--bleed-right`]: bleedRight,
     [CLASS_BLEED_RIGHT_NO_LEFT]: bleedRightNoLeft,
+    [CLASS_SIDE_ARROWS_VARIANT]: showSideArrows,
   });
 
   const elementClasses = {
@@ -112,21 +118,38 @@ const Carousel = <T,>({
         </div>
       </div>
 
+      {showSideArrows && (
+        <div className={CLASS_SIDE_ARROWS}>
+          <Controls
+            className={elementClasses.prev}
+            icon="chevron-left"
+            aria-label="Naspäť"
+          />
+          <Controls
+            className={elementClasses.next}
+            icon="chevron-right"
+            aria-label="Ďalej"
+          />
+        </div>
+      )}
+
       {!showScrollbar && (
         <div className={elementClasses.navigation}>
           <div role="tablist" className={elementClasses.dots} />
-          <div className={elementClasses.controls}>
-            <Controls
-              className={elementClasses.prev}
-              icon="chevron-left"
-              aria-label="Naspäť"
-            />
-            <Controls
-              className={elementClasses.next}
-              icon="chevron-right"
-              aria-label="Ďalej"
-            />
-          </div>
+          {!showSideArrows && (
+            <div className={elementClasses.controls}>
+              <Controls
+                className={elementClasses.prev}
+                icon="chevron-left"
+                aria-label="Naspäť"
+              />
+              <Controls
+                className={elementClasses.next}
+                icon="chevron-right"
+                aria-label="Ďalej"
+              />
+            </div>
+          )}
         </div>
       )}
 

package/src/components/Carousel/constants.ts

@@ -11,6 +11,7 @@ export const CLASS_NEXT = `${CLASS_ROOT}__next`;
 export const CLASS_DOTS = `${CLASS_ROOT}__pagination`;
 export const CLASS_NAVIGATION = `${CLASS_ROOT}__navigation`;
 export const CLASS_CONTROLS = `${CLASS_ROOT}__controls`;
+export const CLASS_SIDE_ARROWS = `${CLASS_ROOT}__side-arrows`;
 export const CLASS_DOT = `${CLASS_ROOT}__pagination-item`;
 export const CLASS_SCROLLBAR = `${CLASS_ROOT}__scrollbar`;
 export const CLASS_SCROLLBAR_HORIZONTAL = `${CLASS_ROOT}__scrollbar-horizontal`;
@@ -19,6 +20,7 @@ export const CLASS_ACTIVE = "is-active";
 export const CLASS_SCROLLBAR_VARIANT = `${CLASS_ROOT}--scrollbar`;
 export const CLASS_BLEED_RIGHT = `${CLASS_ROOT}--bleed-right`;
 export const CLASS_BLEED_RIGHT_NO_LEFT = `${CLASS_ROOT}--bleed-right-no-left`;
+export const CLASS_SIDE_ARROWS_VARIANT = `${CLASS_ROOT}--side-arrows`;
 
 export const SELECTOR_VIEWPORT = `.${CLASS_VIEWPORT}`;
 export const SELECTOR_TRACK = `.${CLASS_TRACK}`;

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

@@ -70,6 +70,67 @@
   gap: convert.to-rem(8px);
 }
 
+@mixin side-arrows {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: min(var(--carousel-side-arrows-height, 100%), 100vh);
+  pointer-events: none;
+
+  &[hidden] {
+    display: none;
+  }
+
+  .controls {
+    flex: 0 0 auto;
+    pointer-events: auto;
+  }
+
+  .controls.swiper-button-lock {
+    display: inline-flex;
+  }
+
+  .controls[disabled] {
+    display: none;
+  }
+
+  .carousel__prev {
+    position: absolute;
+    inset-inline-start: 0;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .carousel__next {
+    position: absolute;
+    inset-inline-end: 0;
+    top: 50%;
+    transform: translate(50%, -50%);
+  }
+
+  @include breakpoint.get("md", "down") {
+    width: var(--carousel-side-arrows-width, 100%);
+  }
+}
+
+@mixin centered-mobile-variant {
+  @include breakpoint.get("sm", "down") {
+    .carousel__slide {
+      width: calc(100% - 40px);
+    }
+
+    .carousel__side-arrows {
+      inset-inline-start: 20px;
+      width: calc(100% - 40px);
+    }
+  }
+}
+
 @mixin track {
   transform: translateZ(0);
   width: 100%;

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

@@ -9,6 +9,13 @@
       @include mixins.scrollbar-variant;
     }
 
+    &--side-arrows {
+      .carousel__side-arrows {
+        @include mixins.side-arrows;
+      }
+      @include mixins.centered-mobile-variant;
+    }
+
     &--bleed-right,
     &--bleed-right-no-left {
       @include mixins.bleed-right-variant;

package/src/components/Footer/Footer.tsx

@@ -140,10 +140,7 @@ const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
                 id={`${accordionIdPrefix}-footer-section-panel-${index}`}
               >
                 {column.links.map((link, linkIndex) => (
-                  <li
-                    className="mb-small"
-                    key={`footer-link-${index}-${linkIndex}`}
-                  >
+                  <li key={`footer-link-${index}-${linkIndex}`}>
                     <a href={link.url}>{link.label}</a>
                   </li>
                 ))}

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

@@ -48,7 +48,9 @@
     @include base.focusring;
   }
 
-  * {
+  *,
+  *::before,
+  *::after {
     box-sizing: border-box;
   }
 

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

@@ -3,6 +3,9 @@
 @use "../../../styles/tools/convert";
 @use "../../../styles/tokens/breakpoint";
 @use "../../Megamenu/styles/mixins" as megamenuMixins;
+@use "../../SocialButton/styles/config" as socialButtonConfig;
+@use "../../SocialButton/styles/mixins" as socialButtonMixins;
+@use "../../Icon/styles/mixins" as iconMixins;
 
 #{config.$class-root} {
   @include mixins.globals;
@@ -112,4 +115,32 @@
       margin-bottom: convert.to-rem(30px);
     }
   }
+
+  // Keep shared component styles local so the standalone bundle works on legacy pages.
+  .social-button {
+    @include socialButtonMixins.base;
+    @include socialButtonMixins.size;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+  }
+
+  @each $name, $props in socialButtonConfig.$social-colors {
+    .social-button--#{$name} {
+      @include socialButtonMixins.color($name);
+    }
+  }
+
+  .icon {
+    @include iconMixins.base;
+    @include iconMixins.sizes;
+    @include iconMixins.colors;
+
+    use {
+      pointer-events: none;
+    }
+  }
 }

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

@@ -0,0 +1,62 @@
+import * as sass from "sass";
+
+describe("Footer standalone styles", () => {
+  let stylesheet;
+  let rules;
+
+  beforeAll(() => {
+    stylesheet = document.createElement("style");
+    stylesheet.textContent = sass.compile(
+      "src/components/Footer/styles/style.scss",
+    ).css;
+    document.head.append(stylesheet);
+
+    const flattenRules = (cssRules) =>
+      Array.from(cssRules).flatMap((rule) =>
+        rule.selectorText ? [rule] : flattenRules(rule.cssRules || []),
+      );
+    rules = flattenRules(stylesheet.sheet.cssRules);
+  });
+
+  afterAll(() => stylesheet.remove());
+
+  const styleFor = (selector) =>
+    rules.find((rule) => rule.selectorText === selector)?.style;
+
+  it("sizes social buttons and icons without global ODS styles", () => {
+    expect(styleFor(".footer .social-button")?.display).toBe("inline-flex");
+    expect(styleFor(".footer .social-button")?.width).toBe("2.5rem");
+    expect(styleFor(".footer .icon")?.getPropertyValue("fill")).toBe(
+      "currentcolor",
+    );
+    expect(styleFor(".footer .icon")?.width).toBe("var(--icon-size)");
+    expect(styleFor(".footer .icon")?.height).toBe("var(--icon-size)");
+    expect(
+      styleFor(".footer .icon--medium")?.getPropertyValue("--icon-size"),
+    ).toBe("1.5rem");
+  });
+
+  it.each(["facebook-2", "x", "linkedin-2", "youtube", "instagram"])(
+    "includes theme and interaction colors for %s",
+    (name) => {
+      const selector = `.footer .social-button--${name}`;
+      expect(styleFor(selector)?.color).toBe("var(--color-text-default)");
+      expect(styleFor(`${selector}:hover`)?.color).toBe("rgb(255, 255, 255)");
+      expect(styleFor(`${selector}:active, ${selector}.is-active`)?.color).toBe(
+        "var(--color-text-inverse)",
+      );
+    },
+  );
+
+  it("keeps reused component styles inside the footer", () => {
+    const componentRules = rules.filter((rule) =>
+      /\.(social-button|icon)\b/.test(rule.selectorText),
+    );
+    expect(componentRules.length).toBeGreaterThan(0);
+    for (const rule of componentRules) {
+      for (const selector of rule.selectorText.split(",")) {
+        expect(selector.trim()).toMatch(/^\.footer /);
+      }
+    }
+  });
+});

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>
   );
 };

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>
+  );
 };