@thecb/components 11.1.16 → 11.2.0-beta.1

package/package.json

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

package/src/components/molecules/obligation/modules/InactiveTitleModule.js

@@ -28,7 +28,7 @@ const InactiveTitleModule = ({ title, subtitle, autoPayEnabled }) => (
         Unable to load account details
       </Detail>
       <Detail variant="extraSmall" as="p" color={BLACK}>
-        {`This may mean that the account has been paid off or there was an error loading it. If you have questions about this account, please contact us.${
+        {`This may mean the balance has been paid and was removed from the system, or that there was an error loading it. .${
           autoPayEnabled
             ? " You may disable autopay for this account by pressing the 'Turn off Autopay' button."
             : ""

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

@@ -57,7 +57,7 @@ const RadioSection = ({
   containerStyles = "",
   ariaDescribedBy,
   isSectionRequired = false,
-  groupedSections,
+  groupedSections = [],
   borderOverride,
   ...rest
 }) => {
@@ -67,32 +67,60 @@ const RadioSection = ({
     [...Array(sections.length)].map(() => createRef())
   );
 
-  const handleKeyDown = (id, e, i) => {
-    if (e.currentTarget !== e.target) {
+  // Flatten the groupedSections while keeping track of indices
+  const flattenedGroupedSections = groupedSections.flatMap(
+    (group, groupIndex) =>
+      group.map((section, sectionIndex) => ({
+        ...section,
+        groupIndex,
+        sectionIndex
+      }))
+  );
+  const groupedSectionsRefs = useRef(
+    [...Array(flattenedGroupedSections.length)].map(() => createRef())
+  );
+
+  const getFlatGroupIndex = (groupIndex, sectionIndex) =>
+    flattenedGroupedSections.findIndex(
+      item =>
+        item.groupIndex === groupIndex && item.sectionIndex === sectionIndex
+    );
+
+  const handleKeyDown = (e, sectionID, sectionIndex, isGroup) => {
+    const { currentTarget, target, keyCode } = e;
+    if (currentTarget !== target) {
       return;
     }
+    const refs = isGroup ? groupedSectionsRefs : sectionRefs;
+    const currSection = isGroup ? flattenedGroupedSections : sections;
 
     // Allow Enter and Space to select a section
-    if (e.keyCode === ENTER || e.keyCode === SPACEBAR) {
+    if (keyCode === ENTER || keyCode === SPACEBAR) {
       e.preventDefault();
-      toggleOpenSection(id);
+      toggleOpenSection(sectionID);
     }
 
     // Allow Up and Down arrow navigation between sections
     if (
-      e.keyCode == ARROW_UP ||
-      e.keyCode == ARROW_DOWN ||
-      e.keyCode == ARROW_LEFT ||
-      e.keyCode == ARROW_RIGHT
+      keyCode == ARROW_UP ||
+      keyCode == ARROW_DOWN ||
+      keyCode == ARROW_LEFT ||
+      keyCode == ARROW_RIGHT
     ) {
       e.preventDefault();
       const indexIncrement =
-        e.keyCode == ARROW_RIGHT || e.keyCode == ARROW_DOWN ? 1 : -1;
-      const nextIndex = wrapIndex(i + indexIncrement, sections.length);
-
-      sectionRefs?.current[nextIndex]?.current?.focus();
-      setFocused(sections[nextIndex]?.id);
-      toggleOpenSection(sections[nextIndex]?.id);
+        keyCode == ARROW_RIGHT || keyCode == ARROW_DOWN ? 1 : -1;
+      const nextIndex = wrapIndex(
+        sectionIndex + indexIncrement,
+        currSection.length
+      );
+      const nextRef = refs?.current[nextIndex]?.current;
+      if (nextRef) {
+        nextRef.focus();
+        const nextRadioID = currSection[nextIndex]?.id;
+        setFocused(nextRadioID);
+        toggleOpenSection(nextRadioID);
+      }
     }
   };
 
@@ -123,7 +151,7 @@ const RadioSection = ({
                   openSection={openSection}
                   toggleOpenSection={toggleOpenSection}
                   onKeyDown={e =>
-                    !section.disabled && handleKeyDown(section.id, e, i)
+                    !section.disabled && handleKeyDown(e, section.id, i)
                   }
                   ariaLabelledBy={section.id}
                   ariaDescribedBy={`right-icons-${idString(section)}`}
@@ -135,33 +163,48 @@ const RadioSection = ({
           groupedSections.map((sectionGroup, sectionGroupIndex) =>
             sectionGroup
               .filter(unfilteredSection => !unfilteredSection.hidden)
-              .map((section, sectionIndex) => (
-                <Fragment key={`key-${sectionGroupIndex}-${sectionIndex}`}>
-                  <InnerRadioSection
-                    themeValues={themeValues}
-                    sectionIndex={`${sectionGroupIndex}-${sectionIndex}`}
-                    section={section}
-                    sectionRefs={sectionRefs}
-                    focused={focused}
-                    setFocused={setFocused}
-                    openHeight={openHeight}
-                    ariaLabelledBy={section.id}
-                    ariaDescribedBy={`right-icons-${idString(section)}`}
-                    openSection={openSection}
-                    toggleOpenSection={toggleOpenSection}
-                    isLastGroupedItemInSection={
-                      sectionIndex === sectionGroup.length - 1
-                    }
-                  />
-                  {sectionIndex === sectionGroup.length - 1 &&
-                    sectionGroupIndex !== groupedSections.length - 1 && (
-                      <SolidDivider
-                        borderSize="1px"
-                        borderColor={MANATEE_GREY}
-                      />
-                    )}
-                </Fragment>
-              ))
+              .map((section, sectionIndex) => {
+                const flatGroupSectionIndex = getFlatGroupIndex(
+                  sectionGroupIndex,
+                  sectionIndex
+                );
+                return (
+                  <Fragment key={`key-${sectionGroupIndex}-${sectionIndex}`}>
+                    <InnerRadioSection
+                      themeValues={themeValues}
+                      sectionIndex={flatGroupSectionIndex}
+                      section={section}
+                      sectionRefs={groupedSectionsRefs}
+                      focused={focused}
+                      setFocused={setFocused}
+                      openHeight={openHeight}
+                      ariaLabelledBy={section.id}
+                      ariaDescribedBy={`right-icons-${idString(section)}`}
+                      openSection={openSection}
+                      toggleOpenSection={toggleOpenSection}
+                      onKeyDown={e =>
+                        !section.disabled &&
+                        handleKeyDown(
+                          e,
+                          section.id,
+                          flatGroupSectionIndex,
+                          true
+                        )
+                      }
+                      isLastGroupedItemInSection={
+                        sectionIndex === sectionGroup.length - 1
+                      }
+                    />
+                    {sectionIndex === sectionGroup.length - 1 &&
+                      sectionGroupIndex !== groupedSections.length - 1 && (
+                        <SolidDivider
+                          borderSize="1px"
+                          borderColor={MANATEE_GREY}
+                        />
+                      )}
+                  </Fragment>
+                );
+              })
           )}
       </Stack>
     </Box>

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -25,21 +25,25 @@ const RadioButton = ({
   const buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
-      outline: `3px solid ${themeValues.activeColor}`,
+      outlineWidth: "3px",
+      outlineColor: themeValues.activeColor,
       outlineOffset: "2px"
     },
     offFocused: {
       borderColor: themeValues.activeColor,
-      outline: `3px solid ${themeValues.activeColor}`,
+      outlineWidth: "3px",
+      outlineColor: themeValues.activeColor,
       outlineOffset: "2px"
     },
     on: {
       borderColor: themeValues.activeColor,
-      outline: "0"
+      outlineWidth: "0px",
+      outlineColor: "rgba(0, 0, 0, 0)"
     },
     off: {
       borderColor: themeValues.inactiveColor,
-      outline: "0"
+      outlineWidth: "0px",
+      outlineColor: "rgba(0, 0, 0, 0)"
     }
   };
 
@@ -106,7 +110,7 @@ const RadioButton = ({
         width="24px"
         variants={buttonBorder}
         display="flex"
-        extraStyles={`justify-content: center; align-items: center;`}
+        extraStyles={`outline: 0px solid rgba(0, 0, 0, 0); justify-content: center; align-items: center;`}
       >
         <Motion variants={buttonCenter} borderRadius="8px" />
       </Motion>