@trafilea/afrodita-components 5.0.0-beta.33 → 5.0.0-beta.35
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/build/index.d.ts +6 -6
- package/build/index.esm.js +8 -8
- package/build/index.js +8 -8
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -584,13 +584,13 @@ declare const MultiColorPicker: ({ options, label, selectedValue, onChange, }: M
|
|
|
584
584
|
interface ProductGalleryProps {
|
|
585
585
|
images: ImageType[];
|
|
586
586
|
selectedValue?: ImageType;
|
|
587
|
-
|
|
588
|
-
|
|
587
|
+
topTag?: JSX.Element;
|
|
588
|
+
bottomTag?: JSX.Element;
|
|
589
589
|
productImageDataTestId?: string;
|
|
590
590
|
previewListDataTestId?: string;
|
|
591
591
|
thumbnailPosition?: 'vertical' | 'horizontal';
|
|
592
592
|
}
|
|
593
|
-
declare const ProductGallery: ({ images, selectedValue,
|
|
593
|
+
declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, }: ProductGalleryProps) => JSX.Element;
|
|
594
594
|
|
|
595
595
|
interface RatingProps {
|
|
596
596
|
rating: number;
|
|
@@ -1606,12 +1606,12 @@ declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onCl
|
|
|
1606
1606
|
interface ProductGalleryMobileProps {
|
|
1607
1607
|
images: ImageType[];
|
|
1608
1608
|
selectedValue?: ImageType;
|
|
1609
|
-
|
|
1610
|
-
|
|
1609
|
+
topTag?: JSX.Element;
|
|
1610
|
+
bottomTag?: JSX.Element;
|
|
1611
1611
|
productImageDataTestId?: string;
|
|
1612
1612
|
slideDotsDataTestId?: string;
|
|
1613
1613
|
}
|
|
1614
|
-
declare const ProductGalleryMobile: ({ images, selectedValue,
|
|
1614
|
+
declare const ProductGalleryMobile: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
|
|
1615
1615
|
|
|
1616
1616
|
interface RadioProps {
|
|
1617
1617
|
name: string;
|
package/build/index.esm.js
CHANGED
|
@@ -8871,14 +8871,14 @@ var Container$A = newStyled.div(templateObject_1$U || (templateObject_1$U = __ma
|
|
|
8871
8871
|
var TopTagContainer$2 = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
8872
8872
|
var BottomTagContainer$2 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
8873
8873
|
var ImageProductWithTags$1 = function (_a) {
|
|
8874
|
-
var image = _a.image,
|
|
8875
|
-
return (jsxs$1(Container$A, __assign$1({ "data-testid": testId, className: "stylefor".concat(position) }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? 'auto' : '720px' }, void 0), jsx$1(TopTagContainer$2, { children:
|
|
8874
|
+
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position;
|
|
8875
|
+
return (jsxs$1(Container$A, __assign$1({ "data-testid": testId, className: "stylefor".concat(position) }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? 'auto' : '720px' }, void 0), jsx$1(TopTagContainer$2, { children: topTag }, void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
8876
8876
|
};
|
|
8877
8877
|
var templateObject_1$U, templateObject_2$A, templateObject_3$p;
|
|
8878
8878
|
|
|
8879
8879
|
var Container$z = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
8880
8880
|
var ProductGallery = function (_a) {
|
|
8881
|
-
var images = _a.images, selectedValue = _a.selectedValue,
|
|
8881
|
+
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition;
|
|
8882
8882
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
8883
8883
|
var _b = useState(initialValue), selectedImage = _b[0], setSelectedImage = _b[1];
|
|
8884
8884
|
useEffect(function () {
|
|
@@ -8886,7 +8886,7 @@ var ProductGallery = function (_a) {
|
|
|
8886
8886
|
}, [initialValue]);
|
|
8887
8887
|
return (jsxs$1(Container$z, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
8888
8888
|
setSelectedImage(value);
|
|
8889
|
-
}, position: thumbnailPosition }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage,
|
|
8889
|
+
}, position: thumbnailPosition }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition }, void 0)] }, void 0));
|
|
8890
8890
|
};
|
|
8891
8891
|
var templateObject_1$T;
|
|
8892
8892
|
|
|
@@ -10932,8 +10932,8 @@ var Container$7 = newStyled.div(templateObject_1$e || (templateObject_1$e = __ma
|
|
|
10932
10932
|
var TopTagContainer = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
10933
10933
|
var BottomTagContainer = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
10934
10934
|
var ImageProductWithTags = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
10935
|
-
var image = _a.image,
|
|
10936
|
-
return (jsxs$1(Container$7, __assign$1({ "data-testid": testId, ref: ref }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsx$1(TopTagContainer, { children:
|
|
10935
|
+
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId;
|
|
10936
|
+
return (jsxs$1(Container$7, __assign$1({ "data-testid": testId, ref: ref }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsx$1(TopTagContainer, { children: topTag }, void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
10937
10937
|
});
|
|
10938
10938
|
var templateObject_1$e, templateObject_2$7, templateObject_3$7;
|
|
10939
10939
|
|
|
@@ -10973,7 +10973,7 @@ var templateObject_1$b, templateObject_2$6, templateObject_3$6;
|
|
|
10973
10973
|
|
|
10974
10974
|
var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
10975
10975
|
var ProductGalleryMobile = function (_a) {
|
|
10976
|
-
var images = _a.images, selectedValue = _a.selectedValue,
|
|
10976
|
+
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
10977
10977
|
var _b = useState(0), index = _b[0], setIndex = _b[1];
|
|
10978
10978
|
useEffect(function () {
|
|
10979
10979
|
if (selectedValue == null) {
|
|
@@ -10999,7 +10999,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
10999
10999
|
useEffect(function () {
|
|
11000
11000
|
setSelectedImage(images[index]);
|
|
11001
11001
|
}, [index, images]);
|
|
11002
|
-
return (jsxs$1(Container$5, { children: [jsx$1(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage,
|
|
11002
|
+
return (jsxs$1(Container$5, { children: [jsx$1(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
11003
11003
|
};
|
|
11004
11004
|
var templateObject_1$a;
|
|
11005
11005
|
|
package/build/index.js
CHANGED
|
@@ -8897,14 +8897,14 @@ var Container$A = newStyled.div(templateObject_1$U || (templateObject_1$U = __ma
|
|
|
8897
8897
|
var TopTagContainer$2 = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
8898
8898
|
var BottomTagContainer$2 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
8899
8899
|
var ImageProductWithTags$1 = function (_a) {
|
|
8900
|
-
var image = _a.image,
|
|
8901
|
-
return (jsxRuntime.jsxs(Container$A, __assign$1({ "data-testid": testId, className: "stylefor".concat(position) }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? 'auto' : '720px' }, void 0), jsxRuntime.jsx(TopTagContainer$2, { children:
|
|
8900
|
+
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position;
|
|
8901
|
+
return (jsxRuntime.jsxs(Container$A, __assign$1({ "data-testid": testId, className: "stylefor".concat(position) }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? 'auto' : '720px' }, void 0), jsxRuntime.jsx(TopTagContainer$2, { children: topTag }, void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
8902
8902
|
};
|
|
8903
8903
|
var templateObject_1$U, templateObject_2$A, templateObject_3$p;
|
|
8904
8904
|
|
|
8905
8905
|
var Container$z = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
8906
8906
|
var ProductGallery = function (_a) {
|
|
8907
|
-
var images = _a.images, selectedValue = _a.selectedValue,
|
|
8907
|
+
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition;
|
|
8908
8908
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
8909
8909
|
var _b = React$2.useState(initialValue), selectedImage = _b[0], setSelectedImage = _b[1];
|
|
8910
8910
|
React$2.useEffect(function () {
|
|
@@ -8912,7 +8912,7 @@ var ProductGallery = function (_a) {
|
|
|
8912
8912
|
}, [initialValue]);
|
|
8913
8913
|
return (jsxRuntime.jsxs(Container$z, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
8914
8914
|
setSelectedImage(value);
|
|
8915
|
-
}, position: thumbnailPosition }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage,
|
|
8915
|
+
}, position: thumbnailPosition }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition }, void 0)] }, void 0));
|
|
8916
8916
|
};
|
|
8917
8917
|
var templateObject_1$T;
|
|
8918
8918
|
|
|
@@ -10958,8 +10958,8 @@ var Container$7 = newStyled.div(templateObject_1$e || (templateObject_1$e = __ma
|
|
|
10958
10958
|
var TopTagContainer = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
10959
10959
|
var BottomTagContainer = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
10960
10960
|
var ImageProductWithTags = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
10961
|
-
var image = _a.image,
|
|
10962
|
-
return (jsxRuntime.jsxs(Container$7, __assign$1({ "data-testid": testId, ref: ref }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsxRuntime.jsx(TopTagContainer, { children:
|
|
10961
|
+
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId;
|
|
10962
|
+
return (jsxRuntime.jsxs(Container$7, __assign$1({ "data-testid": testId, ref: ref }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsxRuntime.jsx(TopTagContainer, { children: topTag }, void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
10963
10963
|
});
|
|
10964
10964
|
var templateObject_1$e, templateObject_2$7, templateObject_3$7;
|
|
10965
10965
|
|
|
@@ -10999,7 +10999,7 @@ var templateObject_1$b, templateObject_2$6, templateObject_3$6;
|
|
|
10999
10999
|
|
|
11000
11000
|
var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
11001
11001
|
var ProductGalleryMobile = function (_a) {
|
|
11002
|
-
var images = _a.images, selectedValue = _a.selectedValue,
|
|
11002
|
+
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
11003
11003
|
var _b = React$2.useState(0), index = _b[0], setIndex = _b[1];
|
|
11004
11004
|
React$2.useEffect(function () {
|
|
11005
11005
|
if (selectedValue == null) {
|
|
@@ -11025,7 +11025,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
11025
11025
|
React$2.useEffect(function () {
|
|
11026
11026
|
setSelectedImage(images[index]);
|
|
11027
11027
|
}, [index, images]);
|
|
11028
|
-
return (jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage,
|
|
11028
|
+
return (jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
11029
11029
|
};
|
|
11030
11030
|
var templateObject_1$a;
|
|
11031
11031
|
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Trafilea's Design System",
|
|
4
4
|
"author": "Trafilea",
|
|
5
5
|
"repository": "https://github.com/trafilea/afrodita-components",
|
|
6
|
-
"version": "5.0.0-beta.
|
|
6
|
+
"version": "5.0.0-beta.35",
|
|
7
7
|
"private": false,
|
|
8
8
|
"main": "build/index.js",
|
|
9
9
|
"style": "build/index.css",
|