diff --git a/packages/ffe-form-react/src/BaseRadioButton.spec.tsx b/packages/ffe-form-react/src/BaseRadioButton.spec.tsx index d3bc919a18..93372bda55 100644 --- a/packages/ffe-form-react/src/BaseRadioButton.spec.tsx +++ b/packages/ffe-form-react/src/BaseRadioButton.spec.tsx @@ -51,18 +51,6 @@ describe('', () => { 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(); diff --git a/packages/ffe-form-react/src/BaseRadioButton.tsx b/packages/ffe-form-react/src/BaseRadioButton.tsx index dac3eeda1f..d7298bdfa2 100644 --- a/packages/ffe-form-react/src/BaseRadioButton.tsx +++ b/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, '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; diff --git a/packages/ffe-form-react/src/RadioBlock.tsx b/packages/ffe-form-react/src/RadioBlock.tsx index 3194fdb246..6dbe4fbdac 100644 --- a/packages/ffe-form-react/src/RadioBlock.tsx +++ b/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; diff --git a/packages/ffe-form-react/src/RadioButtonInputGroup.tsx b/packages/ffe-form-react/src/RadioButtonInputGroup.tsx index deefebc57a..0045ed88e2 100644 --- a/packages/ffe-form-react/src/RadioButtonInputGroup.tsx +++ b/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; - 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; /** The currently selected value */ - selectedValue?: string | boolean | number | null; + selectedValue?: SelectedRadioValue; /** * String or Tooltip component with further detail about the radio button * set diff --git a/packages/ffe-form-react/src/RadioSwitch.spec.tsx b/packages/ffe-form-react/src/RadioSwitch.spec.tsx index 3487a503e1..653e7a8c48 100644 --- a/packages/ffe-form-react/src/RadioSwitch.spec.tsx +++ b/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('', () => { it('sets aria-invalid correctly', () => { renderRadioSwitch({ 'aria-invalid': 'true', - selectedValue: true, + selectedValue: 'ja', }); const [radioLeft, radioRight] = screen.getAllByRole('radio'); diff --git a/packages/ffe-form-react/src/RadioSwitch.tsx b/packages/ffe-form-react/src/RadioSwitch.tsx index 7aac8d2e18..abd59f93e0 100644 --- a/packages/ffe-form-react/src/RadioSwitch.tsx +++ b/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, '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; /** 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; /** The selected value of the radio button set */ - selectedValue?: Value | null; + selectedValue?: SelectedRadioValue; /** Condensed modifier. Use in condensed designs */ condensed?: boolean; } diff --git a/packages/ffe-form-react/src/types.ts b/packages/ffe-form-react/src/types.ts index 0a56ad84d1..cb8ccc86d5 100644 --- a/packages/ffe-form-react/src/types.ts +++ b/packages/ffe-form-react/src/types.ts @@ -24,3 +24,5 @@ export type ComponentWithRefAsPropParams = { >; export type Optional = Pick, K> & Omit; + +export type SelectedRadioValue = string | null | undefined;