@asantemedia-org/edwardsvacuum-design-system 1.6.58 → 1.6.59

package/dist/index.js

@@ -317,6 +317,9 @@ var AccordionSection = function (_a) {
   }, shouldRenderChildren ? children : null));
 };
 
+var placholderimg = "3697809e28f9e0fe.png";
+
+var PLACEHOLDER_INDICATOR = "?placeholder-storybook";
 // Utility function to retrieve correct SCSS module class names
 var getStyle$1 = function (className) {
   if (styles$2[className]) return styles$2[className];
@@ -338,22 +341,10 @@ var cardSizeMapping = function (size) {
   }
   return classSrting;
 };
-var getImageUrl = function (imageUrl) {
-  if (imageUrl) {
-    return imageUrl; // If an image URL is provided, use it.
-  }
-  try {
-    // Try loading from local assets (works in Storybook)
-    return require("../../../assets/edwards-webshop-placeholder.png").default.src;
-  } catch (error) {
-    // If that fails, load from node_modules (works in host app)
-    try {
-      return require("@asantemedia-org/edwardsvacuum-design-system/dist/assets/edwards-webshop-placeholder.png").default;
-    } catch (error) {
-      console.error("Placeholder image not found in either local assets or node_modules.", error);
-      return ""; // Fallback empty string if no image is found
-    }
-  }
+// Helper function to check if image is a placeholder (from ACAS-14821)
+var isPlaceholderImg = function (imageUrl) {
+  console.log(imageUrl);
+  return !!imageUrl && imageUrl.indexOf(PLACEHOLDER_INDICATOR) > -1;
 };
 var Card = function (_a) {
   var contentCategoryLabel = _a.contentCategoryLabel,
@@ -369,7 +360,6 @@ var Card = function (_a) {
     cardLink = _a.cardLink,
     city = _a.city,
     country = _a.country,
-    placeholder = _a.placeholder,
     onClick = _a.onClick,
     _b = _a.usePlainClasses,
     usePlainClasses = _b === void 0 ? false : _b;
@@ -381,7 +371,8 @@ var Card = function (_a) {
   var width = cardSizeMapping(size);
   var categoryColour = colour ? usePlainClasses ? "cmp-card__content-category-wrapper__colour-".concat(colour) : getStyle$1("cmp-card__content-category-wrapper__colour-".concat(colour)) : "";
   var cardFooterColour = colour ? usePlainClasses ? "cmp-card__footer--color-".concat(colour) : getStyle$1("cmp-card__footer--color-".concat(colour)) : "";
-  var contentImage = getImageUrl(imageUrl);
+  // Image placeholder fallback logic from ACAS-14821
+  var contentImage = !imageUrl ? placholderimg + PLACEHOLDER_INDICATOR : imageUrl;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(getClassName("cmp-card"), mode, width, className && (usePlainClasses ? className : getStyle$1(className)))
   }, /*#__PURE__*/React.createElement("a", {
@@ -391,7 +382,7 @@ var Card = function (_a) {
   }, /*#__PURE__*/React.createElement("div", {
     className: getClassName("cmp-card__content-wrapper")
   }, cardStyle !== "type-card-panel" && cardStyle !== "type-card-no-image" && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(getClassName("cmp-card__image-wrapper"), " ").concat(!imageUrl || placeholder ? getClassName("placeholderImage") : "")
+    className: "".concat(getClassName("cmp-card__image-wrapper"), " ").concat(isPlaceholderImg(contentImage) ? getClassName("placeholderImage") : "")
   }, /*#__PURE__*/React.createElement("picture", null, /*#__PURE__*/React.createElement("img", {
     src: contentImage,
     alt: imageAlt
@@ -430,7 +421,6 @@ var ProductCard = function (_a) {
     cardLink = _a.cardLink,
     cta = _a.cta,
     cardStyle = _a.cardStyle,
-    placeholder = _a.placeholder,
     onClick = _a.onClick,
     _c = _a.usePlainClasses,
     usePlainClasses = _c === void 0 ? false : _c;
@@ -440,7 +430,8 @@ var ProductCard = function (_a) {
   };
   var width = cardSizeMapping(size);
   var mode = usePlainClasses ? "cmp-card--".concat(cardStyle) : getStyle$1("cmp-card--".concat(cardStyle));
-  var productImage = getImageUrl(imageUrl);
+  // Image placeholder fallback logic from ACAS-14821
+  var productImage = !imageUrl || imageUrl === 'https://uk.my.edwardsvacuum.com?placeholder-storybook' ? placholderimg.src + PLACEHOLDER_INDICATOR : imageUrl;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(getClassName("cmp-card"), mode, width, className)
   }, /*#__PURE__*/React.createElement("a", {
@@ -455,7 +446,7 @@ var ProductCard = function (_a) {
   }, /*#__PURE__*/React.createElement("figure", null, /*#__PURE__*/React.createElement("img", {
     src: productImage,
     alt: imageAlt,
-    className: !imageUrl || placeholder ? "placeholderImage" : undefined
+    className: isPlaceholderImg(productImage) ? "placeholderImage" : ''
   }))), /*#__PURE__*/React.createElement("div", {
     className: getClassName("cmp-card--type-card-product__meta")
   }, /*#__PURE__*/React.createElement("p", {
@@ -475,7 +466,6 @@ var ProductDetailsCard = function (_a) {
     var title = _a.title;
     _a.imageUrl;
     var imageAlt = _a.imageAlt;
-    _a.placeholder;
     _a.onClick;
     var hit = _a.hit,
     facets = _a.facets,
@@ -612,7 +602,7 @@ var Button = function (_a) {
   }, props), label);
 };
 
-var PRODUCT_DETAILS = 'productDetails';
+var PRODUCT_DETAILS = "productDetails";
 var DynamicHeading = function (_a) {
   var _b = _a.titleSize,
     titleSize = _b === void 0 ? "h2" : _b,
@@ -623,16 +613,16 @@ var DynamicHeading = function (_a) {
 };
 var getCallToActionProps = function (type, url) {
   var callType = type === null || type === void 0 ? void 0 : type.toLowerCase();
-  var finalUrl = url || '';
-  var target = '';
+  var finalUrl = url || "";
+  var target = "";
   switch (callType) {
-    case 'external':
-      target = '_blank';
+    case "external":
+      target = "_blank";
       break;
-    case 'email':
+    case "email":
       finalUrl = "mailto:".concat(url);
       break;
-    case 'phone':
+    case "phone":
       finalUrl = "tel:".concat(url);
       break;
   }
@@ -651,18 +641,17 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
     callToActionUrl = _a.callToActionUrl,
     callToActionTargetSelector = _a.callToActionTargetSelector,
     _c = _a.queryType,
-    queryType = _c === void 0 ? 'unknown' : _c,
+    queryType = _c === void 0 ? "unknown" : _c,
     hits = _a.hits,
     hitCta = _a.hitCta,
     showProductPrice = _a.showProductPrice,
     query = _a.query,
     _d = _a.backgroundColour,
-    backgroundColour = _d === void 0 ? '' : _d,
+    backgroundColour = _d === void 0 ? "" : _d,
     _e = _a.maxResults,
     maxResults = _e === void 0 ? 10 : _e,
     _f = _a.isLoading,
     isLoading = _f === void 0 ? false : _f,
-    placeholder = _a.placeholder,
     analytics = _a.analytics,
     facets = _a.facets,
     innerComponents = _a.innerComponents;
@@ -685,12 +674,12 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
     var backgroundStyles = {
       "dark-grey": {
         buttonStyle: "outlineWhite",
-        containerBackground: getModifierClass('hasStyleGreyBackground'),
+        containerBackground: getModifierClass("hasStyleGreyBackground"),
         textColour: "white"
       },
-      "silver": {
+      silver: {
         buttonStyle: "primary",
-        containerBackground: getModifierClass('hasStyleSilverGradientBackground'),
+        containerBackground: getModifierClass("hasStyleSilverGradientBackground"),
         textColour: "black"
       }
     };
@@ -703,53 +692,53 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
   if (!hits || hits.length === 0) {
     return null;
   }
-  var baseClass = getClass('');
+  var baseClass = getClass("");
   // Memoize wrapper class names
   var wrapperClasses = React.useMemo(function () {
-    return [baseClass, widgetStyleProps.containerBackground, isLoading ? getModifierClass('isLoading') : '', queryType === 'content' ? getModifierClass('isQueryContent') : ''].filter(Boolean).join(' ');
+    return [baseClass, widgetStyleProps.containerBackground, isLoading ? getModifierClass("isLoading") : "", queryType === "content" ? getModifierClass("isQueryContent") : ""].filter(Boolean).join(" ");
   }, [baseClass, widgetStyleProps.containerBackground, isLoading, queryType, getModifierClass]);
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
   }, isLoading && /*#__PURE__*/React.createElement("div", {
-    className: getClass('__placeholder')
+    className: getClass("__placeholder")
   }, /*#__PURE__*/React.createElement("div", {
-    className: getClass('__placeholder__loading')
+    className: getClass("__placeholder__loading")
   })), /*#__PURE__*/React.createElement("div", {
-    className: getClass('__container')
+    className: getClass("__container")
   }, queryType != PRODUCT_DETAILS && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: getClass('__header')
+    className: getClass("__header")
   }, /*#__PURE__*/React.createElement("div", {
-    className: getClass('__header__text')
+    className: getClass("__header__text")
   }, /*#__PURE__*/React.createElement(DynamicHeading, {
     titleSize: titleSize
   }, heading), /*#__PURE__*/React.createElement("p", null, subtext)), callToActionUrl && /*#__PURE__*/React.createElement("div", {
-    className: getClass('__header__cta')
+    className: getClass("__header__cta")
   }, function () {
     var _a = getCallToActionProps(callToActionType, callToActionUrl),
       finalUrl = _a.finalUrl,
       target = _a.target;
-    var isAnchor = !!callToActionTargetSelector || (callToActionType === null || callToActionType === void 0 ? void 0 : callToActionType.toLowerCase()) !== 'internal';
+    var isAnchor = !!callToActionTargetSelector || (callToActionType === null || callToActionType === void 0 ? void 0 : callToActionType.toLowerCase()) !== "internal";
     return /*#__PURE__*/React.createElement(Button$1, {
-      element: isAnchor ? 'a' : 'button',
+      element: isAnchor ? "a" : "button",
       buttonStyle: widgetStyleProps === null || widgetStyleProps === void 0 ? void 0 : widgetStyleProps.buttonStyle,
       label: callToActionText,
       href: isAnchor ? finalUrl : undefined,
       target: target,
-      rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+      rel: target === "_blank" ? "noopener noreferrer" : undefined,
       "data-target-selector": callToActionTargetSelector,
       onClick: !isAnchor ? function () {
         if (finalUrl) {
-          window.open(finalUrl, target || '_self', target === '_blank' ? 'noopener,noreferrer' : undefined);
+          window.open(finalUrl, target || "_self", target === "_blank" ? "noopener,noreferrer" : undefined);
         }
       } : undefined
     });
   }()))), /*#__PURE__*/React.createElement("div", {
-    className: queryType == PRODUCT_DETAILS ? getClass('__cards__cardSingle') : getClass('__cards')
+    className: queryType == PRODUCT_DETAILS ? getClass("__cards__cardSingle") : getClass("__cards")
   }, hits.slice(0, maxResults).map(function (hit, index) {
     var Component = Card$1;
     var title = hit.title;
     var cardStyle = "";
-    var imageUrl = hit.imageUrl || placeholder;
+    var imageUrl = hit.imageUrl;
     var hitUtm = new URLSearchParams({
       utm_source: "web",
       utm_medium: "alg",
@@ -793,7 +782,6 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
       className: cardClassName,
       title: title,
       imageUrl: imageUrl,
-      placeholder: hit.image ? false : true,
       hit: hit,
       cta: hitCta,
       size: "",