@desynova-digital/components 9.3.1 → 9.3.3

package/atoms/cardV2/thumbnailV2.js

@@ -14,7 +14,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tokens = require("@desynova-digital/tokens");
 var _icon = _interopRequireDefault(require("../../atoms/icon"));
-var _tokens2 = require("../../../tokens");
 var _statusV = _interopRequireDefault(require("../../../tokens/statusV2"));
 var _cardV = require("./cardV2");
 var _utils = require("../../_helpers/utils");
@@ -23,6 +22,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 // styles
 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); }
 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; }
+var DEFAULT_THUMBNAIL_URL = "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png";
+var DEFAULT_FILE_TYPES = ["document", "audio", "video", "music", "image", "file", "folder"];
 var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: rgba(0, 0, 0, 0.5);\n"])));
 var assetStyles = {
   folder: {
@@ -292,6 +293,9 @@ var getStatusLabel = function getStatusLabel(status) {
   var _ARCHIVED_STATUS_CONF2;
   return ((_ARCHIVED_STATUS_CONF2 = ARCHIVED_STATUS_CONFIG[normalizeStatusCode(status)]) === null || _ARCHIVED_STATUS_CONF2 === void 0 ? void 0 : _ARCHIVED_STATUS_CONF2.label) || null;
 };
+var getNormalizedFileType = function getNormalizedFileType(fileType) {
+  return String(fileType || "").trim().toLowerCase();
+};
 var ThumbnailV2 = function ThumbnailV2(props) {
   var theme = props.theme,
     width = props.width,
@@ -333,6 +337,11 @@ var ThumbnailV2 = function ThumbnailV2(props) {
   var displayDuration = hasDuration ? getDisplayTimecode(durationValue, effectiveFrameRate) : "";
   var supportsDuration = ["audio", "video"].includes(String(file_type || "").trim().toLowerCase());
   var displayAssetType = asset_type === undefined || asset_type === null ? "" : String(asset_type).trim();
+  var rawThumbnail = typeof props.thumbnail === "string" ? props.thumbnail.trim() : "";
+  var rawIframeurl = typeof props.iframeurl === "string" ? props.iframeurl.trim() : "";
+  var hasNoMediaSources = !rawThumbnail && !rawIframeurl;
+  var normalizedFileType = getNormalizedFileType(file_type);
+  var isVideoFileType = normalizedFileType === "video";
   var actionItems = Array.isArray(actions) ? actions : [];
   var isSegmentCard = Boolean(isSegment || is_segment);
   var totalSeconds = getTimeInSeconds(resolvedDuration, effectiveFrameRate);
@@ -345,18 +354,30 @@ var ThumbnailV2 = function ThumbnailV2(props) {
   var segmentWidthPercent = hasSegmentTimeline ? Math.min(100 - segmentLeftPercent, Math.max(1, (segmentEndSeconds - segmentStartSeconds) / totalSeconds * 100)) : 0;
   var segmentCenterPercent = segmentLeftPercent + segmentWidthPercent / 2;
   var segmentPopupAlignment = segmentCenterPercent < 40 ? "start" : segmentCenterPercent > 60 ? "end" : "center";
-  var _useState5 = (0, _react.useState)(null),
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    statusIndex = _useState6[0],
-    setStatusIndex = _useState6[1];
+    isClickPrevented = _useState6[0],
+    setClickPreventation = _useState6[1];
   var _useState7 = (0, _react.useState)(false),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    isClickPrevented = _useState8[0],
-    setClickPreventation = _useState8[1];
+    showTopRightAction = _useState8[0],
+    setShowTopRightAction = _useState8[1];
   var _useState9 = (0, _react.useState)(false),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    showTopRightAction = _useState10[0],
-    setShowTopRightAction = _useState10[1];
+    hasThumbnailLoaded = _useState10[0],
+    setHasThumbnailLoaded = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    hasThumbnailError = _useState12[0],
+    setHasThumbnailError = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    hasIframeLoaded = _useState14[0],
+    setHasIframeLoaded = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    hasIframeError = _useState16[0],
+    setHasIframeError = _useState16[1];
   var iframeImageBlockRef = (0, _react.useRef)(null);
   var iframeImageRef = (0, _react.useRef)(null);
   var hoverPointerRef = (0, _react.useRef)(null);
@@ -379,11 +400,47 @@ var ThumbnailV2 = function ThumbnailV2(props) {
     }
   }, [actionItems]);
   (0, _react.useEffect)(function () {
-    var index = _tokens2.CARD_ASSET_STATUS.findIndex(function (label) {
-      return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(" ").join("_") : []);
-    });
-    setStatusIndex(index);
-  }, [upload_status, card_status]);
+    var isMounted = true;
+    var preloaders = [];
+
+    /**
+     * This function preloads an image from the provided URL and handles its load and error states.
+     * @param {string} src URL of the image to load.
+     * @param {Function} setLoaded State setter for successful image loading.
+     * @param {Function} setError State setter for image loading failure.
+     */
+
+    var loadImage = function loadImage(src, setLoaded, setError) {
+      setLoaded(false);
+      setError(false);
+      if (!src) {
+        setError(true);
+        return;
+      }
+      var image = new Image();
+      image.onload = function () {
+        if (!isMounted) return;
+        setLoaded(true);
+        setError(false);
+      };
+      image.onerror = function () {
+        if (!isMounted) return;
+        setLoaded(false);
+        setError(true);
+      };
+      image.src = src;
+      preloaders.push(image);
+    };
+    loadImage(rawThumbnail, setHasThumbnailLoaded, setHasThumbnailError);
+    loadImage(rawIframeurl, setHasIframeLoaded, setHasIframeError);
+    return function () {
+      isMounted = false;
+      preloaders.forEach(function (image) {
+        image.onload = null;
+        image.onerror = null;
+      });
+    };
+  }, [rawThumbnail, rawIframeurl]);
   (0, _react.useEffect)(function () {
     if (!showTopRightAction) return;
     var handleClick = function handleClick(e) {
@@ -446,9 +503,14 @@ var ThumbnailV2 = function ThumbnailV2(props) {
       onNestedDropdownSelect(item);
     }
   }, [onNestedDropdownSelect]);
+  var resolvedIconName = normalizedFileType === "video" && value == "collateral" ? "video-icon" : DEFAULT_FILE_TYPES.includes(normalizedFileType) ? "".concat(normalizedFileType, "-icon") : "unsupportedFile-icon";
+  var shouldShowThumbnailImage = !hasNoMediaSources && hasThumbnailLoaded;
+  var shouldShowDefaultThumbnail = !hasNoMediaSources && isVideoFileType && rawThumbnail && !hasThumbnailLoaded;
+  var shouldShowFileTypeIcon = Boolean(file_type) && (hasNoMediaSources || !shouldShowThumbnailImage && !shouldShowDefaultThumbnail);
+  var shouldRenderIframePreview = hasIframeLoaded && !hasIframeError;
   return /*#__PURE__*/_react["default"].createElement(ThumbnailStyles, {
     width: width,
-    thumbnail: thumbnail,
+    thumbnail: shouldShowThumbnailImage ? rawThumbnail : shouldShowDefaultThumbnail ? DEFAULT_THUMBNAIL_URL : "",
     isClickPrevented: isClickPrevented,
     onClick: handleThumbnailClick,
     theme: props.theme,
@@ -538,15 +600,15 @@ var ThumbnailV2 = function ThumbnailV2(props) {
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tooltip"
     }, item.title));
-  })) || null, file_type && !thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
+  })) || null, shouldShowFileTypeIcon ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "thumbnail-image-block background-block"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "circle"
   }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-    name: file_type == "video" && value == "collateral" ? "video-icon" : "".concat(file_type, "-icon"),
