@thecb/components 8.4.11-beta.27 → 8.4.11-beta.29

package/dist/index.cjs.js

@@ -24235,7 +24235,8 @@ var FormSelect = function FormSelect(_ref) {
     "aria-disabled": disabled,
     autocompleteValue: autocompleteValue,
     smoothScroll: smoothScroll,
-    required: options.required
+    required: options.required,
+    "data-qa": "".concat(createIdFromString(labelTextWhenNoError), "-dropdown")
   }), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -24246,7 +24247,8 @@ var FormSelect = function FormSelect(_ref) {
     extraStyles: "\n            word-break: break-word;\n            font-family: Public Sans;\n            &::first-letter {\n              text-transform: uppercase;\n            }\n          ",
     id: createIdFromString(labelTextWhenNoError, "error message"),
     "aria-live": "polite",
-    "data-qa": labelTextWhenNoError
+    "aria-atomic": true,
+    "data-qa": createIdFromString(labelTextWhenNoError, "error message")
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? errorMessages[field.errors[0]] : "")));
 };
 
@@ -26020,8 +26022,7 @@ var FormInput = function FormInput(_ref15) {
     field: field,
     formatter: formatter,
     showErrors: showErrors,
-    dataQa: labelTextWhenNoError,
-    "data-qa": labelTextWhenNoError,
+    "data-qa": "".concat(createIdFromString(labelTextWhenNoError), "-input"),
     themeValues: themeValues,
     $customHeight: customHeight,
     $extraStyles: extraStyles,
@@ -26039,8 +26040,7 @@ var FormInput = function FormInput(_ref15) {
     inputMode: isNum ? "numeric" : isEmail ? "email" : "text",
     field: field,
     showErrors: showErrors,
-    dataQa: labelTextWhenNoError,
-    "data-qa": labelTextWhenNoError,
+    "data-qa": "".concat(createIdFromString(labelTextWhenNoError), "-input"),
     themeValues: themeValues,
     background: background,
     $customHeight: customHeight,
@@ -26051,7 +26051,7 @@ var FormInput = function FormInput(_ref15) {
     justify: "space-between",
     "aria-live": "polite",
     "aria-atomic": true,
-    "data-qa": "Errors container"
+    "data-qa": createIdFromString("FormInput errors")
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -40401,8 +40401,7 @@ var AddressForm = function AddressForm(_ref) {
     },
     autocomplete: "address-line1",
     "aria-label": "Address Line 1",
-    "data-qa": "Address Line 1",
-    dataQa: "Address Line 1"
+    "data-qa": createIdFromString("Address Line 1")
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -40413,7 +40412,7 @@ var AddressForm = function AddressForm(_ref) {
     },
     autocomplete: "address-line2",
     "aria-label": "Address Line 2",
-    "data-qa": "Address Line 2"
+    "data-qa": createIdFromString("Address Line 2")
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     required: true,
@@ -40440,8 +40439,7 @@ var AddressForm = function AddressForm(_ref) {
     "aria-label": isUS ? "State" : "State or Province",
     required: true,
     autocomplete: "administrative-area",
-    "data-qa": "State or Province",
-    dataQa: "State or Province"
+    "data-qa": createIdFromString("State or Province")
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -40456,15 +40454,13 @@ var AddressForm = function AddressForm(_ref) {
     "aria-label": "Zip code",
     autocomplete: "postal-code",
     required: true,
-    "data-qa": "Zip code",
-    dataQa: "Zip code"
+    "data-qa": createIdFromString("Zip code")
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
     checked: walletCheckboxMarked,
     onChange: saveToWallet,
-    "data-qa": "Save address to wallet",
-    dataQa: "Save address to wallet"
+    "data-qa": createIdFromString("Save address to wallet")
   })));
 };
 
@@ -41389,12 +41385,13 @@ var EmailForm = function EmailForm(_ref) {
     },
     isEmail: true,
     autoComplete: "email",
-    "data-qa": "Email address"
+    "data-qa": createIdFromString("Email address")
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
+    onChange: saveToWallet,
+    "data-qa": createIdFromString("Save email address to wallet")
   })));
 };
 
@@ -48898,7 +48895,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     "aria-label": "ACH Payment"
   }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on checking account",
-    "data-qa": "Name on checking account",
+    "data-qa": createIdFromString("Name on checking account"),
     errorMessages: nameErrors,
     field: fields.name,
     fieldActions: actions.fields.name,
@@ -48906,11 +48903,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "name",
-    dataQa: "Name on checking account"
+    autocomplete: "name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
-    "data-qa": "Routing number",
+    "data-qa": createIdFromString("Routing number"),
     errorMessages: routingNumberErrors,
     field: fields.routingNumber,
     fieldActions: actions.fields.routingNumber,
