@q2devel/q2-storybook 1.0.119 → 1.0.121

package/dist/components/Ecommerce/basket-dialog/BasketDialog.d.ts

@@ -21,6 +21,7 @@ export type BasketDialogProps = {
     productLink?: (productName: string, variationId: string) => string;
     title?: string;
     checkoutText?: string;
+    checkoutTextClass?: string;
     continueShoppingText?: string;
     showShippingNote?: boolean;
     showQuantityControls?: boolean;
@@ -40,4 +41,4 @@ export type BasketDialogProps = {
         shippingAndTax: string;
     };
 };
-export declare const BasketDialog: ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title, checkoutText, continueShoppingText, showShippingNote, showQuantityControls, pendingUpdates, processingItems, isAddingToCart, totalItems, locale, productPriceOptions, totalPriceOptions, translations, }: BasketDialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BasketDialog: ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title, checkoutText, checkoutTextClass, continueShoppingText, showShippingNote, showQuantityControls, pendingUpdates, processingItems, isAddingToCart, totalItems, locale, productPriceOptions, totalPriceOptions, translations, }: BasketDialogProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Ecommerce/basket-dialog/BasketDialog.js

@@ -7,7 +7,7 @@ import { useEffect, useRef, useState } from 'react';
 import Heading from '../../../components/Base/heading/Heading';
 import Button from '../../../components/Base/button/Button';
 import { Price } from '../../../components/Base/price/Price';
-export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title = 'Váš košík', checkoutText = 'Pokračovat k objednávce', continueShoppingText = 'Pokračovat v nákupu', showShippingNote = true, showQuantityControls = true, pendingUpdates = {}, processingItems = {}, isAddingToCart = false, totalItems, locale, productPriceOptions, totalPriceOptions, translations, }) => {
+export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title = 'Váš košík', checkoutText = 'Pokračovat k objednávce', checkoutTextClass = 'button-brand w-full', continueShoppingText = 'Pokračovat v nákupu', showShippingNote = true, showQuantityControls = true, pendingUpdates = {}, processingItems = {}, isAddingToCart = false, totalItems, locale, productPriceOptions, totalPriceOptions, translations, }) => {
     const [shouldShowAddingIndicator, setShouldShowAddingIndicator] = useState(false);
     const initialTotalItems = useRef(null);
     useEffect(() => {
@@ -83,5 +83,5 @@ export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityCh
                                                                                                     onRemoveProduct(product.variation_uuid), disabled: isProcessing, children: translations.remove }) }))] })] })] }, `${product.variation_uuid}-${isTemporaryRow
                                                                     ? 'temp'
                                                                     : 'normal'}`));
