@thecb/components 9.5.0-beta.3 → 9.5.0-beta.4

package/package.json

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

package/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -22,7 +22,8 @@ const PartialAmountForm = ({
   clearOnDismount,
   fields,
   actions,
-  showErrors = false
+  showErrors = false,
+  dataQa
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
@@ -54,7 +55,12 @@ const PartialAmountForm = ({
 
   const lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
   return (
-    <FormContainer variant={variant} role="form" aria-label="Other amount">
+    <FormContainer
+      variant={variant}
+      role="form"
+      aria-label="Other amount"
+      data-qa={dataQa}
+    >
       <Text variant="p">
         Pay a different amount. The total balance will still be due on the same
         due date.

package/src/components/molecules/radio-section/InnerRadioSection.js

@@ -101,7 +101,12 @@ const InnerRadioSection = ({
           ? () => toggleOpenSection(section.id)
           : noop
       }
-      dataQa={section.dataQa ? section.dataQa : section.id}
+      id={`inner-radio-section-${sectionIndex}`}
+      data-qa={
+        section.dataQa
+          ? section.dataQa
+          : section.id || `inner-radio-section-${sectionIndex}`
+      }
     >
       <Stack childGap="0">
         <Box

package/src/components/molecules/radio-section/RadioSection.js

@@ -128,17 +128,13 @@ const RadioSection = ({
               </Fragment>
             ))}
         {!!groupedSections &&
-          groupedSections.map(sectionGroup =>
+          groupedSections.map((sectionGroup, sectionGroupindex) =>
             sectionGroup
               .filter(unfilteredSection => !unfilteredSection.hidden)
-              .map((section, i) => (
-                <Fragment
-                  key={`radio-section-${groupedSections.indexOf(
-                    sectionGroup
-                  )}-${sectionGroup.indexOf(section)}}`}
-                >
+              .map((section, sectionIndex) => (
+                <Fragment key={`key-${sectionGroupindex}-${sectionIndex}}`}>
                   <InnerRadioSection
-                    sectionIndex={i}
+                    sectionIndex={`radio-section-inner-${sectionGroupindex}-${sectionIndex}}`}
                     section={section}
                     sectionRefs={sectionRefs}
                     focused={focused}