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

package/dist/index.css

@@ -458,13 +458,21 @@
   background: rgb(255, 255, 255);
   color: #2d363a;
 }
+.Button-module__cmp-button--style-primary___hfLAd:focus-visible {
+  outline: 2px solid rgb(196, 38, 46);
+  outline-offset: 2px;
+}
 .Button-module__cmp-button--style-secondary___3Dqvg {
   background: #2d363a;
   color: rgb(255, 255, 255);
 }
 .Button-module__cmp-button--style-secondary___3Dqvg:hover {
-  background: linear-gradient(45deg, rgb(172, 174, 176), rgb(130, 134, 136));
-  color: rgb(255, 255, 255);
+  background: rgb(255, 255, 255);
+  color: #2d363a;
+}
+.Button-module__cmp-button--style-secondary___3Dqvg:focus-visible {
+  outline: 2px solid #2d363a;
+  outline-offset: 2px;
 }
 .Button-module__cmp-button--style-tertiary___Akcep {
   background: rgb(255, 255, 255);
@@ -1609,7 +1617,7 @@
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea {
   line-height: 1em;
-  padding: 10px 18px 10px 18px;
+  padding: 1.5rem 1rem 0rem 1rem;
   box-sizing: content-box;
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select {

package/dist/index.esm.css

@@ -458,13 +458,21 @@
   background: rgb(255, 255, 255);
   color: #2d363a;
 }
+.Button-module__cmp-button--style-primary___hfLAd:focus-visible {
+  outline: 2px solid rgb(196, 38, 46);
+  outline-offset: 2px;
+}
 .Button-module__cmp-button--style-secondary___3Dqvg {
   background: #2d363a;
   color: rgb(255, 255, 255);
 }
 .Button-module__cmp-button--style-secondary___3Dqvg:hover {
-  background: linear-gradient(45deg, rgb(172, 174, 176), rgb(130, 134, 136));
-  color: rgb(255, 255, 255);
+  background: rgb(255, 255, 255);
+  color: #2d363a;
+}
+.Button-module__cmp-button--style-secondary___3Dqvg:focus-visible {
+  outline: 2px solid #2d363a;
+  outline-offset: 2px;
 }
 .Button-module__cmp-button--style-tertiary___Akcep {
   background: rgb(255, 255, 255);
@@ -1609,7 +1617,7 @@
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea {
   line-height: 1em;
-  padding: 10px 18px 10px 18px;
+  padding: 1.5rem 1rem 0rem 1rem;
   box-sizing: content-box;
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select {

package/dist/index.esm.js

@@ -526,13 +526,14 @@ var ProductDetailsCard = function (_a) {
     className: getClassName("cmp-card--type-product_details__header__title")
   }, title), /*#__PURE__*/React.createElement("p", {
     className: getClassName("cmp-card--type-product_details__header__product-code")
-  }, "Product:", hit === null || hit === void 0 ? void 0 : hit.code), /*#__PURE__*/React.createElement("img", {
+  }, "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: getClassName("cmp-card--type-product_details__header__product-image")
   })), facets && /*#__PURE__*/React.createElement(AccordionSection, {
     title: "Specifications",
-    className: getClassName("folding-specification-holder")
+    className: getClassName("folding-specification-holder"),
+    defaultOpen: true
   }, /*#__PURE__*/React.createElement("ul", {
     className: getClassName("folding-specification-list")
   }, facets && facets.map(function (facet) {
@@ -969,7 +970,7 @@ var QrFormField = function (props) {
   } : {}, props.type === "select" ? {
     options: props.options
   } : {}, {
-    placeholder: props.placeholder,
+    placeholder: "".concat(props.placeholder, " ").concat(props.required ? "*" : ""),
     maxLength: props.maxLength
   }))), props.errorMessage && props.hasError && /*#__PURE__*/React.createElement("span", {
     className: "formfield-error"
@@ -1004,10 +1005,10 @@ var defaultQrFormTranslations = {
   pageTitle_aboutYou: "About you",
   pageTitle_contactDetails: "Your contact details",
   pageTitle_consents: "Consents",
-  label_howCanWeHelp: "How can we help?",
-  label_customerSupport: "Customer Support",
-  label_technicalSupport: "Technical Support",
-  label_ProductDetails: "Product Information",
+  label_howMayWeHelpYou: "How may we help you?",
+  label_customerSupport: "Customer support",
+  label_technicalSupport: "Technical support",
+  label_ProductDetails: "Product information",
   label_warrantyClaim: "Warranty claim",
   label_serviceRequest: "Service request",
   label_oilAndSpares: "Oil and spares",
@@ -1023,7 +1024,7 @@ var defaultQrFormTranslations = {
   label_email: "Email",
   label_phone: "Phone",
   label_city: "City",
-  label_zip: "ZIP / Postal code",
+  label_postcodeOrZip: "Postcode or ZIP",
   consent_acceptPolicy: "I accept the policy",
   consent_default: "Consent",
   consent_requiredMessage: "Please acknowledge this consent"
@@ -1165,10 +1166,13 @@ var QrForm = function (props) {
     type: "select",
     name: "how_can_we_help",
     options: [{
-      label: i18n.label_howCanWeHelp,
+      label: i18n.label_howMayWeHelpYou,
       value: "",
       selected: true,
       disabled: true
+    }, {
+      label: i18n.label_technicalSupport,
+      value: "technical support"
     }, {
       label: i18n.label_warrantyClaim,
       value: "warranty claim"
@@ -1235,9 +1239,9 @@ var QrForm = function (props) {
     required: false
   }, {
     type: "text",
-    name: "zip",
-    label: i18n.label_zip,
-    placeholder: i18n.label_zip,
+    name: "postcodeOrZip",
+    label: i18n.label_postcodeOrZip,
+    placeholder: i18n.label_postcodeOrZip,
     required: false
   }], __spreadArray([], consentFields, true)];
   var handleChange = function (name, value) {
@@ -1330,20 +1334,23 @@ var QrForm = function (props) {
     }
   }
   var renderQrFormField = function (field) {
-    return /*#__PURE__*/React.createElement(QrFormField, _extends({}, field, {
-      key: field.name,
-      label: field.label,
-      value: formValues[field.name],
-      onChange: function (e) {
-        return handleChange(field.name, e.target.value);
-      },
-      isDisabled: field.isDisabled,
-      errorMessage: field.errorMessage,
-      hasError: errors[field.name] || false,
-      required: field.required
-    }, field.type === "text" || field.type === "email" || field.type === "tel" || field.type === "textarea" || field.type === "number" ? {
-      regex: field.regex
-    } : {}));
+    return (
+      // if no label, don't render the field
+      field.value ? /*#__PURE__*/React.createElement(QrFormField, _extends({}, field, {
+        key: field.name,
+        label: field.label,
+        value: formValues[field.name],
+        onChange: function (e) {
+          return handleChange(field.name, e.target.value);
+        },
+        isDisabled: field.isDisabled,
+        errorMessage: field.errorMessage,
+        hasError: errors[field.name] || false,
+        required: field.required
+      }, field.type === "text" || field.type === "email" || field.type === "tel" || field.type === "textarea" || field.type === "number" ? {
+        regex: field.regex
+      } : {})) : null
+    );
   };
   var renderProgressBar = function (pageIndex) {
     return isMobile ? /*#__PURE__*/React.createElement("div", {