@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

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

@@ -11,10 +11,12 @@
 }
 
 #{config.$class-root},
+.is-light #{config.$class-root},
 #{config.$class-root}.is-light {
   @include mixins.light-vars;
 }
 
+.is-dark #{config.$class-root},
 #{config.$class-root}.is-dark {
   @include mixins.dark-vars;
 }
@@ -28,6 +30,10 @@
 
     &-item {
       @include mixins.nav-item;
+
+      &--lead {
+        @include mixins.nav-item-lead;
+      }
     }
 
     &--vertical {
@@ -38,6 +44,10 @@
       @include mixins.nav-space-small;
     }
 
+    &--mobile-locale {
+      @include mixins.nav-mobile-locale;
+    }
+
     &-dropdown {
       @include mixins.nav-dropdown;
 
@@ -52,6 +62,14 @@
 
     &-link {
       @include mixins.nav-link;
+
+      &--locale {
+        @include mixins.nav-link-locale;
+      }
+
+      &--no-line {
+        @include mixins.nav-link-no-line;
+      }
     }
 
     &-cart-icon {
@@ -68,6 +86,10 @@
 
     &-icon {
       @include mixins.nav-icon;
+
+      &--no-gap-md-down {
+        @include mixins.nav-icon-no-gap-md-down;
+      }
     }
 
     &-spacer {
@@ -83,6 +105,10 @@
     }
   }
 
+  &__divider {
+    @include mixins.divider;
+  }
+
   &__top {
     @include mixins.top;
   }
@@ -113,6 +139,38 @@
     &-body {
       @include mixins.mobile-body;
     }
+
+    &-account {
+      @include mixins.mobile-account;
+
+      &-avatar {
+        @include mixins.mobile-account-avatar;
+      }
+
+      &-name {
+        @include mixins.mobile-account-name;
+      }
+
+      &-phone {
+        @include mixins.mobile-account-phone;
+      }
+
+      &-logout {
+        @include mixins.mobile-account-logout;
+      }
+
+      &-cta {
+        @include mixins.mobile-account-cta;
+      }
+
+      &-links {
+        @include mixins.mobile-account-links;
+      }
+
+      &-link {
+        @include mixins.mobile-account-link;
+      }
+    }
   }
 
   &__container {
@@ -131,6 +189,14 @@
     @include mixins.text-large;
   }
 
+  &__caption {
+    @include mixins.caption;
+
+    &--large {
+      @include mixins.caption-large;
+    }
+  }
+
   &-icon {
     @include mixins.icon;
   }
@@ -179,9 +245,17 @@
     @include mixins.input;
   }
 
