@thecb/components 8.4.10-beta.2 → 8.4.10-beta.4

package/package.json

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

package/src/components/atoms/form-select/FormSelect.js

@@ -84,7 +84,7 @@ const FormSelect = ({
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
       />
-      <Stack direction="row" justify="space-between">
+      <Stack direction="row" justify="space-between" aria-live="polite">
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
           <Text
             color={ERROR_COLOR}

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

@@ -57,45 +57,30 @@ const RadioButtonWithLabel = ({
   ariaInvalid,
   themeValues,
   index,
-  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={`
+  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={`
           font-size: 1rem;
           display: flex; 
           width: 100%;
@@ -103,16 +88,15 @@ 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,8 +48,6 @@ 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: "bar",
+      rawValue: "Hello World",
       dirty: false
     }}
     fieldActions={{