@asantemedia-org/edwardsvacuum-design-system 1.6.50 → 1.6.52

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { AlgoliaDynamicSearchRaw, AlgoliaDynamicSearchEdwards as AlgoliaDynamicSearch } from "@stories/experiences/Algolia-dynamic-search/algolia-dynamic-search";
 export type { AlgoliaDynamicSearchProps, InnerComponents, Facet } from "@stories/experiences/Algolia-dynamic-search/algolia-dynamic-search.types";
+export { Card, ProductCard, ProductDetailsCard } from "@stories/components/Card/card";
+export type { CardProps } from "@stories/components/Card/card.types";
 export { QrForm } from "@stories/experiences/QRFormJourney/Qr-form/Qr-form";
 export type { allQrFromProps } from "@stories/experiences/QRFormJourney/Qr-form/Qr-form";
 export type { FormFieldType } from "@stories/experiences/QRFormJourney/FormFieldType";

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown, faArrowRight, faChevronRight } from '@fortawesome/pro-solid-svg-icons';
+import { faChevronDown, faChevronRight, faArrowRight } from '@fortawesome/pro-solid-svg-icons';
 import { v4 } from 'uuid';
 import { PhoneInput } from 'react-international-phone';
 
@@ -368,45 +368,51 @@ var Card = function (_a) {
     city = _a.city,
     country = _a.country,
     placeholder = _a.placeholder,
-    onClick = _a.onClick;
-  var mode = getStyle$1("cmp-card--".concat(cardStyle));
+    onClick = _a.onClick,
+    _b = _a.usePlainClasses,
+    usePlainClasses = _b === void 0 ? false : _b;
+  // Helper to get class name - plain or CSS module
+  var getClassName = function (name) {
+    return usePlainClasses ? name : getStyle$1(name);
+  };
+  var mode = usePlainClasses ? "cmp-card--".concat(cardStyle) : getStyle$1("cmp-card--".concat(cardStyle));
   var width = cardSizeMapping(size);
-  var categoryColour = colour ? getStyle$1("cmp-card__content-category-wrapper__colour-".concat(colour)) : "";
-  var cardFooterColour = colour ? getStyle$1("cmp-card__footer--color-".concat(colour)) : "";
+  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);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(getStyle$1("cmp-card"), mode, width, className && getStyle$1(className))
+    className: classnames(getClassName("cmp-card"), mode, width, className && (usePlainClasses ? className : getStyle$1(className)))
   }, /*#__PURE__*/React.createElement("a", {
-    className: getStyle$1("cmp-card__link"),
+    className: getClassName("cmp-card__link"),
     href: cardLink,
     onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1("cmp-card__content-wrapper")
+    className: getClassName("cmp-card__content-wrapper")
   }, cardStyle !== "type-card-panel" && cardStyle !== "type-card-no-image" && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(getStyle$1("cmp-card__image-wrapper"), " ").concat(!imageUrl || placeholder ? getStyle$1("placeholderImage") : "")
+    className: "".concat(getClassName("cmp-card__image-wrapper"), " ").concat(!imageUrl || placeholder ? getClassName("placeholderImage") : "")
   }, /*#__PURE__*/React.createElement("picture", null, /*#__PURE__*/React.createElement("img", {
     src: contentImage,
     alt: imageAlt
   }))), cardStyle === "type-card-label" && /*#__PURE__*/React.createElement("div", {
-    className: classnames(getStyle$1("cmp-card__content-category-wrapper"), categoryColour)
+    className: classnames(getClassName("cmp-card__content-category-wrapper"), categoryColour)
   }, contentCategoryLabel && /*#__PURE__*/React.createElement("p", null, contentCategoryLabel)), /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1("cmp-card__title-wrapper")
+    className: getClassName("cmp-card__title-wrapper")
   }, date && /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1("cmp-card__date")
