@desynova-digital/components 9.2.2 → 9.2.3
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 +36 -15
- package/atoms/cardV2/thumbnailV2.js +2 -2
- package/atoms/icon/icon.story.js +230 -203
- 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;\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
|
|
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 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 }\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"])));
|
|
@@ -112,8 +116,8 @@ 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',
|
|
@@ -146,12 +150,21 @@ var ContentV2 = function ContentV2(props) {
|
|
|
146
150
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
147
151
|
isFilesIconHovered = _useState2[0],
|
|
148
152
|
setIsFilesIconHovered = _useState2[1];
|
|
149
|
-
var
|
|
150
|
-
|
|
151
|
-
|
|
153
|
+
var _useState3 = (0, _react.useState)(false),
|
|
154
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
155
|
+
isFooterIconHovered = _useState4[0],
|
|
156
|
+
setIsFooterIconHovered = _useState4[1];
|
|
157
|
+
var hasMetaRow = Boolean(version_label || category_label);
|
|
158
|
+
var line1 = [title || h1, episode_label].filter(Boolean).join(' | ');
|
|
159
|
+
var line2 = [version_label, category_label].filter(Boolean).join(' | ');
|
|
160
|
+
var line3 = [date_count_label, identifier_label, language_label].filter(Boolean).join(' | ');
|
|
161
|
+
var combinedTooltipText = [line1, line2, line3].filter(function (s) {
|
|
162
|
+
return s && s.trim();
|
|
163
|
+
}).join('\n');
|
|
164
|
+
var contentTooltipTitle = isFooterIconHovered ? '' : combinedTooltipText;
|
|
152
165
|
return /*#__PURE__*/_react["default"].createElement(ContentStyles, (0, _extends2["default"])({}, props, {
|
|
153
|
-
className: "asset-card-content",
|
|
154
|
-
title:
|
|
166
|
+
className: "asset-card-content".concat(hasMetaRow ? '' : ' no-meta-row'),
|
|
167
|
+
title: contentTooltipTitle
|
|
155
168
|
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
156
169
|
className: "title-parent"
|
|
157
170
|
}, /*#__PURE__*/_react["default"].createElement(TitleStyles, {
|
|
@@ -165,6 +178,7 @@ var ContentV2 = function ContentV2(props) {
|
|
|
165
178
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
166
179
|
className: "title-text"
|
|
167
180
|
}, title || h1), episode_label ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, null, episode_label) : null, show_page_id && asset_type !== 'sports' ? /*#__PURE__*/_react["default"].createElement("span", {
|
|
181
|
+
title: "Open Page",
|
|
168
182
|
className: "files-associated-icon",
|
|
169
183
|
onMouseEnter: function onMouseEnter() {
|
|
170
184
|
return setIsFilesIconHovered(true);
|
|
@@ -192,13 +206,20 @@ var ContentV2 = function ContentV2(props) {
|
|
|
192
206
|
}, date_count_label), identifier_label && /*#__PURE__*/_react["default"].createElement("span", {
|
|
193
207
|
className: "footer-text"
|
|
194
208
|
}, identifier_label), language_label && /*#__PURE__*/_react["default"].createElement("span", {
|
|
195
|
-
className: "footer-text"
|
|
209
|
+
className: "footer-text-language"
|
|
196
210
|
}, language_label), /*#__PURE__*/_react["default"].createElement("span", {
|
|
197
211
|
className: "footer-icons"
|
|
198
212
|
}, footerIcons.map(function (icon) {
|
|
199
213
|
return /*#__PURE__*/_react["default"].createElement("span", {
|
|
200
214
|
key: icon.name,
|
|
201
|
-
className: "footer-icon"
|
|
215
|
+
className: "footer-icon",
|
|
216
|
+
title: icon.tooltipLabel,
|
|
217
|
+
onMouseEnter: function onMouseEnter() {
|
|
218
|
+
return setIsFooterIconHovered(true);
|
|
219
|
+
},
|
|
220
|
+
onMouseLeave: function onMouseLeave() {
|
|
221
|
+
return setIsFooterIconHovered(false);
|
|
222
|
+
}
|
|
202
223
|
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
203
224
|
name: icon.name,
|
|
204
225
|
color: icon.color,
|
|
@@ -23,7 +23,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
23
23
|
var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n background: rgba(0, 0, 0, 0.5);\n"])));
|
|
24
24
|
var assetStyles = {
|
|
25
25
|
folder: {
|
|
26
|
-
backgroundColor: '#
|
|
26
|
+
backgroundColor: '#2f3031',
|
|
27
27
|
backgroundSize: 'inherit'
|
|
28
28
|
},
|
|
29
29
|
asset: {
|
|
@@ -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,
|