@desynova-digital/components 9.2.2 → 9.2.4
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 +3 -2
- package/atoms/cardV2/contentV2.js +42 -20
- package/atoms/cardV2/thumbnailV2.js +1 -1
- package/atoms/icon/icon.story.js +230 -203
- package/atoms/icon/icons.json +1 -1
- package/atoms/timeCodeInput/timeCodeMSInput.js +6 -4
- package/atoms/timeCodeInput/timeCodeMainInput.js +6 -4
- package/atoms/timeCodeInput/timeCodeStandardInput.js +6 -4
- package/molecules/richTextInputV2/RichTextInputV2.js +10 -2
- package/package.json +2 -2
package/atoms/cardV2/cardV2.js
CHANGED
|
@@ -47,8 +47,9 @@ var CardStyles = _styledComponents["default"].div(_templateObject6 || (_template
|
|
|
47
47
|
var upload_type = _ref3.upload_type;
|
|
48
48
|
return upload_type === 'RC' ? "\n 0 0 0 1px rgba(255,140,0,0.45),\n 0 12px 35px rgba(0,0,0,0.55),\n 0 0 28px rgba(255,140,0,0.18)\n " : "\n 0 0 0 1px rgba(13,247,169,0.45),\n 0 12px 35px rgba(0,0,0,0.55),\n 0 0 28px rgba(13,247,169,0.18)\n ";
|
|
49
49
|
}, function (_ref4) {
|
|
50
|
-
var upload_type = _ref4.upload_type
|
|
51
|
-
|
|
50
|
+
var upload_type = _ref4.upload_type,
|
|
51
|
+
ingest_db_id = _ref4.ingest_db_id;
|
|
52
|
+
return upload_type === 'RC' ? 'rgba(255, 141, 41, 0.2)' : !ingest_db_id ? 'rgba(48, 63, 81, 0.2)' : 'rgba(24, 185, 110, 0.2)';
|
|
52
53
|
});
|
|
53
54
|
var CardV2 = function CardV2(props) {
|
|
54
55
|
var width = props.width,
|
|
@@ -32,7 +32,7 @@ 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 &.no-meta-row {\n margin-top: 6px;\n }\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 8px 8px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\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 column-gap: 10px
|
|
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 8px 8px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n &.no-meta-row {\n height: ", ";\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) {
|
|
36
36
|
var type = _ref2.type,
|
|
37
37
|
width = _ref2.width;
|
|
38
38
|
return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '74px' : '90px';
|
|
@@ -51,18 +51,22 @@ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templ
|
|
|
51
51
|
var bgColor = _ref5.bgColor,
|
|
52
52
|
type = _ref5.type;
|
|
53
53
|
return type === 'search' ? 'transparent' : bgColor === 'secondary' && type !== 'search' ? '#0C141D' : '#15212F';
|
|
54
|
+
}, function (_ref6) {
|
|
55
|
+
var type = _ref6.type,
|
|
56
|
+
width = _ref6.width;
|
|
57
|
+
return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '62px' : '64px';
|
|
54
58
|
}, function (props) {
|
|
55
59
|
return _tokens.colors[props.theme].filter.rgbthemeColor;
|
|
56
60
|
}, function (props) {
|
|
57
61
|
return _tokens.colors[props.theme].card.themeColor;
|
|
58
|
-
}, function (
|
|
59
|
-
var upload_type =
|
|
62
|
+
}, function (_ref7) {
|
|
63
|
+
var upload_type = _ref7.upload_type;
|
|
60
64
|
var isRC = (upload_type === null || upload_type === void 0 ? void 0 : upload_type.toLowerCase()) === 'rc';
|
|
61
65
|
var color = isRC ? '#ff6327' : '#00CEC6';
|
|
62
66
|
var bg = isRC ? 'rgba(255, 99, 39, 0.1)' : 'rgba(0, 206, 198, 0.1)';
|
|
63
|
-
return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
64
|
-
}, function (
|
|
65
|
-
var upload_type =
|
|
67
|
+
return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n border: 1px solid ", ";\n color: ", ";\n background-color: ", ";\n "])), color, color, bg);
|
|
68
|
+
}, function (_ref8) {
|
|
69
|
+
var upload_type = _ref8.upload_type;
|
|
66
70
|
return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
|
|
67
71
|
});
|
|
68
72
|
var SeasonEpisodeContainer = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-shrink: 0;\n padding: 2px 6px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: 3px;\n background: rgba(255, 255, 255, 0.1);\n color: var(--Color-Text-color-Text-500, #999);\n text-align: center;\n font-family: 'SFUITEXT-LIGHT';\n font-size: 8px;\n font-style: normal;\n font-weight: 400;\n height: auto;\n width: auto;\n margin-left: 6px;\n span {\n padding: 0px 2px;\n }\n"])));
|
|
@@ -75,13 +79,9 @@ var ContentV2 = function ContentV2(props) {
|
|
|
75
79
|
identifier_label = props.identifier_label,
|
|
76
80
|
language_label = props.language_label,
|
|
77
81
|
isSegment = props.isSegment,
|
|
78
|
-
type = props.type,
|
|
79
|
-
width = props.width,
|
|
80
82
|
titleClick = props.titleClick,
|
|
81
83
|
show_page_id = props.show_page_id,
|
|
82
84
|
overlapping = props.overlapping,
|
|
83
|
-
theme = props.theme,
|
|
84
|
-
upload_type = props.upload_type,
|
|
85
85
|
icon_status = props.icon_status,
|
|
86
86
|
asset_type = props.asset_type,
|
|
87
87
|
h1 = props.h1;
|
|
@@ -98,6 +98,10 @@ var ContentV2 = function ContentV2(props) {
|
|
|
98
98
|
width: 12,
|
|
99
99
|
height: 10
|
|
100
100
|
},
|
|
101
|
+
subtitle: {
|
|
102
|
+
width: 12,
|
|
103
|
+
height: 10
|
|
104
|
+
},
|
|
101
105
|
archive: {
|
|
102
106
|
width: 10,
|
|
103
107
|
height: 10
|
|
@@ -112,13 +116,14 @@ var ContentV2 = function ContentV2(props) {
|
|
|
112
116
|
}
|
|
113
117
|
};
|
|
114
118
|
var ICON_LABEL_MAP = {
|
|
115
|
-
snp_edit: 'SNP
|
|
116
|
-
pgm_edit_V2: 'PGM
|
|
119
|
+
snp_edit: 'SNP Edit',
|
|
120
|
+
pgm_edit_V2: 'PGM Edit',
|
|
117
121
|
archive: 'Archive',
|
|
118
122
|
delivery: 'Delivery',
|
|
119
123
|
dubbing_review: 'Dubbing Review',
|
|
120
124
|
subtitle_assign: 'Subtitle',
|
|
121
|
-
file_ingest: 'Ingest'
|
|
125
|
+
file_ingest: 'Ingest',
|
|
126
|
+
subtitle: 'Subtitle'
|
|
122
127
|
};
|
|
123
128
|
var getIconLabel = function getIconLabel(iconName) {
|
|
124
129
|
return ICON_LABEL_MAP[iconName] || (iconName === null || iconName === void 0 ? void 0 : iconName.replace(/_/g, ' ')) || '';
|
|
@@ -146,12 +151,21 @@ var ContentV2 = function ContentV2(props) {
|
|
|
146
151
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
147
152
|
isFilesIconHovered = _useState2[0],
|
|
148
153
|
setIsFilesIconHovered = _useState2[1];
|
|
149
|
-
var
|
|
150
|
-
|
|
151
|
-
|
|
154
|
+
var _useState3 = (0, _react.useState)(false),
|
|
155
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
156
|
+
isFooterIconHovered = _useState4[0],
|
|
157
|
+
setIsFooterIconHovered = _useState4[1];
|
|
158
|
+
var hasMetaRow = Boolean(version_label || category_label);
|
|
159
|
+
var line1 = [title || h1, episode_label].filter(Boolean).join(' | ');
|
|
160
|
+
var line2 = [version_label, category_label].filter(Boolean).join(' | ');
|
|
161
|
+
var line3 = [date_count_label, identifier_label, language_label].filter(Boolean).join(' | ');
|
|
162
|
+
var combinedTooltipText = [line1, line2, line3].filter(function (s) {
|
|
163
|
+
return s && s.trim();
|
|
164
|
+
}).join('\n');
|
|
165
|
+
var contentTooltipTitle = isFooterIconHovered ? '' : combinedTooltipText;
|
|
152
166
|
return /*#__PURE__*/_react["default"].createElement(ContentStyles, (0, _extends2["default"])({}, props, {
|
|
153
|
-
className: "asset-card-content",
|
|
154
|
-
title:
|
|
167
|
+
className: "asset-card-content".concat(hasMetaRow ? '' : ' no-meta-row'),
|
|
168
|
+
title: contentTooltipTitle
|
|
155
169
|
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
156
170
|
className: "title-parent"
|
|
157
171
|
}, /*#__PURE__*/_react["default"].createElement(TitleStyles, {
|
|
@@ -165,6 +179,7 @@ var ContentV2 = function ContentV2(props) {
|
|
|
165
179
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
166
180
|
className: "title-text"
|
|
167
181
|
}, title || h1), episode_label ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, null, episode_label) : null, show_page_id && asset_type !== 'sports' ? /*#__PURE__*/_react["default"].createElement("span", {
|
|
182
|
+
title: "Open Page",
|
|
168
183
|
className: "files-associated-icon",
|
|
169
184
|
onMouseEnter: function onMouseEnter() {
|
|
170
185
|
return setIsFilesIconHovered(true);
|
|
@@ -192,13 +207,20 @@ var ContentV2 = function ContentV2(props) {
|
|
|
192
207
|
}, date_count_label), identifier_label && /*#__PURE__*/_react["default"].createElement("span", {
|
|
193
208
|
className: "footer-text"
|
|
194
209
|
}, identifier_label), language_label && /*#__PURE__*/_react["default"].createElement("span", {
|
|
195
|
-
className: "footer-text"
|
|
210
|
+
className: "footer-text-language"
|
|
196
211
|
}, language_label), /*#__PURE__*/_react["default"].createElement("span", {
|
|
197
212
|
className: "footer-icons"
|
|
198
213
|
}, footerIcons.map(function (icon) {
|
|
199
214
|
return /*#__PURE__*/_react["default"].createElement("span", {
|
|
200
215
|
key: icon.name,
|
|
201
|
-
className: "footer-icon"
|
|
216
|
+
className: "footer-icon",
|
|
217
|
+
title: icon.tooltipLabel,
|
|
218
|
+
onMouseEnter: function onMouseEnter() {
|
|
219
|
+
return setIsFooterIconHovered(true);
|
|
220
|
+
},
|
|
221
|
+
onMouseLeave: function onMouseLeave() {
|
|
222
|
+
return setIsFooterIconHovered(false);
|
|
223
|
+
}
|
|
202
224
|
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
203
225
|
name: icon.name,
|
|
204
226
|
color: icon.color,
|
|
@@ -67,7 +67,7 @@ var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
|
|
|
67
67
|
return _tokens.colors[props.theme].card.themeColor;
|
|
68
68
|
});
|
|
69
69
|
var CardHeader = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n padding: 10px;\n"])));
|
|
70
|
-
var BottomActionContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n bottom: 8px;\n right:
|
|
70
|
+
var BottomActionContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n bottom: 8px;\n right: 1px;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 6px;\n z-index: 3;\n opacity: 1;\n"])));
|
|
71
71
|
var ThumbnailV2 = function ThumbnailV2(props) {
|
|
72
72
|
var theme = props.theme,
|
|
73
73
|
width = props.width,
|