krl-alfred 1.79.5 → 1.79.6
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.
|
@@ -21,12 +21,12 @@ var InfoBox_styled_1 = require("./InfoBox.styled");
|
|
|
21
21
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
22
22
|
var react_i18next_1 = require("react-i18next");
|
|
23
23
|
var InfoBox = function (_a) {
|
|
24
|
-
var _b = _a.title, title = _b === void 0 ? props_1.InfoBoxDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.InfoBoxDefault.description : _c, _d = _a.radius, radius = _d === void 0 ? props_1.InfoBoxDefault.radius : _d, _e = _a.size, size = _e === void 0 ? props_1.InfoBoxDefault.size : _e, _f = _a.variant, variant = _f === void 0 ? props_1.InfoBoxDefault.variant : _f, _g = _a.onClick, onClick = _g === void 0 ? props_1.InfoBoxDefault.onClick : _g;
|
|
24
|
+
var _b = _a.title, title = _b === void 0 ? props_1.InfoBoxDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.InfoBoxDefault.description : _c, _d = _a.radius, radius = _d === void 0 ? props_1.InfoBoxDefault.radius : _d, _e = _a.size, size = _e === void 0 ? props_1.InfoBoxDefault.size : _e, _f = _a.variant, variant = _f === void 0 ? props_1.InfoBoxDefault.variant : _f, _g = _a.onClick, onClick = _g === void 0 ? props_1.InfoBoxDefault.onClick : _g, _h = _a.icon, icon = _h === void 0 ? props_1.InfoBoxDefault.icon : _h;
|
|
25
25
|
var descriptionRef = (0, react_1.useRef)(null);
|
|
26
26
|
var inputRef = (0, react_1.useRef)(null);
|
|
27
|
-
var
|
|
28
|
-
var
|
|
29
|
-
var
|
|
27
|
+
var _j = (0, react_1.useState)(false), alert = _j[0], setAlert = _j[1];
|
|
28
|
+
var _k = (0, react_1.useState)(0), alertLeft = _k[0], setAlertLeft = _k[1];
|
|
29
|
+
var _l = (0, react_1.useState)(0), alertTop = _l[0], setAlertTop = _l[1];
|
|
30
30
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
31
31
|
(0, react_1.useEffect)(function () {
|
|
32
32
|
if (alert) {
|
|
@@ -56,6 +56,6 @@ var InfoBox = function (_a) {
|
|
|
56
56
|
}
|
|
57
57
|
});
|
|
58
58
|
}, []);
|
|
59
|
-
return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: onClick, "$radius": radius, "$variant": variant, "$hasLink": !!onClick, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "2px", name: variant === "danger" ? "Danger" :
|
|
59
|
+
return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: onClick, "$radius": radius, "$variant": variant, "$hasLink": !!onClick, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "2px", name: variant === "danger" ? "Danger" : icon, width: "24px", height: "24px" }) })), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { "$size": size, ref: descriptionRef, dangerouslySetInnerHTML: { __html: description } }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] }), !!onClick && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.LinkIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "2px", name: "ArrowSmallRight", width: "24px", height: "24px" }) }))] })));
|
|
60
60
|
};
|
|
61
61
|
exports.default = InfoBox;
|
|
@@ -14,6 +14,8 @@ exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (tem
|
|
|
14
14
|
switch (props.$variant) {
|
|
15
15
|
case 'primary':
|
|
16
16
|
return "var(--primary-opacity-10)";
|
|
17
|
+
case 'warning':
|
|
18
|
+
return "var(--yellow)";
|
|
17
19
|
case 'danger':
|
|
18
20
|
return "var(--red)";
|
|
19
21
|
default:
|
|
@@ -23,6 +25,8 @@ exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (tem
|
|
|
23
25
|
switch (props.$variant) {
|
|
24
26
|
case 'primary':
|
|
25
27
|
return "var(--dark)";
|
|
28
|
+
case 'warning':
|
|
29
|
+
return "white";
|
|
26
30
|
case 'danger':
|
|
27
31
|
return "white";
|
|
28
32
|
default:
|
|
@@ -40,20 +44,11 @@ exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (tem
|
|
|
40
44
|
return "1rem";
|
|
41
45
|
}
|
|
42
46
|
});
|
|
43
|
-
exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n margin-right: 1rem;\n
|
|
44
|
-
switch (props.$variant) {
|
|
45
|
-
case 'primary':
|
|
46
|
-
return "var(--dark)";
|
|
47
|
-
case 'danger':
|
|
48
|
-
return "white";
|
|
49
|
-
default:
|
|
50
|
-
return "var(--dark)";
|
|
51
|
-
}
|
|
52
|
-
});
|
|
47
|
+
exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n margin-right: 1rem;\n *{\n display: block;\n }\n"], ["\n display: block;\n margin-right: 1rem;\n *{\n display: block;\n }\n"])));
|
|
53
48
|
exports.TextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n flex: 1 0;\n"], ["\n position: relative;\n flex: 1 0;\n"])));
|
|
54
49
|
exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n margin: 0;\n font:var(--caption-bold-12-15);\n"], ["\n display: block;\n margin: 0;\n font:var(--caption-bold-12-15);\n"])));
|
|
55
50
|
exports.LinkIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin-left: 1rem;\n *{\n display: block;\n }\n"], ["\n display: block;\n margin-left: 1rem;\n *{\n display: block;\n }\n"])));
|
|
56
|
-
exports.Description = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: block;\n margin: 0;\n font: ", ";\n b{\n font-weight: 700;\n }\n .bottom{\n p{\n font-weight: 700;\n
|
|
51
|
+
exports.Description = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: block;\n margin: 0;\n font: ", ";\n b{\n font-weight: 700;\n }\n .bottom{\n p{\n font-weight: 700;\n display: inline-block;\n margin: 0;\n position: relative;\n &:is(.block){\n display: none;\n @media only screen and ", " {\n display: block;\n }\n }\n &:nth-child(3){\n margin-left: 0.5rem;\n padding-left: 0.5rem;\n @media only screen and ", " {\n margin: 0;\n padding: 0;\n }\n &:before{\n content: \"\";\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n height: 9px;\n width: 1px;\n background-color: var(--dark);\n @media only screen and ", " {\n display: none;\n }\n }\n }\n span{\n color: var(--primary);\n cursor: pointer;\n }\n }\n }\n"], ["\n display: block;\n margin: 0;\n font: ", ";\n b{\n font-weight: 700;\n }\n .bottom{\n p{\n font-weight: 700;\n display: inline-block;\n margin: 0;\n position: relative;\n &:is(.block){\n display: none;\n @media only screen and ", " {\n display: block;\n }\n }\n &:nth-child(3){\n margin-left: 0.5rem;\n padding-left: 0.5rem;\n @media only screen and ", " {\n margin: 0;\n padding: 0;\n }\n &:before{\n content: \"\";\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n height: 9px;\n width: 1px;\n background-color: var(--dark);\n @media only screen and ", " {\n display: none;\n }\n }\n }\n span{\n color: var(--primary);\n cursor: pointer;\n }\n }\n }\n"])), function (props) {
|
|
57
52
|
switch (props.$size) {
|
|
58
53
|
case 'small':
|
|
59
54
|
return "var(--caption-medium-12-15)";
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.InfoBoxDefault = exports.variants = exports.sizes = void 0;
|
|
3
|
+
exports.InfoBoxDefault = exports.iconNames = exports.variants = exports.sizes = void 0;
|
|
4
|
+
var Icon_1 = require("../Icon");
|
|
4
5
|
exports.sizes = ['small', 'medium', 'large'];
|
|
5
|
-
exports.variants = ['primary', 'danger'];
|
|
6
|
+
exports.variants = ['primary', 'danger', 'warning'];
|
|
7
|
+
exports.iconNames = Object.keys(Icon_1.iconList);
|
|
6
8
|
exports.InfoBoxDefault = {
|
|
7
9
|
title: null,
|
|
8
10
|
description: null,
|
|
@@ -10,4 +12,5 @@ exports.InfoBoxDefault = {
|
|
|
10
12
|
size: "small",
|
|
11
13
|
variant: exports.variants[0],
|
|
12
14
|
onClick: null,
|
|
15
|
+
icon: "InfoSquare",
|
|
13
16
|
};
|