Aksel v5 - byttet diverse form elements

package.json

@@ -30,7 +30,7 @@
     "@navikt/ds-tokens": "^5.12.0",
     "@navikt/familie-backend": "^10.0.7",
     "@navikt/familie-datovelger": "0.2.0",
-    "@navikt/familie-form-elements": "^12.0.0",
+    "@navikt/familie-form-elements": "^14.0.0",
     "@navikt/familie-http": "^6.0.2",
     "@navikt/familie-logging": "^6.0.0",
     "@navikt/familie-skjema": "^7.0.6",

src/frontend/komponenter/Fagsak/Brevmottaker/LeggTilEndreBrevmottakerModal.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { styled } from 'styled-components';
 
-import { Button, Fieldset, Modal, Radio, RadioGroup } from '@navikt/ds-react';
+import { Button, Fieldset, Modal, Radio, RadioGroup, Select } from '@navikt/ds-react';
 import { ASpacing6 } from '@navikt/ds-tokens/dist/tokens';
-import { FamilieInput, FamilieSelect } from '@navikt/familie-form-elements';
+import { FamilieInput } from '@navikt/familie-form-elements';
 import { RessursStatus } from '@navikt/familie-typer';
 
 import { useBehandling } from '../../../context/BehandlingContext';
@@ -35,7 +35,7 @@ const StyledFieldset = styled(Fieldset)`
     }
 `;
 