+    className: getClassName("cmp-card__date")
   }, date), title && /*#__PURE__*/React.createElement("h4", {
-    className: getStyle$1("cmp-card__title")
+    className: getClassName("cmp-card__title")
   }, title), (city || country) && /*#__PURE__*/React.createElement("p", {
-    className: getStyle$1("cmp-card__city-country")
+    className: getClassName("cmp-card__city-country")
   }, city, " ", city && country ? ", " : "", " ", country), cardStyle === "type-card-panel" ? /*#__PURE__*/React.createElement("span", {
-    className: classnames(getStyle$1("cmp-card__footer"), cardFooterColour)
+    className: classnames(getClassName("cmp-card__footer"), cardFooterColour)
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faChevronRight
   })) : cardStyle === "label" ? /*#__PURE__*/React.createElement("span", {
-    className: getStyle$1("cmp-card__footer")
+    className: getClassName("cmp-card__footer")
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRight
   })) : /*#__PURE__*/React.createElement("span", {
-    className: getStyle$1("cmp-card__footer")
+    className: getClassName("cmp-card__footer")
   }, /*#__PURE__*/React.createElement("span", null, cta))))));
 };
 var ProductCard = function (_a) {
@@ -423,33 +429,39 @@ var ProductCard = function (_a) {
     cta = _a.cta,
     cardStyle = _a.cardStyle,
     placeholder = _a.placeholder,
-    onClick = _a.onClick;
+    onClick = _a.onClick,
+    _c = _a.usePlainClasses,
+    usePlainClasses = _c === void 0 ? false : _c;
+  // Helper to get class name - plain or CSS module
+  var getClassName = function (name) {
+    return usePlainClasses ? name : getStyle$1(name);
+  };
   var width = cardSizeMapping(size);
-  var mode = getStyle$1("cmp-card--".concat(cardStyle));
+  var mode = usePlainClasses ? "cmp-card--".concat(cardStyle) : getStyle$1("cmp-card--".concat(cardStyle));
   var productImage = getImageUrl(imageUrl);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(getStyle$1("cmp-card"), mode, width, className)
+    className: classnames(getClassName("cmp-card"), mode, width, className)
   }, /*#__PURE__*/React.createElement("a", {
     href: cardLink,
-    className: getStyle$1("cmp-card__link"),
+    className: getClassName("cmp-card__link"),
     onClick: onClick,
     target: "_blank"
   }, /*#__PURE__*/React.createElement("div", {
-    className: classnames(getStyle$1("cmp-card--type-card-product__wrapper"), showImage ? "" : getStyle$1("cmp-card--type-card-product-no-image__wrapper"))
+    className: classnames(getClassName("cmp-card--type-card-product__wrapper"), showImage ? "" : getClassName("cmp-card--type-card-product-no-image__wrapper"))
   }, showImage && /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1("cmp-card--type-card-product__image")
+    className: getClassName("cmp-card--type-card-product__image")
   }, /*#__PURE__*/React.createElement("figure", null, /*#__PURE__*/React.createElement("img", {
     src: productImage,
     alt: imageAlt,
     className: !imageUrl || placeholder ? "placeholderImage" : undefined
   }))), /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1("cmp-card--type-card-product__meta")
+    className: getClassName("cmp-card--type-card-product__meta")
   }, /*#__PURE__*/React.createElement("p", {
-    className: getStyle$1("cmp-card--type-card-product__title")
+    className: getClassName("cmp-card--type-card-product__title")
   }, title), productPrice && showProductPrice !== false ? /*#__PURE__*/React.createElement("p", {
-    className: getStyle$1("cmp-card--type-card-product__prices")
+    className: getClassName("cmp-card--type-card-product__prices")
   }, productPrice) : "", /*#__PURE__*/React.createElement("p", {
-    className: getStyle$1("cmp-card--type-card-product__cta")
+    className: getClassName("cmp-card--type-card-product__cta")
   }, cta ? cta : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRight
   }))))));
