@thecb/components 9.3.1-beta.7 → 9.3.1-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.3.1-beta.7",
+  "version": "9.3.1-beta.8",
   "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

@@ -8,6 +8,7 @@ import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
 import { createIdFromString, noop } from "../../../util/general";
 import Text from "../../atoms/text";
 import { CHARADE_GREY } from "../../../constants/colors";
+import SolidDivider from "../../atoms/solid-divider/SolidDivider";
 /*
   Takes an array of section objects, each object should look like:
     {
@@ -50,9 +51,7 @@ const RadioSection = ({
   ariaDescribedBy,
   isSectionRequired = false
 }) => {
-  console.log("sections", sections);
   const areSectionsGrouped = typeof sections?.[0]?.[0] !== "undefined";
-  console.log("areSectionsGrouped", areSectionsGrouped);
   const handleKeyDown = (id, e) => {
     if (e?.keyCode === 13 || e?.keyCode === 32) {
       toggleOpenSection(id);
@@ -383,6 +382,13 @@ const RadioSection = ({
                       )}
                     </AnimatePresence>
                   </Stack>
+                  {sectionGroup.indexOf(section) ===
+                    sectionGroup.length - 1 && (
+                    <SolidDivider
+                      borderSize="2px"
+                      borderColor={themeValues.borderColor}
+                    />
+                  )}
                 </Motion>
               ))
           )}

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

@@ -2,6 +2,7 @@ import React, { Fragment, useState } from "react";
 import { text, boolean } from "@storybook/addon-knobs";
 import SolidDivider from "../../atoms/solid-divider/SolidDivider";
 import RadioSection from "./RadioSection";
+import { Box } from "../../atoms/layouts";
 import page from "../../../../.storybook/page";
 
 const story = page({
@@ -75,6 +76,7 @@ const groupedSections = [
 
 export const radioSection = () => {
   const [openSection, setOpenSection] = useState("");
+  const [openSectionGrouped, setOpenSectionGrouped] = useState(null);
   return (
     <Fragment>
       <RadioSection
@@ -86,12 +88,12 @@ export const radioSection = () => {
         sections={sections}
         isSectionRequired={true}
       />
-      <SolidDivider />
+      <Box />
       <RadioSection
         isMobile={boolean("isMobile", false, "props")}
         supportsTouch={boolean("isMobile", false, "props")}
-        toggleOpenSection={setOpenSection}
-        openSection={openSection}
+        toggleOpenSection={setOpenSectionGrouped}
+        openSection={openSectionGrouped}
         staggeredAnimation={boolean("staggeredAnimation", false, "props")}
         sections={groupedSections}
         isSectionRequired={true}