Skip to content

Commit 92b2de2

Browse files
tor-navtor-nav
authored
Bytt ut RhfRadioGroup med RhfRadioGroupNew (#6546)
* Bytt ut RhfRadioGroup med RhfRadioGroupNew
1 parent db5473c commit 92b2de2

File tree

46 files changed

+850
-935
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+850
-935
lines changed

‎packages/fakta/adopsjon/src/components/EktefelleFaktaForm.tsx

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useFormContext } from 'react-hook-form';
22
import { FormattedMessage, useIntl } from 'react-intl';
33

4-
import { BodyShort, VStack } from '@navikt/ds-react';
5-
import { RhfRadioGroup } from '@navikt/ft-form-hooks';
4+
import { BodyShort, HStack, Radio, VStack } from '@navikt/ds-react';
5+
import { RhfRadioGroupNew } from '@navikt/ft-form-hooks';
66
import { required } from '@navikt/ft-form-validators';
77
import { FaktaGruppe } from '@navikt/ft-ui-komponenter';
88

@@ -44,26 +44,23 @@ export const EktefelleFaktaForm = ({ readOnly, gjeldendeFamiliehendelse, alleMer
4444
<div>
4545
<hr className={styles.hr} />
4646
</div>
47-
<RhfRadioGroup
47+
<RhfRadioGroupNew
4848
name="ektefellesBarn"
4949
control={control}
5050
hideLegend
5151
validate={[required]}
5252
isReadOnly={readOnly}
5353
isEdited={hasValue(gjeldendeFamiliehendelse.ektefellesBarn)}
54-
isHorizontal
55-
isTrueOrFalseSelection
56-
radios={[
57-
{
58-
label: intl.formatMessage({ id: 'EktefelleFaktaForm.ErIkkeValg' }),
59-
value: 'false',
60-
},
61-
{
62-
label: intl.formatMessage({ id: 'EktefelleFaktaForm.ErValg' }),
63-
value: 'true',
64-
},
65-
]}
66-
/>
54+
>
55+
<HStack gap="space-16">
56+
<Radio value={false} size="small">
57+
<FormattedMessage id="EktefelleFaktaForm.ErIkkeValg" />
58+
</Radio>
59+
<Radio value={true} size="small">
60+
<FormattedMessage id="EktefelleFaktaForm.ErValg" />
61+
</Radio>
62+
</HStack>
63+
</RhfRadioGroupNew>
6764
</VStack>
6865
</FaktaGruppe>
6966
);

‎packages/fakta/adopsjon/src/components/MannAdoptererAleneFaktaForm.tsx

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useFormContext } from 'react-hook-form';
22
import { FormattedMessage, useIntl } from 'react-intl';
33

4-
import { BodyShort, Detail, VStack } from '@navikt/ds-react';
5-
import { RhfRadioGroup } from '@navikt/ft-form-hooks';
4+
import { BodyShort, Detail, HStack, Radio, VStack } from '@navikt/ds-react';
5+
import { RhfRadioGroupNew } from '@navikt/ft-form-hooks';
66
import { required } from '@navikt/ft-form-validators';
77
import { FaktaGruppe } from '@navikt/ft-ui-komponenter';
88