-                                                            }), shouldShowAddingIndicator && (_jsxs("li", { className: "flex py-6 opacity-75 bg-gray-50", children: [_jsx("div", { className: "size-24 shrink-0 overflow-hidden rounded-md border border-gray-200 relative", children: _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white bg-opacity-75", children: _jsx(Spinner, { className: "h-8 w-8 text-[var(--primary)]" }) }) }), _jsx("div", { className: "ml-4 flex flex-1 flex-col justify-center", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Spinner, { className: "h-4 w-4 text-[var(--primary)]" }), _jsx("p", { className: "text-gray-500 italic", children: translations.addingToBasket })] }) })] }))] })) }) })] }), _jsxs("div", { className: "border-t border-gray-200 px-4 py-6 sm:px-6", children: [_jsxs("div", { className: "flex justify-between text-base font-medium text-gray-900", children: [_jsx("p", { children: translations.total }), _jsx(Price, { value: subtotal, locale: locale, options: totalPriceOptions })] }), showShippingNote && (_jsx("p", { className: "mt-0.5 text-sm text-gray-500", children: translations.shippingAndTax })), products.length > 0 && onCheckout && (_jsx("div", { className: "mt-6", children: _jsx("button", { onClick: handleCheckout, className: "button-brand w-full", children: checkoutText }) })), _jsx("div", { className: "mt-6 flex justify-center text-center text-sm text-gray-500", children: _jsx("p", { children: _jsxs("button", { type: "button", onClick: handleContinueShopping, className: "font-medium text-[var(--primary)] hover:text-[var(--primary)]", children: [continueShoppingText, _jsx("span", { "aria-hidden": "true", children: " \u2192" })] }) }) })] })] }) }) }) }) })] }));
+                                                            }), shouldShowAddingIndicator && (_jsxs("li", { className: "flex py-6 opacity-75 bg-gray-50", children: [_jsx("div", { className: "size-24 shrink-0 overflow-hidden rounded-md border border-gray-200 relative", children: _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white bg-opacity-75", children: _jsx(Spinner, { className: "h-8 w-8 text-[var(--primary)]" }) }) }), _jsx("div", { className: "ml-4 flex flex-1 flex-col justify-center", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Spinner, { className: "h-4 w-4 text-[var(--primary)]" }), _jsx("p", { className: "text-gray-500 italic", children: translations.addingToBasket })] }) })] }))] })) }) })] }), _jsxs("div", { className: "border-t border-gray-200 px-4 py-6 sm:px-6", children: [_jsxs("div", { className: "flex justify-between text-base font-medium text-gray-900", children: [_jsx("p", { children: translations.total }), _jsx(Price, { value: subtotal, locale: locale, options: totalPriceOptions })] }), showShippingNote && (_jsx("p", { className: "mt-0.5 text-sm text-gray-500", children: translations.shippingAndTax })), products.length > 0 && onCheckout && (_jsx("div", { className: "mt-6", children: _jsx("button", { onClick: handleCheckout, className: checkoutTextClass, children: checkoutText }) })), _jsx("div", { className: "mt-6 flex justify-center text-center text-sm text-gray-500", children: _jsx("p", { children: _jsxs("button", { type: "button", onClick: handleContinueShopping, className: "font-medium text-[var(--primary)] hover:text-[var(--primary)]", children: [continueShoppingText, _jsx("span", { "aria-hidden": "true", children: " \u2192" })] }) }) })] })] }) }) }) }) })] }));
 };

package/dist/components/Ecommerce/basket-overview/BasketOverview.d.ts

@@ -17,6 +17,7 @@ export type BasketOverviewProps = {
     productLink?: (productName: string, variationId: string) => string;
     title?: string;
     checkoutText?: string;
+    checkoutTextClass?: string;
     continueShoppingText?: string;
     shippingNote?: string;
     totalText?: string;
@@ -31,4 +32,4 @@ export type BasketOverviewProps = {
         emptyBasketPlaceholder?: string;
     };
 };
-export declare const BasketOverview: ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title, checkoutText, continueShoppingText, showShippingNote, clearBasketText, totalText, shippingNote, pendingUpdates, processingItems, locale, productPriceOptions, TotalPriceOptions, translations, }: BasketOverviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BasketOverview: ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title, checkoutText, checkoutTextClass, continueShoppingText, showShippingNote, clearBasketText, totalText, shippingNote, pendingUpdates, processingItems, locale, productPriceOptions, TotalPriceOptions, translations, }: BasketOverviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Ecommerce/basket-overview/BasketOverview.js

@@ -5,7 +5,7 @@ import Heading from '../../../components/Base/heading/Heading';
 import { Price } from '../../../components/Base/price/Price';
 import { CheckIcon, ClockIcon, TrashIcon } from '@heroicons/react/20/solid';
 import { MinusIcon, PlusIcon } from '@heroicons/react/24/solid';
-export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title = 'Shopping Cart', checkoutText = 'Checkout', continueShoppingText = 'Continue Shopping', showShippingNote = true, clearBasketText = 'Clear basket', totalText, shippingNote, pendingUpdates = {}, processingItems = {}, locale, productPriceOptions, TotalPriceOptions, translations, }) => {
+export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title = 'Shopping Cart', checkoutText = 'Checkout', checkoutTextClass = 'button-brand w-full', continueShoppingText = 'Continue Shopping', showShippingNote = true, clearBasketText = 'Clear basket', totalText, shippingNote, pendingUpdates = {}, processingItems = {}, locale, productPriceOptions, TotalPriceOptions, translations, }) => {
     const handleIncrement = (product, quantity) => {
         if (onQuantityChange) {
             onQuantityChange(product.variation_uuid, quantity + 1);
@@ -34,5 +34,5 @@ export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveP
                                                                                 : 'bg-gray-200 hover:bg-gray-300'}`, children: _jsx(MinusIcon, { className: "h-4 w-4" }) }), _jsx("span", { className: "mx-2 min-w-[20px] text-center text-black", children: displayQuantity }), _jsx("button", { type: "button", onClick: () => handleIncrement(product, displayQuantity), disabled: isProcessing, className: `rounded-full p-1 text-gray-600 ${isProcessing
                                                                                 ? 'bg-gray-100 cursor-not-allowed opacity-50'
                                                                                 : 'bg-gray-200 hover:bg-gray-300'}`, children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] })] })] })] }, product.variation_uuid));
-                                    })) })] }), _jsxs("section", { "aria-labelledby": "summary-heading", className: "mt-10", children: [_jsx(Heading, { level: 2, id: "summary-heading", className: "sr-only", children: "Order summary" }), products.length > 0 && onClearBasket && (_jsx("div", { className: "mb-4", children: _jsxs("button", { type: "button", onClick: onClearBasket, className: "inline-flex items-center text-sm font-medium text-red-600 hover:text-red-500", children: [_jsx(TrashIcon, { className: "mr-1 h-5 w-5 text-red-500" }), clearBasketText] }) })), _jsxs("div", { children: [_jsx("dl", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("dt", { className: "text-base font-medium text-gray-900", children: totalText }), _jsx("dd", { className: "ml-4 text-base font-medium text-gray-900", children: _jsx(Price, { value: subtotal, locale: locale, options: TotalPriceOptions }) })] }) }), showShippingNote && (_jsx("p", { className: "mt-1 text-sm text-gray-500", children: shippingNote }))] }), products.length > 0 && onCheckout && (_jsx("div", { className: "mt-10", children: _jsx("button", { type: "button", onClick: onCheckout, className: "button-brand w-full", children: checkoutText }) })), onContinueShopping && (_jsx("div", { className: "mt-6 text-center text-sm", children: _jsx("p", { children: _jsxs("button", { type: "button", onClick: onContinueShopping, className: "font-medium text-[var(--primary)] hover:text-[var(--primary)]", children: [continueShoppingText, _jsx("span", { "aria-hidden": "true", children: " \u2192" })] }) }) }))] })] })] }) }));
+                                    })) })] }), _jsxs("section", { "aria-labelledby": "summary-heading", className: "mt-10", children: [_jsx(Heading, { level: 2, id: "summary-heading", className: "sr-only", children: "Order summary" }), products.length > 0 && onClearBasket && (_jsx("div", { className: "mb-4", children: _jsxs("button", { type: "button", onClick: onClearBasket, className: "inline-flex items-center text-sm font-medium text-red-600 hover:text-red-500", children: [_jsx(TrashIcon, { className: "mr-1 h-5 w-5 text-red-500" }), clearBasketText] }) })), _jsxs("div", { children: [_jsx("dl", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("dt", { className: "text-base font-medium text-gray-900", children: totalText }), _jsx("dd", { className: "ml-4 text-base font-medium text-gray-900", children: _jsx(Price, { value: subtotal, locale: locale, options: TotalPriceOptions }) })] }) }), showShippingNote && (_jsx("p", { className: "mt-1 text-sm text-gray-500", children: shippingNote }))] }), products.length > 0 && onCheckout && (_jsx("div", { className: "mt-10", children: _jsx("button", { type: "button", onClick: onCheckout, className: checkoutTextClass, children: checkoutText }) })), onContinueShopping && (_jsx("div", { className: "mt-6 text-center text-sm", children: _jsx("p", { children: _jsxs("button", { type: "button", onClick: onContinueShopping, className: "font-medium text-[var(--primary)] hover:text-[var(--primary)]", children: [continueShoppingText, _jsx("span", { "aria-hidden": "true", children: " \u2192" })] }) }) }))] })] })] }) }));
 };

package/dist/components/Ecommerce/product-detail/ProductDetail.d.ts

@@ -24,6 +24,9 @@ export type ProductProps = {
     showColors?: boolean;
     buttonText?: string;
     className?: string;
+    specification?: Array<{
+        [key: string]: string;
+    }>;
     product?: Product;
     showAddButton?: boolean;
     currentQuantity: number;
@@ -68,6 +71,9 @@ export type ProductProps = {
         question: string;
         optionOfShipping: string;
         addToWishlist: string;
+        specification: string;
+        EAN: string;
+        sku: string;
     };
     locale: string;
     quantUnit?: string;
@@ -80,4 +86,4 @@ export type ProductProps = {
     mainQuantUnitClassName?: string;
     discountQuantUnitClassName?: string;
 };
-export declare const ProductDetail: ({ name, price, href, discountPercent, description, detail, buttonText, className, product, currentQuantity, onQuantityChange, maxQuantity, disabled, badges, showVariations, variations, currentVariationId, cartMode, onOpenBasket, showWishlistButton, isInWishlist, onWishlistToggle, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, productWishlistIds, isWishlistPending, isLogged, onWishlistTextClick, showWishlistDropdown, onCloseWishlistDropdown, onAddToSpecificWishlist, onRemoveFromSpecificWishlist, onCreateNewWishlistFromDropdown, onShippingOptionsClick, isWatchdogEnabled, onWatchdogClick, onDemandClick, translations, locale, quantUnit, mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, }: ProductProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ProductDetail: ({ name, price, href, discountPercent, description, detail, buttonText, className, specification, product, currentQuantity, onQuantityChange, maxQuantity, disabled, badges, showVariations, variations, currentVariationId, cartMode, onOpenBasket, showWishlistButton, isInWishlist, onWishlistToggle, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, productWishlistIds, isWishlistPending, isLogged, onWishlistTextClick, showWishlistDropdown, onCloseWishlistDropdown, onAddToSpecificWishlist, onRemoveFromSpecificWishlist, onCreateNewWishlistFromDropdown, onShippingOptionsClick, isWatchdogEnabled, onWatchdogClick, onDemandClick, translations, locale, quantUnit, mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, }: ProductProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Ecommerce/product-detail/ProductDetail.js

@@ -10,7 +10,7 @@ import { Price } from '../../Base/price/Price';
 import { HorizontalTab } from '../../Web/tabs/HorizontalTab';
 import WishlistDropdown from '../wishlist/WishlistDropdown';
 import ProductDetailGallery from './ProductDetailGallery';
-export const ProductDetail = ({ name = '', price = 0, href = '', discountPercent = 0, description = '', detail = { tabs: [] }, buttonText = 'Add to bag', className = '', 
+export const ProductDetail = ({ name = '', price = 0, href = '', discountPercent = 0, description = '', detail = { tabs: [] }, buttonText = 'Add to bag', className = '', specification, 
 // Cart props
 product, currentQuantity = 0, onQuantityChange, maxQuantity = 99, disabled = false, badges = [], showVariations = false, variations = [], currentVariationId, cartMode = 'full', onOpenBasket, 
 // Wishlist props
@@ -18,9 +18,22 @@ showWishlistButton = false, isInWishlist = false, onWishlistToggle, enableMultip
 // Wishlist dropdown props
 showWishlistDropdown = false, onCloseWishlistDropdown, onAddToSpecificWishlist, onRemoveFromSpecificWishlist, onCreateNewWishlistFromDropdown, 
 //modals
-onShippingOptionsClick, isWatchdogEnabled = false, onWatchdogClick, onDemandClick, translations, locale, quantUnit, 
+onShippingOptionsClick, isWatchdogEnabled = false, onWatchdogClick, onDemandClick, translations = {
+    recommendedPrice: 'Doporučená cena',
+    shippingDetailFree: 'Dostupné zdarma',
+    shippingDetailFee: 'Dostupné za',
+    watchDog: 'Sledování',
+    question: 'Otázka',
+    optionOfShipping: 'Možnosti dodání',
+    addToWishlist: 'Přidat do wishlistu',
+    specification: 'Parametry',
+    EAN: 'EAN',
+    sku: 'Kód',
+}, locale, quantUnit, 
 // NOVÉ PRICE API
-mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, }) => {
+mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName,
+// translation
+ }) => {
     const wishlistButtonRef = useRef(null);
     // Cart functions - updated logic based on cartMode
     const shouldShowQuantityControls = () => {
@@ -84,7 +97,7 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
     }
     return (_jsx("div", { className: buildClassesByJoining('bg-white', className), children: _jsxs("div", { className: "py-4", children: [_jsxs("div", { className: "lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8 ", children: [_jsx(ProductDetailGallery, { product: product, showWishlistButton: showWishlistButton, enableMultipleWishlists: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, onWishlistToggle: onWishlistToggle || (() => { }), onAddToWishlist: onAddToWishlist || (() => { }), onRemoveFromWishlist: onRemoveFromWishlist || (() => { }), onCreateWishlist: onCreateWishlist || (() => { }) }), _jsxs("div", { className: "mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0", children: [badges && badges.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: badges.map((badge, index) => (_jsx("span", { className: badge.color
                                             ? `${badge.color} inline-flex items-center px-2 py-1 text-xs font-medium text-w`
-                                            : 'bg-gray-200 text-gray-800 px-2 py-1 text-xs font-medium', children: badge.text }, index))) })), _jsx(Heading, { className: "mt-8 font-extralight", level: 1, children: name }), _jsxs("div", { className: "flex gap-4", children: [_jsxs("span", { className: "text-sm text-gray-500", children: ["K\u00F3d: ", product.sku] }), _jsxs("span", { className: "text-sm text-gray-500", children: ["EAN: ", product.ean] })] }), _jsxs("div", { className: "mt-6", children: [_jsx(Heading, { level: 3, className: "sr-only", children: "Description" }), _jsx("div", { dangerouslySetInnerHTML: { __html: description }, className: "space-y-6 text-base text-gray-700" })] }), _jsxs("form", { className: "mt-6", children: [showVariations && (_jsxs("div", { children: [_jsx(Heading, { level: 3, className: "text-gray-600 mb-2", children: "Variace" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 2xl:grid-cols-2 gap-3", children: visibleVariations.map((variation) => (_jsxs(Button, { asLink: true, unstyled: true, href: variation.href, "aria-label": variation.title, className: buildClassesByJoining('w-full border p-4 flex justify-between items-center shadow-sm', currentVariationId == variation.id
+                                            : 'bg-gray-200 text-gray-800 px-2 py-1 text-xs font-medium', children: badge.text }, index))) })), _jsx(Heading, { className: "mt-8 font-extralight", level: 1, children: name }), _jsxs("div", { className: "flex gap-4", children: [_jsxs("span", { className: "text-sm text-gray-500", children: [translations.sku, ": ", product.sku] }), _jsxs("span", { className: "text-sm text-gray-500", children: [translations.EAN, ": ", product.ean] })] }), _jsxs("div", { className: "mt-6", children: [_jsx(Heading, { level: 3, className: "sr-only", children: "Description" }), _jsx("div", { dangerouslySetInnerHTML: { __html: description }, className: "space-y-6 text-base text-gray-700" })] }), _jsxs("form", { className: "mt-6", children: [showVariations && (_jsxs("div", { children: [_jsx(Heading, { level: 3, className: "text-gray-600 mb-2", children: "Variace" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 2xl:grid-cols-2 gap-3", children: visibleVariations.map((variation) => (_jsxs(Button, { asLink: true, unstyled: true, href: variation.href, "aria-label": variation.title, className: buildClassesByJoining('w-full border p-4 flex justify-between items-center shadow-sm', currentVariationId == variation.id
                                                             ? 'border-[var(--primary)]'
                                                             : 'border-gray-200', 'cursor-pointer transition-all duration-150 hover:border-[var(--primary)] hover:shadow-md'), children: [_jsxs("div", { className: "flex flex-col justify-between gap-1", children: [_jsx("span", { className: "font-medium text-base capitalize", children: variation.title }), _jsx("span", { className: (variation.stock ?? 0) > 0
                                                                             ? 'text-green-600 text-sm'
@@ -111,5 +124,13 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
                                                                             : 'bg-primary hover:bg-green-600'} text-white disabled:opacity-50 disabled:bg-black-300 disabled:cursor-not-allowed shadow-sm transition-all duration-200`, "aria-label": "Zv\u00FD\u0161i\u0165 mno\u017Estvo", children: _jsx(PlusIcon, { className: "h-5 w-5" }) })] }) })) })] }) })] }), _jsxs("section", { "aria-labelledby": "details-heading", className: "mt-8", children: [_jsx(Heading, { level: 2, id: "details-heading", className: "sr-only", children: "Additional details" }), _jsx("div", { className: "mt-3", children: price > 1000 ? (_jsx("p", { className: "text-sm text-gray-800", children: translations.shippingDetailFree })) : (_jsx("p", { className: "text-sm text-gray-800", children: translations.shippingDetailFee })) }), _jsx("div", { className: "mt-8", children: _jsxs("div", { className: "border-t py-5 border-gray-200 flex flex-col sm:flex-row flex-wrap gap-6 text-gray-600", children: [isWatchdogEnabled && (_jsxs(Button, { unstyled: true, className: "flex gap-2", onClick: onWatchdogClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-5 text-[var(--primary)]", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" }) }), _jsx("span", { className: "underline hover:no-underline", children: translations.watchDog })] })), _jsxs(Button, { unstyled: true, className: "flex gap-2", onClick: onDemandClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-5 text-[var(--primary)]", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" }) }), _jsx("span", { className: "underline hover:no-underline", children: translations.question })] }), _jsxs(Button, { unstyled: true, className: "flex gap-2", onClick: onShippingOptionsClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-5 text-[var(--primary)]", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" }) }), _jsx("span", { className: "underline hover:no-underline cursor-pointer", children: translations.optionOfShipping })] }), isLogged && (_jsxs("div", { className: "relative", children: [_jsxs("button", { ref: wishlistButtonRef, className: "flex gap-2 text-left hover:text-green-600 transition-colors", onClick: onWishlistTextClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-5 text-[var(--primary)]", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" }) }), _jsx("span", { className: "underline hover:no-underline", children: translations.addToWishlist })] }), showWishlistDropdown && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: onCloseWishlistDropdown }), _jsx("div", { className: "absolute top-full left-52 mt-1 z-50", children: _jsx(WishlistDropdown, { show: true, wishlists: wishlists || [], productWishlistIds: productWishlistIds || [], isWishlistPending: isWishlistPending, onAddToWishlist: onAddToSpecificWishlist ||
                                                                                 (() => { }), onRemoveFromWishlist: onRemoveFromSpecificWishlist ||
                                                                                 (() => { }), onCreateNewWishlist: onCreateNewWishlistFromDropdown ||
-                                                                                (() => { }), onClose: onCloseWishlistDropdown, isModal: false }) })] }))] }))] }) })] })] })] }), _jsx("section", { className: "mt-10", children: _jsx(HorizontalTab, { ...detail }) })] }) }));
+                                                                                (() => { }), onClose: onCloseWishlistDropdown, isModal: false }) })] }))] }))] }) })] })] })] }), _jsx("section", { className: "mt-10", children: _jsx(HorizontalTab, { ...detail }) }), specification && specification.length > 0 &&
+                    _jsxs("section", { children: [_jsx(Heading, { level: 3, className: "label", children: translations.specification }), specification.map((item, index) => {
+                                if ('separator' in item) {
+                                    return _jsx("div", { className: "h-4" }, index);
+                                }
+                                const key = Object.keys(item)[0];
+                                const value = item[key];
+                                return (_jsx("div", { className: "flex flex-col gap-2", children: _jsxs("span", { className: "", children: [key, ": ", value] }) }, index));
+                            })] })] }) }));
 };

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