@@ -48928,8 +48924,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     },
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    },
-    dataQa: "Routing number"
+    }
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm routing number",
     "data-qa": "Confirm routing number",
@@ -48940,12 +48935,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true,
-    dataQa: "Confirm routing number"
+    isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
-    "data-qa": "Account number",
-    dataQa: "Account number",
+    "data-qa": createIdFromString("Account number"),
     errorMessages: accountNumberErrors,
     field: fields.accountNumber,
     fieldActions: actions.fields.accountNumber,
@@ -48966,7 +48959,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm account number",
-    "data-qa": "Confirm account number",
+    "data-qa": createIdFromString("Confirm account number"),
     errorMessages: confirmAccountNumberErrors,
     field: fields.confirmAccountNumber,
     fieldActions: actions.fields.confirmAccountNumber,
@@ -48974,12 +48967,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true,
-    dataQa: "Confirm account number"
+    isNum: true
   }), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
-    "data-qa": "Account type",
-    dataQa: "Account type",
+    "data-qa": createIdFromString("Account type"),
     options: [{
       text: "Select account type",
       value: ""
@@ -49000,14 +48991,13 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     name: "default-payment-ach",
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
-    hidden: hideDefaultPayment,
-    dataQa: "default-payment-ach"
+    hidden: hideDefaultPayment
   }), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
     childGap: "4px",
     align: "center"
   }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "bank checkbox",
-    "data-qa": "Save checking account to wallet",
+    "data-qa": createIdFromString("Save checking account to wallet"),
     title: "Save checking account to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
@@ -49018,8 +49008,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     showCheckbox: false,
     description: "View",
     terms: termsContent,
-    dataQa: "Terms and Conditions",
-    "data-qa": "Terms and Conditions"
+    "data-qa": createIdFromString("Terms and Conditions")
   })))));
 };
 
@@ -49123,11 +49112,10 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       }
     },
     showErrors: showErrors,
-    "data-qa": "Country",
-    dataQa: "Country"
+    "data-qa": "Country"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on card",
-    "data-qa": "Name on card",
+    "data-qa": createIdFromString("Name on card"),
     errorMessages: nameOnCardErrors,
     field: fields.nameOnCard,
     fieldActions: actions.fields.nameOnCard,
@@ -49135,11 +49123,10 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "cc-name",
-    dataQa: "Name on card"
+    autocomplete: "cc-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
-    "data-qa": "Credit card number",
+    "data-qa": createIdFromString("Credit card number"),
     errorMessages: creditCardNumberErrors,
     field: fields.creditCardNumber,
     fieldActions: actions.fields.creditCardNumber,
@@ -49149,14 +49136,13 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isNum: true,
-    autocomplete: "cc-number",
-    dataQa: "Credit card number"
+    autocomplete: "cc-number"
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
     childGap: isMobile ? "0rem" : "1rem"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Expiration date (MM/YY)",
-    "data-qa": "Expiration date",
+    "data-qa": createIdFromString("Expiration date"),
     errorMessages: expirationDateErrors,
     field: fields.expirationDate,
     fieldActions: actions.fields.expirationDate,
@@ -49168,11 +49154,10 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: true,
     removeFromValue: /\// // removes "/" from browser autofill
     ,
-    autocomplete: "cc-exp",
-    dataQa: "Expiration date"
+    autocomplete: "cc-exp"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
-    "data-qa": "CVV",
+    "data-qa": createIdFromString("CVV"),
     errorMessages: cvvErrors,
     field: fields.cvv,
     fieldActions: actions.fields.cvv,
@@ -49182,8 +49167,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "cc-csc",
-    dataQa: "CVV"
+    autocomplete: "cc-csc"
   })), !hideZipCode && /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -49191,7 +49175,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
     labelTextWhenNoError: "Zip code",
-    "data-qa": "Zip code",
+    "data-qa": createIdFromString("Zip code"),
     errorMessages: zipCodeErrors,
     field: fields.zipCode,
     fieldActions: actions.fields.zipCode,
@@ -49199,14 +49183,13 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autoComplete: "billing postal-code",
-    dataQa: "Zip code"
+    autoComplete: "billing postal-code"
   })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
     childGap: "4px",
     align: "center"
   }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "credit card checkbox",
-    "data-qa": "Save credit card to wallet",
+    "data-qa": createIdFromString("Save credit card to wallet"),
     title: "Save credit card to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
@@ -49420,12 +49403,13 @@ var PhoneForm = function PhoneForm(_ref) {
     },
     autocomplete: "tel",
     isPhone: true,
-    "data-qa": "Phone number"
+    "data-qa": createIdFromString("Phone number")
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
+    onChange: saveToWallet,
+    "data-qa": createIdFromString("Save phone number to wallet")
   })));
 };