@q2devel/q2-storybook 1.0.75 → 1.0.79
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,6 +14,7 @@ export type ProductCardProps = {
|
|
|
14
14
|
titleClassName?: string;
|
|
15
15
|
colorClassName?: string;
|
|
16
16
|
priceClassName?: string;
|
|
17
|
+
priceDiscountClassName?: string;
|
|
17
18
|
descriptionClassName?: string;
|
|
18
19
|
aspectRatio?: 'square' | 'auto' | 'video' | 'wide';
|
|
19
20
|
imagePosition?: 'top' | 'bottom' | 'center';
|
|
@@ -73,4 +74,4 @@ export type ProductCardProps = {
|
|
|
73
74
|
priceFormatOptions?: PriceFormatOptions;
|
|
74
75
|
quantUnit?: string;
|
|
75
76
|
};
|
|
76
|
-
export declare const ProductCard: ({ product, href, className, imageClassName, contentClassName, titleClassName, priceClassName, descriptionClassName, aspectRatio, imagePosition, imageObjectFit, layout, hoverEffect, renderBadges, renderColor, renderDescription, elevationLevel, rounded, titleLines, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName, variationNameClassName, actionButton, showAddButton, showAddButtonOnHover, addButtonPosition, addButtonAlignment, addButtonText, addButtonBottomClassName, borderOnHoverClassName, currentQuantity, onQuantityChange, addButtonIcon, maxQuantity, controlsClassName, buttonClassName, quantityClassName, customAddButton, disabled, locale, cartMode, showSpinnerInAdd, showWishlistButton, isInWishlist, onWishlistToggle, wishlistButtonClassName, isWishlistPending, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, wishlistDropdownClassName, productWishlistIds, showDeleteButton, onDelete, deleteButtonClassName, isDeletePending, deleteButtonSize, deleteButtonPosition, priceFormatOptions, quantUnit, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
77
|
+
export declare const ProductCard: ({ product, href, className, imageClassName, contentClassName, titleClassName, priceClassName, priceDiscountClassName, descriptionClassName, aspectRatio, imagePosition, imageObjectFit, layout, hoverEffect, renderBadges, renderColor, renderDescription, elevationLevel, rounded, titleLines, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName, variationNameClassName, actionButton, showAddButton, showAddButtonOnHover, addButtonPosition, addButtonAlignment, addButtonText, addButtonBottomClassName, borderOnHoverClassName, currentQuantity, onQuantityChange, addButtonIcon, maxQuantity, controlsClassName, buttonClassName, quantityClassName, customAddButton, disabled, locale, cartMode, showSpinnerInAdd, showWishlistButton, isInWishlist, onWishlistToggle, wishlistButtonClassName, isWishlistPending, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, wishlistDropdownClassName, productWishlistIds, showDeleteButton, onDelete, deleteButtonClassName, isDeletePending, deleteButtonSize, deleteButtonPosition, priceFormatOptions, quantUnit, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -12,7 +12,7 @@ import Heading from '../../Base/heading/Heading';
|
|
|
12
12
|
import Spinner from '../../Base/spinner/Spinner';
|
|
13
13
|
import DeleteButton from '../wishlist/DeleteButton';
|
|
14
14
|
import LikeButton from '../wishlist/LikeButton';
|
|
15
|
-
export const ProductCard = ({ product, href, className, imageClassName, contentClassName, titleClassName, priceClassName, descriptionClassName, aspectRatio = 'square', imagePosition = 'center', imageObjectFit = 'cover', layout = 'default', hoverEffect = 'opacity', renderBadges = true, renderColor = true, renderDescription = false, elevationLevel = 0, rounded = 'md', titleLines = 1, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName = false, variationNameClassName = '', actionButton,
|
|
15
|
+
export const ProductCard = ({ product, href, className, imageClassName, contentClassName, titleClassName, priceClassName, priceDiscountClassName, descriptionClassName, aspectRatio = 'square', imagePosition = 'center', imageObjectFit = 'cover', layout = 'default', hoverEffect = 'opacity', renderBadges = true, renderColor = true, renderDescription = false, elevationLevel = 0, rounded = 'md', titleLines = 1, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName = false, variationNameClassName = '', actionButton,
|
|
16
16
|
// Add to cart functionality
|
|
17
17
|
showAddButton = false, showAddButtonOnHover = false, addButtonPosition = 'overlay', addButtonAlignment = 'center', addButtonText = 'Pridať do košíka', addButtonBottomClassName = '', borderOnHoverClassName = '', currentQuantity = 0, onQuantityChange, addButtonIcon = _jsx(ShoppingBagIcon, { className: "h-4 w-4" }), maxQuantity = 99, controlsClassName = '', buttonClassName = '', quantityClassName = '', customAddButton, disabled = false, locale, cartMode = 'full', showSpinnerInAdd = false,
|
|
18
18
|
// Wishlist functionality
|
|
@@ -168,7 +168,7 @@ priceFormatOptions, quantUnit = '', }) => {
|
|
|
168
168
|
priceFormatOptions?.containerClassName;
|
|
169
169
|
return (_jsxs("div", { className: buildClassesByJoining('group relative h-full', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', borderOnHoverClassName, className), onClick: handleCardClick, children: [renderHeader && renderHeader(product), _jsxs("div", { className: buildClassesByJoining(imageLayoutClass, 'relative'), children: [product.badges && renderBadges && (_jsx("div", { className: "absolute top-2 left-2 z-10 flex flex-wrap gap-1", children: product.badges.map((badge, index) => (_jsx(Badge, { color: badge.color, children: badge.text }, index))) })), showDeleteButton ? (_jsx(DeleteButton, { show: showDeleteButton, onDelete: handleDelete, deleteButtonClassName: deleteButtonClassName, isDeletePending: isDeletePending, size: deleteButtonSize, position: deleteButtonPosition })) : (_jsx(LikeButton, { show: showWishlistButton, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, wishlistButtonClassName: wishlistButtonClassName, wishlistDropdownClassName: wishlistDropdownClassName, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle })), _jsx("img", { alt: product.variation_images[0]?.alt, src: product.variation_images[0]?.href, className: buildClassesByJoining(aspectRatioClass, objectFitClass, objectPositionClass, hoverEffect !== 'none' ? hoverClass : '', roundedClass, 'bg-gray-200', onImageClick ? 'cursor-pointer' : '', imageClassName), onClick: handleImageClick }), addButtonPosition === 'overlay' && (_jsx(AddToCart, { buttonClassName: buttonClassName, addButtonIcon: getButtonIcon(), handleAddToCart: handleAddToCart, showAddButton: shouldShowAddButton(), disabled: disabled, customAddButton: customAddButton }))] }), _jsxs("div", { className: buildClassesByJoining('mt-4 h-full flex flex-col justify-between grow', contentLayoutClass, compactClass, contentClassName), children: [_jsxs("div", { className: "flex flex-col h-full justify-between", children: [_jsxs("div", { children: [_jsx(Heading, { level: 3, className: buildClassesByJoining('text-lg text-gray-700', titleLineClampClass, titleClassName), children: _jsxs(Button, { asLink: true, unstyled: true, href: href, children: [!onCardClick && (_jsx("span", { "aria-hidden": "true", className: "absolute inset-0" })), product.product_name] }) }), renderVariationName && product.variation_name && (_jsx("span", { className: buildClassesByJoining('text-md', variationNameClassName), children: product.variation_name })), renderDescription && product.description && (_jsx("span", { className: buildClassesByJoining('mt-1 text-sm text-gray-500 line-clamp-2', descriptionClassName), children: parseHTML(product.description) }))] }), _jsxs("div", { className: "flex flex-col justify-between", children: [shouldUseHtml ? (_jsxs("span", { className: "flex items-baseline gap-1", children: [_jsx("div", { className: buildClassesByJoining('text-md font-bold text-gray-900', priceClassName), dangerouslySetInnerHTML: formatPriceForHTML(product.price, locale, priceFormatOptions) }), quantUnit && (_jsx("p", { className: "text-md font-bold text-black", children: quantUnit }))] })) : (_jsxs("span", { className: "flex items-baseline gap-1", children: [_jsx("p", { className: buildClassesByJoining('text-md font-bold text-gray-900', priceClassName), children: formatPriceString(product.price, locale, priceFormatOptions) }), quantUnit && (_jsx("p", { className: "text-md font-bold text-black", children: quantUnit }))] })), product?.discountPercent != null &&
|
|
170
170
|
product.discountPercent > 0 &&
|
|
171
|
-
(shouldUseHtml ? (_jsxs("span", { className: "flex items-baseline gap-1", children: [_jsx("div", { className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through',
|
|
171
|
+
(shouldUseHtml ? (_jsxs("span", { className: "flex items-baseline gap-1", children: [_jsx("div", { className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', priceDiscountClassName), dangerouslySetInnerHTML: formatPriceForHTML(product.price / (1 - product.discountPercent / 100), locale, priceFormatOptions) }), quantUnit && (_jsx("p", { className: "text-sm font-normal text-black line-through", children: quantUnit }))] })) : (_jsxs("span", { className: "flex items-baseline gap-1", children: [_jsx("p", { className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', priceClassName), children: formatPriceString(product.price / (1 - product.discountPercent / 100), locale, priceFormatOptions) }), quantUnit && (_jsx("p", { className: "text-sm font-normal text-black line-through", children: quantUnit }))] }))), addButtonPosition === 'bottom' && (_jsx("div", { className: buildClassesByJoining('mt-3 flex w-full relative z-10', getBottomButtonAlignment()), onClick: (e) => e.stopPropagation(), children: shouldShowQuantityControls() ? (
|
|
172
172
|
// Quantity controls
|
|
173
173
|
_jsxs("div", { className: buildClassesByJoining('flex items-center gap-2', controlsClassName), children: [_jsx(Button, { onClick: handleDecrement, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded border', addButtonBottomClassName), disabled: disabled || currentQuantity <= 0, children: "\u2212" }), _jsx("span", { className: buildClassesByJoining('mx-2 font-medium', quantityClassName), children: currentQuantity }), _jsx(Button, { onClick: handleIncrement, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded border', addButtonBottomClassName), disabled: disabled || currentQuantity >= maxQuantity, children: "+" })] })) : shouldShowAddButton() ? (
|
|
174
174
|
// Add button
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@q2devel/q2-storybook",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.79",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"dependencies": {
|
|
68
68
|
"@headlessui/react": "^2.2.2",
|
|
69
69
|
"@heroicons/react": "^2.2.0",
|
|
70
|
-
"@q2devel/q2-core": "
|
|
70
|
+
"@q2devel/q2-core": "^1.0.5",
|
|
71
71
|
"@tanstack/react-query": "^5.76.1",
|
|
72
72
|
"axios": "^1.9.0",
|
|
73
73
|
"body-parser": "^2.2.0",
|