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

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.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { RadioButtonInputGroup } from './RadioButtonInputGroup';
 import { RadioButton } from './RadioButton';
@@ -21,8 +21,14 @@ export const Standard: Story = {
         label: 'Hva er din favorittlukt?',
     },
     render: function Render(args) {
+        type Value = 'grass' | 'asphalt' | 'pollen';
+        const [selectedValue, setSelectedValue] = useState<Value>('asphalt');
         return (
-            <RadioButtonInputGroup {...args}>
+            <RadioButtonInputGroup
+                {...args}
+                selectedValue={selectedValue}
+                onChange={e => setSelectedValue(e.target.value as Value)}
+            >
                 {inputProps => (
                     <>
                         <RadioButton {...inputProps} value="grass">
@@ -44,8 +50,14 @@ export const Standard: Story = {
 export const FieldMessage: Story = {
     args: { ...Standard.args, fieldMessage: 'Feil lukt', name: 'feil-lukt' },
     render: function Render(args) {
+        type Value = 'grass' | 'asphalt' | 'pollen';
+        const [selectedValue, setSelectedValue] = useState<Value>('pollen');
         return (
-            <RadioButtonInputGroup {...args}>
+            <RadioButtonInputGroup
+                {...args}
+                selectedValue={selectedValue}
+                onChange={e => setSelectedValue(e.target.value as Value)}
+            >
                 {inputProps => (
                     <>
                         <RadioButton {...inputProps} value="grass">
@@ -67,14 +79,20 @@ export const FieldMessage: Story = {
 export const WithRadioSwitch: Story = {
     args: { ...Standard.args, name: 'radio-switch' },
     render: function Render(args) {
+        type Value = 'yes' | 'no';
+        const [selectedValue, setSelectedValue] = useState<Value>('yes');
         return (
-            <RadioButtonInputGroup {...args}>
+            <RadioButtonInputGroup
+                {...args}
+                selectedValue={selectedValue}
+                onChange={e => setSelectedValue(e.target.value as Value)}
+            >
                 {inputProps => (
                     <RadioSwitch
                         leftLabel="Ja"
-                        leftValue={true}
+                        leftValue="yes"
                         rightLabel="Nei"
-                        rightValue={false}
+                        rightValue="no"
                         {...inputProps}
                     />
                 )}
@@ -84,23 +102,22 @@ export const WithRadioSwitch: Story = {
 };
 
 export const WithRadioBlock: Story = {
-    args: { ...Standard.args, selectedValue: 'yes', name: 'radio-block' },
+    args: { ...Standard.args, name: 'radio-block' },
     render: function Render(args) {
+        type Value = 'yes' | 'no';
+        const [selectedValue, setSelectedValue] = useState<Value>('yes');
+
         return (
-            <RadioButtonInputGroup {...args}>
+            <RadioButtonInputGroup
+                {...args}
+                selectedValue={selectedValue}
+                onChange={e => setSelectedValue(e.target.value as Value)}
+            >
                 {inputProps => (
                     <>
+                        <RadioBlock {...inputProps} label="Ja" value="yes" />
                         <RadioBlock
                             {...inputProps}
-                            label="Ja"
-                            value="yes"
-                            // @ts-ignore
-                            selectedValue={args.selectedValue}
-                        />
-                        <RadioBlock
-                            {...inputProps}
-                            // @ts-ignore
-                            selectedValue={args.selectedValue}
                             label="Nei"
                             showChildren={true}
                             value="no"

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;