Skip to content

Commit

Permalink
Chore: bytt ut nav-frontend-grid for Verge, Fakta og Foreldelse-steg (#…
Browse files Browse the repository at this point in the history 
…1644)

* fjern bruk av row + columns for verge-steg

* fjern bruk av row + columns for fakta-revurdering

* fjern bruk av row + columns for fakta-skjema

* fjern bruk av row + columns for containeren til foreldelse-steg

* bytt til primitiver fra aksel for periodeoppsummeringen på foreldelse-steget

* bytt til primitiver fra aksel for skjema for foreldelse

* fjern unødvendig bruk av grid på foreldelse-steget

* bytt fra hstack til hgrid for å forbedre responsivt design

* juster stack fra row til column hvis skjermen er liten

* legg kolonner under hverandre hvis skjermen er liten

* fiks styling så frem og tilbakeknapper ligger lenger opp i koden

* fiks gap mellom kolonner

* bruk gap på primitiver i stedet for Spacer-komponent

* bruk gap på primitiver i stedet for Spacer-komponent for Faktaskjema

* bruk gap på primitiver i stedet for Spacer-komponent for FeilutbetalingForeldelsePerioder.tsx

* bruk gap på primitiver i stedet for Spacer-komponent for Vergecontainer

* align start for at inputfelter skal være på linje selv ved feilmelding

* fiks padding rundt innholdet til alle stegene

de resterende stegene har allerede satt padding til 3

* fjern unødvendig prop på checkbox, vet allerede at den aldri vil være true

* skru på error ved feil import order

* reverter import/order satt til error og ikke off
  • Loading branch information
@idaame
idaame authored Feb 23, 2024
1 parent 2118fca commit b5645cb
Show file tree
Hide file tree
Showing 8 changed files with 385 additions and 507 deletions.
100 changes: 43 additions & 57 deletions src/frontend/komponenter/Fagsak/Fakta/FaktaRevurdering.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,66 @@
import * as React from 'react';

import { styled } from 'styled-components';

import { Column, Row } from 'nav-frontend-grid';

import { BodyShort, Heading } from '@navikt/ds-react';
import { ASpacing4 } from '@navikt/ds-tokens/dist/tokens';
import { BodyShort, Heading, HGrid, VStack } from '@navikt/ds-react';

import { IFeilutbetalingFakta, tilbakekrevingsvalg } from '../../../typer/feilutbetalingtyper';
import { formatterDatostring } from '../../../utils';
import { DetailBold, Spacer20 } from '../../Felleskomponenter/Flytelementer';

export const RadMedMargin = styled(Row)`
margin-bottom: ${ASpacing4};
`;
import { DetailBold } from '../../Felleskomponenter/Flytelementer';

interface IProps {
feilutbetalingFakta: IFeilutbetalingFakta;
}

const FaktaRevurdering: React.FC<IProps> = ({ feilutbetalingFakta }) => {
return feilutbetalingFakta ? (
<>
<Row>
<Column xs="12">
<Heading level="2" size="small">
Revurdering
</Heading>
</Column>
</Row>
<Spacer20 />
<RadMedMargin>
<Column xs="6">
<DetailBold>Årsak(er) til revurdering</DetailBold>
{feilutbetalingFakta.faktainfo?.revurderingsårsak && (
<BodyShort size="small">
{feilutbetalingFakta.faktainfo.revurderingsårsak}
</BodyShort>
)}
</Column>
<Column xs="6">
<DetailBold>Dato for revurderingsvedtak</DetailBold>
<BodyShort size="small">
{formatterDatostring(feilutbetalingFakta.revurderingsvedtaksdato)}
</BodyShort>
</Column>
</RadMedMargin>
<RadMedMargin>
<Column xs="6">
<DetailBold>Resultat</DetailBold>
{feilutbetalingFakta.faktainfo?.revurderingsresultat && (
<VStack gap="5">
<Heading level="2" size="small">
Revurdering
</Heading>
<VStack gap="4">
<HGrid columns={2}>
<div>
<DetailBold>Årsak(er) til revurdering</DetailBold>
{feilutbetalingFakta.faktainfo?.revurderingsårsak && (
<BodyShort size="small">
{feilutbetalingFakta.faktainfo.revurderingsårsak}
</BodyShort>
)}
</div>
<div>
<DetailBold>Dato for revurderingsvedtak</DetailBold>
<BodyShort size="small">
{feilutbetalingFakta.faktainfo.revurderingsresultat}
{formatterDatostring(feilutbetalingFakta.revurderingsvedtaksdato)}
</BodyShort>
)}
</Column>
<Column xs="6">
<DetailBold>Konsekvens</DetailBold>
{feilutbetalingFakta.faktainfo?.konsekvensForYtelser && (
<BodyShort size="small">
{feilutbetalingFakta.faktainfo.konsekvensForYtelser?.join(', ')}
</BodyShort>
)}
</Column>
</RadMedMargin>
<Row>
<Column xs="6">
</div>
</HGrid>
<HGrid columns={2}>
<div>
<DetailBold>Resultat</DetailBold>
{feilutbetalingFakta.faktainfo?.revurderingsresultat && (
<BodyShort size="small">
{feilutbetalingFakta.faktainfo.revurderingsresultat}
</BodyShort>
)}
</div>
<div>
<DetailBold>Konsekvens</DetailBold>
{feilutbetalingFakta.faktainfo?.konsekvensForYtelser && (
<BodyShort size="small">
{feilutbetalingFakta.faktainfo.konsekvensForYtelser?.join(', ')}
</BodyShort>
)}
</div>
</HGrid>
<div>
<DetailBold>Tilbakekrevingsvalg</DetailBold>
{feilutbetalingFakta.faktainfo?.tilbakekrevingsvalg && (
<BodyShort size="small">
{tilbakekrevingsvalg[feilutbetalingFakta.faktainfo.tilbakekrevingsvalg]}
</BodyShort>
)}
</Column>
</Row>
</>
</div>
</VStack>
</VStack>
) : null;
};

