@thecb/components 9.3.1-beta.4 → 9.3.1-beta.6

package/package.json

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

package/src/components/atoms/solid-divider/SolidDivider.js

@@ -3,7 +3,12 @@ import { fallbackValues } from "./SolidDivider.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { Box } from "../layouts";
 
-const SolidDivider = ({ borderColor, borderSize, themeValues }) => (
+const SolidDivider = ({
+  borderColor,
+  borderSize,
+  themeValues,
+  extraStyles = ""
+}) => (
   <Box
     padding="0"
     minWidth="100%"
@@ -11,6 +16,7 @@ const SolidDivider = ({ borderColor, borderSize, themeValues }) => (
     borderColor={borderColor || themeValues.borderColor}
     borderSize={borderSize || themeValues.borderSize}
     borderWidthOverride={`0px 0px ${borderSize || themeValues.borderSize} 0px`}
+    extraStyles={extraStyles}
   />
 );
 

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

@@ -50,7 +50,6 @@ const RadioSection = ({
   containerStyles = "",
   ariaDescribedBy,
   isSectionRequired = false,
-  legendText = "",
   sectionGroups = null
 }) => {
   const handleKeyDown = (id, e) => {
@@ -102,11 +101,16 @@ const RadioSection = ({
 
   const [focused, setFocused] = useState(null);
   const PrependedItem = ({ themeValues }) => (
-    <SolidDivider borderSize="2px" color={themeValues.borderColor} />
+    <SolidDivider
+      borderSize="2px"
+      borderRadius="0 0 0 0"
+      color={themeValues.borderColor}
+      extraStyles="margin-left: -1px; margin-right: -1px; width: cacl(100% + 2px);"
+    />
   );
   return (
     <Box
-      padding="0"
+      padding="1px"
       border={`1px solid ${themeValues.borderColor}`}
       borderRadius="4px"
       extraStyles={containerStyles}
@@ -123,8 +127,7 @@ const RadioSection = ({
               <Fragment
                 key={`sectiongroup-${sectionGroups.indexOf(sectionGroup)}`}
               >
-                {sectionGroups.indexOf(sectionGroup) ===
-                sectionGroups.length - 1 ? (
+                {sectionGroups.indexOf(sectionGroup) !== 0 ? (
                   <PrependedItem themeValues={themeValues} />
                 ) : (
                   ""
@@ -152,6 +155,7 @@ const RadioSection = ({
                       initial={initiallyOpen ? "open" : "closed"}
                       key={`item-${section.id}`}
                       extraStyles={borderStyles}
+                      dataQa={section.dataQa}
                       role="radio"
                       aria-checked={openSection === section.id}
                       aria-disabled={section.disabled}
@@ -190,7 +194,6 @@ const RadioSection = ({
                           extraStyles={
                             !section.disabled ? "cursor: pointer;" : ""
                           }
-                          dataQa={section.dataQa ? section.dataQa : section.id}
                         >
                           <Cluster
                             justify="space-between"
@@ -281,7 +284,7 @@ const RadioSection = ({
           })}
         {sections &&
           sections
-            .filter(section => !section.hidden)
+            .filter(unfilteredSection => !unfilteredSection.hidden)
             .map(section => (
               <Motion
                 tabIndex={
@@ -297,6 +300,7 @@ const RadioSection = ({
                 initial={initiallyOpen ? "open" : "closed"}
                 key={`item-${section.id}`}
                 extraStyles={borderStyles}
+                dataQa={section.dataQa ? section.dataQa : section.id}
                 role="radio"
                 aria-checked={openSection === section.id}
                 aria-disabled={section.disabled}
@@ -331,12 +335,6 @@ const RadioSection = ({
                         : ``
                     }
                     extraStyles={!section.disabled ? "cursor: pointer;" : ""}
-                    dataQa={section.dataQa ? section.dataQa : section.id}
-                    role="radio"
-                    aria-checked={openSection === section.id}
-                    aria-disabled={section.disabled}
-                    aria-required={section?.required}
-                    tabIndex="0"
                   >
                     <Cluster
                       justify="space-between"

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

@@ -52,6 +52,20 @@ const sectionGroups = [
       rightIconsLabel: cardIconsLabel,
       rightIcons: cardIcons,
       required: true
+    },
+    {
+      id: "new-bank-account-section",
+      title: "New Bank Account",
+      content: <p>The form to add a bank account would go here.</p>,
+      required: true
+    }
+  ],
+  [
+    {
+      id: "single",
+      title: "A Single Item Section Group",
+      content: <div>Content for a single item section group.</div>,
+      required: true
     }
   ],
   [