Forbedrer forsiden iht mal fra Aksel (#1305)

* Endrer innhold på forside * Legger til tekster for 'Før du søker' * Fjerner tom string * Legger til 'Før du søker' tekst og endrer engelsk tekst for bekreftelsesboks * Endret testdata til å passe med nye tekster * Fjerner as=main fra VStack * Legger til informasjon om lagring av svar underveis * Endrer TekstBlock til å bruke typografi for å unngå nesting error fra div inne i p * Fjerner lenke ettersom informasjonen ligger på forsiden * Bytter sanityDataset til ba-test for at nye Sanity tekster og kode kan gå ut i prod samtidig * Legger til bekreftelsesboks teskter fra Sanity * Endrer størrelse på Før du søker heading * Endrer tekster på oppsummeringsside * Legger til prop for å stoppe bruk av TypografiWrapper rundt children * Fjerner test som ikke fungerer med Sanity tekster
navikt · Jul 31, 2024 · 3756c61 · 3756c61
1 parent 8b2a5fe
commit 3756c61
Show file tree

Hide file tree

Showing 17 changed files with 188 additions and 197 deletions.
diff --git a/src/frontend/assets/lang/en.json b/src/frontend/assets/lang/en.json
@@ -288,8 +288,10 @@
   "felles.år": "{alder} years",
   "forside.behandling-av-personopplysning.lenke": "https://www.nav.no/no/nav-og-samfunn/om-nav/personvern-i-arbeids-og-velferdsetaten/personvernerklaering-for-arbeids-og-velferdsetaten",
   "forside.behandling-av-personopplysning.lenketekst": "Read about how NAV processes your personal data (opens in a new window)",
-  "forside.bekreftelsesboks.brødtekst": "I am aware that I may lose my right to child benefit if I provide incorrect information. I am also aware that I will have to pay back any money I receive that I am not entitled to, that I have received if I have failed to provide information or have provided incorrect information.",
-  "forside.bekreftelsesboks.erklæring.spm": "I hereby confirm that I have read and understood.",
+  "forside.bekreftelsesboks.brødtekst": "I am aware that I may lose my right to Child Benefit if I provide incorrect information. I am also aware that I will have to pay back any money I receive that I am not entitled to, that I have received if I have failed to provide information or have provided incorrect information.",
+  "forside.bekreftelsesboks.lenke": "https://www.nav.no/endringer/en",
+  "forside.bekreftelsesboks.lenketekst": "Read more about the importance of providing correct information.",
+  "forside.bekreftelsesboks.erklæring.spm": "I confirm that I will provide correct and complete information.",
   "forside.bekreftelsesboks.feilmelding": "You must confirm that you have read and understood before you can start the application",
   "forside.bekreftelsesboks.tittel": "We trust you",
   "forside.hvemharrettpåutvidet.lenke": "https://www.nav.no/en/home/benefits-and-services/relatert-informasjon/child-benefit#chapter-2",

diff --git a/src/frontend/assets/lang/nb.json b/src/frontend/assets/lang/nb.json
@@ -288,8 +288,10 @@
   "felles.år": "{alder} år",
   "forside.behandling-av-personopplysning.lenke": "https://www.nav.no/no/nav-og-samfunn/om-nav/personvern-i-arbeids-og-velferdsetaten/personvernerklaering-for-arbeids-og-velferdsetaten",
   "forside.behandling-av-personopplysning.lenketekst": "Les om hvordan NAV behandler personopplysningene dine (åpnes i nytt vindu)",
-  "forside.bekreftelsesboks.brødtekst": "Jeg er klar over at jeg kan miste retten til barnetrygd dersom jeg gir feil opplysninger. Jeg er også klar over at jeg må betale tilbake dersom jeg får penger jeg ikke har rett til hvis jeg lar være å informere eller gir feil opplysninger.",
-  "forside.bekreftelsesboks.erklæring.spm": "Jeg bekrefter at jeg har lest og forstått.",
+  "forside.bekreftelsesboks.brødtekst": "Det er viktig at du gir oss riktige opplysninger slik at vi kan behandle saken din.",
+  "forside.bekreftelsesboks.lenke": "https://www.nav.no/endringer",
+  "forside.bekreftelsesboks.lenketekst": "Les mer om viktigheten av å gi riktige opplysninger.",
+  "forside.bekreftelsesboks.erklæring.spm": "Jeg vil svare så godt jeg kan på spørsmålene i søknaden.",
   "forside.bekreftelsesboks.feilmelding": "Du må bekrefte at du har lest og forstått før du kan starte søknaden",
   "forside.bekreftelsesboks.tittel": "Vi stoler på deg",
   "forside.hvemharrettpåutvidet.lenke": "https://www.nav.no/no/person/familie/barnetrygd-og-kontantstotte/barnetrygd#chapter-2",

diff --git a/src/frontend/assets/lang/nn.json b/src/frontend/assets/lang/nn.json
@@ -288,8 +288,10 @@
   "felles.år": "{alder} år",
   "forside.behandling-av-personopplysning.lenke": "https://www.nav.no/no/nav-og-samfunn/om-nav/personvern-i-arbeids-og-velferdsetaten/personvernerklaering-for-arbeids-og-velferdsetaten",
   "forside.behandling-av-personopplysning.lenketekst": "Les om korleis NAV handsamar personopplysningane dine (åpnes i nytt vindauge)",
-  "forside.bekreftelsesboks.brødtekst": "Eg er klar over at eg kan miste retten til barnetrygd dersom eg gjev feil opplysningar. Eg er også klar over at eg må betale tilbake dersom eg får pengar eg ikkje har rett til hvis eg har latt vere å informere eller har gjeve feil opplysningar.",
-  "forside.bekreftelsesboks.erklæring.spm": "Eg stadfestar at eg har lese og forstått",
+  "forside.bekreftelsesboks.brødtekst": "Det er viktig at du gir oss riktige opplysningar slik at me kan behandla saka di.",
+  "forside.bekreftelsesboks.lenke": "https://www.nav.no/endringer/nn",
+  "forside.bekreftelsesboks.lenketekst": "Les meir om viktigheita av å gi riktige opplysningar.",
+  "forside.bekreftelsesboks.erklæring.spm": "Eg svara så godt eg kan på spørsmåla i søknaden.",
   "forside.bekreftelsesboks.feilmelding": "Du må stadfeste at du har lese og forstått før du kan starte søknaden",
   "forside.bekreftelsesboks.tittel": "Vi stolar på deg",
   "forside.hvemharrettpåutvidet.lenke": "https://www.nav.no/no/person/familie/barnetrygd-og-kontantstotte/nynorsk/barnetrygd#chapter-2",

diff --git a/src/frontend/components/Felleskomponenter/Sanity/TekstBlock.tsx b/src/frontend/components/Felleskomponenter/Sanity/TekstBlock.tsx
@@ -72,19 +72,23 @@ const TekstBlock: React.FC<{
     block: LocaleRecordBlock | undefined;
     flettefelter?: FlettefeltVerdier;
     typografi?: Typografi;
-}> = ({ block, flettefelter, typografi }) => {
+    brukTypografiWrapper?: boolean;
+}> = ({ block, flettefelter, typografi, brukTypografiWrapper = true }) => {
     const { valgtLocale } = useSpråk();
     const { flettefeltTilTekst } = useApp();
 
     return block ? (
         <PortableText
             value={block[valgtLocale]}
             components={{
-                block: ({ children }) => (
-                    <TypografiWrapper typografi={typografi} style={{ minHeight: '1rem' }}>
-                        {children}
-                    </TypografiWrapper>
-                ),
+                block: ({ children }) =>
+                    brukTypografiWrapper ? (
+                        <TypografiWrapper typografi={typografi} style={{ minHeight: '1rem' }}>
+                            {children}
+                        </TypografiWrapper>
+                    ) : (
+                        children
+                    ),
                 marks: {
                     flettefelt: props => {
                         if (props?.value?.flettefeltVerdi) {

diff --git a/src/frontend/components/SøknadsSteg/Forside/BekreftelseOgStartSoknad.tsx b/src/frontend/components/SøknadsSteg/Forside/BekreftelseOgStartSoknad.tsx
@@ -1,32 +1,19 @@
 import React from 'react';
 
-import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import {
-    Alert,
-    BodyLong,
-    BodyShort,
-    Button,
-    ConfirmationPanel,
-    Radio,
-    RadioGroup,
-    VStack,
-} from '@navikt/ds-react';
+import { ArrowRightIcon } from '@navikt/aksel-icons';
+import { Button, ConfirmationPanel, Heading, Radio, RadioGroup, VStack } from '@navikt/ds-react';
 import { AGreen500, ANavRed, AOrange500 } from '@navikt/ds-tokens/dist/tokens';
 
 import { useApp } from '../../../context/AppContext';
 import { ESøknadstype } from '../../../typer/kontrakt/generelle';
-import { ESanitySteg } from '../../../typer/sanity/sanity';
+import { ESanitySteg, Typografi } from '../../../typer/sanity/sanity';
+import TekstBlock from '../../Felleskomponenter/Sanity/TekstBlock';
 import SpråkTekst from '../../Felleskomponenter/SpråkTekst/SpråkTekst';
 
 import { BekreftelseStatus, useBekreftelseOgStartSoknad } from './useBekreftelseOgStartSoknad';
 
-const FormContainer = styled.form`
-    display: grid;
-    gap: 3rem;
-`;
-
 const StyledButton = styled(Button)`
     && {
         margin: 0 auto;
@@ -45,7 +32,6 @@ export const bekreftelseBoksBorderFarge = (status: BekreftelseStatus) => {
 };
 
 const BekreftelseOgStartSoknad: React.FC = () => {
-    const { formatMessage } = useIntl();
     const {
         onStartSøknad,
         bekreftelseOnChange,
@@ -61,9 +47,8 @@ const BekreftelseOgStartSoknad: React.FC = () => {
     const fellestekster = tekster[ESanitySteg.FELLES];
 
     return (
-        <FormContainer onSubmit={event => onStartSøknad(event)}>
-            <VStack gap={'6'}>
-                <Alert variant="info">{plainTekst(forsidetekster.utvidetBarnetrygdAlert)}</Alert>
+        <form onSubmit={event => onStartSøknad(event)}>
+            <VStack gap="12">
                 <RadioGroup
                     legend={plainTekst(forsidetekster.soekerDuUtvidet.sporsmal)}
                     onChange={(value: ESøknadstype) => {
@@ -81,36 +66,40 @@ const BekreftelseOgStartSoknad: React.FC = () => {
                         {plainTekst(fellestekster.frittståendeOrd.nei)}
                     </Radio>
                 </RadioGroup>
-            </VStack>
-            <ConfirmationPanel
-                label={formatMessage({ id: 'forside.bekreftelsesboks.erklæring.spm' })}
-                onChange={bekreftelseOnChange}
-                checked={bekreftelseStatus === BekreftelseStatus.BEKREFTET}
-                error={
-                    bekreftelseStatus === BekreftelseStatus.FEIL && (
-                        <span role={'alert'}>
-                            <SpråkTekst id={'forside.bekreftelsesboks.feilmelding'} />
-                        </span>
-                    )
-                }
-            >
-                <BodyShort weight={'semibold'}>
-                    <SpråkTekst id="forside.bekreftelsesboks.tittel" />
-                </BodyShort>
-                <BodyLong>
-                    <SpråkTekst id="forside.bekreftelsesboks.brødtekst" />
-                </BodyLong>
-            </ConfirmationPanel>
 
-            <StyledButton
-                variant={
-                    bekreftelseStatus === BekreftelseStatus.BEKREFTET ? 'primary' : 'secondary'
-                }
-                type={'submit'}
-            >
-                <SpråkTekst id="forside.start-soknad.knapp" />
-            </StyledButton>
-        </FormContainer>
+                <ConfirmationPanel
+                    label={plainTekst(forsidetekster.bekreftelsesboksErklaering)}
+                    onChange={bekreftelseOnChange}
+                    checked={bekreftelseStatus === BekreftelseStatus.BEKREFTET}
+                    error={
+                        bekreftelseStatus === BekreftelseStatus.FEIL && (
+                            <span role={'alert'}>
+                                {plainTekst(forsidetekster.bekreftelsesboksFeilmelding)}
+                            </span>
+                        )
+                    }
+                >
+                    <Heading level="2" size="xsmall" spacing>
+                        {plainTekst(forsidetekster.bekreftelsesboksTittel)}
+                    </Heading>
+                    <TekstBlock
+                        block={forsidetekster.bekreftelsesboksBroedtekst}
+                        typografi={Typografi.BodyLong}
+                    />
+                </ConfirmationPanel>
+
+                <StyledButton
+                    variant={
+                        bekreftelseStatus === BekreftelseStatus.BEKREFTET ? 'primary' : 'secondary'
+                    }
+                    type={'submit'}
+                    icon={<ArrowRightIcon aria-hidden />}
+                    iconPosition="right"
+                >
+                    <SpråkTekst id="forside.start-soknad.knapp" />
+                </StyledButton>
+            </VStack>
+        </form>
     );
 };
 

diff --git a/src/frontend/components/SøknadsSteg/Forside/Forside.tsx b/src/frontend/components/SøknadsSteg/Forside/Forside.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 
 import styled from 'styled-components';
 
-import { Accordion, GuidePanel, Heading } from '@navikt/ds-react';
+import { Accordion, GuidePanel, Heading, VStack } from '@navikt/ds-react';
 import { setAvailableLanguages } from '@navikt/nav-dekoratoren-moduler';
 
 import Miljø from '../../../../shared-utils/Miljø';
@@ -17,14 +17,8 @@ import TekstBlock from '../../Felleskomponenter/Sanity/TekstBlock';
 import BekreftelseOgStartSoknad from './BekreftelseOgStartSoknad';
 import FortsettPåSøknad from './FortsettPåSøknad';
 
-const StyledAccordion = styled(Accordion)`
-    width: 100%;
-`;
-
 const Layout = styled.div`
     max-width: var(--innhold-bredde);
-    display: grid;
-    gap: 3rem;
     margin: 2rem auto 4rem auto;
 
     @media all and ${device.tablet} {
@@ -58,32 +52,57 @@ const Forside: React.FC = () => {
 
     return (
         <Layout>
-            <Heading size="xlarge" align={'center'}>
-                {plainTekst(forsidetekster.soeknadstittelBarnetrygd)}
-            </Heading>
-            <GuidePanel poster>
-                <TekstBlock block={forsidetekster.veilederHei} typografi={Typografi.HeadingH2} />
-                <TekstBlock block={forsidetekster.veilederIntro} />
-            </GuidePanel>
-            <StyledAccordion size={'large'}>
-                <Accordion.Item>
-                    <Accordion.Header>
-                        {plainTekst(forsidetekster.informasjonOmPlikterTittel)}
-                    </Accordion.Header>
-                    <Accordion.Content>
-                        <TekstBlock block={forsidetekster.informasjonOmPlikter} />
-                    </Accordion.Content>
-                </Accordion.Item>
-                <Accordion.Item>
-                    <Accordion.Header>
-                        {plainTekst(forsidetekster.informasjonOmPersonopplysningerTittel)}
-                    </Accordion.Header>
-                    <Accordion.Content>
-                        <TekstBlock block={forsidetekster.informasjonOmPersonopplysninger} />
-                    </Accordion.Content>
-                </Accordion.Item>
-            </StyledAccordion>
-            {kanFortsettePåSøknad ? <FortsettPåSøknad /> : <BekreftelseOgStartSoknad />}
+            <VStack gap="12">
+                <Heading level="1" size="large" align="center">
+                    {plainTekst(forsidetekster.soeknadstittelBarnetrygd)}
+                </Heading>
+                <GuidePanel poster>
+                    <Heading level="2" size="medium" spacing>
+                        {plainTekst(forsidetekster.veilederHei)}
+                    </Heading>
+                    <TekstBlock
+                        block={forsidetekster.veilederIntro}
+                        typografi={Typografi.BodyLong}
+                    />
+                </GuidePanel>
+                <div>
+                    <Heading level="2" size="medium" spacing>
+                        {plainTekst(forsidetekster.foerDuSoekerTittel)}
+                    </Heading>
+                    <TekstBlock
+                        block={forsidetekster.foerDuSoeker}
+                        typografi={Typografi.BodyLong}
+                    />
+                </div>
+                <Accordion>
+                    <Accordion.Item>
+                        <Accordion.Header>
+                            {plainTekst(forsidetekster.informasjonOmPlikterTittel)}
+                        </Accordion.Header>
+                        <Accordion.Content>
+                            <TekstBlock block={forsidetekster.informasjonOmPlikter} />
+                        </Accordion.Content>
+                    </Accordion.Item>
+                    <Accordion.Item>
+                        <Accordion.Header>
+                            {plainTekst(forsidetekster.informasjonOmPersonopplysningerTittel)}
+                        </Accordion.Header>
+                        <Accordion.Content>
+                            <TekstBlock block={forsidetekster.informasjonOmPersonopplysninger} />
+                        </Accordion.Content>
+                    </Accordion.Item>
+                    <Accordion.Item>
+                        <Accordion.Header>
+                            {plainTekst(forsidetekster.informasjonOmLagringAvSvarTittel)}
+                        </Accordion.Header>
+                        <Accordion.Content>
+                            <TekstBlock block={forsidetekster.informasjonOmLagringAvSvar} />
+                        </Accordion.Content>
+                    </Accordion.Item>
+                </Accordion>
+
+                {kanFortsettePåSøknad ? <FortsettPåSøknad /> : <BekreftelseOgStartSoknad />}
+            </VStack>
         </Layout>
     );
 };

diff --git a/src/frontend/components/SøknadsSteg/Forside/FortsettPåSøknad.tsx b/src/frontend/components/SøknadsSteg/Forside/FortsettPåSøknad.tsx
@@ -1,50 +1,35 @@
 import React, { FC } from 'react';
 
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
 
-import { Alert, BodyLong, Button, Modal } from '@navikt/ds-react';
+import { Alert, BodyLong, Box, Button, Modal, VStack } from '@navikt/ds-react';
 
-import KomponentGruppe from '../../Felleskomponenter/KomponentGruppe/KomponentGruppe';
 import ModalContent from '../../Felleskomponenter/ModalContent';
 import SpråkTekst from '../../Felleskomponenter/SpråkTekst/SpråkTekst';
 
 import { useBekreftelseOgStartSoknad } from './useBekreftelseOgStartSoknad';
 
-const StyledButton = styled(Button)`
-    && {
-        margin: 0 auto 2rem auto;
-        padding: 1rem 3rem 1rem 3rem;
-    }
-`;
-
-const StyledFortsettPåSøknad = styled.div`
-    margin-top: 2rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
-`;
-
 const FortsettPåSøknad: FC = () => {
     const { fortsettPåSøknaden, startPåNytt, visStartPåNyttModal, settVisStartPåNyttModal } =
         useBekreftelseOgStartSoknad();
     const { formatMessage } = useIntl();
     return (
-        <StyledFortsettPåSøknad role={'navigation'}>
-            <KomponentGruppe>
-                <Alert variant={'info'}>
-                    <BodyLong>
-                        <SpråkTekst id={'mellomlagring.info'} />
-                    </BodyLong>
-                </Alert>
-            </KomponentGruppe>
-            <StyledButton onClick={fortsettPåSøknaden}>
-                <SpråkTekst id={'mellomlagring.knapp.fortsett'} />
-            </StyledButton>
-            <StyledButton variant={'secondary'} onClick={() => settVisStartPåNyttModal(true)}>
-                <SpråkTekst id={'mellomlagring.knapp.startpånytt'} />
-            </StyledButton>
+        <VStack role={'navigation'} gap="6">
+            <Alert variant={'info'}>
+                <BodyLong>
+                    <SpråkTekst id={'mellomlagring.info'} />
+                </BodyLong>
+            </Alert>
+            <Box marginInline="auto">
+                <Button onClick={fortsettPåSøknaden}>
+                    <SpråkTekst id={'mellomlagring.knapp.fortsett'} />
+                </Button>
+            </Box>
+            <Box marginInline="auto">
+                <Button variant={'secondary'} onClick={() => settVisStartPåNyttModal(true)}>
+                    <SpråkTekst id={'mellomlagring.knapp.startpånytt'} />
+                </Button>
+            </Box>
             <Modal
                 open={visStartPåNyttModal}
                 onClose={() => {
@@ -62,14 +47,14 @@ const FortsettPåSøknad: FC = () => {
                 </ModalContent>
                 <Modal.Footer>
                     <Button variant={'primary'} onClick={startPåNytt}>
-                        <SpråkTekst id={'felles.startpånytt.modal.startpånyttknapp'} />{' '}
+                        <SpråkTekst id={'felles.startpånytt.modal.startpånyttknapp'} />
                     </Button>
                     <Button variant={'secondary'} onClick={() => settVisStartPåNyttModal(false)}>
                         <SpråkTekst id={'felles.startpånytt.modal.avbrytknapp'} />
                     </Button>
                 </Modal.Footer>
             </Modal>
-        </StyledFortsettPåSøknad>
+        </VStack>
     );
 };
 export default FortsettPåSøknad;