@asantemedia-org/edwardsvacuum-design-system 1.6.42 → 1.6.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/index.css +31 -1
  2. package/dist/index.esm.css +31 -1
  3. package/dist/index.esm.js +28 -2
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +28 -2
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.scss +31 -1
  8. package/dist/stories/experiences/QRFormJourney/FormFieldType.d.ts +11 -2
  9. package/dist/tsconfig.tsbuildinfo +1 -1
  10. package/package.json +4 -2
package/dist/index.css CHANGED
@@ -1585,6 +1585,12 @@
1585
1585
  padding: 10px 18px 10px 18px;
1586
1586
  box-sizing: content-box;
1587
1587
  }
1588
+ .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel], .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel], .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel] {
1589
+ padding: 9px 18px 9px 18px;
1590
+ }
1591
+ .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel]:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel]:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel]:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel]:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel]:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel]:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:focus-visible {
1592
+ padding: 9px 18px 9px 18px;
1593
+ }
1588
1594
  .qr-journey-form-wrapper .qr-form-filed-wrapper label input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:focus-visible {
1589
1595
  border: 2px solid #678B3B;
1590
1596
  outline: none;
@@ -1645,6 +1651,30 @@
1645
1651
  font-size: 12px;
1646
1652
  line-height: 18px;
1647
1653
  }
1654
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container {
1655
+ width: 100%;
1656
+ }
1657
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button {
1658
+ height: calc(2.3em + 20px);
1659
+ border: 1px solid;
1660
+ border-right: none;
1661
+ padding: 0 10px;
1662
+ background: white;
1663
+ border-radius: 0;
1664
+ }
1665
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input {
1666
+ width: 100%;
1667
+ height: calc(2.3em - 2px);
1668
+ line-height: 1em;
1669
+ padding: 10px 18px;
1670
+ border: 1px solid;
1671
+ font-size: 18px;
1672
+ border-radius: 0;
1673
+ }
1674
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus-visible {
1675
+ border: 2px solid #678B3B;
1676
+ outline: none;
1677
+ }
1648
1678
  .qr-journey-form-wrapper .disabled-product-fields-section {
1649
1679
  background-color: rgb(243, 243, 243);
1650
1680
  padding: 1rem;
@@ -1850,7 +1880,7 @@
1850
1880
  background-color: rgb(196, 38, 46);
1851
1881
  color: #FFFFFF;
1852
1882
  }
1853
- .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked h3 {
1883
+ .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page h3 {
1854
1884
  color: black;
1855
1885
  font-weight: 700;
1856
1886
  }
package/dist/index.esm.css CHANGED
@@ -1585,6 +1585,12 @@
1585
1585
  padding: 10px 18px 10px 18px;
1586
1586
  box-sizing: content-box;
1587
1587
  }
1588
+ .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel], .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel], .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel] {
1589
+ padding: 9px 18px 9px 18px;
1590
+ }
1591
+ .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel]:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel]:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel]:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel]:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel]:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel]:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:focus-visible {
1592
+ padding: 9px 18px 9px 18px;
1593
+ }
1588
1594
  .qr-journey-form-wrapper .qr-form-filed-wrapper label input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:focus-visible {
1589
1595
  border: 2px solid #678B3B;
1590
1596
  outline: none;
@@ -1645,6 +1651,30 @@
1645
1651
  font-size: 12px;
1646
1652
  line-height: 18px;
1647
1653
  }
1654
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container {
1655
+ width: 100%;
1656
+ }
1657
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button {
1658
+ height: calc(2.3em + 20px);
1659
+ border: 1px solid;
1660
+ border-right: none;
1661
+ padding: 0 10px;
1662
+ background: white;
1663
+ border-radius: 0;
1664
+ }
1665
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input {
1666
+ width: 100%;
1667
+ height: calc(2.3em - 2px);
1668
+ line-height: 1em;
1669
+ padding: 10px 18px;
1670
+ border: 1px solid;
1671
+ font-size: 18px;
1672
+ border-radius: 0;
1673
+ }
1674
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus-visible {
1675
+ border: 2px solid #678B3B;
1676
+ outline: none;
1677
+ }
1648
1678
  .qr-journey-form-wrapper .disabled-product-fields-section {
1649
1679
  background-color: rgb(243, 243, 243);
1650
1680
  padding: 1rem;
@@ -1850,7 +1880,7 @@
1850
1880
  background-color: rgb(196, 38, 46);
1851
1881
  color: #FFFFFF;
1852
1882
  }
1853
- .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked h3 {
1883
+ .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page h3 {
1854
1884
  color: black;
1855
1885
  font-weight: 700;
1856
1886
  }
package/dist/index.esm.js CHANGED
@@ -2,6 +2,8 @@ import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react'
2
2
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3
3
  import { faChevronDown, faChevronRight, faArrowRight } from '@fortawesome/pro-solid-svg-icons';
4
4
  import { v4 } from 'uuid';
5
+ import { PhoneInput } from 'react-international-phone';
6
+ import 'react-international-phone/style.css';
5
7
 
6
8
  /******************************************************************************
7
9
  Copyright (c) Microsoft Corporation.
@@ -790,7 +792,6 @@ function RenderField(field) {
790
792
  switch (field.type) {
791
793
  case "text":
792
794
  case "email":
793
- case "tel":
794
795
  return /*#__PURE__*/React.createElement("input", {
795
796
  value: field.value,
796
797
  name: field.name,
@@ -801,6 +802,31 @@ function RenderField(field) {
801
802
  id: field.id,
802
803
  maxLength: field.maxLength
803
804
  });
805
+ case "tel":
806
+ return /*#__PURE__*/React.createElement(PhoneInput, {
807
+ value: field.value || '',
808
+ onChange: function (phone) {
809
+ if (field.onPhoneChange) {
810
+ field.onPhoneChange(phone);
811
+ } else if (field.onChange) {
812
+ // Create a synthetic event for backwards compatibility
813
+ var syntheticEvent = {
814
+ target: {
815
+ name: field.name,
816
+ value: phone
817
+ }
818
+ };
819
+ field.onChange(syntheticEvent);
820
+ }
821
+ },
822
+ defaultCountry: field.defaultCountry || 'gb',
823
+ disabled: field.isDisabled,
824
+ placeholder: field.placeholder,
825
+ inputProps: {
826
+ id: field.id,
827
+ name: field.name
828
+ }
829
+ });
804
830
  case "textarea":
805
831
  return /*#__PURE__*/React.createElement("textarea", {
806
832
  value: field.value,
@@ -1342,7 +1368,7 @@ var QrForm = function (props) {
1342
1368
  className: "progress-indicator-desktop current-page-".concat(currentPage, " ").concat(currentPage === 0 ? "first-page" : "")
1343
1369
  }, pages.map(function (_, index) {
1344
1370
  return /*#__PURE__*/React.createElement("li", {
1345
- className: currentPage >= index ? "checked" : "",
1371
+ className: "".concat(currentPage >= index ? "checked" : "", " ").concat(index === currentPage ? "current-page" : ""),
1346
1372
  key: index
1347
1373
  }, /*#__PURE__*/React.createElement("div", {
1348
1374
  className: "bullet-point"