@thecb/components 7.2.1 → 7.3.1

package/package.json

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

@@ -3,6 +3,7 @@ import { Cluster } from "../../atoms/layouts";
 import Text from "../text";
 import styled from "styled-components";
 import { colors } from "../../../constants";
+import { noop } from "../../../util/general";
 
 const HiddenRadioInput = styled.input`
   // can still select the element with the keyboard, but it's invisible and doesn't interfere with the spacing of other elements around it
@@ -53,7 +54,8 @@ const RadioButtonWithLabel = ({
   groupName,
   setValue,
   ariaInvalid,
-  index
+  index,
+  handleChange = noop // optional, for custom event handling in ingesting app
 }) => (
   <InputAndLabelContainer align="center" childGap="0.5rem">
     <HiddenRadioInput
@@ -63,7 +65,10 @@ const RadioButtonWithLabel = ({
       name={groupName}
       id={id}
       value={value}
-      onChange={e => setValue(e.target.value)}
+      onChange={e => {
+        setValue(e.target.value);
+        handleChange(e);
+      }}
       defaultChecked={index === 0}
     />
     <Text

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

@@ -3,6 +3,7 @@ import RadioButtonWithLabel from "../../atoms/radio-button-with-label/RadioButto
 import { Stack } from "../../atoms";
 import { colors } from "../../../constants";
 import styled from "styled-components";
+import { noop } from "../../../util/general";
 
 const DefaultHeading = styled.div`
   font-size: 0.875rem;
@@ -25,6 +26,7 @@ const RadioGroup = ({
   ),
   config,
   extraStyles,
+  handleChange = noop, // optional, for custom event handling in ingesting app
   // redux-freeform props - this is similar to how FormInput works, duplicated because the radio input is hidden for styling overrides
   field,
   fieldActions
@@ -45,6 +47,7 @@ const RadioGroup = ({
             {...c}
             groupName={groupName}
             setValue={setValue}
+            handleChange={handleChange}
             aria-invalid={
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)

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

@@ -1,39 +0,0 @@
-import React, { useState } from "react";
-import RadioButtonWithLabel from "./RadioButtonWithLabel";
-import { Box } from "../layouts";
-import page from "../../../../.storybook/page";
-
-export const radioButtonWithLabel = () => {
-  const [selected, setSelected] = useState("");
-  const handleRadioClick = e => {
-    setSelected(e.currentTarget.value);
-  };
-
-  return (
-    <Box>
-      <RadioButtonWithLabel
-        id="some-id"
-        value="some-value"
-        labelText="A radio button with a label."
-        handleRadioClick={handleRadioClick}
-        selected={selected}
-      />
-      <RadioButtonWithLabel
-        id="another-id"
-        value="another-value"
-        labelText="Another radio button with a label."
-        handleRadioClick={handleRadioClick}
-        selected={selected}
-      />
-    </Box>
-  );
-};
-
-radioButtonWithLabel.storyName = "RadioButtonWithLabel";
-
-const story = page({
-  title: "Components|Atoms/RadioButtonWithLabel",
-  Component: RadioButtonWithLabel
-});
-
-export default story;