@desynova-digital/components 9.3.1 → 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 (2) hide show
  1. package/atoms/pageSearchCard/pageSearchCard.js +94 -31
  2. package/package.json +2 -2
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.1",
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.1",
10
+ "@desynova-digital/tokens": "9.3.2",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },