@q2devel/q2-storybook 1.0.44 → 1.0.47
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.
|
@@ -23,6 +23,7 @@ export type ProductCardProps = {
|
|
|
23
23
|
renderBadges?: boolean;
|
|
24
24
|
renderColor?: boolean;
|
|
25
25
|
renderDescription?: boolean;
|
|
26
|
+
renderVariationName?: boolean;
|
|
26
27
|
elevationLevel?: 0 | 1 | 2 | 3;
|
|
27
28
|
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
|
|
28
29
|
titleLines?: 1 | 2 | 3;
|
|
@@ -63,4 +64,4 @@ export type ProductCardProps = {
|
|
|
63
64
|
deleteButtonSize?: 'sm' | 'md' | 'lg';
|
|
64
65
|
deleteButtonPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
|
65
66
|
};
|
|
66
|
-
export declare const ProductCard: ({ product, href, className, imageClassName, contentClassName, titleClassName, colorClassName, priceClassName, descriptionClassName, badgeClassName, aspectRatio, imagePosition, imageObjectFit, layout, hoverEffect, renderBadges, renderColor, renderDescription, elevationLevel, rounded, titleLines, onCardClick, onImageClick, renderFooter, renderHeader, actionButton, showAddButton, 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, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
67
|
+
export declare const ProductCard: ({ product, href, className, imageClassName, contentClassName, titleClassName, colorClassName, priceClassName, descriptionClassName, badgeClassName, aspectRatio, imagePosition, imageObjectFit, layout, hoverEffect, renderBadges, renderColor, renderDescription, elevationLevel, rounded, titleLines, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName, actionButton, showAddButton, 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, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -11,7 +11,7 @@ import Spinner from '../../Base/spinner/Spinner';
|
|
|
11
11
|
import Badge from '../../Base/badge/Badge';
|
|
12
12
|
import LikeButton from '../wishlist/LikeButton';
|
|
13
13
|
import DeleteButton from '../wishlist/DeleteButton';
|
|
14
|
-
export const ProductCard = ({ product, href, className, imageClassName, contentClassName, titleClassName, colorClassName, priceClassName, descriptionClassName, badgeClassName, 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, actionButton,
|
|
14
|
+
export const ProductCard = ({ product, href, className, imageClassName, contentClassName, titleClassName, colorClassName, priceClassName, descriptionClassName, badgeClassName, 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, actionButton,
|
|
15
15
|
// Add to cart functionality
|
|
16
16
|
showAddButton = false, currentQuantity = 0, onQuantityChange, addButtonIcon = _jsx(ShoppingBagIcon, { className: "h-4 w-4" }), maxQuantity = 99, controlsClassName = '', buttonClassName = '', quantityClassName = '', customAddButton, disabled = false, locale, cartMode = 'full', showSpinnerInAdd = false,
|
|
17
17
|
// Wishlist functionality
|
|
@@ -152,6 +152,6 @@ showDeleteButton = false, onDelete, deleteButtonClassName = '', isDeletePending
|
|
|
152
152
|
onDelete(product);
|
|
153
153
|
}
|
|
154
154
|
}, [onDelete, product]);
|
|
155
|
-
return (_jsxs("div", { className: buildClassesByJoining('group relative', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', 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 }), _jsx("div", { children: _jsx(AddToCart, { buttonClassName: buttonClassName, addButtonIcon: _jsx(ShoppingBagIcon, { className: "h-4 w-4" }), handleAddToCart: handleAddToCart, showAddButton: true, disabled: disabled }) })] }), _jsxs("div", { className: buildClassesByJoining('mt-4', contentLayoutClass, compactClass, contentClassName), children: [_jsxs("div", { className: "flex flex-col justify-between gap-3", 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] }) }), _jsx(Heading, { className: 'text-md', level: 4, children: product.variation_name }), renderDescription && product.description && (_jsx("p", { className: buildClassesByJoining('mt-1 text-sm text-gray-500 line-clamp-2', descriptionClassName), children: product.description }))] }), _jsxs("div", { className: 'flex flex-col justify-between', children: [_jsx("p", { className: buildClassesByJoining('text-md font-bold text-gray-900', priceClassName), children: formatPrice(product.price, locale) }), _jsx("p", { className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', priceClassName), children: product?.discountPercent != null && product.discountPercent > 0 &&
|
|
155
|
+
return (_jsxs("div", { className: buildClassesByJoining('group relative', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', 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 }), _jsx("div", { children: _jsx(AddToCart, { buttonClassName: buttonClassName, addButtonIcon: _jsx(ShoppingBagIcon, { className: "h-4 w-4" }), handleAddToCart: handleAddToCart, showAddButton: true, disabled: disabled }) })] }), _jsxs("div", { className: buildClassesByJoining('mt-4', contentLayoutClass, compactClass, contentClassName), children: [_jsxs("div", { className: "flex flex-col justify-between gap-3", 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(Heading, { className: 'text-md', level: 4, children: product.variation_name })), renderDescription && product.description && (_jsx("p", { className: buildClassesByJoining('mt-1 text-sm text-gray-500 line-clamp-2', descriptionClassName), children: product.description }))] }), _jsxs("div", { className: 'flex flex-col justify-between', children: [_jsx("p", { className: buildClassesByJoining('text-md font-bold text-gray-900', priceClassName), children: formatPrice(product.price, locale) }), _jsx("p", { className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', priceClassName), children: product?.discountPercent != null && product.discountPercent > 0 &&
|
|
156
156
|
formatPrice(product.price / (1 - product.discountPercent / 100), locale) })] })] }), actionButton && _jsx("div", { className: "mt-2", children: actionButton }), renderFooter && renderFooter(product)] })] }));
|
|
157
157
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@q2devel/q2-storybook",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.47",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"dependencies": {
|
|
65
65
|
"@headlessui/react": "^2.2.2",
|
|
66
66
|
"@heroicons/react": "^2.2.0",
|
|
67
|
-
"@q2devel/q2-core": "^1.0.
|
|
67
|
+
"@q2devel/q2-core": "^1.0.3",
|
|
68
68
|
"@tanstack/react-query": "^5.76.1",
|
|
69
69
|
"axios": "^1.9.0",
|
|
70
70
|
"classnames": "^2.5.1",
|