@citygross/components 0.21.2 → 0.21.4
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/@types/components/ListItem/ListItem.d.ts +1 -0
- package/build/cjs/components/src/components/ListItem/ListItem.js +6 -6
- package/build/cjs/components/src/components/PartnerOffer/PartnerOffer.styles.js +3 -3
- package/build/es/components/src/components/ListItem/ListItem.js +6 -6
- package/build/es/components/src/components/PartnerOffer/PartnerOffer.styles.js +3 -3
- package/package.json +2 -2
|
@@ -26,11 +26,11 @@ exports.EListItemAlignment = void 0;
|
|
|
26
26
|
})(exports.EListItemAlignment || (exports.EListItemAlignment = {}));
|
|
27
27
|
var ListItem = function (_a) {
|
|
28
28
|
var _b, _c, _d;
|
|
29
|
-
var _e = _a.alignment, alignment = _e === void 0 ? exports.EListItemAlignment.CENTER : _e, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, checkboxLegendLabel = _a.checkboxLegendLabel, _f = _a.imageAlt, imageAlt = _f === void 0 ? '' : _f, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, label = _a.label, _g = _a.
|
|
29
|
+
var _e = _a.alignment, alignment = _e === void 0 ? exports.EListItemAlignment.CENTER : _e, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, checkboxLegendLabel = _a.checkboxLegendLabel, _f = _a.imageAlt, imageAlt = _f === void 0 ? '' : _f, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, label = _a.label, _g = _a.labelBackground, labelBackground = _g === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.blueLighter : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.showPriceStripe, showPriceStripe = _j === void 0 ? false : _j, smallSkeleton = _a.smallSkeleton;
|
|
30
30
|
return (React__default["default"].createElement(ListItem_styles.ListItemContainer, null,
|
|
31
31
|
React__default["default"].createElement(ListItem_styles.ListLeft, { alignment: alignment },
|
|
32
|
-
React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
|
|
33
|
-
React__default["default"].createElement(ListItem_styles.ListImage, { autoHeight: imageAutoHeight, src: item
|
|
32
|
+
(item === null || item === void 0 ? void 0 : item.image) && (React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
|
|
33
|
+
React__default["default"].createElement(ListItem_styles.ListImage, { autoHeight: imageAutoHeight, src: item.image, alt: imageAlt, isSmall: isSmall, onError: function (e) {
|
|
34
34
|
if (fallBackImage) {
|
|
35
35
|
var target = e.target;
|
|
36
36
|
if (!target.dataset.fallback) {
|
|
@@ -39,7 +39,7 @@ var ListItem = function (_a) {
|
|
|
39
39
|
target.src = fallBackImage;
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
-
} })),
|
|
42
|
+
} }))),
|
|
43
43
|
React__default["default"].createElement(ListItem_styles.ItemInformationContainer, { alignment: alignment },
|
|
44
44
|
loading ? (React__default["default"].createElement(React.Fragment, null,
|
|
45
45
|
React__default["default"].createElement(Skeleton__default["default"], { height: 15, width: smallSkeleton ? 150 : 250 }),
|
|
@@ -47,7 +47,7 @@ var ListItem = function (_a) {
|
|
|
47
47
|
checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(Skeleton__default["default"], { height: 20, width: smallSkeleton ? 150 : 200, count: checkboxes.length, style: { marginTop: '8px' } })))) : (React__default["default"].createElement(React.Fragment, null,
|
|
48
48
|
showPriceStripe && (React__default["default"].createElement(PriceStripe.PriceStripe, { size: PriceTag_types.EPriceSize.SMALL, variant: PriceTag_types.EPriceVariant.PRIO })),
|
|
49
49
|
React__default["default"].createElement(ProductHeader.ProductHeader, { location: ProductHeader.EProductHeader.LIST_ITEM, subtitle: item === null || item === void 0 ? void 0 : item.subtitle, title: item === null || item === void 0 ? void 0 : item.name }),
|
|
50
|
-
((
|
|
50
|
+
((_c = item === null || item === void 0 ? void 0 : item.status) === null || _c === void 0 ? void 0 : _c.label) && (React__default["default"].createElement(AvailabilityLabel.AvailabilityLabel, { label: item.status.label, textSize: item.status.textSize, color: item.status.color })),
|
|
51
51
|
checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(Fieldset.Fieldset, null,
|
|
52
52
|
checkboxLegendLabel && (React__default["default"].createElement(ListItem_styles.VisuallyHiddenLegend, null, checkboxLegendLabel)),
|
|
53
53
|
React__default["default"].createElement(ListItem_styles.CheckboxContainer, null, checkboxes.map(function (checkbox, index) {
|
|
@@ -57,7 +57,7 @@ var ListItem = function (_a) {
|
|
|
57
57
|
}
|
|
58
58
|
}, value: checkbox.value, alignItems: "flex-start" }));
|
|
59
59
|
})))),
|
|
60
|
-
label && (React__default["default"].createElement(Label.Label, { background:
|
|
60
|
+
label && (React__default["default"].createElement(Label.Label, { background: labelBackground, color: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.disabledDarkGray, label: label })))),
|
|
61
61
|
(item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
|
|
62
62
|
children && React__default["default"].createElement(ListItem_styles.ListRight, null, children)));
|
|
63
63
|
};
|
|
@@ -18,13 +18,13 @@ var PartnerOffer = styled__default["default"].article(templateObject_1 || (templ
|
|
|
18
18
|
var theme = _a.theme;
|
|
19
19
|
return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
|
|
20
20
|
});
|
|
21
|
-
var ImageWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n
|
|
21
|
+
var ImageWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n border-radius: ", ";\n overflow: hidden;\n width: 100%;\n"], ["\n border-radius: ", ";\n overflow: hidden;\n width: 100%;\n"])), function (_a) {
|
|
22
22
|
var _b, _c;
|
|
23
23
|
var theme = _a.theme;
|
|
24
24
|
return "".concat((_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small, "px ").concat((_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.borderRadius.small, "px 0 0");
|
|
25
25
|
});
|
|
26
|
-
var Picture = styled__default["default"].picture(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: block;\n
|
|
27
|
-
var Image = styled__default["default"].img(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: block;\n height:
|
|
26
|
+
var Picture = styled__default["default"].picture(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: block;\n width: 100%;\n"], ["\n display: block;\n width: 100%;\n"])));
|
|
27
|
+
var Image = styled__default["default"].img(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: block;\n height: auto;\n width: 100%;\n"], ["\n display: block;\n height: auto;\n width: 100%;\n"])));
|
|
28
28
|
var Content = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n padding: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n padding: ", ";\n"])), function (_a) {
|
|
29
29
|
var _b;
|
|
30
30
|
var theme = _a.theme;
|
|
@@ -17,11 +17,11 @@ var EListItemAlignment;
|
|
|
17
17
|
})(EListItemAlignment || (EListItemAlignment = {}));
|
|
18
18
|
var ListItem = function (_a) {
|
|
19
19
|
var _b, _c, _d;
|
|
20
|
-
var _e = _a.alignment, alignment = _e === void 0 ? EListItemAlignment.CENTER : _e, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, checkboxLegendLabel = _a.checkboxLegendLabel, _f = _a.imageAlt, imageAlt = _f === void 0 ? '' : _f, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, label = _a.label, _g = _a.
|
|
20
|
+
var _e = _a.alignment, alignment = _e === void 0 ? EListItemAlignment.CENTER : _e, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, checkboxLegendLabel = _a.checkboxLegendLabel, _f = _a.imageAlt, imageAlt = _f === void 0 ? '' : _f, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, label = _a.label, _g = _a.labelBackground, labelBackground = _g === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.blueLighter : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.showPriceStripe, showPriceStripe = _j === void 0 ? false : _j, smallSkeleton = _a.smallSkeleton;
|
|
21
21
|
return (React.createElement(ListItemContainer, null,
|
|
22
22
|
React.createElement(ListLeft, { alignment: alignment },
|
|
23
|
-
React.createElement(ListImageContainer, { isSmall: isSmall },
|
|
24
|
-
React.createElement(ListImage, { autoHeight: imageAutoHeight, src: item
|
|
23
|
+
(item === null || item === void 0 ? void 0 : item.image) && (React.createElement(ListImageContainer, { isSmall: isSmall },
|
|
24
|
+
React.createElement(ListImage, { autoHeight: imageAutoHeight, src: item.image, alt: imageAlt, isSmall: isSmall, onError: function (e) {
|
|
25
25
|
if (fallBackImage) {
|
|
26
26
|
var target = e.target;
|
|
27
27
|
if (!target.dataset.fallback) {
|
|
@@ -30,7 +30,7 @@ var ListItem = function (_a) {
|
|
|
30
30
|
target.src = fallBackImage;
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
} })),
|
|
33
|
+
} }))),
|
|
34
34
|
React.createElement(ItemInformationContainer, { alignment: alignment },
|
|
35
35
|
loading ? (React.createElement(Fragment, null,
|
|
36
36
|
React.createElement(Skeleton, { height: 15, width: smallSkeleton ? 150 : 250 }),
|
|
@@ -38,7 +38,7 @@ var ListItem = function (_a) {
|
|
|
38
38
|
checkboxes && checkboxes.length > 0 && (React.createElement(Skeleton, { height: 20, width: smallSkeleton ? 150 : 200, count: checkboxes.length, style: { marginTop: '8px' } })))) : (React.createElement(Fragment, null,
|
|
39
39
|
showPriceStripe && (React.createElement(PriceStripe, { size: EPriceSize.SMALL, variant: EPriceVariant.PRIO })),
|
|
40
40
|
React.createElement(ProductHeader, { location: EProductHeader.LIST_ITEM, subtitle: item === null || item === void 0 ? void 0 : item.subtitle, title: item === null || item === void 0 ? void 0 : item.name }),
|
|
41
|
-
((
|
|
41
|
+
((_c = item === null || item === void 0 ? void 0 : item.status) === null || _c === void 0 ? void 0 : _c.label) && (React.createElement(AvailabilityLabel, { label: item.status.label, textSize: item.status.textSize, color: item.status.color })),
|
|
42
42
|
checkboxes && checkboxes.length > 0 && (React.createElement(Fieldset, null,
|
|
43
43
|
checkboxLegendLabel && (React.createElement(VisuallyHiddenLegend, null, checkboxLegendLabel)),
|
|
44
44
|
React.createElement(CheckboxContainer, null, checkboxes.map(function (checkbox, index) {
|
|
@@ -48,7 +48,7 @@ var ListItem = function (_a) {
|
|
|
48
48
|
}
|
|
49
49
|
}, value: checkbox.value, alignItems: "flex-start" }));
|
|
50
50
|
})))),
|
|
51
|
-
label && (React.createElement(Label, { background:
|
|
51
|
+
label && (React.createElement(Label, { background: labelBackground, color: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.disabledDarkGray, label: label })))),
|
|
52
52
|
(item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
|
|
53
53
|
children && React.createElement(ListRight, null, children)));
|
|
54
54
|
};
|
|
@@ -10,13 +10,13 @@ var PartnerOffer = styled.article(templateObject_1 || (templateObject_1 = __make
|
|
|
10
10
|
var theme = _a.theme;
|
|
11
11
|
return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
|
|
12
12
|
});
|
|
13
|
-
var ImageWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
13
|
+
var ImageWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: ", ";\n overflow: hidden;\n width: 100%;\n"], ["\n border-radius: ", ";\n overflow: hidden;\n width: 100%;\n"])), function (_a) {
|
|
14
14
|
var _b, _c;
|
|
15
15
|
var theme = _a.theme;
|
|
16
16
|
return "".concat((_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small, "px ").concat((_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.borderRadius.small, "px 0 0");
|
|
17
17
|
});
|
|
18
|
-
var Picture = styled.picture(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n
|
|
19
|
-
var Image = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n height:
|
|
18
|
+
var Picture = styled.picture(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n width: 100%;\n"], ["\n display: block;\n width: 100%;\n"])));
|
|
19
|
+
var Image = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n height: auto;\n width: 100%;\n"], ["\n display: block;\n height: auto;\n width: 100%;\n"])));
|
|
20
20
|
var Content = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n padding: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n padding: ", ";\n"])), function (_a) {
|
|
21
21
|
var _b;
|
|
22
22
|
var theme = _a.theme;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.21.
|
|
3
|
+
"version": "0.21.4",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"react-slick": "^0.30.1",
|
|
77
77
|
"slick-carousel": "^1.8.1"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "add7a84bb49c6838df1a636caa7dc8bf5d922f02"
|
|
80
80
|
}
|