@q2devel/q2-storybook 1.0.124 → 1.0.125

package/dist/components/Web/blog/BlogCard.d.ts

@@ -29,6 +29,8 @@ type BlogCardProps = {
     getTagUrl?: (tag: string, index: number) => string;
     tagLinkTarget?: "_blank" | "_self" | "_parent" | "_top";
     tagHoverEffect?: boolean;
+    onTagsHeightChange?: (height: number) => void;
+    targetTagsHeight?: number;
 };
-declare const BlogCard: ({ post, variant, fallbackBackgroundColor, textHorizontal, textVertical, buttonText, showSeparator, bodyLimit, titleLimit, href, className, createdAt, createdText, showDateInline, tags, onTagClick, getTagUrl, tagLinkTarget, tagHoverEffect, }: BlogCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const BlogCard: ({ post, variant, fallbackBackgroundColor, textHorizontal, textVertical, buttonText, showSeparator, bodyLimit, titleLimit, href, className, createdAt, createdText, showDateInline, tags, onTagClick, getTagUrl, tagLinkTarget, tagHoverEffect, onTagsHeightChange, targetTagsHeight, }: BlogCardProps) => import("react/jsx-runtime").JSX.Element;
 export default BlogCard;

package/dist/components/Web/blog/BlogCard.js

@@ -2,13 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import Heading from "../../Base/heading/Heading";
 import Button from "../../Base/button/Button";
 import clsx from "clsx";
+import { useRef, useCallback, useEffect } from "react";
 const stripHtmlTags = (html) => {
     return html.replace(/<\/?[^>]+(>|$)/g, "");
 };
 const truncateText = (text, limit) => {
     return text.length > limit ? text.slice(0, limit).trim() + "…" : text;
 };
-const BlogCard = ({ post, variant = "imageOverlay", fallbackBackgroundColor = "bg-gray-200", textHorizontal = "center", textVertical = "center", buttonText = "Více informací", showSeparator = true, bodyLimit = 150, titleLimit = 50, href = "/blog", className = {}, createdAt = "", createdText = "Vytvořeno", showDateInline = false, tags = [], onTagClick, getTagUrl, tagLinkTarget = "_self", tagHoverEffect = true, }) => {
+const BlogCard = ({ post, variant = "imageOverlay", fallbackBackgroundColor = "bg-gray-200", textHorizontal = "center", textVertical = "center", buttonText = "Více informací", showSeparator = true, bodyLimit = 150, titleLimit = 50, href = "/blog", className = {}, createdAt = "", createdText = "Vytvořeno", showDateInline = false, tags = [], onTagClick, getTagUrl, tagLinkTarget = "_self", tagHoverEffect = true, onTagsHeightChange, targetTagsHeight, }) => {
+    // Refs for dynamic height management
+    const tagsRef = useRef(null);
+    const observerRef = useRef(null);
+    const reportedHeightRef = useRef(0);
     const { article = "", image = "", heading = "", button = "", description = "", separator = "", } = className;
     const hasImage = Boolean(post.field_image_url);
     const finalHref = href;
@@ -29,6 +34,55 @@ const BlogCard = ({ post, variant = "imageOverlay", fallbackBackgroundColor = "b
         center: "justify-center",
         bottom: "justify-end",
     };
+    // Measure and report natural height
+    const measureAndReportHeight = useCallback(() => {
+        if (!tagsRef.current || !onTagsHeightChange)
+            return;
+        const originalMinHeight = tagsRef.current.style.minHeight;
+        tagsRef.current.style.minHeight = "auto";
+        // Force reflow
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        tagsRef.current.offsetHeight;
+        const naturalHeight = tagsRef.current.getBoundingClientRect().height;
+        if (naturalHeight !== reportedHeightRef.current && naturalHeight > 0) {
+            reportedHeightRef.current = naturalHeight;
+            onTagsHeightChange(naturalHeight);
+            // eslint-disable-next-line no-console
+            console.log(`BlogCard ${post.id}: Reporting natural height ${naturalHeight}px`);
+        }
+        tagsRef.current.style.minHeight = originalMinHeight;
+    }, [onTagsHeightChange, post.id]);
+    // ResizeObserver to watch content changes
+    useEffect(() => {
+        if (!tagsRef.current)
+            return;
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+        }
+        observerRef.current = new ResizeObserver(() => {
+            setTimeout(measureAndReportHeight, 10);
+        });
+        observerRef.current.observe(tagsRef.current);
+        // Initial measure
+        setTimeout(measureAndReportHeight, 0);
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+        };
+    }, [tags, measureAndReportHeight]);
+    // Apply target height when it changes
+    useEffect(() => {
+        if (tagsRef.current && targetTagsHeight && targetTagsHeight > 0) {
+            tagsRef.current.style.minHeight = `${targetTagsHeight}px`;
+            // eslint-disable-next-line no-console
+            console.log(`BlogCard ${post.id}: Applied target height ${targetTagsHeight}px`);
+        }
+    }, [targetTagsHeight, post.id]);
+    // Re-measure when tags content changes
+    useEffect(() => {
+        setTimeout(measureAndReportHeight, 0);
+    }, [tags, measureAndReportHeight]);
     if (variant === "imageTop") {
         return (_jsxs("article", { className: clsx("bg-white shadow-sm rounded overflow-hidden", article), children: [hasImage ? (_jsx("img", { alt: post.title, src: post.field_image_url, className: clsx("w-full h-48 object-cover", image) })) : (_jsxs("div", { className: clsx("w-full h-48 flex items-center justify-center", fallbackBackgroundColor), children: [_jsx("span", { className: "text-gray-600 text-center px-4 text-sm font-medium", children: limitedTitle }), _jsx("span", { className: "text-gray-600 text-center px-4 text-xs font-light", children: createdAt })] })), _jsxs("div", { className: "p-4", children: [showDateInline && createdAt ? (_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx(Heading, { level: 3, className: clsx("text-black font-semibold", heading), children: limitedTitle }), _jsx("span", { className: "text-black font-normal text-lg", children: createdAt })] })) : (_jsx(Heading, { level: 3, className: clsx("text-black font-semibold mb-2", heading), children: limitedTitle })), createdAt && !showDateInline && (_jsxs("p", { className: "text-gray-600 text-sm font-normal mb-2", children: [createdText, ": ", createdAt] })), tags && tags.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1 mb-3", children: tags.map((tagItem, index) => {
                                 // Handle both string tags and tag objects

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@q2devel/q2-storybook",
-    "version": "1.0.124",
+    "version": "1.0.125",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",