@orangesk/orange-design-system 3.4.0 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -56,7 +56,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.3.0",
+    "@next/mdx": "16.3.1",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.14",
@@ -65,14 +65,14 @@
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
     "dompurify": "^3.4.13",
-    "html-react-parser": "6.1.5",
+    "html-react-parser": "6.1.7",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.3.0",
+    "next": "16.3.1",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
-    "query-string": "^9.4.1",
+    "query-string": "^9.5.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-element-to-jsx-string": "^17.0.1",
@@ -81,7 +81,7 @@
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
-    "swiper": "14.0.7",
+    "swiper": "14.1.0",
     "tabbable": "^6.5.0",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
@@ -102,10 +102,10 @@
     "@rollup/plugin-url": "^8.0.2",
     "@rollup/rollup-darwin-arm64": "^4.62.4",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "7.0.0",
+    "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.3",
-    "@types/node": "26.1.2",
+    "@testing-library/user-event": "^14.6.5",
+    "@types/node": "26.2.0",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",
     "@types/wnumb": "^1.2.3",
@@ -117,7 +117,7 @@
     "canvas": "^3.2.3",
     "fs-extra": "^11.4.0",
     "glob": "13.0.6",
-    "html-validate": "11.6.2",
+    "html-validate": "11.8.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "30.0.1",

package/src/components/Carousel/Carousel.static.ts

@@ -14,6 +14,7 @@ import Tooltip from "../Tooltip/Tooltip.static";
 import {
   CLASS_ACTIVE,
   CLASS_BLEED_RIGHT,
+  CLASS_BLEED_RIGHT_NO_LEFT,
   CLASS_DOT,
   CLASS_SCROLLBAR_DRAG,
   CLASS_SCROLLBAR_HORIZONTAL,
@@ -113,6 +114,13 @@ export default class Carousel {
     ) as HTMLElement | null;
   }
 
+  private isBleedRight(): boolean {
+    return (
+      this.element.classList.contains(CLASS_BLEED_RIGHT) ||
+      this.element.classList.contains(CLASS_BLEED_RIGHT_NO_LEFT)
+    );
+  }
+
   private getSlidesPerView(): number {
     return Number(this.instance?.params?.slidesPerView) || 1;
   }
