@orangesk/orange-design-system 3.3.0 → 3.4.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,68 @@ 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 orange cart dot by default", () => {
+    const { container } = render(<Megamenu 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();
+  });
+
+  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");
+  });
 });

package/src/components/PromoBanner/PromoBanner.tsx

@@ -19,6 +19,8 @@ interface PromoBannerProps {
   imageFullWidth?: boolean;
   /** Make image extend to the edge of viewport even when inside container */
   bleedImage?: boolean;
+  /** Make image extend to Container boundaries on sm and smaller breakpoints */
+  bleedImageSmDown?: boolean;
   children?: React.ReactNode;
   itemClassName?: string;
   imageClassName?: string;
@@ -42,6 +44,7 @@ export const PromoBanner = ({
   flushTopSmDown,
   flushBottomSmDown,
   bleedImage,
+  bleedImageSmDown,
   children,
   itemClassName,
   imageClassName,
@@ -65,6 +68,9 @@ export const PromoBanner = ({
             className={cx(
               `${CLASS_ROOT}__image`,
               "align-center align-md-left",
+              {
+                [`${CLASS_ROOT}__image--bleed-sm-down`]: bleedImageSmDown,
+              },
               imageClassName,
             )}
           >
@@ -102,9 +108,8 @@ export const PromoBanner = ({
               `${CLASS_ROOT}__image`,
               {
                 [`${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"] {
@@ -64,6 +63,12 @@
 
     padding-right: 0 !important;
   }
+
+  > * {
+    @include breakpoint.get("sm", "down") {
+      width: 100%;
+    }
+  }
 }
 
 @mixin promo-banner-image-bleed-right() {
@@ -81,6 +86,16 @@
   }
 }
 
+@mixin promo-banner-image-bleed-sm-down() {
+  @include breakpoint.get("sm", "down") {
+    > * {
+      width: calc(100% + (2 * #{space.get("small")}));
+      max-width: none;
+      margin-left: calc(-1 * #{space.get("small")});
+    }
+  }
+}
+
 @mixin promo-banner-vertical() {
   .promo-banner__item {
     padding-top: 0 !important;

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

@@ -56,6 +56,10 @@
       &--bleed-right {
         @include mixins.promo-banner-image-bleed-right;
       }
+
+      &--bleed-sm-down {
+        @include mixins.promo-banner-image-bleed-sm-down;
+      }
     }
   }
 }

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

@@ -151,6 +151,24 @@ describe("PromoBanner", () => {
           expect(banner).not.toHaveClass("promo-banner--flush-bottom-sm-down");
         });
       });
+
+      describe("bleedImageSmDown", () => {
+        it("applies image bleed modifier class", () => {
+          render(
+            <PromoBanner image="test.jpg" bleedImageSmDown>
+              Content
+            </PromoBanner>,
+          );
+          const image = document.querySelector(".promo-banner__image");
+          expect(image).toHaveClass("promo-banner__image--bleed-sm-down");
+        });
+
+        it("does not apply image bleed modifier class when disabled", () => {
+          render(<PromoBanner image="test.jpg">Content</PromoBanner>);
+          const image = document.querySelector(".promo-banner__image");
+          expect(image).not.toHaveClass("promo-banner__image--bleed-sm-down");
+        });
+      });
     });
 
     describe("variant", () => {
@@ -318,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>,
@@ -333,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
@@ -342,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/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,