@asantemedia-org/edwardsvacuum-design-system 1.6.40 → 1.6.41

package/dist/index.css

@@ -338,9 +338,15 @@
   margin-bottom: 1rem;
 }
 .card-module__cmp-card--type-product_details__header__title___4KSqX {
-  font-size: 1.5rem;
-  font-weight: 600;
+  font-size: clamp(1.5rem, 2vw, 28px);
+  font-weight: 100;
   margin-bottom: 0.5rem;
+  color: #2d363a;
+}
+@media (min-width: 768px) {
+  .card-module__cmp-card--type-product_details__header__title___4KSqX {
+    max-width: 325px;
+  }
 }
 .card-module__cmp-card--type-product_details__header__product-code___zf7yq {
   font-size: 0.875rem;
@@ -406,6 +412,8 @@
 }
 .accordion-section__title {
   flex: 1;
+  font-weight: 100;
+  color: #2d363a;
 }
 .accordion-section__icon {
   transition: transform 0.3s ease;
@@ -1428,10 +1436,10 @@
   font-size: 18px;
 }
 .qr-journey-form-wrapper h1 {
-  font-size: 24px;
+  font-size: 28px;
   font-family: "Calibri W05 Light", "Calibri", sans-serif;
   color: rgb(87, 94, 97);
-  font-weight: 400;
+  font-weight: 100;
   margin-bottom: 2em;
   position: relative;
 }
@@ -1635,29 +1643,49 @@
 }
 .qr-journey-form-wrapper .disabled-product-fields-section {
   background-color: rgb(243, 243, 243);
-  padding: 5px 18px;
+  padding: 1rem;
   margin: 1em 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
 }
 .qr-journey-form-wrapper .disabled-product-fields-section h2 {
   color: rgb(87, 94, 97);
   padding-left: 1.5em;
   position: relative;
+  font-weight: 400;
+  margin: 0;
 }
 .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields {
   display: flex;
   flex-wrap: wrap;
 }
