@q2devel/q2-storybook 1.0.188 → 1.0.189
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.
- package/dist/components/Ecommerce/product-detail/ProductDetail.d.ts +11 -0
- package/dist/components/Ecommerce/product-detail/ProductDetail.js +20 -7
- package/dist/components/Ecommerce/product-detail/ProductDetailGallery.d.ts +10 -1
- package/dist/components/Ecommerce/product-detail/ProductDetailGallery.js +3 -2
- package/package.json +1 -1
|
@@ -79,6 +79,8 @@ export type ProductProps = {
|
|
|
79
79
|
wishlistButton?: string;
|
|
80
80
|
wishlistButtonIcon?: string;
|
|
81
81
|
wishlistButtonText?: string;
|
|
82
|
+
questionButton?: string;
|
|
83
|
+
questionButtonText?: string;
|
|
82
84
|
};
|
|
83
85
|
specification?: {
|
|
84
86
|
heading?: string;
|
|
@@ -91,6 +93,15 @@ export type ProductProps = {
|
|
|
91
93
|
description?: string;
|
|
92
94
|
image?: string;
|
|
93
95
|
};
|
|
96
|
+
imageGallery?: {
|
|
97
|
+
container?: string;
|
|
98
|
+
image?: string;
|
|
99
|
+
list?: string;
|
|
100
|
+
imageThumbnail?: string;
|
|
101
|
+
imageActiveBorder?: string;
|
|
102
|
+
imageActivePanel?: string;
|
|
103
|
+
imageActive?: string;
|
|
104
|
+
};
|
|
94
105
|
};
|
|
95
106
|
detailClassName?: string;
|
|
96
107
|
buttonClassName?: string;
|
|
@@ -63,6 +63,8 @@ classNames = {
|
|
|
63
63
|
wishlistButton: '',
|
|
64
64
|
wishlistButtonIcon: '',
|
|
65
65
|
wishlistButtonText: '',
|
|
66
|
+
questionButton: '',
|
|
67
|
+
questionButtonText: '',
|
|
66
68
|
},
|
|
67
69
|
specification: {
|
|
68
70
|
heading: '',
|
|
@@ -75,6 +77,15 @@ classNames = {
|
|
|
75
77
|
description: '',
|
|
76
78
|
image: '',
|
|
77
79
|
},
|
|
80
|
+
imageGallery: {
|
|
81
|
+
container: '',
|
|
82
|
+
list: '',
|
|
83
|
+
image: '',
|
|
84
|
+
imageThumbnail: '',
|
|
85
|
+
imageActiveBorder: '',
|
|
86
|
+
imageActivePanel: '',
|
|
87
|
+
imageActive: '',
|
|
88
|
+
},
|
|
78
89
|
}, buttonClassName = '', descriptionClassName = '',
|
|
79
90
|
// Cart props
|
|
80
91
|
product, currentQuantity = 0, onQuantityChange, maxQuantity = 99, disabled = false, badges = [], showVariations = false, variations = [], currentVariationId, cartMode = 'full', onOpenBasket, addToCartButtonCustomAction, selectedVariationGradient = false,
|
|
@@ -171,7 +182,7 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
171
182
|
if (!product) {
|
|
172
183
|
return null;
|
|
173
184
|
}
|
|
174
|
-
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 sm:mt-16 lg:mt-0", children: [badges && badges.length > 0 && (_jsx("div", { className: buildClassesByJoining('flex flex-wrap gap-2', classNames?.badges?.container), children: badges.map((badge, index) => (_jsx("span", { className: buildClassesByJoining(badge.color
|
|
185
|
+
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 || (() => { }), classNames: classNames?.imageGallery }), _jsxs("div", { className: "mt-10 sm:mt-16 lg:mt-0", children: [badges && badges.length > 0 && (_jsx("div", { className: buildClassesByJoining('flex flex-wrap gap-2', classNames?.badges?.container), children: badges.map((badge, index) => (_jsx("span", { className: buildClassesByJoining(badge.color
|
|
175
186
|
? `${badge.color} inline-flex items-center px-2 py-1 text-xs font-medium text-w`
|
|
176
187
|
: 'bg-gray-200 text-gray-800 px-2 py-1 text-xs font-medium', classNames?.badges?.badge), children: badge.text }, index))) })), _jsx(Heading, { className: buildClassesByJoining('mt-8 font-extralight', classNames?.title), level: 1, children: name }), _jsxs("div", { className: buildClassesByJoining('flex gap-4', classNames?.identifier?.container), children: [product.sku && (_jsxs("span", { className: buildClassesByJoining('text-sm text-gray-500', classNames?.identifier?.sku), children: [translations.sku, ": ", product.sku] })), product.ean && (_jsxs("span", { className: buildClassesByJoining('text-sm text-gray-500', classNames?.identifier?.ean), children: [translations.EAN, ": ", product.ean] }))] }), _jsxs("div", { className: "mt-6", children: [_jsx(Heading, { level: 3, className: "sr-only", children: "Description" }), _jsx("div", { dangerouslySetInnerHTML: {
|
|
177
188
|
__html: description,
|
|
@@ -184,11 +195,11 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
184
195
|
variation.id && (_jsx("div", { className: buildClassesByJoining('absolute inset-0 pointer-events-none', classNames
|
|
185
196
|
?.variations
|
|
186
197
|
?.variationActiveButton), style: {
|
|
187
|
-
background: `
|
|
188
|
-
radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
|
|
189
|
-
radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
|
|
190
|
-
radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
|
|
191
|
-
radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
|
|
198
|
+
background: `
|
|
199
|
+
radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
|
|
200
|
+
radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
|
|
201
|
+
radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
|
|
202
|
+
radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
|
|
192
203
|
`,
|
|
193
204
|
opacity: 0.2,
|
|
194
205
|
} })), _jsxs("div", { className: buildClassesByJoining('flex flex-col justify-between gap-1 relative z-10 flex-1 min-w-0 pr-2', classNames?.variations
|
|
@@ -250,7 +261,9 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
|
|
|
250
261
|
?.shippingDetailFee), 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: buildClassesByJoining('flex gap-2', classNames?.button
|
|
251
262
|
?.watchdogButton), 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: buildClassesByJoining('size-5 text-[var(--primary)]', classNames?.button
|
|
252
263
|
?.watchdogButtonIcon), 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: buildClassesByJoining('underline hover:no-underline', classNames?.button
|
|
253
|
-
?.watchdogButtonText), children: translations.watchDog })] })), _jsxs(Button, { unstyled: true, className:
|
|
264
|
+
?.watchdogButtonText), children: translations.watchDog })] })), _jsxs(Button, { unstyled: true, className: buildClassesByJoining('flex gap-2', classNames?.button
|
|
265
|
+
?.questionButton), 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: buildClassesByJoining('underline hover:no-underline', classNames?.button
|
|
266
|
+
?.questionButtonText), children: translations.question })] }), _jsxs(Button, { unstyled: true, className: buildClassesByJoining('flex gap-2', classNames?.button
|
|
254
267
|
?.shippingOptionsButton), 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: buildClassesByJoining('size-5 text-[var(--primary)]', classNames?.button
|
|
255
268
|
?.shippingOptionsButtonIcon), 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: buildClassesByJoining('underline hover:no-underline cursor-pointer', classNames?.button
|
|
256
269
|
?.shippingOptionsButtonText), children: translations.optionOfShipping })] }), isLogged && (_jsxs("div", { className: "relative", children: [_jsxs("button", { ref: wishlistButtonRef, className: buildClassesByJoining('flex gap-2 text-left hover:text-green-600 transition-colors', classNames?.button
|
|
@@ -11,6 +11,15 @@ type ProductDetailGalleryProps = {
|
|
|
11
11
|
onAddToWishlist: (product: Product, wishlistId: string) => void;
|
|
12
12
|
onRemoveFromWishlist: (product: Product, wishlistId: string) => void;
|
|
13
13
|
onCreateWishlist: (name: string, product: Product) => void;
|
|
14
|
+
classNames?: {
|
|
15
|
+
container?: string;
|
|
16
|
+
list?: string;
|
|
17
|
+
image?: string;
|
|
18
|
+
imageThumbnail?: string;
|
|
19
|
+
imageActiveBorder?: string;
|
|
20
|
+
imageActivePanel?: string;
|
|
21
|
+
imageActive?: string;
|
|
22
|
+
};
|
|
14
23
|
};
|
|
15
|
-
declare const ProductDetailGallery: ({ product, showWishlistButton, enableMultipleWishlists, isInWishlist, wishlists, productWishlistIds, isWishlistPending, onWishlistToggle, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, }: ProductDetailGalleryProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare const ProductDetailGallery: ({ product, classNames, showWishlistButton, enableMultipleWishlists, isInWishlist, wishlists, productWishlistIds, isWishlistPending, onWishlistToggle, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, }: ProductDetailGalleryProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
25
|
export default ProductDetailGallery;
|
|
@@ -3,7 +3,8 @@ import { useState } from 'react';
|
|
|
3
3
|
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
|
|
4
4
|
import { ImageGalleryModal } from '../../Base/image-gallery-modal/ImageGalleryModal';
|
|
5
5
|
import LikeButton from '../wishlist/LikeButton';
|
|
6
|
-
|
|
6
|
+
import { buildClassesByJoining } from '../../../utils/StyleHelper';
|
|
7
|
+
const ProductDetailGallery = ({ product, classNames, showWishlistButton, enableMultipleWishlists, isInWishlist, wishlists, productWishlistIds, isWishlistPending, onWishlistToggle, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, }) => {
|
|
7
8
|
// State pre modálnu galériu
|
|
8
9
|
const [isGalleryOpen, setIsGalleryOpen] = useState(false);
|
|
9
10
|
const [galleryInitialIndex, setGalleryInitialIndex] = useState(0);
|
|
@@ -31,6 +32,6 @@ const ProductDetailGallery = ({ product, showWishlistButton, enableMultipleWishl
|
|
|
31
32
|
onCreateWishlist(name, product);
|
|
32
33
|
}
|
|
33
34
|
};
|
|
34
|
-
return (_jsxs(_Fragment, { children: [_jsxs(TabGroup, { className:
|
|
35
|
+
return (_jsxs(_Fragment, { children: [_jsxs(TabGroup, { className: buildClassesByJoining('flex flex-col-reverse items-center', classNames?.container), children: [_jsx("div", { className: "mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none", children: _jsx(TabList, { className: buildClassesByJoining('grid grid-cols-4 gap-6', classNames?.list), children: product.all_images.map((image, i) => (_jsxs(Tab, { className: buildClassesByJoining('group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-[var(--primary)]/50 focus:ring-offset-4 focus:outline-hidden', classNames?.image), children: [_jsx("span", { className: "sr-only", children: image.alt }), _jsx("span", { className: "absolute inset-0 overflow-hidden", children: _jsx("img", { src: image.href, alt: "", className: buildClassesByJoining('size-full object-contain', classNames?.imageThumbnail) }) }), _jsx("span", { "aria-hidden": "true", className: buildClassesByJoining('pointer-events-none absolute inset-0 ring-2 ring-transparent ring-offset-2 group-data-selected:ring-[var(--primary)]', classNames?.imageActiveBorder) })] }, i))) }) }), _jsxs(TabPanels, { className: "relative w-full", children: [product.all_images.map((image, i) => (_jsx(TabPanel, { className: buildClassesByJoining('relative', classNames?.imageActivePanel), children: _jsx("img", { src: image.href, alt: image.alt, onClick: () => openGallery(i), className: buildClassesByJoining('aspect-[7/5] w-full object-contain border-1 border-gray-200 cursor-pointer hover:opacity-90 transition-opacity', classNames?.imageActive) }) }, i))), showWishlistButton && (_jsx("div", { className: "absolute top-3 right-3 z-10", children: _jsx(LikeButton, { show: true, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle, wishlistButtonClassName: "bg-white/90 backdrop-blur-sm border border-gray-200 shadow-lg hover:shadow-xl" }) }))] })] }), _jsx(ImageGalleryModal, { images: product.all_images, isOpen: isGalleryOpen, initialIndex: galleryInitialIndex, onClose: closeGallery })] }));
|
|
35
36
|
};
|
|
36
37
|
export default ProductDetailGallery;
|