@citygross/components 0.14.10 → 0.14.12
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 +4 -0
- package/build/@types/components/RadioListItem/RadioListItem.d.ts +1 -2
- package/build/cjs/components/src/components/Accordion/Accordion.styles.js +3 -3
- package/build/cjs/components/src/components/CartSummary/CartSummary.js +19 -21
- package/build/cjs/components/src/components/CartSummary/CartSummary.js.map +1 -1
- package/build/cjs/components/src/components/CartSummary/CartSummary.styles.js +1 -1
- package/build/cjs/components/src/components/CgButton/CgButton.styles.js +1 -1
- package/build/cjs/components/src/components/ListItem/ListItem.js +35 -8
- package/build/cjs/components/src/components/ListItem/ListItem.js.map +1 -1
- package/build/cjs/components/src/components/ListItem/ListItem.styles.js +2 -2
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +2 -2
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +2 -2
- package/build/es/components/src/components/Accordion/Accordion.styles.js +3 -3
- package/build/es/components/src/components/CartSummary/CartSummary.js +20 -22
- package/build/es/components/src/components/CartSummary/CartSummary.js.map +1 -1
- package/build/es/components/src/components/CartSummary/CartSummary.styles.js +1 -1
- package/build/es/components/src/components/CgButton/CgButton.styles.js +1 -1
- package/build/es/components/src/components/ListItem/ListItem.js +35 -8
- package/build/es/components/src/components/ListItem/ListItem.js.map +1 -1
- package/build/es/components/src/components/ListItem/ListItem.styles.js +2 -2
- package/build/es/components/src/components/RadioListItem/RadioListItem.js +2 -2
- package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +2 -2
- package/package.json +2 -2
|
@@ -12,6 +12,5 @@ export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
|
|
|
12
12
|
wrapMobile?: boolean;
|
|
13
13
|
children?: JSX.Element;
|
|
14
14
|
additionalInfo?: JSX.Element;
|
|
15
|
-
ariaLabel?: string;
|
|
16
15
|
};
|
|
17
|
-
export declare function RadioListItem({ onClick, selected, flexGrow, isDisabled, transparent, noPadding, label, value, wrapMobile, additionalInfo, children,
|
|
16
|
+
export declare function RadioListItem({ onClick, selected, flexGrow, isDisabled, transparent, noPadding, label, value, wrapMobile, additionalInfo, children, }: TRadioListItemProps): React.JSX.Element;
|
|
@@ -36,13 +36,13 @@ var Header = styled__default["default"].button(templateObject_2 || (templateObje
|
|
|
36
36
|
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
|
|
37
37
|
});
|
|
38
38
|
var Chevron = styled__default["default"].span(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: inline-flex;\n transition: transform 200ms ease;\n\n &[data-state='open'] {\n transform: rotate(180deg);\n }\n"], ["\n display: inline-flex;\n transition: transform 200ms ease;\n\n &[data-state='open'] {\n transform: rotate(180deg);\n }\n"])));
|
|
39
|
-
var Content = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n max-height: ", "px;\n opacity: 0;\n overflow: hidden;\n transition:\n max-height 220ms ease,\n opacity 200ms ease;\n\n &[data-state='open'] {\n opacity: 1;\n padding: ", ";\n }\n"], ["\n max-height: ", "px;\n opacity: 0;\n overflow: hidden;\n transition:\n max-height 220ms ease,\n opacity 200ms ease;\n\n &[data-state='open'] {\n opacity: 1;\n padding: ", ";\n }\n"])), function (_a) {
|
|
39
|
+
var Content = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n max-height: ", "px;\n opacity: 0;\n overflow: hidden;\n transition:\n max-height 220ms ease,\n opacity 200ms ease;\n\n &[data-state='open'] {\n opacity: 1;\n padding-bottom: ", "px;\n }\n"], ["\n max-height: ", "px;\n opacity: 0;\n overflow: hidden;\n transition:\n max-height 220ms ease,\n opacity 200ms ease;\n\n &[data-state='open'] {\n opacity: 1;\n padding-bottom: ", "px;\n }\n"])), function (_a) {
|
|
40
40
|
var maxHeight = _a.maxHeight;
|
|
41
41
|
return maxHeight;
|
|
42
42
|
}, function (_a) {
|
|
43
|
-
var _b
|
|
43
|
+
var _b;
|
|
44
44
|
var theme = _a.theme;
|
|
45
|
-
return
|
|
45
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.md;
|
|
46
46
|
});
|
|
47
47
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
48
48
|
|
|
@@ -33,8 +33,8 @@ var calculateSummaryLine = function (items) {
|
|
|
33
33
|
return sumOfItems;
|
|
34
34
|
};
|
|
35
35
|
function CartSummary(_a) {
|
|
36
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p
|
|
37
|
-
var
|
|
36
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
37
|
+
var _q = _a.saveLabel, saveLabel = _q === void 0 ? 'Varav rabatt' : _q, _r = _a.totalLabel, totalLabel = _r === void 0 ? 'Totalt' : _r, _s = _a.itemsLabel, itemsLabel = _s === void 0 ? 'Varor' : _s, cartSummary = _tslib.__rest(_a, ["saveLabel", "totalLabel", "itemsLabel"]);
|
|
38
38
|
var charges = (_b = cartSummary.charges) !== null && _b !== void 0 ? _b : [];
|
|
39
39
|
var bags = (_c = cartSummary.bags) !== null && _c !== void 0 ? _c : [];
|
|
40
40
|
var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
|
|
@@ -71,46 +71,44 @@ function CartSummary(_a) {
|
|
|
71
71
|
React__default["default"].createElement(ToolTipButton.ToolTipButton, { "aria-expanded": infoOpen, "aria-label": charge.tooltipAriaLabel || "Mer information om ".concat(chargeName), "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen }),
|
|
72
72
|
infoOpen && (React__default["default"].createElement(ToolTipDialog.ToolTipDialog, { id: tooltipId, toggle: toggleInfoOpen }, charge.info))))),
|
|
73
73
|
React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
|
|
74
|
-
charge.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_c = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark
|
|
75
|
-
React__default["default"].createElement(typography.BodyText,
|
|
74
|
+
charge.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_c = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark }, utils.formatPrice(charge.cancelledAmount))),
|
|
75
|
+
React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(charge.amount)))));
|
|
76
76
|
};
|
|
77
77
|
return (React__default["default"].createElement(CartSummary_styles.CartSummaryContainer, { role: "region" },
|
|
78
78
|
React__default["default"].createElement(CartSummary_styles.CartPaymentContainer, null,
|
|
79
79
|
cartSummary.title && (React__default["default"].createElement(CartSummary_styles.CartSummaryTitle, null,
|
|
80
|
-
React__default["default"].createElement(typography.
|
|
80
|
+
React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, cartSummary.title),
|
|
81
81
|
React__default["default"].createElement(typography.BodyText, null, cartSummary.subtitle))),
|
|
82
82
|
React__default["default"].createElement(CartSummary_styles.CartSummaryContent, { title: cartSummary.title, role: "list", "aria-label": "Order summary" },
|
|
83
83
|
((groceries === null || groceries === void 0 ? void 0 : groceries.length) > 0 || (cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0) && (React__default["default"].createElement(CartSummary_styles.CartLine, { role: "listitem" },
|
|
84
84
|
React__default["default"].createElement(typography.BodyText, null,
|
|
85
85
|
itemsLabel,
|
|
86
|
-
React__default["default"].createElement(CartSummary_styles.QuantitySpan,
|
|
87
|
-
((_j = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _j !== void 0 ? _j : 0), " items") },
|
|
86
|
+
React__default["default"].createElement(CartSummary_styles.QuantitySpan, null,
|
|
88
87
|
"\u00A0(",
|
|
89
|
-
((
|
|
90
|
-
((
|
|
88
|
+
((_h = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _h !== void 0 ? _h : 0) +
|
|
89
|
+
((_j = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _j !== void 0 ? _j : 0),
|
|
91
90
|
")")),
|
|
92
91
|
React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
|
|
93
|
-
(sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
React__default["default"].createElement(typography.BodyText, { "aria-label": "".concat(itemsLabel, " ").concat(utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount)) }, utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
|
|
92
|
+
(sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_k = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _k === void 0 ? void 0 : _k.dark }, utils.formatPrice(((_l = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _l !== void 0 ? _l : 0) +
|
|
93
|
+
((_m = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _m !== void 0 ? _m : 0)))),
|
|
94
|
+
React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
|
|
97
95
|
bags.length > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, { role: "listitem" },
|
|
98
96
|
React__default["default"].createElement(typography.BodyText, null,
|
|
99
97
|
"Matkassar",
|
|
100
|
-
React__default["default"].createElement(CartSummary_styles.QuantitySpan,
|
|
98
|
+
React__default["default"].createElement(CartSummary_styles.QuantitySpan, null,
|
|
101
99
|
"(",
|
|
102
100
|
sumOfBags.quantity,
|
|
103
101
|
")")),
|
|
104
102
|
React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
|
|
105
|
-
sumOfBags.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (
|
|
106
|
-
React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold"
|
|
103
|
+
sumOfBags.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_o = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _o === void 0 ? void 0 : _o.dark }, utils.formatPrice(sumOfBags.cancelledAmount))),
|
|
104
|
+
React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, utils.formatPrice(sumOfBags.amount))))), charges === null || charges === void 0 ? void 0 :
|
|
107
105
|
charges.map(function (charge) { return (React__default["default"].createElement(ChargeLine, { key: charge.name, charge: charge })); }),
|
|
108
|
-
React__default["default"].createElement(CartSummary_styles.TotalLine, { role: "listitem"
|
|
109
|
-
React__default["default"].createElement(typography.
|
|
110
|
-
React__default["default"].createElement(typography.
|
|
111
|
-
cartSummary.totalDiscount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, { role: "listitem"
|
|
106
|
+
React__default["default"].createElement(CartSummary_styles.TotalLine, { role: "listitem" },
|
|
107
|
+
React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, totalLabel),
|
|
108
|
+
React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, utils.formatPrice(cartSummary.totalAmount))),
|
|
109
|
+
cartSummary.totalDiscount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, { role: "listitem" },
|
|
112
110
|
React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL }, saveLabel),
|
|
113
|
-
React__default["default"].createElement(typography.BodyText, { color: (
|
|
111
|
+
React__default["default"].createElement(typography.BodyText, { color: (_p = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _p === void 0 ? void 0 : _p.alertRed, size: typography.TextTypes.TextSize.SMALL }, utils.formatPrice(cartSummary.totalDiscount))))))));
|
|
114
112
|
}
|
|
115
113
|
|
|
116
114
|
exports.CartSummary = CartSummary;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
12
|
var CartSummaryContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"], ["\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
|
|
13
|
-
var CartPaymentContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: ", ";\n"], ["\n background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
|
|
13
|
+
var CartPaymentContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: ", ";\n overflow-wrap: break-word;\n word-break: break-word;\n"], ["\n background: ", ";\n overflow-wrap: break-word;\n word-break: break-word;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
|
|
14
14
|
var CartSummaryContent = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n ", ";\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"], ["\n ", ";\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"])), function (props) { var _a; return props.title && "padding-top: ".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px"); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
|
|
15
15
|
var CartLine = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n text-decoration: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n text-decoration: ", ";\n"])), function (props) { return props.cancelled && 'line-through'; });
|
|
16
16
|
var AmountWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n"], ["\n display: flex;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
@@ -78,7 +78,7 @@ var ButtonStyle = styled__default["default"].button(templateObject_2 || (templat
|
|
|
78
78
|
}, function (_a) {
|
|
79
79
|
var _b;
|
|
80
80
|
var theme = _a.theme;
|
|
81
|
-
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.
|
|
81
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray;
|
|
82
82
|
});
|
|
83
83
|
var ChildrenContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n opacity: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n opacity: ", ";\n"])), function (_a) {
|
|
84
84
|
var _b;
|
|
@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var Skeleton = require('react-loading-skeleton');
|
|
7
|
-
var
|
|
7
|
+
var utils = require('@citygross/utils');
|
|
8
|
+
var Checkbox = require('../FormElements/Checkbox/Checkbox.js');
|
|
8
9
|
var ProductHeader = require('../ProductHeader/ProductHeader.js');
|
|
9
|
-
var PriceTag_types = require('../PriceTag/PriceTag.types.js');
|
|
10
10
|
var PriceStripe = require('../PriceStripe/PriceStripe.js');
|
|
11
|
-
var
|
|
11
|
+
var ListItem_styles = require('./ListItem.styles.js');
|
|
12
|
+
var PriceTag_types = require('../PriceTag/PriceTag.types.js');
|
|
12
13
|
|
|
13
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
15
|
|
|
@@ -20,8 +21,29 @@ exports.EListItemAlignment = void 0;
|
|
|
20
21
|
EListItemAlignment["CENTER"] = "center";
|
|
21
22
|
EListItemAlignment["TOP"] = "flex-start";
|
|
22
23
|
})(exports.EListItemAlignment || (exports.EListItemAlignment = {}));
|
|
24
|
+
function getQuantityValue(quantity) {
|
|
25
|
+
if (quantity === undefined)
|
|
26
|
+
return 1;
|
|
27
|
+
return typeof quantity === 'object' && quantity !== null && 'value' in quantity
|
|
28
|
+
? quantity.value
|
|
29
|
+
: Number(quantity);
|
|
30
|
+
}
|
|
31
|
+
function buildCheckboxContext(item) {
|
|
32
|
+
var parts = [item === null || item === void 0 ? void 0 : item.name, item === null || item === void 0 ? void 0 : item.subtitle].filter(Boolean);
|
|
33
|
+
if (parts.length === 0)
|
|
34
|
+
return '';
|
|
35
|
+
var productPart = "i varan ".concat(parts.join(', '));
|
|
36
|
+
var amount = item === null || item === void 0 ? void 0 : item.amount;
|
|
37
|
+
var pricePart = amount !== undefined ? " till ".concat(utils.formatPrice(amount)) : '';
|
|
38
|
+
var quantity = getQuantityValue(item === null || item === void 0 ? void 0 : item.quantity);
|
|
39
|
+
var quantityPart = quantity === 1 ? ', en styck' : ", ".concat(quantity, " styck");
|
|
40
|
+
return "".concat(productPart).concat(pricePart).concat(quantityPart);
|
|
41
|
+
}
|
|
23
42
|
var ListItem = function (_a) {
|
|
24
43
|
var _b = _a.alignment, alignment = _b === void 0 ? exports.EListItemAlignment.CENTER : _b, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
|
|
44
|
+
var checkboxContext = checkboxes && checkboxes.length > 0 && ((item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.subtitle))
|
|
45
|
+
? buildCheckboxContext(item)
|
|
46
|
+
: '';
|
|
25
47
|
return (React__default["default"].createElement(ListItem_styles.ListItemContainer, null,
|
|
26
48
|
React__default["default"].createElement(ListItem_styles.ListLeft, { alignment: alignment },
|
|
27
49
|
React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
|
|
@@ -42,11 +64,16 @@ var ListItem = function (_a) {
|
|
|
42
64
|
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,
|
|
43
65
|
showPriceStripe && (React__default["default"].createElement(PriceStripe.PriceStripe, { size: PriceTag_types.EPriceSize.SMALL, variant: PriceTag_types.EPriceVariant.PRIO })),
|
|
44
66
|
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 }),
|
|
45
|
-
checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(ListItem_styles.CheckboxContainer, null, checkboxes.map(function (checkbox, index) {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
67
|
+
checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(ListItem_styles.CheckboxContainer, null, checkboxes.map(function (checkbox, index) {
|
|
68
|
+
var ariaLabel = checkboxContext
|
|
69
|
+
? "".concat(checkbox.label, ". ").concat(checkboxContext)
|
|
70
|
+
: checkbox.label;
|
|
71
|
+
return (React__default["default"].createElement(Checkbox.Checkbox, { key: index, checked: checkbox.checked, disabled: checkbox.disabled, label: checkbox.label, name: checkbox.name, "aria-label": ariaLabel, onChange: function (e) {
|
|
72
|
+
if (checkbox.onChange) {
|
|
73
|
+
checkbox.onChange(e.target.checked);
|
|
74
|
+
}
|
|
75
|
+
}, value: checkbox.value }));
|
|
76
|
+
}))))),
|
|
50
77
|
(item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
|
|
51
78
|
children && (React__default["default"].createElement(ListItem_styles.ListRight, { alignment: alignment }, children))));
|
|
52
79
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -10,9 +10,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
12
|
|
|
13
|
-
var ItemInformationContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n"])));
|
|
13
|
+
var ItemInformationContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-wrap: break-word;\n word-break: break-word;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-wrap: break-word;\n word-break: break-word;\n"])));
|
|
14
14
|
var ListItemContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n gap: ", "px;\n\n p {\n padding: 1px 0px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n gap: ", "px;\n\n p {\n padding: 1px 0px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
|
|
15
|
-
var ListLeft = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }
|
|
15
|
+
var ListLeft = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n"], ["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n"])), function (props) {
|
|
16
16
|
return props.alignment === ListItem.EListItemAlignment.TOP ? 'inherit' : 'center';
|
|
17
17
|
}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listItemFlexGap; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
18
18
|
var ListRight = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"])), function (props) {
|
|
@@ -10,8 +10,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
11
|
|
|
12
12
|
function RadioListItem(_a) {
|
|
13
|
-
var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children
|
|
14
|
-
return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: isDisabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-
|
|
13
|
+
var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
|
|
14
|
+
return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: isDisabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
|
|
15
15
|
if ((event.key === 'Enter' || event.key === ' ') && !isDisabled) {
|
|
16
16
|
event.preventDefault();
|
|
17
17
|
onClick(value);
|
|
@@ -35,9 +35,9 @@ var BaseRadioListItemContainer = styled__default["default"].div(templateObject_1
|
|
|
35
35
|
"background: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter));
|
|
36
36
|
});
|
|
37
37
|
var BaseRadioItemLeftWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); });
|
|
38
|
-
var StyledH3 = styled__default["default"](typography.H3).attrs({ as: '
|
|
38
|
+
var StyledH3 = styled__default["default"](typography.H3).attrs({ as: 'span' })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) {
|
|
39
39
|
var _a;
|
|
40
|
-
return props.isDisabled && "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.
|
|
40
|
+
return props.isDisabled && "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray, ";\n text-decoration: line-through;\n ");
|
|
41
41
|
});
|
|
42
42
|
var RadioRightWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
|
|
43
43
|
styled__default["default"](typography.BodyText)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
|
|
@@ -28,13 +28,13 @@ var Header = styled.button(templateObject_2 || (templateObject_2 = __makeTemplat
|
|
|
28
28
|
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
|
|
29
29
|
});
|
|
30
30
|
var Chevron = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: inline-flex;\n transition: transform 200ms ease;\n\n &[data-state='open'] {\n transform: rotate(180deg);\n }\n"], ["\n display: inline-flex;\n transition: transform 200ms ease;\n\n &[data-state='open'] {\n transform: rotate(180deg);\n }\n"])));
|
|
31
|
-
var Content = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n max-height: ", "px;\n opacity: 0;\n overflow: hidden;\n transition:\n max-height 220ms ease,\n opacity 200ms ease;\n\n &[data-state='open'] {\n opacity: 1;\n padding: ", ";\n }\n"], ["\n max-height: ", "px;\n opacity: 0;\n overflow: hidden;\n transition:\n max-height 220ms ease,\n opacity 200ms ease;\n\n &[data-state='open'] {\n opacity: 1;\n padding: ", ";\n }\n"])), function (_a) {
|
|
31
|
+
var Content = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n max-height: ", "px;\n opacity: 0;\n overflow: hidden;\n transition:\n max-height 220ms ease,\n opacity 200ms ease;\n\n &[data-state='open'] {\n opacity: 1;\n padding-bottom: ", "px;\n }\n"], ["\n max-height: ", "px;\n opacity: 0;\n overflow: hidden;\n transition:\n max-height 220ms ease,\n opacity 200ms ease;\n\n &[data-state='open'] {\n opacity: 1;\n padding-bottom: ", "px;\n }\n"])), function (_a) {
|
|
32
32
|
var maxHeight = _a.maxHeight;
|
|
33
33
|
return maxHeight;
|
|
34
34
|
}, function (_a) {
|
|
35
|
-
var _b
|
|
35
|
+
var _b;
|
|
36
36
|
var theme = _a.theme;
|
|
37
|
-
return
|
|
37
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.md;
|
|
38
38
|
});
|
|
39
39
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
40
40
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __rest } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import React, { useState, Fragment } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { BodyText, TextTypes } from '@citygross/typography';
|
|
4
4
|
import { formatPrice } from '@citygross/utils';
|
|
5
5
|
import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
|
|
6
6
|
import { ToolTipButton } from '../CgButton/ToolTipButton/ToolTipButton.js';
|
|
@@ -25,8 +25,8 @@ var calculateSummaryLine = function (items) {
|
|
|
25
25
|
return sumOfItems;
|
|
26
26
|
};
|
|
27
27
|
function CartSummary(_a) {
|
|
28
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p
|
|
29
|
-
var
|
|
28
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
29
|
+
var _q = _a.saveLabel, saveLabel = _q === void 0 ? 'Varav rabatt' : _q, _r = _a.totalLabel, totalLabel = _r === void 0 ? 'Totalt' : _r, _s = _a.itemsLabel, itemsLabel = _s === void 0 ? 'Varor' : _s, cartSummary = __rest(_a, ["saveLabel", "totalLabel", "itemsLabel"]);
|
|
30
30
|
var charges = (_b = cartSummary.charges) !== null && _b !== void 0 ? _b : [];
|
|
31
31
|
var bags = (_c = cartSummary.bags) !== null && _c !== void 0 ? _c : [];
|
|
32
32
|
var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
|
|
@@ -63,46 +63,44 @@ function CartSummary(_a) {
|
|
|
63
63
|
React.createElement(ToolTipButton, { "aria-expanded": infoOpen, "aria-label": charge.tooltipAriaLabel || "Mer information om ".concat(chargeName), "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen }),
|
|
64
64
|
infoOpen && (React.createElement(ToolTipDialog, { id: tooltipId, toggle: toggleInfoOpen }, charge.info))))),
|
|
65
65
|
React.createElement(AmountWrapper, null,
|
|
66
|
-
charge.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_c = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _c === void 0 ? void 0 : _c.dark
|
|
67
|
-
React.createElement(BodyText,
|
|
66
|
+
charge.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_c = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _c === void 0 ? void 0 : _c.dark }, formatPrice(charge.cancelledAmount))),
|
|
67
|
+
React.createElement(BodyText, null, formatPrice(charge.amount)))));
|
|
68
68
|
};
|
|
69
69
|
return (React.createElement(CartSummaryContainer, { role: "region" },
|
|
70
70
|
React.createElement(CartPaymentContainer, null,
|
|
71
71
|
cartSummary.title && (React.createElement(CartSummaryTitle, null,
|
|
72
|
-
React.createElement(
|
|
72
|
+
React.createElement(BodyText, { fontWeight: "semiBold" }, cartSummary.title),
|
|
73
73
|
React.createElement(BodyText, null, cartSummary.subtitle))),
|
|
74
74
|
React.createElement(CartSummaryContent, { title: cartSummary.title, role: "list", "aria-label": "Order summary" },
|
|
75
75
|
((groceries === null || groceries === void 0 ? void 0 : groceries.length) > 0 || (cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0) && (React.createElement(CartLine, { role: "listitem" },
|
|
76
76
|
React.createElement(BodyText, null,
|
|
77
77
|
itemsLabel,
|
|
78
|
-
React.createElement(QuantitySpan,
|
|
79
|
-
((_j = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _j !== void 0 ? _j : 0), " items") },
|
|
78
|
+
React.createElement(QuantitySpan, null,
|
|
80
79
|
"\u00A0(",
|
|
81
|
-
((
|
|
82
|
-
((
|
|
80
|
+
((_h = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _h !== void 0 ? _h : 0) +
|
|
81
|
+
((_j = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _j !== void 0 ? _j : 0),
|
|
83
82
|
")")),
|
|
84
83
|
React.createElement(AmountWrapper, null,
|
|
85
|
-
(sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React.createElement(BodyText, { lineThrough: true, color: (
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
React.createElement(BodyText, { "aria-label": "".concat(itemsLabel, " ").concat(formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount)) }, formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
|
|
84
|
+
(sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_k = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _k === void 0 ? void 0 : _k.dark }, formatPrice(((_l = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _l !== void 0 ? _l : 0) +
|
|
85
|
+
((_m = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _m !== void 0 ? _m : 0)))),
|
|
86
|
+
React.createElement(BodyText, null, formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
|
|
89
87
|
bags.length > 0 && (React.createElement(CartLine, { role: "listitem" },
|
|
90
88
|
React.createElement(BodyText, null,
|
|
91
89
|
"Matkassar",
|
|
92
|
-
React.createElement(QuantitySpan,
|
|
90
|
+
React.createElement(QuantitySpan, null,
|
|
93
91
|
"(",
|
|
94
92
|
sumOfBags.quantity,
|
|
95
93
|
")")),
|
|
96
94
|
React.createElement(AmountWrapper, null,
|
|
97
|
-
sumOfBags.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (
|
|
98
|
-
React.createElement(BodyText, { fontWeight: "semiBold"
|
|
95
|
+
sumOfBags.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_o = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _o === void 0 ? void 0 : _o.dark }, formatPrice(sumOfBags.cancelledAmount))),
|
|
96
|
+
React.createElement(BodyText, { fontWeight: "semiBold" }, formatPrice(sumOfBags.amount))))), charges === null || charges === void 0 ? void 0 :
|
|
99
97
|
charges.map(function (charge) { return (React.createElement(ChargeLine, { key: charge.name, charge: charge })); }),
|
|
100
|
-
React.createElement(TotalLine, { role: "listitem"
|
|
101
|
-
React.createElement(
|
|
102
|
-
React.createElement(
|
|
103
|
-
cartSummary.totalDiscount > 0 && (React.createElement(CartLine, { role: "listitem"
|
|
98
|
+
React.createElement(TotalLine, { role: "listitem" },
|
|
99
|
+
React.createElement(BodyText, { fontWeight: "semiBold" }, totalLabel),
|
|
100
|
+
React.createElement(BodyText, { fontWeight: "semiBold" }, formatPrice(cartSummary.totalAmount))),
|
|
101
|
+
cartSummary.totalDiscount > 0 && (React.createElement(CartLine, { role: "listitem" },
|
|
104
102
|
React.createElement(BodyText, { size: TextTypes.TextSize.SMALL }, saveLabel),
|
|
105
|
-
React.createElement(BodyText, { color: (
|
|
103
|
+
React.createElement(BodyText, { color: (_p = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _p === void 0 ? void 0 : _p.alertRed, size: TextTypes.TextSize.SMALL }, formatPrice(cartSummary.totalDiscount))))))));
|
|
106
104
|
}
|
|
107
105
|
|
|
108
106
|
export { CartSummary };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,7 +2,7 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
4
|
var CartSummaryContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"], ["\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
|
|
5
|
-
var CartPaymentContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n"], ["\n background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
|
|
5
|
+
var CartPaymentContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n overflow-wrap: break-word;\n word-break: break-word;\n"], ["\n background: ", ";\n overflow-wrap: break-word;\n word-break: break-word;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
|
|
6
6
|
var CartSummaryContent = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"], ["\n ", ";\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"])), function (props) { var _a; return props.title && "padding-top: ".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px"); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
|
|
7
7
|
var CartLine = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n text-decoration: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n text-decoration: ", ";\n"])), function (props) { return props.cancelled && 'line-through'; });
|
|
8
8
|
var AmountWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n"], ["\n display: flex;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
@@ -70,7 +70,7 @@ var ButtonStyle = styled.button(templateObject_2 || (templateObject_2 = __makeTe
|
|
|
70
70
|
}, function (_a) {
|
|
71
71
|
var _b;
|
|
72
72
|
var theme = _a.theme;
|
|
73
|
-
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.
|
|
73
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray;
|
|
74
74
|
});
|
|
75
75
|
var ChildrenContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n opacity: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n opacity: ", ";\n"])), function (_a) {
|
|
76
76
|
var _b;
|
|
@@ -1,18 +1,40 @@
|
|
|
1
1
|
import React, { Fragment } from 'react';
|
|
2
2
|
import Skeleton from 'react-loading-skeleton';
|
|
3
|
-
import {
|
|
3
|
+
import { formatPrice } from '@citygross/utils';
|
|
4
|
+
import { Checkbox } from '../FormElements/Checkbox/Checkbox.js';
|
|
4
5
|
import { ProductHeader, EProductHeader } from '../ProductHeader/ProductHeader.js';
|
|
5
|
-
import { EPriceSize, EPriceVariant } from '../PriceTag/PriceTag.types.js';
|
|
6
6
|
import { PriceStripe } from '../PriceStripe/PriceStripe.js';
|
|
7
|
-
import {
|
|
7
|
+
import { ListItemContainer, ListLeft, ListImageContainer, ListImage, ItemInformationContainer, CheckboxContainer, ListRight } from './ListItem.styles.js';
|
|
8
|
+
import { EPriceSize, EPriceVariant } from '../PriceTag/PriceTag.types.js';
|
|
8
9
|
|
|
9
10
|
var EListItemAlignment;
|
|
10
11
|
(function (EListItemAlignment) {
|
|
11
12
|
EListItemAlignment["CENTER"] = "center";
|
|
12
13
|
EListItemAlignment["TOP"] = "flex-start";
|
|
13
14
|
})(EListItemAlignment || (EListItemAlignment = {}));
|
|
15
|
+
function getQuantityValue(quantity) {
|
|
16
|
+
if (quantity === undefined)
|
|
17
|
+
return 1;
|
|
18
|
+
return typeof quantity === 'object' && quantity !== null && 'value' in quantity
|
|
19
|
+
? quantity.value
|
|
20
|
+
: Number(quantity);
|
|
21
|
+
}
|
|
22
|
+
function buildCheckboxContext(item) {
|
|
23
|
+
var parts = [item === null || item === void 0 ? void 0 : item.name, item === null || item === void 0 ? void 0 : item.subtitle].filter(Boolean);
|
|
24
|
+
if (parts.length === 0)
|
|
25
|
+
return '';
|
|
26
|
+
var productPart = "i varan ".concat(parts.join(', '));
|
|
27
|
+
var amount = item === null || item === void 0 ? void 0 : item.amount;
|
|
28
|
+
var pricePart = amount !== undefined ? " till ".concat(formatPrice(amount)) : '';
|
|
29
|
+
var quantity = getQuantityValue(item === null || item === void 0 ? void 0 : item.quantity);
|
|
30
|
+
var quantityPart = quantity === 1 ? ', en styck' : ", ".concat(quantity, " styck");
|
|
31
|
+
return "".concat(productPart).concat(pricePart).concat(quantityPart);
|
|
32
|
+
}
|
|
14
33
|
var ListItem = function (_a) {
|
|
15
34
|
var _b = _a.alignment, alignment = _b === void 0 ? EListItemAlignment.CENTER : _b, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
|
|
35
|
+
var checkboxContext = checkboxes && checkboxes.length > 0 && ((item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.subtitle))
|
|
36
|
+
? buildCheckboxContext(item)
|
|
37
|
+
: '';
|
|
16
38
|
return (React.createElement(ListItemContainer, null,
|
|
17
39
|
React.createElement(ListLeft, { alignment: alignment },
|
|
18
40
|
React.createElement(ListImageContainer, { isSmall: isSmall },
|
|
@@ -33,11 +55,16 @@ var ListItem = function (_a) {
|
|
|
33
55
|
checkboxes && checkboxes.length > 0 && (React.createElement(Skeleton, { height: 20, width: smallSkeleton ? 150 : 200, count: checkboxes.length, style: { marginTop: '8px' } })))) : (React.createElement(Fragment, null,
|
|
34
56
|
showPriceStripe && (React.createElement(PriceStripe, { size: EPriceSize.SMALL, variant: EPriceVariant.PRIO })),
|
|
35
57
|
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 }),
|
|
36
|
-
checkboxes && checkboxes.length > 0 && (React.createElement(CheckboxContainer, null, checkboxes.map(function (checkbox, index) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
58
|
+
checkboxes && checkboxes.length > 0 && (React.createElement(CheckboxContainer, null, checkboxes.map(function (checkbox, index) {
|
|
59
|
+
var ariaLabel = checkboxContext
|
|
60
|
+
? "".concat(checkbox.label, ". ").concat(checkboxContext)
|
|
61
|
+
: checkbox.label;
|
|
62
|
+
return (React.createElement(Checkbox, { key: index, checked: checkbox.checked, disabled: checkbox.disabled, label: checkbox.label, name: checkbox.name, "aria-label": ariaLabel, onChange: function (e) {
|
|
63
|
+
if (checkbox.onChange) {
|
|
64
|
+
checkbox.onChange(e.target.checked);
|
|
65
|
+
}
|
|
66
|
+
}, value: checkbox.value }));
|
|
67
|
+
}))))),
|
|
41
68
|
(item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
|
|
42
69
|
children && (React.createElement(ListRight, { alignment: alignment }, children))));
|
|
43
70
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,9 +2,9 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { EListItemAlignment } from './ListItem.js';
|
|
4
4
|
|
|
5
|
-
var ItemInformationContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n"])));
|
|
5
|
+
var ItemInformationContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-wrap: break-word;\n word-break: break-word;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-wrap: break-word;\n word-break: break-word;\n"])));
|
|
6
6
|
var ListItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n gap: ", "px;\n\n p {\n padding: 1px 0px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n gap: ", "px;\n\n p {\n padding: 1px 0px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n\n &:focus {\n outline-offset: ", "px;\n }\n &:focus:not(:focus-visible) {\n outline: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
|
|
7
|
-
var ListLeft = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }
|
|
7
|
+
var ListLeft = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n"], ["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n\n @media (max-width: ", "px) {\n align-items: flex-start;\n }\n"])), function (props) {
|
|
8
8
|
return props.alignment === EListItemAlignment.TOP ? 'inherit' : 'center';
|
|
9
9
|
}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listItemFlexGap; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
10
10
|
var ListRight = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"])), function (props) {
|
|
@@ -2,8 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, LabelContentWrapper, StyledH3, RadioRightWrapper } from './RadioListItem.styles.js';
|
|
3
3
|
|
|
4
4
|
function RadioListItem(_a) {
|
|
5
|
-
var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children
|
|
6
|
-
return (React.createElement(BaseRadioListItemContainer, { tabIndex: isDisabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-
|
|
5
|
+
var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
|
|
6
|
+
return (React.createElement(BaseRadioListItemContainer, { tabIndex: isDisabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
|
|
7
7
|
if ((event.key === 'Enter' || event.key === ' ') && !isDisabled) {
|
|
8
8
|
event.preventDefault();
|
|
9
9
|
onClick(value);
|
|
@@ -27,9 +27,9 @@ var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_
|
|
|
27
27
|
"background: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter));
|
|
28
28
|
});
|
|
29
29
|
var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); });
|
|
30
|
-
var StyledH3 = styled(H3).attrs({ as: '
|
|
30
|
+
var StyledH3 = styled(H3).attrs({ as: 'span' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) {
|
|
31
31
|
var _a;
|
|
32
|
-
return props.isDisabled && "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.
|
|
32
|
+
return props.isDisabled && "\n color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray, ";\n text-decoration: line-through;\n ");
|
|
33
33
|
});
|
|
34
34
|
var RadioRightWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
|
|
35
35
|
styled(BodyText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.12",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"react-slick": "^0.30.1",
|
|
76
76
|
"slick-carousel": "^1.8.1"
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "aa688b12b462f1d9c1fc0457096faa2d1e43169c"
|
|
79
79
|
}
|