@thecb/components 8.4.8 → 8.4.10-beta.0

package/package.json

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

package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.js

@@ -57,6 +57,7 @@ const RadioButtonWithLabel = ({
   ariaInvalid,
   themeValues,
   index,
+  defaultChecked,
   handleChange = noop // optional, for custom event handling in ingesting app
 }) => (
   <InputAndLabelContainer
@@ -75,7 +76,7 @@ const RadioButtonWithLabel = ({
         setValue(e.target.value);
         handleChange(e);
       }}
-      defaultChecked={index === 0}
+      defaultChecked={defaultChecked || index === 0}
     />
     <Text
       as="label"

package/src/components/atoms/solid-divider/SolidDivider.js

@@ -3,14 +3,14 @@ import { fallbackValues } from "./SolidDivider.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { Box } from "../layouts";
 
-const SolidDivider = ({ borderColor, borderSize, themeValues }) => (
+const SolidDivider = ({ themeValues }) => (
   <Box
     padding="0"
     minWidth="100%"
     minHeight="1px"
-    borderColor={borderColor || themeValues.borderColor}
-    borderSize={borderSize || themeValues.borderSize}
-    borderWidthOverride={`0px 0px ${borderSize || themeValues.borderSize} 0px`}
+    borderColor={themeValues.borderColor}
+    borderSize={themeValues.borderSize}
+    borderWidthOverride={`0px 0px ${themeValues.borderSize} 0px`}
   />
 );
 

package/src/components/molecules/module/Module.js

@@ -16,18 +16,16 @@ import { Box, Cluster } from "../../atoms/layouts";
 */
 
 const Module = ({
-  variant = "default",
-  as,
-  disabled,
   heading,
-  rightTitleContent,
-  titleID = "",
   spacing = "1rem",
   padding = "0",
-  margin = "0",
   spacingBottom = "2.5rem",
-  fontSize,
   themeValues,
+  variant = "default",
+  fontSize,
+  as,
+  titleID = "",
+  rightTitleContent,
   children
 }) => {
   const themedFontSize =
@@ -40,7 +38,6 @@ const Module = ({
   const themedElemType =
     variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
   const computedElemType = as || themedElemType;
-  const disabledStyles = "opacity: 0.40;";
   const headingText = (
     <Title
       weight={themeValues.fontWeight}
@@ -56,12 +53,7 @@ const Module = ({
   );
 
   return (
-    <Box
-      aria-disabled={disabled}
-      extraStyles={disabled && disabledStyles}
-      padding="0"
-      role={"group"}
-    >
+    <Fragment>
       {heading && !rightTitleContent && headingText}
       {heading && rightTitleContent && (
         <Cluster justify="space-between" align="center" nowrap>
@@ -69,7 +61,7 @@ const Module = ({
           {rightTitleContent}
         </Cluster>
       )}
-      <Box padding={`0 0 ${spacingBottom}`} extraStyles={`margin: ${margin}`}>
+      <Box padding={`0 0 ${spacingBottom}`}>
         <Box
           padding={padding}
           background={themeValues.backgroundColor}
@@ -79,7 +71,7 @@ const Module = ({
           {children}
         </Box>
       </Box>
-    </Box>
+    </Fragment>
   );
 };
 

package/src/components/molecules/radio-group/RadioGroup.js

@@ -49,6 +49,7 @@ const RadioGroup = ({
             setValue={setValue}
             handleChange={handleChange}
             aria-invalid={field.dirty && field.hasErrors}
+            defaultChecked={field.rawValue}
           />
         ))}
       </Stack>

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

@@ -42,7 +42,6 @@ const RadioSection = ({
   staggeredAnimation = false,
   initiallyOpen = true,
   openHeight = "auto",
-  containerStyles = "",
   ariaDescribedBy
 }) => {
   const handleKeyDown = (id, e) => {
@@ -99,7 +98,6 @@ const RadioSection = ({
       padding="1px"
       border={`1px solid ${themeValues.borderColor}`}
       borderRadius="4px"
-      extraStyles={containerStyles}
     >
       <Stack childGap="0">
         {sections

package/src/constants/colors.js

@@ -36,7 +36,6 @@ const GRECIAN_GREY = "#E5E7EC"; // CBS-200
 const BLACK_SQUEEZE = "#EAF2F7";
 const GREY_CHATEAU = "#959CA8"; // CBS-500
 const COOL_GREY_05 = "#fbfcfd"; // CBS-050
-const MANATEE_GREY = "#878E9B"; // CB-60 (cool)
 // BLUE
 const CLOUDBURST_BLUE = "#26395c";
 const ZODIAC_BLUE = "#14284b";
@@ -172,7 +171,6 @@ export {
   CHARADE_GREY,
   GRECIAN_GREY,
   COOL_GREY_05,
-  MANATEE_GREY,
   BLACK_SQUEEZE,
   GREY_CHATEAU,
   CLOUDBURST_BLUE,