@desynova-digital/components 9.3.7 → 9.3.8
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/atoms/cardV2/cardV2.js +8 -1
- package/atoms/cardV2/contentV2.js +33 -8
- package/package.json +2 -2
package/atoms/cardV2/cardV2.js
CHANGED
|
@@ -99,7 +99,14 @@ CardV2.propTypes = {
|
|
|
99
99
|
isCardv2: _propTypes["default"].bool,
|
|
100
100
|
nestedDropdownData: _propTypes["default"].arrayOf(_propTypes["default"].object),
|
|
101
101
|
onNestedDropdownSelect: _propTypes["default"].func,
|
|
102
|
-
isSearchPageCard: _propTypes["default"].bool
|
|
102
|
+
isSearchPageCard: _propTypes["default"].bool,
|
|
103
|
+
match_details: _propTypes["default"].shape({
|
|
104
|
+
available: _propTypes["default"].bool,
|
|
105
|
+
top_fields: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
106
|
+
field: _propTypes["default"].string,
|
|
107
|
+
score: _propTypes["default"].number
|
|
108
|
+
}))
|
|
109
|
+
})
|
|
103
110
|
};
|
|
104
111
|
CardV2.defaultProps = {
|
|
105
112
|
isSegment: false,
|
|
@@ -32,10 +32,11 @@ var TitleStyles = (0, _styledComponents["default"])(function (props) {
|
|
|
32
32
|
return isTitleClick ? 'pointer' : 'default';
|
|
33
33
|
});
|
|
34
34
|
var ContentBody = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n"])));
|
|
35
|
-
var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n padding: ", ";\n background-color: ", ";\n border-radius: 0 0 10px 10px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n &.no-meta-row {\n ", "\n }\n\n &.no-meta-row .footer-row {\n margin-top: 10px;\n }\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: ' ';\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: ", ";\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container {\n position: absolute;\n bottom: 100%;\n margin-right: 110px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease-out;\n padding-bottom: 10px;\n\n .overlappig-popup {\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding: 12px;\n width: 300px;\n z-index: 10;\n\n .popup-pointer {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid ", ";\n\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n\n .overlapping-episod-list-container {\n max-height: 165px;\n overflow: scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n\n .divider {\n height: 1px;\n width: 100%;\n margin: 10px 0;\n background: #303f51;\n }\n .header-container {\n display: flex;\n position: relative;\n .thumbnail {\n width: 100px;\n height: 55px;\n background-size: cover !important;\n background-repeat: no-repeat !important;\n margin-right: 10px;\n border-radius: 2px;\n }\n .episod-title {\n font-size: 12px;\n margin-bottom: 8px;\n max-width: 180px;\n line-height: 14px;\n color: #fff;\n }\n .episod-details {\n font-size: 10px;\n color: #afb2ba;\n }\n }\n\n .overlappig-popup-title {\n font-size: 12px;\n line-height: 12px;\n color: #afb2ba;\n margin-bottom: 15px;\n }\n }\n }\n\n :hover {\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px;\n }\n }\n .meta-row {\n display: flex;\n align-items: center;\n margin-top: 6px;\n cursor: default;\n column-gap: 10px\n }\n .category-count {\n margin-top: 6px;\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 10px;\n line-height: 12px;\n }\n .meta-badge {\n ", "\n font-size: 8px;\n line-height: 12px;\n padding: 1px 3px;\n border-radius: 4px;\n font-family: SFUIText-Regular;\n min-height: 12px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .meta-text {\n color: ", ";\n font-family: SFUIText-Regular;\n font-size: 10px;\n font-style: normal;\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .footer-row {\n display: flex;\n align-items: center;\n margin-top: 16px;\n column-gap: 12px;\n position: relative;\n cursor: default;\n }\n .meta-row + .footer-row {\n margin-top: 10px;\n }\n .footer-text {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n }\n .footer-icons {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n .footer-icon {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 12px;\n display: inline-flex;\n align-items: center;\n }\n .footer-text-language {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n text-transform: capitalize;\n }\n"])), function (_ref2) {
|
|
35
|
+
var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n padding: ", ";\n background-color: ", ";\n border-radius: 0 0 10px 10px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n &.no-meta-row {\n ", "\n }\n\n &.no-meta-row .footer-row {\n margin-top: 10px;\n }\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: ' ';\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: ", ";\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container {\n position: absolute;\n bottom: 100%;\n margin-right: 110px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease-out;\n padding-bottom: 10px;\n\n .overlappig-popup {\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding: 12px;\n width: 300px;\n z-index: 10;\n\n .popup-pointer {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid ", ";\n\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n\n .overlapping-episod-list-container {\n max-height: 165px;\n overflow: scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n\n .divider {\n height: 1px;\n width: 100%;\n margin: 10px 0;\n background: #303f51;\n }\n .header-container {\n display: flex;\n position: relative;\n .thumbnail {\n width: 100px;\n height: 55px;\n background-size: cover !important;\n background-repeat: no-repeat !important;\n margin-right: 10px;\n border-radius: 2px;\n }\n .episod-title {\n font-size: 12px;\n margin-bottom: 8px;\n max-width: 180px;\n line-height: 14px;\n color: #fff;\n }\n .episod-details {\n font-size: 10px;\n color: #afb2ba;\n }\n }\n\n .overlappig-popup-title {\n font-size: 12px;\n line-height: 12px;\n color: #afb2ba;\n margin-bottom: 15px;\n }\n }\n }\n\n :hover {\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px;\n }\n }\n .meta-row {\n display: flex;\n align-items: center;\n margin-top: 6px;\n cursor: default;\n column-gap: 10px\n }\n .category-count {\n margin-top: 6px;\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 10px;\n line-height: 12px;\n }\n .meta-badge {\n ", "\n font-size: 8px;\n line-height: 12px;\n padding: 1px 3px;\n border-radius: 4px;\n font-family: SFUIText-Regular;\n min-height: 12px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .meta-text {\n color: ", ";\n font-family: SFUIText-Regular;\n font-size: 10px;\n font-style: normal;\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .footer-row {\n display: flex;\n align-items: center;\n margin-top: 16px;\n column-gap: 12px;\n position: relative;\n cursor: default;\n }\n .meta-row + .footer-row {\n margin-top: 10px;\n }\n .footer-text {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n }\n .footer-icons {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n .footer-icon {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 12px;\n display: inline-flex;\n align-items: center;\n }\n .footer-text-language {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n text-transform: capitalize;\n }\n .chip-row {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 5px;\n margin-top: 10px;\n overflow: hidden;\n }\n .chip {\n display: flex;\n min-width: 0;\n padding: 4px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 3px;\n background: ", ";\n color: ", ";\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n overflow: hidden;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n }\n"])), function (_ref2) {
|
|
36
36
|
var type = _ref2.type,
|
|
37
|
-
width = _ref2.width
|
|
38
|
-
|
|
37
|
+
width = _ref2.width,
|
|
38
|
+
match_details = _ref2.match_details;
|
|
39
|
+
return type === 'search' || width === 'sm' || (match_details === null || match_details === void 0 ? void 0 : match_details.available) === true ? 'auto' : width === 'md' ? '74px' : '90px';
|
|
39
40
|
}, function (_ref3) {
|
|
40
41
|
var width = _ref3.width;
|
|
41
42
|
return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
|
|
@@ -55,8 +56,9 @@ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templ
|
|
|
55
56
|
return type === 'search' ? 'transparent' : bgColor === 'secondary' && type !== 'search' ? '#0C141D' : '#15212F';
|
|
56
57
|
}, function (_ref6) {
|
|
57
58
|
var type = _ref6.type,
|
|
58
|
-
width = _ref6.width
|
|
59
|
-
|
|
59
|
+
width = _ref6.width,
|
|
60
|
+
match_details = _ref6.match_details;
|
|
61
|
+
return type === 'search' || width === 'sm' || (match_details === null || match_details === void 0 ? void 0 : match_details.available) === true ? 'height: auto;' : width === 'md' ? 'height: 62px;' : '';
|
|
60
62
|
}, function (props) {
|
|
61
63
|
return _tokens.colors[props.theme].filter.rgbthemeColor;
|
|
62
64
|
}, function (props) {
|
|
@@ -70,6 +72,10 @@ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templ
|
|
|
70
72
|
}, function (_ref8) {
|
|
71
73
|
var upload_type = _ref8.upload_type;
|
|
72
74
|
return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
|
|
75
|
+
}, function (props) {
|
|
76
|
+
return _tokens.colors[props.theme].tag.background;
|
|
77
|
+
}, function (props) {
|
|
78
|
+
return _tokens.colors[props.theme].card.themeColor;
|
|
73
79
|
});
|
|
74
80
|
var SeasonEpisodeContainer = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-shrink: 0;\n padding: 3px 4px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.12);\n border: 1px solid rgba(255, 255, 255, 0.08);\n color: #fff;\n text-align: center;\n font-family: 'SFUIText-Regular';\n font-size: 10px;\n line-height: 10px;\n font-style: normal;\n font-weight: 400;\n height: auto;\n width: auto;\n margin-left: 6px;\n box-sizing: border-box;\n span {\n padding: 0px 2px;\n }\n"])));
|
|
75
81
|
var formatCreationDate = function formatCreationDate(creation) {
|
|
@@ -110,7 +116,12 @@ var ContentV2 = function ContentV2(props) {
|
|
|
110
116
|
creation = props.creation,
|
|
111
117
|
extension = props.extension,
|
|
112
118
|
season_id = props.season_id,
|
|
113
|
-
isAdobe = props.isAdobe
|
|
119
|
+
isAdobe = props.isAdobe,
|
|
120
|
+
match_details = props.match_details;
|
|
121
|
+
var shouldShowMatchFields = (match_details === null || match_details === void 0 ? void 0 : match_details.available) === true;
|
|
122
|
+
var displayChips = shouldShowMatchFields ? ((match_details === null || match_details === void 0 ? void 0 : match_details.top_fields) || []).map(function (item) {
|
|
123
|
+
return item === null || item === void 0 ? void 0 : item.field;
|
|
124
|
+
}).filter(Boolean) : [];
|
|
114
125
|
var formattedCreation = formatCreationDate(creation);
|
|
115
126
|
var displayCreation = date_count_label || formattedCreation;
|
|
116
127
|
var boxId = Array.isArray(box_id) ? box_id[0] || '' : box_id || '';
|
|
@@ -311,7 +322,14 @@ var ContentV2 = function ContentV2(props) {
|
|
|
311
322
|
})))), overlapping.length > 1 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
|
|
312
323
|
theme: props.theme,
|
|
313
324
|
margin: "0"
|
|
314
|
-
}, overlapping.length)) || null)
|
|
325
|
+
}, overlapping.length)) || null), displayChips.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
326
|
+
className: "chip-row"
|
|
327
|
+
}, displayChips.map(function (chip, index) {
|
|
328
|
+
return /*#__PURE__*/_react["default"].createElement("span", {
|
|
329
|
+
className: "chip",
|
|
330
|
+
key: "".concat(chip, "-").concat(index)
|
|
331
|
+
}, chip);
|
|
332
|
+
})) : null);
|
|
315
333
|
};
|
|
316
334
|
ContentV2.propTypes = {
|
|
317
335
|
title: _propTypes["default"].string,
|
|
@@ -327,7 +345,14 @@ ContentV2.propTypes = {
|
|
|
327
345
|
type: _propTypes["default"].string,
|
|
328
346
|
titleClick: _propTypes["default"].func,
|
|
329
347
|
theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
|
|
330
|
-
isAdobe: _propTypes["default"].bool
|
|
348
|
+
isAdobe: _propTypes["default"].bool,
|
|
349
|
+
match_details: _propTypes["default"].shape({
|
|
350
|
+
available: _propTypes["default"].bool,
|
|
351
|
+
top_fields: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
352
|
+
field: _propTypes["default"].string,
|
|
353
|
+
score: _propTypes["default"].number
|
|
354
|
+
}))
|
|
355
|
+
})
|
|
331
356
|
};
|
|
332
357
|
ContentV2.defaultProps = {
|
|
333
358
|
theme: 'dark',
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.8",
|
|
4
4
|
"description": "Components for Desynova Digital",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "desynova-digital",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": "desynova-digital",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@desynova-digital/tokens": "9.3.
|
|
10
|
+
"@desynova-digital/tokens": "9.3.8",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|