@@ -56,26 +56,23 @@ export const MannAdoptererAleneFaktaForm = ({
5656
<div>
5757
<hr className={styles.hr} />
5858
</div>
59-
<RhfRadioGroup
59+
<RhfRadioGroupNew
6060
name="mannAdoptererAlene"
6161
control={control}
6262
hideLegend
6363
isEdited={hasValue(gjeldendeFamiliehendelse.mannAdoptererAlene)}
6464
validate={[required]}
6565
isReadOnly={readOnly}
66-
isHorizontal
67-
isTrueOrFalseSelection
68-
radios={[
69-
{
70-
label: intl.formatMessage({ id: 'MannAdoptererAleneFaktaForm.AdoptererAlene' }),
71-
value: 'true',
72-
},
73-
{
74-
label: intl.formatMessage({ id: 'MannAdoptererAleneFaktaForm.AdoptererIkkeAlene' }),
75-
value: 'false',
76-
},
77-
]}
78-
/>
66+
>
67+
<HStack gap="space-16">
68+
<Radio value={true} size="small">
69+
<FormattedMessage id="MannAdoptererAleneFaktaForm.AdoptererAlene" />
70+
</Radio>
71+
<Radio value={false} size="small">
72+
<FormattedMessage id="MannAdoptererAleneFaktaForm.AdoptererIkkeAlene" />
73+
</Radio>
74+
</HStack>
75+
</RhfRadioGroupNew>
7976
</VStack>
8077
</FaktaGruppe>
8178
);

‎packages/fakta/arbeid-og-inntekt/src/components/manglendeArbeidsforhold/ManglendeArbeidsforholdForm.tsx

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { useForm, type UseFormGetValues } from 'react-hook-form';
33
import { FormattedMessage, useIntl } from 'react-intl';
44

55
import { QuestionmarkDiamondIcon } from '@navikt/aksel-icons';
6-
import { Alert, BodyShort, Button, HStack, Popover, VStack } from '@navikt/ds-react';
7-
import { RhfDatepicker, RhfForm, RhfRadioGroup, RhfTextarea, RhfTextField } from '@navikt/ft-form-hooks';
6+
import { Alert, BodyShort, Button, HStack, Popover, Radio, VStack } from '@navikt/ds-react';
7+
import { RhfDatepicker, RhfForm, RhfRadioGroupNew, RhfTextarea, RhfTextField } from '@navikt/ft-form-hooks';
88
import {
99
dateAfterOrEqual,
1010
hasValidDate,
@@ -127,7 +127,7 @@ export const ManglendeArbeidsforholdForm = ({
127127
</div>
128128
<RhfForm formMethods={formMethods} onSubmit={lagre}>
129129
<VStack gap="space-16">
130-
<RhfRadioGroup
130+
<RhfRadioGroupNew
131131
name="saksbehandlersVurdering"
132132
control={formMethods.control}
133133
label={
@@ -155,21 +155,20 @@ export const ManglendeArbeidsforholdForm = ({
155155
}
156156
validate={[required]}
157157
isReadOnly={isReadOnly}
158-
radios={[
159-
{
160-
label: intl.formatMessage({ id: 'ManglendeOpplysningerForm.TarKontakt' }),
161-
value: ArbeidsforholdKomplettVurderingType.KONTAKT_ARBEIDSGIVER_VED_MANGLENDE_ARBEIDSFORHOLD,
162-
},
163-
{
164-
label: intl.formatMessage({ id: 'ManglendeOpplysningerForm.GåVidere' }),
165-
value: ArbeidsforholdKomplettVurderingType.IKKE_OPPRETT_BASERT_PÅ_INNTEKTSMELDING,
166-
},
167-
{
168-
label: intl.formatMessage({ id: 'ManglendeOpplysningerForm.OpprettArbeidsforhold' }),
169-
value: ArbeidsforholdKomplettVurderingType.OPPRETT_BASERT_PÅ_INNTEKTSMELDING,
170-
},
171-
]}
172-
/>
158+
>
159+
<Radio
160+
value={ArbeidsforholdKomplettVurderingType.KONTAKT_ARBEIDSGIVER_VED_MANGLENDE_ARBEIDSFORHOLD}
161+
size="small"
162+
>
163+
<FormattedMessage id="ManglendeOpplysningerForm.TarKontakt" />
164+
</Radio>
165+
<Radio value={ArbeidsforholdKomplettVurderingType.IKKE_OPPRETT_BASERT_PÅ_INNTEKTSMELDING} size="small">
166+
<FormattedMessage id="ManglendeOpplysningerForm.GåVidere" />
167+
</Radio>
168+
<Radio value={ArbeidsforholdKomplettVurderingType.OPPRETT_BASERT_PÅ_INNTEKTSMELDING} size="small">
169+
<FormattedMessage id="ManglendeOpplysningerForm.OpprettArbeidsforhold" />
170+
</Radio>
171+
</RhfRadioGroupNew>
173172
{saksbehandlersVurdering === ArbeidsforholdKomplettVurderingType.OPPRETT_BASERT_PÅ_INNTEKTSMELDING && (
174173
<HStack gap="space-16">
175174
<RhfDatepicker

‎packages/fakta/arbeid-og-inntekt/src/components/manglendeInntektsmelding/ManglendeInntektsmeldingForm.tsx

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { useForm } from 'react-hook-form';
33
import { FormattedMessage, useIntl } from 'react-intl';
44

55
import { QuestionmarkDiamondIcon } from '@navikt/aksel-icons';
6-
import { Alert, BodyShort, Button, HStack, Popover, VStack } from '@navikt/ds-react';
7-
import { RhfForm, RhfRadioGroup, RhfTextarea } from '@navikt/ft-form-hooks';
6+
import { Alert, BodyShort, Button, HStack, Popover, Radio, VStack } from '@navikt/ds-react';
7+
import { RhfForm, RhfRadioGroupNew, RhfTextarea } from '@navikt/ft-form-hooks';
88
import { hasValidText, maxLength, minLength, required } from '@navikt/ft-form-validators';
99

1010
import { ArbeidsforholdKomplettVurderingType } from '@navikt/fp-kodeverk';
@@ -79,22 +79,7 @@ export const ManglendeInntektsmeldingForm = ({
7979
const svgRef = useRef<SVGSVGElement>(null);
8080
const [openState, setOpenState] = useState(false);
8181
const toggleHjelpetekst = () => setOpenState(gammelVerdi => !gammelVerdi);
82-
const radioOptions = [
83-
{
84-
label: intl.formatMessage({ id: 'InntektsmeldingInnhentesForm.TarKontakt' }),
85-
value: ArbeidsforholdKomplettVurderingType.KONTAKT_ARBEIDSGIVER_VED_MANGLENDE_INNTEKTSMELDING,
86-
},
87-
{
88-
label: intl.formatMessage({ id: 'InntektsmeldingInnhentesForm.GåVidere' }),
89-
value: ArbeidsforholdKomplettVurderingType.FORTSETT_UTEN_INNTEKTSMELDING,
90-
},
91-
];
92-
if (!radData.erPrivatPerson) {
93-
radioOptions.splice(1, 0, {
94-
label: intl.formatMessage({ id: 'InntektsmeldingInnhentesForm.MeldingArbeidsgiverNavNo' }),
95-
value: ArbeidsforholdKomplettVurderingType.MELDING_TIL_ARBEIDSGIVER_NAV_NO,
96-
});
97-
}
82+
9883
return (
9984
<RhfForm formMethods={formMethods} onSubmit={lagre}>
10085
<VStack gap="space-16">
@@ -105,7 +90,7 @@ export const ManglendeInntektsmeldingForm = ({
10590
</Alert>
10691
</div>
10792
)}
108-
<RhfRadioGroup
93+
<RhfRadioGroupNew
10994
name="saksbehandlersVurdering"
11095
control={formMethods.control}
11196
label={
@@ -141,8 +126,24 @@ export const ManglendeInntektsmeldingForm = ({
141126
}
142127
validate={[required]}
143128
isReadOnly={isReadOnly}
144-
radios={radioOptions}
145-
/>
129+
>
130+
<VStack gap="space-2">
131+
<Radio
132+
value={ArbeidsforholdKomplettVurderingType.KONTAKT_ARBEIDSGIVER_VED_MANGLENDE_INNTEKTSMELDING}
133+
size="small"
134+
>
135+
<FormattedMessage id="InntektsmeldingInnhentesForm.TarKontakt" />
136+
</Radio>
137+
{!radData.erPrivatPerson && (
138+
<Radio value={ArbeidsforholdKomplettVurderingType.MELDING_TIL_ARBEIDSGIVER_NAV_NO} size="small">
139+
<FormattedMessage id="InntektsmeldingInnhentesForm.MeldingArbeidsgiverNavNo" />
140+
</Radio>
141+
)}
142+
<Radio value={ArbeidsforholdKomplettVurderingType.FORTSETT_UTEN_INNTEKTSMELDING} size="small">
143+
<FormattedMessage id="InntektsmeldingInnhentesForm.GåVidere" />
144+
</Radio>
145+
</VStack>
146+
</RhfRadioGroupNew>
146147
<RhfTextarea
147148
name="begrunnelse"
148149
control={formMethods.control}

‎packages/fakta/felles/src/components/form/TrueFalseInput.tsx

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
2-
import type { FieldValues, UseControllerProps } from 'react-hook-form';
2+
import { type FieldValues, type UseControllerProps, useFormContext } from 'react-hook-form';
33

4-
import { RhfRadioGroup } from '@navikt/ft-form-hooks';
4+
import { Radio, VStack } from '@navikt/ds-react';
5+
import { RhfRadioGroupNew } from '@navikt/ft-form-hooks';
56
import { required } from '@navikt/ft-form-validators';
67
import { createIntl } from '@navikt/ft-utils';
78

@@ -30,26 +31,26 @@ export const TrueFalseInput = <T extends FieldValues>({
3031
falseLabel,
3132
falseContent,
3233
}: Props<T>) => {
34+
const { watch } = useFormContext<T>();
35+
36+
const value = watch(name);
37+
3338
return (
34-
<RhfRadioGroup
35-
name={name}
36-
control={control}
37-
label={label}
38-
validate={[required]}
39-
isReadOnly={readOnly}
40-
isTrueOrFalseSelection
41-
radios={[
42-
{
43-
label: trueLabel ?? intl.formatMessage({ id: 'TrueFalseInput.True' }),
44-
value: 'true',
45-
element: trueContent,
46-
},
47-
{
48-
label: falseLabel ?? intl.formatMessage({ id: 'TrueFalseInput.False' }),
49-
value: 'false',
50-
element: falseContent,
51-
},
52-
]}
53-
/>
39+
<RhfRadioGroupNew name={name} control={control} label={label} validate={[required]} isReadOnly={readOnly}>
40+
<VStack gap="space-2">
41+
<VStack gap="space-16">
42+
<Radio value={true} size="small">
43+
{trueLabel ?? intl.formatMessage({ id: 'TrueFalseInput.True' })}
44+
</Radio>
45+
{value === true && trueContent}
46+
</VStack>
47+
<VStack gap="space-16">
48+
<Radio value={false} size="small">
49+
{falseLabel ?? intl.formatMessage({ id: 'TrueFalseInput.False' })}
50+
</Radio>
51+
{value === false && falseContent}
52+
</VStack>
53+
</VStack>
54+
</RhfRadioGroupNew>
5455
);
5556
};

‎packages/fakta/fodsel/src/components/form/ErBarnFødt.tsx

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { useFormContext } from 'react-hook-form';
22
import { FormattedMessage, useIntl } from 'react-intl';
33

4-
import { RhfRadioGroup } from '@navikt/ft-form-hooks';
4+
import { HStack, Radio, VStack } from '@navikt/ds-react';
5+
import { RhfRadioGroupNew } from '@navikt/ft-form-hooks';
56
import { required } from '@navikt/ft-form-validators';
67

78
import type { FødselGjeldende } from '@navikt/fp-types';
@@ -23,32 +24,32 @@ export type ErBarnFødtFormValues = {
2324
export const ErBarnFødt = ({ isReadOnly, isEdited, finnesBarnIFReg, antallBarnISøknad }: Props) => {
2425
const intl = useIntl();
2526

26-
const { control } = useFormContext<ErBarnFødtFormValues>();
27+
const { control, watch } = useFormContext<ErBarnFødtFormValues>();
28+
29+
const erBarnFødt = watch('erBarnFødt');
2730

2831
return (
29-
<RhfRadioGroup
30-
control={control}
31-
name="erBarnFødt"
32-
isEdited={isEdited}
33-
label={intl.formatMessage({ id: 'ErBarnFødt.Label' }, { antallBarn: antallBarnISøknad })}
34-
validate={[required]}
35-
isReadOnly={isReadOnly}
36-
isHorizontal
37-
size="medium"
38-
isTrueOrFalseSelection
39-
radios={[
40-
{
41-
label: <FormattedMessage id="ErBarnFødt.Ja" />,
42-
value: 'true',
43-
element: <BarnFieldArray isReadOnly={isReadOnly} />,
44-
},
45-
{
46-
label: <FormattedMessage id="ErBarnFødt.Nei" />,
47-
value: 'false',
48-
disabled: finnesBarnIFReg,
49-
},
50-
]}
51-
/>
32+
<VStack gap="space-16">
33+
<RhfRadioGroupNew
34+
control={control}
35+
name="erBarnFødt"
36+
isEdited={isEdited}
37+
label={intl.formatMessage({ id: 'ErBarnFødt.Label' }, { antallBarn: antallBarnISøknad })}
38+
validate={[required]}
39+
isReadOnly={isReadOnly}
40+
size="medium"
41+
>
42+
<HStack gap="space-16">
43+
<Radio value={true} size="small">
44+
<FormattedMessage id="ErBarnFødt.Ja" />
45+
</Radio>
46+
<Radio value={false} size="small" disabled={finnesBarnIFReg}>
47+
<FormattedMessage id="ErBarnFødt.Nei" />
48+
</Radio>
49+
</HStack>
50+
</RhfRadioGroupNew>
51+
{erBarnFødt && <BarnFieldArray isReadOnly={isReadOnly} />}
52+
</VStack>
5253
);
5354
};
5455

‎packages/fakta/medlemskap/src/components/aksjonspunkt/MedlemskapVurderinger.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useFormContext } from 'react-hook-form';
2-
import { RawIntlProvider } from 'react-intl';
2+
import { FormattedMessage, RawIntlProvider } from 'react-intl';
33

4-
import { VStack } from '@navikt/ds-react';
5-
import { RhfDatepicker, RhfRadioGroup, RhfSelect } from '@navikt/ft-form-hooks';
4+
import { Radio, VStack } from '@navikt/ds-react';
5+
import { RhfDatepicker, RhfRadioGroupNew, RhfSelect } from '@navikt/ft-form-hooks';
66
import { hasValidDate, required } from '@navikt/ft-form-validators';
77
import { createIntl } from '@navikt/ft-utils';
88

@@ -39,16 +39,21 @@ export const MedlemskapVurderinger = ({ readOnly, ytelse, avslagsarsaker, erForu
3939
return (
4040
<RawIntlProvider value={intl}>
4141
<VStack gap={readOnly ? '2' : '6'}>
42-
<RhfRadioGroup
42+
<RhfRadioGroupNew
4343
name="vurdering"
4444
control={control}
4545
label={
4646
readOnly ? intl.formatMessage({ id: 'VurderMedlemsskapAksjonspunktForm.VurderingLabel.ReadOnly' }) : label
4747
}
4848
validate={[required]}
4949
isReadOnly={readOnly}
50-
radios={lagVurderingsAlternativer(ytelse, erForutgående, erRevurdering)}
51-
/>
50+
>
51+
{lagVurderingsAlternativer(ytelse, erForutgående, erRevurdering).map(option => (
52+
<Radio key={option.value} value={option.value} size="small">
53+
<FormattedMessage id={option.label} />
54+
</Radio>
55+
))}
56+
</RhfRadioGroupNew>
5257
{vurdering && [MedlemskapVurdering.DELVIS_OPPFYLT, MedlemskapVurdering.IKKE_OPPFYLT].includes(vurdering) && (
5358
<RhfSelect
5459
name="avslagskode"

0 commit comments

Comments
 (0)