@q2devel/q2-storybook 1.0.200 → 1.0.201
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.
|
@@ -135,6 +135,8 @@ export type ProductProps = {
|
|
|
135
135
|
variations: ProductVariation[];
|
|
136
136
|
currentVariationId: string;
|
|
137
137
|
selectedVariationGradient?: boolean;
|
|
138
|
+
variationsLimit?: number;
|
|
139
|
+
showAllVariations?: boolean;
|
|
138
140
|
cartMode?: 'full' | 'add-only';
|
|
139
141
|
onOpenBasket?: () => void;
|
|
140
142
|
addToCartButtonCustomAction?: () => void | Promise<void>;
|
|
@@ -229,4 +231,4 @@ export type ProductProps = {
|
|
|
229
231
|
stockAvailability?: React.ReactNode;
|
|
230
232
|
stockAvailabilityClassName?: string;
|
|
231
233
|
};
|
|
232
|
-
export declare const ProductDetail: ({ name, price, discountPercent, description, detail, buttonText, className, specification, conversionToOtherUnit, hiddenStock, classNames, buttonClassName, descriptionClassName, 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, translationsWishlistDropdown, classNamesWishlistDropdown, onShippingOptionsClick, isWatchdogEnabled, onWatchdogClick, onDemandClick, translations, locale, quantUnit, mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, volumePriceFormatOptions, secondaryPrice, secondaryPriceFormatOptions, secondaryPriceClassName, secondaryQuantUnit, secondaryOmitMainQuantUnit, secondaryQuantUnitClassName, secondaryPriceRowClassName, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, volumePriceClassName, volumeQuantUnitClassName, breakpointForFreeShipping, stockAvailability, stockAvailabilityClassName, }: ProductProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
234
|
+
export declare const ProductDetail: ({ name, price, discountPercent, description, detail, buttonText, className, specification, conversionToOtherUnit, hiddenStock, classNames, buttonClassName, descriptionClassName, product, currentQuantity, onQuantityChange, maxQuantity, disabled, badges, showVariations, variations, currentVariationId, cartMode, onOpenBasket, addToCartButtonCustomAction, selectedVariationGradient, variationsLimit, showAllVariations, showWishlistButton, isInWishlist, onWishlistToggle, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, productWishlistIds, isWishlistPending, isLogged, onWishlistTextClick, showWishlistDropdown, onCloseWishlistDropdown, onAddToSpecificWishlist, onRemoveFromSpecificWishlist, onCreateNewWishlistFromDropdown, translationsWishlistDropdown, classNamesWishlistDropdown, onShippingOptionsClick, isWatchdogEnabled, onWatchdogClick, onDemandClick, translations, locale, quantUnit, mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions, volumePriceFormatOptions, secondaryPrice, secondaryPriceFormatOptions, secondaryPriceClassName, secondaryQuantUnit, secondaryOmitMainQuantUnit, secondaryQuantUnitClassName, secondaryPriceRowClassName, mainPriceClassName, discountPriceClassName, variationPriceClassName, mainQuantUnitClassName, discountQuantUnitClassName, volumePriceClassName, volumeQuantUnitClassName, breakpointForFreeShipping, stockAvailability, stockAvailabilityClassName, }: ProductProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -91,7 +91,7 @@ classNames = {
|
|
|
91
91
|
},
|
|
92
92
|
}, buttonClassName = '', descriptionClassName = '',
|
|
93
93
|
// Cart props
|
|
94
|
-
product, currentQuantity = 0, onQuantityChange, maxQuantity = 99, disabled = false, badges = [], showVariations = false, variations = [], currentVariationId, cartMode = 'full', onOpenBasket, addToCartButtonCustomAction, selectedVariationGradient = false,
|
|
94
|
+
product, currentQuantity = 0, onQuantityChange, maxQuantity = 99, disabled = false, badges = [], showVariations = false, variations = [], currentVariationId, cartMode = 'full', onOpenBasket, addToCartButtonCustomAction, selectedVariationGradient = false, variationsLimit = 6, showAllVariations = false,
|
|
95
95
|
// Wishlist props
|
|
96
96
|
showWishlistButton = false, isInWishlist = false, onWishlistToggle, enableMultipleWishlists = false, wishlists = [], onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, productWishlistIds = [], isWishlistPending = false, isLogged = false, onWishlistTextClick,
|
|
97
97
|
// Wishlist dropdown props
|
|
@@ -178,10 +178,9 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
178
178
|
return 1;
|
|
179
179
|
return 0;
|
|
180
180
|
});
|
|
181
|
-
const
|
|
182
|
-
const visibleVariations = showAll
|
|
181
|
+
const visibleVariations = showAllVariations || showAll
|
|
183
182
|
? sortedVariations
|
|
184
|
-
: sortedVariations.slice(0,
|
|
183
|
+
: sortedVariations.slice(0, variationsLimit);
|
|
185
184
|
if (!product) {
|
|
186
185
|
return null;
|
|
187
186
|
}
|
|
@@ -241,8 +240,9 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
241
240
|
?.variationEan), children: [translations.EAN, ":", ' ', variation.ean] })), _jsx(Price, { value: variation.price, locale: locale, options: variationPriceFormatOptions ||
|
|
242
241
|
mainPriceFormatOptions, className: buildClassesByJoining('font-semibold text-lg', variationPriceClassName, classNames
|
|
243
242
|
?.variations
|
|
244
|
-
?.variationPrice) })] })] }, variation.id))) }),
|
|
245
|
-
|
|
243
|
+
?.variationPrice) })] })] }, variation.id))) }), !showAllVariations &&
|
|
244
|
+
sortedVariations.length >
|
|
245
|
+
variationsLimit && (_jsx("button", { type: "button", onClick: () => setShowAll(!showAll), className: buildClassesByJoining('mt-3 text-sm font-medium text-green-700 hover:underline', classNames?.variations
|
|
246
246
|
?.variationShowAll), children: showAll
|
|
247
247
|
? translations.showLessVariations
|
|
248
248
|
: translations.showMoreVariations }))] })), _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, classNames?.price?.mainPrice), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('text-3xl tracking-tight font-semibold text-black', mainQuantUnitClassName, classNames?.price?.mainQuantUnit) }), secondaryPrice !== undefined && (_jsx("div", { className: buildClassesByJoining('mt-0.5', classNames?.price
|