@asantemedia-org/edwardsvacuum-design-system 1.6.45 → 1.6.46

package/dist/index.css

@@ -495,6 +495,9 @@
   color: rgb(255, 255, 255);
   border-color: #2d363a;
 }
+.Button-module__cmp-button___SMjDF:visited {
+  color: rgb(255, 255, 255);
+}
 @keyframes algolia-dynamic-search-module__loading___Hb3Uw {
   0% {
     transform: skewX(-10deg) translateX(-100%);
@@ -1831,9 +1834,30 @@
 }
 .qr-journey-form-wrapper .qr-form-thank-you-page {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  gap: 1rem;
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper h2 {
+  margin: 0;
+}
+@media (min-width: 768px) {
+  .qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper {
+    flex-direction: column;
+    justify-content: unset;
+    align-items: flex-start;
+  }
 }
 .qr-journey-form-wrapper .qr-form-thank-you-page p {
   line-height: 1.2em;
+  margin: 0;
 }
 .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked {
   background-color: white;
@@ -1841,9 +1865,13 @@
   height: 60px;
   border-radius: 50%;
   border: 6px solid rgb(196, 38, 46);
-  position: absolute;
-  top: -20px;
-  right: 0;
+  position: relative;
+  margin-left: auto;
+}
+@media (min-width: 768px) {
+  .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked {
+    margin-left: 0;
+  }
 }
 .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:after, .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:before {
   position: absolute;

package/dist/index.esm.css

@@ -495,6 +495,9 @@
   color: rgb(255, 255, 255);
   border-color: #2d363a;
 }
+.Button-module__cmp-button___SMjDF:visited {
+  color: rgb(255, 255, 255);
+}
 @keyframes algolia-dynamic-search-module__loading___Hb3Uw {
   0% {
     transform: skewX(-10deg) translateX(-100%);
@@ -1831,9 +1834,30 @@
 }
 .qr-journey-form-wrapper .qr-form-thank-you-page {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  gap: 1rem;
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper h2 {
+  margin: 0;
+}
+@media (min-width: 768px) {
+  .qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper {
+    flex-direction: column;
+    justify-content: unset;
+    align-items: flex-start;
+  }
 }
 .qr-journey-form-wrapper .qr-form-thank-you-page p {
   line-height: 1.2em;
+  margin: 0;
 }
 .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked {
   background-color: white;
@@ -1841,9 +1865,13 @@
   height: 60px;
   border-radius: 50%;
   border: 6px solid rgb(196, 38, 46);
-  position: absolute;
-  top: -20px;
-  right: 0;
+  position: relative;
+  margin-left: auto;
+}
+@media (min-width: 768px) {
+  .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked {
+    margin-left: 0;
+  }
 }
 .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:after, .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:before {
   position: absolute;

package/dist/index.js

@@ -1,10 +1,8 @@
-'use strict';
-
-var React = require('react');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
-var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
-var uuid = require('uuid');
-var reactInternationalPhone = require('react-international-phone');
+import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown, faChevronRight, faArrowRight } from '@fortawesome/pro-solid-svg-icons';
+import { v4 } from 'uuid';
+import { PhoneInput } from 'react-international-phone';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -251,15 +249,15 @@ var AccordionSection = function (_a) {
     defaultOpen = _c === void 0 ? false : _c,
     _d = _a.lazyLoad,
     lazyLoad = _d === void 0 ? false : _d;
-  var _e = React.useState(defaultOpen),
+  var _e = useState(defaultOpen),
     isOpen = _e[0],
     setIsOpen = _e[1];
-  var _f = React.useState(defaultOpen),
+  var _f = useState(defaultOpen),
     hasBeenOpened = _f[0],
     setHasBeenOpened = _f[1];
   // Prevent rapid clicks
-  var isToggling = React.useRef(false);
-  var toggleAccordion = React.useCallback(function (e) {
+  var isToggling = useRef(false);
+  var toggleAccordion = useCallback(function (e) {
     // Stop event propagation to prevent AEM handlers
     e.stopPropagation();
     e.preventDefault();
@@ -280,7 +278,7 @@ var AccordionSection = function (_a) {
       }, 300);
     });
   }, [hasBeenOpened]);
-  var handleKeyDown = React.useCallback(function (e) {
+  var handleKeyDown = useCallback(function (e) {
     if (e.key === 'Enter' || e.key === ' ') {
       toggleAccordion(e);
     }
@@ -304,8 +302,8 @@ var AccordionSection = function (_a) {
       transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
       transition: 'transform 0.2s ease'
     }
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: proSolidSvgIcons.faChevronDown,
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faChevronDown,
     color: "#C4262E"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "accordion-section__content",
@@ -401,12 +399,12 @@ var Card = function (_a) {
     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(reactFontawesome.FontAwesomeIcon, {
-    icon: proSolidSvgIcons.faChevronRight
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faChevronRight
   })) : cardStyle === "label" ? /*#__PURE__*/React.createElement("span", {
     className: getStyle$1("cmp-card__footer")
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: proSolidSvgIcons.faArrowRight
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowRight
   })) : /*#__PURE__*/React.createElement("span", {
     className: getStyle$1("cmp-card__footer")
   }, /*#__PURE__*/React.createElement("span", null, cta))))));
@@ -452,8 +450,8 @@ var ProductCard = function (_a) {
     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(reactFontawesome.FontAwesomeIcon, {
-    icon: proSolidSvgIcons.faArrowRight
+  }, cta ? cta : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowRight
   }))))));
 };
 // Maximum spares to render to prevent browser freeze
@@ -640,16 +638,16 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
     analytics = _a.analytics,
     facets = _a.facets;
   // Helper to resolve CSS module class names properly
-  var getClass = React.useCallback(function (suffix) {
+  var getClass = useCallback(function (suffix) {
     var fullClassName = "cmpAlgoliaDynamicSearchWidget".concat(suffix);
     return useScopedStyles && styles ? styles[fullClassName] : fullClassName;
   }, [useScopedStyles, styles]);
   // Helper for modifier classes (without the base prefix)
-  var getModifierClass = React.useCallback(function (modifier) {
+  var getModifierClass = useCallback(function (modifier) {
     return useScopedStyles && styles ? styles[modifier] : modifier;
   }, [useScopedStyles, styles]);
   // Memoize background styling to prevent re-renders
-  var widgetStyleProps = React.useMemo(function () {
+  var widgetStyleProps = useMemo(function () {
     var backgroundStyles = {
       "dark-grey": {
         buttonStyle: "outlineWhite",
@@ -673,7 +671,7 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
   }
   var baseClass = getClass('');
   // Memoize wrapper class names
-  var wrapperClasses = React.useMemo(function () {
+  var wrapperClasses = useMemo(function () {
     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", {
@@ -804,7 +802,7 @@ function RenderField(field) {
         maxLength: field.maxLength
       });
     case "tel":
-      return /*#__PURE__*/React.createElement(reactInternationalPhone.PhoneInput, {
+      return /*#__PURE__*/React.createElement(PhoneInput, {
         value: field.value || '',
         onChange: function (phone) {
           if (field.onPhoneChange) {
@@ -895,11 +893,11 @@ var FormFieldRenderer = function (props) {
 };
 
 var QrFormField = function (props) {
-  var _a = React.useState(''),
+  var _a = useState(''),
     inputId = _a[0],
     setInputId = _a[1];
-  React.useEffect(function () {
-    setInputId(uuid.v4());
+  useEffect(function () {
+    setInputId(v4());
   }, []);
   var supportsValue = props.type !== "checkbox";
   return props.type ? /*#__PURE__*/React.createElement("div", {
@@ -941,10 +939,10 @@ var QrFormField = function (props) {
 function useIsMobile() {
   var query = "(max-width: 960px)";
   var media = typeof window !== "undefined" ? window.matchMedia(query) : null;
-  var _a = React.useState(media ? media.matches : false),
+  var _a = useState(media ? media.matches : false),
     isMobile = _a[0],
     setIsMobile = _a[1];
-  React.useEffect(function () {
+  useEffect(function () {
     if (!media) return;
     var handler = function () {
       return setIsMobile(media.matches);
@@ -988,23 +986,23 @@ var defaultQrFormTranslations = {
 
 var QrForm = function (props) {
   var _a;
-  var _b = React.useState(0),
+  var _b = useState(0),
     currentPage = _b[0],
     setCurrentPage = _b[1];
-  var _c = React.useState({}),
+  var _c = useState({}),
     formValues = _c[0],
     setFormValues = _c[1];
-  var _d = React.useState({}),
+  var _d = useState({}),
     errors = _d[0],
     setErrors = _d[1];
-  var _e = React.useState(false);
+  var _e = useState(false);
     _e[0];
     var setShowErrors = _e[1];
   var isMobile = useIsMobile();
-  var _f = React.useState(null),
+  var _f = useState(null),
     countryOptions = _f[0],
     setCountryOptions = _f[1];
-  var _g = React.useState(true);
+  var _g = useState(true);
     _g[0];
     var setIsLoadingCountries = _g[1];
   var i18n = __assign(__assign({}, defaultQrFormTranslations), props);
@@ -1019,14 +1017,14 @@ var QrForm = function (props) {
       errorMessage: consent.policyMandatory ? i18n.consent_requiredMessage : ""
     };
   })) || [];
-  React.useEffect(function () {
+  useEffect(function () {
     var initialValues = {};
     props.fields.forEach(function (field) {
       initialValues[field.name] = field.value || '';
     });
     setFormValues(initialValues);
   }, [props.fields]);
-  React.useEffect(function () {
+  useEffect(function () {
     function loadCountries() {
       return __awaiter(this, void 0, void 0, function () {
         var fallbackCountries, res, data, err_1;
@@ -1080,7 +1078,7 @@ var QrForm = function (props) {
     }
     loadCountries();
   }, []);
-  React.useEffect(function () {
+  useEffect(function () {
     function fetchCity() {
       return __awaiter(this, void 0, void 0, function () {
         var res, data_1, err_2;
@@ -1422,8 +1420,4 @@ var QrForm = function (props) {
   })));
 };
 
-exports.AccordionSection = AccordionSection;
-exports.AlgoliaDynamicSearch = AlgoliaDynamicSearchEdwards;
-exports.AlgoliaDynamicSearchRaw = AlgoliaDynamicSearchRaw;
-exports.QrForm = QrForm;
-//# sourceMappingURL=index.js.map
+export { AccordionSection, AlgoliaDynamicSearchEdwards as AlgoliaDynamicSearch, AlgoliaDynamicSearchRaw, QrForm };

package/dist/index.scss

@@ -495,6 +495,9 @@
   color: rgb(255, 255, 255);
   border-color: #2d363a;
 }
+.Button-module__cmp-button___SMjDF:visited {
+  color: rgb(255, 255, 255);
+}
 @keyframes algolia-dynamic-search-module__loading___Hb3Uw {
   0% {
     transform: skewX(-10deg) translateX(-100%);
@@ -1831,9 +1834,30 @@
 }
 .qr-journey-form-wrapper .qr-form-thank-you-page {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  gap: 1rem;
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper h2 {
+  margin: 0;
+}
+@media (min-width: 768px) {
+  .qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper {
+    flex-direction: column;
+    justify-content: unset;
+    align-items: flex-start;
+  }
 }
 .qr-journey-form-wrapper .qr-form-thank-you-page p {
   line-height: 1.2em;
+  margin: 0;
 }
 .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked {
   background-color: white;
@@ -1841,9 +1865,13 @@
   height: 60px;
   border-radius: 50%;
   border: 6px solid rgb(196, 38, 46);
-  position: absolute;
-  top: -20px;
-  right: 0;
+  position: relative;
+  margin-left: auto;
+}
+@media (min-width: 768px) {
+  .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked {
+    margin-left: 0;
+  }
 }
 .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:after, .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:before {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asantemedia-org/edwardsvacuum-design-system",
-  "version": "1.6.45",
+  "version": "1.6.46",
   "description": "Design system for EdwardsVacuum",
   "license": "UNLICENSED",
   "main": "dist/index.js",