@thecb/components 9.5.0-beta.5 → 9.5.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.5.0-beta.5",
+  "version": "9.5.0-beta.7",
   "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;
@@ -194,7 +196,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 +207,4 @@ const InnerRadioSection = ({
   );
 };
 
-export default themeComponent(
-  InnerRadioSection,
-  "InnerRadioSection",
-  fallbackValues
-);
+export default InnerRadioSection;

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

@@ -13,6 +13,7 @@ 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' 
@@ -109,8 +110,9 @@ const RadioSection = ({
           sections
             .filter(section => !section.hidden)
             .map((section, i) => (
-              <Fragment key={`radio-section-${sections.indexOf(section)}`}>
+              <Fragment key={`radio-section-${i}`}>
                 <InnerRadioSection
+                  themeValues={themeValues}
                   sectionIndex={i}
                   section={section}
                   sectionRefs={sectionRefs}
@@ -124,6 +126,7 @@ const RadioSection = ({
                   }
                   ariaLabelledBy={section.id}
                   ariaDescribedBy={`right-icons-${idString(section)}`}
+                  isLastGroupedItemInSection={false}
                 />
               </Fragment>
             ))}
@@ -134,6 +137,7 @@ const RadioSection = ({
               .map((section, sectionIndex) => (
                 <Fragment key={`key-${sectionGroupIndex}-${sectionIndex}`}>
                   <InnerRadioSection
+                    themeValues={themeValues}
                     sectionIndex={`${sectionGroupIndex}-${sectionIndex}`}
                     section={section}
                     sectionRefs={sectionRefs}
@@ -144,13 +148,16 @@ 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={themeValues.borderColor}
+                        borderSize="1px"
+                        borderColor={MANATEE_GREY}
                       />
                     )}
                 </Fragment>

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

@@ -60,6 +60,13 @@ const groupedSections = [
       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
     }
   ],
   [
@@ -110,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
@@ -125,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
-};