Fikset error melding og fjernet bruk av NAVGrid Komponent (#1175)

navikt · Oct 31, 2023 · 9870541 · 9870541
1 parent 058ec65
commit 9870541
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 79 deletions.
diff --git a/src/AvtaleSide/steg/OmMentorSteg/OmMentorSteg.tsx b/src/AvtaleSide/steg/OmMentorSteg/OmMentorSteg.tsx
@@ -7,7 +7,6 @@ import PakrevdInput from '@/komponenter/PakrevdInput/PakrevdInput';
 import PakrevdInputValidering from '@/komponenter/PakrevdInputValidering/PakrevdInputValidering';
 import PakrevdTextarea from '@/komponenter/PakrevdTextarea/PakrevdTextarea';
 import TelefonnummerInput from '@/komponenter/TelefonnummerInput/TelefonnummerInput';
-import { Column, Container, Row } from '@/komponenter/NavGrid/Grid';
 import { BodyShort } from '@navikt/ds-react';
 import ValutaInput from '@/komponenter/form/ValutaInput';
 import React, { useState, useContext } from 'react';
@@ -34,93 +33,77 @@ const OmMentorSteg = () => {
     return (
         <Innholdsboks className={cls.className} utfyller="veileder">
             <SkjemaTittel>Om mentoren</SkjemaTittel>
-            <Container fluid={true}>
-                <Row className={cls.element('rad')}>
-                    <Column md="6">
-                        <div className="rad">
-                            <VisueltDisabledInputFelt label="Fødselsnummer" tekst={avtaleContext.avtale.mentorFnr} />
-                        </div>
-                    </Column>
-                </Row>
-                <Row className={cls.element('rad')}>
-                    <Column md="6">
-                        <PakrevdInput
-                            label="Fornavn"
-                            verdi={avtaleContext.avtale.gjeldendeInnhold.mentorFornavn}
-                            settVerdi={(verdi) => avtaleContext.settAvtaleInnholdVerdi('mentorFornavn', verdi)}
-                        />
-                    </Column>
-                    <Column md="6">
-                        <PakrevdInput
-                            label="Etternavn"
-                            verdi={avtaleContext.avtale.gjeldendeInnhold.mentorEtternavn}
-                            settVerdi={(verdi) => avtaleContext.settAvtaleInnholdVerdi('mentorEtternavn', verdi)}
-                        />
-                    </Column>
-                </Row>
-                <Row className={cls.element('rad')}>
-                    <Column md="6">
-                        <TelefonnummerInput
-                            label="Mobilnummer"
-                            verdi={avtaleContext.avtale.gjeldendeInnhold.mentorTlf}
-                            settVerdi={(verdi) => avtaleContext.settAvtaleInnholdVerdi('mentorTlf', verdi)}
-                        />
-                    </Column>
-                </Row>
-            </Container>
-            <Container fluid={true} className={cls.element('arbeidsoppgaver-mentor')}>
+                <div className={cls.element('rad')}>
+                    <VisueltDisabledInputFelt label="Fødselsnummer" tekst={avtaleContext.avtale.mentorFnr} />
+                </div>
+                <div className={cls.element('rad')}>
+                    <PakrevdInput
+                        label="Fornavn"
+                        verdi={avtaleContext.avtale.gjeldendeInnhold.mentorFornavn}
+                        settVerdi={(verdi) => avtaleContext.settAvtaleInnholdVerdi('mentorFornavn', verdi)}
+                    />
+                    <PakrevdInput
+                        label="Etternavn"
+                        verdi={avtaleContext.avtale.gjeldendeInnhold.mentorEtternavn}
+                        settVerdi={(verdi) => avtaleContext.settAvtaleInnholdVerdi('mentorEtternavn', verdi)}
+                    />
+                </div>
+                <div className={cls.element('rad')}>
+                    <TelefonnummerInput
+                        label="Mobilnummer"
+                        verdi={avtaleContext.avtale.gjeldendeInnhold.mentorTlf}
+                        settVerdi={(verdi) => avtaleContext.settAvtaleInnholdVerdi('mentorTlf', verdi)}
+                    />
+                </div>
+                <div className={cls.element('textArea')}>
                 <PakrevdTextarea
                     label="Arbeidsoppgaver til mentor"
                     verdi={avtaleContext.avtale.gjeldendeInnhold.mentorOppgaver}
                     settVerdi={(verdi) => avtaleContext.settAvtaleInnholdVerdi('mentorOppgaver', verdi)}
                     maxLengde={1000}
                     feilmelding="Beskrivelse av arbeidsoppgaver er påkrevd"
                 />
-            </Container>
-            <Container fluid={true}>
-                <Row className="begge__tekst">
-                    <Column md="6">
-                        <PakrevdInputValidering
-                            validering={/^\d{0,3}(,5?)?$/}
-                            label="Antall timer med mentor per uke"
-                            verdi={mentorAntallTimerInput}
-                            settVerdi={(verdi) => {
-                                setMentorAntallTimerInput(verdi);
-                                avtaleContext.settAvtaleInnholdVerdi('mentorAntallTimer', inputToNumber(verdi));
-                            }}
-                        />
-                    </Column>
-                    <Column md="6">
-                        <ValutaInput
-                            min={0}
-                            className="input"
-                            name="Timelønn"
-                            size="medium"
-                            label="Timelønn*"
-                            autoComplete={'off'}
-                            value={avtaleContext.avtale.gjeldendeInnhold.mentorTimelonn}
-                            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                                settForHøyTimelønn(undefined)
-                            }}                                
-                            onBlur={(event) => {
-                                if(/^\d{0,4}(\.\d{0,2})?$/.test(event.target.value)){
-                                    avtaleContext.settAvtaleInnholdVerdi('mentorTimelonn', Math.round(parseFloat(event.target.value)))
-                                }
-                                else {
-                                        avtaleContext.settAvtaleInnholdVerdi('mentorTimelonn', undefined);
-                                        settForHøyTimelønn("Overskrider maks timelønn");
-                                    }
+                </div>
+                <div className={cls.element('rad')}>
+                    <PakrevdInputValidering
+                        validering={/^\d{0,3}(,5?)?$/}
+                        label="Antall timer med mentor per uke"
+                        verdi={mentorAntallTimerInput}
+                        settVerdi={(verdi) => {
+                            setMentorAntallTimerInput(verdi);
+                            avtaleContext.settAvtaleInnholdVerdi('mentorAntallTimer', inputToNumber(verdi));
+                        }}
+                    />
+                    <ValutaInput
+                        min={0}
+                        className="input"
+                        name="Timelønn"
+                        size="medium"
+                        label="Timelønn*"
+                        autoComplete={'off'}
+                        value={avtaleContext.avtale.gjeldendeInnhold.mentorTimelonn}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                            settForHøyTimelønn(undefined)
+                        }}                                
+                        onBlur={(event) => {
+                            if(/^\d{0,4}(\.\d{0,2})?$/.test(event.target.value)){
+                                avtaleContext.settAvtaleInnholdVerdi('mentorTimelonn', Math.round(parseFloat(event.target.value)))
+                            }
+                            else {
+                                    avtaleContext.settAvtaleInnholdVerdi('mentorTimelonn', undefined);
+                                    settForHøyTimelønn("Overskrider maks timelønn");
                                 }
                             }
-                            error={forHøyTimelønn}
-                        />
-                        <VerticalSpacer rem={0.75} />
-                        <BodyShort size="small">
-                            *Inkludert feriepenger, arbeidsgiveravgift og obligatorisk tjenestepensjon
-                        </BodyShort>
-                    </Column>
-                </Row>
-            </Container>
+                        }
+                        error={forHøyTimelønn}
+                    />
+                </div>
+                <div>
+                    <VerticalSpacer rem={0.75} />
+                    <BodyShort size="small">
+                        *Inkludert feriepenger, arbeidsgiveravgift og obligatorisk tjenestepensjon
+                    </BodyShort>
+                </div>
             <VerticalSpacer rem={2} />
             <LagreKnapp lagre={avtaleContext.lagreAvtale} label={'Lagre'} suksessmelding={'Avtale lagret'} />
         </Innholdsboks>

diff --git a/src/AvtaleSide/steg/OmMentorSteg/omMentorSteg.less b/src/AvtaleSide/steg/OmMentorSteg/omMentorSteg.less
@@ -1,7 +1,25 @@
 .omMentorSteg {
+  padding: 0.5rem 0.5rem 1rem 0.5rem;
+
   &__rad {
+    display: flex;
+    align-items: flex-start;
     margin-bottom: 1rem;
+
+    .navds-form-field {
+      width: calc(50% - 1rem);
+
+      &:nth-child(odd) {
+        margin-right: 1rem;
+      }
+    }
   }
+
+  &__textArea {
+    margin-bottom: 1rem;
+    margin-right: 1rem;
+  }
+
   &__arbeidsoppgaver-mentor {
     margin: 1rem 0 2rem 0;
   }