@q2devel/q2-storybook 1.0.139 → 1.0.141
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.
|
@@ -28,6 +28,7 @@ export type ProductProps = {
|
|
|
28
28
|
[key: string]: string;
|
|
29
29
|
}>;
|
|
30
30
|
conversionToOtherUnit?: boolean;
|
|
31
|
+
hiddenStock?: boolean;
|
|
31
32
|
buttonClassName?: string;
|
|
32
33
|
descriptionClassName?: string;
|
|
33
34
|
specificationClassName?: {
|
|
@@ -54,6 +55,7 @@ export type ProductProps = {
|
|
|
54
55
|
showVariations?: boolean;
|
|
55
56
|
variations: ProductVariation[];
|
|
56
57
|
currentVariationId: string;
|
|
58
|
+
selectedVariationGradient?: boolean;
|
|
57
59
|
cartMode?: 'full' | 'add-only';
|
|
58
60
|
onOpenBasket?: () => void;
|
|
59
61
|
addToCartButtonCustomAction?: () => void | Promise<void>;
|
|
@@ -107,4 +109,4 @@ export type ProductProps = {
|
|
|
107
109
|
volumePriceClassName?: string;
|
|
108
110
|
volumeQuantUnitClassName?: string;
|
|
109
111
|
};
|
|
110
|
-
export declare const ProductDetail: ({ name, price, href, discountPercent, description, detail, buttonText, className, specification, conversionToOtherUnit, buttonClassName, descriptionClassName, specificationClassName, manufacturerClassName, product, currentQuantity, onQuantityChange, maxQuantity, disabled, badges, showVariations, variations, currentVariationId, cartMode, onOpenBasket, addToCartButtonCustomAction,
|
|
112
|
+
export declare const ProductDetail: ({ name, price, href, discountPercent, description, detail, buttonText, className, specification, conversionToOtherUnit, hiddenStock, buttonClassName, descriptionClassName, specificationClassName, manufacturerClassName, product, currentQuantity, onQuantityChange, maxQuantity, disabled, badges, showVariations, variations, currentVariationId, cartMode, onOpenBasket, addToCartButtonCustomAction, selectedVariationGradient, 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, volumePriceFormatOptions, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, volumePriceClassName, volumeQuantUnitClassName, }: ProductProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -11,7 +11,7 @@ import { Price } from '../../Base/price/Price';
|
|
|
11
11
|
import { HorizontalTab } from '../../Web/tabs/HorizontalTab';
|
|
12
12
|
import WishlistDropdown from '../wishlist/WishlistDropdown';
|
|
13
13
|
import ProductDetailGallery from './ProductDetailGallery';
|
|
14
|
-
export const ProductDetail = ({ name = '', price = 0, href = '', discountPercent = 0, description = '', detail = { tabs: [] }, buttonText = 'Add to bag', className = '', specification, conversionToOtherUnit = false,
|
|
14
|
+
export const ProductDetail = ({ name = '', price = 0, href = '', discountPercent = 0, description = '', detail = { tabs: [] }, buttonText = 'Add to bag', className = '', specification, conversionToOtherUnit = false, hiddenStock = false,
|
|
15
15
|
// classnames
|
|
16
16
|
buttonClassName = '', descriptionClassName = '', specificationClassName = {
|
|
17
17
|
heading: '',
|
|
@@ -24,7 +24,7 @@ buttonClassName = '', descriptionClassName = '', specificationClassName = {
|
|
|
24
24
|
image: '',
|
|
25
25
|
},
|
|
26
26
|
// Cart props
|
|
27
|
-
product, currentQuantity = 0, onQuantityChange, maxQuantity = 99, disabled = false, badges = [], showVariations = false, variations = [], currentVariationId, cartMode = 'full', onOpenBasket, addToCartButtonCustomAction,
|
|
27
|
+
product, currentQuantity = 0, onQuantityChange, maxQuantity = 99, disabled = false, badges = [], showVariations = false, variations = [], currentVariationId, cartMode = 'full', onOpenBasket, addToCartButtonCustomAction, selectedVariationGradient = false,
|
|
28
28
|
// Wishlist props
|
|
29
29
|
showWishlistButton = false, isInWishlist = false, onWishlistToggle, enableMultipleWishlists = false, wishlists = [], onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, productWishlistIds = [], isWishlistPending = false, isLogged = false, onWishlistTextClick,
|
|
30
30
|
// Wishlist dropdown props
|
|
@@ -114,13 +114,22 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
114
114
|
}
|
|
115
115
|
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
|
|
116
116
|
? `${badge.color} inline-flex items-center px-2 py-1 text-xs font-medium text-w`
|
|
117
|
-
: '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: buildClassesByJoining('space-y-6 text-base text-gray-700', descriptionClassName) })] }), _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
|
|
118
|
-
? 'border-[var(--primary)]'
|
|
119
|
-
: 'border-gray-200', 'cursor-pointer transition-all duration-150 hover:border-[var(--primary)] hover:shadow-md'), children: [
|
|
117
|
+
: '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: buildClassesByJoining('space-y-6 text-base text-gray-700', descriptionClassName) })] }), _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 relative overflow-hidden', currentVariationId == variation.id
|
|
118
|
+
? 'border-[var(--primary)] border-2 shadow-xl'
|
|
119
|
+
: 'border-gray-200 shadow-sm', 'cursor-pointer transition-all duration-150 hover:border-[var(--primary)] hover:shadow-md'), children: [selectedVariationGradient &&
|
|
120
|
+
currentVariationId == variation.id && (_jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
|
|
121
|
+
background: `
|
|
122
|
+
radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
|
|
123
|
+
radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
|
|
124
|
+
radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
|
|
125
|
+
radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
|
|
126
|
+
`,
|
|
127
|
+
opacity: 0.2,
|
|
128
|
+
} })), _jsxs("div", { className: "flex flex-col justify-between gap-1 relative z-10", children: [_jsx("span", { className: "font-medium text-base capitalize", children: variation.title }), !hiddenStock && (_jsx("span", { className: (variation.stock ?? 0) > 0
|
|
120
129
|
? 'text-green-600 text-sm'
|
|
121
130
|
: 'text-red-600 text-sm', children: (variation.stock ?? 0) > 0
|
|
122
131
|
? `Skladem: ${variation.stock ?? 0} ks`
|
|
123
|
-
: 'Není skladem' })] }), _jsxs("div", { className: "flex flex-col justify-center items-end text-right gap-1", children: [_jsxs("span", { className: "text-xs text-gray-500", children: ["K\u00F3d: ", variation.sku] }), _jsxs("span", { className: "text-xs text-gray-500", children: ["EAN: ", variation.ean] }), _jsx(Price, { value: variation.price, locale: locale, options: variationPriceFormatOptions ||
|
|
132
|
+
: 'Není skladem' }))] }), _jsxs("div", { className: "flex flex-col justify-center items-end text-right gap-1 relative z-10", children: [_jsxs("span", { className: "text-xs text-gray-500", children: ["K\u00F3d: ", variation.sku] }), _jsxs("span", { className: "text-xs text-gray-500", children: ["EAN: ", variation.ean] }), _jsx(Price, { value: variation.price, locale: locale, options: variationPriceFormatOptions ||
|
|
124
133
|
mainPriceFormatOptions, className: buildClassesByJoining('font-semibold text-lg', variationPriceClassName) })] })] }, variation.id))) }), sortedVariations.length > numberOfVisibleVariations && (_jsx("button", { type: "button", onClick: () => setShowAll(!showAll), className: "mt-3 text-sm font-medium text-green-700 hover:underline", children: showAll
|
|
125
134
|
? 'Zobrazit méně variant'
|
|
126
135
|
: 'Zobrazit více variant' }))] })), _jsxs("div", { className: "mt-3", children: [_jsx(Heading, { level: 2, className: "sr-only", children: "Product information" }), _jsxs("div", { children: [_jsx(Price, { value: price, locale: locale, options: mainPriceFormatOptions, className: buildClassesByJoining('text-3xl tracking-tight font-semibold text-[var(--primary)]', mainPriceClassName), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('text-3xl tracking-tight font-semibold text-black', mainQuantUnitClassName) }), conversionToOtherUnit &&
|