fiks size på Terminbekreftelse felter

Author: sirimykland

packages/fakta/fodsel/src/FodselFaktaIndex.spec.tsx

@@ -12,7 +12,7 @@ describe('FodselFaktaIndex', () => {
   it('skal bekrefte aksjonspunkt for termin', async () => {
     const lagre = vi.fn(() => Promise.resolve());
 
-    const utils = render(<APTerminbekreftelse submitCallback={lagre} />);
+    render(<APTerminbekreftelse submitCallback={lagre} />);
 
     expect(await screen.findByText('Kontroller terminbekreftelse')).toBeInTheDocument();
 
@@ -30,25 +30,37 @@ describe('FodselFaktaIndex', () => {
 
     const apBoks = within(screen.getByLabelText('Kontroller opplysninger om termin oppgitt i søknaden'));
 
-    expect(apBoks.getByLabelText('Utstedtdato')).toHaveValue('20.05.2025');
-    expect(apBoks.getByLabelText('Termindato')).toHaveValue('24.06.2025');
-    expect(apBoks.getByLabelText('Antall barn')).toHaveValue('1');
+    const apBoksTermindato = apBoks.getByLabelText('Termindato');
+    const apBoksUtstedtdato = apBoks.getByLabelText('Utstedtdato');
+    const apBoksAntallBarn = apBoks.getByLabelText('Antall barn');
 
     expect(screen.getByText('Bekreft og fortsett').closest('button')).toBeDisabled();
 
-    await userEvent.type(utils.getByLabelText('Vurdering'), 'Dette er en begrunnelse');
+    expect(apBoksTermindato).toHaveValue('24.06.2025');
+    await userEvent.clear(apBoksTermindato);
+    await userEvent.type(apBoksTermindato, '25.06.2025');
+
+    expect(apBoksUtstedtdato).toHaveValue('20.05.2025');
+    await userEvent.clear(apBoksUtstedtdato);
+    await userEvent.type(apBoksUtstedtdato, '21.05.2025');
+
+    expect(apBoksAntallBarn).toHaveValue('1');
+    await userEvent.clear(apBoksAntallBarn);
+    await userEvent.type(apBoksAntallBarn, '2');
+
+    await userEvent.type(screen.getByLabelText('Vurdering'), 'Dette er en begrunnelse');
 
     expect(await screen.findByText('Bekreft og fortsett')).toBeEnabled();
 
     await userEvent.click(screen.getByText('Bekreft og fortsett'));
 
     await waitFor(() => expect(lagre).toHaveBeenCalledTimes(1));
     expect(lagre).toHaveBeenNthCalledWith(1, {
-      antallBarn: 1,
       begrunnelse: 'Dette er en begrunnelse',
       kode: '5001',
-      termindato: '2025-06-24',
-      utstedtdato: '2025-05-20',
+      termindato: '2025-06-25',
+      utstedtdato: '2025-05-21',
+      antallBarn: 2,
     });
   });
 
@@ -89,7 +101,7 @@ describe('FodselFaktaIndex', () => {
   it('skal bekrefte aksjonspunkt for manglende fødsel ved å velge at dokumentasjon foreligger', async () => {
     const lagre = vi.fn(() => Promise.resolve());
 
-    const utils = render(<APSjekkManglendeFødselPåForeldrepenger submitCallback={lagre} />);
+    render(<APSjekkManglendeFødselPåForeldrepenger submitCallback={lagre} />);
 
     const apBoks = within(screen.getByLabelText('Kontroller dokumentasjon av fødsel'));
     expect(apBoks.getByText('Fyll inn dokumenterte fødselsopplysninger')).toBeInTheDocument();
@@ -101,7 +113,7 @@ describe('FodselFaktaIndex', () => {
 
     await userEvent.click(screen.getByText('Legg til barn'));
 
-    const alleDatofelt = utils.getAllByRole('textbox', { hidden: true });
+    const alleDatofelt = screen.getAllByRole('textbox', { hidden: true });
 
     const fødselsdatoFelt2 = alleDatofelt[2];
     await userEvent.type(fødselsdatoFelt2, '05.05.2025');
@@ -111,7 +123,7 @@ describe('FodselFaktaIndex', () => {
     await userEvent.type(dødsdatoFelt, '05.05.2025');
     fireEvent.blur(dødsdatoFelt);
 
-    await userEvent.type(utils.getByLabelText('Vurdering'), 'Dette er en begrunnelse');
+    await userEvent.type(screen.getByLabelText('Vurdering'), 'Dette er en begrunnelse');
 
     expect(await screen.findByText('Bekreft og fortsett')).toBeEnabled();
 
@@ -138,14 +150,14 @@ describe('FodselFaktaIndex', () => {
 
   it('skal bekrefte aksjonspunkt for manglende fødsel ved å velge at dokumentasjon ikke foreligger', async () => {
     const lagre = vi.fn(() => Promise.resolve());
-    const utils = render(<APSjekkManglendeFødselPåEngangstønad submitCallback={lagre} />);
+    render(<APSjekkManglendeFødselPåEngangstønad submitCallback={lagre} />);
 
     const apBoks = within(screen.getByLabelText('Kontroller dokumentasjon av fødsel'));
     expect(apBoks.getByText('Bekreft og fortsett').closest('button')).toBeDisabled();
 
     expect(apBoks.getByText('Fyll inn dokumenterte fødselsopplysninger')).toBeInTheDocument();
     expect(apBoks.getByLabelText('Ingen opplysninger om barn (avslag)')).toBeChecked();
-    await userEvent.type(utils.getByLabelText('Vurdering'), 'Dette er en begrunnelse');
+    await userEvent.type(screen.getByLabelText('Vurdering'), 'Dette er en begrunnelse');
 
     expect(await screen.findByText('Bekreft og fortsett')).toBeEnabled();
 

packages/fakta/fodsel/src/components/aksjonspunkt/SjekkManglendeFødselForm.tsx

@@ -49,7 +49,7 @@ export const SjekkManglendeFDselForm = ({ submittable, aksjonspunkt, fødsel: {
         onSubmit={values => submitCallback(transformValues(values))}
         setDataOnUnmount={setMellomlagretFormData}
       >
-        <VStack gap="6">
+        <VStack gap="4">
           <RadioGroupPanel
             name="dokumentasjonForeligger"
             isEdited={dokumentasjonForeliggerIsEdited}

packages/fakta/fodsel/src/components/aksjonspunkt/SjekkTerminbekreftelseForm.tsx

@@ -2,7 +2,7 @@ import { useForm, type UseFormGetValues } from 'react-hook-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import { Alert, HStack, VStack } from '@navikt/ds-react';
-import { Datepicker, Form, NumberField } from '@navikt/ft-form-hooks';
+import { Datepicker, Form, InputField } from '@navikt/ft-form-hooks';
 import {
   dateAfterOrEqual,
   dateBeforeOrEqual,
@@ -75,10 +75,11 @@ export const SjekkTerminbekreftelseForm = ({ fødsel: { gjeldende, søknad }, su
         onSubmit={values => submitCallback(transformValues(values))}
         setDataOnUnmount={setMellomlagretFormData}
       >
-        <VStack gap="2">
+        <VStack gap="4">
           <HStack gap="4">
             <Datepicker
               name="termindato"
+              size="medium"
               label={intl.formatMessage({ id: 'Label.Termindato' })}
               validate={[required, hasValidDate, dateAfterOrEqual(minTermindato()), dateBeforeOrEqual(maxTermindato())]}
               fromDate={minTermindato().toDate()}
@@ -88,16 +89,22 @@ export const SjekkTerminbekreftelseForm = ({ fødsel: { gjeldende, søknad }, su
             />
             <Datepicker
               name="utstedtdato"
+              size="medium"
               label={intl.formatMessage({ id: 'Label.Utstedtdato' })}
               validate={[required, hasValidDate, validerTerminBekreftelse(formMethods.getValues)]}
               isReadOnly={isReadOnly}
               fromDate={minTerminbekreftelseDato().toDate()}
               toDate={maxTerminbekreftelseDato().toDate()}
               isEdited={isNotEqual(søknad.utstedtdato, gjeldende.utstedtdato?.utstedtdato)}
             />
-            <NumberField
+            <InputField
               name="antallBarn"
+              size="medium"
               label={intl.formatMessage({ id: 'Label.AntallBarn' })}
+              parse={value => {
+                const parsedValue = parseInt(value.toString(), 10);
+                return Number.isNaN(parsedValue) ? value : parsedValue;
+              }}
               validate={[required, hasValidInteger, validateMinAntallBarn, validateMaxAntallBarn]}
               readOnly={isReadOnly}
               className={styles.bredde}
@@ -109,10 +116,12 @@ export const SjekkTerminbekreftelseForm = ({ fødsel: { gjeldende, søknad }, su
             isSubmittable={submittable}
             isReadOnly={isReadOnly}
             hasBegrunnelse={!!begrunnelse}
+            size="medium"
             hasVurderingText
           />
+
           {isForTidligTerminbekreftelse && (
-            <Alert variant="warning" className={styles.marginBottom}>
+            <Alert variant="warning">
               <FormattedMessage id="TermindatoFaktaForm.AdvarselForTidligUtstedtdato" />
             </Alert>
           )}

packages/fakta/fodsel/src/components/form/BarnFieldArray.tsx

@@ -122,15 +122,17 @@ export const BarnFieldArray = ({ isReadOnly }: Props) => {
         </Table.Body>
       </Table>
       {!isReadOnly && (
-        <Button
-          onClick={() => append(defaultAntallBarn)}
-          type="button"
-          variant="tertiary-neutral"
-          icon={<PlusCircleIcon aria-hidden />}
-          size="small"
-        >
-          <FormattedMessage id="AvklartBarnFieldArray.LeggTilBarn" />
-        </Button>
+        <div>
+          <Button
+            onClick={() => append(defaultAntallBarn)}
+            type="button"
+            variant="tertiary-neutral"
+            icon={<PlusCircleIcon aria-hidden />}
+            size="small"
+          >
+            <FormattedMessage id="AvklartBarnFieldArray.LeggTilBarn" />
+          </Button>
+        </div>
       )}
     </>
   );