@thecb/components 10.6.4 → 10.6.5-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.6.4",
+  "version": "10.6.5-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/wallet-name/WalletName.js

@@ -16,7 +16,8 @@ const WalletName = ({
   actionText = null, // right side hyperlinked text
   disableAction = false,
   linkButtonExtraStyles = "", // hyperlinked text extraStyles
-  isLoading = false // shows a spinner on the left when true
+  isLoading = false, // shows a spinner on the left when true
+  dataQa = null
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -57,6 +58,7 @@ const WalletName = ({
                 <ButtonWithAction
                   disabled={disableAction}
                   text={actionText}
+                  dataQa={dataQa}
                   action={action}
                   variant="smallGhost"
                   extraStyles={`

package/src/components/atoms/wallet-name/index.d.ts

@@ -9,6 +9,7 @@ export interface WalletNameProps {
   text?: string | null;
   isLoading: boolean;
   buttonExtraStyles?: string;
+  dataQa?: string | null;
 }
 
 export const WalletName: React.FC<Expand<WalletNameProps> &

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -25,7 +25,9 @@ const PaymentButtonBar = ({
   hideBackButton = false,
   buttonGroupStyles,
   hideAdditionalButton = false,
-  additionalButton
+  additionalButton,
+  nextButtonTestId = null,
+  backButtonTestId = null
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -36,7 +38,7 @@ const PaymentButtonBar = ({
         url={cancelURL}
         variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
-        dataQa={cancelText}
+        dataQa={backButtonTestId || cancelText}
         aria-labelledby={`${kebabCaseString(cancelText)}-button`}
         role="link"
       />
@@ -60,7 +62,7 @@ const PaymentButtonBar = ({
       text={redirectText}
       variant={forwardButtonVariant}
       extraStyles={isMobile && "flex-grow: 1"}
-      dataQa={redirectText}
+      dataQa={nextButtonTestId || redirectText}
       disabled={isForwardButtonDisabled}
       aria-labelledby={`${kebabCaseString(redirectText)}-button`}
       role={forwardButtonAriaRole}
@@ -73,7 +75,7 @@ const PaymentButtonBar = ({
         action={forwardButtonAction}
         isLoading={forwardButtonLoading}
         extraStyles={isMobile && "flex-grow: 1"}
-        dataQa={forwardButtonText}
+        dataQa={nextButtonTestId || forwardButtonText}
         disabled={isForwardButtonDisabled}
         aria-labelledby={`${kebabCaseString(forwardButtonText)}-button`}
         role={forwardButtonAriaRole}