+    name: resolvedIconName,
     width: 15,
     height: 15
-  }))) : null, iframeurl && /*#__PURE__*/_react["default"].createElement("div", {
+  }))) : null, shouldRenderIframePreview && /*#__PURE__*/_react["default"].createElement("div", {
     onMouseMove: handleMouseMove,
     className: "iframe-image-block background-block",
     ref: iframeImageBlockRef
@@ -556,7 +618,7 @@ var ThumbnailV2 = function ThumbnailV2(props) {
   }), /*#__PURE__*/_react["default"].createElement("img", {
     ref: iframeImageRef,
     className: "iframe-image",
-    src: iframeurl,
+    src: rawIframeurl,
     alt: "preview"
   })) || null, isSearchPageCard && supportsDuration && displayDuration ? /*#__PURE__*/_react["default"].createElement(DurationBadge, null, displayDuration) : null);
 };
@@ -590,7 +652,7 @@ ThumbnailV2.propTypes = {
 ThumbnailV2.defaultProps = {
   theme: "dark",
   width: "lg",
-  thumbnail: "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png",
+  thumbnail: DEFAULT_THUMBNAIL_URL,
   iframeurl: "",
   isAdobe: false,
   isSearchPageCard: false

package/atoms/icon/icons.json

@@ -2019,6 +2019,14 @@
       ],
       "width": 14,
       "height": 14
+    },
+     "unsupportedFile-icon": {
+      "viewBox": "0 -960 960 960",
+      "paths": [
+        "M160-160q-33 0-56.5-23.5T80-240v-120h360q33 0 56.5-23.5T520-440v-360h280q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160ZM80-400v-240q0-33 23.5-56.5T160-720h240L80-400Zm153-40 207-207v207H233Z"
+      ],
+      "width": 24,
+      "height": 24
     }
   }
 }

