@citygross/components 0.8.167 → 0.8.169
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/CartSubTotal/CartSubTotal.d.ts +4 -3
- package/build/@types/components/CartSubTotal/CartSubTotal.styles.d.ts +3 -7
- package/build/@types/components/ToolTipDialog/ToolTipDialog.d.ts +3 -2
- package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.js +6 -5
- package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.js.map +1 -1
- package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.styles.js +15 -8
- package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.styles.js.map +1 -1
- package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.js +27 -4
- package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.js.map +1 -1
- package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.styles.js +31 -7
- package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.styles.js.map +1 -1
- package/build/es/components/src/components/CartSubTotal/CartSubTotal.js +6 -5
- package/build/es/components/src/components/CartSubTotal/CartSubTotal.js.map +1 -1
- package/build/es/components/src/components/CartSubTotal/CartSubTotal.styles.js +15 -8
- package/build/es/components/src/components/CartSubTotal/CartSubTotal.styles.js.map +1 -1
- package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.js +29 -6
- package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.js.map +1 -1
- package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.styles.js +31 -7
- package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare type TCartSubTotal = {
|
|
3
3
|
children?: React.ReactNode;
|
|
4
|
-
|
|
5
|
-
fromPriceLabel?: string;
|
|
4
|
+
fromPrice?: boolean;
|
|
6
5
|
info?: React.ReactNode;
|
|
7
6
|
infoOnBottom?: boolean;
|
|
7
|
+
label: string;
|
|
8
8
|
priceColor?: string;
|
|
9
|
+
tooltipAriaLabel?: string;
|
|
9
10
|
type?: ECartSubTotalTypes;
|
|
10
11
|
value: number;
|
|
11
12
|
};
|
|
@@ -13,4 +14,4 @@ export declare enum ECartSubTotalTypes {
|
|
|
13
14
|
items = "items",
|
|
14
15
|
charges = "charges"
|
|
15
16
|
}
|
|
16
|
-
export declare const CartSubTotal: ({ children,
|
|
17
|
+
export declare const CartSubTotal: ({ children, fromPrice, info, infoOnBottom, label, priceColor, tooltipAriaLabel, type, value }: TCartSubTotal) => JSX.Element;
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
declare type TCartSubTotalContainer =
|
|
3
|
-
type?: ECartSubTotalTypes;
|
|
4
|
-
};
|
|
5
|
-
declare type TCartSubTotalPrice = {
|
|
6
|
-
priceColor?: string;
|
|
7
|
-
};
|
|
1
|
+
import { TCartSubTotal } from './CartSubTotal';
|
|
2
|
+
declare type TCartSubTotalContainer = Pick<TCartSubTotal, 'type'>;
|
|
8
3
|
export declare const CartSubTotalContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCartSubTotalContainer, never>;
|
|
9
4
|
export declare const SubTotalLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
5
|
export declare const ToolTipButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
declare type TCartSubTotalPrice = Pick<TCartSubTotal, 'priceColor'>;
|
|
11
7
|
export declare const Price: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCartSubTotalPrice, never>;
|
|
12
8
|
export {};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare type TToolTipDialog = {
|
|
3
|
+
id?: string;
|
|
3
4
|
info: React.ReactNode;
|
|
4
|
-
toggle: () => void;
|
|
5
5
|
onBottom?: boolean;
|
|
6
|
+
toggle: () => void;
|
|
6
7
|
};
|
|
7
|
-
export declare const ToolTipDialog: ({
|
|
8
|
+
export declare const ToolTipDialog: ({ id, info, onBottom, toggle }: TToolTipDialog) => JSX.Element;
|
|
@@ -20,9 +20,10 @@ exports.ECartSubTotalTypes = void 0;
|
|
|
20
20
|
})(exports.ECartSubTotalTypes || (exports.ECartSubTotalTypes = {}));
|
|
21
21
|
var CartSubTotal = function (_a) {
|
|
22
22
|
var _b;
|
|
23
|
-
var children = _a.children,
|
|
23
|
+
var children = _a.children, fromPrice = _a.fromPrice, info = _a.info, infoOnBottom = _a.infoOnBottom, label = _a.label, _c = _a.priceColor, priceColor = _c === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest : _c, tooltipAriaLabel = _a.tooltipAriaLabel, type = _a.type, value = _a.value;
|
|
24
24
|
var formattedPrice = utils.formatPriceWithNoZero(value);
|
|
25
25
|
var _d = React.useState(false), infoOpen = _d[0], setInfoOpen = _d[1];
|
|
26
|
+
var tooltipId = "tooltip-".concat(label.toLowerCase().replace(/ /g, '-'));
|
|
26
27
|
var toggleInfoOpen = function () {
|
|
27
28
|
setInfoOpen(!infoOpen);
|
|
28
29
|
};
|
|
@@ -30,12 +31,12 @@ var CartSubTotal = function (_a) {
|
|
|
30
31
|
React__default["default"].createElement(CartSubTotal_styles.SubTotalLabel, null,
|
|
31
32
|
label,
|
|
32
33
|
children,
|
|
33
|
-
React__default["default"].createElement(CartSubTotal_styles.ToolTipButton, { onClick: toggleInfoOpen },
|
|
34
|
-
React__default["default"].createElement(icons.Icons.Info, { height: 16, width: 16 }))),
|
|
34
|
+
React__default["default"].createElement(CartSubTotal_styles.ToolTipButton, { "aria-expanded": infoOpen, "aria-label": tooltipAriaLabel, "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen },
|
|
35
|
+
React__default["default"].createElement(icons.Icons.Info, { "aria-hidden": "true", height: 16, width: 16 }))),
|
|
35
36
|
React__default["default"].createElement(CartSubTotal_styles.Price, { priceColor: priceColor }, (value !== 0 && !value) || isNaN(value)
|
|
36
37
|
? '-'
|
|
37
|
-
: "".concat(
|
|
38
|
-
infoOpen && (React__default["default"].createElement(ToolTipDialog.ToolTipDialog, {
|
|
38
|
+
: "".concat(fromPrice ? 'Från ' : '').concat(formattedPrice, " kr")),
|
|
39
|
+
infoOpen && (React__default["default"].createElement(ToolTipDialog.ToolTipDialog, { id: tooltipId, info: info, onBottom: infoOnBottom, toggle: toggleInfoOpen })))) : (React__default["default"].createElement(CartSubTotal_styles.CartSubTotalContainer, { type: type },
|
|
39
40
|
React__default["default"].createElement(CartSubTotal_styles.SubTotalLabel, null,
|
|
40
41
|
label,
|
|
41
42
|
children),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartSubTotal.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartSubTotal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -5,21 +5,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _tslib = require('../../../../_virtual/_tslib.js');
|
|
6
6
|
var styled = require('styled-components');
|
|
7
7
|
var CartSubTotal = require('./CartSubTotal.js');
|
|
8
|
-
var global_styles = require('../../shared/global.styles.js');
|
|
9
8
|
|
|
10
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
10
|
|
|
12
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
13
12
|
|
|
14
|
-
var CartSubTotalContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
var CartSubTotalContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: space-between;\n position: relative;\n ", "\n"], ["\n display: flex;\n gap: ", "px;\n justify-content: space-between;\n position: relative;\n ", "\n"])), function (_a) {
|
|
14
|
+
var _b;
|
|
15
|
+
var theme = _a.theme;
|
|
16
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
|
|
17
|
+
}, function (_a) {
|
|
18
|
+
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19
|
+
var theme = _a.theme, type = _a.type;
|
|
20
|
+
return type === CartSubTotal.ECartSubTotalTypes.items
|
|
21
|
+
? "\n font-size: ".concat((_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3, "px;\n font-weight: ").concat((_e = (_d = theme.typography) === null || _d === void 0 ? void 0 : _d.weight) === null || _e === void 0 ? void 0 : _e.medium, ";\n ")
|
|
22
|
+
: "\n font-size: ".concat((_g = (_f = theme.typography) === null || _f === void 0 ? void 0 : _f.size) === null || _g === void 0 ? void 0 : _g.s2, "px;\n font-weight: ").concat((_j = (_h = theme.typography) === null || _h === void 0 ? void 0 : _h.weight) === null || _j === void 0 ? void 0 : _j.regular, ";\n ");
|
|
19
23
|
});
|
|
20
24
|
var SubTotalLabel = styled__default["default"].div(templateObject_2 || (templateObject_2 = _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.xxs2; });
|
|
21
|
-
var ToolTipButton = styled__default["default"].button(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n
|
|
22
|
-
var Price = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (
|
|
25
|
+
var ToolTipButton = styled__default["default"].button(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"], ["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"])));
|
|
26
|
+
var Price = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
27
|
+
var priceColor = _a.priceColor;
|
|
28
|
+
return priceColor;
|
|
29
|
+
});
|
|
23
30
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
24
31
|
|
|
25
32
|
exports.CartSubTotalContainer = CartSubTotalContainer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartSubTotal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartSubTotal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -12,13 +12,36 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
|
|
14
14
|
var ToolTipDialog = function (_a) {
|
|
15
|
-
var info = _a.info,
|
|
15
|
+
var id = _a.id, info = _a.info, onBottom = _a.onBottom, toggle = _a.toggle;
|
|
16
16
|
var infoRef = React.useRef(null);
|
|
17
|
+
var isOpenRef = React.useRef(true);
|
|
17
18
|
utils.useOutsideClick(infoRef, function () { return toggle(); });
|
|
18
|
-
|
|
19
|
+
React.useEffect(function () {
|
|
20
|
+
var focusTrapCleanup;
|
|
21
|
+
if (infoRef.current) {
|
|
22
|
+
focusTrapCleanup = utils.focusTrap({
|
|
23
|
+
exitFunction: toggle,
|
|
24
|
+
ref: infoRef
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
var handleKeyDown = function (event) {
|
|
28
|
+
if (event.key === 'Escape' && isOpenRef.current && infoRef.current) {
|
|
29
|
+
event.stopPropagation();
|
|
30
|
+
isOpenRef.current = false;
|
|
31
|
+
toggle();
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
document.addEventListener('keydown', handleKeyDown, true);
|
|
35
|
+
return function () {
|
|
36
|
+
isOpenRef.current = false;
|
|
37
|
+
document.removeEventListener('keydown', handleKeyDown, true);
|
|
38
|
+
focusTrapCleanup === null || focusTrapCleanup === void 0 ? void 0 : focusTrapCleanup();
|
|
39
|
+
};
|
|
40
|
+
}, [toggle]);
|
|
41
|
+
return (React__default["default"].createElement(ToolTipDialog_styles.DialogContainer, { "aria-live": "polite", id: id, onBottom: onBottom, ref: infoRef, role: "tooltip" },
|
|
19
42
|
info,
|
|
20
|
-
React__default["default"].createElement(ToolTipDialog_styles.DialogClose, { onClick: toggle },
|
|
21
|
-
React__default["default"].createElement(icons.Icons.Cross, {
|
|
43
|
+
React__default["default"].createElement(ToolTipDialog_styles.DialogClose, { "aria-label": "St\u00E4ng", onClick: toggle },
|
|
44
|
+
React__default["default"].createElement(icons.Icons.Cross, { "aria-hidden": "true", color: "white", height: 20, width: 20 }))));
|
|
22
45
|
};
|
|
23
46
|
|
|
24
47
|
exports.ToolTipDialog = ToolTipDialog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolTipDialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolTipDialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -4,19 +4,43 @@ 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
|
|
|
11
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
11
|
|
|
13
|
-
var DialogContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
var DialogContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: ", "px;\n font-size: ", "px;\n padding: ", "px;\n position: absolute;\n\n ", "\n"], ["\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: ", "px;\n font-size: ", "px;\n padding: ", "px;\n position: absolute;\n\n ", "\n"])), function (_a) {
|
|
13
|
+
var _b;
|
|
14
|
+
var theme = _a.theme;
|
|
15
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black;
|
|
16
|
+
}, function (_a) {
|
|
17
|
+
var _b;
|
|
18
|
+
var theme = _a.theme;
|
|
19
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
|
|
20
|
+
}, function (_a) {
|
|
21
|
+
var _b;
|
|
22
|
+
var theme = _a.theme;
|
|
23
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
24
|
+
}, function (_a) {
|
|
25
|
+
var _b;
|
|
26
|
+
var theme = _a.theme;
|
|
27
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs2;
|
|
28
|
+
}, function (_a) {
|
|
29
|
+
var _b;
|
|
30
|
+
var theme = _a.theme;
|
|
31
|
+
return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size.s2;
|
|
32
|
+
}, function (_a) {
|
|
33
|
+
var _b;
|
|
34
|
+
var theme = _a.theme;
|
|
35
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2;
|
|
36
|
+
}, function (_a) {
|
|
37
|
+
var _b, _c;
|
|
38
|
+
var onBottom = _a.onBottom, theme = _a.theme;
|
|
39
|
+
return onBottom
|
|
40
|
+
? "\n margin-top: ".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs2, "px;\n top: 100%;\n ")
|
|
41
|
+
: "\n margin-bottom: ".concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xxs2, "px;\n bottom: 100%;\n ");
|
|
18
42
|
});
|
|
19
|
-
var DialogClose = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n
|
|
43
|
+
var DialogClose = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"], ["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"])));
|
|
20
44
|
var templateObject_1, templateObject_2;
|
|
21
45
|
|
|
22
46
|
exports.DialogClose = DialogClose;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolTipDialog.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolTipDialog.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -12,9 +12,10 @@ var ECartSubTotalTypes;
|
|
|
12
12
|
})(ECartSubTotalTypes || (ECartSubTotalTypes = {}));
|
|
13
13
|
var CartSubTotal = function (_a) {
|
|
14
14
|
var _b;
|
|
15
|
-
var children = _a.children,
|
|
15
|
+
var children = _a.children, fromPrice = _a.fromPrice, info = _a.info, infoOnBottom = _a.infoOnBottom, label = _a.label, _c = _a.priceColor, priceColor = _c === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest : _c, tooltipAriaLabel = _a.tooltipAriaLabel, type = _a.type, value = _a.value;
|
|
16
16
|
var formattedPrice = formatPriceWithNoZero(value);
|
|
17
17
|
var _d = useState(false), infoOpen = _d[0], setInfoOpen = _d[1];
|
|
18
|
+
var tooltipId = "tooltip-".concat(label.toLowerCase().replace(/ /g, '-'));
|
|
18
19
|
var toggleInfoOpen = function () {
|
|
19
20
|
setInfoOpen(!infoOpen);
|
|
20
21
|
};
|
|
@@ -22,12 +23,12 @@ var CartSubTotal = function (_a) {
|
|
|
22
23
|
React.createElement(SubTotalLabel, null,
|
|
23
24
|
label,
|
|
24
25
|
children,
|
|
25
|
-
React.createElement(ToolTipButton, { onClick: toggleInfoOpen },
|
|
26
|
-
React.createElement(Icons.Info, { height: 16, width: 16 }))),
|
|
26
|
+
React.createElement(ToolTipButton, { "aria-expanded": infoOpen, "aria-label": tooltipAriaLabel, "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen },
|
|
27
|
+
React.createElement(Icons.Info, { "aria-hidden": "true", height: 16, width: 16 }))),
|
|
27
28
|
React.createElement(Price, { priceColor: priceColor }, (value !== 0 && !value) || isNaN(value)
|
|
28
29
|
? '-'
|
|
29
|
-
: "".concat(
|
|
30
|
-
infoOpen && (React.createElement(ToolTipDialog, {
|
|
30
|
+
: "".concat(fromPrice ? 'Från ' : '').concat(formattedPrice, " kr")),
|
|
31
|
+
infoOpen && (React.createElement(ToolTipDialog, { id: tooltipId, info: info, onBottom: infoOnBottom, toggle: toggleInfoOpen })))) : (React.createElement(CartSubTotalContainer, { type: type },
|
|
31
32
|
React.createElement(SubTotalLabel, null,
|
|
32
33
|
label,
|
|
33
34
|
children),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartSubTotal.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartSubTotal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { ECartSubTotalTypes } from './CartSubTotal.js';
|
|
4
|
-
import { focusVisible } from '../../shared/global.styles.js';
|
|
5
4
|
|
|
6
|
-
var CartSubTotalContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
var CartSubTotalContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: space-between;\n position: relative;\n ", "\n"], ["\n display: flex;\n gap: ", "px;\n justify-content: space-between;\n position: relative;\n ", "\n"])), function (_a) {
|
|
6
|
+
var _b;
|
|
7
|
+
var theme = _a.theme;
|
|
8
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
|
|
9
|
+
}, function (_a) {
|
|
10
|
+
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
11
|
+
var theme = _a.theme, type = _a.type;
|
|
12
|
+
return type === ECartSubTotalTypes.items
|
|
13
|
+
? "\n font-size: ".concat((_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3, "px;\n font-weight: ").concat((_e = (_d = theme.typography) === null || _d === void 0 ? void 0 : _d.weight) === null || _e === void 0 ? void 0 : _e.medium, ";\n ")
|
|
14
|
+
: "\n font-size: ".concat((_g = (_f = theme.typography) === null || _f === void 0 ? void 0 : _f.size) === null || _g === void 0 ? void 0 : _g.s2, "px;\n font-weight: ").concat((_j = (_h = theme.typography) === null || _h === void 0 ? void 0 : _h.weight) === null || _j === void 0 ? void 0 : _j.regular, ";\n ");
|
|
11
15
|
});
|
|
12
16
|
var SubTotalLabel = styled.div(templateObject_2 || (templateObject_2 = __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.xxs2; });
|
|
13
|
-
var ToolTipButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n
|
|
14
|
-
var Price = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (
|
|
17
|
+
var ToolTipButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"], ["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"])));
|
|
18
|
+
var Price = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19
|
+
var priceColor = _a.priceColor;
|
|
20
|
+
return priceColor;
|
|
21
|
+
});
|
|
15
22
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
16
23
|
|
|
17
24
|
export { CartSubTotalContainer, Price, SubTotalLabel, ToolTipButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartSubTotal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartSubTotal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,16 +1,39 @@
|
|
|
1
|
-
import React, { useRef } from 'react';
|
|
2
|
-
import { useOutsideClick } from '@citygross/utils';
|
|
1
|
+
import React, { useRef, useEffect } from 'react';
|
|
2
|
+
import { useOutsideClick, focusTrap } from '@citygross/utils';
|
|
3
3
|
import { Icons } from '@citygross/icons';
|
|
4
4
|
import { DialogContainer, DialogClose } from './ToolTipDialog.styles.js';
|
|
5
5
|
|
|
6
6
|
var ToolTipDialog = function (_a) {
|
|
7
|
-
var info = _a.info,
|
|
7
|
+
var id = _a.id, info = _a.info, onBottom = _a.onBottom, toggle = _a.toggle;
|
|
8
8
|
var infoRef = useRef(null);
|
|
9
|
+
var isOpenRef = useRef(true);
|
|
9
10
|
useOutsideClick(infoRef, function () { return toggle(); });
|
|
10
|
-
|
|
11
|
+
useEffect(function () {
|
|
12
|
+
var focusTrapCleanup;
|
|
13
|
+
if (infoRef.current) {
|
|
14
|
+
focusTrapCleanup = focusTrap({
|
|
15
|
+
exitFunction: toggle,
|
|
16
|
+
ref: infoRef
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
var handleKeyDown = function (event) {
|
|
20
|
+
if (event.key === 'Escape' && isOpenRef.current && infoRef.current) {
|
|
21
|
+
event.stopPropagation();
|
|
22
|
+
isOpenRef.current = false;
|
|
23
|
+
toggle();
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
document.addEventListener('keydown', handleKeyDown, true);
|
|
27
|
+
return function () {
|
|
28
|
+
isOpenRef.current = false;
|
|
29
|
+
document.removeEventListener('keydown', handleKeyDown, true);
|
|
30
|
+
focusTrapCleanup === null || focusTrapCleanup === void 0 ? void 0 : focusTrapCleanup();
|
|
31
|
+
};
|
|
32
|
+
}, [toggle]);
|
|
33
|
+
return (React.createElement(DialogContainer, { "aria-live": "polite", id: id, onBottom: onBottom, ref: infoRef, role: "tooltip" },
|
|
11
34
|
info,
|
|
12
|
-
React.createElement(DialogClose, { onClick: toggle },
|
|
13
|
-
React.createElement(Icons.Cross, {
|
|
35
|
+
React.createElement(DialogClose, { "aria-label": "St\u00E4ng", onClick: toggle },
|
|
36
|
+
React.createElement(Icons.Cross, { "aria-hidden": "true", color: "white", height: 20, width: 20 }))));
|
|
14
37
|
};
|
|
15
38
|
|
|
16
39
|
export { ToolTipDialog };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolTipDialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolTipDialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,14 +1,38 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
import { focusVisible } from '../../shared/global.styles.js';
|
|
4
3
|
|
|
5
|
-
var DialogContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
var DialogContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: ", "px;\n font-size: ", "px;\n padding: ", "px;\n position: absolute;\n\n ", "\n"], ["\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: ", "px;\n font-size: ", "px;\n padding: ", "px;\n position: absolute;\n\n ", "\n"])), function (_a) {
|
|
5
|
+
var _b;
|
|
6
|
+
var theme = _a.theme;
|
|
7
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black;
|
|
8
|
+
}, function (_a) {
|
|
9
|
+
var _b;
|
|
10
|
+
var theme = _a.theme;
|
|
11
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
|
|
12
|
+
}, function (_a) {
|
|
13
|
+
var _b;
|
|
14
|
+
var theme = _a.theme;
|
|
15
|
+
return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
16
|
+
}, function (_a) {
|
|
17
|
+
var _b;
|
|
18
|
+
var theme = _a.theme;
|
|
19
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs2;
|
|
20
|
+
}, function (_a) {
|
|
21
|
+
var _b;
|
|
22
|
+
var theme = _a.theme;
|
|
23
|
+
return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size.s2;
|
|
24
|
+
}, function (_a) {
|
|
25
|
+
var _b;
|
|
26
|
+
var theme = _a.theme;
|
|
27
|
+
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2;
|
|
28
|
+
}, function (_a) {
|
|
29
|
+
var _b, _c;
|
|
30
|
+
var onBottom = _a.onBottom, theme = _a.theme;
|
|
31
|
+
return onBottom
|
|
32
|
+
? "\n margin-top: ".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs2, "px;\n top: 100%;\n ")
|
|
33
|
+
: "\n margin-bottom: ".concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xxs2, "px;\n bottom: 100%;\n ");
|
|
10
34
|
});
|
|
11
|
-
var DialogClose = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
35
|
+
var DialogClose = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"], ["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"])));
|
|
12
36
|
var templateObject_1, templateObject_2;
|
|
13
37
|
|
|
14
38
|
export { DialogClose, DialogContainer };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolTipDialog.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolTipDialog.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.169",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"react-slick": "^0.30.1",
|
|
75
75
|
"slick-carousel": "^1.8.1"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "48ef7eb7b641949927e104527a7f915390440d94"
|
|
78
78
|
}
|