Forbedring av oppsummering iht Aksel (#1334)

* Legger til ny oppsummeringskode * Legger til ny OppsummeringsBolk komponent med bruk av FormSummary * Legger til FormSummary.Answer * Legger til og tar i bruk flere FormSummary komponenter * Flytter koden fra OmDegOppsummeringMedFormSummary til OmDegOppsummering * Flytter koden fra OppsummeringbolkFormSummary til oppsummeringbol * Bytter PeriodeOppsummering til å bruke FormSummary * Bytter tilbake til å bruke OppsummeringFelt * Bytter til bruk av FormSummary i OppsummeringFelt * Bytter til bruk av FormSummary i DinLivssituasjonOppsummering * Endrer VelgBarnOppsummering til å ta i bruk FormSummary * Endrer 'Endre svar' lenketekst * Fjerner StyledOppsummeringsFeltGruppe fra OmBarnaOppsummering * Endrer slik at children også (i tillegg til søknadsvar) er del av FormSummary.Value * Fjerner StyledOppsummeringsFeltGruppe fra OmBarnetOppsummering og fikser utseende for 'barn.andreForelder' * Fjerner StyledOppsummeringsFeltGruppe fra EøsSøkerOppsummering * Fjerner StyledOppsummeringsFeltGruppe fra EøsBarnOppsummering * Legger tilbake utkommentert kode for oppsummeringer for steg * Endrer PerioderContainer til å ta i bruk FormSummary og legger til tittel for dette * Legger til VStack på Oppsummering for å skape space mellom steg-oppsummeringer * Stopper wrap på tekst inne i AppLenke i FormSummary.Header * Endrer container-wrapping rundt komponenter rundt IdNummer for at de skal komme ut som OppsummeringFelt og fungerer riktig på oppsummeringssiden * Legger til flettefelt for barnets nav * Fjerner midlertidig komponent * Stopper FormSummary.Value fra å vises dersom den ikke har noe innhold * Fjerner StyledOppsummeringsFeltGruppe * Fjerner OppsummeringFelt som kun inneholder tittel om 'Bosted', uten noe annet innhold * Fjerner unødvendige Fragment'er * Endrer nn for "Endra svar" til "Endre svar" * Legger til FormSummary rundt AndreForelderOppsummering i AndreForelder.tsx * Endrer Heading level på FormSummary i Oppsummeringsbolk * Fjerner unødvendig styling på UtenlandsperiodeOppsummering * Fjerner transormering av tekst til lowercase etter første bokstav i uppercaseFørsteBokstav()
navikt · Aug 26, 2024 · 4641169 · 4641169
1 parent 5c92299
commit 4641169
Show file tree

Hide file tree

Showing 35 changed files with 749 additions and 812 deletions.
diff --git a/src/frontend/assets/lang/nb.json b/src/frontend/assets/lang/nb.json
@@ -687,7 +687,7 @@
   "omdeg.velgårsak.separert": "Jeg er separert",
   "omdeg.velgårsak.skilt": "Jeg er skilt",
   "oppsummering.deltittel.ombarnet": "{nummer}. Om {navn}",
-  "oppsummering.endresvar.lenketekst": "Endre svarene dine",
+  "oppsummering.endresvar.lenketekst": "Endre svar",
   "oppsummering.info": "Les oppsummeringen nøye før du sender inn søknaden. {linjeskift} Hvis du vil gjøre endringer, kan du gå tilbake.",
   "oppsummering.sidetittel": "Oppsummering",
   "pdf.andreforelder.borsammennå": "Vi bor sammen nå",

diff --git a/src/frontend/assets/lang/nn.json b/src/frontend/assets/lang/nn.json
@@ -687,7 +687,7 @@
   "omdeg.velgårsak.separert": "Eg er separert",
   "omdeg.velgårsak.skilt": "Eg er skilt",
   "oppsummering.deltittel.ombarnet": "{nummer}. Om {navn}",
-  "oppsummering.endresvar.lenketekst": "Endre svara dine",
+  "oppsummering.endresvar.lenketekst": "Endre svar",
   "oppsummering.info": "Les oppsummeringa nøye før du sender inn søknaden. {linjeskift} Dersom du vil gjere endringar, kan du gå tilbake.",
   "oppsummering.sidetittel": "Oppsummering",
   "pdf.andreforelder.borsammennå": "Vi bur saman no",

diff --git a/src/frontend/components/Felleskomponenter/Arbeidsperiode/Arbeidsperiode.tsx b/src/frontend/components/Felleskomponenter/Arbeidsperiode/Arbeidsperiode.tsx
@@ -16,6 +16,7 @@ import {
     IOmBarnetFeltTyper,
 } from '../../../typer/skjema';
 import { genererPeriodeId } from '../../../utils/perioder';
+import { uppercaseFørsteBokstav } from '../../../utils/visning';
 import JaNeiSpm from '../JaNeiSpm/JaNeiSpm';
 import { LeggTilKnapp } from '../LeggTilKnapp/LeggTilKnapp';
 import PerioderContainer from '../PerioderContainer';
@@ -77,6 +78,13 @@ export const Arbeidsperiode: React.FC<Props> = ({
         tekster().FELLES.modaler.arbeidsperiode[personType];
     const { flerePerioder, leggTilPeriodeForklaring } = teksterForModal;
 
+    const frittståendeOrdTekster = tekster().FELLES.frittståendeOrd;
+    const { arbeidsperioder, utenfor, i, norge } = frittståendeOrdTekster;
+
+    const perioderContainerTittel = uppercaseFørsteBokstav(
+        `${plainTekst(arbeidsperioder)} ${plainTekst(gjelderUtlandet ? utenfor : i)} ${plainTekst(norge)}`
+    );
+
     return (
         <>
             <JaNeiSpm
@@ -92,7 +100,7 @@ export const Arbeidsperiode: React.FC<Props> = ({
                 }}
             />
             {arbeiderEllerArbeidetFelt.verdi === ESvar.JA && (
-                <PerioderContainer>
+                <PerioderContainer tittel={perioderContainerTittel}>
                     {registrerteArbeidsperioder.verdi.map((periode, index) => (
                         <ArbeidsperiodeOppsummering
                             key={`arbeidsperiode-${index}`}
@@ -121,7 +129,10 @@ export const Arbeidsperiode: React.FC<Props> = ({
                         leggTilFlereTekst={
                             toggles.NYE_MODAL_TEKSTER &&
                             registrerteArbeidsperioder.verdi.length > 0 &&
-                            plainTekst(flerePerioder)
+                            plainTekst(flerePerioder, {
+                                gjelderUtland: gjelderUtlandet,
+                                ...(barnetsNavn && { barnetsNavn: barnetsNavn }),
+                            })
                         }
                         id={genererPeriodeId({
                             personType,

diff --git a/src/frontend/components/Felleskomponenter/Barnetrygdperiode/Barnetrygdperiode.tsx b/src/frontend/components/Felleskomponenter/Barnetrygdperiode/Barnetrygdperiode.tsx
@@ -13,6 +13,7 @@ import { PeriodePersonTypeProps, PersonType } from '../../../typer/personType';
 import { IBarnetrygdsperiodeTekstinnhold } from '../../../typer/sanity/modaler/barnetrygdperiode';
 import { IEøsForBarnFeltTyper, IOmBarnetFeltTyper } from '../../../typer/skjema';
 import { genererPeriodeId } from '../../../utils/perioder';
+import { uppercaseFørsteBokstav } from '../../../utils/visning';
 import JaNeiSpm from '../JaNeiSpm/JaNeiSpm';
 import { LeggTilKnapp } from '../LeggTilKnapp/LeggTilKnapp';
 import PerioderContainer from '../PerioderContainer';
@@ -62,6 +63,8 @@ export const Barnetrygdperiode: React.FC<BarnetrygdperiodeProps> = ({
         tekster().FELLES.modaler.barnetrygdsperiode[personType];
     const { flerePerioder, leggTilPeriodeForklaring } = teksterForModal;
 
+    const frittståendeOrdTekster = tekster().FELLES.frittståendeOrd;
+
     return (
         <>
             <JaNeiSpm
@@ -76,7 +79,11 @@ export const Barnetrygdperiode: React.FC<BarnetrygdperiodeProps> = ({
                 }}
             />
             {tilhørendeJaNeiSpmFelt.verdi === ESvar.JA && (
-                <PerioderContainer>
+                <PerioderContainer
+                    tittel={uppercaseFørsteBokstav(
+                        plainTekst(frittståendeOrdTekster.barnetrygdperioder)
+                    )}
+                >
                     {registrerteEøsBarnetrygdsperioder.verdi.map((periode, index) => (
                         <BarnetrygdsperiodeOppsummering
                             key={`eøs-barnetrygdsperiode-${index}`}

diff --git a/src/frontend/components/Felleskomponenter/Pensjonsmodal/Pensjonsperiode.tsx b/src/frontend/components/Felleskomponenter/Pensjonsmodal/Pensjonsperiode.tsx
@@ -16,6 +16,7 @@ import {
     IOmBarnetFeltTyper,
 } from '../../../typer/skjema';
 import { genererPeriodeId } from '../../../utils/perioder';
+import { uppercaseFørsteBokstav } from '../../../utils/visning';
 import JaNeiSpm from '../JaNeiSpm/JaNeiSpm';
 import { LeggTilKnapp } from '../LeggTilKnapp/LeggTilKnapp';
 import PerioderContainer from '../PerioderContainer';
@@ -77,6 +78,13 @@ export const Pensjonsperiode: React.FC<Props> = ({
         tekster().FELLES.modaler.pensjonsperiode[personType];
     const { flerePerioder, leggTilPeriodeForklaring } = teksterForModal;
 
+    const frittståendeOrdTekster = tekster().FELLES.frittståendeOrd;
+    const { pensjonsperioder, fra, utlandet, norge } = frittståendeOrdTekster;
+
+    const perioderContainerTittel = uppercaseFørsteBokstav(
+        `${plainTekst(pensjonsperioder)} ${plainTekst(fra)} ${plainTekst(gjelderUtlandet ? utlandet : norge)}`
+    );
+
     return (
         <>
             <JaNeiSpm
@@ -96,7 +104,7 @@ export const Pensjonsperiode: React.FC<Props> = ({
                 }}
             />
             {mottarEllerMottattPensjonFelt.verdi === ESvar.JA && (
-                <PerioderContainer>
+                <PerioderContainer tittel={perioderContainerTittel}>
                     {registrertePensjonsperioder.verdi.map((pensjonsperiode, index) => (
                         <PensjonsperiodeOppsummering
                             key={`pensjonsperiode-${index}`}
@@ -125,7 +133,10 @@ export const Pensjonsperiode: React.FC<Props> = ({
                         leggTilFlereTekst={
                             toggles.NYE_MODAL_TEKSTER &&
                             registrertePensjonsperioder.verdi.length > 0 &&
-                            plainTekst(flerePerioder)
+                            plainTekst(flerePerioder, {
+                                gjelderUtland: gjelderUtlandet,
+                                barnetsNavn: barn?.navn,
+                            })
                         }
                         id={genererPeriodeId({
                             personType,

diff --git a/src/frontend/components/Felleskomponenter/PeriodeOppsummering/PeriodeOppsummering.tsx b/src/frontend/components/Felleskomponenter/PeriodeOppsummering/PeriodeOppsummering.tsx
@@ -1,31 +1,11 @@
 import React, { ReactNode } from 'react';
 
-import styled from 'styled-components';
-
 import { TrashFillIcon } from '@navikt/aksel-icons';
-import { Button, Heading } from '@navikt/ds-react';
-import { ABorderDefault } from '@navikt/ds-tokens/dist/tokens';
+import { Button, FormSummary } from '@navikt/ds-react';
 
 import { HeadingLevel } from '../../../typer/common';
 import SpråkTekst from '../SpråkTekst/SpråkTekst';
 
-const PeriodeContainer = styled.div<{ $bottomBorder: boolean }>`
-    margin-bottom: 2rem;
-    border-bottom: ${props => (props.$bottomBorder ? `1px solid ${ABorderDefault}` : 'none')};
-`;
-
-const StyledButton = styled(Button)`
-    && {
-        margin-bottom: 1.5rem;
-    }
-`;
-
-const StyledHeading = styled(Heading)`
-    && {
-        margin-bottom: 1.125rem;
-    }
-`;
-
 const PeriodeOppsummering: React.FC<{
     nummer: number;
     fjernPeriodeCallback?: () => void;
@@ -41,28 +21,29 @@ const PeriodeOppsummering: React.FC<{
     tittelSpråkId,
     vedleggNotis,
     children,
-    headingLevel = '3',
 }) => {
-    const skalHaBottomBorder = !!fjernPeriodeCallback;
-
     return (
-        <PeriodeContainer $bottomBorder={skalHaBottomBorder}>
-            <StyledHeading level={headingLevel} size={'small'}>
+        <FormSummary.Answer>
+            <FormSummary.Label>
                 <SpråkTekst id={tittelSpråkId} values={{ x: nummer }} />
-            </StyledHeading>
-            {children}
-            {fjernPeriodeCallback !== undefined && (
-                <StyledButton
-                    type={'button'}
-                    variant={'tertiary'}
-                    onClick={() => fjernPeriodeCallback()}
-                    icon={<TrashFillIcon aria-hidden />}
-                >
-                    <SpråkTekst id={fjernKnappSpråkId} />
-                </StyledButton>
-            )}
+            </FormSummary.Label>
+            <FormSummary.Value>
+                <FormSummary.Answers>
+                    {children}
+                    {fjernPeriodeCallback !== undefined && (
+                        <Button
+                            type={'button'}
+                            variant={'tertiary'}
+                            onClick={() => fjernPeriodeCallback()}
+                            icon={<TrashFillIcon aria-hidden />}
+                        >
+                            <SpråkTekst id={fjernKnappSpråkId} />
+                        </Button>
+                    )}
+                </FormSummary.Answers>
+            </FormSummary.Value>
             {vedleggNotis}
-        </PeriodeContainer>
+        </FormSummary.Answer>
     );
 };
 

diff --git a/src/frontend/components/Felleskomponenter/PerioderContainer.tsx b/src/frontend/components/Felleskomponenter/PerioderContainer.tsx
@@ -1,20 +1,20 @@
 import React, { ReactNode } from 'react';
 
-import styled from 'styled-components';
+import { Box, FormSummary } from '@navikt/ds-react';
 
-import { Box } from '@navikt/ds-react';
+interface IPerioderContainer {
+    tittel: ReactNode;
+    children?: ReactNode;
+}
 
-const StyledBox = styled(Box)`
-    && {
-        margin-top: var(--a-spacing-2);
-    }
-`;
-
-const PerioderContainer: React.FC<{ children?: ReactNode }> = ({ children }) => {
+const PerioderContainer: React.FC<IPerioderContainer> = ({ tittel, children }) => {
     return (
-        <StyledBox padding="4" background="surface-subtle" borderRadius="medium">
-            {children}
-        </StyledBox>
+        <Box marginBlock="4 0">
+            <FormSummary>
+                <FormSummary.Header>{tittel}</FormSummary.Header>
+                <FormSummary.Answers>{children}</FormSummary.Answers>
+            </FormSummary>
+        </Box>
     );
 };
 

diff --git a/src/frontend/components/Felleskomponenter/UtbetalingerModal/Utbetalingsperiode.tsx b/src/frontend/components/Felleskomponenter/UtbetalingerModal/Utbetalingsperiode.tsx
@@ -11,6 +11,7 @@ import { PeriodePersonTypeMedBarnProps, PersonType } from '../../../typer/person
 import { IAndreUtbetalingerTekstinnhold } from '../../../typer/sanity/modaler/andreUtbetalinger';
 import { IEøsForBarnFeltTyper, IEøsForSøkerFeltTyper } from '../../../typer/skjema';
 import { genererPeriodeId } from '../../../utils/perioder';
+import { uppercaseFørsteBokstav } from '../../../utils/visning';
 import JaNeiSpm from '../JaNeiSpm/JaNeiSpm';
 import { LeggTilKnapp } from '../LeggTilKnapp/LeggTilKnapp';
 import PerioderContainer from '../PerioderContainer';
@@ -60,6 +61,8 @@ export const Utbetalingsperiode: React.FC<Props> = ({
         tekster().FELLES.modaler.andreUtbetalinger[personType];
     const { flerePerioder, leggTilPeriodeForklaring } = teksterForModal;
 
+    const frittståendeOrdTekster = tekster().FELLES.frittståendeOrd;
+
     return (
         <>
             <JaNeiSpm
@@ -75,7 +78,11 @@ export const Utbetalingsperiode: React.FC<Props> = ({
                 }}
             />
             {tilhørendeJaNeiSpmFelt.verdi === ESvar.JA && (
-                <PerioderContainer>
+                <PerioderContainer
+                    tittel={uppercaseFørsteBokstav(
+                        plainTekst(frittståendeOrdTekster.utbetalingsperioder)
+                    )}
+                >
                     {registrerteUtbetalingsperioder.verdi.map((utbetalingsperiode, index) => (
                         <UtbetalingsperiodeOppsummering
                             key={`utbetalingsperiode-${index}`}
@@ -104,7 +111,9 @@ export const Utbetalingsperiode: React.FC<Props> = ({
                         leggTilFlereTekst={
                             toggles.NYE_MODAL_TEKSTER &&
                             registrerteUtbetalingsperioder.verdi.length > 0 &&
-                            plainTekst(flerePerioder)
+                            plainTekst(flerePerioder, {
+                                ...(barnetsNavn && { barnetsNavn: barnetsNavn }),
+                            })
                         }
                         id={genererPeriodeId({
                             personType: personType,

diff --git a/...ntend/components/Felleskomponenter/UtenlandsoppholdModal/UtenlandsperiodeOppsummering.tsx b/...ntend/components/Felleskomponenter/UtenlandsoppholdModal/UtenlandsperiodeOppsummering.tsx
@@ -37,66 +37,64 @@ export const UtenlandsperiodeOppsummering: React.FC<{
     const årsak = utenlandsoppholdÅrsak.svar;
 
     return (
-        <>
-            <PeriodeOppsummering
-                nummer={nummer}
-                tittelSpråkId={'felles.leggtilutenlands.opphold'}
-                fjernKnappSpråkId={'felles.fjernutenlandsopphold.knapp'}
-                fjernPeriodeCallback={fjernPeriodeCallback && (() => fjernPeriodeCallback(periode))}
+        <PeriodeOppsummering
+            nummer={nummer}
+            tittelSpråkId={'felles.leggtilutenlands.opphold'}
+            fjernKnappSpråkId={'felles.fjernutenlandsopphold.knapp'}
+            fjernPeriodeCallback={fjernPeriodeCallback && (() => fjernPeriodeCallback(periode))}
+        >
+            <OppsummeringFelt
+                tittel={
+                    <SpråkTekst
+                        id={årsakLabelSpråkId(barn)}
+                        values={{ barn: barn ? barn.navn : undefined }}
+                    />
+                }
             >
+                <BodyShort>
+                    <SpråkTekst
+                        id={årsakSpråkId(årsak, barn)}
+                        values={{ barn: barn ? barn.navn : undefined }}
+                    />
+                </BodyShort>
+            </OppsummeringFelt>
+
+            <OppsummeringFelt
+                tittel={
+                    <SpråkTekst
+                        id={landLabelSpråkId(årsak, barn)}
+                        values={{ barn: barn ? barn.navn : undefined }}
+                    />
+                }
+                søknadsvar={landkodeTilSpråk(oppholdsland.svar, valgtLocale)}
+            />
+
+            {oppholdslandFraDato && (
                 <OppsummeringFelt
                     tittel={
                         <SpråkTekst
-                            id={årsakLabelSpråkId(barn)}
+                            id={fraDatoLabelSpråkId(årsak, barn)}
                             values={{ barn: barn ? barn.navn : undefined }}
                         />
                     }
-                >
-                    <BodyShort>
-                        <SpråkTekst
-                            id={årsakSpråkId(årsak, barn)}
-                            values={{ barn: barn ? barn.navn : undefined }}
-                        />
-                    </BodyShort>
-                </OppsummeringFelt>
+                    søknadsvar={formaterDato(oppholdslandFraDato.svar)}
+                />
+            )}
 
+            {oppholdslandTilDato && (
                 <OppsummeringFelt
                     tittel={
                         <SpråkTekst
-                            id={landLabelSpråkId(årsak, barn)}
+                            id={tilDatoLabelSpråkId(årsak, barn)}
                             values={{ barn: barn ? barn.navn : undefined }}
                         />
                     }
-                    søknadsvar={landkodeTilSpråk(oppholdsland.svar, valgtLocale)}
+                    søknadsvar={formaterDatoMedUkjent(
+                        oppholdslandTilDato.svar,
+                        formatMessage({ id: tilDatoUkjentLabelSpråkId })
+                    )}
                 />
-
-                {oppholdslandFraDato && (
-                    <OppsummeringFelt
-                        tittel={
-                            <SpråkTekst
-                                id={fraDatoLabelSpråkId(årsak, barn)}
-                                values={{ barn: barn ? barn.navn : undefined }}
-                            />
-                        }
-                        søknadsvar={formaterDato(oppholdslandFraDato.svar)}
-                    />
-                )}
-
-                {oppholdslandTilDato && (
-                    <OppsummeringFelt
-                        tittel={
-                            <SpråkTekst
-                                id={tilDatoLabelSpråkId(årsak, barn)}
-                                values={{ barn: barn ? barn.navn : undefined }}
-                            />
-                        }
-                        søknadsvar={formaterDatoMedUkjent(
-                            oppholdslandTilDato.svar,
-                            formatMessage({ id: tilDatoUkjentLabelSpråkId })
-                        )}
-                    />
-                )}
-            </PeriodeOppsummering>
-        </>
+            )}
+        </PeriodeOppsummering>
     );
 };