@orangesk/orange-design-system 3.2.0 → 3.3.0

package/src/components/Forms/Autocomplete/Autocomplete.static.ts

@@ -33,6 +33,19 @@ const addClassToken = (className: string, token: string) => {
   return [...classTokens, token].join(" ");
 };
 
+const isHtmlElement = (element: Element | null): element is HTMLElement => {
+  if (!element) {
+    return false;
+  }
+
+  const htmlElementConstructor =
+    element.ownerDocument?.defaultView?.HTMLElement;
+
+  return htmlElementConstructor
+    ? element instanceof htmlElementConstructor
+    : element.nodeType === Node.ELEMENT_NODE;
+};
+
 export default class Autocomplete {
   private element: HTMLElement;
   private config: AutocompleteConfig;
@@ -139,7 +152,7 @@ export default class Autocomplete {
   private getWrapper(): HTMLElement | null {
     if (this.element.tagName === "SELECT") {
       const rootElement = this.element.previousElementSibling;
-      if (!(rootElement instanceof HTMLElement)) {
+      if (!isHtmlElement(rootElement)) {
         return null;
       }
 

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

@@ -12,7 +12,8 @@
     &.surface-primary,
     &.surface-subtle,
     &.surface-moderate,
-    &.surface-accent {
+    &.surface-accent,
+    &.fill-accent6 {
       color: var(--color-text-default);
     }
 

package/src/components/Preview/PreviewGenerator.tsx

@@ -9,7 +9,6 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { createPortal } from "react-dom";
 import reactElementToJSXString from "react-element-to-jsx-string";
 import breakpoints from "@/styles/export/breakpoint";
 import { Button } from "../Button";
@@ -87,57 +86,80 @@ interface PreviewRenderContext {
 }
 
 interface PreviewBreakpoint {
+  deviceLabel?: string;
+  frameClassName?: string;
   key: string;
   label: string;
+  height: number | null;
   width: number | null;
 }
 
 const PREVIEW_BREAKPOINTS: PreviewBreakpoint[] = [
-  { key: "auto", label: "Auto", width: null },
+  {
+    key: "auto",
+    label: "Auto",
+    width: null,
+    height: null,
+    deviceLabel: undefined,
+    frameClassName: undefined,
+  },
   ...Object.entries(breakpoints).map(([key, value]) => {
     const tokenWidth = Number.parseInt(value, 10);
     // `xs` is 0 in tokens (mobile-first min-width), but preview needs a real viewport size.
     const width = key === "xs" ? 320 : tokenWidth;
+    const height =
+      key === "xs"
+        ? 640
+        : key === "sm"
+          ? 812
+          : key === "md"
+            ? 1024
+            : key === "lg"
+              ? 900
+              : 860;
+    const frameClassName =
+      key === "xs" || key === "sm"
+        ? "isPhone"
+        : key === "md"
+          ? "isTablet"
+          : "isDesktop";
+    const deviceLabel =
+      key === "xs"
+        ? "Phone S"
+        : key === "sm"
+          ? "Phone L"
+          : key === "md"
+            ? "Tablet"
+            : key === "lg"
+              ? "Laptop"
+              : "Desktop";
 
     return {
+      deviceLabel,
+      frameClassName,
       key,
-      label: `${key.toUpperCase()} (${width}px)`,
+      height,
+      label: `${deviceLabel} (${width} x ${height})`,
       width,
     };
   }),
 ];
 
-const IFRAME_VIEWPORT_GUTTER = 16;
-const getScreenLikeMinHeight = (width: number | null): number => {
-  if (width === null) {
-    return 1;
-  }
-
-  if (width <= 480) {
-    return 700;
-  }
-
-  if (width <= 768) {
-    return 640;
-  }
-
-  return 560;
-};
-
 interface PreviewViewportFrameProps {
-  children: ReactNode;
   className?: string;
-  minHeight?: number;
+  frameClassName?: string;
+  html: string;
+  height?: number;
 }
 
 const PreviewViewportFrame: React.FC<PreviewViewportFrameProps> = ({
-  children,
   className,
-  minHeight = 1,
+  frameClassName,
+  height = 1,
+  html,
 }) => {
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  const [iframeRoot, setIframeRoot] = useState<HTMLElement | null>(null);
-  const [height, setHeight] = useState(1);
+  const [isIframeScriptsReady, setIsIframeScriptsReady] = useState(false);
 
   useEffect(() => {
     const iframe = iframeRef.current;
@@ -148,11 +170,11 @@ const PreviewViewportFrame: React.FC<PreviewViewportFrameProps> = ({
 
     doc.open();
     doc.write(
-      `<!doctype html><html><head></head><body><div id="preview-iframe-root"></div></body></html>`,
+      `<!doctype html><html><head><meta name="viewport" content="width=device-width, initial-scale=1" /></head><body><div id="preview-iframe-root"></div></body></html>`,
     );
     doc.close();
 
-    // Mirror parent styles so components inside iframe have the same look.
+    // Mirror parent styles so components inside iframe have same look.
     const stylesToClone = document.querySelectorAll(
       'link[rel="stylesheet"], style',
     );
@@ -164,78 +186,60 @@ const PreviewViewportFrame: React.FC<PreviewViewportFrameProps> = ({
     doc.body.style.margin = "0";
     doc.body.style.padding = "0";
     doc.body.style.background = "transparent";
-    doc.body.style.overflow = "visible";
+    doc.body.style.overflow = "auto";
     doc.documentElement.style.margin = "0";
     doc.documentElement.style.padding = "0";
-    doc.documentElement.style.overflow = "visible";
+    doc.documentElement.style.height = "100%";
+    doc.documentElement.style.overflow = "auto";
+    doc.body.style.height = "100%";
 
-    iframe.setAttribute("scrolling", "no");
+    iframe.setAttribute("scrolling", "auto");
 
     const root = doc.getElementById("preview-iframe-root");
     if (!root) return;
 
+    const script = doc.createElement("script");
+    script.src = "/ods-preview-scripts.js";
+    script.addEventListener("load", () => {
+      setIsIframeScriptsReady(true);
+    });
+    doc.head.appendChild(script);
+
     root.style.width = "100%";
-    root.style.minHeight = "1px";
+    root.style.minHeight = "100%";
     root.style.boxSizing = "border-box";
-    root.style.paddingInline = `${IFRAME_VIEWPORT_GUTTER}px`;
     root.style.overflow = "visible";
-    setIframeRoot(root);
   }, []);
 
   useEffect(() => {
-    if (!iframeRoot) return;
+    const root = iframeRef.current?.contentDocument?.getElementById(
+      "preview-iframe-root",
+    );
 
-    const doc = iframeRoot.ownerDocument;
-    const frameWindow = doc.defaultView;
+    if (!root) return;
 
-    const updateHeight = () => {
-      const rootRect = iframeRoot.getBoundingClientRect();
+    root.innerHTML = html;
+  }, [html]);
 
-      // Include absolutely positioned descendants that may not contribute to
-      // scrollHeight/offsetHeight (e.g. sliders/popovers in docs previews).
-      let maxDescendantBottom = rootRect.bottom;
-      iframeRoot.querySelectorAll("*").forEach((node) => {
-        const nodeRect = node.getBoundingClientRect();
-        if (nodeRect.bottom > maxDescendantBottom) {
-          maxDescendantBottom = nodeRect.bottom;
-        }
-      });
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    const doc = iframe?.contentDocument;
+    if (!doc || !isIframeScriptsReady) return;
 
-      const nextHeight = Math.max(
-        Math.ceil(iframeRoot.getBoundingClientRect().height),
-        iframeRoot.scrollHeight,
-        Math.ceil(maxDescendantBottom - rootRect.top),
-        minHeight,
-        1,
-      );
-      // Update only when there is a meaningful delta to avoid feedback loops.
-      setHeight((prevHeight) =>
-        Math.abs(prevHeight - nextHeight) <= 1 ? prevHeight : nextHeight,
-      );
-    };
+    const frameWindow = doc.defaultView as
+      | (Window & {
+          ODS?: {
+            initModulesWithin?: (container: ParentNode) => void;
+          };
+        })
+      | null;
 
-    updateHeight();
-
-    const rafId = frameWindow?.requestAnimationFrame(updateHeight);
-    const timeoutId = frameWindow?.setTimeout(updateHeight, 100);
-    const resizeObserver =
-      typeof ResizeObserver !== "undefined"
-        ? new ResizeObserver(updateHeight)
-        : null;
-    resizeObserver?.observe(iframeRoot);
-
-    const mutationObserver =
-      typeof MutationObserver !== "undefined"
-        ? new MutationObserver(updateHeight)
-        : null;
-    mutationObserver?.observe(iframeRoot, {
-      subtree: true,
-      childList: true,
-      attributes: true,
-      characterData: true,
-    });
+    const init = () => {
+      frameWindow?.ODS?.initModulesWithin?.(doc);
+    };
 
-    frameWindow?.addEventListener("resize", updateHeight);
+    const rafId = frameWindow?.requestAnimationFrame(init);
+    const timeoutId = frameWindow?.setTimeout(init, 0);
 
     return () => {
       if (typeof rafId === "number" && frameWindow) {
@@ -244,22 +248,16 @@ const PreviewViewportFrame: React.FC<PreviewViewportFrameProps> = ({
       if (typeof timeoutId === "number" && frameWindow) {
         frameWindow.clearTimeout(timeoutId);
       }
-      resizeObserver?.disconnect();
-      mutationObserver?.disconnect();
-      frameWindow?.removeEventListener("resize", updateHeight);
     };
-  }, [children, iframeRoot, minHeight]);
+  }, [html, isIframeScriptsReady]);
 
   return (
-    <>
-      <iframe
-        ref={iframeRef}
-        title="Preview viewport"
-        className={cx("previewViewportFrame", className)}
-        style={{ height }}
-      />
-      {iframeRoot && createPortal(children, iframeRoot)}
-    </>
+    <iframe
+      ref={iframeRef}
+      title="Preview viewport"
+      className={cx("previewViewportFrame", className, frameClassName)}
+      style={{ height }}
+    />
   );
 };
 
@@ -270,6 +268,7 @@ interface PreviewProps {
   bgThemeExcludedColors?: string[];
   children?: ReactNode | ((context: PreviewRenderContext) => ReactNode);
   className?: string;
+  preserveDividerSpacing?: boolean;
   code?: ReactNode | string | ((context: PreviewRenderContext) => ReactNode);
   codeJSXOptions?: Record<string, any>;
   codeTypes?: string[];
@@ -344,6 +343,7 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   bgThemeExcludedColors = [],
   children,
   className,
+  preserveDividerSpacing = false,
   code,
   codeJSXOptions,
   codeTypes = ["html", "jsx"],
@@ -360,6 +360,8 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   const [isCodeShown, setIsCodeShown] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [isDarkMode, setIsDarkMode] = useState(isDark);
+  const [iframeMarkup, setIframeMarkup] = useState(html || "");
+  const iframeMarkupSourceRef = useRef<HTMLDivElement | null>(null);
   // Ensure unique dropdown id per Preview instance to avoid id collisions (SSR-safe)
   const backgroundDropdownId = `background-select-${useId()}`;
   const breakpointDropdownId = `breakpoint-select-${useId()}`;
@@ -457,6 +459,9 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   const wrapperClasses = cx("previewWrapper", {
     isFullscreen: isFullscreen,
   });
+  const liveCardClasses = cx(classes, {
+    "preview--preserve-divider-spacing": preserveDividerSpacing,
+  });
 
   const actions: ReactNode[] = [];
 
@@ -628,16 +633,35 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   // Use toCode for HTML rendering
   const codeForHTML = codeContent;
 
+  useEffect(() => {
+    if (html) {
+      setIframeMarkup(html);
+      return;
+    }
+
+    if (iframeMarkupSourceRef.current) {
+      setIframeMarkup(iframeMarkupSourceRef.current.innerHTML);
+    }
+  }, [
+    childrenToRender,
+    html,
+    isDarkMode,
+    previewBackground,
+    previewBreakpoint,
+  ]);
+
   const previewViewportWidth = disableBreakpoints
     ? null
     : previewBreakpoint.width;
-  const previewViewportMinHeight = getScreenLikeMinHeight(previewViewportWidth);
+  const previewViewportHeight = disableBreakpoints
+    ? null
+    : previewBreakpoint.height;
   const shouldUseIframeViewport = previewViewportWidth !== null;
 
   return (
     <div className={wrapperClasses}>
       <PreviewTitleBar actions={actions} />
-      <Card className={classes} {...other}>
+      <Card className={liveCardClasses} {...other}>
         <div
           className={cx("previewLiveViewportArea", {
             hasFixedViewport: shouldUseIframeViewport,
@@ -657,13 +681,23 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
             {!shouldUseIframeViewport ? (
               <div className="previewLive">{toRender}</div>
             ) : (
-              <PreviewViewportFrame
-                key={previewBreakpoint.key}
-                className={themeClass}
-                minHeight={previewViewportMinHeight}
-              >
-                <div className="previewLive">{toRender}</div>
-              </PreviewViewportFrame>
+              <>
+                <div
+                  ref={iframeMarkupSourceRef}
+                  hidden
+                  aria-hidden="true"
+                  style={{ display: "none" }}
+                >
+                  <div className="previewLive">{toRender}</div>
+                </div>
+                <PreviewViewportFrame
+                  key={previewBreakpoint.key}
+                  className={themeClass}
+                  frameClassName={previewBreakpoint.frameClassName}
+                  height={previewViewportHeight ?? 1}
+                  html={iframeMarkup}
+                />
+              </>
             )}
           </div>
         </div>

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

@@ -1,4 +1,6 @@
+@use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tokens/color" as *;
+@use "../../../styles/tokens/space";
 
 @layer components {
   // ===== PREVIEW GRID STYLES =====
@@ -61,6 +63,18 @@
     overflow: visible !important;
   }
 
+  .card.preview--preserve-divider-spacing {
+    .divider {
+      padding-top: space.get();
+      padding-bottom: space.get();
+
+      @include breakpoint.get("md") {
+        padding-top: space.get("large");
+        padding-bottom: space.get("large");
+      }
+    }
+  }
+
   .previewLive {
     transition: all 200ms ease-in-out;
     overflow: visible;
@@ -82,13 +96,6 @@
 
       .previewLiveViewport {
         background: var(--color-background-primary);
-        border: 1px solid
-          color-mix(in srgb, var(--color-border-strong), transparent 25%);
-        box-shadow:
-          0 0 0 1px
-            color-mix(in srgb, var(--color-border-strong), transparent 60%),
-          0 12px 28px
-            color-mix(in srgb, var(--color-text-default), transparent 88%);
       }
     }
   }
@@ -106,8 +113,7 @@
     width: 100%;
     border: 0;
     display: block;
-    background: transparent;
-    padding-top: 16px;
+    background: var(--color-background-primary);
   }
 
   .selectWrapper {

package/src/components/PromoBanner/PromoBanner.tsx

@@ -3,9 +3,14 @@ import React from "react";
 import { Grid, GridCol } from "../Grid";
 import { Image } from "../Image";
 
+interface PromoBannerImageSrc {
+  src: string;
+  srcSet?: string;
+}
+
 interface PromoBannerProps {
   className?: string;
-  image?: string;
+  image?: string | PromoBannerImageSrc;
   alignImage?: "bottom" | "top";
   /** Remove top padding from item on sm and smaller breakpoints */
   flushTopSmDown?: boolean;
@@ -21,6 +26,15 @@ interface PromoBannerProps {
 }
 
 const CLASS_ROOT = "promo-banner";
+
+const getImageProps = (image?: string | PromoBannerImageSrc) => {
+  if (!image) return null;
+
+  return typeof image === "string"
+    ? { src: image }
+    : { src: image.src, srcSet: image.srcSet };
+};
+
 export const PromoBanner = ({
   image,
   className,
@@ -35,16 +49,17 @@ export const PromoBanner = ({
   imageFullWidth,
   ...other
 }: PromoBannerProps) => {
+  const imageProps = getImageProps(image);
   const classes = cx(CLASS_ROOT, className, {
     [`${CLASS_ROOT}--flush-top-sm-down`]: flushTopSmDown,
     [`${CLASS_ROOT}--flush-bottom-sm-down`]: flushBottomSmDown,
-    [`${CLASS_ROOT}--reverse`]: variant === "reverse" && !!image,
+    [`${CLASS_ROOT}--reverse`]: variant === "reverse" && !!imageProps?.src,
     [`${CLASS_ROOT}--vertical`]: variant === "vertical",
   });
   return (
     <div className={classes} {...other}>
       <Grid columnGapSize="large">
-        {variant === "reverse" && image && (
+        {variant === "reverse" && imageProps?.src && (
           <GridCol
             size={{ xs: 12, md: 6 }}
             className={cx(
@@ -54,7 +69,8 @@ export const PromoBanner = ({
             )}
           >
             <Image
-              src={image}
+              src={imageProps.src}
+              srcSet={imageProps.srcSet}
               alt="Obrázok"
               className={cx("mb-none", { fullwidth: imageFullWidth })}
             />
@@ -65,7 +81,7 @@ export const PromoBanner = ({
           size={
             variant === "vertical"
               ? { xs: 12, sm: 10, md: 8, lg: 6 }
-              : { xs: 12, md: image ? 6 : 7 }
+              : { xs: 12, md: imageProps?.src ? 6 : 7 }
           }
           className={cx(
             `${CLASS_ROOT}__item`,
@@ -79,7 +95,7 @@ export const PromoBanner = ({
           {children}
         </GridCol>
 
-        {image && variant !== "reverse" && (
+        {imageProps?.src && variant !== "reverse" && (
           <GridCol
             size={variant === "vertical" ? { xs: 12 } : { xs: 12, md: 6 }}
             className={cx(
@@ -95,7 +111,8 @@ export const PromoBanner = ({
             )}
           >
             <Image
-              src={image}
+              src={imageProps.src}
+              srcSet={imageProps.srcSet}
               alt="Obrázok"
               className={cx("mb-none", { fullwidth: imageFullWidth })}
             />

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

@@ -315,6 +315,37 @@ describe("PromoBanner", () => {
         expect(image).toHaveAttribute("src", "https://example.com/test.jpg");
       });
 
+      it("renders image from object src when image object is provided", () => {
+        render(
+          <PromoBanner
+            image={{ src: "https://example.com/test.jpg", srcSet: "test 1x" }}
+          >
+            Content
+          </PromoBanner>,
+        );
+        const image = screen.getByRole("img");
+        expect(image).toHaveAttribute("src", "https://example.com/test.jpg");
+      });
+
+      it("passes srcSet to Image when image object is provided", () => {
+        render(
+          <PromoBanner
+            image={{
+              src: "https://example.com/test.jpg",
+              srcSet:
+                "https://example.com/test.jpg 1x, https://example.com/test@2x.jpg 2x",
+            }}
+          >
+            Content
+          </PromoBanner>,
+        );
+        const image = screen.getByRole("img");
+        expect(image).toHaveAttribute(
+          "srcSet",
+          "https://example.com/test.jpg 1x, https://example.com/test@2x.jpg 2x",
+        );
+      });
+
       it("applies default alt text", () => {
         render(<PromoBanner image="test.jpg">Content</PromoBanner>);
         const image = screen.getByRole("img");

package/src/components/StarRating/StarRating.tsx

@@ -0,0 +1,52 @@
+import cx from "classnames";
+import React from "react";
+
+import { Icon } from "../Icon";
+
+export interface StarRatingProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  /** Extra class name for root element. */
+  className?: string;
+  /** Rating value. Rounded to nearest whole star. */
+  rating: number;
+}
+
+const CLASS_ROOT = "star-rating";
+const STAR_COUNT = 5;
+const FILLED_ICON_NAME = "star-favourite";
+const EMPTY_ICON_NAME = "star-empty-thin";
+
+const clampRating = (rating: number) =>
+  Math.max(0, Math.min(Math.round(rating), STAR_COUNT));
+
+const StarRating: React.FC<StarRatingProps> = ({
+  className,
+  rating,
+  ...other
+}) => {
+  const filledStars = clampRating(rating);
+
+  return (
+    <span className={cx(CLASS_ROOT, className)} {...other}>
+      {Array.from({ length: STAR_COUNT }, (_, index) => {
+        const isFilled = index < filledStars;
+
+        return (
+          <Icon
+            key={`${isFilled ? FILLED_ICON_NAME : EMPTY_ICON_NAME}-${index}`}
+            className={cx(`${CLASS_ROOT}__icon`, {
+              [`${CLASS_ROOT}__icon--filled`]: isFilled,
+              [`${CLASS_ROOT}__icon--empty`]: !isFilled,
+            })}
+            name={isFilled ? FILLED_ICON_NAME : EMPTY_ICON_NAME}
+            size="large"
+          />
+        );
+      })}
+    </span>
+  );
+};
+
+StarRating.displayName = "StarRating";
+
+export { StarRating };

package/src/components/StarRating/index.ts

@@ -0,0 +1 @@
+export { StarRating } from "./StarRating";

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

@@ -0,0 +1,28 @@
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/breakpoint";
+
+@layer components {
+  .star-rating {
+    display: flex;
+    margin-bottom: space.get("large");
+    width: fit-content;
+    gap: convert.to-rem(5px);
+
+    &__icon--filled {
+      color: var(--color-icon-brand);
+    }
+
+    &__icon--empty {
+      color: var(--color-icon-disabled);
+    }
+
+    &__icon {
+      --icon-size: #{convert.to-rem(24px)};
+
+      @include breakpoint.get(md) {
+        --icon-size: #{convert.to-rem(32px)};
+      }
+    }
+  }
+}