package/atoms/pageSearchCard/pageSearchCard.js

@@ -12,7 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _tokens = require("@desynova-digital/tokens");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _icon = _interopRequireDefault(require("../icon"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 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); }
 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; }
 var getSearchAccent = function getSearchAccent(theme) {
@@ -24,43 +25,53 @@ var capitalizeFirstLetter = function capitalizeFirstLetter(value) {
   if (typeof value !== 'string' || !value) return value;
   return "".concat(value.charAt(0).toUpperCase()).concat(value.slice(1));
 };
-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) {
+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) {
   var width = _ref.width;
   return width || '178px';
 }, function (_ref2) {
   var height = _ref2.height;
   return height || '258px';
+}, function (_ref3) {
+  var onClick = _ref3.onClick;
+  return onClick ? 'pointer' : 'default';
 });
 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"])));
-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"])));
-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) {
-  var theme = _ref3.theme;
+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"])));
+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) {
+  var theme = _ref4.theme;
   return getSearchAccent(theme);
 });
-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"])));
-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"])));
-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"])));
-var PageSearchCard = function PageSearchCard(_ref4) {
-  var thumbnail = _ref4.thumbnail,
-    show_name = _ref4.show_name,
-    asset_language = _ref4.asset_language,
-    asset_type = _ref4.asset_type,
-    channel_name = _ref4.channel_name,
-    _ref4$title = _ref4.title,
-    title = _ref4$title === void 0 ? 'Ghazi Attack' : _ref4$title,
-    _ref4$subtitle = _ref4.subtitle,
-    subtitle = _ref4$subtitle === void 0 ? 'Star Plus' : _ref4$subtitle,
-    _ref4$tag = _ref4.tag,
-    tag = _ref4$tag === void 0 ? 'MOVIE' : _ref4$tag,
-    _ref4$theme = _ref4.theme,
-    theme = _ref4$theme === void 0 ? 'dark' : _ref4$theme,
-    _ref4$width = _ref4.width,
-    width = _ref4$width === void 0 ? '220px' : _ref4$width,
-    _ref4$height = _ref4.height,
-    height = _ref4$height === void 0 ? '292px' : _ref4$height,
-    onClick = _ref4.onClick;
+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"])));
+var TextContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  min-width: 0;\n  flex: 1;\n"])));
+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) {
+  var theme = _ref5.theme;
+  return getSearchAccent(theme);
+});
+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"])));
+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"])));
+var PageSearchCard = function PageSearchCard(_ref6) {
+  var thumbnail = _ref6.thumbnail,
+    show_name = _ref6.show_name,
+    asset_language = _ref6.asset_language,
+    asset_type = _ref6.asset_type,
+    content_type = _ref6.content_type,
+    channel_name = _ref6.channel_name,
+    _ref6$title = _ref6.title,
+    title = _ref6$title === void 0 ? 'Ghazi Attack' : _ref6$title,
+    _ref6$subtitle = _ref6.subtitle,
+    subtitle = _ref6$subtitle === void 0 ? 'Star Plus' : _ref6$subtitle,
+    _ref6$tag = _ref6.tag,
+    tag = _ref6$tag === void 0 ? 'MOVIE' : _ref6$tag,
+    _ref6$theme = _ref6.theme,
+    theme = _ref6$theme === void 0 ? 'dark' : _ref6$theme,
+    _ref6$width = _ref6.width,
+    width = _ref6$width === void 0 ? '220px' : _ref6$width,
+    _ref6$height = _ref6.height,
+    height = _ref6$height === void 0 ? '292px' : _ref6$height,
+    onClick = _ref6.onClick,
+    onCardClick = _ref6.onCardClick;
   var effectiveTitle = show_name || title;
-  var effectiveTag = asset_type || tag;
+  var effectiveTag = content_type || asset_type || tag;
   var normalizedAssetType = String(effectiveTag).toLowerCase();
   var effectiveSubtitle = subtitle;
   if (normalizedAssetType === 'movie') {
@@ -72,15 +83,43 @@ var PageSearchCard = function PageSearchCard(_ref4) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     hasImageError = _useState2[0],
     setHasImageError = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isOpenIconHovered = _useState4[0],
+    setIsOpenIconHovered = _useState4[1];
   (0, _react.useEffect)(function () {
     setHasImageError(!thumbnail);
   }, [thumbnail]);
   var imageSource = hasImageError ? FALLBACK_IMAGE : thumbnail;
+  var accentColor = getSearchAccent(theme);
+  var handleNavigate = function handleNavigate(event) {
+    event.stopPropagation();
+    if (onClick) onClick(event);
+  };
+  var handleCardClick = function handleCardClick(event) {
+    if (event.type === 'keydown' && event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+    if (event.type === 'keydown') event.preventDefault();
+    if (onCardClick) {
+      onCardClick(event, {
+        searchText: effectiveTitle,
+        asset_language: asset_language,
+        asset_type: effectiveTag,
+        content_type: effectiveTag,
+        channel_name: channel_name
+      });
+    }
+  };
   return /*#__PURE__*/_react["default"].createElement(Card, {
     width: width,
     height: height,
     theme: theme,
-    onClick: onClick
+    role: onCardClick ? 'button' : undefined,
+    tabIndex: onCardClick ? 0 : undefined,
+    "aria-label": onCardClick ? "Filter results by ".concat(effectiveTitle) : undefined,
+    onClick: onCardClick ? handleCardClick : undefined,
+    onKeyDown: onCardClick ? handleCardClick : undefined
   }, /*#__PURE__*/_react["default"].createElement(Poster, {
     src: imageSource,
     alt: effectiveTitle,
@@ -90,13 +129,36 @@ var PageSearchCard = function PageSearchCard(_ref4) {
     }
   }), /*#__PURE__*/_react["default"].createElement(Gradient, null), /*#__PURE__*/_react["default"].createElement(Badge, {
     theme: theme
-  }, effectiveTag), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(Title, null, effectiveTitle), effectiveSubtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, effectiveSubtitle) : null));
+  }, effectiveTag), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(TextContent, null, /*#__PURE__*/_react["default"].createElement(Title, {
+    type: "button",
+    theme: theme,
+    title: effectiveTitle,
+    onClick: handleNavigate
+  }, effectiveTitle), effectiveSubtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, effectiveSubtitle) : null), onClick ? /*#__PURE__*/_react["default"].createElement(OpenPageButton, {
+    className: "show-movie-open-page",
+    type: "button",
+    title: "Open Page",
+    "aria-label": "Open ".concat(effectiveTitle, " page"),
+    onMouseEnter: function onMouseEnter() {
+      return setIsOpenIconHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsOpenIconHovered(false);
+    },
+    onClick: handleNavigate
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: "files-associated",
+    width: 16,
+    height: 16,
+    color: isOpenIconHovered ? accentColor : '#AFB2BA'
+  })) : null));
 };
 PageSearchCard.propTypes = {
   thumbnail: _propTypes["default"].string,
   show_name: _propTypes["default"].string,
   asset_language: _propTypes["default"].string,
   asset_type: _propTypes["default"].string,
+  content_type: _propTypes["default"].string,
   channel_name: _propTypes["default"].string,
   title: _propTypes["default"].string,
   subtitle: _propTypes["default"].string,
@@ -104,6 +166,7 @@ PageSearchCard.propTypes = {
   theme: _propTypes["default"].string,
   width: _propTypes["default"].string,
   height: _propTypes["default"].string,
-  onClick: _propTypes["default"].func
+  onClick: _propTypes["default"].func,
+  onCardClick: _propTypes["default"].func
 };
 var _default = exports["default"] = PageSearchCard;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "9.3.1",
+  "version": "9.3.3",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "9.3.1",
+    "@desynova-digital/tokens": "9.3.3",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },