@citygross/components 0.8.16 → 0.8.18
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/CartCard/CartCard.styles.d.ts +1 -1
- package/build/@types/components/CgButton/CgButton.d.ts +2 -1
- package/build/cjs/components/src/components/AddressBlock/AddressBlock.js +1 -1
- package/build/cjs/components/src/components/CartCard/CartCard.js +1 -1
- package/build/cjs/components/src/components/CartCard/CartCard.styles.js +8 -8
- package/build/cjs/components/src/components/CartSummary/CartSummary.js +17 -21
- package/build/cjs/components/src/components/CartSummary/CartSummary.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 +1 -1
- package/build/cjs/components/src/components/Header/Header.js +2 -2
- package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js +5 -1
- package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js.map +1 -1
- package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.styles.js +3 -3
- package/build/cjs/components/src/components/WarningLabel/WarningLabel.js +1 -1
- package/build/es/components/src/components/AddressBlock/AddressBlock.js +1 -1
- package/build/es/components/src/components/CartCard/CartCard.js +2 -2
- package/build/es/components/src/components/CartCard/CartCard.styles.js +8 -9
- package/build/es/components/src/components/CartCard/CartCard.styles.js.map +1 -1
- package/build/es/components/src/components/CartSummary/CartSummary.js +17 -21
- package/build/es/components/src/components/CartSummary/CartSummary.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 +1 -1
- package/build/es/components/src/components/Header/Header.js +2 -2
- package/build/es/components/src/components/QuantitySelector/QuantitySelector.js +5 -1
- package/build/es/components/src/components/QuantitySelector/QuantitySelector.js.map +1 -1
- package/build/es/components/src/components/QuantitySelector/QuantitySelector.styles.js +3 -3
- package/build/es/components/src/components/WarningLabel/WarningLabel.js +1 -1
- package/package.json +3 -3
|
@@ -7,8 +7,8 @@ export declare const CartCardInfo: import("styled-components").StyledComponent<"
|
|
|
7
7
|
export declare const CartCardInnerTop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
8
|
export declare const CartCardInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
9
9
|
export declare const CartCardPriceContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
|
-
export declare const CartCardDelete: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
|
11
10
|
export declare const PriceContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
12
11
|
export declare const MaxWarning: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
13
12
|
export declare const MarkingsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
14
13
|
export declare const CartCardTitle: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, TCartCardTitle, never>;
|
|
14
|
+
export declare const CartCardDelete: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -21,5 +21,6 @@ export declare type TCgButton = {
|
|
|
21
21
|
disabled?: boolean;
|
|
22
22
|
onClick?: () => void;
|
|
23
23
|
fullWidth?: boolean;
|
|
24
|
+
buttonRef?: React.Ref<HTMLButtonElement>;
|
|
24
25
|
};
|
|
25
|
-
export declare const CgButton: ({ size, variant, icon, flexReverse, disabled, onClick, children, loading, fullWidth }: TCgButton) => JSX.Element;
|
|
26
|
+
export declare const CgButton: ({ size, variant, icon, flexReverse, disabled, onClick, children, loading, fullWidth, buttonRef }: TCgButton) => JSX.Element;
|
|
@@ -15,6 +15,7 @@ require('@citygross/design-tokens');
|
|
|
15
15
|
require('../Logo/Logo.styles.js');
|
|
16
16
|
require('../Header/Header.styles.js');
|
|
17
17
|
require('../HeaderLink/HeaderLink.styles.js');
|
|
18
|
+
require('../CgButton/CgButton.js');
|
|
18
19
|
require('../BackgroundImage/BackgroundImage.styles.js');
|
|
19
20
|
require('../Badge/Badge.styles.js');
|
|
20
21
|
require('../../../../_virtual/_tslib.js');
|
|
@@ -91,7 +92,6 @@ require('../ZipCodeInput/ZipCodeInput.styles.js');
|
|
|
91
92
|
require('../MaxHeightText/styles.js');
|
|
92
93
|
require('../ToolTipDialog/ToolTipDialog.styles.js');
|
|
93
94
|
require('../CartSubTotal/CartSubTotal.js');
|
|
94
|
-
require('../CgButton/CgButton.js');
|
|
95
95
|
require('../CouponCode/CouponCode.js');
|
|
96
96
|
require('../CartCardLabel/CartCardLabel.styles.js');
|
|
97
97
|
require('../CartCard/CartCard.styles.js');
|
|
@@ -22,7 +22,7 @@ var CartCard = function (_a) {
|
|
|
22
22
|
markings && (React__default["default"].createElement(CartCard_styles.MarkingsContainer, null, markings)),
|
|
23
23
|
title && (React__default["default"].createElement(CartCard_styles.CartCardTitle, { titleLineClamp: titleLineClamp }, title)),
|
|
24
24
|
description && description),
|
|
25
|
-
showDelete && (React__default["default"].createElement(
|
|
25
|
+
showDelete && (React__default["default"].createElement(CartCard_styles.CartCardDelete, null,
|
|
26
26
|
React__default["default"].createElement(CgButton.CgButton, { onClick: onDelete, variant: CgButton.EButtonVariant.secondary, icon: React__default["default"].createElement(icons.Icons.Trash, { width: 16, height: 16 }) })))),
|
|
27
27
|
secondaryDescription && secondaryDescription,
|
|
28
28
|
React__default["default"].createElement(CartCard_styles.CartCardPriceContainer, null,
|
|
@@ -4,7 +4,6 @@ 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 global_styles = require('../../shared/global.styles.js');
|
|
8
7
|
|
|
9
8
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
9
|
|
|
@@ -13,18 +12,19 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
13
12
|
var CartCardImage = styled__default["default"].img(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n width: 48px;\n height: 48px;\n object-fit: contain;\n"], ["\n width: 48px;\n height: 48px;\n object-fit: contain;\n"])));
|
|
14
13
|
var CartCardContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n align-items: center;\n width: 100%;\n"], ["\n display: flex;\n gap: ", "px;\n align-items: center;\n width: 100%;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
15
14
|
var CartCardInfo = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
16
|
-
var CartCardInnerTop = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
15
|
+
var CartCardInnerTop = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n gap: ", "px;\n"], ["\n display: flex;\n justify-content: space-between;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
17
16
|
var CartCardInner = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
18
17
|
var CartCardPriceContainer = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: ", "px;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
var
|
|
22
|
-
var
|
|
23
|
-
var
|
|
24
|
-
var
|
|
18
|
+
var MaxWarningAnimate = styled.keyframes(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n0% { \n opacity: 1;\n display: block;\n }\n 90%{\n opacity: 1;\n display: block;\n }\n100% {\n opacity: 0;\n display: none;\n}\n"], ["\n0% { \n opacity: 1;\n display: block;\n }\n 90%{\n opacity: 1;\n display: block;\n }\n100% {\n opacity: 0;\n display: none;\n}\n"])));
|
|
19
|
+
var PriceContainer = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n position: relative;\n flex: 1;\n"], ["\n position: relative;\n flex: 1;\n"])));
|
|
20
|
+
var MaxWarning = styled__default["default"].div(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n color: ", ";\n animation: ", " 2s forwards;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: ", ";\n font-size: ", "px;\n"], ["\n color: ", ";\n animation: ", " 2s forwards;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: ", ";\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertRed; }, MaxWarningAnimate, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
|
|
21
|
+
var MarkingsContainer = styled__default["default"].div(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n margin-bottom: ", "px;\n"], ["\n margin-bottom: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
|
|
22
|
+
var CartCardTitle = styled__default["default"].p(templateObject_11 || (templateObject_11 = _tslib.__makeTemplateObject(["\n font-weight: ", ";\n font-size: ", "px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n"], ["\n font-weight: ", ";\n font-size: ", "px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.medium; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { return props.titleLineClamp; });
|
|
23
|
+
var CartCardDelete = styled__default["default"].div(templateObject_12 || (templateObject_12 = _tslib.__makeTemplateObject(["\n button {\n height: 40px;\n width: 40px;\n }\n @media (min-width: ", "px) {\n button {\n height: unset;\n width: unset;\n }\n }\n"], ["\n button {\n height: 40px;\n width: 40px;\n }\n @media (min-width: ", "px) {\n button {\n height: unset;\n width: unset;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
25
24
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
26
25
|
|
|
27
26
|
exports.CartCardContainer = CartCardContainer;
|
|
27
|
+
exports.CartCardDelete = CartCardDelete;
|
|
28
28
|
exports.CartCardImage = CartCardImage;
|
|
29
29
|
exports.CartCardInfo = CartCardInfo;
|
|
30
30
|
exports.CartCardInner = CartCardInner;
|
|
@@ -32,8 +32,8 @@ var calculateSummaryLine = function (items) {
|
|
|
32
32
|
return sumOfItems;
|
|
33
33
|
};
|
|
34
34
|
function CartSummary(_a) {
|
|
35
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
36
|
-
var
|
|
35
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
36
|
+
var _s = _a.saveLabel, saveLabel = _s === void 0 ? 'rabatter' : _s, _t = _a.shippingLabel, shippingLabel = _t === void 0 ? 'frakt' : _t, _u = _a.totalLabel, totalLabel = _u === void 0 ? 'totalt' : _u, _v = _a.taxLabel, taxLabel = _v === void 0 ? 'varav moms' : _v, cartSummary = _tslib.__rest(_a, ["saveLabel", "shippingLabel", "totalLabel", "taxLabel"]);
|
|
37
37
|
var charges = (_b = cartSummary.charges) !== null && _b !== void 0 ? _b : [];
|
|
38
38
|
var bags = (_c = cartSummary.bags) !== null && _c !== void 0 ? _c : [];
|
|
39
39
|
var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
|
|
@@ -47,31 +47,27 @@ function CartSummary(_a) {
|
|
|
47
47
|
React__default["default"].createElement(typography.H3, null, cartSummary.title),
|
|
48
48
|
React__default["default"].createElement(typography.BodyText, null, cartSummary.subTitle))),
|
|
49
49
|
React__default["default"].createElement(CartSummary_styles.CartSummaryHeader, { title: cartSummary.title },
|
|
50
|
-
groceries.length > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
|
|
50
|
+
((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
51
|
React__default["default"].createElement(typography.BodyText, null,
|
|
52
|
-
"
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
(cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
|
|
59
|
-
React__default["default"].createElement(typography.BodyText, null,
|
|
60
|
-
"catering ",
|
|
61
|
-
sumOfCateredMeals.quantity,
|
|
62
|
-
" st"),
|
|
52
|
+
"varor",
|
|
53
|
+
' ',
|
|
54
|
+
((_f = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _f !== void 0 ? _f : 0) +
|
|
55
|
+
((_g = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _g !== void 0 ? _g : 0),
|
|
56
|
+
' ',
|
|
57
|
+
"st"),
|
|
63
58
|
React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
|
|
64
|
-
|
|
65
|
-
|
|
59
|
+
(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
|
+
((_k = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _k !== void 0 ? _k : 0)))),
|
|
61
|
+
React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
|
|
66
62
|
bags.length > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
|
|
67
63
|
React__default["default"].createElement(typography.BodyText, null,
|
|
68
64
|
"matkassar ",
|
|
69
65
|
sumOfBags.quantity,
|
|
70
66
|
" st"),
|
|
71
67
|
React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
|
|
72
|
-
sumOfBags.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (
|
|
68
|
+
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))),
|
|
73
69
|
React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfBags.amount))))),
|
|
74
|
-
(charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React__default["default"].createElement(Divider.Divider, { xsSpacing: (
|
|
70
|
+
(charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React__default["default"].createElement(Divider.Divider, { xsSpacing: (_m = index.theme.spacings) === null || _m === void 0 ? void 0 : _m.xs, lgSpacing: (_o = index.theme.spacings) === null || _o === void 0 ? void 0 : _o.xs })), charges === null || charges === void 0 ? void 0 :
|
|
75
71
|
charges.map(function (charge) {
|
|
76
72
|
var _a, _b;
|
|
77
73
|
return (React__default["default"].createElement(CartSummary_styles.CartLine, { key: charge.name },
|
|
@@ -81,10 +77,10 @@ function CartSummary(_a) {
|
|
|
81
77
|
React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(charge.amount)))));
|
|
82
78
|
}),
|
|
83
79
|
cartSummary.totalDiscount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
|
|
84
|
-
React__default["default"].createElement(typography.BodyText, { color: (
|
|
85
|
-
React__default["default"].createElement(typography.BodyText, { color: (
|
|
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))))),
|
|
86
82
|
React__default["default"].createElement(CartSummary_styles.CartSummaryFooter, null,
|
|
87
|
-
((
|
|
83
|
+
((_r = cartSummary.deliveryFee) === null || _r === void 0 ? void 0 : _r.amount) &&
|
|
88
84
|
cartSummary.deliveryFee.amount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
|
|
89
85
|
React__default["default"].createElement(typography.BodyText, null, shippingLabel),
|
|
90
86
|
React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.deliveryFee.amount)))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -25,8 +25,8 @@ exports.EButtonVariant = void 0;
|
|
|
25
25
|
EButtonVariant[EButtonVariant["ghost"] = 4] = "ghost";
|
|
26
26
|
})(exports.EButtonVariant || (exports.EButtonVariant = {}));
|
|
27
27
|
var CgButton = function (_a) {
|
|
28
|
-
var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children, loading = _a.loading, fullWidth = _a.fullWidth;
|
|
29
|
-
return (React__default["default"].createElement(CgButton_styles.CgButtonContainer, { size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled || loading, fullWidth: fullWidth, onKeyDown: function (event) {
|
|
28
|
+
var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children, loading = _a.loading, fullWidth = _a.fullWidth, buttonRef = _a.buttonRef;
|
|
29
|
+
return (React__default["default"].createElement(CgButton_styles.CgButtonContainer, { ref: buttonRef, size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled || loading, fullWidth: fullWidth, onKeyDown: function (event) {
|
|
30
30
|
if (event.key === 'Enter') {
|
|
31
31
|
onClick && onClick();
|
|
32
32
|
}
|
|
@@ -14,7 +14,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
14
14
|
var disabledBase = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n"], ["\n color: ", ";\n background-color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; });
|
|
15
15
|
var CgPrimary = styled.css(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n ", "\n }\n"], ["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlueHover; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlueActive; }, disabledBase);
|
|
16
16
|
var CgGhost = styled.css(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n color: ", ";\n }\n"], ["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n color: ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; });
|
|
17
|
-
var CgSecondary = styled.css(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n ", "\n border: 1px solid ", ";\n \n"], ["\n ", "\n border: 1px solid ", ";\n \n"])), CgGhost, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.
|
|
17
|
+
var CgSecondary = styled.css(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n ", "\n border: 1px solid ", ";\n \n"], ["\n ", "\n border: 1px solid ", ";\n \n"])), CgGhost, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; });
|
|
18
18
|
var CgTertiary = styled.css(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n ", "\n }\n"], ["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellow; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellowHover; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellowActive; }, disabledBase);
|
|
19
19
|
var CgPrio = styled.css(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n ", "\n }\n"], ["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandPurple; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandPrioHover; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandPrioActive; }, disabledBase);
|
|
20
20
|
var buttonFontSize = function (size, fontSize) {
|
|
@@ -6,10 +6,10 @@ var React = require('react');
|
|
|
6
6
|
var utils = require('@citygross/utils');
|
|
7
7
|
var designTokens = require('@citygross/design-tokens');
|
|
8
8
|
var icons = require('@citygross/icons');
|
|
9
|
-
var Button = require('../Button/Button.js');
|
|
10
9
|
var Logo = require('../Logo/Logo.js');
|
|
11
10
|
var Header_styles = require('./Header.styles.js');
|
|
12
11
|
var HeaderLink = require('../HeaderLink/HeaderLink.js');
|
|
12
|
+
var CgButton = require('../CgButton/CgButton.js');
|
|
13
13
|
|
|
14
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
15
|
|
|
@@ -24,7 +24,7 @@ function Header(_a) {
|
|
|
24
24
|
(logoImage || logOutLabel) && (React__default["default"].createElement(Header_styles.HeaderWrapper, null,
|
|
25
25
|
React__default["default"].createElement(Header_styles.HeaderContainer, { maxWidth: lowerContainerMaxWidth },
|
|
26
26
|
logoImage && React__default["default"].createElement(Logo.Logo, { logoImage: logoImage }),
|
|
27
|
-
logOut && (React__default["default"].createElement(
|
|
27
|
+
logOut && (React__default["default"].createElement(CgButton.CgButton, { onClick: function () { return logOut && logOut(); }, variant: CgButton.EButtonVariant.secondary, size: device.isMobile ? CgButton.ECgButtonSize.medium : CgButton.ECgButtonSize.large }, logOutLabel))))),
|
|
28
28
|
children && React__default["default"].createElement(Header_styles.MenuContainer, null, children)));
|
|
29
29
|
}
|
|
30
30
|
|
|
@@ -18,12 +18,16 @@ function QuantitySelector(_a) {
|
|
|
18
18
|
React__default["default"].createElement(QuantitySelector_styles.QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
|
|
19
19
|
React__default["default"].createElement(QuantitySelector_styles.IconContainer, null,
|
|
20
20
|
React__default["default"].createElement(icons.Icons.Minus, { width: 16, height: 16 }))),
|
|
21
|
-
React__default["default"].createElement(QuantitySelector_styles.QuantityInput, { customFocus: customFocus, max: maxValue, value: value, ref: inputRef, type: "number", onMouseDown: function () {
|
|
21
|
+
React__default["default"].createElement(QuantitySelector_styles.QuantityInput, { customFocus: customFocus, max: maxValue, value: value, ref: inputRef, type: "number", pattern: "[0-9]*", onMouseDown: function () {
|
|
22
22
|
setCustomFocus(true);
|
|
23
23
|
}, onClick: function () {
|
|
24
24
|
if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
|
|
25
25
|
inputRef.current.select();
|
|
26
26
|
}
|
|
27
|
+
}, onFocus: function () {
|
|
28
|
+
if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
|
|
29
|
+
inputRef.current.select();
|
|
30
|
+
}
|
|
27
31
|
}, onKeyDown: function (event) {
|
|
28
32
|
if (event.key === 'Enter' || event.key === 'Escape') {
|
|
29
33
|
event.currentTarget.blur();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -12,13 +12,13 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
12
12
|
|
|
13
13
|
var quantityButton = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n opacity: 0.5;\n cursor: default;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n opacity: 0.5;\n cursor: default;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; });
|
|
14
14
|
var border = styled.css(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n border: 1px solid ", ";\n"], ["\n border: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; });
|
|
15
|
-
var borderRadiusLeft = styled.css(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; });
|
|
16
|
-
var borderRadiusRight = styled.css(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"], ["\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; });
|
|
15
|
+
var borderRadiusLeft = styled.css(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n border-right: none;\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n border-right: none;\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; });
|
|
16
|
+
var borderRadiusRight = styled.css(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n border-left: none;\n"], ["\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n border-left: none;\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; });
|
|
17
17
|
var QuantitySelectorContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: grid;\n grid-template-columns: 40px 48px 40px;\n height: 40px;\n background: ", ";\n width: 128px;\n\n @media (min-width: ", "px) {\n grid-template-columns: 32px 40px 32px;\n width: 104px;\n height: 32px;\n }\n"], ["\n display: grid;\n grid-template-columns: 40px 48px 40px;\n height: 40px;\n background: ", ";\n width: 128px;\n\n @media (min-width: ", "px) {\n grid-template-columns: 32px 40px 32px;\n width: 104px;\n height: 32px;\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.transparent; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
18
18
|
var QuantityButton = styled__default["default"].button(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n ", "\n ", "\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, quantityButton, border, function (props) {
|
|
19
19
|
return props.direction === 'left' ? borderRadiusLeft : borderRadiusRight;
|
|
20
20
|
});
|
|
21
|
-
var QuantityInput = styled__default["default"].input(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n ", "\n z-index: 1;\n
|
|
21
|
+
var QuantityInput = styled__default["default"].input(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n ", "\n z-index: 1;\n text-align: center;\n border-radius: 0;\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &:focus-visible {\n border: 1px solid ", ";\n }\n outline: none;\n ", "\n"], ["\n ", "\n z-index: 1;\n text-align: center;\n border-radius: 0;\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &:focus-visible {\n border: 1px solid ", ";\n }\n outline: none;\n ", "\n"])), border, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertBlue; }, function (props) { return !props.customFocus && global_styles.focusVisible; });
|
|
22
22
|
var IconContainer = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n display: grid;\n place-content: center;\n"], ["\n display: grid;\n place-content: center;\n"])));
|
|
23
23
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
24
24
|
|
|
@@ -15,6 +15,7 @@ require('@citygross/design-tokens');
|
|
|
15
15
|
require('../Logo/Logo.styles.js');
|
|
16
16
|
require('../Header/Header.styles.js');
|
|
17
17
|
require('../HeaderLink/HeaderLink.styles.js');
|
|
18
|
+
require('../CgButton/CgButton.js');
|
|
18
19
|
require('../BackgroundImage/BackgroundImage.styles.js');
|
|
19
20
|
require('../Badge/Badge.styles.js');
|
|
20
21
|
require('../../../../_virtual/_tslib.js');
|
|
@@ -91,7 +92,6 @@ require('../ZipCodeInput/ZipCodeInput.styles.js');
|
|
|
91
92
|
require('../MaxHeightText/styles.js');
|
|
92
93
|
require('../ToolTipDialog/ToolTipDialog.styles.js');
|
|
93
94
|
require('../CartSubTotal/CartSubTotal.js');
|
|
94
|
-
require('../CgButton/CgButton.js');
|
|
95
95
|
require('../CouponCode/CouponCode.js');
|
|
96
96
|
require('../CartCardLabel/CartCardLabel.styles.js');
|
|
97
97
|
require('../CartCard/CartCard.styles.js');
|
|
@@ -11,6 +11,7 @@ import '@citygross/design-tokens';
|
|
|
11
11
|
import '../Logo/Logo.styles.js';
|
|
12
12
|
import '../Header/Header.styles.js';
|
|
13
13
|
import '../HeaderLink/HeaderLink.styles.js';
|
|
14
|
+
import '../CgButton/CgButton.js';
|
|
14
15
|
import '../BackgroundImage/BackgroundImage.styles.js';
|
|
15
16
|
import '../Badge/Badge.styles.js';
|
|
16
17
|
import '../../../../_virtual/_tslib.js';
|
|
@@ -87,7 +88,6 @@ import '../ZipCodeInput/ZipCodeInput.styles.js';
|
|
|
87
88
|
import '../MaxHeightText/styles.js';
|
|
88
89
|
import '../ToolTipDialog/ToolTipDialog.styles.js';
|
|
89
90
|
import '../CartSubTotal/CartSubTotal.js';
|
|
90
|
-
import '../CgButton/CgButton.js';
|
|
91
91
|
import '../CouponCode/CouponCode.js';
|
|
92
92
|
import '../CartCardLabel/CartCardLabel.styles.js';
|
|
93
93
|
import '../CartCard/CartCard.styles.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import FallbackIcon from './assets/fallback_grocery.svg.js';
|
|
3
|
-
import { CartCardContainer, CartCardImage, CartCardInner, CartCardInnerTop, CartCardInfo, MarkingsContainer, CartCardTitle, CartCardPriceContainer, PriceContainer, MaxWarning } from './CartCard.styles.js';
|
|
3
|
+
import { CartCardContainer, CartCardImage, CartCardInner, CartCardInnerTop, CartCardInfo, MarkingsContainer, CartCardTitle, CartCardDelete, CartCardPriceContainer, PriceContainer, MaxWarning } from './CartCard.styles.js';
|
|
4
4
|
import { Icons } from '@citygross/icons';
|
|
5
5
|
import { CgButton, EButtonVariant } from '../CgButton/CgButton.js';
|
|
6
6
|
|
|
@@ -14,7 +14,7 @@ var CartCard = function (_a) {
|
|
|
14
14
|
markings && (React.createElement(MarkingsContainer, null, markings)),
|
|
15
15
|
title && (React.createElement(CartCardTitle, { titleLineClamp: titleLineClamp }, title)),
|
|
16
16
|
description && description),
|
|
17
|
-
showDelete && (React.createElement(
|
|
17
|
+
showDelete && (React.createElement(CartCardDelete, null,
|
|
18
18
|
React.createElement(CgButton, { onClick: onDelete, variant: EButtonVariant.secondary, icon: React.createElement(Icons.Trash, { width: 16, height: 16 }) })))),
|
|
19
19
|
secondaryDescription && secondaryDescription,
|
|
20
20
|
React.createElement(CartCardPriceContainer, null,
|
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled, { keyframes } from 'styled-components';
|
|
3
|
-
import { focusVisible } from '../../shared/global.styles.js';
|
|
4
3
|
|
|
5
4
|
var CartCardImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 48px;\n height: 48px;\n object-fit: contain;\n"], ["\n width: 48px;\n height: 48px;\n object-fit: contain;\n"])));
|
|
6
5
|
var CartCardContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n align-items: center;\n width: 100%;\n"], ["\n display: flex;\n gap: ", "px;\n align-items: center;\n width: 100%;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
7
6
|
var CartCardInfo = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
8
|
-
var CartCardInnerTop = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
7
|
+
var CartCardInnerTop = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n gap: ", "px;\n"], ["\n display: flex;\n justify-content: space-between;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
9
8
|
var CartCardInner = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
10
9
|
var CartCardPriceContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: ", "px;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
10
|
+
var MaxWarningAnimate = keyframes(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n0% { \n opacity: 1;\n display: block;\n }\n 90%{\n opacity: 1;\n display: block;\n }\n100% {\n opacity: 0;\n display: none;\n}\n"], ["\n0% { \n opacity: 1;\n display: block;\n }\n 90%{\n opacity: 1;\n display: block;\n }\n100% {\n opacity: 0;\n display: none;\n}\n"])));
|
|
11
|
+
var PriceContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: relative;\n flex: 1;\n"], ["\n position: relative;\n flex: 1;\n"])));
|
|
12
|
+
var MaxWarning = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: ", ";\n animation: ", " 2s forwards;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: ", ";\n font-size: ", "px;\n"], ["\n color: ", ";\n animation: ", " 2s forwards;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: ", ";\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertRed; }, MaxWarningAnimate, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
|
|
13
|
+
var MarkingsContainer = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n margin-bottom: ", "px;\n"], ["\n margin-bottom: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
|
|
14
|
+
var CartCardTitle = styled.p(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", "px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n"], ["\n font-weight: ", ";\n font-size: ", "px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.medium; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { return props.titleLineClamp; });
|
|
15
|
+
var CartCardDelete = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n button {\n height: 40px;\n width: 40px;\n }\n @media (min-width: ", "px) {\n button {\n height: unset;\n width: unset;\n }\n }\n"], ["\n button {\n height: 40px;\n width: 40px;\n }\n @media (min-width: ", "px) {\n button {\n height: unset;\n width: unset;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
17
16
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
18
17
|
|
|
19
|
-
export { CartCardContainer, CartCardImage, CartCardInfo, CartCardInner, CartCardInnerTop, CartCardPriceContainer, CartCardTitle, MarkingsContainer, MaxWarning, PriceContainer };
|
|
18
|
+
export { CartCardContainer, CartCardDelete, CartCardImage, CartCardInfo, CartCardInner, CartCardInnerTop, CartCardPriceContainer, CartCardTitle, MarkingsContainer, MaxWarning, PriceContainer };
|
|
20
19
|
//# sourceMappingURL=CartCard.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartCard.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartCard.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
|
|
@@ -24,8 +24,8 @@ var calculateSummaryLine = function (items) {
|
|
|
24
24
|
return sumOfItems;
|
|
25
25
|
};
|
|
26
26
|
function CartSummary(_a) {
|
|
27
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
28
|
-
var
|
|
27
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
28
|
+
var _s = _a.saveLabel, saveLabel = _s === void 0 ? 'rabatter' : _s, _t = _a.shippingLabel, shippingLabel = _t === void 0 ? 'frakt' : _t, _u = _a.totalLabel, totalLabel = _u === void 0 ? 'totalt' : _u, _v = _a.taxLabel, taxLabel = _v === void 0 ? 'varav moms' : _v, cartSummary = __rest(_a, ["saveLabel", "shippingLabel", "totalLabel", "taxLabel"]);
|
|
29
29
|
var charges = (_b = cartSummary.charges) !== null && _b !== void 0 ? _b : [];
|
|
30
30
|
var bags = (_c = cartSummary.bags) !== null && _c !== void 0 ? _c : [];
|
|
31
31
|
var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
|
|
@@ -39,31 +39,27 @@ function CartSummary(_a) {
|
|
|
39
39
|
React.createElement(H3, null, cartSummary.title),
|
|
40
40
|
React.createElement(BodyText, null, cartSummary.subTitle))),
|
|
41
41
|
React.createElement(CartSummaryHeader, { title: cartSummary.title },
|
|
42
|
-
groceries.length > 0 && (React.createElement(CartLine, null,
|
|
42
|
+
((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
43
|
React.createElement(BodyText, null,
|
|
44
|
-
"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
(cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0 && (React.createElement(CartLine, null,
|
|
51
|
-
React.createElement(BodyText, null,
|
|
52
|
-
"catering ",
|
|
53
|
-
sumOfCateredMeals.quantity,
|
|
54
|
-
" st"),
|
|
44
|
+
"varor",
|
|
45
|
+
' ',
|
|
46
|
+
((_f = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _f !== void 0 ? _f : 0) +
|
|
47
|
+
((_g = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _g !== void 0 ? _g : 0),
|
|
48
|
+
' ',
|
|
49
|
+
"st"),
|
|
55
50
|
React.createElement(AmountWrapper, null,
|
|
56
|
-
|
|
57
|
-
|
|
51
|
+
(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
|
+
((_k = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _k !== void 0 ? _k : 0)))),
|
|
53
|
+
React.createElement(H3, { fontWeight: 'semiBold' }, formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
|
|
58
54
|
bags.length > 0 && (React.createElement(CartLine, null,
|
|
59
55
|
React.createElement(BodyText, null,
|
|
60
56
|
"matkassar ",
|
|
61
57
|
sumOfBags.quantity,
|
|
62
58
|
" st"),
|
|
63
59
|
React.createElement(AmountWrapper, null,
|
|
64
|
-
sumOfBags.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (
|
|
60
|
+
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))),
|
|
65
61
|
React.createElement(H3, { fontWeight: 'semiBold' }, formatPrice(sumOfBags.amount))))),
|
|
66
|
-
(charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React.createElement(Divider, { xsSpacing: (
|
|
62
|
+
(charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React.createElement(Divider, { xsSpacing: (_m = theme_1.spacings) === null || _m === void 0 ? void 0 : _m.xs, lgSpacing: (_o = theme_1.spacings) === null || _o === void 0 ? void 0 : _o.xs })), charges === null || charges === void 0 ? void 0 :
|
|
67
63
|
charges.map(function (charge) {
|
|
68
64
|
var _a, _b;
|
|
69
65
|
return (React.createElement(CartLine, { key: charge.name },
|
|
@@ -73,10 +69,10 @@ function CartSummary(_a) {
|
|
|
73
69
|
React.createElement(BodyText, null, formatPrice(charge.amount)))));
|
|
74
70
|
}),
|
|
75
71
|
cartSummary.totalDiscount > 0 && (React.createElement(CartLine, null,
|
|
76
|
-
React.createElement(BodyText, { color: (
|
|
77
|
-
React.createElement(BodyText, { color: (
|
|
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))))),
|
|
78
74
|
React.createElement(CartSummaryFooter, null,
|
|
79
|
-
((
|
|
75
|
+
((_r = cartSummary.deliveryFee) === null || _r === void 0 ? void 0 : _r.amount) &&
|
|
80
76
|
cartSummary.deliveryFee.amount > 0 && (React.createElement(CartLine, null,
|
|
81
77
|
React.createElement(BodyText, null, shippingLabel),
|
|
82
78
|
React.createElement(BodyText, null, formatPrice(cartSummary.deliveryFee.amount)))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartSummary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -17,8 +17,8 @@ var EButtonVariant;
|
|
|
17
17
|
EButtonVariant[EButtonVariant["ghost"] = 4] = "ghost";
|
|
18
18
|
})(EButtonVariant || (EButtonVariant = {}));
|
|
19
19
|
var CgButton = function (_a) {
|
|
20
|
-
var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children, loading = _a.loading, fullWidth = _a.fullWidth;
|
|
21
|
-
return (React.createElement(CgButtonContainer, { size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled || loading, fullWidth: fullWidth, onKeyDown: function (event) {
|
|
20
|
+
var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children, loading = _a.loading, fullWidth = _a.fullWidth, buttonRef = _a.buttonRef;
|
|
21
|
+
return (React.createElement(CgButtonContainer, { ref: buttonRef, size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled || loading, fullWidth: fullWidth, onKeyDown: function (event) {
|
|
22
22
|
if (event.key === 'Enter') {
|
|
23
23
|
onClick && onClick();
|
|
24
24
|
}
|
|
@@ -6,7 +6,7 @@ import { EButtonVariant, ECgButtonSize } from './CgButton.js';
|
|
|
6
6
|
var disabledBase = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n"], ["\n color: ", ";\n background-color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; });
|
|
7
7
|
var CgPrimary = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n ", "\n }\n"], ["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlueHover; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlueActive; }, disabledBase);
|
|
8
8
|
var CgGhost = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n color: ", ";\n }\n"], ["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n color: ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; });
|
|
9
|
-
var CgSecondary = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n border: 1px solid ", ";\n \n"], ["\n ", "\n border: 1px solid ", ";\n \n"])), CgGhost, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.
|
|
9
|
+
var CgSecondary = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n border: 1px solid ", ";\n \n"], ["\n ", "\n border: 1px solid ", ";\n \n"])), CgGhost, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; });
|
|
10
10
|
var CgTertiary = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n ", "\n }\n"], ["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellow; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellowHover; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellowActive; }, disabledBase);
|
|
11
11
|
var CgPrio = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n ", "\n }\n"], ["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n &:disabled {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandPurple; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandPrioHover; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandPrioActive; }, disabledBase);
|
|
12
12
|
var buttonFontSize = function (size, fontSize) {
|
|
@@ -2,10 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import { useDetectDevice } from '@citygross/utils';
|
|
3
3
|
import { theme } from '@citygross/design-tokens';
|
|
4
4
|
import { Icons } from '@citygross/icons';
|
|
5
|
-
import { Button } from '../Button/Button.js';
|
|
6
5
|
import { Logo } from '../Logo/Logo.js';
|
|
7
6
|
import { Wrapper, HeaderWrapper, HeaderContainer, MenuContainer } from './Header.styles.js';
|
|
8
7
|
import { HeaderLink } from '../HeaderLink/HeaderLink.js';
|
|
8
|
+
import { CgButton, EButtonVariant, ECgButtonSize } from '../CgButton/CgButton.js';
|
|
9
9
|
|
|
10
10
|
function Header(_a) {
|
|
11
11
|
var _b, _c;
|
|
@@ -16,7 +16,7 @@ function Header(_a) {
|
|
|
16
16
|
(logoImage || logOutLabel) && (React.createElement(HeaderWrapper, null,
|
|
17
17
|
React.createElement(HeaderContainer, { maxWidth: lowerContainerMaxWidth },
|
|
18
18
|
logoImage && React.createElement(Logo, { logoImage: logoImage }),
|
|
19
|
-
logOut && (React.createElement(
|
|
19
|
+
logOut && (React.createElement(CgButton, { onClick: function () { return logOut && logOut(); }, variant: EButtonVariant.secondary, size: device.isMobile ? ECgButtonSize.medium : ECgButtonSize.large }, logOutLabel))))),
|
|
20
20
|
children && React.createElement(MenuContainer, null, children)));
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -10,12 +10,16 @@ function QuantitySelector(_a) {
|
|
|
10
10
|
React.createElement(QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
|
|
11
11
|
React.createElement(IconContainer, null,
|
|
12
12
|
React.createElement(Icons.Minus, { width: 16, height: 16 }))),
|
|
13
|
-
React.createElement(QuantityInput, { customFocus: customFocus, max: maxValue, value: value, ref: inputRef, type: "number", onMouseDown: function () {
|
|
13
|
+
React.createElement(QuantityInput, { customFocus: customFocus, max: maxValue, value: value, ref: inputRef, type: "number", pattern: "[0-9]*", onMouseDown: function () {
|
|
14
14
|
setCustomFocus(true);
|
|
15
15
|
}, onClick: function () {
|
|
16
16
|
if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
|
|
17
17
|
inputRef.current.select();
|
|
18
18
|
}
|
|
19
|
+
}, onFocus: function () {
|
|
20
|
+
if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
|
|
21
|
+
inputRef.current.select();
|
|
22
|
+
}
|
|
19
23
|
}, onKeyDown: function (event) {
|
|
20
24
|
if (event.key === 'Enter' || event.key === 'Escape') {
|
|
21
25
|
event.currentTarget.blur();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -4,13 +4,13 @@ import { focusVisible } from '../../shared/global.styles.js';
|
|
|
4
4
|
|
|
5
5
|
var quantityButton = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n opacity: 0.5;\n cursor: default;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n opacity: 0.5;\n cursor: default;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; });
|
|
6
6
|
var border = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: 1px solid ", ";\n"], ["\n border: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; });
|
|
7
|
-
var borderRadiusLeft = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; });
|
|
8
|
-
var borderRadiusRight = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"], ["\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; });
|
|
7
|
+
var borderRadiusLeft = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n border-right: none;\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n border-right: none;\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; });
|
|
8
|
+
var borderRadiusRight = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n border-left: none;\n"], ["\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n border-left: none;\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; });
|
|
9
9
|
var QuantitySelectorContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: 40px 48px 40px;\n height: 40px;\n background: ", ";\n width: 128px;\n\n @media (min-width: ", "px) {\n grid-template-columns: 32px 40px 32px;\n width: 104px;\n height: 32px;\n }\n"], ["\n display: grid;\n grid-template-columns: 40px 48px 40px;\n height: 40px;\n background: ", ";\n width: 128px;\n\n @media (min-width: ", "px) {\n grid-template-columns: 32px 40px 32px;\n width: 104px;\n height: 32px;\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.transparent; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
10
10
|
var QuantityButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n ", "\n ", "\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, quantityButton, border, function (props) {
|
|
11
11
|
return props.direction === 'left' ? borderRadiusLeft : borderRadiusRight;
|
|
12
12
|
});
|
|
13
|
-
var QuantityInput = styled.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n z-index: 1;\n
|
|
13
|
+
var QuantityInput = styled.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n z-index: 1;\n text-align: center;\n border-radius: 0;\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &:focus-visible {\n border: 1px solid ", ";\n }\n outline: none;\n ", "\n"], ["\n ", "\n z-index: 1;\n text-align: center;\n border-radius: 0;\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &:focus-visible {\n border: 1px solid ", ";\n }\n outline: none;\n ", "\n"])), border, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertBlue; }, function (props) { return !props.customFocus && focusVisible; });
|
|
14
14
|
var IconContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: grid;\n place-content: center;\n"], ["\n display: grid;\n place-content: center;\n"])));
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
16
16
|
|
|
@@ -11,6 +11,7 @@ import '@citygross/design-tokens';
|
|
|
11
11
|
import '../Logo/Logo.styles.js';
|
|
12
12
|
import '../Header/Header.styles.js';
|
|
13
13
|
import '../HeaderLink/HeaderLink.styles.js';
|
|
14
|
+
import '../CgButton/CgButton.js';
|
|
14
15
|
import '../BackgroundImage/BackgroundImage.styles.js';
|
|
15
16
|
import '../Badge/Badge.styles.js';
|
|
16
17
|
import '../../../../_virtual/_tslib.js';
|
|
@@ -87,7 +88,6 @@ import '../ZipCodeInput/ZipCodeInput.styles.js';
|
|
|
87
88
|
import '../MaxHeightText/styles.js';
|
|
88
89
|
import '../ToolTipDialog/ToolTipDialog.styles.js';
|
|
89
90
|
import '../CartSubTotal/CartSubTotal.js';
|
|
90
|
-
import '../CgButton/CgButton.js';
|
|
91
91
|
import '../CouponCode/CouponCode.js';
|
|
92
92
|
import '../CartCardLabel/CartCardLabel.styles.js';
|
|
93
93
|
import '../CartCard/CartCard.styles.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.18",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -69,12 +69,12 @@
|
|
|
69
69
|
"@citygross/icons": "^0.1.10",
|
|
70
70
|
"@citygross/react-use-bg-wizard": "^0.0.8",
|
|
71
71
|
"@citygross/typography": "^0.0.89",
|
|
72
|
-
"@citygross/utils": "^0.0.
|
|
72
|
+
"@citygross/utils": "^0.0.36",
|
|
73
73
|
"framer-motion": "^4.1.17",
|
|
74
74
|
"moment": "^2.29.1",
|
|
75
75
|
"react-loading-skeleton": "^2.2.0",
|
|
76
76
|
"react-slick": "^0.30.1",
|
|
77
77
|
"slick-carousel": "^1.8.1"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "46a5bf1a5eea2d9dd6146f8e61b7aeb31fe43a70"
|
|
80
80
|
}
|