@thecb/components 11.1.7 → 11.1.8-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.1.7",
+  "version": "11.1.8-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

@@ -19,7 +19,7 @@ const Circle = styled.div`
   margin-right: 8px;
   width: 1.5rem;
   height 1.5rem;
-  border: ${({ inactiveBorderColor }) => `1px solid ${inactiveBorderColor}`};
+  border: ${({ borderColor }) => `1px solid ${borderColor}`};
   border-radius: 50%;
   box-sizing: border-box;
   padding: 2px;
@@ -41,10 +41,10 @@ const InputAndLabelContainer = styled(Cluster)`
     transition: transform 0.15s;
   }
   ${HiddenRadioInput}:checked + label ${Circle} {
-    border: ${({ activeColor }) => `1px solid ${activeColor};`}
+    border: ${({ borderColor }) => `1px solid ${borderColor};`}
   }
   ${HiddenRadioInput}:focus + label ${Circle} { {
-    box-shadow: ${({ activeColor }) => `0px 0px 2px 1px ${activeColor};`}
+    box-shadow: ${({ borderColor }) => `0px 0px 2px 1px ${borderColor};`}
   }
 `;
 
@@ -59,7 +59,9 @@ const RadioButtonWithLabel = ({
   index,
   handleChange = noop, // optional, for custom event handling in ingesting app
   field,
-  config
+  config,
+  disabled = false,
+  title = ""
 }) => {
   const getDefaultChecked = (value, idx) => {
     const selectionExistsInConfig = config
@@ -77,9 +79,13 @@ const RadioButtonWithLabel = ({
     <InputAndLabelContainer
       align="center"
       childGap="0.5rem"
-      activeColor={themeValues.activeColor}
+      borderColor={
+        disabled ? themeValues.inactiveBorderColor : themeValues.activeColor
+      }
+      title={title}
     >
       <HiddenRadioInput
+        disabled={disabled}
         aria-invalid={ariaInvalid}
         style={{ marginTop: 0 }}
         type="radio"
@@ -105,8 +111,10 @@ const RadioButtonWithLabel = ({
         `}
       >
         <Circle
-          activeColor={themeValues.activeColor}
-          inactiveBorderColor={themeValues.inactiveBorderColor}
+          activeColor={
+            disabled ? themeValues.disabledColor : themeValues.activeColor
+          }
+          borderColor={themeValues.inactiveBorderColor}
         />
         {labelText}
       </Text>

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

@@ -1,8 +1,14 @@
-import { GREY_CHATEAU, MATISSE_BLUE } from "../../../constants/colors";
+import {
+  GREY_CHATEAU,
+  MATISSE_BLUE,
+  MANATEE_GREY
+} from "../../../constants/colors";
 const activeColor = MATISSE_BLUE;
+const disabledColor = MANATEE_GREY; // or GREY_CHATEAU?
 const inactiveBorderColor = GREY_CHATEAU;
 
 export const fallbackValues = {
-  inactiveBorderColor,
-  activeColor
+  activeColor,
+  disabledColor,
+  inactiveBorderColor
 };