Expand Down
208 changes: 82 additions & 126 deletions src/frontend/komponenter/Fagsak/Fakta/FaktaSkjema.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,11 @@
import * as React from 'react';

import { Column, Row } from 'nav-frontend-grid';

import { BodyShort, Checkbox, Heading, Textarea } from '@navikt/ds-react';
import { BodyShort, Checkbox, Heading, HGrid, Textarea, VStack } from '@navikt/ds-react';

import { Ytelsetype } from '../../../kodeverk';
import { IFeilutbetalingFakta } from '../../../typer/feilutbetalingtyper';
import { formatterDatostring, formatCurrencyNoKr } from '../../../utils';
import {
DetailBold,
FTButton,
Navigering,
Spacer20,
Spacer8,
} from '../../Felleskomponenter/Flytelementer';
import { DetailBold, FTButton, Navigering } from '../../Felleskomponenter/Flytelementer';
import FeilutbetalingFaktaPerioder from './FaktaPeriode/FeilutbetalingFaktaPerioder';
import FaktaRevurdering from './FaktaRevurdering';
import { useFeilutbetalingFakta } from './FeilutbetalingFaktaContext';
Expand Down Expand Up @@ -51,124 +43,88 @@ const FaktaSkjema: React.FC<IProps> = ({
};

return (
<>
<Row>
<Column sm="12" md="6">
<Row>
<Column xs="12">
<Heading level="2" size="small">
Feilutbetaling
</Heading>
</Column>
</Row>
<Spacer20 />
<Row>
<Column xs="12" md="4">
<DetailBold>Periode med feilutbetaling</DetailBold>
<BodyShort size="small">
{`${formatterDatostring(
feilutbetalingFakta.totalFeilutbetaltPeriode.fom
)} - ${formatterDatostring(
feilutbetalingFakta.totalFeilutbetaltPeriode.tom
)}`}
</BodyShort>
</Column>
<Column xs="12" md="4">
<DetailBold>Feilutbetalt beløp totalt</DetailBold>
<BodyShort size="small" className={'redText'}>
{`${formatCurrencyNoKr(
feilutbetalingFakta.totaltFeilutbetaltBeløp
)}`}
</BodyShort>
</Column>
<Column xs="12" md="4">
<DetailBold>Tidligere varslet beløp</DetailBold>
<BodyShort size="small">
{feilutbetalingFakta.varsletBeløp
? `${formatCurrencyNoKr(feilutbetalingFakta.varsletBeløp)}`
: ''}
</BodyShort>
</Column>
</Row>
<Spacer20 />
<HGrid columns={2} gap="10">
<VStack gap="5">
<Heading level="2" size="small">
Feilutbetaling
</Heading>
<HGrid columns={3} gap="1">
<div>
<DetailBold>Periode med feilutbetaling</DetailBold>
<BodyShort size="small">
{`${formatterDatostring(
feilutbetalingFakta.totalFeilutbetaltPeriode.fom
)} - ${formatterDatostring(
feilutbetalingFakta.totalFeilutbetaltPeriode.tom
)}`}
</BodyShort>
</div>
<div>
<DetailBold>Feilutbetalt beløp totalt</DetailBold>
<BodyShort size="small" className={'redText'}>
{`${formatCurrencyNoKr(feilutbetalingFakta.totaltFeilutbetaltBeløp)}`}
</BodyShort>
</div>
<div>
<DetailBold>Tidligere varslet beløp</DetailBold>
<BodyShort size="small">
{feilutbetalingFakta.varsletBeløp
? `${formatCurrencyNoKr(feilutbetalingFakta.varsletBeløp)}`
: ''}
</BodyShort>
</div>
</HGrid>
<VStack gap="2">
{!erLesevisning && (
<>
<Row>
<Column xs="11">
<Checkbox
size="small"
disabled={erLesevisning}
checked={behandlePerioderSamlet === true}
onChange={() =>
settBehandlePerioderSamlet(!behandlePerioderSamlet)
}
>
Behandle alle perioder samlet
</Checkbox>
</Column>
</Row>
<Spacer8 />
</>
<Checkbox
size="small"
checked={behandlePerioderSamlet === true}
onChange={() => settBehandlePerioderSamlet(!behandlePerioderSamlet)}
>
Behandle alle perioder samlet
</Checkbox>
)}
{skjemaData.perioder && (
<FeilutbetalingFaktaPerioder
ytelse={ytelse}
erLesevisning={erLesevisning}
perioder={skjemaData.perioder}
/>
)}
<Row>
<Column xs="11">
{skjemaData.perioder && (
<FeilutbetalingFaktaPerioder
ytelse={ytelse}
erLesevisning={erLesevisning}
perioder={skjemaData.perioder}
/>
)}
</Column>
</Row>
</Column>
<Column sm="12" md="6">
<FaktaRevurdering feilutbetalingFakta={feilutbetalingFakta} />
</Column>
</Row>
<Spacer20 />
<Row>
<Column sm="12" md="6">
<Textarea
name={'begrunnelse'}
label={'Forklar årsaken(e) til feilutbetalingen'}
readOnly={erLesevisning}
value={skjemaData.begrunnelse ? skjemaData.begrunnelse : ''}
onChange={event => onChangeBegrunnelse(event)}
maxLength={3000}
className={erLesevisning ? 'lesevisning' : ''}
error={
visFeilmeldinger &&
feilmeldinger?.find(meld => meld.gjelderBegrunnelse)?.melding
}
/>
</Column>
</Row>
<Spacer20 />
<Row>
<Column xs="12" md="6">
<Navigering>
<div>
<FTButton
variant="primary"
onClick={sendInnSkjema}
loading={senderInn}
disabled={erLesevisning && !stegErBehandlet}
>
{stegErBehandlet ? 'Neste' : 'Bekreft og fortsett'}
</FTButton>
</div>
{behandling.harVerge && (
<div>
<FTButton variant="secondary" onClick={gåTilForrige}>
Forrige
</FTButton>
</div>
)}
</Navigering>
</Column>
</Row>
</>
</VStack>
<Textarea
name={'begrunnelse'}
label={'Forklar årsaken(e) til feilutbetalingen'}
readOnly={erLesevisning}
value={skjemaData.begrunnelse ? skjemaData.begrunnelse : ''}
onChange={event => onChangeBegrunnelse(event)}
maxLength={3000}
className={erLesevisning ? 'lesevisning' : ''}
error={
visFeilmeldinger &&
feilmeldinger?.find(meld => meld.gjelderBegrunnelse)?.melding
}
/>

<Navigering>
<FTButton
variant="primary"
onClick={sendInnSkjema}
loading={senderInn}
disabled={erLesevisning && !stegErBehandlet}
>
{stegErBehandlet ? 'Neste' : 'Bekreft og fortsett'}
</FTButton>
{behandling.harVerge && (
<FTButton variant="secondary" onClick={gåTilForrige}>
Forrige
</FTButton>
)}
</Navigering>
</VStack>

<FaktaRevurdering feilutbetalingFakta={feilutbetalingFakta} />
</HGrid>
);
};

Expand Down
Loading

0 comments on commit b5645cb

Please sign in to comment.