@@ -464,22 +476,31 @@ var ProductDetailsCard = function (_a) {
     _a.placeholder;
     _a.onClick;
     var hit = _a.hit,
-    facets = _a.facets;
+    facets = _a.facets,
+    _b = _a.usePlainClasses,
+    usePlainClasses = _b === void 0 ? false : _b,
+    ProductCardComponent = _a.ProductCardComponent;
+  // Helper to get class name - plain or CSS module
+  var getClassName = function (name) {
+    return usePlainClasses ? name : getStyle$1(name);
+  };
+  // Use custom ProductCard if provided, otherwise use default
+  var SpareCard = ProductCardComponent || ProductCard;
   // Memoize spares rendering with a limit to prevent freeze
   var renderSpares = function () {
     if (!(hit === null || hit === void 0 ? void 0 : hit.spares) || !Array.isArray(hit.spares) || hit.spares.length === 0) return null;
     // Limit the number of spares to prevent freeze
     var sparesToRender = hit.spares.slice(0, MAX_SPARES_TO_RENDER);
     return /*#__PURE__*/React.createElement("ul", {
-      className: getStyle$1("folding-spares-list")
+      className: getClassName("folding-spares-list")
     }, sparesToRender.map(function (spare, index) {
       // Safety check - skip if spare is not a valid object
       if (!spare || typeof spare !== 'object') return null;
       return /*#__PURE__*/React.createElement("li", {
         key: spare.objectID || spare.code || "spare-".concat(index)
-      }, /*#__PURE__*/React.createElement(ProductCard, {
+      }, /*#__PURE__*/React.createElement(SpareCard, {
         cardStyle: "type-card-product",
-        className: getStyle$1("cmp-card"),
+        className: getClassName("cmp-card"),
         title: spare.name || 'Spare Part',
         imageUrl: spare['img-product'] || spare.image || '',
         imageAlt: spare.name || 'Spare Part',
@@ -487,31 +508,33 @@ var ProductDetailsCard = function (_a) {
         showProductPrice: true,
         cardLink: spare.url || spare.link || '#',
         cta: "Go to webshop",
-        showImage: false
+        showImage: false,
+        usePlainClasses: usePlainClasses,
+        spare: spare
       }));
     }), hit.spares.length > MAX_SPARES_TO_RENDER && /*#__PURE__*/React.createElement("li", {
-      className: getStyle$1("folding-spares-list__more")
+      className: getClassName("folding-spares-list__more")
     }, "+", hit.spares.length - MAX_SPARES_TO_RENDER, " more items"));
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1("cmp-card--type-product_details")
+    className: getClassName("cmp-card--type-product_details")
   }, /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1("cmp-card--type-product_details__product-info")
+    className: getClassName("cmp-card--type-product_details__product-info")
   }, /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1("cmp-card--type-product_details__header")
+    className: getClassName("cmp-card--type-product_details__header")
   }, /*#__PURE__*/React.createElement("h3", {
-    className: getStyle$1("cmp-card--type-product_details__header__title")
+    className: getClassName("cmp-card--type-product_details__header__title")
   }, title), /*#__PURE__*/React.createElement("p", {
-    className: getStyle$1("cmp-card--type-product_details__header__product-code")
-  }, "Product:", hit.code), /*#__PURE__*/React.createElement("img", {
-    src: hit.image,
+    className: getClassName("cmp-card--type-product_details__header__product-code")
+  }, "Product:", hit === null || hit === void 0 ? void 0 : hit.code), /*#__PURE__*/React.createElement("img", {
+    src: hit === null || hit === void 0 ? void 0 : hit.image,
     alt: imageAlt,
-    className: getStyle$1("cmp-card--type-product_details__header__product-image")
+    className: getClassName("cmp-card--type-product_details__header__product-image")
   })), facets && /*#__PURE__*/React.createElement(AccordionSection, {
     title: "Specifications",
-    className: getStyle$1("folding-specification-holder")
+    className: getClassName("folding-specification-holder")
   }, /*#__PURE__*/React.createElement("ul", {
-    className: getStyle$1("folding-specification-list")
+    className: getClassName("folding-specification-list")
   }, facets && facets.map(function (facet) {
     return hit[facet.name] && /*#__PURE__*/React.createElement("li", {
       key: facet.name
@@ -521,10 +544,10 @@ var ProductDetailsCard = function (_a) {
       }
     }) : hit[facet.name]);
   })))), /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1("cmp-card--type-product_details__spares-list")
-  }, hit.spares && hit.spares.length > 0 && /*#__PURE__*/React.createElement(AccordionSection, {
+    className: getClassName("cmp-card--type-product_details__spares-list")
+  }, (hit === null || hit === void 0 ? void 0 : hit.spares) && hit.spares.length > 0 && /*#__PURE__*/React.createElement(AccordionSection, {
     title: "Spares & Parts",
-    className: getStyle$1("folding-spares-holder"),
+    className: getClassName("folding-spares-holder"),
     lazyLoad: true,
     defaultOpen: true
   }, renderSpares())));
@@ -1450,5 +1473,5 @@ var QrForm = function (props) {
   })));
 };
 
-export { AccordionSection, AlgoliaDynamicSearchEdwards as AlgoliaDynamicSearch, AlgoliaDynamicSearchRaw, QrForm };
+export { AccordionSection, AlgoliaDynamicSearchEdwards as AlgoliaDynamicSearch, AlgoliaDynamicSearchRaw, Card, ProductCard, ProductDetailsCard, QrForm };
 //# sourceMappingURL=index.esm.js.map