@orangesk/orange-design-system 3.3.1 → 3.5.0

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

@@ -4,8 +4,19 @@ import "@testing-library/jest-dom/vitest";
 import { Megamenu, MegamenuBlog } from "../";
 
 describe("Megamenu logo markup", () => {
+  it("is sticky by default and supports disabling stickiness", () => {
+    const { container, rerender } = render(<Megamenu />);
+    const nav = container.querySelector("[data-megamenu]");
+
+    expect(nav).not.toHaveClass("non-sticky");
+
+    rerender(<Megamenu notSticky />);
+
+    expect(nav).toHaveClass("non-sticky");
+  });
+
   it("renders brand-mark wrapper for default Megamenu logo swap", () => {
-    const { container } = render(<Megamenu isSticky={false} />);
+    const { container } = render(<Megamenu notSticky />);
 
     const logo = container.querySelector(".megamenu__nav-logo");
     const brandMark = logo?.querySelector(
@@ -22,9 +33,7 @@ describe("Megamenu logo markup", () => {
   });
 
   it("keeps compactLogoOnly output without brand-mark wrapper", () => {
-    const { container } = render(
-      <MegamenuBlog compactLogoOnly isSticky={false} />,
-    );
+    const { container } = render(<MegamenuBlog compactLogoOnly notSticky />);
 
     const logo = container.querySelector(".megamenu__nav-logo");
 
@@ -38,4 +47,99 @@ describe("Megamenu logo markup", () => {
       logo?.querySelector("[data-megamenu-logo-compact]"),
     ).not.toBeInTheDocument();
   });
+
+  it("renders desktop CTA link in default megamenu", () => {
+    const { container } = render(<Megamenu notSticky />);
+
+    const cta = container.querySelector(
+      ".megamenu__nav-item--main .megamenu__nav-link--cta",
+    );
+
+    expect(cta).toBeInTheDocument();
+    expect(cta).toHaveTextContent("Prejdite k nám");
+    expect(cta.querySelector(".megamenu__nav-icon--cta")).toBeInTheDocument();
+  });
+
+  it("renders mobile CTA before quick-access links", () => {
+    const { container } = render(<Megamenu notSticky />);
+
+    const mobileCta = container.querySelector(".megamenu__mobile-cta");
+    const quickAccess = container.querySelector("#mobile-quick-access-heading");
+
+    expect(mobileCta).toBeInTheDocument();
+    expect(mobileCta).toHaveTextContent("Prejdite k nám");
+    expect(mobileCta.compareDocumentPosition(quickAccess)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+  });
+
+  it("renders quick-access tiles below menu content", () => {
+    const { container } = render(<Megamenu notSticky />);
+
+    expect(container.querySelectorAll(".megamenu__tile")).toHaveLength(18);
+    expect(
+      container.querySelectorAll(".megamenu__tile .megamenu__tag"),
+    ).toHaveLength(12);
+    expect(
+      container.querySelector('.megamenu__tile[href="/"]'),
+    ).toHaveTextContent("Chcem nové číslo");
+  });
+
+  it("renders empty cart by default", () => {
+    const { container } = render(<Megamenu notSticky />);
+
+    const cart = container.querySelector(
+      ".megamenu__nav-cart-icon:not([data-items-in-cart]):not([data-cart-has-items])",
+    );
+
+    expect(cart).toBeInTheDocument();
+    expect(cart?.parentElement).toHaveAttribute("aria-label", "Košík");
+    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 />);
+
+    const cart = container.querySelector(
+      ".megamenu__nav-cart-icon[data-items-in-cart]",
+    );
+
+    expect(cart).toHaveAttribute("data-items-in-cart", "3");
+    expect(cart?.parentElement).toHaveAttribute(
+      "aria-label",
+      "Košík, 3 položka",
+    );
+    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/PromoBanner/PromoBanner.tsx

@@ -110,8 +110,6 @@ export const PromoBanner = ({
                 [`${CLASS_ROOT}__image--bleed-right`]: bleedImage,
                 [`${CLASS_ROOT}__image--bleed-sm-down`]: bleedImageSmDown,
                 [`align-self-${alignImage}`]: alignImage,
-                "pt-none": alignImage === "top",
-                "pb-none": alignImage === "bottom",
                 "align-center": variant === "vertical",
               },
               imageClassName,

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

@@ -51,10 +51,9 @@
   text-align: end;
   align-self: center;
 
-  @include breakpoint.get("md", "down") {
-    text-align: center;
-    padding-top: 0;
-    padding-bottom: 0;
+  // Page-builder output may wrap image content in a div.
+  > :not(img):not(picture):not(svg) {
+    width: 100%;
   }
 
   &[class*="grid__col"] {

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

@@ -336,7 +336,7 @@ describe("PromoBanner", () => {
       it("renders image from object src when image object is provided", () => {
         render(
           <PromoBanner
-            image={{ src: "https://example.com/test.jpg", srcSet: "test 1x" }}
+            image={{ src: "https://example.com/test.jpg", srcSet: "test" }}
           >
             Content
           </PromoBanner>,
@@ -351,7 +351,7 @@ describe("PromoBanner", () => {
             image={{
               src: "https://example.com/test.jpg",
               srcSet:
-                "https://example.com/test.jpg 1x, https://example.com/test@2x.jpg 2x",
+                "https://example.com/test.jpg, https://example.com/test@2x.jpg 2x",
             }}
           >
             Content
@@ -360,7 +360,7 @@ describe("PromoBanner", () => {
         const image = screen.getByRole("img");
         expect(image).toHaveAttribute(
           "srcSet",
-          "https://example.com/test.jpg 1x, https://example.com/test@2x.jpg 2x",
+          "https://example.com/test.jpg, https://example.com/test@2x.jpg 2x",
         );
       });
 

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;

package/src/styles/base/globals.scss

@@ -15,7 +15,7 @@
   }
 
   html:has(
-    .megamenu.is-sticky:not(.top-hidden)
+    .megamenu:not(.non-sticky):not(.top-hidden)
       .megamenu__nav-logo
       > [data-megamenu-brand-mark]
       + span
@@ -24,12 +24,12 @@
   }
 
   html:has(
-      .megamenu.is-sticky:not(.top-hidden)
+      .megamenu:not(.non-sticky):not(.top-hidden)
         .megamenu__nav-logo
         > [data-megamenu-brand-mark]
     ):not(
       :has(
-        .megamenu.is-sticky:not(.top-hidden)
+        .megamenu:not(.non-sticky):not(.top-hidden)
           .megamenu__nav-logo
           > [data-megamenu-brand-mark]
           + span
@@ -38,8 +38,8 @@
     --header-height: 147px;
   }
 
-  html:has(.megamenu.is-sticky.top-hidden),
-  html:has(.megamenu.is-sticky + .megamenu-spacer--small) {
+  html:has(.megamenu:not(.non-sticky).top-hidden),
+  html:has(.megamenu:not(.non-sticky) + .megamenu-spacer--small) {
     --header-height: 80px;
   }
 }

package/src/styles/base/styleguide.scss

@@ -9,7 +9,7 @@
 
 main {
   min-height: 100vh;
-  padding-top: var(--header-height, 80px) !important;
+  padding-top: var(--header-height, 80px);
 }
 
 .l-debug {

package/src/styles/export/color.js

@@ -66,7 +66,7 @@ export const exports = {
   "dark-surface-subtle": "#333333",
   "dark-surface-moderate": "#595959",
   "dark-surface-contrast": "#ffffff",
-  "dark-surface-accent": "#2b1a10",
+  "dark-surface-accent": "#333333",
   "dark-fill-primary": "#000000",
   "dark-fill-secondary": "#ff7900",
   "dark-fill-tertiary": "#f15e00",

package/src/styles/shame.scss

@@ -23,7 +23,7 @@
   body.has-modal {
     .mm-header.is-sticky,
     .megamenu-header.is-sticky,
-    [data-megamenu].is-sticky:not(.megamenu) {
+    [data-megamenu]:not(.non-sticky):not(.megamenu) {
       padding-right: var(--ods-modal-scrollbar-width, 0px);
     }
   }

package/src/styles/tokens/color.scss

@@ -68,7 +68,7 @@ $colors-dark: (
   surface-subtle: #333333,
   surface-moderate: #595959,
   surface-contrast: #ffffff,
-  surface-accent: #2b1a10,
+  surface-accent: #333333,
   fill-primary: #000000,
   fill-secondary: #ff7900,
   fill-tertiary: #f15e00,