@@ -8,6 +8,7 @@ type BlogCardProps = {
     buttonText?: string;
     showSeparator?: boolean;
     bodyLimit?: number;
+    titleLimit?: number;
     href?: string;
     className?: {
         article?: string;
@@ -17,6 +18,8 @@ type BlogCardProps = {
         description?: string;
         separator?: string;
     };
+    createdAt?: string;
+    createdText?: string;
 };
-declare const BlogCard: ({ post, variant, fallbackBackgroundColor, textHorizontal, textVertical, buttonText, showSeparator, bodyLimit, href, className, }: BlogCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const BlogCard: ({ post, variant, fallbackBackgroundColor, textHorizontal, textVertical, buttonText, showSeparator, bodyLimit, titleLimit, href, className, createdAt, createdText, }: BlogCardProps) => import("react/jsx-runtime").JSX.Element;
 export default BlogCard;

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

@@ -8,12 +8,13 @@ const stripHtmlTags = (html) => {
 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, href, className = {}, }) => {
+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', }) => {
     const { article = '', image = '', heading = '', button = '', description = '', separator = '', } = className;
     const hasImage = Boolean(post.field_image_url);
     const finalHref = href;
     const cleanBody = post.body ? stripHtmlTags(post.body) : '';
     const limitedBody = bodyLimit ? truncateText(cleanBody, bodyLimit) : cleanBody;
+    const limitedTitle = titleLimit ? truncateText(post.title, titleLimit) : post.title;
     const horizontalAlignments = {
         left: 'items-start text-left',
         center: 'items-center text-center',
@@ -25,11 +26,11 @@ const BlogCard = ({ post, variant = 'imageOverlay', fallbackBackgroundColor = 'b
         bottom: 'justify-end',
     };
     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) })) : (_jsx("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: post.title }) })), _jsxs("div", { className: "p-4", children: [_jsx(Heading, { level: 3, className: clsx('text-black font-semibold mb-2', heading), children: post.title }), limitedBody && (_jsx("p", { className: clsx('text-gray-600 text-sm mb-4', description), children: limitedBody })), showSeparator && _jsx("hr", { className: clsx('my-4', separator) }), _jsx(Button, { asLink: true, unstyled: true, href: finalHref, className: clsx('text-sm font-medium', button), children: buttonText })] })] }));
+        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: [_jsx(Heading, { level: 3, className: clsx('text-black font-semibold mb-2', heading), children: limitedTitle }), createdAt && (_jsxs("p", { className: "text-gray-600 text-sm font-normal mb-2", children: [createdText, ": ", createdAt] })), limitedBody && (_jsx("p", { className: clsx('text-gray-600 text-md mb-4', description), children: limitedBody })), showSeparator && _jsx("hr", { className: clsx('my-4', separator) }), _jsx(Button, { asLink: true, unstyled: true, href: finalHref, className: clsx('text-sm font-medium', button), children: buttonText })] })] }));
     }
     // imageOverlay variant
     return (_jsx("article", { className: clsx('relative isolate overflow-hidden flex flex-col', hasImage
             ? 'px-8 pt-8 pb-8 bg-gray-900 h-[320px]'
-            : `h-80 ${fallbackBackgroundColor}`, article), children: hasImage ? (_jsxs(_Fragment, { children: [_jsx("img", { alt: post.title, src: post.field_image_url, className: clsx('absolute inset-0 -z-10 w-full h-full object-cover', image) }), _jsx("div", { className: "absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" }), _jsx("div", { className: "absolute inset-0 -z-10 ring-1 ring-gray-900/10 ring-inset" }), _jsx("div", { className: clsx('flex flex-1 flex-col', verticalAlignments[textVertical], horizontalAlignments[textHorizontal]), children: _jsx(Heading, { level: 3, className: clsx('font-extralight text-white', heading), children: _jsxs(Button, { asLink: true, unstyled: true, href: finalHref, className: clsx(button), children: [_jsx("span", { className: "absolute inset-0" }), post.title] }) }) })] })) : (_jsx("div", { className: clsx('flex flex-1 flex-col px-8', verticalAlignments[textVertical], horizontalAlignments[textHorizontal]), children: _jsx(Heading, { level: 3, className: clsx('text-gray-800 font-medium', heading), children: _jsx(Button, { asLink: true, unstyled: true, href: finalHref, className: clsx(button), children: post.title }) }) })) }));
+            : `h-80 ${fallbackBackgroundColor}`, article), children: hasImage ? (_jsxs(_Fragment, { children: [_jsx("img", { alt: post.title, src: post.field_image_url, className: clsx('absolute inset-0 -z-10 w-full h-full object-cover', image) }), _jsx("div", { className: "absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" }), _jsx("div", { className: "absolute inset-0 -z-10 ring-1 ring-gray-900/10 ring-inset" }), _jsx("div", { className: clsx('flex flex-1 flex-col', verticalAlignments[textVertical], horizontalAlignments[textHorizontal]), children: _jsx(Heading, { level: 3, className: clsx('font-extralight text-white', heading), children: _jsxs(Button, { asLink: true, unstyled: true, href: finalHref, className: clsx(button), children: [_jsx("span", { className: "absolute inset-0" }), limitedTitle] }) }) })] })) : (_jsx("div", { className: clsx('flex flex-1 flex-col px-8', verticalAlignments[textVertical], horizontalAlignments[textHorizontal]), children: _jsx(Heading, { level: 3, className: clsx('text-gray-800 font-medium', heading), children: _jsx(Button, { asLink: true, unstyled: true, href: finalHref, className: clsx(button), children: limitedTitle }) }) })) }));
 };
 export default BlogCard;

package/package.json

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