@thecb/components 8.4.8 → 8.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.8",
+  "version": "8.4.9",
   "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,30 +57,45 @@ const RadioButtonWithLabel = ({
   ariaInvalid,
   themeValues,
   index,
-  handleChange = noop // optional, for custom event handling in ingesting app
-}) => (
-  <InputAndLabelContainer
-    align="center"
-    childGap="0.5rem"
-    activeColor={themeValues.activeColor}
-  >
-    <HiddenRadioInput
-      aria-invalid={ariaInvalid}
-      style={{ marginTop: 0 }}
-      type="radio"
-      name={groupName}
-      id={id}
-      value={value}
-      onChange={e => {
-        setValue(e.target.value);
-        handleChange(e);
-      }}
-      defaultChecked={index === 0}
-    />
-    <Text
-      as="label"
-      htmlFor={id}
-      extraStyles={`
+  handleChange = noop, // optional, for custom event handling in ingesting app
+  field,
+  config
+}) => {
+  const getDefaultChecked = (value, idx) => {
+    const selectionExistsInConfig = config
+      .map(c => c.value)
+      .includes(field.rawValue);
+
+    if (selectionExistsInConfig) {
+      // if exists, selection comes from the redux-freeform state
+      return field.rawValue === value;
+    }
+    // fallback to first option as default selection
+    return idx === 0;
+  };
+  return (
+    <InputAndLabelContainer
+      align="center"
+      childGap="0.5rem"
+      activeColor={themeValues.activeColor}
+    >
+      <HiddenRadioInput
+        aria-invalid={ariaInvalid}
+        style={{ marginTop: 0 }}
+        type="radio"
+        name={groupName}
+        id={id}
+        value={value}
+        onChange={e => {
+          setValue(e.target.value);
+          handleChange(e);
+        }}
+        defaultChecked={getDefaultChecked(value, index)}
+      />
+      <Text
+        as="label"
+        htmlFor={id}
+        extraStyles={`
           font-size: 1rem;
           display: flex; 
           width: 100%;
@@ -88,15 +103,16 @@ const RadioButtonWithLabel = ({
             cursor: pointer;
           }
         `}
-    >
-      <Circle
-        activeColor={themeValues.activeColor}
-        inactiveBorderColor={themeValues.inactiveBorderColor}
-      />
-      {labelText}
-    </Text>
-  </InputAndLabelContainer>
-);
+      >
+        <Circle
+          activeColor={themeValues.activeColor}
+          inactiveBorderColor={themeValues.inactiveBorderColor}
+        />
+        {labelText}
+      </Text>
+    </InputAndLabelContainer>
+  );
+};
 
 export default themeComponent(
   RadioButtonWithLabel,

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

@@ -48,6 +48,8 @@ const RadioGroup = ({
             groupName={groupName}
             setValue={setValue}
             handleChange={handleChange}
+            field={field}
+            config={config}
             aria-invalid={field.dirty && field.hasErrors}
           />
         ))}

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

@@ -27,7 +27,7 @@ export const radioGroup = () => (
     config={config}
     groupName="radio-button-group"
     field={{
-      rawValue: "Hello World",
+      rawValue: "bar",
       dirty: false
     }}
     fieldActions={{

package/src/types/common/Field.ts

@@ -1,5 +1,5 @@
 export default interface Field {
-  hasErrors?: boolean;
-  dirty?: boolean;
-  rawValue?: string;
+  hasErrors: boolean;
+  dirty: boolean;
+  rawValue: string;
 }