@@ -146,7 +154,7 @@ export default class Carousel {
   }
 
   private getOverflowWidth(viewportWrapper?: HTMLElement): number {
-    const isBleedRight = this.element.classList.contains(CLASS_BLEED_RIGHT);
+    const isBleedRight = this.isBleedRight();
     const containerWidth = isBleedRight
       ? this.element.clientWidth || viewportWrapper?.clientWidth || 0
       : this.viewport?.clientWidth || 0;
@@ -223,7 +231,7 @@ export default class Carousel {
       this.getCustomOptions();
     }
 
-    const isBleedRight = this.element.classList.contains(CLASS_BLEED_RIGHT);
+    const isBleedRight = this.isBleedRight();
 
     this.instance = new Swiper(this.viewport, {
       ...this.config,
@@ -248,7 +256,7 @@ export default class Carousel {
 
     this.updateCarouselEnabledState();
 
-    if (this.element.classList.contains(CLASS_BLEED_RIGHT)) {
+    if (this.isBleedRight()) {
       this.adjustConfigForBleedRight();
       this.fixBleedRightScrollbar();
     }
@@ -480,13 +488,18 @@ export default class Carousel {
       document.documentElement?.clientWidth || window.innerWidth || 0;
     const wrapperRect = viewportWrapper.getBoundingClientRect();
     const rootRect = this.element.getBoundingClientRect();
+    const isBleedRightNoLeft = this.element.classList.contains(
+      CLASS_BLEED_RIGHT_NO_LEFT,
+    );
     const stableLeftInsetSource =
       rootRect.left > 0 ? rootRect.left : wrapperRect.left;
     const leftInset = Math.max(Math.floor(stableLeftInsetSource), 0);
-    const shellWidth = Math.max(Math.floor(viewportWidth), containerWidth, 0);
-    const shellMarginLeft = -leftInset;
+    const shellWidth = isBleedRightNoLeft
+      ? Math.max(Math.floor(viewportWidth - leftInset), containerWidth, 0)
+      : Math.max(Math.floor(viewportWidth), containerWidth, 0);
+    const shellMarginLeft = isBleedRightNoLeft ? 0 : -leftInset;
     const bleedViewportWidth = Math.max(
-      shellWidth - leftInset,
+      isBleedRightNoLeft ? shellWidth : shellWidth - leftInset,
       containerWidth,
       0,
     );
@@ -501,11 +514,12 @@ export default class Carousel {
         : slidesCount > slidesPerView;
     const shouldDisableBleed = !hasIntrinsicOverflow;
     const shouldEnableBleedClass = !shouldDisableBleed;
-    const hadBleedClass = this.element.classList.contains(CLASS_BLEED_RIGHT);
+    const hadBleedClass = this.isBleedRight();
     const nextBleedViewportWidth = shouldDisableBleed
       ? "100%"
       : `${bleedViewportWidth}px`;
-    const nextBleedMarginLeft = shouldDisableBleed ? "0px" : `${leftInset}px`;
+    const nextBleedMarginLeft =
+      shouldDisableBleed || isBleedRightNoLeft ? "0px" : `${leftInset}px`;
     const nextBleedShellWidth = shouldDisableBleed ? "100%" : `${shellWidth}px`;
     const nextBleedShellMarginLeft = shouldDisableBleed
       ? "0px"
@@ -524,7 +538,9 @@ export default class Carousel {
         "--carousel-bleed-shell-margin-left",
       ) !== nextBleedShellMarginLeft;
 
-    this.element.classList.toggle(CLASS_BLEED_RIGHT, shouldEnableBleedClass);
+    if (!isBleedRightNoLeft) {
+      this.element.classList.toggle(CLASS_BLEED_RIGHT, shouldEnableBleedClass);
+    }
 
     const baseWidth = shouldDisableBleed ? undefined : containerWidth;
     this.instance.params.width = baseWidth;

package/src/components/Carousel/Carousel.tsx

@@ -7,6 +7,7 @@ import { Controls } from "../Controls";
 import CarouselStatic from "./Carousel.static";
 import { CarouselItem } from "./CarouselItem";
 import {
+  CLASS_BLEED_RIGHT_NO_LEFT,
   CLASS_CONTROLS,
   CLASS_DOTS,
   CLASS_NAVIGATION,
@@ -33,6 +34,8 @@ interface CarouselProps<T = ReactNode> extends HTMLAttributes<HTMLDivElement> {
   showScrollbar?: boolean;
   /** Make carousel bleed to the right edge of screen while keeping left aligned with container */
   bleedRight?: boolean;
+  /** Make carousel bleed right from its root edge without bleeding left */
+  bleedRightNoLeft?: boolean;
   className?: string;
 }
 
@@ -48,6 +51,7 @@ const Carousel = <T,>({
   renderItems,
   showScrollbar = false,
   bleedRight = false,
+  bleedRightNoLeft = false,
   ...other
 }: CarouselProps<T>) => {
   const [carouselRef] = useStatic(CarouselStatic);
@@ -71,6 +75,7 @@ const Carousel = <T,>({
   const classes = cx(CLASS_ROOT, className, {
     [`${CLASS_ROOT}--scrollbar`]: showScrollbar,
     [`${CLASS_ROOT}--bleed-right`]: bleedRight,
+    [CLASS_BLEED_RIGHT_NO_LEFT]: bleedRightNoLeft,
   });
 
   const elementClasses = {

package/src/components/Carousel/constants.ts

@@ -18,6 +18,7 @@ export const CLASS_SCROLLBAR_DRAG = `${CLASS_ROOT}__scrollbar-drag`;
 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 SELECTOR_VIEWPORT = `.${CLASS_VIEWPORT}`;
 export const SELECTOR_TRACK = `.${CLASS_TRACK}`;

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

@@ -9,7 +9,8 @@
       @include mixins.scrollbar-variant;
     }
 
-    &--bleed-right {
+    &--bleed-right,
+    &--bleed-right-no-left {
       @include mixins.bleed-right-variant;
     }
 

package/src/components/Carousel/tests/Carousel.static.test.jsx

@@ -901,6 +901,91 @@ describe("Carousel Static - Auto-Disable Feature", () => {
       });
     });
 
+    it("should keep the left edge fixed for no-left bleed geometry", () => {
+      const originalInnerWidth = window.innerWidth;
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: 1000,
+      });
+
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 1.2;
+
+      document.body.innerHTML = `
+        <div class="carousel carousel--bleed-right-no-left" data-carousel-id="test-carousel" id="test-carousel">
+          <div class="carousel__viewport-wrapper">
+            <div class="carousel__viewport">
+              <div class="carousel__track">
+                <div class="carousel__slide">Slide 1</div>
+                <div class="carousel__slide">Slide 2</div>
+                <div class="carousel__slide">Slide 3</div>
+              </div>
+            </div>
+          </div>
+          <div class="carousel__pagination"></div>
+        </div>
+      `;
+
+      carouselElement = document.querySelector(".carousel");
+      const viewportWrapper = carouselElement.querySelector(
+        ".carousel__viewport-wrapper",
+      );
+      const track = carouselElement.querySelector(".carousel__track");
+
+      Object.defineProperty(viewportWrapper, "clientWidth", {
+        configurable: true,
+        value: 800,
+      });
+      Object.defineProperty(track, "scrollWidth", {
+        configurable: true,
+        value: 1200,
+      });
+      Object.defineProperty(viewportWrapper, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          right: 920,
+          bottom: 200,
+          left: 120,
+          width: 800,
+          height: 200,
+          x: 120,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(
+        carouselElement.style.getPropertyValue(
+          "--carousel-bleed-viewport-width",
+        ),
+      ).toBe("880px");
+      expect(
+        carouselElement.style.getPropertyValue("--carousel-bleed-margin-left"),
+      ).toBe("0px");
+      expect(
+        carouselElement.style.getPropertyValue("--carousel-bleed-shell-width"),
+      ).toBe("880px");
+      expect(
+        carouselElement.style.getPropertyValue(
+          "--carousel-bleed-shell-margin-left",
+        ),
+      ).toBe("0px");
+
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: originalInnerWidth,
+      });
+    });
+
     it("should calculate bleed-right scrollbar drag from logical viewport, not shell width", () => {
       mockSwiperInstance.slides = [
         document.createElement("div"),

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

@@ -365,6 +365,15 @@ describe("rendering Carousel", () => {
       expect(carousel).toHaveClass("carousel--bleed-right");
     });
 
+    it("should support right bleed without left bleed", () => {
+      const { container } = render(
+        <Carousel items={items} bleedRightNoLeft showScrollbar />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveClass("carousel--bleed-right-no-left");
+      expect(carousel).not.toHaveClass("carousel--bleed-right");
+    });
+
     it("should support minimal slides for testing auto-disable", () => {
       const minimalItems = [<p key="item1">item1</p>];
       const { container } = render(<Carousel items={minimalItems} />);

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

@@ -9,10 +9,12 @@
 }
 
 #{config.$class-root},
+.is-light #{config.$class-root},
 #{config.$class-root}.is-light {
   @include megamenuMixins.light-vars;
 }
 
+.is-dark #{config.$class-root},
 #{config.$class-root}.is-dark {
   @include megamenuMixins.dark-vars;
 }

package/src/components/Megamenu/Megamenu.tsx

@@ -81,8 +81,12 @@ export type MegamenuProps = {
   searchFilled?: boolean;
   compactLogoOnly?: boolean;
   isB2B?: boolean;
-  /** Optional number of items displayed on the cart badge. */
+  /** Controls whether My Orange panel shows logged-in or logged-out content. */
+  isLoggedIn?: boolean;
+  /** 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. */
+  cartHasItems?: boolean;
   /** Tiles displayed below every desktop and mobile menu section. */
   tiles?: MegamenuTile[];
 };
@@ -228,13 +232,16 @@ export const Megamenu = ({
   searchFilled,
   compactLogoOnly = false,
   isB2B = false,
+  isLoggedIn = true,
   cartItems,
+  cartHasItems = false,
   tiles = megamenuTiles,
 }: MegamenuProps) => {
   const ids = getMegamenuIds("main");
   const { hasSearchEmpty, hasSearchFilled, showSearchState, searchValue } =
     getMegamenuSearchState(searchEmpty, searchFilled);
-  const hasCartItems = cartItems !== undefined;
+  const hasCartItems = cartItems !== undefined && cartItems > 0;
+  const showCartDot = cartHasItems && !hasCartItems;
 
   return (
     <header>
@@ -440,7 +447,11 @@ export const Megamenu = ({
                       />
                     </span>
                   ) : (
-                    <span className={CLASS_NAV_CART_ICON} aria-hidden="true">
+                    <span
+                      className={CLASS_NAV_CART_ICON}
+                      data-cart-has-items={showCartDot ? "true" : undefined}
+                      aria-hidden="true"
+                    >
                       <MegamenuIcon
                         width={24}
                         height={24}
@@ -745,6 +756,7 @@ export const Megamenu = ({
           panelId={ids.myOrangePanelId}
           titleId={ids.myOrangeTitleId}
           isB2B={isB2B}
+          isLoggedIn={isLoggedIn}
         />
 
         <button

package/src/components/Megamenu/MyOrangeMobilePanel.tsx

@@ -31,12 +31,14 @@ type MyOrangeMobilePanelProps = {
   titleId: string;
   panelId?: string;
   isB2B?: boolean;
+  isLoggedIn?: boolean;
 };
 
 export const MyOrangeMobilePanel = ({
   titleId,
   panelId,
   isB2B = false,
+  isLoggedIn = true,
 }: MyOrangeMobilePanelProps) => {
   return (
     <MegamenuMobilePanel
@@ -65,18 +67,29 @@ export const MyOrangeMobilePanel = ({
             <div className={CLASS_MOBILE_ACCOUNT_AVATAR} aria-hidden="true">
               <MegamenuIcon name="user" width={72} height={72} />
             </div>
-            <p className={CLASS_MOBILE_ACCOUNT_PHONE}>0905 123 456</p>
-            <a href="#" className={CLASS_MOBILE_ACCOUNT_LOGOUT}>
-              Odhlásiť
-            </a>
-            <a href="#" className={CLASS_BUTTON}>
-              Orange Business
-            </a>
-            {isB2B ? (
-              <a href="#" className={cx(CLASS_BUTTON, CLASS_BUTTON_SECONDARY)}>
-                My Orange
+            {isLoggedIn ? (
+              <>
+                <p className={CLASS_MOBILE_ACCOUNT_PHONE}>0905 123 456</p>
+                <a href="#" className={CLASS_MOBILE_ACCOUNT_LOGOUT}>
+                  Odhlásiť
+                </a>
+                <a href="#" className={CLASS_BUTTON}>
+                  Orange Business
+                </a>
+                {isB2B ? (
+                  <a
+                    href="#"
+                    className={cx(CLASS_BUTTON, CLASS_BUTTON_SECONDARY)}
+                  >
+                    My Orange
+                  </a>
+                ) : null}
+              </>
+            ) : (
+              <a href="#" className={CLASS_BUTTON}>
+                Prihlásenie
               </a>
-            ) : null}
+            )}
           </div>
         </div>
 

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

@@ -461,7 +461,7 @@
 @mixin nav-cart-icon {
   position: relative;
 
-  &:after {
+  &::after {
     content: "";
     position: absolute;
     right: -2px;
@@ -470,6 +470,11 @@
     height: convert.to-rem(8px);
     background-color: var(--color-icon-brand);
     border-radius: 50%;
+    display: none;
+  }
+
+  &[data-cart-has-items]::after {
+    display: block;
   }
 
   &[data-items-in-cart]::after {

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

@@ -85,11 +85,11 @@ describe("Megamenu logo markup", () => {
     ).toHaveTextContent("Chcem nové číslo");
   });
 
-  it("renders orange cart dot by default", () => {
+  it("renders empty cart by default", () => {
     const { container } = render(<Megamenu notSticky />);
 
     const cart = container.querySelector(
-      ".megamenu__nav-cart-icon:not([data-items-in-cart])",
+      ".megamenu__nav-cart-icon:not([data-items-in-cart]):not([data-cart-has-items])",
     );
 
     expect(cart).toBeInTheDocument();
@@ -97,6 +97,25 @@ describe("Megamenu logo markup", () => {
     expect(cart?.nextElementSibling).not.toBeInTheDocument();
   });
 
+  it("renders optional orange cart dot", () => {
+    const { container } = render(<Megamenu cartHasItems notSticky />);
+
+    const cart = container.querySelector(
+      ".megamenu__nav-cart-icon[data-cart-has-items]",
+    );
+
+    expect(cart).toBeInTheDocument();
+    expect(cart).toHaveAttribute("data-cart-has-items", "true");
+  });
+
+  it("renders logged-out My Orange panel content", () => {
+    const { container } = render(<Megamenu isLoggedIn={false} notSticky />);
+
+    expect(container).toHaveTextContent("Prihlásenie");
+    expect(container).not.toHaveTextContent("Odhlásiť");
+    expect(container).not.toHaveTextContent("0905 123 456");
+  });
+
   it("renders optional cart item count", () => {
     const { container } = render(<Megamenu cartItems={3} notSticky />);
 
@@ -111,4 +130,16 @@ describe("Megamenu logo markup", () => {
     );
     expect(cart?.nextElementSibling).toHaveTextContent("3 položka v košíku");
   });
+
+  it("renders empty cart without a badge", () => {
+    const { container } = render(<Megamenu cartItems={0} notSticky />);
+
+    const cart = container.querySelector(
+      ".megamenu__nav-cart-icon:not([data-items-in-cart])",
+    );
+
+    expect(cart).toBeInTheDocument();
+    expect(cart?.parentElement).toHaveAttribute("aria-label", "Košík");
+    expect(cart?.nextElementSibling).not.toBeInTheDocument();
+  });
 });

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

@@ -1,4 +1,5 @@
 $arrow-size: 5px;
 $striped-color: var(--color-background-secondary);
+$striped-color-on-secondary: var(--color-background-primary);
 $normal-border-size: 1px;
 $fat-border-size: 2px;

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

@@ -1,4 +1,5 @@
 @use "./mixins";
+@use "./config";
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tools/generate";
 
@@ -39,6 +40,11 @@
       @include mixins.odd-row;
     }
 
+    &--striped.background-secondary tbody tr:nth-of-type(odd),
+    .background-secondary &--striped tbody tr:nth-of-type(odd) {
+      background-color: config.$striped-color-on-secondary;
+    }
+
     &--compact {
       @include mixins.compact;
     }

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

@@ -22,6 +22,11 @@
   .info-tooltip {
     @include mixins.info-tooltip;
 
+    .background-contrast &,
+    .surface-contrast & {
+      color: var(--color-text-inverse);
+    }
+
     &.is-active &__icon,
     &:focus &__icon {
       @include mixins.info-tooltip-active-icon;