@citygross/components 0.11.0 → 0.12.0
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/CartSummary/CartSummary.d.ts +5 -2
- package/build/@types/components/CartSummary/CartSummary.styles.d.ts +5 -2
- package/build/@types/components/ListItem/ListItem.d.ts +9 -0
- package/build/@types/components/ListItem/ListItem.styles.d.ts +1 -0
- package/build/cjs/components/src/components/AddressBlock/AddressBlock.js +2 -2
- package/build/cjs/components/src/components/CartItemSummary/CartItemSummary.js +1 -1
- package/build/cjs/components/src/components/CartSummary/CartSummary.js +43 -34
- package/build/cjs/components/src/components/CartSummary/CartSummary.js.map +1 -1
- package/build/cjs/components/src/components/CartSummary/CartSummary.styles.js +15 -9
- package/build/cjs/components/src/components/CartSummary/CartSummary.styles.js.map +1 -1
- package/build/cjs/components/src/components/CgButton/CgButton.js +2 -2
- package/build/cjs/components/src/components/CgButton/CgButton.styles.js +4 -4
- package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js +6 -4
- package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map +1 -1
- package/build/cjs/components/src/components/ListItem/ListItem.js +11 -4
- package/build/cjs/components/src/components/ListItem/ListItem.js.map +1 -1
- package/build/cjs/components/src/components/ListItem/ListItem.styles.js +3 -1
- package/build/cjs/components/src/components/ListItem/ListItem.styles.js.map +1 -1
- package/build/cjs/components/src/components/WarningLabel/WarningLabel.js +2 -2
- package/build/es/components/src/components/AddressBlock/AddressBlock.js +2 -2
- package/build/es/components/src/components/CartItemSummary/CartItemSummary.js +1 -1
- package/build/es/components/src/components/CartSummary/CartSummary.js +46 -37
- package/build/es/components/src/components/CartSummary/CartSummary.js.map +1 -1
- package/build/es/components/src/components/CartSummary/CartSummary.styles.js +11 -8
- package/build/es/components/src/components/CartSummary/CartSummary.styles.js.map +1 -1
- package/build/es/components/src/components/CgButton/CgButton.js +2 -2
- package/build/es/components/src/components/CgButton/CgButton.styles.js +4 -4
- package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js +7 -5
- package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map +1 -1
- package/build/es/components/src/components/ListItem/ListItem.js +13 -6
- package/build/es/components/src/components/ListItem/ListItem.js.map +1 -1
- package/build/es/components/src/components/ListItem/ListItem.styles.js +3 -2
- package/build/es/components/src/components/ListItem/ListItem.styles.js.map +1 -1
- package/build/es/components/src/components/WarningLabel/WarningLabel.js +2 -2
- package/package.json +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
export declare type TCartSummary = {
|
|
3
3
|
title?: string;
|
|
4
4
|
subTitle?: string;
|
|
@@ -19,6 +19,7 @@ export declare type TCartSummary = {
|
|
|
19
19
|
taxLabel?: string;
|
|
20
20
|
shippingLabel?: string;
|
|
21
21
|
saveLabel?: string;
|
|
22
|
+
itemsLabel?: string;
|
|
22
23
|
};
|
|
23
24
|
export declare type TSummaryItem = {
|
|
24
25
|
amount: number;
|
|
@@ -26,5 +27,7 @@ export declare type TSummaryItem = {
|
|
|
26
27
|
quantity: number;
|
|
27
28
|
cancelledQuantity: number;
|
|
28
29
|
name?: string;
|
|
30
|
+
info?: React.ReactNode;
|
|
31
|
+
tooltipAriaLabel?: string;
|
|
29
32
|
};
|
|
30
|
-
export declare function CartSummary({ saveLabel, shippingLabel, totalLabel, taxLabel, ...cartSummary }: TCartSummary): JSX.Element;
|
|
33
|
+
export declare function CartSummary({ saveLabel, shippingLabel, totalLabel, taxLabel, itemsLabel, ...cartSummary }: TCartSummary): JSX.Element;
|
|
@@ -6,9 +6,12 @@ declare type TSummaryHeader = {
|
|
|
6
6
|
};
|
|
7
7
|
export declare const CartSummaryContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
8
|
export declare const CartPaymentContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
9
|
-
export declare const
|
|
10
|
-
export declare const CartSummaryFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
9
|
+
export declare const CartSummaryContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TSummaryHeader, never>;
|
|
11
10
|
export declare const CartLine: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCartLine, never>;
|
|
12
11
|
export declare const AmountWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
12
|
+
export declare const LabelWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
13
|
+
export declare const ToolTipButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
|
13
14
|
export declare const CartSummaryTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
15
|
+
export declare const QuantitySpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
16
|
+
export declare const TotalLine: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCartLine, never>;
|
|
14
17
|
export {};
|
|
@@ -9,9 +9,18 @@ export declare enum EListItemAlignment {
|
|
|
9
9
|
CENTER = "center",
|
|
10
10
|
TOP = "flex-start"
|
|
11
11
|
}
|
|
12
|
+
export declare type TCheckboxOption = {
|
|
13
|
+
label: string;
|
|
14
|
+
checked?: boolean;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
onChange?: (checked: boolean) => void;
|
|
17
|
+
name?: string;
|
|
18
|
+
value?: string;
|
|
19
|
+
};
|
|
12
20
|
export declare type TListItem = {
|
|
13
21
|
alignment?: EListItemAlignment;
|
|
14
22
|
children?: React.ReactNode;
|
|
23
|
+
checkboxes?: TCheckboxOption[];
|
|
15
24
|
fallBackImage?: string;
|
|
16
25
|
imageAutoHeight?: boolean;
|
|
17
26
|
item?: TItem;
|
|
@@ -15,3 +15,4 @@ export declare type TListImage = {
|
|
|
15
15
|
isSmall?: boolean;
|
|
16
16
|
};
|
|
17
17
|
export declare const ListImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, TListImage, never>;
|
|
18
|
+
export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -25,7 +25,7 @@ require('@citygross/utils');
|
|
|
25
25
|
require('react-loading-skeleton');
|
|
26
26
|
require('../CartItemSummary/CartItemSummary.styles.js');
|
|
27
27
|
require('../CartSubTotal/CartSubTotal.js');
|
|
28
|
-
require('../
|
|
28
|
+
require('../ToolTipDialog/ToolTipDialog.styles.js');
|
|
29
29
|
require('../CartSummary/CartSummary.styles.js');
|
|
30
30
|
require('../../../../design-tokens/build/index.js');
|
|
31
31
|
require('../CgButton/ButtonAsLink/ButtonAsLink.styles.js');
|
|
@@ -38,6 +38,7 @@ require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
|
|
|
38
38
|
require('../DateBox/DateBox.styles.js');
|
|
39
39
|
require('../DeliverySlotItem/DeliverySlotItem.styles.js');
|
|
40
40
|
require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
|
|
41
|
+
require('../Divider/Divider.styles.js');
|
|
41
42
|
require('../DotIndicator/DotIndicator.styles.js');
|
|
42
43
|
require('../Flex/Flex.styles.js');
|
|
43
44
|
require('../Form/Form.styles.js');
|
|
@@ -101,7 +102,6 @@ require('../StepperMobile/StepperMobile.styles.js');
|
|
|
101
102
|
require('../Table/Table.styles.js');
|
|
102
103
|
require('../Tag/Tag.styles.js');
|
|
103
104
|
require('../Timeline/Timeline.styles.js');
|
|
104
|
-
require('../ToolTipDialog/ToolTipDialog.styles.js');
|
|
105
105
|
require('../UnorderedList/UnorderedList.styles.js');
|
|
106
106
|
require('../WarningLabel/WarningLabel.styles.js');
|
|
107
107
|
require('../ZipCodeInput/ZipCodeInput.styles.js');
|
|
@@ -24,7 +24,7 @@ function CartItemSummary(_a) {
|
|
|
24
24
|
React__default["default"].createElement(CartItemSummary_styles.AmountText, { lineThrough: true, fontWeight: withParenthesis ? 'regular' : 'semiBold' }, product ? (utils.formatPrice(product.cancelledAmount, withParenthesis)) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))))),
|
|
25
25
|
React__default["default"].createElement(CartItemSummary_styles.ItemInformationContainer, null,
|
|
26
26
|
React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL }, (product === null || product === void 0 ? void 0 : product.quantity) || (product === null || product === void 0 ? void 0 : product.quantity) === 0 ? ("".concat(product.quantity, " ").concat(unit)) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))),
|
|
27
|
-
React__default["default"].createElement(CartItemSummary_styles.AmountText, { fontWeight: withParenthesis ? 'regular' : '
|
|
27
|
+
React__default["default"].createElement(CartItemSummary_styles.AmountText, { fontWeight: withParenthesis ? 'regular' : 'medium' }, product ? (utils.formatPrice(product.amount, withParenthesis)) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))))));
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
exports.CartItemSummary = CartItemSummary;
|
|
@@ -5,7 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _tslib = require('../../../../_virtual/_tslib.js');
|
|
6
6
|
var utils = require('@citygross/utils');
|
|
7
7
|
var React = require('react');
|
|
8
|
-
var
|
|
8
|
+
var icons = require('@citygross/icons');
|
|
9
|
+
var ToolTipDialog = require('../ToolTipDialog/ToolTipDialog.js');
|
|
9
10
|
var CartSummary_styles = require('./CartSummary.styles.js');
|
|
10
11
|
var typography = require('@citygross/typography');
|
|
11
12
|
var index = require('../../../../design-tokens/build/index.js');
|
|
@@ -32,8 +33,8 @@ var calculateSummaryLine = function (items) {
|
|
|
32
33
|
return sumOfItems;
|
|
33
34
|
};
|
|
34
35
|
function CartSummary(_a) {
|
|
35
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
|
36
|
-
var
|
|
36
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
37
|
+
var _p = _a.saveLabel, saveLabel = _p === void 0 ? 'Varav rabatt' : _p; _a.shippingLabel; var _r = _a.totalLabel, totalLabel = _r === void 0 ? 'Totalt' : _r; _a.taxLabel; var _t = _a.itemsLabel, itemsLabel = _t === void 0 ? 'Varor' : _t, cartSummary = _tslib.__rest(_a, ["saveLabel", "shippingLabel", "totalLabel", "taxLabel", "itemsLabel"]);
|
|
37
38
|
var charges = (_b = cartSummary.charges) !== null && _b !== void 0 ? _b : [];
|
|
38
39
|
var bags = (_c = cartSummary.bags) !== null && _c !== void 0 ? _c : [];
|
|
39
40
|
var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
|
|
@@ -41,55 +42,63 @@ function CartSummary(_a) {
|
|
|
41
42
|
var sumOfBags = calculateSummaryLine(bags);
|
|
42
43
|
var sumOfGroceries = calculateSummaryLine(groceries);
|
|
43
44
|
var sumOfCateredMeals = calculateSummaryLine(cateredMeals);
|
|
45
|
+
var ChargeLine = function (_a) {
|
|
46
|
+
var _b, _c;
|
|
47
|
+
var charge = _a.charge;
|
|
48
|
+
var _d = React.useState(false), infoOpen = _d[0], setInfoOpen = _d[1];
|
|
49
|
+
var tooltipId = "tooltip-".concat((_b = charge.name) === null || _b === void 0 ? void 0 : _b.toLowerCase().replace(/ /g, '-'));
|
|
50
|
+
var toggleInfoOpen = function () {
|
|
51
|
+
setInfoOpen(!infoOpen);
|
|
52
|
+
};
|
|
53
|
+
var chargeName = charge.name
|
|
54
|
+
? charge.name.charAt(0).toUpperCase() + charge.name.slice(1).toLowerCase()
|
|
55
|
+
: '';
|
|
56
|
+
return (React__default["default"].createElement(React.Fragment, null,
|
|
57
|
+
React__default["default"].createElement(CartSummary_styles.CartLine, { key: charge.name },
|
|
58
|
+
React__default["default"].createElement(CartSummary_styles.LabelWrapper, null,
|
|
59
|
+
React__default["default"].createElement(typography.BodyText, null, chargeName),
|
|
60
|
+
charge.info && (React__default["default"].createElement(CartSummary_styles.ToolTipButton, { "aria-expanded": infoOpen, "aria-label": charge.tooltipAriaLabel || 'Mer information', "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen },
|
|
61
|
+
React__default["default"].createElement(icons.Icons.Info, { "aria-hidden": "true", height: 16, width: 16 })))),
|
|
62
|
+
React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
|
|
63
|
+
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))),
|
|
64
|
+
React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(charge.amount)))),
|
|
65
|
+
infoOpen && charge.info && (React__default["default"].createElement(ToolTipDialog.ToolTipDialog, { id: tooltipId, info: charge.info, toggle: toggleInfoOpen }))));
|
|
66
|
+
};
|
|
44
67
|
return (React__default["default"].createElement(CartSummary_styles.CartSummaryContainer, null,
|
|
45
68
|
React__default["default"].createElement(CartSummary_styles.CartPaymentContainer, null,
|
|
46
69
|
cartSummary.title && (React__default["default"].createElement(CartSummary_styles.CartSummaryTitle, null,
|
|
47
70
|
React__default["default"].createElement(typography.H3, null, cartSummary.title),
|
|
48
71
|
React__default["default"].createElement(typography.BodyText, null, cartSummary.subTitle))),
|
|
49
|
-
React__default["default"].createElement(CartSummary_styles.
|
|
72
|
+
React__default["default"].createElement(CartSummary_styles.CartSummaryContent, { title: cartSummary.title },
|
|
50
73
|
((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, null,
|
|
51
74
|
React__default["default"].createElement(typography.BodyText, null,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
((
|
|
56
|
-
|
|
57
|
-
|
|
75
|
+
itemsLabel,
|
|
76
|
+
React__default["default"].createElement(CartSummary_styles.QuantitySpan, null,
|
|
77
|
+
"\u00A0(",
|
|
78
|
+
((_f = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _f !== void 0 ? _f : 0) +
|
|
79
|
+
((_g = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _g !== void 0 ? _g : 0),
|
|
80
|
+
")")),
|
|
58
81
|
React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
|
|
59
82
|
(sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_h = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _h === void 0 ? void 0 : _h.dark }, utils.formatPrice(((_j = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _j !== void 0 ? _j : 0) +
|
|
60
83
|
((_k = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _k !== void 0 ? _k : 0)))),
|
|
61
|
-
React__default["default"].createElement(typography.
|
|
84
|
+
React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
|
|
62
85
|
bags.length > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
|
|
63
86
|
React__default["default"].createElement(typography.BodyText, null,
|
|
64
|
-
"
|
|
87
|
+
"Matkassar (",
|
|
65
88
|
sumOfBags.quantity,
|
|
66
|
-
"
|
|
89
|
+
")"),
|
|
67
90
|
React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
|
|
68
91
|
sumOfBags.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_l = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _l === void 0 ? void 0 : _l.dark }, utils.formatPrice(sumOfBags.cancelledAmount))),
|
|
69
|
-
React__default["default"].createElement(typography.
|
|
70
|
-
(
|
|
71
|
-
|
|
72
|
-
var _a, _b;
|
|
73
|
-
return (React__default["default"].createElement(CartSummary_styles.CartLine, { key: charge.name },
|
|
74
|
-
React__default["default"].createElement(typography.BodyText, null, (_a = charge === null || charge === void 0 ? void 0 : charge.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()),
|
|
75
|
-
React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
|
|
76
|
-
charge.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_b = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }, utils.formatPrice(charge.cancelledAmount))),
|
|
77
|
-
React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(charge.amount)))));
|
|
78
|
-
}),
|
|
79
|
-
cartSummary.totalDiscount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
|
|
80
|
-
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 }, saveLabel),
|
|
81
|
-
React__default["default"].createElement(typography.BodyText, { color: (_q = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _q === void 0 ? void 0 : _q.alertRed }, utils.formatPrice(cartSummary.totalDiscount))))),
|
|
82
|
-
React__default["default"].createElement(CartSummary_styles.CartSummaryFooter, null,
|
|
83
|
-
((_r = cartSummary.deliveryFee) === null || _r === void 0 ? void 0 : _r.amount) &&
|
|
84
|
-
cartSummary.deliveryFee.amount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
|
|
85
|
-
React__default["default"].createElement(typography.BodyText, null, shippingLabel),
|
|
86
|
-
React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.deliveryFee.amount)))),
|
|
87
|
-
React__default["default"].createElement(CartSummary_styles.CartLine, null,
|
|
92
|
+
React__default["default"].createElement(typography.BodyText, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfBags.amount))))), charges === null || charges === void 0 ? void 0 :
|
|
93
|
+
charges.map(function (charge) { return (React__default["default"].createElement(ChargeLine, { key: charge.name, charge: charge })); }),
|
|
94
|
+
React__default["default"].createElement(CartSummary_styles.TotalLine, null,
|
|
88
95
|
React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, totalLabel),
|
|
89
96
|
React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(cartSummary.totalAmount))),
|
|
90
97
|
React__default["default"].createElement(CartSummary_styles.CartLine, null,
|
|
91
|
-
React__default["default"].createElement(typography.BodyText, null,
|
|
92
|
-
React__default["default"].createElement(typography.BodyText, null,
|
|
98
|
+
React__default["default"].createElement(typography.BodyText, { color: (_m = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _m === void 0 ? void 0 : _m.alertRed, size: typography.TextTypes.TextSize.SMALL }, saveLabel),
|
|
99
|
+
React__default["default"].createElement(typography.BodyText, { color: (_o = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _o === void 0 ? void 0 : _o.alertRed, size: typography.TextTypes.TextSize.SMALL },
|
|
100
|
+
"-",
|
|
101
|
+
utils.formatPrice(cartSummary.totalDiscount)))))));
|
|
93
102
|
}
|
|
94
103
|
|
|
95
104
|
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,19 +10,25 @@ 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([""], [""])));
|
|
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.
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var
|
|
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; });
|
|
14
|
+
var CartSummaryContent = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n padding: ", "px;\n ", ";\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"], ["\n padding: ", "px;\n ", ";\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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
|
+
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
|
+
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; });
|
|
17
|
+
var LabelWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
18
|
+
var ToolTipButton = styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n display: flex;\n align-items: center;\n color: ", ";\n \n &:hover {\n opacity: 0.7;\n }\n \n &:focus {\n outline-offset: ", "px;\n }\n"], ["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n display: flex;\n align-items: center;\n color: ", ";\n \n &:hover {\n opacity: 0.7;\n }\n \n &:focus {\n outline-offset: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
|
|
19
|
+
var CartSummaryTitle = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n padding: ", "px 0\n ", "px;\n margin: 0 ", "px;\n display: flex;\n gap: ", "px;\n border-bottom: 1px solid ", ";\n"], ["\n padding: ", "px 0\n ", "px;\n margin: 0 ", "px;\n display: flex;\n gap: ", "px;\n border-bottom: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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.palette) === null || _a === void 0 ? void 0 : _a.light; });
|
|
20
|
+
var QuantitySpan = styled__default["default"].span(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n color: ", ";\n font-size: ", "px;\n"], ["\n color: ", ";\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s1; });
|
|
21
|
+
var TotalLine = styled__default["default"](CartLine)(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n margin-top: ", "px;\n"], ["\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
22
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
20
23
|
|
|
21
24
|
exports.AmountWrapper = AmountWrapper;
|
|
22
25
|
exports.CartLine = CartLine;
|
|
23
26
|
exports.CartPaymentContainer = CartPaymentContainer;
|
|
24
27
|
exports.CartSummaryContainer = CartSummaryContainer;
|
|
25
|
-
exports.
|
|
26
|
-
exports.CartSummaryHeader = CartSummaryHeader;
|
|
28
|
+
exports.CartSummaryContent = CartSummaryContent;
|
|
27
29
|
exports.CartSummaryTitle = CartSummaryTitle;
|
|
30
|
+
exports.LabelWrapper = LabelWrapper;
|
|
31
|
+
exports.QuantitySpan = QuantitySpan;
|
|
32
|
+
exports.ToolTipButton = ToolTipButton;
|
|
33
|
+
exports.TotalLine = TotalLine;
|
|
28
34
|
//# sourceMappingURL=CartSummary.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartSummary.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartSummary.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -16,9 +16,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
16
16
|
|
|
17
17
|
var CgButton = React.forwardRef(function (_a, ref) {
|
|
18
18
|
var _b;
|
|
19
|
-
var badge = _a.badge,
|
|
19
|
+
var badge = _a.badge, children = _a.children, loading = _a.loading, _c = _a.size, size = _c === void 0 ? CgButton_types.EButtonSize.medium : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.variant, variant = _e === void 0 ? CgButton_types.EButtonVariant.primary : _e, props = _tslib.__rest(_a, ["badge", "children", "loading", "size", "type", "variant"]);
|
|
20
20
|
var _f = button.getButtonAttributes(size, variant), sizeAttributes = _f.sizeAttributes, variantAttributes = _f.variantAttributes;
|
|
21
|
-
return (React__default["default"].createElement(CgButton_styles.ButtonStyle, _tslib.__assign({
|
|
21
|
+
return (React__default["default"].createElement(CgButton_styles.ButtonStyle, _tslib.__assign({ disabled: loading, ref: ref, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props),
|
|
22
22
|
React__default["default"].createElement(CgButton_styles.ChildrenContainer, { loading: loading }, children),
|
|
23
23
|
loading && (React__default["default"].createElement(CgButton_styles.SpinnerContainer, null,
|
|
24
24
|
React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray }))),
|
|
@@ -11,7 +11,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
|
|
12
12
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
13
13
|
|
|
14
|
-
var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n
|
|
14
|
+
var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n height: ", ";\n width: ", ";\n padding: ", ";\n transition: background-color 0.3s ease;\n white-space: nowrap;\n\n &:not(:disabled):hover {\n background-color: ", ";\n }\n\n &:not(:disabled):active,\n &:not(:disabled):hover:active,\n &:not(:disabled):focus:active {\n background-color: ", ";\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n height: ", ";\n width: ", ";\n padding: ", ";\n transition: background-color 0.3s ease;\n white-space: nowrap;\n\n &:not(:disabled):hover {\n background-color: ", ";\n }\n\n &:not(:disabled):active,\n &:not(:disabled):hover:active,\n &:not(:disabled):focus:active {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
|
|
15
|
+
var variantAttributes = _a.variantAttributes;
|
|
16
|
+
return variantAttributes.backgroundColor;
|
|
17
|
+
}, function (_a) {
|
|
15
18
|
var _b;
|
|
16
19
|
var theme = _a.theme, variantAttributes = _a.variantAttributes;
|
|
17
20
|
return variantAttributes.border
|
|
@@ -33,9 +36,6 @@ var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tsl
|
|
|
33
36
|
? (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.layoutShadowInset
|
|
34
37
|
: (_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow.layoutShadowInsetMedium
|
|
35
38
|
: 'none';
|
|
36
|
-
}, function (_a) {
|
|
37
|
-
var variantAttributes = _a.variantAttributes;
|
|
38
|
-
return variantAttributes.backgroundColor;
|
|
39
39
|
}, function (_a) {
|
|
40
40
|
var variantAttributes = _a.variantAttributes;
|
|
41
41
|
return variantAttributes.fontColor;
|
|
@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _tslib = require('../../../../../_virtual/_tslib.js');
|
|
6
6
|
var styled = require('styled-components');
|
|
7
|
+
var FormElement_styles = require('../FormElement.styles.js');
|
|
7
8
|
|
|
8
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
10
|
|
|
10
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
12
|
|
|
12
|
-
var CheckboxContainer = styled__default["default"].div(
|
|
13
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n\n ", "\n"], ["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n\n ", "\n"])), function (_a) {
|
|
13
14
|
var attributes = _a.attributes;
|
|
14
15
|
return attributes.backgroundColor;
|
|
15
16
|
}, function (_a) {
|
|
@@ -28,11 +29,12 @@ var CheckboxContainer = styled__default["default"].div(templateObject_1 || (temp
|
|
|
28
29
|
var theme = _a.theme;
|
|
29
30
|
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm1;
|
|
30
31
|
}, function (_a) {
|
|
32
|
+
var _b;
|
|
31
33
|
var attributes = _a.attributes;
|
|
32
|
-
return attributes.hoverBackgroundColor;
|
|
34
|
+
return styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n --checkbox-hover-bg: ", ";\n\n ", ":hover & {\n background: var(--checkbox-hover-bg);\n }\n "], ["\n --checkbox-hover-bg: ", ";\n\n ", ":hover & {\n background: var(--checkbox-hover-bg);\n }\n "])), (_b = attributes.hoverBackgroundColor) !== null && _b !== void 0 ? _b : attributes.backgroundColor, FormElement_styles.OptionInputWrapper);
|
|
33
35
|
});
|
|
34
|
-
var IconContainer = styled__default["default"].div(
|
|
35
|
-
var templateObject_1, templateObject_2;
|
|
36
|
+
var IconContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n"])));
|
|
37
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
36
38
|
|
|
37
39
|
exports.CheckboxContainer = CheckboxContainer;
|
|
38
40
|
exports.IconContainer = IconContainer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -8,6 +8,7 @@ var ListItem_styles = require('./ListItem.styles.js');
|
|
|
8
8
|
var ProductHeader = require('../ProductHeader/ProductHeader.js');
|
|
9
9
|
var PriceTag_types = require('../PriceTag/PriceTag.types.js');
|
|
10
10
|
var PriceStripe = require('../PriceStripe/PriceStripe.js');
|
|
11
|
+
var Checkbox = require('../FormElements/Checkbox/Checkbox.js');
|
|
11
12
|
|
|
12
13
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
14
|
|
|
@@ -20,7 +21,7 @@ exports.EListItemAlignment = void 0;
|
|
|
20
21
|
EListItemAlignment["TOP"] = "flex-start";
|
|
21
22
|
})(exports.EListItemAlignment || (exports.EListItemAlignment = {}));
|
|
22
23
|
var ListItem = function (_a) {
|
|
23
|
-
var _b = _a.alignment, alignment = _b === void 0 ? exports.EListItemAlignment.CENTER : _b, children = _a.children, 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;
|
|
24
|
+
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;
|
|
24
25
|
return (React__default["default"].createElement(ListItem_styles.ListItemContainer, null,
|
|
25
26
|
React__default["default"].createElement(ListItem_styles.ListLeft, { alignment: alignment },
|
|
26
27
|
React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
|
|
@@ -35,11 +36,17 @@ var ListItem = function (_a) {
|
|
|
35
36
|
}
|
|
36
37
|
} })),
|
|
37
38
|
React__default["default"].createElement(ListItem_styles.ItemInformationContainer, { alignment: alignment },
|
|
38
|
-
loading ? (React__default["default"].createElement(
|
|
39
|
+
loading ? (React__default["default"].createElement(React.Fragment, null,
|
|
39
40
|
React__default["default"].createElement(Skeleton__default["default"], { height: 15, width: smallSkeleton ? 150 : 250 }),
|
|
40
|
-
React__default["default"].createElement(Skeleton__default["default"], { height: 12, width: smallSkeleton ? 100 : 200 })
|
|
41
|
+
React__default["default"].createElement(Skeleton__default["default"], { height: 12, width: smallSkeleton ? 100 : 200 }),
|
|
42
|
+
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,
|
|
41
43
|
showPriceStripe && (React__default["default"].createElement(PriceStripe.PriceStripe, { size: PriceTag_types.EPriceSize.SMALL, variant: PriceTag_types.EPriceVariant.PRIO })),
|
|
42
|
-
React__default["default"].createElement(ProductHeader.ProductHeader, { description: item === null || item === void 0 ? void 0 : item.description, location: ProductHeader.EProductHeader.LIST_ITEM, title: item === null || item === void 0 ? void 0 : item.name })
|
|
44
|
+
React__default["default"].createElement(ProductHeader.ProductHeader, { description: item === null || item === void 0 ? void 0 : item.description, location: ProductHeader.EProductHeader.LIST_ITEM, 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) { return (React__default["default"].createElement(Checkbox.Checkbox, { key: index, label: checkbox.label, showLabel: true, checked: checkbox.checked, disabled: checkbox.disabled, name: checkbox.name, value: checkbox.value, onChange: function (e) {
|
|
46
|
+
if (checkbox.onChange) {
|
|
47
|
+
checkbox.onChange(e.target.checked);
|
|
48
|
+
}
|
|
49
|
+
} })); }))))),
|
|
43
50
|
(item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
|
|
44
51
|
children && (React__default["default"].createElement(ListItem_styles.ListRight, { alignment: alignment }, children))));
|
|
45
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -42,8 +42,10 @@ var ListImage = styled__default["default"].img(templateObject_6 || (templateObje
|
|
|
42
42
|
? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxHeightSmall
|
|
43
43
|
: (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.listImageMaxHeight, "px");
|
|
44
44
|
});
|
|
45
|
-
var
|
|
45
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n margin-top: ", "px;\n\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n margin-top: ", "px;\n\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n }\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.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.md; });
|
|
46
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
46
47
|
|
|
48
|
+
exports.CheckboxContainer = CheckboxContainer;
|
|
47
49
|
exports.ItemInformationContainer = ItemInformationContainer;
|
|
48
50
|
exports.ListImage = ListImage;
|
|
49
51
|
exports.ListImageContainer = ListImageContainer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -25,7 +25,7 @@ require('@citygross/utils');
|
|
|
25
25
|
require('react-loading-skeleton');
|
|
26
26
|
require('../CartItemSummary/CartItemSummary.styles.js');
|
|
27
27
|
require('../CartSubTotal/CartSubTotal.js');
|
|
28
|
-
require('../
|
|
28
|
+
require('../ToolTipDialog/ToolTipDialog.styles.js');
|
|
29
29
|
require('../CartSummary/CartSummary.styles.js');
|
|
30
30
|
require('../../../../design-tokens/build/index.js');
|
|
31
31
|
require('../CgButton/ButtonAsLink/ButtonAsLink.styles.js');
|
|
@@ -38,6 +38,7 @@ require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
|
|
|
38
38
|
require('../DateBox/DateBox.styles.js');
|
|
39
39
|
require('../DeliverySlotItem/DeliverySlotItem.styles.js');
|
|
40
40
|
require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
|
|
41
|
+
require('../Divider/Divider.styles.js');
|
|
41
42
|
require('../DotIndicator/DotIndicator.styles.js');
|
|
42
43
|
require('../Flex/Flex.styles.js');
|
|
43
44
|
require('../Form/Form.styles.js');
|
|
@@ -101,7 +102,6 @@ require('../StepperMobile/StepperMobile.styles.js');
|
|
|
101
102
|
require('../Table/Table.styles.js');
|
|
102
103
|
require('../Tag/Tag.styles.js');
|
|
103
104
|
require('../Timeline/Timeline.styles.js');
|
|
104
|
-
require('../ToolTipDialog/ToolTipDialog.styles.js');
|
|
105
105
|
require('../UnorderedList/UnorderedList.styles.js');
|
|
106
106
|
var WarningLabel_styles = require('./WarningLabel.styles.js');
|
|
107
107
|
require('../ZipCodeInput/ZipCodeInput.styles.js');
|
|
@@ -21,7 +21,7 @@ import '@citygross/utils';
|
|
|
21
21
|
import 'react-loading-skeleton';
|
|
22
22
|
import '../CartItemSummary/CartItemSummary.styles.js';
|
|
23
23
|
import '../CartSubTotal/CartSubTotal.js';
|
|
24
|
-
import '../
|
|
24
|
+
import '../ToolTipDialog/ToolTipDialog.styles.js';
|
|
25
25
|
import '../CartSummary/CartSummary.styles.js';
|
|
26
26
|
import '../../../../design-tokens/build/index.js';
|
|
27
27
|
import '../CgButton/ButtonAsLink/ButtonAsLink.styles.js';
|
|
@@ -34,6 +34,7 @@ import '../CustomerInfoBlock/CustomerInfoBlock.styles.js';
|
|
|
34
34
|
import '../DateBox/DateBox.styles.js';
|
|
35
35
|
import '../DeliverySlotItem/DeliverySlotItem.styles.js';
|
|
36
36
|
import '../DeliveryTimeBlock/DeliveryTimeBlock.styles.js';
|
|
37
|
+
import '../Divider/Divider.styles.js';
|
|
37
38
|
import '../DotIndicator/DotIndicator.styles.js';
|
|
38
39
|
import '../Flex/Flex.styles.js';
|
|
39
40
|
import '../Form/Form.styles.js';
|
|
@@ -97,7 +98,6 @@ import '../StepperMobile/StepperMobile.styles.js';
|
|
|
97
98
|
import '../Table/Table.styles.js';
|
|
98
99
|
import '../Tag/Tag.styles.js';
|
|
99
100
|
import '../Timeline/Timeline.styles.js';
|
|
100
|
-
import '../ToolTipDialog/ToolTipDialog.styles.js';
|
|
101
101
|
import '../UnorderedList/UnorderedList.styles.js';
|
|
102
102
|
import '../WarningLabel/WarningLabel.styles.js';
|
|
103
103
|
import '../ZipCodeInput/ZipCodeInput.styles.js';
|
|
@@ -15,7 +15,7 @@ function CartItemSummary(_a) {
|
|
|
15
15
|
React.createElement(AmountText, { lineThrough: true, fontWeight: withParenthesis ? 'regular' : 'semiBold' }, product ? (formatPrice(product.cancelledAmount, withParenthesis)) : (React.createElement(Skeleton, { width: 100 }))))),
|
|
16
16
|
React.createElement(ItemInformationContainer, null,
|
|
17
17
|
React.createElement(BodyText, { size: TextTypes.TextSize.SMALL }, (product === null || product === void 0 ? void 0 : product.quantity) || (product === null || product === void 0 ? void 0 : product.quantity) === 0 ? ("".concat(product.quantity, " ").concat(unit)) : (React.createElement(Skeleton, { width: 100 }))),
|
|
18
|
-
React.createElement(AmountText, { fontWeight: withParenthesis ? 'regular' : '
|
|
18
|
+
React.createElement(AmountText, { fontWeight: withParenthesis ? 'regular' : 'medium' }, product ? (formatPrice(product.amount, withParenthesis)) : (React.createElement(Skeleton, { width: 100 }))))));
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
export { CartItemSummary };
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { __rest } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import { formatPrice } from '@citygross/utils';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
3
|
+
import React, { useState, Fragment } from 'react';
|
|
4
|
+
import { Icons } from '@citygross/icons';
|
|
5
|
+
import { ToolTipDialog } from '../ToolTipDialog/ToolTipDialog.js';
|
|
6
|
+
import { CartSummaryContainer, CartPaymentContainer, CartSummaryTitle, CartSummaryContent, CartLine, QuantitySpan, AmountWrapper, TotalLine, LabelWrapper, ToolTipButton } from './CartSummary.styles.js';
|
|
7
|
+
import { H3, BodyText, TextTypes } from '@citygross/typography';
|
|
7
8
|
import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
|
|
8
9
|
|
|
9
10
|
var calculateSummaryLine = function (items) {
|
|
@@ -24,8 +25,8 @@ var calculateSummaryLine = function (items) {
|
|
|
24
25
|
return sumOfItems;
|
|
25
26
|
};
|
|
26
27
|
function CartSummary(_a) {
|
|
27
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
|
28
|
-
var
|
|
28
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
29
|
+
var _p = _a.saveLabel, saveLabel = _p === void 0 ? 'Varav rabatt' : _p; _a.shippingLabel; var _r = _a.totalLabel, totalLabel = _r === void 0 ? 'Totalt' : _r; _a.taxLabel; var _t = _a.itemsLabel, itemsLabel = _t === void 0 ? 'Varor' : _t, cartSummary = __rest(_a, ["saveLabel", "shippingLabel", "totalLabel", "taxLabel", "itemsLabel"]);
|
|
29
30
|
var charges = (_b = cartSummary.charges) !== null && _b !== void 0 ? _b : [];
|
|
30
31
|
var bags = (_c = cartSummary.bags) !== null && _c !== void 0 ? _c : [];
|
|
31
32
|
var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
|
|
@@ -33,55 +34,63 @@ function CartSummary(_a) {
|
|
|
33
34
|
var sumOfBags = calculateSummaryLine(bags);
|
|
34
35
|
var sumOfGroceries = calculateSummaryLine(groceries);
|
|
35
36
|
var sumOfCateredMeals = calculateSummaryLine(cateredMeals);
|
|
37
|
+
var ChargeLine = function (_a) {
|
|
38
|
+
var _b, _c;
|
|
39
|
+
var charge = _a.charge;
|
|
40
|
+
var _d = useState(false), infoOpen = _d[0], setInfoOpen = _d[1];
|
|
41
|
+
var tooltipId = "tooltip-".concat((_b = charge.name) === null || _b === void 0 ? void 0 : _b.toLowerCase().replace(/ /g, '-'));
|
|
42
|
+
var toggleInfoOpen = function () {
|
|
43
|
+
setInfoOpen(!infoOpen);
|
|
44
|
+
};
|
|
45
|
+
var chargeName = charge.name
|
|
46
|
+
? charge.name.charAt(0).toUpperCase() + charge.name.slice(1).toLowerCase()
|
|
47
|
+
: '';
|
|
48
|
+
return (React.createElement(Fragment, null,
|
|
49
|
+
React.createElement(CartLine, { key: charge.name },
|
|
50
|
+
React.createElement(LabelWrapper, null,
|
|
51
|
+
React.createElement(BodyText, null, chargeName),
|
|
52
|
+
charge.info && (React.createElement(ToolTipButton, { "aria-expanded": infoOpen, "aria-label": charge.tooltipAriaLabel || 'Mer information', "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen },
|
|
53
|
+
React.createElement(Icons.Info, { "aria-hidden": "true", height: 16, width: 16 })))),
|
|
54
|
+
React.createElement(AmountWrapper, null,
|
|
55
|
+
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))),
|
|
56
|
+
React.createElement(BodyText, null, formatPrice(charge.amount)))),
|
|
57
|
+
infoOpen && charge.info && (React.createElement(ToolTipDialog, { id: tooltipId, info: charge.info, toggle: toggleInfoOpen }))));
|
|
58
|
+
};
|
|
36
59
|
return (React.createElement(CartSummaryContainer, null,
|
|
37
60
|
React.createElement(CartPaymentContainer, null,
|
|
38
61
|
cartSummary.title && (React.createElement(CartSummaryTitle, null,
|
|
39
62
|
React.createElement(H3, null, cartSummary.title),
|
|
40
63
|
React.createElement(BodyText, null, cartSummary.subTitle))),
|
|
41
|
-
React.createElement(
|
|
64
|
+
React.createElement(CartSummaryContent, { title: cartSummary.title },
|
|
42
65
|
((groceries === null || groceries === void 0 ? void 0 : groceries.length) > 0 || (cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0) && (React.createElement(CartLine, null,
|
|
43
66
|
React.createElement(BodyText, null,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
((
|
|
48
|
-
|
|
49
|
-
|
|
67
|
+
itemsLabel,
|
|
68
|
+
React.createElement(QuantitySpan, null,
|
|
69
|
+
"\u00A0(",
|
|
70
|
+
((_f = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _f !== void 0 ? _f : 0) +
|
|
71
|
+
((_g = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _g !== void 0 ? _g : 0),
|
|
72
|
+
")")),
|
|
50
73
|
React.createElement(AmountWrapper, null,
|
|
51
74
|
(sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_h = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _h === void 0 ? void 0 : _h.dark }, formatPrice(((_j = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _j !== void 0 ? _j : 0) +
|
|
52
75
|
((_k = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _k !== void 0 ? _k : 0)))),
|
|
53
|
-
React.createElement(
|
|
76
|
+
React.createElement(BodyText, null, formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
|
|
54
77
|
bags.length > 0 && (React.createElement(CartLine, null,
|
|
55
78
|
React.createElement(BodyText, null,
|
|
56
|
-
"
|
|
79
|
+
"Matkassar (",
|
|
57
80
|
sumOfBags.quantity,
|
|
58
|
-
"
|
|
81
|
+
")"),
|
|
59
82
|
React.createElement(AmountWrapper, null,
|
|
60
83
|
sumOfBags.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_l = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _l === void 0 ? void 0 : _l.dark }, formatPrice(sumOfBags.cancelledAmount))),
|
|
61
|
-
React.createElement(
|
|
62
|
-
(
|
|
63
|
-
|
|
64
|
-
var _a, _b;
|
|
65
|
-
return (React.createElement(CartLine, { key: charge.name },
|
|
66
|
-
React.createElement(BodyText, null, (_a = charge === null || charge === void 0 ? void 0 : charge.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()),
|
|
67
|
-
React.createElement(AmountWrapper, null,
|
|
68
|
-
charge.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_b = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _b === void 0 ? void 0 : _b.dark }, formatPrice(charge.cancelledAmount))),
|
|
69
|
-
React.createElement(BodyText, null, formatPrice(charge.amount)))));
|
|
70
|
-
}),
|
|
71
|
-
cartSummary.totalDiscount > 0 && (React.createElement(CartLine, null,
|
|
72
|
-
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 }, saveLabel),
|
|
73
|
-
React.createElement(BodyText, { color: (_q = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _q === void 0 ? void 0 : _q.alertRed }, formatPrice(cartSummary.totalDiscount))))),
|
|
74
|
-
React.createElement(CartSummaryFooter, null,
|
|
75
|
-
((_r = cartSummary.deliveryFee) === null || _r === void 0 ? void 0 : _r.amount) &&
|
|
76
|
-
cartSummary.deliveryFee.amount > 0 && (React.createElement(CartLine, null,
|
|
77
|
-
React.createElement(BodyText, null, shippingLabel),
|
|
78
|
-
React.createElement(BodyText, null, formatPrice(cartSummary.deliveryFee.amount)))),
|
|
79
|
-
React.createElement(CartLine, null,
|
|
84
|
+
React.createElement(BodyText, { fontWeight: 'semiBold' }, formatPrice(sumOfBags.amount))))), charges === null || charges === void 0 ? void 0 :
|
|
85
|
+
charges.map(function (charge) { return (React.createElement(ChargeLine, { key: charge.name, charge: charge })); }),
|
|
86
|
+
React.createElement(TotalLine, null,
|
|
80
87
|
React.createElement(H3, { fontWeight: 'semiBold' }, totalLabel),
|
|
81
88
|
React.createElement(H3, { fontWeight: 'semiBold' }, formatPrice(cartSummary.totalAmount))),
|
|
82
89
|
React.createElement(CartLine, null,
|
|
83
|
-
React.createElement(BodyText, null,
|
|
84
|
-
React.createElement(BodyText, null,
|
|
90
|
+
React.createElement(BodyText, { color: (_m = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _m === void 0 ? void 0 : _m.alertRed, size: TextTypes.TextSize.SMALL }, saveLabel),
|
|
91
|
+
React.createElement(BodyText, { color: (_o = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _o === void 0 ? void 0 : _o.alertRed, size: TextTypes.TextSize.SMALL },
|
|
92
|
+
"-",
|
|
93
|
+
formatPrice(cartSummary.totalDiscount)))))));
|
|
85
94
|
}
|
|
86
95
|
|
|
87
96
|
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,13 +2,16 @@ 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([""], [""])));
|
|
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.
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
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; });
|
|
6
|
+
var CartSummaryContent = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: ", "px;\n ", ";\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"], ["\n padding: ", "px;\n ", ";\n display: flex;\n flex-direction: column;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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
|
+
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
|
+
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; });
|
|
9
|
+
var LabelWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
10
|
+
var ToolTipButton = styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n display: flex;\n align-items: center;\n color: ", ";\n \n &:hover {\n opacity: 0.7;\n }\n \n &:focus {\n outline-offset: ", "px;\n }\n"], ["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n display: flex;\n align-items: center;\n color: ", ";\n \n &:hover {\n opacity: 0.7;\n }\n \n &:focus {\n outline-offset: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
|
|
11
|
+
var CartSummaryTitle = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding: ", "px 0\n ", "px;\n margin: 0 ", "px;\n display: flex;\n gap: ", "px;\n border-bottom: 1px solid ", ";\n"], ["\n padding: ", "px 0\n ", "px;\n margin: 0 ", "px;\n display: flex;\n gap: ", "px;\n border-bottom: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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.palette) === null || _a === void 0 ? void 0 : _a.light; });
|
|
12
|
+
var QuantitySpan = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: ", ";\n font-size: ", "px;\n"], ["\n color: ", ";\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s1; });
|
|
13
|
+
var TotalLine = styled(CartLine)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n margin-top: ", "px;\n"], ["\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
14
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
12
15
|
|
|
13
|
-
export { AmountWrapper, CartLine, CartPaymentContainer, CartSummaryContainer,
|
|
16
|
+
export { AmountWrapper, CartLine, CartPaymentContainer, CartSummaryContainer, CartSummaryContent, CartSummaryTitle, LabelWrapper, QuantitySpan, ToolTipButton, TotalLine };
|
|
14
17
|
//# sourceMappingURL=CartSummary.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartSummary.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartSummary.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
|
|
@@ -8,9 +8,9 @@ import { theme } from '@citygross/design-tokens';
|
|
|
8
8
|
|
|
9
9
|
var CgButton = forwardRef(function (_a, ref) {
|
|
10
10
|
var _b;
|
|
11
|
-
var badge = _a.badge,
|
|
11
|
+
var badge = _a.badge, children = _a.children, loading = _a.loading, _c = _a.size, size = _c === void 0 ? EButtonSize.medium : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.variant, variant = _e === void 0 ? EButtonVariant.primary : _e, props = __rest(_a, ["badge", "children", "loading", "size", "type", "variant"]);
|
|
12
12
|
var _f = getButtonAttributes(size, variant), sizeAttributes = _f.sizeAttributes, variantAttributes = _f.variantAttributes;
|
|
13
|
-
return (React.createElement(ButtonStyle, __assign({
|
|
13
|
+
return (React.createElement(ButtonStyle, __assign({ disabled: loading, ref: ref, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props),
|
|
14
14
|
React.createElement(ChildrenContainer, { loading: loading }, children),
|
|
15
15
|
loading && (React.createElement(SpinnerContainer, null,
|
|
16
16
|
React.createElement(Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray }))),
|
|
@@ -3,7 +3,10 @@ import styled, { css } from 'styled-components';
|
|
|
3
3
|
import { focusVisible } from '../../shared/global.styles.js';
|
|
4
4
|
import { EButtonSize } from './CgButton.types.js';
|
|
5
5
|
|
|
6
|
-
var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
6
|
+
var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n height: ", ";\n width: ", ";\n padding: ", ";\n transition: background-color 0.3s ease;\n white-space: nowrap;\n\n &:not(:disabled):hover {\n background-color: ", ";\n }\n\n &:not(:disabled):active,\n &:not(:disabled):hover:active,\n &:not(:disabled):focus:active {\n background-color: ", ";\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n height: ", ";\n width: ", ";\n padding: ", ";\n transition: background-color 0.3s ease;\n white-space: nowrap;\n\n &:not(:disabled):hover {\n background-color: ", ";\n }\n\n &:not(:disabled):active,\n &:not(:disabled):hover:active,\n &:not(:disabled):focus:active {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
|
|
7
|
+
var variantAttributes = _a.variantAttributes;
|
|
8
|
+
return variantAttributes.backgroundColor;
|
|
9
|
+
}, function (_a) {
|
|
7
10
|
var _b;
|
|
8
11
|
var theme = _a.theme, variantAttributes = _a.variantAttributes;
|
|
9
12
|
return variantAttributes.border
|
|
@@ -25,9 +28,6 @@ var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTempl
|
|
|
25
28
|
? (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.layoutShadowInset
|
|
26
29
|
: (_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow.layoutShadowInsetMedium
|
|
27
30
|
: 'none';
|
|
28
|
-
}, function (_a) {
|
|
29
|
-
var variantAttributes = _a.variantAttributes;
|
|
30
|
-
return variantAttributes.backgroundColor;
|
|
31
31
|
}, function (_a) {
|
|
32
32
|
var variantAttributes = _a.variantAttributes;
|
|
33
33
|
return variantAttributes.fontColor;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../../_virtual/_tslib.js';
|
|
2
|
-
import styled from 'styled-components';
|
|
2
|
+
import styled, { css } from 'styled-components';
|
|
3
|
+
import { OptionInputWrapper } from '../FormElement.styles.js';
|
|
3
4
|
|
|
4
|
-
var CheckboxContainer = styled.div(
|
|
5
|
+
var CheckboxContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n\n ", "\n"], ["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n\n ", "\n"])), function (_a) {
|
|
5
6
|
var attributes = _a.attributes;
|
|
6
7
|
return attributes.backgroundColor;
|
|
7
8
|
}, function (_a) {
|
|
@@ -20,11 +21,12 @@ var CheckboxContainer = styled.div(templateObject_1 || (templateObject_1 = __mak
|
|
|
20
21
|
var theme = _a.theme;
|
|
21
22
|
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm1;
|
|
22
23
|
}, function (_a) {
|
|
24
|
+
var _b;
|
|
23
25
|
var attributes = _a.attributes;
|
|
24
|
-
return attributes.hoverBackgroundColor;
|
|
26
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --checkbox-hover-bg: ", ";\n\n ", ":hover & {\n background: var(--checkbox-hover-bg);\n }\n "], ["\n --checkbox-hover-bg: ", ";\n\n ", ":hover & {\n background: var(--checkbox-hover-bg);\n }\n "])), (_b = attributes.hoverBackgroundColor) !== null && _b !== void 0 ? _b : attributes.backgroundColor, OptionInputWrapper);
|
|
25
27
|
});
|
|
26
|
-
var IconContainer = styled.div(
|
|
27
|
-
var templateObject_1, templateObject_2;
|
|
28
|
+
var IconContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n"])));
|
|
29
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
28
30
|
|
|
29
31
|
export { CheckboxContainer, IconContainer };
|
|
30
32
|
//# sourceMappingURL=Checkbox.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { Fragment } from 'react';
|
|
2
2
|
import Skeleton from 'react-loading-skeleton';
|
|
3
|
-
import { ListItemContainer, ListLeft, ListImageContainer, ListImage, ItemInformationContainer, ListRight } from './ListItem.styles.js';
|
|
3
|
+
import { ListItemContainer, ListLeft, ListImageContainer, ListImage, ItemInformationContainer, CheckboxContainer, ListRight } from './ListItem.styles.js';
|
|
4
4
|
import { ProductHeader, EProductHeader } from '../ProductHeader/ProductHeader.js';
|
|
5
5
|
import { EPriceSize, EPriceVariant } from '../PriceTag/PriceTag.types.js';
|
|
6
6
|
import { PriceStripe } from '../PriceStripe/PriceStripe.js';
|
|
7
|
+
import { Checkbox } from '../FormElements/Checkbox/Checkbox.js';
|
|
7
8
|
|
|
8
9
|
var EListItemAlignment;
|
|
9
10
|
(function (EListItemAlignment) {
|
|
@@ -11,7 +12,7 @@ var EListItemAlignment;
|
|
|
11
12
|
EListItemAlignment["TOP"] = "flex-start";
|
|
12
13
|
})(EListItemAlignment || (EListItemAlignment = {}));
|
|
13
14
|
var ListItem = function (_a) {
|
|
14
|
-
var _b = _a.alignment, alignment = _b === void 0 ? EListItemAlignment.CENTER : _b, children = _a.children, 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;
|
|
15
|
+
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;
|
|
15
16
|
return (React.createElement(ListItemContainer, null,
|
|
16
17
|
React.createElement(ListLeft, { alignment: alignment },
|
|
17
18
|
React.createElement(ListImageContainer, { isSmall: isSmall },
|
|
@@ -26,11 +27,17 @@ var ListItem = function (_a) {
|
|
|
26
27
|
}
|
|
27
28
|
} })),
|
|
28
29
|
React.createElement(ItemInformationContainer, { alignment: alignment },
|
|
29
|
-
loading ? (React.createElement(
|
|
30
|
+
loading ? (React.createElement(Fragment, null,
|
|
30
31
|
React.createElement(Skeleton, { height: 15, width: smallSkeleton ? 150 : 250 }),
|
|
31
|
-
React.createElement(Skeleton, { height: 12, width: smallSkeleton ? 100 : 200 })
|
|
32
|
+
React.createElement(Skeleton, { height: 12, width: smallSkeleton ? 100 : 200 }),
|
|
33
|
+
checkboxes && checkboxes.length > 0 && (React.createElement(Skeleton, { height: 20, width: smallSkeleton ? 150 : 200, count: checkboxes.length, style: { marginTop: '8px' } })))) : (React.createElement(Fragment, null,
|
|
32
34
|
showPriceStripe && (React.createElement(PriceStripe, { size: EPriceSize.SMALL, variant: EPriceVariant.PRIO })),
|
|
33
|
-
React.createElement(ProductHeader, { description: item === null || item === void 0 ? void 0 : item.description, location: EProductHeader.LIST_ITEM, title: item === null || item === void 0 ? void 0 : item.name })
|
|
35
|
+
React.createElement(ProductHeader, { description: item === null || item === void 0 ? void 0 : item.description, location: EProductHeader.LIST_ITEM, title: item === null || item === void 0 ? void 0 : item.name }),
|
|
36
|
+
checkboxes && checkboxes.length > 0 && (React.createElement(CheckboxContainer, null, checkboxes.map(function (checkbox, index) { return (React.createElement(Checkbox, { key: index, label: checkbox.label, showLabel: true, checked: checkbox.checked, disabled: checkbox.disabled, name: checkbox.name, value: checkbox.value, onChange: function (e) {
|
|
37
|
+
if (checkbox.onChange) {
|
|
38
|
+
checkbox.onChange(e.target.checked);
|
|
39
|
+
}
|
|
40
|
+
} })); }))))),
|
|
34
41
|
(item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
|
|
35
42
|
children && (React.createElement(ListRight, { alignment: alignment }, children))));
|
|
36
43
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -34,7 +34,8 @@ var ListImage = styled.img(templateObject_6 || (templateObject_6 = __makeTemplat
|
|
|
34
34
|
? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxHeightSmall
|
|
35
35
|
: (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.listImageMaxHeight, "px");
|
|
36
36
|
});
|
|
37
|
-
var
|
|
37
|
+
var CheckboxContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n margin-top: ", "px;\n\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", "px;\n margin-top: ", "px;\n\n @media (min-width: ", "px) {\n flex-direction: row;\n gap: ", "px;\n }\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.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.md; });
|
|
38
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
38
39
|
|
|
39
|
-
export { ItemInformationContainer, ListImage, ListImageContainer, ListItemContainer, ListLeft, ListRight };
|
|
40
|
+
export { CheckboxContainer, ItemInformationContainer, ListImage, ListImageContainer, ListItemContainer, ListLeft, ListRight };
|
|
40
41
|
//# sourceMappingURL=ListItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -21,7 +21,7 @@ import '@citygross/utils';
|
|
|
21
21
|
import 'react-loading-skeleton';
|
|
22
22
|
import '../CartItemSummary/CartItemSummary.styles.js';
|
|
23
23
|
import '../CartSubTotal/CartSubTotal.js';
|
|
24
|
-
import '../
|
|
24
|
+
import '../ToolTipDialog/ToolTipDialog.styles.js';
|
|
25
25
|
import '../CartSummary/CartSummary.styles.js';
|
|
26
26
|
import '../../../../design-tokens/build/index.js';
|
|
27
27
|
import '../CgButton/ButtonAsLink/ButtonAsLink.styles.js';
|
|
@@ -34,6 +34,7 @@ import '../CustomerInfoBlock/CustomerInfoBlock.styles.js';
|
|
|
34
34
|
import '../DateBox/DateBox.styles.js';
|
|
35
35
|
import '../DeliverySlotItem/DeliverySlotItem.styles.js';
|
|
36
36
|
import '../DeliveryTimeBlock/DeliveryTimeBlock.styles.js';
|
|
37
|
+
import '../Divider/Divider.styles.js';
|
|
37
38
|
import '../DotIndicator/DotIndicator.styles.js';
|
|
38
39
|
import '../Flex/Flex.styles.js';
|
|
39
40
|
import '../Form/Form.styles.js';
|
|
@@ -97,7 +98,6 @@ import '../StepperMobile/StepperMobile.styles.js';
|
|
|
97
98
|
import '../Table/Table.styles.js';
|
|
98
99
|
import '../Tag/Tag.styles.js';
|
|
99
100
|
import '../Timeline/Timeline.styles.js';
|
|
100
|
-
import '../ToolTipDialog/ToolTipDialog.styles.js';
|
|
101
101
|
import '../UnorderedList/UnorderedList.styles.js';
|
|
102
102
|
import { WarningIndicator } from './WarningLabel.styles.js';
|
|
103
103
|
import '../ZipCodeInput/ZipCodeInput.styles.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.0",
|
|
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": "9689ed1055a89211b68777d29774bc3be1801ecb"
|
|
79
79
|
}
|