oolib 2.150.5 → 2.151.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -22,10 +22,10 @@ var getTypoComp_1 = require("../../utils/getTypoComp");
|
|
|
22
22
|
* @return {ReactElement} The rendered TagDisplay component.
|
|
23
23
|
*/
|
|
24
24
|
var TagDisplay = function (_a) {
|
|
25
|
-
var display = _a.display, style = _a.style, M = _a.M, XS = _a.XS, tagColor = _a.tagColor, textColor = _a.textColor, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
|
|
25
|
+
var display = _a.display, title = _a.title, style = _a.style, M = _a.M, XS = _a.XS, tagColor = _a.tagColor, textColor = _a.textColor, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
|
|
26
26
|
var size = M ? 'M' : XS ? 'XS' : 'S';
|
|
27
27
|
var TYPO_COMP = (0, getTypoComp_1.getTypoComp)({ typo: variant === "secondary" ? "caption" : "tag" }); // secondary variant has a different typo - "UI_CAPTION"
|
|
28
|
-
return (react_1.default.createElement(styled_1.StyledTagDisplay, { variant: variant, textColor: textColor, tagColor: tagColor, size: size, style: style },
|
|
28
|
+
return (react_1.default.createElement(styled_1.StyledTagDisplay, { variant: variant, textColor: textColor, tagColor: tagColor, size: size, style: style, title: title },
|
|
29
29
|
react_1.default.createElement(TYPO_COMP, null, display)));
|
|
30
30
|
};
|
|
31
31
|
exports.TagDisplay = TagDisplay;
|
|
@@ -25,14 +25,14 @@ var ImagePlaceholder_1 = require("../../ImagePlaceholder");
|
|
|
25
25
|
var Star = icons_1.icons.Star, CrownSimple = icons_1.icons.CrownSimple;
|
|
26
26
|
var success = themes_1.colors.success, white = themes_1.colors.white;
|
|
27
27
|
var CardLabelTag = function (_a) {
|
|
28
|
-
var label = _a.label, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent;
|
|
29
|
-
return label ? (react_1.default.createElement(styled_2.StyledCardLabelWrapper, { isEmbedPresent: isEmbedPresent, isHighlightPresent: isHighlightPresent },
|
|
30
|
-
react_1.default.createElement(Tags_1.TagDisplay, { display: label.toUpperCase(), XS: true }))) : null;
|
|
28
|
+
var label = _a.label, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
|
|
29
|
+
return label ? (react_1.default.createElement(styled_2.StyledCardLabelWrapper, { isEmbedPresent: isEmbedPresent, isHighlightPresent: isHighlightPresent, bothTagsDisplayTogether: bothTagsDisplayTogether },
|
|
30
|
+
react_1.default.createElement(Tags_1.TagDisplay, { display: label.toUpperCase(), title: label, XS: true }))) : null;
|
|
31
31
|
};
|
|
32
32
|
var StatusTag = function (_a) {
|
|
33
|
-
var display = _a.display, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, statusTagVariant = _a.statusTagVariant;
|
|
34
|
-
return display ? (react_1.default.createElement(styled_2.StyledStatusTagWrapper, { isEmbedPresent: isEmbedPresent, isHighlightPresent: isHighlightPresent },
|
|
35
|
-
react_1.default.createElement(Tags_1.TagDisplay, { display: display, XS: true, variant: statusTagVariant || "positive" }))) : null;
|
|
33
|
+
var display = _a.display, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, statusTagVariant = _a.statusTagVariant, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
|
|
34
|
+
return display ? (react_1.default.createElement(styled_2.StyledStatusTagWrapper, { isEmbedPresent: isEmbedPresent, isHighlightPresent: isHighlightPresent, bothTagsDisplayTogether: bothTagsDisplayTogether },
|
|
35
|
+
react_1.default.createElement(Tags_1.TagDisplay, { display: display, title: display, XS: true, variant: statusTagVariant || "positive" }))) : null;
|
|
36
36
|
};
|
|
37
37
|
var CardContent = function (_a) {
|
|
38
38
|
var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, highlight = _a.highlight, // primary | secondary
|
|
@@ -46,6 +46,7 @@ var CardContent = function (_a) {
|
|
|
46
46
|
data: data,
|
|
47
47
|
parseSpecialSyntax: parseSpecialSyntax
|
|
48
48
|
}), cardLabel = _b.cardLabel, title = _b.title, description = _b.desc, video = _b.video, image = _b.image, metaBlock = _b.metaBlock, tagDisplay = _b.tagDisplay;
|
|
49
|
+
var bothTagsDisplayTogether = cardLabel && tagDisplay && !showEmbedSection;
|
|
49
50
|
var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
|
|
50
51
|
if (dontRenderRes)
|
|
51
52
|
return dontRenderRes;
|
|
@@ -59,16 +60,16 @@ var CardContent = function (_a) {
|
|
|
59
60
|
(0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement("div", { style: { width: "100%" } }, react_1.default.createElement(ImageInput_1.ImageInput, { value: image, aspectRatio: "5/3", readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true }))) : (0, mediaDataExists_1.videoDataExists)(video) ? (react_1.default.createElement("div", { style: { width: "100%", position: 'relative' } },
|
|
60
61
|
react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true }),
|
|
61
62
|
react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }))) : (react_1.default.createElement(ImagePlaceholder_1.ImagePlaceholder, { title: title })))) : (react_1.default.createElement(styled_2.StyledCardLabelAndStatusTagWrapper, null,
|
|
62
|
-
react_1.default.createElement(CardLabelTag, { label: cardLabel, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight }),
|
|
63
|
-
react_1.default.createElement(StatusTag, { display: tagDisplay, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagVariant: statusTagVariant }))),
|
|
63
|
+
react_1.default.createElement(CardLabelTag, { label: cardLabel, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, bothTagsDisplayTogether: bothTagsDisplayTogether }),
|
|
64
|
+
react_1.default.createElement(StatusTag, { display: tagDisplay, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagVariant: statusTagVariant, bothTagsDisplayTogether: bothTagsDisplayTogether }))),
|
|
64
65
|
highlight && react_1.default.createElement(styled_2.StyledStarWrapper, { highlight: highlight },
|
|
65
66
|
react_1.default.createElement(HighLightIcon, { size: 18, color: white, weight: "fill", style: { filter: "drop-shadow(0px 2px 8.2px rgba(0, 0, 0, 0.50 ))" } })),
|
|
66
67
|
showEmbedSection && (react_1.default.createElement(StatusTag, { display: tagDisplay, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagVariant: statusTagVariant })),
|
|
67
68
|
title ? (react_1.default.createElement(styled_2.StyledTitleWrapper, { highlight: highlight, showEmbedSection: showEmbedSection },
|
|
68
|
-
react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6 },
|
|
69
|
+
react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { title: title, noOfLines_M: 6 },
|
|
69
70
|
react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" }, localize(title))))) : null,
|
|
70
71
|
description ? (react_1.default.createElement(styled_2.StyledDescription, null,
|
|
71
|
-
react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6 }, description))) : null),
|
|
72
|
+
react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { title: description, noOfLines_M: 6 }, description))) : null),
|
|
72
73
|
react_1.default.createElement("div", null, (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 ? (
|
|
73
74
|
//show only two meta for cardContent
|
|
74
75
|
react_1.default.createElement(styled_2.StyledMetaBlockWrapper, null,
|
|
@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
6
17
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
18
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
19
|
};
|
|
@@ -12,8 +23,9 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
23
|
var colors_1 = require("../../../themes/colors");
|
|
13
24
|
var Typo2_1 = require("../../Typo2");
|
|
14
25
|
var white = colors_1.colors.white, grey10 = colors_1.colors.grey10, grey50 = colors_1.colors.grey50, grey60 = colors_1.colors.grey60, shadowDefault = colors_1.colors.shadowDefault, shadowHover = colors_1.colors.shadowHover, yellowBG = colors_1.colors.yellowBG, yellow = colors_1.colors.yellow, yellowStroke = colors_1.colors.yellowStroke, green = colors_1.colors.green, greenBG = colors_1.colors.greenBG, greenStroke = colors_1.colors.greenStroke;
|
|
26
|
+
var SIZE_OF_HIGHLIGHT = "3.6rem";
|
|
15
27
|
exports.StyledEmbedSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-height: 182px;\n width: 100%;\n border-radius: 4px;\n overflow: hidden;\n display: flex;\n align-items: center;\n margin-bottom: 8px;\n"], ["\n max-height: 182px;\n width: 100%;\n border-radius: 4px;\n overflow: hidden;\n display: flex;\n align-items: center;\n margin-bottom: 8px;\n"])));
|
|
16
|
-
exports.StyledCardWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n border: 1px solid ", ";\n background-color: ", ";\n cursor: pointer;\n position: relative;\n padding: 12px;\n width: 100%;\n
|
|
28
|
+
exports.StyledCardWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n border: 1px solid ", ";\n background-color: ", ";\n cursor: pointer;\n position: relative;\n padding: 12px;\n width: 100%;\n border-radius: 8px;\n box-shadow: 0px 4px 10px 0px ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n \n &:hover {\n border: ", ";\n box-shadow: 0px 4px 10px 0px ", ";\n }\n"], ["\n height: 100%;\n border: 1px solid ", ";\n background-color: ", ";\n cursor: pointer;\n position: relative;\n padding: 12px;\n width: 100%;\n border-radius: 8px;\n box-shadow: 0px 4px 10px 0px ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n \n &:hover {\n border: ", ";\n box-shadow: 0px 4px 10px 0px ", ";\n }\n"])), function (_a) {
|
|
17
29
|
var highlight = _a.highlight;
|
|
18
30
|
return highlight === "secondary" ? yellowStroke : highlight === "primary" ? greenStroke : grey10;
|
|
19
31
|
}, function (_a) {
|
|
@@ -23,21 +35,49 @@ exports.StyledCardWrapper = styled_components_1.default.div(templateObject_2 ||
|
|
|
23
35
|
var highlight = _a.highlight;
|
|
24
36
|
return highlight === 'secondary' ? "1px solid ".concat(yellow) : highlight === 'primary' ? "1px solid ".concat(green) : "1px solid ".concat(grey50);
|
|
25
37
|
}, shadowHover);
|
|
26
|
-
exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n gap: 0.5rem;\n margin-bottom: 4px;\n width: ", " ; // 3.6rem is the width of the
|
|
38
|
+
exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n gap: 0.5rem;\n margin-bottom: 4px;\n width: ", " ; // 3.6rem is the width of the highlight wrapper, this condition avoids title from being cutoff\n"], ["\n display: flex;\n gap: 0.5rem;\n margin-bottom: 4px;\n width: ", " ; // 3.6rem is the width of the highlight wrapper, this condition avoids title from being cutoff\n"])), function (_a) {
|
|
27
39
|
var highlight = _a.highlight, showEmbedSection = _a.showEmbedSection;
|
|
28
|
-
return (highlight && !showEmbedSection) ? "calc(100% -
|
|
40
|
+
return (highlight && !showEmbedSection) ? "calc(100% - ".concat(SIZE_OF_HIGHLIGHT, ")") : '100%';
|
|
29
41
|
});
|
|
30
42
|
exports.StyledDescription = (0, styled_components_1.default)(Typo2_1.UI_BODY_SM)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-bottom: 6px;\n color: ", ";\n"], ["\n margin-bottom: 6px;\n color: ", ";\n"])), grey60);
|
|
31
|
-
exports.StyledCardLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n gap: 0 6px;\n margin-bottom: -2px;\n
|
|
32
|
-
|
|
43
|
+
exports.StyledCardLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n gap: 0 6px;\n margin-bottom: -2px;\n"], ["\n display: flex;\n gap: 0 6px;\n margin-bottom: -2px;\n"])));
|
|
44
|
+
var calculateMaxWidthOfTags = function (_a) {
|
|
45
|
+
var isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, bothTagsDisplayTogether = _a.bothTagsDisplayTogether, _b = _a.isCardLabel, isCardLabel = _b === void 0 ? false : _b;
|
|
46
|
+
var INLINE_PADDING = '24px'; // 24px is the total inline padding
|
|
47
|
+
var TAG_GAP = '6px'; // 6px gap between tag and highlight
|
|
48
|
+
var FULL_WIDTH = "100%";
|
|
49
|
+
var HALF_WIDTH = "50%";
|
|
50
|
+
if (isEmbedPresent) {
|
|
51
|
+
if (isCardLabel) {
|
|
52
|
+
if (isEmbedPresent && !isHighlightPresent) {
|
|
53
|
+
return "calc(".concat(FULL_WIDTH, " - ").concat(INLINE_PADDING, ")");
|
|
54
|
+
}
|
|
55
|
+
else if (isEmbedPresent && isHighlightPresent) {
|
|
56
|
+
return "calc(".concat(FULL_WIDTH, " - (").concat(INLINE_PADDING, " + ").concat(TAG_GAP, " + ").concat(SIZE_OF_HIGHLIGHT, "))");
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
return "".concat(FULL_WIDTH);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
else if (bothTagsDisplayTogether && !isHighlightPresent) {
|
|
64
|
+
return "calc(".concat(HALF_WIDTH, " - 3px)"); // 3px is the half of the gap between the tags
|
|
65
|
+
}
|
|
66
|
+
else if (bothTagsDisplayTogether && isHighlightPresent) {
|
|
67
|
+
return "calc(".concat(HALF_WIDTH, " - (1.8rem + ").concat(TAG_GAP, "))"); // 6px is the half of the total gap(12px) between tags and highlight, 1.8rem is the half of the width of the highlight
|
|
68
|
+
}
|
|
69
|
+
else if (isHighlightPresent) {
|
|
70
|
+
return "calc(".concat(FULL_WIDTH, " - (").concat(TAG_GAP, " + ").concat(SIZE_OF_HIGHLIGHT, "))");
|
|
71
|
+
}
|
|
72
|
+
else
|
|
73
|
+
return "".concat(FULL_WIDTH);
|
|
74
|
+
};
|
|
75
|
+
exports.StyledCardLabelWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: ", ";\n margin-bottom: 8px;\n max-width: ", ";\n top: 12px;\n left: 12px;\n z-index: 10;\n backdrop-filter: blur(10px);\n border-radius: 4px;\n"], ["\n position: ", ";\n margin-bottom: 8px;\n max-width: ", ";\n top: 12px;\n left: 12px;\n z-index: 10;\n backdrop-filter: blur(10px);\n border-radius: 4px;\n"])), function (_a) {
|
|
33
76
|
var isEmbedPresent = _a.isEmbedPresent;
|
|
34
77
|
return isEmbedPresent ? "absolute" : "static";
|
|
35
|
-
}, function (
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
});
|
|
39
|
-
exports.StyledStatusTagWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: 8px;\n /* max-width: 40%; */\n"], ["\n margin-bottom: 8px;\n /* max-width: 40%; */\n"])));
|
|
40
|
-
exports.StyledStarWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 3.6rem;\n height: 3.6rem;\n position: absolute;\n top: 1.2rem;\n right: 1.2rem;\n z-index: 10;\n display: flex; \n justify-content: center;\n align-items: center;\n padding: 7px;\n background-color: ", "; \n border-radius: 4px;\n"], ["\n width: 3.6rem;\n height: 3.6rem;\n position: absolute;\n top: 1.2rem;\n right: 1.2rem;\n z-index: 10;\n display: flex; \n justify-content: center;\n align-items: center;\n padding: 7px;\n background-color: ", "; \n border-radius: 4px;\n"])), function (_a) {
|
|
78
|
+
}, function (props) { return calculateMaxWidthOfTags(__assign(__assign({}, props), { isCardLabel: true })); });
|
|
79
|
+
exports.StyledStatusTagWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: 8px;\n max-width: ", ";\n"], ["\n margin-bottom: 8px;\n max-width: ", ";\n"])), function (props) { return calculateMaxWidthOfTags(__assign({}, props)); });
|
|
80
|
+
exports.StyledStarWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n position: absolute;\n top: 1.2rem;\n right: 1.2rem;\n z-index: 10;\n display: flex; \n justify-content: center;\n align-items: center;\n padding: 7px;\n background-color: ", "; \n border-radius: 4px;\n"], ["\n width: ", ";\n height: ", ";\n position: absolute;\n top: 1.2rem;\n right: 1.2rem;\n z-index: 10;\n display: flex; \n justify-content: center;\n align-items: center;\n padding: 7px;\n background-color: ", "; \n border-radius: 4px;\n"])), SIZE_OF_HIGHLIGHT, SIZE_OF_HIGHLIGHT, function (_a) {
|
|
41
81
|
var highlight = _a.highlight;
|
|
42
82
|
return highlight === "secondary" ? yellow : highlight === "primary" ? green : white;
|
|
43
83
|
});
|