@thecb/components 9.3.4-beta.1 → 9.3.4-beta.2

package/package.json

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

@@ -79,7 +79,7 @@ const InnerRadioSection = ({
       ref={sectionRefs.current[sectionIndex]}
       onBlur={() => !section.disabled && setFocused(null)}
       onFocus={() => !section.disabled && setFocused(section.id)}
-      onKeyDown={onKeyDown} // DIFFERENT
+      onKeyDown={onKeyDown}
       hoverStyles={themeValues.focusStyles}
       animate={openSection === section.id ? "open" : "closed"}
       initial={initiallyOpen ? "open" : "closed"}
@@ -89,8 +89,8 @@ const InnerRadioSection = ({
       aria-checked={openSection === section.id}
       aria-disabled={section.disabled}
       aria-required={section.required}
-      aria-labelledby={ariaLabelledBy} // THIS PROP NOT PASSED ON GROUPED MODEL - check if you can add it without consequence
-      aria-describedby={ariaDescribedBy} // THIS PROP NOT PASSED ON GROUPED MODEL - check if you can add it without consequence
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
     >
       <Stack childGap="0">
         <Box

package/src/components/molecules/radio-section/InnerRadioSection.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/RadioSection.js

@@ -154,7 +154,7 @@ const RadioSection = ({
                     groupedSections.indexOf(sectionGroup) !==
                       groupedSections.length - 1 && (
                       <SolidDivider
-                        borderSize="1px"
+                        borderSize="2px" // Resulting line is 2px thick due to border from other element
                         color={themeValues.borderColor}
                       />
                     )}

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/constants/index.js

@@ -1,5 +1,4 @@
 import * as colors from "./colors";
 import * as fontWeights from "./style_constants";
-import * as keyboard from "./keyboard";
 
-export { colors, fontWeights, keyboard };
+export { colors, fontWeights };