+@media (min-width: 768px) {
+  .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields {
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+}
 .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper {
   flex: 0.5 1;
   min-width: 50%;
 }
+@media (min-width: 768px) {
+  .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper {
+    flex: 0 1;
+    min-width: 25%;
+  }
+}
 .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper label .label {
   height: 1em;
   opacity: 1;
   font-weight: 900;
+  font-size: 16px;
 }
 .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper label input {
   border: 0;
+  font-size: 16px;
+  font-weight: 100;
   background-color: transparent;
   padding: 0;
 }
@@ -1732,9 +1760,20 @@
   justify-content: space-between;
   gap: 1em;
   max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1em;
+}
+.qr-journey-form-wrapper.desktop-true h1 {
+  margin: 0;
+}
+.qr-journey-form-wrapper.desktop-true h1:after {
+  display: none;
 }
 .qr-journey-form-wrapper.desktop-true .form-progress {
   max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
 }
 .qr-journey-form-wrapper.desktop-true form {
   flex: 1;
@@ -1743,6 +1782,10 @@
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop {
   padding: 0;
 }
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop.first-page {
+  padding: 2.5rem 0 0 0;
+  border-top: 1px solid rgb(233, 233, 233);
+}
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li {
   list-style: none;
   display: flex;
@@ -1762,7 +1805,7 @@
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li .bullet-point:after {
   content: "";
-  width: 2px;
+  width: 1.25px;
   height: 25px;
   background-color: rgb(130, 134, 136);
   position: absolute;
@@ -1780,18 +1823,21 @@
   text-align: left;
   flex: 2;
   color: rgb(130, 134, 136);
+  font-size: 1.25rem;
+  font-weight: 400;
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li span {
   position: absolute;
   left: 0;
   right: 0;
-  top: 0;
+  top: 2px;
   bottom: 0;
   height: 1em;
   width: 1em;
   text-align: center;
   line-height: 1em;
   margin: auto;
+  font-weight: 400;
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked .bullet-point {
   background-color: rgb(196, 38, 46);
@@ -1799,6 +1845,7 @@
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked h3 {
   color: black;
+  font-weight: 700;
 }
 .qr-journey-form-wrapper.desktop-true .qr-form-thank-you-page {
   max-width: 400px;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { AlgoliaDynamicSearchRaw, AlgoliaDynamicSearchEdwards as AlgoliaDynamicSearch } from "@stories/experiences/Algolia-dynamic-search/algolia-dynamic-search";
-export * from "@stories/experiences/QRFormJourney/Qr-form/Qr-form";
-export * from "@stories/experiences/QRFormJourney/FormFieldType";
-export * from "@stories/components/AccordionSection";
+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";
+export { AccordionSection } from "@stories/components/AccordionSection";
 import "@stories/experiences/QRFormJourney/Qr-form/Qr-form";

package/dist/index.esm.css

@@ -338,9 +338,15 @@
   margin-bottom: 1rem;
 }
 .card-module__cmp-card--type-product_details__header__title___4KSqX {
-  font-size: 1.5rem;
-  font-weight: 600;
+  font-size: clamp(1.5rem, 2vw, 28px);
+  font-weight: 100;
   margin-bottom: 0.5rem;
+  color: #2d363a;
+}
+@media (min-width: 768px) {
+  .card-module__cmp-card--type-product_details__header__title___4KSqX {
+    max-width: 325px;
+  }
 }
 .card-module__cmp-card--type-product_details__header__product-code___zf7yq {
   font-size: 0.875rem;
@@ -406,6 +412,8 @@
 }
 .accordion-section__title {
   flex: 1;
+  font-weight: 100;
+  color: #2d363a;
 }
 .accordion-section__icon {
   transition: transform 0.3s ease;
@@ -1428,10 +1436,10 @@
   font-size: 18px;
 }
 .qr-journey-form-wrapper h1 {
-  font-size: 24px;
+  font-size: 28px;
   font-family: "Calibri W05 Light", "Calibri", sans-serif;
   color: rgb(87, 94, 97);
-  font-weight: 400;
+  font-weight: 100;
   margin-bottom: 2em;
   position: relative;
 }
@@ -1635,29 +1643,49 @@
 }
 .qr-journey-form-wrapper .disabled-product-fields-section {
   background-color: rgb(243, 243, 243);
-  padding: 5px 18px;
+  padding: 1rem;
   margin: 1em 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
 }
 .qr-journey-form-wrapper .disabled-product-fields-section h2 {
   color: rgb(87, 94, 97);
   padding-left: 1.5em;
   position: relative;
+  font-weight: 400;
+  margin: 0;
 }
 .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields {
   display: flex;
   flex-wrap: wrap;
 }
+@media (min-width: 768px) {
+  .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields {
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+}
 .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper {
   flex: 0.5 1;
   min-width: 50%;
 }
+@media (min-width: 768px) {
+  .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper {
+    flex: 0 1;
+    min-width: 25%;
+  }
+}
 .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper label .label {
   height: 1em;
   opacity: 1;
   font-weight: 900;
+  font-size: 16px;
 }
 .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper label input {
   border: 0;
+  font-size: 16px;
+  font-weight: 100;
   background-color: transparent;
   padding: 0;
 }
@@ -1732,9 +1760,20 @@
   justify-content: space-between;
   gap: 1em;
   max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1em;
+}
+.qr-journey-form-wrapper.desktop-true h1 {
+  margin: 0;
+}
+.qr-journey-form-wrapper.desktop-true h1:after {
+  display: none;
 }
 .qr-journey-form-wrapper.desktop-true .form-progress {
   max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
 }
 .qr-journey-form-wrapper.desktop-true form {
   flex: 1;
@@ -1743,6 +1782,10 @@
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop {
   padding: 0;
 }
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop.first-page {
+  padding: 2.5rem 0 0 0;
+  border-top: 1px solid rgb(233, 233, 233);
+}
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li {
   list-style: none;
   display: flex;
@@ -1762,7 +1805,7 @@
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li .bullet-point:after {
   content: "";
-  width: 2px;
+  width: 1.25px;
   height: 25px;
   background-color: rgb(130, 134, 136);
   position: absolute;
@@ -1780,18 +1823,21 @@
   text-align: left;
   flex: 2;
   color: rgb(130, 134, 136);
+  font-size: 1.25rem;
+  font-weight: 400;
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li span {
   position: absolute;
   left: 0;
   right: 0;
-  top: 0;
+  top: 2px;
   bottom: 0;
   height: 1em;
   width: 1em;
   text-align: center;
   line-height: 1em;
   margin: auto;
+  font-weight: 400;
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked .bullet-point {
   background-color: rgb(196, 38, 46);
@@ -1799,6 +1845,7 @@
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked h3 {
   color: black;
+  font-weight: 700;
 }
 .qr-journey-form-wrapper.desktop-true .qr-form-thank-you-page {
   max-width: 400px;

package/dist/index.esm.js

@@ -414,6 +414,8 @@ var ProductCard = function (_a) {
     title = _a.title,
     imageUrl = _a.imageUrl,
     imageAlt = _a.imageAlt,
+    _b = _a.showImage,
+    showImage = _b === void 0 ? true : _b,
     productPrice = _a.productPrice,
     showProductPrice = _a.showProductPrice,
     cardLink = _a.cardLink,
@@ -433,7 +435,7 @@ var ProductCard = function (_a) {
     target: "_blank"
   }, /*#__PURE__*/React.createElement("div", {
     className: getStyle$1("cmp-card--type-card-product__wrapper")
-  }, /*#__PURE__*/React.createElement("div", {
+  }, showImage && /*#__PURE__*/React.createElement("div", {
     className: getStyle$1("cmp-card--type-card-product__image")
   }, /*#__PURE__*/React.createElement("figure", null, /*#__PURE__*/React.createElement("img", {
     src: productImage,
@@ -480,10 +482,11 @@ var ProductDetailsCard = function (_a) {
         title: spare.name || 'Spare Part',
         imageUrl: spare['img-product'] || spare.image || '',
         imageAlt: spare.name || 'Spare Part',
-        productPrice: spare.priceValue || spare.price || '',
-        showProductPrice: false,
+        productPrice: spare.priceValue || spare.price || '$450.00',
+        showProductPrice: true,
         cardLink: spare.url || spare.link || '#',
-        cta: "Go to webshop"
+        cta: "Go to webshop",
+        showImage: false
       }));
     }), hit.spares.length > MAX_SPARES_TO_RENDER && /*#__PURE__*/React.createElement("li", {
       className: getStyle$1("folding-spares-list__more")
@@ -521,7 +524,8 @@ var ProductDetailsCard = function (_a) {
   }, hit.spares && hit.spares.length > 0 && /*#__PURE__*/React.createElement(AccordionSection, {
     title: "Spares & Parts",
     className: getStyle$1("folding-spares-holder"),
-    lazyLoad: true
+    lazyLoad: true,
+    defaultOpen: true
   }, renderSpares())));
 };
 
@@ -1299,14 +1303,14 @@ var QrForm = function (props) {
       className: "qr-form-navigation"
     }, !isFirstPage ? /*#__PURE__*/React.createElement(Button, {
       label: i18n === null || i18n === void 0 ? void 0 : i18n.previous,
-      className: "qr-form-nav",
       onClick: formNavigate,
-      "data-page_target": pageIndex - 1
+      "data-page_target": pageIndex - 1,
+      buttonStyle: "secondary"
     }) : /*#__PURE__*/React.createElement("div", null), !isLastPage ? /*#__PURE__*/React.createElement(Button, {
       label: i18n === null || i18n === void 0 ? void 0 : i18n.next,
-      className: "qr-form-nav",
       onClick: formNavigate,
-      "data-page_target": pageIndex + 1
+      "data-page_target": pageIndex + 1,
+      buttonStyle: "primary"
     }) : /*#__PURE__*/React.createElement("input", {
       type: "submit",
       value: i18n === null || i18n === void 0 ? void 0 : i18n.submit
@@ -1335,7 +1339,7 @@ var QrForm = function (props) {
   }, !props.showThankYou ? /*#__PURE__*/React.createElement(React.Fragment, null, !isMobile && /*#__PURE__*/React.createElement("div", {
     className: "form-progress"
   }, props.formHeader && currentPage === 0 && /*#__PURE__*/React.createElement("h1", null, props.formHeader), /*#__PURE__*/React.createElement("ul", {
-    className: "progress-indicator-desktop"
+    className: "progress-indicator-desktop current-page-".concat(currentPage, " ").concat(currentPage === 0 ? "first-page" : "")
   }, pages.map(function (_, index) {
     return /*#__PURE__*/React.createElement("li", {
       className: currentPage >= index ? "checked" : "",
@@ -1391,5 +1395,5 @@ var QrForm = function (props) {
   })));
 };
 
-export { AccordionSection, AlgoliaDynamicSearchEdwards as AlgoliaDynamicSearch, AlgoliaDynamicSearchRaw, FormFieldRenderer, QrForm };
+export { AccordionSection, AlgoliaDynamicSearchEdwards as AlgoliaDynamicSearch, AlgoliaDynamicSearchRaw, QrForm };
 //# sourceMappingURL=index.esm.js.map