@desynova-digital/components 9.2.10 → 9.2.12

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.
Files changed (3) hide show
  1. package/atoms/cardV2/contentV2.js +20 -12
  2. package/atoms/icon/icons.json +2 -2
  3. package/package.json +2 -2
package/atoms/cardV2/contentV2.js CHANGED
@@ -33,7 +33,7 @@ var TitleStyles = (0, _styledComponents["default"])(function (props) {
33
33
  return isTitleClick ? 'pointer' : 'default';
34
34
  });
35
35
  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"])));
36
- 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
+ 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\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) {
37
37
  var type = _ref2.type,
38
38
  width = _ref2.width;
39
39
  return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '74px' : '90px';
@@ -56,18 +56,24 @@ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templ
56
56
  var type = _ref6.type,
57
57
  width = _ref6.width;
58
58
  return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '62px' : '64px';
59
+ }, function (_ref7) {
60
+ var type = _ref7.type,
61
+ width = _ref7.width;
62
+ if (type === 'search' || width === 'sm') return 'height: auto;';
63
+ if (width === 'md') return 'height: 62px;';
64
+ return '';
59
65
  }, function (props) {
60
66
  return _tokens.colors[props.theme].filter.rgbthemeColor;
61
67
  }, function (props) {
62
68
  return _tokens.colors[props.theme].card.themeColor;
63
- }, function (_ref7) {
64
- var upload_type = _ref7.upload_type;
69
+ }, function (_ref8) {
70
+ var upload_type = _ref8.upload_type;
65
71
  var isRC = (upload_type === null || upload_type === void 0 ? void 0 : upload_type.toLowerCase()) === 'rc';
66
72
  var color = isRC ? '#ff6327' : '#00CEC6';
67
73
  var bg = isRC ? 'rgba(255, 99, 39, 0.1)' : 'rgba(0, 206, 198, 0.1)';
68
74
  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n border: 1px solid ", ";\n color: ", ";\n background-color: ", ";\n "])), color, color, bg);
69
- }, function (_ref8) {
70
- var upload_type = _ref8.upload_type;
75
+ }, function (_ref9) {
76
+ var upload_type = _ref9.upload_type;
71
77
  return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
72
78
  });
73
79
  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"])));
@@ -85,7 +91,9 @@ var ContentV2 = function ContentV2(props) {
85
91
  overlapping = props.overlapping,
86
92
  icon_status = props.icon_status,
87
93
  asset_type = props.asset_type,
88
- h1 = props.h1;
94
+ h1 = props.h1,
95
+ creation = props.creation,
96
+ extension = props.extension;
89
97
  var ICON_DIMENSION_MAP = {
90
98
  snp_edit: {
91
99
  width: 10,
@@ -171,7 +179,7 @@ var ContentV2 = function ContentV2(props) {
171
179
  var contentTooltipTitle = isFooterIconHovered ? '' : combinedTooltipText;
172
180
  return /*#__PURE__*/_react["default"].createElement(ContentStyles, (0, _extends2["default"])({}, props, {
173
181
  className: "asset-card-content".concat(hasMetaRow ? '' : ' no-meta-row')
174
- // title={contentTooltipTitle} hide as per UI team
182
+ // title={contentTooltipTitle}
175
183
  }), /*#__PURE__*/_react["default"].createElement("div", {
176
184
  className: "title-parent"
177
185
  }, /*#__PURE__*/_react["default"].createElement(TitleStyles, {
@@ -198,7 +206,7 @@ var ContentV2 = function ContentV2(props) {
198
206
  width: 8,
199
207
  height: 8,
200
208
  color: isFilesIconHovered ? '#00CEC6' : '#AFB2BA'
201
- })) : null)), (episode_label || version_label || category_label || date_count_label || identifier_label || isSegment) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (version_label || category_label) && /*#__PURE__*/_react["default"].createElement("div", {
209
+ })) : null)), (episode_label || version_label || category_label || date_count_label || identifier_label || isSegment || extension || creation) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (version_label || category_label) && /*#__PURE__*/_react["default"].createElement("div", {
202
210
  className: "meta-row"
203
211
  }, version_label && /*#__PURE__*/_react["default"].createElement("span", {
204
212
  className: "meta-badge"
@@ -206,13 +214,13 @@ var ContentV2 = function ContentV2(props) {
206
214
  className: "meta-text"
207
215
  }, category_label), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
208
216
  className: "segment-indicator"
209
- }, "S")), (date_count_label || identifier_label || language_label) && /*#__PURE__*/_react["default"].createElement("div", {
217
+ }, "S")), (date_count_label || identifier_label || language_label || extension || creation) && /*#__PURE__*/_react["default"].createElement("div", {
210
218
  className: "footer-row"
211
- }, date_count_label && /*#__PURE__*/_react["default"].createElement("span", {
219
+ }, (date_count_label || creation) && /*#__PURE__*/_react["default"].createElement("span", {
212
220
  className: "footer-text"
213
- }, date_count_label), identifier_label && /*#__PURE__*/_react["default"].createElement("span", {
221
+ }, date_count_label || creation), (identifier_label || extension) && /*#__PURE__*/_react["default"].createElement("span", {
214
222
  className: "footer-text"
215
- }, identifier_label), language_label && /*#__PURE__*/_react["default"].createElement("span", {
223
+ }, identifier_label || extension), language_label && /*#__PURE__*/_react["default"].createElement("span", {
216
224
  className: "footer-text-language"
217
225
  }, language_label), /*#__PURE__*/_react["default"].createElement("span", {
218
226
  className: "footer-icons"
package/atoms/icon/icons.json CHANGED
@@ -1966,8 +1966,8 @@
1966
1966
  "paths": [
1967
1967
  "M7.125 9.375L12.375 6L7.125 2.625V9.375ZM4.5 12C4.0875 12 3.73438 11.8531 3.44063 11.5594C3.14688 11.2656 3 10.9125 3 10.5V1.5C3 1.0875 3.14688 0.734375 3.44063 0.440625C3.73438 0.146875 4.0875 0 4.5 0H13.5C13.9125 0 14.2656 0.146875 14.5594 0.440625C14.8531 0.734375 15 1.0875 15 1.5V10.5C15 10.9125 14.8531 11.2656 14.5594 11.5594C14.2656 11.8531 13.9125 12 13.5 12H4.5ZM1.5 15C1.0875 15 0.734375 14.8531 0.440625 14.5594C0.146875 14.2656 0 13.9125 0 13.5V3H1.5V13.5H12V15H1.5Z"
1968
1968
  ],
1969
- "width": 14,
1970
- "height": 14
1969
+ "width": 15,
1970
+ "height": 15
1971
1971
  },
1972
1972
  "folder-icon": {
1973
1973
  "paths": [
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.2.10",
3
+ "version": "9.2.12",
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.2.10",
10
+ "@desynova-digital/tokens": "9.2.12",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },