@asantemedia-org/edwardsvacuum-design-system 1.6.20 → 1.6.22

package/dist/index.css

@@ -506,6 +506,38 @@
     transform: rotateY(0);
   }
 }
+.accordion-section__header {
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0 0.6rem 0;
+  border-bottom: 2px solid #C4262E;
+}
+.accordion-section__title {
+  flex: 1;
+}
+.accordion-section__icon {
+  transition: transform 0.3s ease;
+  display: inline-flex;
+}
+.accordion-section__icon.rotated {
+  transform: rotate(180deg);
+}
+.accordion-section__content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+.accordion-section__content.open {
+  max-height: 5000px;
+}
+.accordion-section.open .accordion-section__icon {
+  transform: rotate(180deg);
+}
 .Button-module__cmp-button___SMjDF {
   font-family: "Calibri", "Calibri W05 Light", sans-serif;
   text-transform: uppercase;

package/dist/index.esm.css

@@ -506,6 +506,38 @@
     transform: rotateY(0);
   }
 }
+.accordion-section__header {
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0 0.6rem 0;
+  border-bottom: 2px solid #C4262E;
+}
+.accordion-section__title {
+  flex: 1;
+}
+.accordion-section__icon {
+  transition: transform 0.3s ease;
+  display: inline-flex;
+}
+.accordion-section__icon.rotated {
+  transform: rotate(180deg);
+}
+.accordion-section__content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+.accordion-section__content.open {
+  max-height: 5000px;
+}
+.accordion-section.open .accordion-section__icon {
+  transform: rotate(180deg);
+}
 .Button-module__cmp-button___SMjDF {
   font-family: "Calibri", "Calibri W05 Light", sans-serif;
   text-transform: uppercase;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronRight, faArrowRight, faChevronDown } from '@fortawesome/pro-solid-svg-icons';
+import { faChevronDown, faChevronRight, faArrowRight } from '@fortawesome/pro-solid-svg-icons';
 import { v4 } from 'uuid';
 
 /******************************************************************************
@@ -241,24 +241,63 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
+var AccordionSection = function (_a) {
+  var title = _a.title,
+    children = _a.children,
+    _b = _a.className,
+    className = _b === void 0 ? '' : _b,
+    _c = _a.defaultOpen,
+    defaultOpen = _c === void 0 ? false : _c;
+  var _d = useState(defaultOpen),
+    isOpen = _d[0],
+    setIsOpen = _d[1];
+  var toggleAccordion = function () {
+    setIsOpen(!isOpen);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "accordion-section ".concat(className, " ").concat(isOpen ? 'open' : '')
+  }, /*#__PURE__*/React.createElement("h4", {
+    className: "accordion-section__header",
+    onClick: toggleAccordion,
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: function (e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleAccordion();
+      }
+    },
+    "aria-expanded": isOpen
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "accordion-section__title"
+  }, title), /*#__PURE__*/React.createElement("span", {
+    className: "accordion-section__icon ".concat(isOpen ? 'rotated' : '')
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faChevronDown,
+    color: "#C4262EFF"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "accordion-section__content ".concat(isOpen ? 'open' : '')
+  }, children));
+};
+
 // Utility function to retrieve correct SCSS module class names
 var getStyle$1 = function (className) {
   if (styles$1[className]) return styles$1[className];
   var nestedMatch = Object.keys(styles$1).find(function (key) {
     return key.includes(className);
   });
-  return nestedMatch ? styles$1[nestedMatch] : '';
+  return nestedMatch ? styles$1[nestedMatch] : "";
 };
 var cardSizeMapping = function (size) {
   var classSrting;
-  if (size === 'small') {
-    classSrting = 'col-3';
-  } else if (size === 'medium') {
-    classSrting = 'col-4';
-  } else if (size === 'large') {
-    classSrting = 'col-6';
+  if (size === "small") {
+    classSrting = "col-3";
+  } else if (size === "medium") {
+    classSrting = "col-4";
+  } else if (size === "large") {
+    classSrting = "col-6";
   } else {
-    classSrting = '';
+    classSrting = "";
   }
   return classSrting;
 };
@@ -268,14 +307,14 @@ var getImageUrl = function (imageUrl) {
   }
   try {
     // Try loading from local assets (works in Storybook)
-    return require('../../../assets/edwards-webshop-placeholder.png').default.src;
+    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;
+      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
+      return ""; // Fallback empty string if no image is found
     }
   }
 };
@@ -297,42 +336,42 @@ var Card = function (_a) {
     onClick = _a.onClick;
   var mode = 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 ? getStyle$1("cmp-card__content-category-wrapper__colour-".concat(colour)) : "";
+  var cardFooterColour = 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(getStyle$1("cmp-card"), mode, width, className && getStyle$1(className))
   }, /*#__PURE__*/React.createElement("a", {
-    className: getStyle$1('cmp-card__link'),
+    className: getStyle$1("cmp-card__link"),
     href: cardLink,
     onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1('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: getStyle$1("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") : "")
   }, /*#__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)
+  }))), cardStyle === "type-card-label" && /*#__PURE__*/React.createElement("div", {
+    className: classnames(getStyle$1("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: getStyle$1("cmp-card__title-wrapper")
   }, date && /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1('cmp-card__date')
+    className: getStyle$1("cmp-card__date")
   }, date), title && /*#__PURE__*/React.createElement("h4", {
-    className: getStyle$1('cmp-card__title')
+    className: getStyle$1("cmp-card__title")
   }, title), (city || country) && /*#__PURE__*/React.createElement("p", {
-    className: getStyle$1('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: getStyle$1("cmp-card__city-country")
+  }, city, " ", city && country ? ", " : "", " ", country), cardStyle === "type-card-panel" ? /*#__PURE__*/React.createElement("span", {
+    className: classnames(getStyle$1("cmp-card__footer"), cardFooterColour)
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faChevronRight
-  })) : cardStyle === 'label' ? /*#__PURE__*/React.createElement("span", {
-    className: getStyle$1('cmp-card__footer')
+  })) : cardStyle === "label" ? /*#__PURE__*/React.createElement("span", {
+    className: getStyle$1("cmp-card__footer")
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRight
   })) : /*#__PURE__*/React.createElement("span", {
-    className: getStyle$1('cmp-card__footer')
+    className: getStyle$1("cmp-card__footer")
   }, /*#__PURE__*/React.createElement("span", null, cta))))));
 };
 var ProductCard = function (_a) {
@@ -352,28 +391,28 @@ var ProductCard = function (_a) {
   var mode = 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(getStyle$1("cmp-card"), mode, width, className)
   }, /*#__PURE__*/React.createElement("a", {
     href: cardLink,
-    className: getStyle$1('cmp-card__link'),
+    className: getStyle$1("cmp-card__link"),
     onClick: onClick,
     target: "_blank"
   }, /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1('cmp-card--type-card-product__wrapper')
+    className: getStyle$1("cmp-card--type-card-product__wrapper")
   }, /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1('cmp-card--type-card-product__image')
+    className: getStyle$1("cmp-card--type-card-product__image")
   }, /*#__PURE__*/React.createElement("figure", null, /*#__PURE__*/React.createElement("img", {
     src: productImage,
     alt: imageAlt,
-    className: !imageUrl || placeholder ? 'placeholderImage' : undefined
+    className: !imageUrl || placeholder ? "placeholderImage" : undefined
   }))), /*#__PURE__*/React.createElement("div", {
-    className: getStyle$1('cmp-card--type-card-product__meta')
+    className: getStyle$1("cmp-card--type-card-product__meta")
   }, /*#__PURE__*/React.createElement("p", {
-    className: getStyle$1('cmp-card--type-card-product__title')
+    className: getStyle$1("cmp-card--type-card-product__title")
   }, title), productPrice && showProductPrice !== false ? /*#__PURE__*/React.createElement("p", {
-    className: getStyle$1('cmp-card--type-card-product__prices')
-  }, productPrice) : '', /*#__PURE__*/React.createElement("p", {
-    className: getStyle$1('cmp-card--type-card-product__cta')
+    className: getStyle$1("cmp-card--type-card-product__prices")
+  }, productPrice) : "", /*#__PURE__*/React.createElement("p", {
+    className: getStyle$1("cmp-card--type-card-product__cta")
   }, cta ? cta : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRight
   }))))));
@@ -387,24 +426,26 @@ var ProductDetailsCard = function (_a) {
     _a.onClick;
     var hit = _a.hit,
     facets = _a.facets;
-  var specificationRef = useRef(null);
-  var handleClick = function () {
-    var _a;
-    (_a = specificationRef.current) === null || _a === void 0 ? void 0 : _a.classList.toggle("open");
-  };
   return /*#__PURE__*/React.createElement("div", {
     className: className
-  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement("p", null, "Product:", hit.code), /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cmp-card--type-product_details__product-info"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cmp-card--type-product_details__header"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "cmp-card--type-product_details__header__title"
+  }, title), /*#__PURE__*/React.createElement("p", {
+    className: "cmp-card--type-product_details__header__product-code"
+  }, "Product:", hit.code), /*#__PURE__*/React.createElement("img", {
     src: hit.image,
-    alt: imageAlt
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "folding-specification-holder",
-    onClick: handleClick,
-    ref: specificationRef
-  }, /*#__PURE__*/React.createElement("h4", null, "Specifications ", /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faChevronDown,
-    color: "#C4262EFF"
-  })), /*#__PURE__*/React.createElement("ul", null, facets && facets.map(function (facet) {
+    alt: imageAlt,
+    className: "cmp-card--type-product_details__header__product-image"
+  })), facets && /*#__PURE__*/React.createElement(AccordionSection, {
+    title: "Specifications",
+    className: "folding-specification-holder"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "folding-specification-list"
+  }, facets && facets.map(function (facet) {
     return hit[facet.name] && /*#__PURE__*/React.createElement("li", {
       key: facet.name
     }, /*#__PURE__*/React.createElement("strong", null, facet.label), /*#__PURE__*/React.createElement("br", null), facet.returnsHTML ? /*#__PURE__*/React.createElement("span", {
@@ -412,7 +453,30 @@ var ProductDetailsCard = function (_a) {
         __html: hit[facet.name]
       }
     }) : hit[facet.name]);
-  }))));
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "cmp-card--type-product_details__spares-list"
+  }, hit.spares && /*#__PURE__*/React.createElement(AccordionSection, {
+    title: "Spares & Parts",
+    className: "folding-spares-holder"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "folding-spares-list"
+  }, hit.spares && hit.spares.map(function (spare, index) {
+    var args = {
+      cardStyle: "type-card-product",
+      className: "cmp-card",
+      title: spare.name,
+      imageUrl: spare.image,
+      imageAlt: spare.name,
+      onClick: function () {},
+      productPrice: spare.price,
+      showProductPrice: false,
+      cardLink: spare.link,
+      cta: "Go to webshop"
+    };
+    return /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, /*#__PURE__*/React.createElement(ProductCard, args));
+  })))));
 };
 
 function _extends() {
@@ -476,7 +540,7 @@ var Button = function (_a) {
  * @returns The cleaned class name without the prefix.
  */
 var cleanClassNames = function (className, prefixToRemove) {
-  return className.startsWith(prefixToRemove) ? className.replace("".concat(prefixToRemove, "__"), "") : className;
+  return (className === null || className === void 0 ? void 0 : className.startsWith(prefixToRemove)) ? className === null || className === void 0 ? void 0 : className.replace("".concat(prefixToRemove, "__"), "") : className;
 };
 var PRODUCT_DETAILS = 'productDetails';
 var DynamicHeading = function (_a) {
@@ -544,12 +608,12 @@ var AlgoliaDynamicSearch = function (_a) {
   var backgroundStyles = {
     "dark-grey": {
       buttonStyle: "outlineWhite",
-      containerBackground: styles$2.hasStyleGreyBackground,
+      containerBackground: styles$2 === null || styles$2 === void 0 ? void 0 : styles$2.hasStyleGreyBackground,
       textColour: "white"
     },
     "silver": {
       buttonStyle: "primary",
-      containerBackground: styles$2.hasStyleSilverGradientBackground,
+      containerBackground: styles$2 === null || styles$2 === void 0 ? void 0 : styles$2.hasStyleSilverGradientBackground,
       textColour: "black"
     }
   };
@@ -557,26 +621,26 @@ var AlgoliaDynamicSearch = function (_a) {
     buttonStyle: "primary",
     containerBackground: ""};
   // Combine class names properly for SCSS Modules
-  var componentClassNames = "\n        ".concat(cleanClassNames(styles$2.cmpAlgoliaDynamicSearchWidget, 'cmpAlgoliaDynamicSearchWidget'), "\n        ").concat(widgetStyleProps.containerBackground, "\n        ").concat(styles$2["isQuery".concat(queryType.charAt(0).toUpperCase() + queryType.slice(1))] || '', "\n        ").concat(isLoadingState ? styles$2.isLoading : '', "\n        ").concat(className, "\n    ").trim();
+  var componentClassNames = "\n        ".concat(cleanClassNames(styles$2 === null || styles$2 === void 0 ? void 0 : styles$2.cmpAlgoliaDynamicSearchWidget, 'cmpAlgoliaDynamicSearchWidget'), "\n        ").concat(widgetStyleProps === null || widgetStyleProps === void 0 ? void 0 : widgetStyleProps.containerBackground, "\n        ").concat((styles$2 === null || styles$2 === void 0 ? void 0 : styles$2["isQuery".concat(queryType.charAt(0).toUpperCase() + queryType.slice(1))]) || '', "\n        ").concat(isLoadingState ? styles$2 === null || styles$2 === void 0 ? void 0 : styles$2.isLoading : '', "\n        ").concat(className, "\n    ").trim();
   if (!hits || hits.length === 0) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
     className: componentClassNames
   }, isLoadingState && /*#__PURE__*/React.createElement("div", {
-    className: styles$2.cmpAlgoliaDynamicSearchWidget__placeholder
+    className: styles$2 === null || styles$2 === void 0 ? void 0 : styles$2.cmpAlgoliaDynamicSearchWidget__placeholder
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$2.cmpAlgoliaDynamicSearchWidget__placeholder__loading
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.cmpAlgoliaDynamicSearchWidget__container
+    className: styles$2 === null || styles$2 === void 0 ? void 0 : styles$2.cmpAlgoliaDynamicSearchWidget__container
   }, queryType != PRODUCT_DETAILS && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: styles$2.cmpAlgoliaDynamicSearchWidget__header
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.cmpAlgoliaDynamicSearchWidget__header__text
+    className: styles$2 === null || styles$2 === void 0 ? void 0 : styles$2.cmpAlgoliaDynamicSearchWidget__header__text
   }, /*#__PURE__*/React.createElement(DynamicHeading, {
     titleSize: titleSize
   }, heading), /*#__PURE__*/React.createElement("p", null, subtext)), callToActionUrl && /*#__PURE__*/React.createElement("div", {
-    className: styles$2.cmpAlgoliaDynamicSearchWidget__header__cta
+    className: styles$2 === null || styles$2 === void 0 ? void 0 : styles$2.cmpAlgoliaDynamicSearchWidget__header__cta
   }, function () {
     var _a = getCallToActionProps(callToActionType, callToActionUrl),
       finalUrl = _a.finalUrl,
@@ -584,7 +648,7 @@ var AlgoliaDynamicSearch = function (_a) {
     var isAnchor = !!callToActionTargetSelector || (callToActionType === null || callToActionType === void 0 ? void 0 : callToActionType.toLowerCase()) !== 'internal';
     return /*#__PURE__*/React.createElement(Button, {
       element: isAnchor ? 'a' : 'button',
-      buttonStyle: widgetStyleProps.buttonStyle,
+      buttonStyle: widgetStyleProps === null || widgetStyleProps === void 0 ? void 0 : widgetStyleProps.buttonStyle,
       label: callToActionText,
       href: isAnchor ? finalUrl : undefined,
       target: target,
@@ -597,7 +661,7 @@ var AlgoliaDynamicSearch = function (_a) {
       } : undefined
     });
   }()))), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.cmpAlgoliaDynamicSearchWidget__cards
+    className: hits.count == 1 ? styles$2 === null || styles$2 === void 0 ? void 0 : styles$2.cmpAlgoliaDynamicSearchWidget__cardSingle : styles$2 === null || styles$2 === void 0 ? void 0 : styles$2.cmpAlgoliaDynamicSearchWidget__cards
   }, hits.slice(0, maxResults).map(function (hit, index) {
     var Component = Card;
     var title = hit.title;
@@ -613,7 +677,7 @@ var AlgoliaDynamicSearch = function (_a) {
     var contentCategoryLabel = hit.contentCategoryLabel || "";
     var contentCategoryColour = hit.contentCategoryColour || "";
     var price = showProductPrice ? hit.price : "";
-    var cardClassName = styles$2.cmpCard;
+    var cardClassName = styles$2 === null || styles$2 === void 0 ? void 0 : styles$2.cmpCard;
     switch (queryType) {
       case "products":
         Component = ProductCard;
@@ -759,7 +823,7 @@ var QrFormField = function (props) {
   }, props.label, " ", props.required && /*#__PURE__*/React.createElement("span", {
     className: "required-asterisk"
   }, "*")), /*#__PURE__*/React.createElement(FormFieldRenderer, _extends({
-    key: props.value,
+    key: props.name,
     type: props.type,
     value: supportsValue ? props.value : undefined,
     checked: props.checked,
@@ -1156,7 +1220,7 @@ var QrForm = function (props) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "qr-journey-form-wrapper"
-  }, props.formHeader && /*#__PURE__*/React.createElement("h1", null, props.formHeader), "Show thank you:", props.showThankYou, !props.showThankYou ? /*#__PURE__*/React.createElement("form", {
+  }, props.formHeader && /*#__PURE__*/React.createElement("h1", null, props.formHeader), !props.showThankYou ? /*#__PURE__*/React.createElement("form", {
     action: "".concat(props.formAction, "/").concat(props.hubspotAppId, "/").concat(props.hubspotId),
     onSubmit: handleSubmit
   }, currentPage === 0 && /*#__PURE__*/React.createElement("section", {
@@ -1198,5 +1262,5 @@ var QrForm = function (props) {
   })));
 };
 
-export { AlgoliaDynamicSearch, FormFieldRenderer, QrForm };
+export { AccordionSection, AlgoliaDynamicSearch, FormFieldRenderer, QrForm };
 //# sourceMappingURL=index.esm.js.map