@desynova-digital/components 9.3.0 → 9.3.2

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 (4) hide show
  1. package/atoms/cardV2/cardV2.js +3 -0
  2. package/atoms/cardV2/contentV2.js +11 -3
  3. package/atoms/pageSearchCard/pageSearchCard.js +94 -31
  4. package/package.json +2 -2
package/atoms/cardV2/cardV2.js CHANGED
@@ -83,6 +83,9 @@ CardV2.propTypes = {
83
83
  h3: _propTypes["default"].string,
84
84
  h4: _propTypes["default"].string,
85
85
  h5: _propTypes["default"].string,
86
+ episode_label: _propTypes["default"].string,
87
+ season_no: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
88
+ episode_no: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
86
89
  width: _propTypes["default"].string,
87
90
  thumbnail: _propTypes["default"].string,
88
91
  preview: _propTypes["default"].string,
package/atoms/cardV2/contentV2.js CHANGED
@@ -93,6 +93,8 @@ var formatCreationDate = function formatCreationDate(creation) {
93
93
  var ContentV2 = function ContentV2(props) {
94
94
  var title = props.title,
95
95
  episode_label = props.episode_label,
96
+ season_no = props.season_no,
97
+ episode_no = props.episode_no,
96
98
  version_label = props.version_label,
97
99
  category_label = props.category_label,
98
100
  date_count_label = props.date_count_label,
@@ -113,6 +115,10 @@ var ContentV2 = function ContentV2(props) {
113
115
  var formattedCreation = formatCreationDate(creation);
114
116
  var displayCreation = date_count_label || formattedCreation;
115
117
  var boxId = Array.isArray(box_id) ? box_id[0] || '' : box_id || '';
118
+ var normalizedEpisodeLabel = typeof episode_label === 'string' ? episode_label.trim() : episode_label;
119
+ var hasSeasonNumber = season_no !== undefined && season_no !== null && String(season_no).trim() !== '';
120
+ var hasEpisodeNumber = episode_no !== undefined && episode_no !== null && String(episode_no).trim() !== '';
121
+ var resolvedEpisodeLabel = normalizedEpisodeLabel || (hasSeasonNumber && hasEpisodeNumber ? "S".concat(season_no, " E").concat(episode_no) : '');
116
122
  var ICON_DIMENSION_MAP = {
117
123
  snp_edit: {
118
124
  width: 10,
@@ -189,7 +195,7 @@ var ContentV2 = function ContentV2(props) {
189
195
  isFooterIconHovered = _useState4[0],
190
196
  setIsFooterIconHovered = _useState4[1];
191
197
  var hasMetaRow = Boolean(version_label || category_label);
192
- var line1 = [title || h1, episode_label].filter(Boolean).join(' | ');
198
+ var line1 = [title || h1, resolvedEpisodeLabel].filter(Boolean).join(' | ');
193
199
  var line2 = [version_label, category_label].filter(Boolean).join(' | ');
194
200
  var line3 = [date_count_label, identifier_label, language_label].filter(Boolean).join(' | ');
195
201
  var combinedTooltipText = [line1, line2, line3].filter(function (s) {
@@ -213,7 +219,7 @@ var ContentV2 = function ContentV2(props) {
213
219
  }, /*#__PURE__*/_react["default"].createElement("span", {
214
220
  className: "title-text",
215
221
  title: title || h1
216
- }, title || h1), episode_label ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, null, episode_label) : null, show_page_id && asset_type !== 'sports' && !isAdobe ? /*#__PURE__*/_react["default"].createElement("span", {
222
+ }, title || h1), resolvedEpisodeLabel ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, null, resolvedEpisodeLabel) : null, show_page_id && asset_type !== 'sports' && !isAdobe ? /*#__PURE__*/_react["default"].createElement("span", {
217
223
  title: "Open Page",
218
224
  className: "files-associated-icon",
219
225
  onMouseEnter: function onMouseEnter() {
@@ -227,7 +233,7 @@ var ContentV2 = function ContentV2(props) {
227
233
  width: 8,
228
234
  height: 8,
229
235
  color: isFilesIconHovered ? '#00CEC6' : '#AFB2BA'
230
- })) : 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", {
236
+ })) : null)), (resolvedEpisodeLabel || 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", {
231
237
  className: "meta-row"
232
238
  }, version_label && /*#__PURE__*/_react["default"].createElement("span", {
233
239
  className: "meta-badge"
@@ -311,6 +317,8 @@ var ContentV2 = function ContentV2(props) {
311
317
  ContentV2.propTypes = {
312
318
  title: _propTypes["default"].string,
313
319
  episode_label: _propTypes["default"].string,
320
+ season_no: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
321
+ episode_no: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
314
322
  version_label: _propTypes["default"].string,
315
323
  category_label: _propTypes["default"].string,
316
324
  date_count_label: _propTypes["default"].string,
package/atoms/pageSearchCard/pageSearchCard.js CHANGED
@@ -12,7 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
13
  var _styledComponents = _interopRequireDefault(require("styled-components"));
14
14
  var _tokens = require("@desynova-digital/tokens");
15
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
15
+ var _icon = _interopRequireDefault(require("../icon"));
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
16
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
18
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
18
19
  var getSearchAccent = function getSearchAccent(theme) {
@@ -24,43 +25,53 @@ var capitalizeFirstLetter = function capitalizeFirstLetter(value) {
24
25
  if (typeof value !== 'string' || !value) return value;
25
26
  return "".concat(value.charAt(0).toUpperCase()).concat(value.slice(1));
26
27
  };
27
- var Card = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n width: ", ";\n height: ", ";\n border-radius: 10px;\n overflow: visible;\n cursor: pointer;\n background: #0c141d;\n flex-shrink: 0;\n box-sizing: border-box;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);\n transform: scale(1);\n transform-origin: center;\n z-index: 0;\n isolation: isolate;\n transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform;\n\n &:hover {\n transform: scale(1.035);\n z-index: 5;\n box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);\n }\n"])), function (_ref) {
28
+ var Card = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n width: ", ";\n height: ", ";\n border-radius: 10px;\n overflow: visible;\n cursor: ", ";\n background: #0c141d;\n flex-shrink: 0;\n box-sizing: border-box;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);\n transform: scale(1);\n transform-origin: center;\n z-index: 0;\n isolation: isolate;\n transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),\n box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform;\n\n &:hover {\n transform: scale(1.035);\n z-index: 5;\n box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);\n }\n\n &:hover .show-movie-open-page,\n &:focus-within .show-movie-open-page {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n }\n"])), function (_ref) {
28
29
  var width = _ref.width;
29
30
  return width || '178px';
30
31
  }, function (_ref2) {
31
32
  var height = _ref2.height;
32
33
  return height || '258px';
34
+ }, function (_ref3) {
35
+ var onClick = _ref3.onClick;
36
+ return onClick ? 'pointer' : 'default';
33
37
  });
34
38
  var Poster = _styledComponents["default"].img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n display: block;\n background: #0c141d;\n border-radius: inherit;\n\n &.fallback-image {\n object-fit: cover;\n object-position: center;\n }\n"])));
35
- var Gradient = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(12, 20, 29, 0.7) 60%, rgba(12, 20, 29, 0.97) 100%);\n"])));
36
- var Badge = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: 12px;\n left: 12px;\n display: inline-flex;\n height: 16.75px;\n padding: 2px 6px;\n align-items: center;\n justify-content: center;\n font-family: 'SFUIText-Medium';\n border-radius: 4px;\n background: ", ";\n color: #0c141d;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n letter-spacing: 0.6px;\n text-transform: uppercase;\n z-index: 2;\n"])), function (_ref3) {
37
- var theme = _ref3.theme;
39
+ var Gradient = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: linear-gradient(\n 180deg,\n rgba(0, 0, 0, 0) 30%,\n rgba(12, 20, 29, 0.7) 60%,\n rgba(12, 20, 29, 0.97) 100%\n );\n pointer-events: none;\n"])));
40
+ var Badge = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: 12px;\n left: 12px;\n display: inline-flex;\n height: 16.75px;\n padding: 2px 6px;\n align-items: center;\n justify-content: center;\n font-family: 'SFUIText-Medium';\n border-radius: 4px;\n background: ", ";\n color: #0c141d;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n letter-spacing: 0.6px;\n text-transform: uppercase;\n z-index: 2;\n"])), function (_ref4) {
41
+ var theme = _ref4.theme;
38
42
  return getSearchAccent(theme);
39
43
  });
40
- var Content = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n left: 16px;\n right: 16px;\n bottom: 16px;\n z-index: 2;\n"])));
41
- var Title = _styledComponents["default"].h3(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0;\n color: #fff;\n font-family: 'SFUIText-Medium';\n font-size: 13px;\n font-style: normal;\n font-weight: 700;\n line-height: 18px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
42
- var Subtitle = _styledComponents["default"].p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 2px 0 0;\n color: #5b7088;\n font-family: 'SFUIText-Medium';\n font-size: 10px;\n font-style: normal;\n font-weight: 400;\n line-height: 15px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
43
- var PageSearchCard = function PageSearchCard(_ref4) {
44
- var thumbnail = _ref4.thumbnail,
45
- show_name = _ref4.show_name,
46
- asset_language = _ref4.asset_language,
47
- asset_type = _ref4.asset_type,
48
- channel_name = _ref4.channel_name,
49
- _ref4$title = _ref4.title,
50
- title = _ref4$title === void 0 ? 'Ghazi Attack' : _ref4$title,
51
- _ref4$subtitle = _ref4.subtitle,
52
- subtitle = _ref4$subtitle === void 0 ? 'Star Plus' : _ref4$subtitle,
53
- _ref4$tag = _ref4.tag,
54
- tag = _ref4$tag === void 0 ? 'MOVIE' : _ref4$tag,
55
- _ref4$theme = _ref4.theme,
56
- theme = _ref4$theme === void 0 ? 'dark' : _ref4$theme,
57
- _ref4$width = _ref4.width,
58
- width = _ref4$width === void 0 ? '220px' : _ref4$width,
59
- _ref4$height = _ref4.height,
60
- height = _ref4$height === void 0 ? '292px' : _ref4$height,
61
- onClick = _ref4.onClick;
44
+ var Content = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n left: 16px;\n right: 16px;\n bottom: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n z-index: 2;\n"])));
45
+ var TextContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n min-width: 0;\n flex: 1;\n"])));
46
+ var Title = _styledComponents["default"].button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n min-width: 0;\n padding: 0;\n margin: 0;\n border: 0;\n color: #fff;\n background: transparent;\n font-family: 'SFUIText-Medium';\n font-size: 13px;\n font-style: normal;\n font-weight: 700;\n line-height: 18px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n cursor: pointer;\n\n &:hover {\n color: ", ";\n }\n"])), function (_ref5) {
47
+ var theme = _ref5.theme;
48
+ return getSearchAccent(theme);
49
+ });
50
+ var OpenPageButton = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 3px;\n border: 0;\n background: transparent;\n cursor: pointer;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity 160ms ease;\n"])));
51
+ var Subtitle = _styledComponents["default"].p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 2px 0 0;\n color: #5b7088;\n font-family: 'SFUIText-Medium';\n font-size: 10px;\n font-style: normal;\n font-weight: 400;\n line-height: 15px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
52
+ var PageSearchCard = function PageSearchCard(_ref6) {
53
+ var thumbnail = _ref6.thumbnail,
54
+ show_name = _ref6.show_name,
55
+ asset_language = _ref6.asset_language,
56
+ asset_type = _ref6.asset_type,
57
+ content_type = _ref6.content_type,
58
+ channel_name = _ref6.channel_name,
59
+ _ref6$title = _ref6.title,
60
+ title = _ref6$title === void 0 ? 'Ghazi Attack' : _ref6$title,
61
+ _ref6$subtitle = _ref6.subtitle,
62
+ subtitle = _ref6$subtitle === void 0 ? 'Star Plus' : _ref6$subtitle,
63
+ _ref6$tag = _ref6.tag,
64
+ tag = _ref6$tag === void 0 ? 'MOVIE' : _ref6$tag,
65
+ _ref6$theme = _ref6.theme,
66
+ theme = _ref6$theme === void 0 ? 'dark' : _ref6$theme,
67
+ _ref6$width = _ref6.width,
68
+ width = _ref6$width === void 0 ? '220px' : _ref6$width,
69
+ _ref6$height = _ref6.height,
70
+ height = _ref6$height === void 0 ? '292px' : _ref6$height,
71
+ onClick = _ref6.onClick,
72
+ onCardClick = _ref6.onCardClick;
62
73
  var effectiveTitle = show_name || title;
63
- var effectiveTag = asset_type || tag;
74
+ var effectiveTag = content_type || asset_type || tag;
64
75
  var normalizedAssetType = String(effectiveTag).toLowerCase();
65
76
  var effectiveSubtitle = subtitle;
66
77
  if (normalizedAssetType === 'movie') {
@@ -72,15 +83,43 @@ var PageSearchCard = function PageSearchCard(_ref4) {
72
83
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
73
84
  hasImageError = _useState2[0],
74
85
  setHasImageError = _useState2[1];
86
+ var _useState3 = (0, _react.useState)(false),
87
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
88
+ isOpenIconHovered = _useState4[0],
89
+ setIsOpenIconHovered = _useState4[1];
75
90
  (0, _react.useEffect)(function () {
76
91
  setHasImageError(!thumbnail);
77
92
  }, [thumbnail]);
78
93
  var imageSource = hasImageError ? FALLBACK_IMAGE : thumbnail;
94
+ var accentColor = getSearchAccent(theme);
95
+ var handleNavigate = function handleNavigate(event) {
96
+ event.stopPropagation();
97
+ if (onClick) onClick(event);
98
+ };
99
+ var handleCardClick = function handleCardClick(event) {
100
+ if (event.type === 'keydown' && event.key !== 'Enter' && event.key !== ' ') {
101
+ return;
102
+ }
103
+ if (event.type === 'keydown') event.preventDefault();
104
+ if (onCardClick) {
105
+ onCardClick(event, {
106
+ searchText: effectiveTitle,
107
+ asset_language: asset_language,
108
+ asset_type: effectiveTag,
109
+ content_type: effectiveTag,
110
+ channel_name: channel_name
111
+ });
112
+ }
113
+ };
79
114
  return /*#__PURE__*/_react["default"].createElement(Card, {
80
115
  width: width,
81
116
  height: height,
82
117
  theme: theme,
83
- onClick: onClick
118
+ role: onCardClick ? 'button' : undefined,
119
+ tabIndex: onCardClick ? 0 : undefined,
120
+ "aria-label": onCardClick ? "Filter results by ".concat(effectiveTitle) : undefined,
121
+ onClick: onCardClick ? handleCardClick : undefined,
122
+ onKeyDown: onCardClick ? handleCardClick : undefined
84
123
  }, /*#__PURE__*/_react["default"].createElement(Poster, {
85
124
  src: imageSource,
86
125
  alt: effectiveTitle,
@@ -90,13 +129,36 @@ var PageSearchCard = function PageSearchCard(_ref4) {
90
129
  }
91
130
  }), /*#__PURE__*/_react["default"].createElement(Gradient, null), /*#__PURE__*/_react["default"].createElement(Badge, {
92
131
  theme: theme
93
- }, effectiveTag), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(Title, null, effectiveTitle), effectiveSubtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, effectiveSubtitle) : null));
132
+ }, effectiveTag), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(TextContent, null, /*#__PURE__*/_react["default"].createElement(Title, {
133
+ type: "button",
134
+ theme: theme,
135
+ title: effectiveTitle,
136
+ onClick: handleNavigate
137
+ }, effectiveTitle), effectiveSubtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, effectiveSubtitle) : null), onClick ? /*#__PURE__*/_react["default"].createElement(OpenPageButton, {
138
+ className: "show-movie-open-page",
139
+ type: "button",
140
+ title: "Open Page",
141
+ "aria-label": "Open ".concat(effectiveTitle, " page"),
142
+ onMouseEnter: function onMouseEnter() {
143
+ return setIsOpenIconHovered(true);
144
+ },
145
+ onMouseLeave: function onMouseLeave() {
146
+ return setIsOpenIconHovered(false);
147
+ },
148
+ onClick: handleNavigate
149
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
150
+ name: "files-associated",
151
+ width: 16,
152
+ height: 16,
153
+ color: isOpenIconHovered ? accentColor : '#AFB2BA'
154
+ })) : null));
94
155
  };
95
156
  PageSearchCard.propTypes = {
96
157
  thumbnail: _propTypes["default"].string,
97
158
  show_name: _propTypes["default"].string,
98
159
  asset_language: _propTypes["default"].string,
99
160
  asset_type: _propTypes["default"].string,
161
+ content_type: _propTypes["default"].string,
100
162
  channel_name: _propTypes["default"].string,
101
163
  title: _propTypes["default"].string,
102
164
  subtitle: _propTypes["default"].string,
@@ -104,6 +166,7 @@ PageSearchCard.propTypes = {
104
166
  theme: _propTypes["default"].string,
105
167
  width: _propTypes["default"].string,
106
168
  height: _propTypes["default"].string,
107
- onClick: _propTypes["default"].func
169
+ onClick: _propTypes["default"].func,
170
+ onCardClick: _propTypes["default"].func
108
171
  };
109
172
  var _default = exports["default"] = PageSearchCard;
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.3.0",
3
+ "version": "9.3.2",
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.0",
10
+ "@desynova-digital/tokens": "9.3.2",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },