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

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 (11) hide show
  1. package/dist/index.css +35 -6
  2. package/dist/index.esm.css +35 -6
  3. package/dist/index.esm.js +29 -3
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +29 -3
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.scss +35 -6
  8. package/dist/stories/experiences/QRFormJourney/FormFieldType.d.ts +11 -2
  9. package/dist/stories/experiences/QRFormJourney/Qr-form/Qr-form.d.ts +1 -0
  10. package/dist/tsconfig.tsbuildinfo +1 -1
  11. package/package.json +4 -2
package/dist/index.css CHANGED
@@ -195,6 +195,9 @@
195
195
  min-height: 75px;
196
196
  background: linear-gradient(45deg, rgb(212, 214, 215), rgb(172, 174, 176));
197
197
  }
198
+ .card-module__cmp-card--type-card-product-no-image__wrapper___ot5Xe {
199
+ grid-template-columns: repeat(1, 1fr);
200
+ }
198
201
  .card-module__cmp-card--type-card-product__image___Bkb0A {
199
202
  grid-column: span 1;
200
203
  text-align: center;
@@ -253,7 +256,7 @@
253
256
  padding: 12px 14px 8px;
254
257
  color: #fff;
255
258
  text-transform: uppercase;
256
- font-weight: bold;
259
+ font-weight: 400;
257
260
  position: absolute;
258
261
  bottom: 0;
259
262
  right: 0;
@@ -444,6 +447,7 @@
444
447
  padding: 0 3rem 0 1rem;
445
448
  transition: all 0.3s ease-in-out;
446
449
  border: 2px solid transparent;
450
+ cursor: pointer;
447
451
  }
448
452
  .Button-module__cmp-button--style-primary___hfLAd {
449
453
  background: linear-gradient(45deg, rgb(196, 38, 46), rgb(135, 10, 32));
@@ -1641,6 +1645,28 @@
1641
1645
  font-size: 12px;
1642
1646
  line-height: 18px;
1643
1647
  }
1648
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container {
1649
+ width: 100%;
1650
+ }
1651
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button {
1652
+ height: calc(2.3em + 20px);
1653
+ border: 1px solid;
1654
+ border-right: none;
1655
+ padding: 0 10px;
1656
+ background: white;
1657
+ }
1658
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input {
1659
+ width: 100%;
1660
+ height: calc(2.3em + 20px);
1661
+ line-height: 1em;
1662
+ padding: 10px 18px;
1663
+ border: 1px solid;
1664
+ font-size: 18px;
1665
+ }
1666
+ .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 {
1667
+ border: 2px solid #678B3B;
1668
+ outline: none;
1669
+ }
1644
1670
  .qr-journey-form-wrapper .disabled-product-fields-section {
1645
1671
  background-color: rgb(243, 243, 243);
1646
1672
  padding: 1rem;
@@ -1690,21 +1716,24 @@
1690
1716
  padding: 0;
1691
1717
  }
1692
1718
  .qr-journey-form-wrapper .qr-form-navigation {
1693
- display: flex;
1694
- justify-content: space-between;
1719
+ display: grid;
1720
+ grid-template-columns: repeat(2, 1fr);
1721
+ gap: 1rem;
1695
1722
  }
1696
- .qr-journey-form-wrapper .qr-form-navigation button, .qr-journey-form-wrapper .qr-form-navigation input[type=submit] {
1723
+ .qr-journey-form-wrapper .qr-form-navigation input[type=submit] {
1697
1724
  border: 0;
1698
- width: calc(50% - 5px);
1699
1725
  padding: 18px;
1700
1726
  text-transform: uppercase;
1701
1727
  color: #FFFFFF;
1702
1728
  background: linear-gradient(45deg, rgb(196, 38, 46), rgb(135, 10, 32));
1703
1729
  cursor: pointer;
1704
1730
  }
1705
- .qr-journey-form-wrapper .qr-form-navigation button:first-child, .qr-journey-form-wrapper .qr-form-navigation input[type=submit]:first-child {
1731
+ .qr-journey-form-wrapper .qr-form-navigation input[type=submit]:first-child {
1706
1732
  background: #2d363a;
1707
1733
  }
1734
+ .qr-journey-form-wrapper .qr-form-navigation button {
1735
+ grid-column: span 1;
1736
+ }
1708
1737
  .qr-journey-form-wrapper .qr-form-thank-you-page {
1709
1738
  position: relative;
1710
1739
  }
package/dist/index.esm.css CHANGED
@@ -195,6 +195,9 @@
195
195
  min-height: 75px;
196
196
  background: linear-gradient(45deg, rgb(212, 214, 215), rgb(172, 174, 176));
197
197
  }
198
+ .card-module__cmp-card--type-card-product-no-image__wrapper___ot5Xe {
199
+ grid-template-columns: repeat(1, 1fr);
200
+ }
198
201
  .card-module__cmp-card--type-card-product__image___Bkb0A {
199
202
  grid-column: span 1;
200
203
  text-align: center;
@@ -253,7 +256,7 @@
253
256
  padding: 12px 14px 8px;
254
257
  color: #fff;
255
258
  text-transform: uppercase;
256
- font-weight: bold;
259
+ font-weight: 400;
257
260
  position: absolute;
258
261
  bottom: 0;
259
262
  right: 0;
@@ -444,6 +447,7 @@
444
447
  padding: 0 3rem 0 1rem;
445
448
  transition: all 0.3s ease-in-out;
446
449
  border: 2px solid transparent;
450
+ cursor: pointer;
447
451
  }
448
452
  .Button-module__cmp-button--style-primary___hfLAd {
449
453
  background: linear-gradient(45deg, rgb(196, 38, 46), rgb(135, 10, 32));
@@ -1641,6 +1645,28 @@
1641
1645
  font-size: 12px;
1642
1646
  line-height: 18px;
1643
1647
  }
1648
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container {
1649
+ width: 100%;
1650
+ }
1651
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button {
1652
+ height: calc(2.3em + 20px);
1653
+ border: 1px solid;
1654
+ border-right: none;
1655
+ padding: 0 10px;
1656
+ background: white;
1657
+ }
1658
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input {
1659
+ width: 100%;
1660
+ height: calc(2.3em + 20px);
1661
+ line-height: 1em;
1662
+ padding: 10px 18px;
1663
+ border: 1px solid;
1664
+ font-size: 18px;
1665
+ }
1666
+ .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 {
1667
+ border: 2px solid #678B3B;
1668
+ outline: none;
1669
+ }
1644
1670
  .qr-journey-form-wrapper .disabled-product-fields-section {
1645
1671
  background-color: rgb(243, 243, 243);
1646
1672
  padding: 1rem;
@@ -1690,21 +1716,24 @@
1690
1716
  padding: 0;
1691
1717
  }
1692
1718
  .qr-journey-form-wrapper .qr-form-navigation {
1693
- display: flex;
1694
- justify-content: space-between;
1719
+ display: grid;
1720
+ grid-template-columns: repeat(2, 1fr);
1721
+ gap: 1rem;
1695
1722
  }
1696
- .qr-journey-form-wrapper .qr-form-navigation button, .qr-journey-form-wrapper .qr-form-navigation input[type=submit] {
1723
+ .qr-journey-form-wrapper .qr-form-navigation input[type=submit] {
1697
1724
  border: 0;
1698
- width: calc(50% - 5px);
1699
1725
  padding: 18px;
1700
1726
  text-transform: uppercase;
1701
1727
  color: #FFFFFF;
1702
1728
  background: linear-gradient(45deg, rgb(196, 38, 46), rgb(135, 10, 32));
1703
1729
  cursor: pointer;
1704
1730
  }
1705
- .qr-journey-form-wrapper .qr-form-navigation button:first-child, .qr-journey-form-wrapper .qr-form-navigation input[type=submit]:first-child {
1731
+ .qr-journey-form-wrapper .qr-form-navigation input[type=submit]:first-child {
1706
1732
  background: #2d363a;
1707
1733
  }
1734
+ .qr-journey-form-wrapper .qr-form-navigation button {
1735
+ grid-column: span 1;
1736
+ }
1708
1737
  .qr-journey-form-wrapper .qr-form-thank-you-page {
1709
1738
  position: relative;
1710
1739
  }
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.
@@ -162,7 +164,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
162
164
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
163
165
  };
164
166
 
165
- var styles$2 = {"cmp-card":"card-module__cmp-card___45x9k","cmp-card__link":"card-module__cmp-card__link___OdszC","cmp-card__content-wrapper":"card-module__cmp-card__content-wrapper___gh335","cmp-card__content-category-wrapper":"card-module__cmp-card__content-category-wrapper___2vOjQ","cmp-card__content-category-wrapper__colour-edwards-red":"card-module__cmp-card__content-category-wrapper__colour-edwards-red___DYmt8","cmp-card__city-country":"card-module__cmp-card__city-country___dI13-","cmp-card__image-wrapper":"card-module__cmp-card__image-wrapper___IhPHw","placeholderImage":"card-module__placeholderImage___AXOh5","cmp-card--type-card-overlay":"card-module__cmp-card--type-card-overlay___344ul","cmp-card__title-wrapper":"card-module__cmp-card__title-wrapper___XHfZg","cmp-card__date":"card-module__cmp-card__date___7w-Ka","cmp-card__title":"card-module__cmp-card__title___cFKG8","cmp-card__footer":"card-module__cmp-card__footer___xcNXM","cmp-card--type-card-no-image":"card-module__cmp-card--type-card-no-image___G75ye","cmp-card--type-card-product":"card-module__cmp-card--type-card-product___IfqTr","cmp-card--type-card-product__wrapper":"card-module__cmp-card--type-card-product__wrapper___kulaR","cmp-card--type-card-product__image":"card-module__cmp-card--type-card-product__image___Bkb0A","cmp-card--type-card-product__meta":"card-module__cmp-card--type-card-product__meta___a7Tzc","cmp-card--type-card-product__title":"card-module__cmp-card--type-card-product__title___0JMQp","cmp-card--type-card-product__cta":"card-module__cmp-card--type-card-product__cta___qDSNo","cmp-card--type-card-product__prices":"card-module__cmp-card--type-card-product__prices___KWPS7","cmp-card--type-card-product__prices--login":"card-module__cmp-card--type-card-product__prices--login___gMhTo","show_prices":"card-module__show_prices___gjVhn","cmp-card--type-card-panel":"card-module__cmp-card--type-card-panel___95jYv","cmp-card__footer--color-malachite":"card-module__cmp-card__footer--color-malachite___jEnvy","cmp-card__footer--color-amethyst":"card-module__cmp-card__footer--color-amethyst___N55PL","cmp-card__footer--color-smokey-quartz-bright":"card-module__cmp-card__footer--color-smokey-quartz-bright___1mqyn","cmp-card__footer--color-olivine-bright":"card-module__cmp-card__footer--color-olivine-bright___O2urI","cmp-card--type-careers":"card-module__cmp-card--type-careers___Wqzcf","cmp-card--type-product_details":"card-module__cmp-card--type-product_details___vsNOc","cmp-card--type-product_details__product-info":"card-module__cmp-card--type-product_details__product-info___5L009","cmp-card--type-product_details__header":"card-module__cmp-card--type-product_details__header___Vb3-U","cmp-card--type-product_details__header__title":"card-module__cmp-card--type-product_details__header__title___4KSqX","cmp-card--type-product_details__header__product-code":"card-module__cmp-card--type-product_details__header__product-code___zf7yq","cmp-card--type-product_details__header__product-image":"card-module__cmp-card--type-product_details__header__product-image___Kyy35","cmp-card--type-product_details__spares-list":"card-module__cmp-card--type-product_details__spares-list___VQ31R","folding-spares-list":"card-module__folding-spares-list___ls5-n","folding-specification-list":"card-module__folding-specification-list___tIfSl","folding-specification-holder":"card-module__folding-specification-holder___OtcQQ","folding-spares-holder":"card-module__folding-spares-holder___OhMpO"};
167
+ var styles$2 = {"cmp-card":"card-module__cmp-card___45x9k","cmp-card__link":"card-module__cmp-card__link___OdszC","cmp-card__content-wrapper":"card-module__cmp-card__content-wrapper___gh335","cmp-card__content-category-wrapper":"card-module__cmp-card__content-category-wrapper___2vOjQ","cmp-card__content-category-wrapper__colour-edwards-red":"card-module__cmp-card__content-category-wrapper__colour-edwards-red___DYmt8","cmp-card__city-country":"card-module__cmp-card__city-country___dI13-","cmp-card__image-wrapper":"card-module__cmp-card__image-wrapper___IhPHw","placeholderImage":"card-module__placeholderImage___AXOh5","cmp-card--type-card-overlay":"card-module__cmp-card--type-card-overlay___344ul","cmp-card__title-wrapper":"card-module__cmp-card__title-wrapper___XHfZg","cmp-card__date":"card-module__cmp-card__date___7w-Ka","cmp-card__title":"card-module__cmp-card__title___cFKG8","cmp-card__footer":"card-module__cmp-card__footer___xcNXM","cmp-card--type-card-no-image":"card-module__cmp-card--type-card-no-image___G75ye","cmp-card--type-card-product":"card-module__cmp-card--type-card-product___IfqTr","cmp-card--type-card-product__wrapper":"card-module__cmp-card--type-card-product__wrapper___kulaR","cmp-card--type-card-product-no-image__wrapper":"card-module__cmp-card--type-card-product-no-image__wrapper___ot5Xe","cmp-card--type-card-product__image":"card-module__cmp-card--type-card-product__image___Bkb0A","cmp-card--type-card-product__meta":"card-module__cmp-card--type-card-product__meta___a7Tzc","cmp-card--type-card-product__title":"card-module__cmp-card--type-card-product__title___0JMQp","cmp-card--type-card-product__cta":"card-module__cmp-card--type-card-product__cta___qDSNo","cmp-card--type-card-product__prices":"card-module__cmp-card--type-card-product__prices___KWPS7","cmp-card--type-card-product__prices--login":"card-module__cmp-card--type-card-product__prices--login___gMhTo","show_prices":"card-module__show_prices___gjVhn","cmp-card--type-card-panel":"card-module__cmp-card--type-card-panel___95jYv","cmp-card__footer--color-malachite":"card-module__cmp-card__footer--color-malachite___jEnvy","cmp-card__footer--color-amethyst":"card-module__cmp-card__footer--color-amethyst___N55PL","cmp-card__footer--color-smokey-quartz-bright":"card-module__cmp-card__footer--color-smokey-quartz-bright___1mqyn","cmp-card__footer--color-olivine-bright":"card-module__cmp-card__footer--color-olivine-bright___O2urI","cmp-card--type-careers":"card-module__cmp-card--type-careers___Wqzcf","cmp-card--type-product_details":"card-module__cmp-card--type-product_details___vsNOc","cmp-card--type-product_details__product-info":"card-module__cmp-card--type-product_details__product-info___5L009","cmp-card--type-product_details__header":"card-module__cmp-card--type-product_details__header___Vb3-U","cmp-card--type-product_details__header__title":"card-module__cmp-card--type-product_details__header__title___4KSqX","cmp-card--type-product_details__header__product-code":"card-module__cmp-card--type-product_details__header__product-code___zf7yq","cmp-card--type-product_details__header__product-image":"card-module__cmp-card--type-product_details__header__product-image___Kyy35","cmp-card--type-product_details__spares-list":"card-module__cmp-card--type-product_details__spares-list___VQ31R","folding-spares-list":"card-module__folding-spares-list___ls5-n","folding-specification-list":"card-module__folding-specification-list___tIfSl","folding-specification-holder":"card-module__folding-specification-holder___OtcQQ","folding-spares-holder":"card-module__folding-spares-holder___OhMpO"};
166
168
 
167
169
  function getDefaultExportFromCjs (x) {
168
170
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -434,7 +436,7 @@ var ProductCard = function (_a) {
434
436
  onClick: onClick,
435
437
  target: "_blank"
436
438
  }, /*#__PURE__*/React.createElement("div", {
437
- className: getStyle$1("cmp-card--type-card-product__wrapper")
439
+ className: classnames(getStyle$1("cmp-card--type-card-product__wrapper"), showImage ? "" : getStyle$1("cmp-card--type-card-product-no-image__wrapper"))
438
440
  }, showImage && /*#__PURE__*/React.createElement("div", {
439
441
  className: getStyle$1("cmp-card--type-card-product__image")
440
442
  }, /*#__PURE__*/React.createElement("figure", null, /*#__PURE__*/React.createElement("img", {
@@ -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,