@thecb/components 9.2.4-beta.2 → 9.2.4-beta.4

package/package.json

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

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

@@ -47,7 +47,8 @@ const RadioSection = ({
   initiallyOpen = true,
   openHeight = "auto",
   containerStyles = "",
-  ariaDescribedBy
+  ariaDescribedBy,
+  isRequired = false
 }) => {
   const handleKeyDown = (id, e) => {
     if (e?.keyCode === 13 || e?.keyCode === 32) {
@@ -105,7 +106,7 @@ const RadioSection = ({
       borderRadius="4px"
       extraStyles={containerStyles}
     >
-      <Stack childGap="0" role="radiogroup">
+      <Stack childGap="0" role="radiogroup" required={isRequired}>
         {sections
           .filter(section => !section.hidden)
           .map(section => (
@@ -122,8 +123,10 @@ const RadioSection = ({
               key={`item-${section.id}`}
               extraStyles={borderStyles}
               role="radio"
+              aria-label={section.title}
               aria-checked={openSection === section.id}
               aria-disabled={section.disabled}
+              required={section?.required || isRequired}
             >
               <Stack childGap="0">
                 <Box
@@ -177,7 +180,7 @@ const RadioSection = ({
                                 : () => toggleOpenSection(section.id)
                             }
                             tabIndex="-1"
-                            required={section?.required}
+                            required={section?.required || isRequired}
                           />
                         </Box>
                       )}

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

@@ -52,7 +52,12 @@ const sections = [
     rightIcons: cardIcons,
     required: true
   },
-  { id: "bar", title: "Bar", content: <div>Content 1</div>, required: true },
+  {
+    id: "new-bank-account-section",
+    title: "New Bank Account",
+    content: <div>Content 1</div>,
+    required: true
+  },
   { id: "baz", title: "Baz", content: <div>Content 2</div> }
 ];
 
@@ -66,6 +71,7 @@ export const radioSection = () => {
       openSection={openSection}
       staggeredAnimation={boolean("staggeredAnimation", false, "props")}
       sections={sections}
+      isRequired={true}
     />
   );
 };