@desynova-digital/components 9.3.2 → 9.3.4

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

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _tokens = require("@desynova-digital/tokens");
 var _icon = _interopRequireDefault(require("../icon"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 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) {
@@ -25,7 +25,7 @@ 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: ", ";\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 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    transform: translateY(-50%) scale(1);\n  }\n"])), function (_ref) {
   var width = _ref.width;
   return width || '178px';
 }, function (_ref2) {
@@ -42,34 +42,41 @@ var Badge = _styledComponents["default"].div(_templateObject4 || (_templateObjec
   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  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 TextContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  min-width: 0;\n  flex: 1;\n  padding-right: 48px;\n"])));
+var Title = _styledComponents["default"].button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: -webkit-box;\n  width: 100%;\n  max-width: 100%;\n  max-height: 36px;\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: normal;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\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 OpenPageButton = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 50%;\n  right: 0;\n  z-index: 3;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  width: 36px;\n  height: 36px;\n  padding: 0 10px;\n  overflow: hidden;\n  border: 0;\n  border-radius: 999px;\n  background: ", ";\n  color: #0c141d;\n  font-family: 'SFUIText-Medium';\n  font-size: 13px;\n  font-weight: 600;\n  white-space: nowrap;\n  cursor: pointer;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transform: translateY(-50%) scale(0.88);\n  transform-origin: right center;\n  transition: width 260ms cubic-bezier(0.16, 1, 0.3, 1),\n    opacity 180ms ease,\n    transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms ease;\n\n  &:hover,\n  &:focus-visible {\n    width: 128px;\n    box-shadow: 0 6px 18px\n      ", ";\n    outline: none;\n  }\n\n  &:hover .open-page-label,\n  &:focus-visible .open-page-label {\n    max-width: 76px;\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return getSearchAccent(theme);
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return "".concat(getSearchAccent(theme), "4d");
+});
+var OpenPageLabel = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  max-width: 0;\n  overflow: hidden;\n  opacity: 0;\n  transform: translateX(8px);\n  transition: max-width 260ms cubic-bezier(0.16, 1, 0.3, 1),\n    opacity 160ms ease 50ms,\n    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);\n"])));
+var Subtitle = _styledComponents["default"].p(_templateObject10 || (_templateObject10 = (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(_ref8) {
+  var thumbnail = _ref8.thumbnail,
+    show_name = _ref8.show_name,
+    asset_language = _ref8.asset_language,
+    asset_type = _ref8.asset_type,
+    content_type = _ref8.content_type,
+    channel_name = _ref8.channel_name,
+    _ref8$title = _ref8.title,
+    title = _ref8$title === void 0 ? 'Ghazi Attack' : _ref8$title,
+    _ref8$subtitle = _ref8.subtitle,
+    subtitle = _ref8$subtitle === void 0 ? 'Star Plus' : _ref8$subtitle,
+    _ref8$tag = _ref8.tag,
+    tag = _ref8$tag === void 0 ? 'MOVIE' : _ref8$tag,
+    _ref8$theme = _ref8.theme,
+    theme = _ref8$theme === void 0 ? 'dark' : _ref8$theme,
+    _ref8$width = _ref8.width,
+    width = _ref8$width === void 0 ? '220px' : _ref8$width,
+    _ref8$height = _ref8.height,
+    height = _ref8$height === void 0 ? '292px' : _ref8$height,
+    onClick = _ref8.onClick,
+    onCardClick = _ref8.onCardClick;
   var effectiveTitle = show_name || title;
   var effectiveTag = content_type || asset_type || tag;
   var normalizedAssetType = String(effectiveTag).toLowerCase();
@@ -83,15 +90,10 @@ var PageSearchCard = function PageSearchCard(_ref6) {
     _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);
@@ -136,21 +138,18 @@ var PageSearchCard = function PageSearchCard(_ref6) {
     onClick: handleNavigate
   }, effectiveTitle), effectiveSubtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, effectiveSubtitle) : null), onClick ? /*#__PURE__*/_react["default"].createElement(OpenPageButton, {
     className: "show-movie-open-page",
+    theme: theme,
     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"], {
+  }, /*#__PURE__*/_react["default"].createElement(OpenPageLabel, {
+    className: "open-page-label"
+  }, "Open Page"), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
     name: "files-associated",
     width: 16,
     height: 16,
-    color: isOpenIconHovered ? accentColor : '#AFB2BA'
+    color: "#0C141D"
   })) : null));
 };
 PageSearchCard.propTypes = {

package/molecules/filter/filter.js

@@ -31,7 +31,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var StyledFilterCompoment = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  // width: 21px;\n  // height: 62px;\n  overflow: hidden;\n  transition: width 0.6s ease;\n  //z-index: 2;\n  //width: 360px;\n  overflow: visible;\n  text-align: left;\n  z-index: ", ";\n\n  .filter-button {\n    width: 30px;\n    height: 30px;\n    background: #121d28;\n    border-radius: 50%;\n    padding: 7px 7px;\n    cursor: pointer;\n\n    &.active,\n    &:hover {\n      path {\n        transition: all 0.4s ease-out;\n      }\n    }\n\n    &.active {\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:hover {\n      path {\n        fill: #fff;\n      }\n    }\n  }\n\n  .dashboard-filter-box {\n    border-bottom: 1px #303f51 solid;\n    padding: 4px 0px 0px 0;\n    position: absolute;\n  }\n\n  .search-filter-list-box {\n    display: flex;\n    position: relative;\n    /* padding: 10px 0px; */\n    align-items: center;\n    font-family: 'SFUIText-Medium';\n    justify-content: flex-end;\n    width: ", ";\n  }\n\n  .filter-message {\n    font-size: 12px;\n    font-family: 'SFUIText-Regular';\n    color: #afb2ba;\n  }\n  span.chip-button {\n    color: #fff;\n    background: #303f51;\n    color: #fff;\n    margin: 5px;\n    &:hover {\n      color: ", ";\n    }\n    &.checked {\n      background: ", ";\n      color: #0c141d;\n      &:hover {\n        color: #0c141d;\n      }\n    }\n  }\n\n  .filter-list-box {\n    & > span {\n      color: rgb(99, 208, 199);\n      font-size: 10px;\n      margin-bottom: 0px;\n      display: inline-block;\n    }\n\n    .list-holder {\n      overflow: auto;\n      a {\n        top: 7px;\n      }\n      /* width */\n      &::-webkit-scrollbar {\n        width: 2px;\n        height: 2px;\n      }\n\n      /* Track */\n      &::-webkit-scrollbar-track {\n        box-shadow: inset 0 0 5px #a6aab2;\n        border-radius: 10px;\n      }\n\n      /* Handle */\n      &::-webkit-scrollbar-thumb {\n        background: ", ";\n        border-radius: 10px;\n      }\n\n      /* Handle on hover */\n      &::-webkit-scrollbar-thumb:hover {\n        background: ", ";\n      }\n\n      & > div {\n        // width: max-content;\n        & > span {\n          // margin-right: 5px;\n          // background: ", ";\n          // &:hover {\n          //   color: #fff;\n          // }\n        }\n      }\n    }\n  }\n\n  .filter-options-holder {\n    margin-top: 5px;\n    position: absolute;\n    background: #182738;\n    z-index: 2;\n    font-family: 'SFUIText-Medium';\n    padding: 15px;\n    right: 0;\n\n    .filter-group-title {\n      color: #afb2ba;\n      font-size: 10px;\n      padding-bottom: 10px;\n      color: #ffffff;\n      text-transform: uppercase;\n    }\n\n    .filter-group-item-list {\n      margin: 0px -5px 0px;\n      .ardp-date-picker {\n        display: inline-block;\n        .label-text {\n          color: #cccccc;\n          font-size: 12px;\n          transition: all 0.5s ease-in-out;\n          cursor: pointer;\n          &:hover {\n            color: #fff;\n          }\n        }\n\n        &.checked {\n          .label-text {\n            color: ", ";\n          }\n        }\n\n        .calendar {\n          right: -7px;\n          width: 330px;\n          padding: 15px;\n        }\n      }\n    }\n\n    .filter-group {\n      padding: 15px 0px 10px;\n      border-bottom: 1px solid #303f51;\n      &:first-child {\n        padding: 0px 0px 10px;\n      }\n    }\n\n    button.filter-group-item {\n      background-color: transparent;\n      border: none;\n      margin-right: 12px;\n      cursor: pointer;\n      transition: all 0.5s ease-in-out;\n      color: #cccccc;\n      font-size: 12px;\n      padding: 3px 0px;\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        color: #fff;\n      }\n\n      &.checked {\n        color: ", ";\n      }\n    }\n\n    .action-btn {\n      margin: 0px;\n      pointer-events: auto;\n      border-radius: 999rem;\n      box-shadow: none;\n      padding: 0.5rem 0.7rem;\n    }\n  }\n"])), function (_ref) {
+var StyledFilterCompoment = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  // width: 21px;\n  // height: 62px;\n  overflow: hidden;\n  transition: width 0.6s ease;\n  //z-index: 2;\n  //width: 360px;\n  overflow: visible;\n  text-align: left;\n  z-index: ", ";\n\n  .filter-button {\n    width: 30px;\n    height: 30px;\n    background: #121d28;\n    border-radius: 50%;\n    padding: 7px 7px;\n    cursor: pointer;\n\n    &.active,\n    &:hover {\n      path {\n        transition: all 0.4s ease-out;\n      }\n    }\n\n    &.active {\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:hover {\n      path {\n        fill: #fff;\n      }\n    }\n  }\n\n  .dashboard-filter-box {\n    border-bottom: 1px #303f51 solid;\n    padding: 4px 0px 0px 0;\n    position: absolute;\n  }\n\n  .search-filter-list-box {\n    display: flex;\n    position: relative;\n    /* padding: 10px 0px; */\n    align-items: center;\n    font-family: 'SFUIText-Medium';\n    justify-content: flex-end;\n    width: ", ";\n  }\n\n  .filter-message {\n    font-size: 12px;\n    font-family: 'SFUIText-Regular';\n    color: #afb2ba;\n  }\n  span.chip-button {\n    color: #fff;\n    background: #303f51;\n    color: #fff;\n    margin: 5px;\n    &:hover {\n      color: ", ";\n    }\n    &.checked {\n      background: ", ";\n      color: #0c141d;\n      &:hover {\n        color: #0c141d;\n      }\n    }\n  }\n\n  .filter-list-box {\n    & > span {\n      color: rgb(99, 208, 199);\n      font-size: 10px;\n      margin-bottom: 0px;\n      display: inline-block;\n    }\n\n    .list-holder {\n      overflow: auto;\n      a {\n        top: 7px;\n      }\n      /* width */\n      &::-webkit-scrollbar {\n        width: 2px;\n        height: 2px;\n      }\n\n      /* Track */\n      &::-webkit-scrollbar-track {\n        box-shadow: inset 0 0 5px #a6aab2;\n        border-radius: 10px;\n      }\n\n      /* Handle */\n      &::-webkit-scrollbar-thumb {\n        background: ", ";\n        border-radius: 10px;\n      }\n\n      /* Handle on hover */\n      &::-webkit-scrollbar-thumb:hover {\n        background: ", ";\n      }\n\n      & > div {\n        // width: max-content;\n        & > span {\n          // margin-right: 5px;\n          // background: ", ";\n          // &:hover {\n          //   color: #fff;\n          // }\n        }\n      }\n    }\n  }\n\n  .filter-options-holder {\n    margin-top: 5px;\n    position: absolute;\n    background: #182738;\n    z-index: 2;\n    font-family: 'SFUIText-Medium';\n    padding: 15px;\n    right: 0;\n    ", "\n\n    .filter-group-title {\n      color: #afb2ba;\n      font-size: 10px;\n      padding-bottom: 10px;\n      color: #ffffff;\n      text-transform: uppercase;\n    }\n\n    .filter-group-item-list {\n      margin: 0px -5px 0px;\n      .ardp-date-picker {\n        display: inline-block;\n        .label-text {\n          color: #cccccc;\n          font-size: 12px;\n          transition: all 0.5s ease-in-out;\n          cursor: pointer;\n          &:hover {\n            color: #fff;\n          }\n        }\n\n        &.checked {\n          .label-text {\n            color: ", ";\n          }\n        }\n\n        .calendar {\n          right: -7px;\n          width: 330px;\n          padding: 15px;\n        }\n      }\n    }\n\n    .filter-group {\n      padding: 15px 0px 10px;\n      border-bottom: 1px solid #303f51;\n      &:first-child {\n        padding: 0px 0px 10px;\n      }\n    }\n\n    button.filter-group-item {\n      background-color: transparent;\n      border: none;\n      margin-right: 12px;\n      cursor: pointer;\n      transition: all 0.5s ease-in-out;\n      color: #cccccc;\n      font-size: 12px;\n      padding: 3px 0px;\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        color: #fff;\n      }\n\n      &.checked {\n        color: ", ";\n      }\n    }\n\n    .action-btn {\n      margin: 0px;\n      pointer-events: auto;\n      border-radius: 999rem;\n      box-shadow: none;\n      padding: 0.5rem 0.7rem;\n    }\n  }\n"])), function (_ref) {
   var isMenuOpen = _ref.isMenuOpen;
   return isMenuOpen ? "95" : "1";
 }, function (props) {
@@ -49,6 +49,9 @@ var StyledFilterCompoment = _styledComponents["default"].div(_templateObject ||
   return _tokens.colors[props.theme].filter.lightthemeColor;
 }, function (props) {
   return _tokens.colors[props.theme].filter.lightthemeColor;
+}, function (_ref3) {
+  var dashboardLayout = _ref3.dashboardLayout;
+  return dashboardLayout ? "\n      height: 80vh;\n      max-height: 80vh;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n\n      > .filter-group {\n        flex-shrink: 0;\n      }\n\n      > .filter-action-footer {\n        position: sticky;\n        bottom: -15px;\n        z-index: 3;\n        flex-shrink: 0;\n        margin: auto -15px -15px !important;\n        padding: 12px 15px 15px;\n        justify-content: center;\n        background: #182738;\n        border-top: 1px solid #303f51;\n      }\n    " : "";
 }, function (props) {
   return _tokens.colors[props.theme].filter.lightthemeColor;
 }, function (props) {
@@ -62,8 +65,8 @@ var ResetBtn = (0, _styledComponents["default"])(_button["default"])(_templateOb
 }, function (props) {
   return _tokens.colors[props.theme].filter.themeColor;
 });
-var OverlayStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.3);\n  z-index: ", ";\n  display: block;\n"])), function (_ref3) {
-  var isMenuOpen = _ref3.isMenuOpen;
+var OverlayStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.3);\n  z-index: ", ";\n  display: block;\n"])), function (_ref4) {
+  var isMenuOpen = _ref4.isMenuOpen;
   return isMenuOpen ? "94" : "0";
 });
 var UserIdDropdown = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom: 1px solid #999999;\n\n  .tags {\n    padding-bottom: 2px;\n  }\n  input:focus {\n    outline: none;\n  }\n\n  .input-filter {\n    background: transparent;\n    font-family: \"SFUIText-Medium\";\n    position: relative;\n    width: 100%;\n    display: block;\n    border: none;\n    color: #999999;\n  }\n  .user-dropdown {\n    background-color: rgb(18, 29, 41);\n    margin-top: 5px;\n    border: 1px solid rgb(153, 153, 153);\n    max-height: 200px;\n    overflow: auto;\n    position: absolute;\n    width: 92%;\n    z-index: 2;\n    cursor: pointer;\n  }\n\n  .dropdown-options {\n    font-family: SFUIText-Regular;\n    font-size: 13px;\n    line-height: normal;\n    color: rgb(204, 204, 204);\n    padding: 7px;\n    :hover {\n      background-color: ", ";\n      color: rgb(255, 255, 255);\n    }\n    &.active {\n      background-color: ", ";\n      color: rgb(255, 255, 255);\n      :hover {\n        background-color: rgb(18, 29, 41);\n        color: rgb(204, 204, 204);\n      }\n    }\n  }\n"])), function (props) {
@@ -422,6 +425,7 @@ var Filter = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/_react["default"].createElement(StyledFilterCompoment, {
         theme: _this.props.theme,
         isMenuOpen: isMenuOpen,
+        dashboardLayout: _this.props.dashboardLayout,
         showSelectedFiltersAsChip: showSelectedFiltersAsChip
       }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         role: "presentation",
@@ -617,6 +621,7 @@ var Filter = /*#__PURE__*/function (_Component) {
           }
         })));
       }) : null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "filter-action-footer",
         style: {
           margin: "15px 0px 0px",
           textAlign: "center",
@@ -722,12 +727,14 @@ Filter.propTypes = {
   width: _propTypes["default"].string,
   showSelectedFiltersAsChip: _propTypes["default"].bool,
   prevDateRequired: _propTypes["default"].bool,
-  hideFutureDates: _propTypes["default"].bool
+  hideFutureDates: _propTypes["default"].bool,
+  dashboardLayout: _propTypes["default"].bool
 };
 Filter.defaultProps = {
   width: "360px",
   theme: "dark",
   prevDateRequired: false,
-  hideFutureDates: false
+  hideFutureDates: false,
+  dashboardLayout: false
 };
 var _default = exports["default"] = Filter;

package/package.json

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