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

package/package.json

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

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

@@ -1,13 +1,12 @@
 import React, { Fragment } from "react";
 import styled from "styled-components";
-import { themeComponent } from "../../../util/themeUtils";
-import { fallbackValues } from "./InnerRadioSection.theme";
 import { AnimatePresence } from "framer-motion";
 import RadioButton from "./radio-button/RadioButton";
 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 { MANATEE_GREY } from "../../../constants/colors";
 
 const idString = section =>
   typeof section.title === "string"
@@ -30,6 +29,7 @@ const InnerRadioSection = ({
   setFocused,
   sectionRefs,
   ariaLabelledBy,
+  isLastGroupedItemInSection,
   onKeyDown = noop
 }) => {
   const wrapper = {
@@ -56,7 +56,9 @@ const InnerRadioSection = ({
 
   const borderStyles = `
     border-width: 0 0 1px 0;
-    border-color: ${themeValues.borderColor};
+    border-color: ${
+      isLastGroupedItemInSection ? MANATEE_GREY : themeValues.borderColor
+    };
     border-style: solid;
     border-radius: 0px;
     transform-origin: 100% 0;
@@ -120,7 +122,9 @@ const InnerRadioSection = ({
           borderSize="0px"
           borderColor={themeValues.borderColor}
           borderWidthOverride={
-            openSection === section.id && !!section.content
+            openSection === section.id &&
+            !!section.content &&
+            section.id !== openSection
               ? `0px 0px 1px 0px`
               : ``
           }
@@ -194,7 +198,7 @@ const InnerRadioSection = ({
               animate="open"
               exit="closed"
               variants={wrapper}
-              extraStyles={`transform-origin: 100% 0;`}
+              extraStyles={`transform-origin: 100% 0; border-top: 1px solid ${themeValues.borderColor}`}
             >
               {section.content}
             </Motion>
@@ -205,8 +209,4 @@ const InnerRadioSection = ({
   );
 };
 
-export default themeComponent(
-  InnerRadioSection,
-  "InnerRadioSection",
-  fallbackValues
-);
+export default InnerRadioSection;

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

@@ -4,7 +4,6 @@ import { fallbackValues } from "./RadioSection.theme";
 import SolidDivider from "../../atoms/solid-divider/SolidDivider";
 import { Box, Stack } from "../../atoms/layouts";
 import { createIdFromString, wrapIndex } from "../../../util/general";
-import { MANATEE_GREY } from "../../../constants/colors";
 import {
   ARROW_DOWN,
   ARROW_LEFT,
@@ -14,6 +13,8 @@ import {
   SPACEBAR
 } from "../../../constants/keyboard";
 import InnerRadioSection from "./InnerRadioSection";
+import { MANATEE_GREY } from "../../../constants/colors";
+
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
   prop) of section objects or a multidimensional array (via the 'groupedSections' prop) of section objects. Note that if using a multidimensional array, the nesting cannot exceed 2 levels deep.
@@ -111,6 +112,7 @@ const RadioSection = ({
             .map((section, i) => (
               <Fragment key={`radio-section-${sections.indexOf(section)}`}>
                 <InnerRadioSection
+                  themeValues={themeValues}
                   sectionIndex={i}
                   section={section}
                   sectionRefs={sectionRefs}
@@ -124,17 +126,19 @@ const RadioSection = ({
                   }
                   ariaLabelledBy={section.id}
                   ariaDescribedBy={`right-icons-${idString(section)}`}
+                  isLastGroupedItemInSection={false}
                 />
               </Fragment>
             ))}
         {!!groupedSections &&
-          groupedSections.map((sectionGroup, sectionGroupindex) =>
+          groupedSections.map((sectionGroup, sectionGroupIndex) =>
             sectionGroup
               .filter(unfilteredSection => !unfilteredSection.hidden)
               .map((section, sectionIndex) => (
-                <Fragment key={`key-${sectionGroupindex}-${sectionIndex}}`}>
+                <Fragment key={`key-${sectionGroupIndex}-${sectionIndex}`}>
                   <InnerRadioSection
-                    sectionIndex={`radio-section-inner-${sectionGroupindex}-${sectionIndex}}`}
+                    themeValues={themeValues}
+                    sectionIndex={`${sectionGroupIndex}-${sectionIndex}`}
                     section={section}
                     sectionRefs={sectionRefs}
                     focused={focused}
@@ -144,11 +148,17 @@ const RadioSection = ({
                     ariaDescribedBy={`right-icons-${idString(section)}`}
                     openSection={openSection}
                     toggleOpenSection={toggleOpenSection}
+                    isLastGroupedItemInSection={
+                      sectionGroup.indexOf(section) === sectionGroup.length - 1
+                    }
                   />
                   {sectionGroup.indexOf(section) === sectionGroup.length - 1 &&
                     groupedSections.indexOf(sectionGroup) !==
                       groupedSections.length - 1 && (
-                      <SolidDivider borderSize="2px" color={MANATEE_GREY} />
+                      <SolidDivider
+                        borderSize="1px"
+                        borderColor={MANATEE_GREY}
+                      />
                     )}
                 </Fragment>
               ))

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

@@ -52,13 +52,21 @@ const groupedSections = [
       content: <p>The form to add a credit card would go here.</p>,
       rightIconsLabel: cardIconsLabel,
       rightIcons: cardIcons,
-      required: true
+      required: true,
+      dataQa: "New Card"
     },
     {
       id: "new-bank-section",
       title: "Group 1: New Bank Account",
       content: <p>The form to add a credit card would go here.</p>,
       required: true
+    },
+
+    {
+      id: "bar4",
+      title: "Group 1: Another One",
+      content: <div>Content for another section</div>,
+      required: true
     }
   ],
   [
@@ -109,7 +117,7 @@ export const radioSection = () => {
     <>
       <Box padding="0 1rem" extraStyles="text-align: center;">
         <p>
-          Using <b>sections</b>, a flat array of section objects.
+          Using <b>sections</b>
         </p>
       </Box>
       <RadioSection
@@ -124,8 +132,7 @@ export const radioSection = () => {
       <Box />
       <Box padding="0 1rem" extraStyles="text-align: center;">
         <p>
-          Using <b>groupedSections</b>, a multidimensional array of sections,
-          instead of the <b>sections</b> prop.
+          Using <b>groupedSections</b>
         </p>
       </Box>
       <RadioSection

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

@@ -1,9 +1,9 @@
-import { WHITE, GREY_CHATEAU, ATHENS_GREY } from "../../../constants/colors";
+import { WHITE, GHOST_GREY, ATHENS_GREY } from "../../../constants/colors";
 
 const headingBackgroundColor = `${WHITE}`;
 const headingDisabledColor = `${ATHENS_GREY}`;
 const bodyBackgroundColor = "#eeeeee";
-const borderColor = `${GREY_CHATEAU}`;
+const borderColor = `${GHOST_GREY}`;
 const focusStyles = `outline: none;`;
 
 export const fallbackValues = {

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

@@ -1,15 +0,0 @@
-import { WHITE, GREY_CHATEAU, ATHENS_GREY } from "../../../constants/colors";
-
-const headingBackgroundColor = `${WHITE}`;
-const headingDisabledColor = `${ATHENS_GREY}`;
-const bodyBackgroundColor = "#eeeeee";
-const borderColor = `${GREY_CHATEAU}`;
-const focusStyles = `outline: none;`;
-
-export const fallbackValues = {
-  headingBackgroundColor,
-  headingDisabledColor,
-  bodyBackgroundColor,
-  borderColor,
-  focusStyles
-};