-const MottakerSelect = styled(FamilieSelect)`
+const MottakerSelect = styled(Select)`
     max-width: 19rem;
 `;
 

src/frontend/komponenter/Fagsak/Fakta/FaktaRevurdering.tsx

@@ -32,31 +32,31 @@ const FaktaRevurdering: React.FC<IProps> = ({ feilutbetalingFakta }) => {
             <Spacer20 />
             <RadMedMargin>
                 <Column xs="6">
-                    <DetailBold size="small">Årsak(er) til revurdering</DetailBold>
+                    <DetailBold>Årsak(er) til revurdering</DetailBold>
                     {feilutbetalingFakta.faktainfo?.revurderingsårsak && (
                         <BodyShort size="small">
                             {feilutbetalingFakta.faktainfo.revurderingsårsak}
                         </BodyShort>
                     )}
                 </Column>
                 <Column xs="6">
-                    <DetailBold size="small">Dato for revurderingsvedtak</DetailBold>
+                    <DetailBold>Dato for revurderingsvedtak</DetailBold>
                     <BodyShort size="small">
                         {formatterDatostring(feilutbetalingFakta.revurderingsvedtaksdato)}
                     </BodyShort>
                 </Column>
             </RadMedMargin>
             <RadMedMargin>
                 <Column xs="6">
-                    <DetailBold size="small">Resultat</DetailBold>
+                    <DetailBold>Resultat</DetailBold>
                     {feilutbetalingFakta.faktainfo?.revurderingsresultat && (
                         <BodyShort size="small">
                             {feilutbetalingFakta.faktainfo.revurderingsresultat}
                         </BodyShort>
                     )}
                 </Column>
                 <Column xs="6">
-                    <DetailBold size="small">Konsekvens</DetailBold>
+                    <DetailBold>Konsekvens</DetailBold>
                     {feilutbetalingFakta.faktainfo?.konsekvensForYtelser && (
                         <BodyShort size="small">
                             {feilutbetalingFakta.faktainfo.konsekvensForYtelser?.join(', ')}
@@ -66,7 +66,7 @@ const FaktaRevurdering: React.FC<IProps> = ({ feilutbetalingFakta }) => {
             </RadMedMargin>
             <Row>
                 <Column xs="6">
-                    <DetailBold size="small">Tilbakekrevingsvalg</DetailBold>
+                    <DetailBold>Tilbakekrevingsvalg</DetailBold>
                     {feilutbetalingFakta.faktainfo?.tilbakekrevingsvalg && (
                         <BodyShort size="small">
                             {tilbakekrevingsvalg[feilutbetalingFakta.faktainfo.tilbakekrevingsvalg]}

src/frontend/komponenter/Fagsak/Fakta/FaktaSkjema.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { Column, Row } from 'nav-frontend-grid';
 
-import { BodyShort, Checkbox, Heading } from '@navikt/ds-react';
+import { BodyShort, Checkbox, Heading, Textarea } from '@navikt/ds-react';
 
 import { Ytelsetype } from '../../../kodeverk';
 import { IFeilutbetalingFakta } from '../../../typer/feilutbetalingtyper';
@@ -14,7 +14,6 @@ import {
     Spacer20,
     Spacer8,
 } from '../../Felleskomponenter/Flytelementer';
-import { FamilieTilbakeTextArea } from '../../Felleskomponenter/Skjemaelementer';
 import FeilutbetalingFaktaPerioder from './FaktaPeriode/FeilutbetalingFaktaPerioder';
 import FaktaRevurdering from './FaktaRevurdering';
 import { useFeilutbetalingFakta } from './FeilutbetalingFaktaContext';
@@ -65,7 +64,7 @@ const FaktaSkjema: React.FC<IProps> = ({
                     <Spacer20 />
                     <Row>
                         <Column xs="12" md="4">
-                            <DetailBold size="small">Periode med feilutbetaling</DetailBold>
+                            <DetailBold>Periode med feilutbetaling</DetailBold>
                             <BodyShort size="small">
                                 {`${formatterDatostring(
                                     feilutbetalingFakta.totalFeilutbetaltPeriode.fom
@@ -75,15 +74,15 @@ const FaktaSkjema: React.FC<IProps> = ({
                             </BodyShort>
                         </Column>
                         <Column xs="12" md="4">
-                            <DetailBold size="small">Feilutbetalt beløp totalt</DetailBold>
+                            <DetailBold>Feilutbetalt beløp totalt</DetailBold>
                             <BodyShort size="small" className={'redText'}>
                                 {`${formatCurrencyNoKr(
                                     feilutbetalingFakta.totaltFeilutbetaltBeløp
                                 )}`}
                             </BodyShort>
                         </Column>
                         <Column xs="12" md="4">
-                            <DetailBold size="small">Tidligere varslet beløp</DetailBold>
+                            <DetailBold>Tidligere varslet beløp</DetailBold>
                             <BodyShort size="small">
                                 {feilutbetalingFakta.varsletBeløp
                                     ? `${formatCurrencyNoKr(feilutbetalingFakta.varsletBeløp)}`
@@ -130,10 +129,10 @@ const FaktaSkjema: React.FC<IProps> = ({
             <Spacer20 />
             <Row>
                 <Column sm="12" md="6">
-                    <FamilieTilbakeTextArea
+                    <Textarea
                         name={'begrunnelse'}
                         label={'Forklar årsaken(e) til feilutbetalingen'}
-                        erLesevisning={erLesevisning}
+                        readOnly={erLesevisning}
                         value={skjemaData.begrunnelse ? skjemaData.begrunnelse : ''}
                         onChange={event => onChangeBegrunnelse(event)}
                         maxLength={3000}

src/frontend/komponenter/Fagsak/Foreldelse/ForeldelsePeriode/FeilutbetalingForeldelsePeriodeSkjema.tsx

@@ -5,7 +5,7 @@ import { styled } from 'styled-components';
 import { Column, Row } from 'nav-frontend-grid';
 
 import { ExternalLinkIcon } from '@navikt/aksel-icons';
-import { BodyLong, Heading, Link, Radio, ReadMore } from '@navikt/ds-react';
+import { BodyLong, Heading, Link, Radio, ReadMore, Textarea } from '@navikt/ds-react';
 import { ABorderStrong, ASpacing3 } from '@navikt/ds-tokens/dist/tokens';
 import { FamilieRadioGruppe } from '@navikt/familie-form-elements';
 import { Valideringsstatus } from '@navikt/familie-skjema';
@@ -19,7 +19,7 @@ import { IBehandling } from '../../../../typer/behandling';
 import { datoformatNorsk } from '../../../../utils';
 import { FTButton, Navigering, Spacer20, Spacer8 } from '../../../Felleskomponenter/Flytelementer';
 import PeriodeOppsummering from '../../../Felleskomponenter/Periodeinformasjon/PeriodeOppsummering';
-import { FamilieTilbakeTextArea, FTDatovelger } from '../../../Felleskomponenter/Skjemaelementer';
+import { FTDatovelger } from '../../../Felleskomponenter/Skjemaelementer';
 import PeriodeController from '../../../Felleskomponenter/TilbakeTidslinje/PeriodeController/PeriodeController';
 import { useFeilutbetalingForeldelse } from '../FeilutbetalingForeldelseContext';
 import { ForeldelsePeriodeSkjemeData } from '../typer/feilutbetalingForeldelse';
@@ -153,13 +153,13 @@ const FeilutbetalingForeldelsePeriodeSkjema: React.FC<IProps> = ({
             <Spacer20 />
             <Row>
                 <Column md="8">
-                    <FamilieTilbakeTextArea
+                    <Textarea
                         {...skjema.felter.begrunnelse.hentNavInputProps(skjema.visFeilmeldinger)}
                         id={'begrunnelse'}
                         name="begrunnelse"
                         label={'Vurdering'}
                         maxLength={3000}
-                        erLesevisning={erLesevisning}
+                        readOnly={erLesevisning}
                         value={skjema.felter.begrunnelse.verdi}
                         onChange={event =>
                             skjema.felter.begrunnelse.validerOgSettFelt(event.target.value)

src/frontend/komponenter/Fagsak/Høyremeny/Dokumentlisting/Journalpostvisning.tsx

@@ -60,7 +60,7 @@ const JournalpostVisning: React.FC<IProps> = ({ journalpost }) => {
                         dokument={dok}
                     />
                 ))}
-                <Detail size="small">
+                <Detail>
                     {`${datoRegistrertSendt ? formatterDatoOgTid(datoRegistrertSendt) : '-'} | `}
                     {typer[journalpost.journalposttype]}
                 </Detail>

src/frontend/komponenter/Fagsak/Høyremeny/Historikk/HistorikkInnslag.tsx

@@ -117,7 +117,7 @@ const HistorikkInnslag: React.FC<IProps> = ({ innslag }) => {
             </Tidslinje>
             <Innhold>
                 <Label>{lagTittel()}</Label>
-                <Detail size="small">
+                <Detail>
                     {`${formatterDatoOgTidstring(innslag.opprettetTid)} | `}
                     {innslag.aktør === Aktør.VEDTAKSLØSNING
                         ? applikasjoner[innslag.applikasjon]

src/frontend/komponenter/Fagsak/Høyremeny/SendMelding/SendMelding.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react';
 
-import { BodyShort, Heading } from '@navikt/ds-react';
-import { FamilieSelect } from '@navikt/familie-form-elements';
+import { BodyShort, Heading, Select, Textarea } from '@navikt/ds-react';
 
 import { useBehandling } from '../../../../context/BehandlingContext';
 import { DokumentMal, dokumentMaler } from '../../../../kodeverk';
 import { IBehandling } from '../../../../typer/behandling';
 import { IFagsak, målform } from '../../../../typer/fagsak';
 import { FTButton, Navigering, Spacer20 } from '../../../Felleskomponenter/Flytelementer';
 import BrevmottakerListe from '../../../Felleskomponenter/Hendelsesoversikt/BrevModul/BrevmottakerListe';
-import { FamilieTilbakeTextArea, LabelMedSpråk } from '../../../Felleskomponenter/Skjemaelementer';
+import { LabelMedSpråk } from '../../../Felleskomponenter/Skjemaelementer';
 import ForhåndsvisBrev from './ForhåndsvisBrev/ForhåndsvisBrev';
 import { useSendMelding } from './SendMeldingContext';
 
@@ -59,14 +58,13 @@ const SendMelding: React.FC<IProps> = ({ fagsak, behandling }) => {
                 </div>
             )}
             <Spacer20 />
-            <FamilieSelect
+            <Select
                 {...skjema.felter.maltype.hentNavInputProps(skjema.visFeilmeldinger)}
                 id="dokumentMal"
                 label={'Mal'}
-                erLesevisning={erLesevisning}
+                readOnly={erLesevisning}
                 value={skjema.felter.maltype.verdi}
                 onChange={event => onChangeMal(event)}
-                lesevisningVerdi={'Velg brev'}
             >
                 <option disabled={true} value={''}>
                     Velg brev
@@ -76,11 +74,11 @@ const SendMelding: React.FC<IProps> = ({ fagsak, behandling }) => {
                         {dokumentMaler[mal]}
                     </option>
                 ))}
-            </FamilieSelect>
+            </Select>
             {!!skjema.felter.maltype.verdi && (
                 <>
                     <Spacer20 />
-                    <FamilieTilbakeTextArea
+                    <Textarea
                         {...skjema.felter.fritekst.hentNavInputProps(skjema.visFeilmeldinger)}
                         label={
                             <LabelMedSpråk
@@ -89,7 +87,7 @@ const SendMelding: React.FC<IProps> = ({ fagsak, behandling }) => {
                             />
                         }
                         aria-label={tekstfeltLabel(skjema.felter.maltype.verdi)}
-                        erLesevisning={erLesevisning}
+                        readOnly={erLesevisning}
                         value={skjema.felter.fritekst.verdi}
                         onChange={event =>
                             skjema.felter.fritekst.validerOgSettFelt(event.target.value)

src/frontend/komponenter/Fagsak/Høyremeny/Totrinnskontroll/Totrinnskontroll.tsx

@@ -2,16 +2,13 @@ import * as React from 'react';
 
 import { styled } from 'styled-components';
 
-import { Alert, Link, Radio } from '@navikt/ds-react';
+import { Alert, Link, Radio, Textarea } from '@navikt/ds-react';
 import { RessursStatus } from '@navikt/familie-typer';
 
 import { behandlingssteg } from '../../../../typer/behandling';
 import ArrowBox from '../../../Felleskomponenter/ArrowBox/ArrowBox';
 import { FTButton, Navigering, Spacer20 } from '../../../Felleskomponenter/Flytelementer';
-import {
-    FamilieTilbakeTextArea,
-    HorisontalFamilieRadioGruppe,
-} from '../../../Felleskomponenter/Skjemaelementer';
+import { HorisontalFamilieRadioGruppe } from '../../../Felleskomponenter/Skjemaelementer';
 import Steginformasjon from '../../../Felleskomponenter/Steginformasjon/StegInformasjon';
 import { finnSideForSteg, ISide } from '../../../Felleskomponenter/Venstremeny/sider';
 import { useTotrinnskontroll } from './TotrinnskontrollContext';
@@ -121,10 +118,10 @@ const Totrinnskontroll: React.FC = () => {
                                     {vurdertIkkeGodkjent && (
                                         <>
                                             <ArrowBox alignOffset={erLesevisning ? 5 : 125}>
-                                                <FamilieTilbakeTextArea
+                                                <Textarea
                                                     name={`ikkeGodkjentBegrunnelse_${totrinnSteg.index}`}
                                                     label="Begrunnelse"
-                                                    erLesevisning={erLesevisning}
+                                                    readOnly={erLesevisning}
                                                     value={totrinnSteg.begrunnelse || ''}
                                                     maxLength={2000}
                                                     onChange={event =>

src/frontend/komponenter/Fagsak/Personlinje/Behandlingsmeny/EndreBehandlendeEnhet/EndreBehandlendeEnhet.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
-import { ErrorMessage, Modal } from '@navikt/ds-react';
-import { FamilieSelect } from '@navikt/familie-form-elements';
+import { ErrorMessage, Modal, Select, Textarea } from '@navikt/ds-react';
 import { RessursStatus } from '@navikt/familie-typer';
 
 import { useBehandling } from '../../../../../context/BehandlingContext';
@@ -14,7 +13,6 @@ import {
     FTButton,
     Spacer8,
 } from '../../../../Felleskomponenter/Flytelementer';
-import { FamilieTilbakeTextArea } from '../../../../Felleskomponenter/Skjemaelementer';
 import { useEndreBehandlendeEnhet } from './EndreBehandlendeEnhetContext';
 
 interface IProps {
@@ -65,13 +63,11 @@ const EndreBehandlendeEnhet: React.FC<IProps> = ({ ytelse, behandling, onListEle
                     }}
                 >
                     <Modal.Body>
-                        <FamilieSelect
+                        <Select
                             {...skjema.felter.enhet.hentNavInputProps(skjema.visFeilmeldinger)}
-                            erLesevisning={false}
+                            readOnly={false}
                             name="enhet"
                             label={'Velg ny enhet'}
-                            value={skjema.felter.enhet.verdi}
-                            onChange={e => skjema.felter.enhet.validerOgSettFelt(e.target.value)}
                         >
                             <option value={''} disabled={true}>
                                 Velg ny enhet
@@ -81,18 +77,14 @@ const EndreBehandlendeEnhet: React.FC<IProps> = ({ ytelse, behandling, onListEle
                                     {enhet.enhetNavn}
                                 </option>
                             ))}
-                        </FamilieSelect>
+                        </Select>
                         <Spacer8 />
-                        <FamilieTilbakeTextArea
+                        <Textarea
                             {...skjema.felter.begrunnelse.hentNavInputProps(
                                 skjema.visFeilmeldinger
                             )}
                             label={'Begrunnelse'}
-                            erLesevisning={false}
-                            value={skjema.felter.begrunnelse.verdi}
-                            onChange={e =>
-                                skjema.felter.begrunnelse.validerOgSettFelt(e.target.value)
-                            }
+                            readOnly={false}
                             maxLength={400}
                         />
                         {feilmelding && (

src/frontend/komponenter/Fagsak/Personlinje/Behandlingsmeny/HenleggBehandling/ForhåndsvisHenleggelsesbrev/ForhåndsvisHenleggelsesbrev.tsx

@@ -39,7 +39,7 @@ const ForhåndsvisHenleggelsesBrev: React.FC<IProps> = ({ behandling, skjema, ka
 
     return kanForhåndsvise ? (
         <StyledContainer>
-            <Detail size="small">Informer søker: </Detail>
+            <Detail>Informer søker: </Detail>
             <Link
                 href="#"
                 onMouseDown={e => e.preventDefault()}