+  &__input-wrapper {
+    @include mixins.input-wrapper;
+  }
+
   &__tag {
     @include mixins.tag;
 
+    &--orange {
+      @include mixins.tag-orange;
+    }
+
     &--transparent {
       @include mixins.tag-transparent;
     }

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

@@ -0,0 +1,41 @@
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+
+import { Megamenu, MegamenuBlog } from "../";
+
+describe("Megamenu logo markup", () => {
+  it("renders brand-mark wrapper for default Megamenu logo swap", () => {
+    const { container } = render(<Megamenu isSticky={false} />);
+
+    const logo = container.querySelector(".megamenu__nav-logo");
+    const brandMark = logo?.querySelector(
+      ":scope > [data-megamenu-brand-mark]",
+    );
+
+    expect(brandMark).toBeInTheDocument();
+    expect(
+      brandMark?.querySelector("[data-megamenu-logo-full]"),
+    ).toBeInTheDocument();
+    expect(
+      brandMark?.querySelector("[data-megamenu-logo-compact]"),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps compactLogoOnly output without brand-mark wrapper", () => {
+    const { container } = render(
+      <MegamenuBlog compactLogoOnly isSticky={false} />,
+    );
+
+    const logo = container.querySelector(".megamenu__nav-logo");
+
+    expect(
+      logo?.querySelector(":scope > [data-megamenu-brand-mark]"),
+    ).not.toBeInTheDocument();
+    expect(
+      logo?.querySelector("[data-megamenu-logo-full]"),
+    ).not.toBeInTheDocument();
+    expect(
+      logo?.querySelector("[data-megamenu-logo-compact]"),
+    ).not.toBeInTheDocument();
+  });
+});

package/src/components/Modal/Modal.static.ts

@@ -10,6 +10,8 @@ interface ModalConfig {
   root: string;
   /** Move modal into this element selector (must be unique in DOM) */
   modalsRoot: string;
+  /** Disable moving modal to #root-modals (for React controlled mode) */
+  disablePortal?: boolean;
 }
 
 const defaultConfig = (): ModalConfig => ({
@@ -23,6 +25,9 @@ const defaultConfig = (): ModalConfig => ({
   modalsRoot: "#root-modals",
 });
 
+const MODAL_SCROLLBAR_WIDTH_VAR = "--ods-modal-scrollbar-width";
+const BODY_LOCK_SCROLL_TOP_ATTR = "data-lock-scrolltop";
+
 interface HTMLElementWithModal extends HTMLElement {
   ODS_Modal?: Modal;
 }
@@ -111,7 +116,7 @@ export default class Modal {
   }
 
   init(): void {
-    if (this.config.modalsRoot) {
+    if (this.config.modalsRoot && !this.config.disablePortal) {
       Modal.moveToModalRoot(
         this.element,
         document.querySelector(this.config.modalsRoot),
@@ -134,7 +139,21 @@ export default class Modal {
   }
 
   destroy(): void {
-    this.instance.destroy();
+    if (this.instance) {
+      // Don't call this.instance.destroy() because a11y-dialog's destroy
+      // does replaceWith(cloneNode(true)) which breaks React!
+      // Instead, just hide and let the instance be garbage collected
+      this.instance.hide();
+      // Cast to any to access private methods for cleanup
+      const dialog = this.instance as any;
+      document.removeEventListener("click", dialog.handleTriggerClicks, true);
+      document.body.removeEventListener("focus", dialog.maintainFocus, true);
+      this.element.removeEventListener("keydown", dialog.bindKeypress, true);
+
+      // Make sure scroll is unlocked when destroying
+      Modal.unlockBody();
+    }
+
     this.element.ODS_Modal = this;
   }
 
@@ -153,74 +172,76 @@ export default class Modal {
     }
   }
 
+  // Track if body is locked
+  private static isLocked = false;
+
+  private static resolveBodyLockClassName(
+    className?: string,
+    context?: unknown,
+  ): string {
+    const modalContext = context as Modal | undefined;
+
+    return (
+      className ||
+      modalContext?.config?.classModalIsOpenBody ||
+      defaultConfig().classModalIsOpenBody
+    );
+  }
+
   static lockBody(className?: string, root?: string): void {
-    const actualClassName =
-      className || (this as unknown as Modal).config?.classModalIsOpenBody;
-    const actualRoot = root || (this as unknown as Modal).config?.root;
-
-    const container = document.querySelector(actualRoot);
-    // store current scrollTop value
-    const scrollTop =
-      document.documentElement.scrollTop || document.body.scrollTop;
-    document.body.setAttribute("data-lock-scrolltop", scrollTop.toString());
-
-    // add locking styles to body
-    document.body.style.height = "100%";
-    document.body.style.width = "100%";
-    document.body.style.overflow = "hidden";
-    document.body.style.position = "fixed";
+    if (Modal.isLocked) return;
 
-    // add locking styles to scrollTop
-    if (container) {
-      (container as HTMLElement).style.height = "100%";
-      (container as HTMLElement).style.width = "100%";
-      (container as HTMLElement).style.overflow = "hidden";
-      (container as HTMLElement).style.position = "fixed";
-      // scroll page-container to scrollTop position
-      (container as HTMLElement).scrollTop = scrollTop;
-    }
+    const actualClassName = Modal.resolveBodyLockClassName(className, this);
+
+    // Store scroll position
+    const scrollY = window.scrollY;
+    document.body.setAttribute(BODY_LOCK_SCROLL_TOP_ATTR, scrollY.toString());
+
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+
+    // Lock body with position fixed and offset
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.left = "0";
+    document.body.style.right = "0";
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+    document.body.style.setProperty(
+      MODAL_SCROLLBAR_WIDTH_VAR,
+      `${scrollbarWidth}px`,
+    );
 
     // add modal class
     document.body.classList.add(actualClassName);
-
-    // attempt to scroll top fixed position
-    window.requestAnimationFrame(() => {
-      window.scrollTo(0, scrollTop);
-    });
+    Modal.isLocked = true;
   }
 
   static unlockBody(className?: string, root?: string): void {
-    const actualClassName =
-      className || (this as unknown as Modal).config?.classModalIsOpenBody;
-    const actualRoot = root || (this as unknown as Modal).config?.root;
+    if (!Modal.isLocked) return;
 
-    const container = document.querySelector(actualRoot);
-    const scrollTop = document.body.getAttribute("data-lock-scrolltop") || "0";
+    const actualClassName = Modal.resolveBodyLockClassName(className, this);
+    const scrollTop = Number.parseInt(
+      document.body.getAttribute(BODY_LOCK_SCROLL_TOP_ATTR) || "0",
+      10,
+    );
 
-    // remove locking styles from body
-    document.body.style.height = "";
-    document.body.style.width = "";
-    document.body.style.overflow = "";
+    // Remove lock styles
     document.body.style.position = "";
+    document.body.style.top = "";
+    document.body.style.left = "";
+    document.body.style.right = "";
+    document.body.style.paddingRight = "";
+    document.body.style.removeProperty(MODAL_SCROLLBAR_WIDTH_VAR);
 
-    // add modal class
+    // remove modal class
     document.body.classList.remove(actualClassName);
 
-    // remove locking styles from page-container
-    if (container) {
-      (container as HTMLElement).style.height = "";
-      (container as HTMLElement).style.width = "";
-      (container as HTMLElement).style.overflow = "";
-      (container as HTMLElement).style.position = "";
-    }
-
-    // set scroll position back
-    window.requestAnimationFrame(() => {
-      window.scrollTo({
-        left: 0,
-        top: parseInt(scrollTop, 10),
-        behavior: "instant" as ScrollBehavior,
-      });
+    // Restore scroll position instantly (ignore scroll-behavior: smooth)
+    window.scrollTo({
+      top: Number.isFinite(scrollTop) ? scrollTop : 0,
+      left: 0,
+      behavior: "instant",
     });
+    Modal.isLocked = false;
   }
 }

package/src/components/Modal/Modal.tsx

@@ -1,18 +1,15 @@
 "use client";
 
-import React, { useEffect } from "react";
 import cx from "classnames";
-
-import { useStatic } from "../../utils/hooks";
+import React, { useEffect, useMemo } from "react";
 import ConditionalWrapper from "../../utils/ConditionalWrapper";
+import { useStatic } from "../../utils/hooks";
 import { Button } from "../Button";
 import { Buttons } from "../Buttons";
-
-// Use JavaScript version for now, then convert to TypeScript later
 import ModalStatic from "./Modal.static";
+import { ModalBody } from "./ModalBody";
 import { ModalCloseButton } from "./ModalCloseButton";
 import { ModalTitle } from "./ModalTitle";
-import { ModalBody } from "./ModalBody";
 
 const CLASS_ROOT = "modal";
 
@@ -31,8 +28,8 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   id: string;
   /** isActive controls if modal is opened or closed */
   isActive?: boolean;
-  /** Disable plugin initialization. */
-  noInit?: boolean;
+  /** Callback fired when modal is closed */
+  onHide?: () => void;
   /** Custom header renderer. Receives id as function param. Returned element(s) must contain a header with close button. */
   renderHeader?: (id: string) => React.ReactNode;
   /** Custom body renderer. Receives title as function param. Returned element(s) must contain a title. */
@@ -49,12 +46,8 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional CSS classes */
   className?: string;
-  /** Color scheme for the modal */
-  colorScheme?: "dark" | "light";
   /** Disables header paddings */
   disableHeaderSpacing?: boolean;
-  /** Disables body paddings */
-  disableBodySpacing?: boolean;
   /** Disables footer paddings */
   disableFooterSpacing?: boolean;
 }
@@ -65,7 +58,6 @@ const defaultProps = {
       Zatvoriť
     </Button>,
   ],
-  noInit: false,
 };
 
 const Modal: React.FC<ModalProps> = ({
@@ -74,8 +66,8 @@ const Modal: React.FC<ModalProps> = ({
   children,
   hasStickyFooter,
   id,
-  noInit = defaultProps.noInit,
   isActive,
+  onHide,
   size,
   title,
   renderHeader,
@@ -83,17 +75,42 @@ const Modal: React.FC<ModalProps> = ({
   renderTitle,
   renderFooter,
   fullHeight,
-  colorScheme,
   disableHeaderSpacing,
-  disableBodySpacing,
   disableFooterSpacing,
   ...other
 }) => {
-  const [modalRef, instance] = useStatic(ModalStatic);
+  // In React controlled mode (using isActive), we skip data-modal
+  // so vanilla JS won't initialize and move modal to #root-modals
+  // onHide alone works in uncontrolled mode - it's just a callback
+  const isReactControlled = isActive !== undefined;
+
+  const modalConfig = useMemo(
+    () => (isReactControlled ? { disablePortal: true } : {}),
+    [isReactControlled],
+  );
+  const [modalRef, instance] = useStatic(ModalStatic, modalConfig);
 
   useEffect(() => {
-    if (isActive && instance && (instance as any).current) {
-      (instance as any).current.show();
+    if (!instance.current || !onHide) return;
+
+    const handleHide = () => {
+      onHide();
+    };
+
+    instance.current.instance.on("hide", handleHide);
+
+    return () => {
+      instance.current?.instance.off("hide", handleHide);
+    };
+  }, [instance, onHide]);
+
+  useEffect(() => {
+    if (!instance.current) return;
+
+    if (isActive) {
+      instance.current.show();
+    } else if (isActive === false) {
+      instance.current.hide();
     }
   }, [instance, isActive]);
 
@@ -102,8 +119,6 @@ const Modal: React.FC<ModalProps> = ({
     {
       [`${CLASS_ROOT}__dialog--${size}`]: size,
       [`${CLASS_ROOT}__dialog--full-height`]: fullHeight,
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
     },
     className,
   );
@@ -121,7 +136,7 @@ const Modal: React.FC<ModalProps> = ({
   return (
     <div
       id={id}
-      data-modal={!noInit}
+      {...(!isReactControlled && { "data-modal": true })}
       className={CLASS_ROOT}
       ref={modalRef}
       role="dialog"
@@ -131,7 +146,6 @@ const Modal: React.FC<ModalProps> = ({
     >
       <div className="modal__overlay" tabIndex={-1} data-a11y-dialog-hide />
       <div className={dialogClasses} role="document" {...other}>
-        {}
         <div
           className={cx(`${CLASS_ROOT}__header`, {
             [`${CLASS_ROOT}__header--no-spacing`]: disableHeaderSpacing,
@@ -149,12 +163,7 @@ const Modal: React.FC<ModalProps> = ({
         {renderBody ? (
           renderBody()
         ) : (
-          <ModalBody
-            disableSpacing={disableBodySpacing}
-            withTopPadding={!disableBodySpacing && !!renderHeader}
-          >
-            {children}
-          </ModalBody>
+          <ModalBody withTopPadding={!!renderHeader}>{children}</ModalBody>
         )}
         <div
           className={cx(`${CLASS_ROOT}__footer`, {

package/src/components/Modal/ModalBody.tsx

@@ -1,23 +1,32 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
-export const colors = [
-  "white",
-  "gray",
-  "orange",
-  "orange-dark",
-  "black",
-  "blue",
-  "green",
-  "pink",
-  "violet",
-  "yellow",
+export const modalBodyColors = [
+  "background-primary",
+  "background-secondary",
+  "background-contrast",
+  "background-accent",
+  "background-accent1-blog",
+  "background-accent2-blog",
+  "surface-primary",
+  "surface-secondary",
+  "surface-tertiary",
+  "surface-subtle",
+  "surface-moderate",
+  "surface-contrast",
+  "surface-accent",
+  "fill-subtle",
+  "fill-accent1",
+  "fill-accent2",
+  "fill-accent3",
+  "fill-accent4",
+  "fill-accent5",
 ] as const;
 
-export type BodyColor = (typeof colors)[number];
+export type ModalBodyColor = (typeof modalBodyColors)[number];
 
 interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  color?: BodyColor;
+  color?: ModalBodyColor;
   className?: string;
   children?: React.ReactNode;
   withTopPadding?: boolean;
@@ -36,7 +45,10 @@ const ModalBody: React.FC<ModalBodyProps> = ({
 }) => (
   <div
     className={cx(CLASS_ROOT, className, {
-      [`bg-${color}`]: color,
+      ...(color && color !== "background-contrast" ? { [color]: true } : {}),
+      ...(color === "background-contrast"
+        ? { [`${color} text-inverse`]: true }
+        : {}),
       [`${CLASS_ROOT}--colorful`]: color,
       [`${CLASS_ROOT}--with-top-padding`]: withTopPadding,
       [`${CLASS_ROOT}--no-spacing`]: disableSpacing,

package/src/components/Modal/ModalCloseButton.tsx

@@ -1,6 +1,6 @@
 import { IconButton } from "../Button";
-import { IconButtonProps } from "../Button/IconButton";
 import { ButtonType } from "../Button/Button";
+import { IconButtonProps } from "../Button/IconButton";
 
 interface ExtendedIconButtonProps extends IconButtonProps {
   type?: ButtonType;

package/src/components/Modal/ModalProductFooter.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 interface ModalProductFooterProps extends React.HTMLAttributes<HTMLDivElement> {
   image?: React.ReactNode;

package/src/components/Modal/ModalProductHeader.tsx

@@ -1,10 +1,12 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 interface ModalProductHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   image?: React.ReactNode;
   /** Use small spacing */
   space?: "small";
+  /** Optional id for accessibility (e.g., for aria-labelledby) */
+  titleId?: string;
 }
 
 export const CLASS_ROOT = "modal__product";
@@ -12,7 +14,7 @@ export const CLASS_ROOT = "modal__product";
 const ModalProductHeader = React.forwardRef<
   HTMLDivElement,
   ModalProductHeaderProps
->(({ className, children, image, space, ...other }, ref) => {
+>(({ className, children, image, space, titleId, ...other }, ref) => {
   const classes = cx(
     `${CLASS_ROOT}-header`,
     {
@@ -25,7 +27,9 @@ const ModalProductHeader = React.forwardRef<
 
   return (
     <div className={classes} ref={ref} {...other}>
-      <div className={contentClasses}>{children}</div>
+      <div className={contentClasses} id={titleId}>
+        {children}
+      </div>
       {image}
     </div>
   );

package/src/components/Modal/index.ts

@@ -1,7 +1,6 @@
 export { Modal } from "./Modal";
 export { ModalBody } from "./ModalBody";
-export { ModalTitle } from "./ModalTitle";
 export { ModalCloseButton } from "./ModalCloseButton";
-export { ModalProductHeader } from "./ModalProductHeader";
 export { ModalProductFooter } from "./ModalProductFooter";
-export { ModalProductBody } from "./ModalProductBody";
+export { ModalProductHeader } from "./ModalProductHeader";
+export { ModalTitle } from "./ModalTitle";

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

@@ -42,7 +42,7 @@ $spacing: (
 
 $spacing-product-footer: (
   default: (
-    default: space.get("medium") space.get("small") convert.to-rem(40px),
-    md: space.get("medium") space.get("large") space.get("large") space.get("large"),
-  )
-)
+    default: space.get("medium"),
+    md: space.get("large"),
+  ),
+);