feat(ffe-form-react): standardize selectedValue in radio components

BREAKING CHANGE: limit selectedValue in radio komponents
to string, null, undefined.

packages/ffe-form-react/src/BaseRadioButton.spec.tsx

@@ -51,18 +51,6 @@ describe('<BaseRadioButton />', () => {
         expect(radio).not.toBeChecked();
     });
 
-    it('accepts boolean values and checks the input if it is selected', () => {
-        renderBaseRadioButton({ selectedValue: true, value: true });
-        const radio = screen.getByRole('radio');
-        expect(radio).toBeChecked();
-    });
-
-    it('accepts boolean values and does not check the input if it is not selected', () => {
-        renderBaseRadioButton({ selectedValue: 'false', value: true });
-        const radio = screen.getByRole('radio');
-        expect(radio).not.toBeChecked();
-    });
-
     describe('id', () => {
         it('is unique across instances', () => {
             renderBaseRadioButton();

packages/ffe-form-react/src/BaseRadioButton.tsx

@@ -1,15 +1,16 @@
 import React, { useId } from 'react';
 import classNames from 'classnames';
 import { Tooltip, TooltipProps } from './Tooltip';
+import { SelectedRadioValue } from './types';
 
 export interface BaseRadioButtonProps
     extends Omit<React.ComponentPropsWithoutRef<'input'>, 'value'> {
     /** Additional props passed to the label element */
     labelProps?: React.ComponentProps<'label'>;
     /** The selected value of the radio button set */
-    selectedValue?: boolean | string | number | null;
+    selectedValue?: SelectedRadioValue;
     /** The value of the radio button */
-    value: boolean | string | number;
+    value: string;
     /** Tooltip providing further detail about the choice */
     tooltip?: string;
     tooltipProps?: TooltipProps;

packages/ffe-form-react/src/RadioBlock.tsx

@@ -1,9 +1,10 @@
 import React, { useId } from 'react';
 import classNames from 'classnames';
+import { SelectedRadioValue } from './types';
 
 export interface RadioBlockProps
     extends React.ComponentPropsWithoutRef<'input'> {
-    /** Whether or not the radio block is selected */
+    /** Whether the radio block is selected */
     checked?: boolean;
     /** The always visible label of the radio block */
     label: React.ReactNode;
@@ -12,8 +13,8 @@ export interface RadioBlockProps
     /** The name of the radio button set */
     name: string;
     /** The selected value of the radio button set */
-    selectedValue?: string | null;
-    /** Whether or not children are always visible */
+    selectedValue?: SelectedRadioValue;
+    /** Whether children are always visible */
     showChildren?: boolean;
     /** The value of the radio block */
     value: string;

packages/ffe-form-react/src/RadioButtonInputGroup.tsx

@@ -2,6 +2,7 @@ import React, { useId } from 'react';
 import classNames from 'classnames';
 import { ErrorFieldMessage } from './message';
 import { Tooltip } from './Tooltip';
+import { SelectedRadioValue } from './types';
 
 export interface RadioButtonInputGroupProps
     extends Omit<
@@ -17,7 +18,7 @@ export interface RadioButtonInputGroupProps
         inline?: boolean;
         name: string;
         onChange: React.ChangeEventHandler<HTMLInputElement>;
-        selectedValue?: boolean | string | number | null;
+        selectedValue?: SelectedRadioValue;
         onColoredBg?: boolean;
     }) => React.ReactNode;
     /** Additional class names applied to the fieldset */
@@ -50,7 +51,7 @@ export interface RadioButtonInputGroupProps
     /** Change handler, receives value of selected radio button */
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     /** The currently selected value */
-    selectedValue?: string | boolean | number | null;
+    selectedValue?: SelectedRadioValue;
     /**
      * String or Tooltip component with further detail about the radio button
      * set

packages/ffe-form-react/src/RadioSwitch.spec.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 const defaultProps = {
     leftLabel: 'Ja',
-    leftValue: true,
+    leftValue: 'ja',
     name: 'choice',
     rightLabel: 'Nei',
     rightValue: 'nei',
@@ -17,7 +17,7 @@ describe('<RadioSwitch />', () => {
     it('sets aria-invalid correctly', () => {
         renderRadioSwitch({
             'aria-invalid': 'true',
-            selectedValue: true,
+            selectedValue: 'ja',
         });
 
         const [radioLeft, radioRight] = screen.getAllByRole('radio');

packages/ffe-form-react/src/RadioSwitch.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-
 import { BaseRadioButton } from './BaseRadioButton';
-
-type Value = boolean | string | number;
+import { SelectedRadioValue } from './types';
 
 export interface RadioSwitchProps
     extends Omit<React.ComponentPropsWithoutRef<'input'>, 'value'> {
@@ -12,17 +10,17 @@ export interface RadioSwitchProps
     /** The label of the choice to the left */
     leftLabel: string;
     /** The value of the choice to the left */
-    leftValue: Value /** Ref-setting function, or ref created by useRef, passed to the input element */;
+    leftValue: string /** Ref-setting function, or ref created by useRef, passed to the input element */;
     /** Ref to left radio */
     leftInnerRef?: React.Ref<HTMLInputElement>;
     /** The label of the choice to the right */
     rightLabel: string;
     /** The value of the choice to the right */
-    rightValue: Value;
+    rightValue: string;
     /** Ref to right radio */
     rightInnerRef?: React.Ref<HTMLInputElement>;
     /** The selected value of the radio button set */
-    selectedValue?: Value | null;
+    selectedValue?: SelectedRadioValue;
     /** Condensed modifier. Use in condensed designs */
     condensed?: boolean;
 }

packages/ffe-form-react/src/types.ts

@@ -24,3 +24,5 @@ export type ComponentWithRefAsPropParams<As extends ElementType> = {
 >;
 
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+export type SelectedRadioValue = string | null | undefined;