Skip to content

Commit 581815d

Browse files
daphneleebeekkristeine
daphneleebeek
and
kristeine
authored
Legge inn/endre tekster for felles forside (#1124)
* Legg til ny forside for kombinert søknad * Legg til huskelapp på komponent som kanskje skal fjernes * Stylet layout på forsiden, spacing * Endre syntax på todo --------- Co-authored-by: Kristine Steine <[email protected]>
1 parent b9c8773 commit 581815d

File tree

3 files changed

+187
-75
lines changed

3 files changed

+187
-75
lines changed

‎src/frontend/components/Felleskomponenter/FamilieAlert/FamilieAlert.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const StyledAlert = styled(Alert)`
1616
`;
1717

1818
const FamilieAlert: React.FC<AlertStripeProps> = ({
19+
// TODO: vurder om denne kan fjernes etter arbeid med kombinert søknad
1920
variant,
2021
inline = true,
2122
size = 'medium',

‎src/frontend/components/SøknadsSteg/Forside/BekreftelseOgStartSoknad.tsx

+51-34
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,33 @@ import React from 'react';
33
import { useIntl } from 'react-intl';
44
import styled from 'styled-components';
55

6-
import { BodyLong, Button, ConfirmationPanel, Radio, RadioGroup } from '@navikt/ds-react';
6+
import {
7+
Alert,
8+
BodyLong,
9+
BodyShort,
10+
Button,
11+
ConfirmationPanel,
12+
Radio,
13+
RadioGroup,
14+
VStack,
15+
} from '@navikt/ds-react';
716
import { AGreen500, ANavRed, AOrange500 } from '@navikt/ds-tokens/dist/tokens';
817

918
import { useFeatureToggles } from '../../../context/FeatureToggleContext';
1019
import { EFeatureToggle } from '../../../typer/feature-toggles';
1120
import { ESøknadstype } from '../../../typer/kontrakt/generelle';
12-
import Informasjonsbolk from '../../Felleskomponenter/Informasjonsbolk/Informasjonsbolk';
1321
import SpråkTekst from '../../Felleskomponenter/SpråkTekst/SpråkTekst';
1422

1523
import { BekreftelseStatus, useBekreftelseOgStartSoknad } from './useBekreftelseOgStartSoknad';
1624

1725
const FormContainer = styled.form`
18-
display: flex;
19-
flex-direction: column;
26+
display: grid;
27+
gap: 3rem;
2028
`;
2129

2230
const StyledButton = styled(Button)`
2331
&& {
24-
margin: 2.3rem auto 0 auto;
32+
margin: 0 auto;
2533
}
2634
`;
2735

@@ -51,36 +59,45 @@ const BekreftelseOgStartSoknad: React.FC = () => {
5159
return (
5260
<FormContainer onSubmit={event => onStartSøknad(event)}>
5361
{toggles[EFeatureToggle.KOMBINER_SOKNADER] && (
54-
<RadioGroup
55-
legend={'Vil du søke om utvidet barnetrygd i tillegg til ordinær barnetrygd?'} // TODO: Skal hente tekst fra Sanity
56-
onChange={(value: ESøknadstype) => {
57-
settSøknadstype(value);
58-
settSøknadstypeFeil(false);
59-
}}
60-
error={søknadstypeFeil && 'Du må velge søknadstype'} // TODO: Skal hente tekst fra Sanity
61-
>
62-
<Radio value={ESøknadstype.UTVIDET}>Ja</Radio>
63-
<Radio value={ESøknadstype.ORDINÆR}>Nei</Radio>
64-
</RadioGroup>
62+
<VStack gap={'6'}>
63+
<Alert variant="info" /* TODO: hent tekst fra sanity */>
64+
Hvis du bor alene med barn under 18 år, kan du ha rett til utvidet
65+
barnetrygd.
66+
</Alert>
67+
<RadioGroup
68+
legend={
69+
'Vil du søke om utvidet barnetrygd i tillegg til ordinær barnetrygd?'
70+
} // TODO: Skal hente tekst fra Sanity
71+
onChange={(value: ESøknadstype) => {
72+
settSøknadstype(value);
73+
settSøknadstypeFeil(false);
74+
}}
75+
error={søknadstypeFeil && 'Du må velge søknadstype'} // TODO: Skal hente tekst fra Sanity
76+
>
77+
<Radio value={ESøknadstype.UTVIDET}>Ja</Radio>
78+
<Radio value={ESøknadstype.ORDINÆR}>Nei</Radio>
79+
</RadioGroup>
80+
</VStack>
6581
)}
66-
<Informasjonsbolk tittelId="forside.bekreftelsesboks.tittel">
67-
<ConfirmationPanel
68-
label={formatMessage({ id: 'forside.bekreftelsesboks.erklæring.spm' })}
69-
onChange={bekreftelseOnChange}
70-
checked={bekreftelseStatus === BekreftelseStatus.BEKREFTET}
71-
error={
72-
bekreftelseStatus === BekreftelseStatus.FEIL && (
73-
<span role={'alert'}>
74-
<SpråkTekst id={'forside.bekreftelsesboks.feilmelding'} />
75-
</span>
76-
)
77-
}
78-
>
79-
<BodyLong>
80-
<SpråkTekst id="forside.bekreftelsesboks.brødtekst" />
81-
</BodyLong>
82-
</ConfirmationPanel>
83-
</Informasjonsbolk>
82+
<ConfirmationPanel
83+
label={formatMessage({ id: 'forside.bekreftelsesboks.erklæring.spm' })}
84+
onChange={bekreftelseOnChange}
85+
checked={bekreftelseStatus === BekreftelseStatus.BEKREFTET}
86+
error={
87+
bekreftelseStatus === BekreftelseStatus.FEIL && (
88+
<span role={'alert'}>
89+
<SpråkTekst id={'forside.bekreftelsesboks.feilmelding'} />
90+
</span>
91+
)
92+
}
93+
>
94+
<BodyShort weight={'semibold'}>
95+
<SpråkTekst id="forside.bekreftelsesboks.tittel" />
96+
</BodyShort>
97+
<BodyLong>
98+
<SpråkTekst id="forside.bekreftelsesboks.brødtekst" />
99+
</BodyLong>
100+
</ConfirmationPanel>
84101

85102
<StyledButton
86103
variant={

‎src/frontend/components/SøknadsSteg/Forside/Forside.tsx

+135-41
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import React, { useEffect } from 'react';
22

33
import styled from 'styled-components';
44

5-
import { GuidePanel, Heading } from '@navikt/ds-react';
5+
import { Accordion, BodyShort, GuidePanel, Heading } from '@navikt/ds-react';
66
import { LocaleType, Sprakvelger } from '@navikt/familie-sprakvelger';
77
import { RessursStatus } from '@navikt/familie-typer';
88

99
import Miljø from '../../../../shared-utils/Miljø';
1010
import { useApp } from '../../../context/AppContext';
1111
import { useFeatureToggles } from '../../../context/FeatureToggleContext';
1212
import useFørsteRender from '../../../hooks/useFørsteRender';
13+
import { device } from '../../../Theme';
1314
import { EFeatureToggle } from '../../../typer/feature-toggles';
1415
import { ESøknadstype } from '../../../typer/kontrakt/generelle';
1516
import { RouteEnum } from '../../../typer/routes';
@@ -37,6 +38,26 @@ const StyledAlertStripeUtvidetInfo = styled(FamilieAlert)`
3738
margin-top: 3rem;
3839
`;
3940

41+
const StyledAccordion = styled(Accordion)`
42+
width: 100%;
43+
`;
44+
45+
const Layout = styled.div`
46+
max-width: var(--innhold-bredde);
47+
display: grid;
48+
gap: 3rem;
49+
margin: 2rem auto 4rem auto;
50+
51+
@media all and ${device.tablet} {
52+
max-width: 100%;
53+
margin: 2rem 2rem 4rem 2rem;
54+
}
55+
`;
56+
57+
const StyledInformasjonsbolk = styled(Informasjonsbolk)`
58+
margin-bottom: 3rem;
59+
`;
60+
4061
const Forside: React.FC = () => {
4162
const { sluttbruker, mellomlagretVerdi, søknad, settNåværendeRoute } = useApp();
4263

@@ -61,54 +82,127 @@ const Forside: React.FC = () => {
6182

6283
const navn = sluttbruker.status === RessursStatus.SUKSESS ? sluttbruker.data.navn : '-';
6384

64-
return (
65-
<InnholdContainer>
66-
<GuidePanel>
67-
<SpråkTekst id={'forside.veilederhilsen'} values={{ navn: navn.toUpperCase() }} />
68-
</GuidePanel>
69-
<StyledHeading size="xlarge">
70-
<SpråkTekst id={erUtvidet ? 'forside.utvidet.sidetittel' : 'forside.sidetittel'} />
71-
</StyledHeading>
72-
73-
<StyledSpråkvelger støttedeSprak={[LocaleType.nn, LocaleType.nb, LocaleType.en]} />
85+
if (!kombinerSøknaderToggle) {
86+
return (
87+
<InnholdContainer>
88+
<GuidePanel>
89+
<SpråkTekst
90+
id={'forside.veilederhilsen'}
91+
values={{ navn: navn.toUpperCase() }}
92+
/>
93+
</GuidePanel>
94+
<StyledHeading size="xlarge">
95+
<SpråkTekst
96+
id={erUtvidet ? 'forside.utvidet.sidetittel' : 'forside.sidetittel'}
97+
/>
98+
</StyledHeading>
99+
100+
<StyledSpråkvelger støttedeSprak={[LocaleType.nn, LocaleType.nb, LocaleType.en]} />
101+
102+
{!erUtvidet && (
103+
<StyledAlertStripeUtvidetInfo variant={'info'} inline={false}>
104+
<SpråkTekst id={'forside.utvidetinfo.info'} />
105+
<EksternLenke
106+
lenkeSpråkId={'forside.utvidetinfo.lenke'}
107+
lenkeTekstSpråkId={'forside.utvidetinfo.lenketekst'}
108+
target="_blank"
109+
/>
110+
</StyledAlertStripeUtvidetInfo>
111+
)}
74112

75-
{!erUtvidet && (
76-
<StyledAlertStripeUtvidetInfo variant={'info'} inline={false}>
77-
<SpråkTekst id={'forside.utvidetinfo.info'} />
113+
<StyledInformasjonsbolk>
114+
<SpråkTekst
115+
id={'forside.info.punktliste'}
116+
values={{ b: msg => <b>{msg}</b> }}
117+
/>
78118
<EksternLenke
79-
lenkeSpråkId={'forside.utvidetinfo.lenke'}
80-
lenkeTekstSpråkId={'forside.utvidetinfo.lenketekst'}
119+
lenkeSpråkId={'forside.plikter.lenke'}
120+
lenkeTekstSpråkId={'forside.plikter.lenketekst'}
81121
target="_blank"
82122
/>
83-
</StyledAlertStripeUtvidetInfo>
84-
)}
85-
86-
<Informasjonsbolk>
87-
<SpråkTekst id={'forside.info.punktliste'} values={{ b: msg => <b>{msg}</b> }} />
88-
<EksternLenke
89-
lenkeSpråkId={'forside.plikter.lenke'}
90-
lenkeTekstSpråkId={'forside.plikter.lenketekst'}
91-
target="_blank"
92-
/>
93-
{erUtvidet && (
123+
{erUtvidet && (
124+
<EksternLenke
125+
lenkeSpråkId={'forside.hvemharrettpåutvidet.lenke'}
126+
lenkeTekstSpråkId={'forside.hvemharrettpåutvidet.lenketekst'}
127+
target="_blank"
128+
/>
129+
)}
130+
</StyledInformasjonsbolk>
131+
132+
{kanFortsettePåSøknad ? <FortsettPåSøknad /> : <BekreftelseOgStartSoknad />}
133+
134+
<Informasjonsbolk>
94135
<EksternLenke
95-
lenkeSpråkId={'forside.hvemharrettpåutvidet.lenke'}
96-
lenkeTekstSpråkId={'forside.hvemharrettpåutvidet.lenketekst'}
136+
lenkeSpråkId={'forside.behandling-av-personopplysning.lenke'}
137+
lenkeTekstSpråkId={'forside.behandling-av-personopplysning.lenketekst'}
97138
target="_blank"
98139
/>
99-
)}
100-
</Informasjonsbolk>
101-
140+
</Informasjonsbolk>
141+
</InnholdContainer>
142+
);
143+
}
144+
return (
145+
<Layout>
146+
<Heading size="xlarge" align={'center'} /* TODO: legg til tekst i sanity */>
147+
Søknad om barnetrygd
148+
</Heading>
149+
<StyledSpråkvelger støttedeSprak={[LocaleType.nn, LocaleType.nb, LocaleType.en]} />
150+
<GuidePanel poster /* TODO: legg til tekst i sanity*/>
151+
<BodyShort weight="semibold">Hei, TODO TODOSEN!</BodyShort>
152+
<BodyShort /* dette innholdet skal inn i sanity! alt sammen. blir vel en tekstblock*/
153+
>
154+
Jeg er her for å veilede deg gjennom søknaden.
155+
</BodyShort>
156+
<ul>
157+
<li>Du må svare på alle spørsmål på hver side for å komme videre.</li>
158+
<li>
159+
Vi lagrer søknaden din ut morgendagen. Derfor kan du ta pauser når du fyller
160+
ut.{' '}
161+
</li>
162+
<li>Du kan avbryte søknaden og slette opplysningene du har lagt inn.</li>
163+
<li>
164+
Du må bekrefte at du har lest og forstått pliktene dine for å fortsette med
165+
søknaden.
166+
</li>
167+
</ul>
168+
</GuidePanel>
169+
<StyledAccordion size={'large'}>
170+
<Accordion.Item>
171+
<Accordion.Header>Hvis du får barnetrygd gjelder dette</Accordion.Header>
172+
<Accordion.Content>
173+
For at du skal få utbetalt riktig beløp fra NAV, er vi avhengig av at du gir
174+
oss riktige opplysninger og melder fra når det skjer endringer i
175+
livssituasjonen din.
176+
<EksternLenke
177+
lenkeSpråkId={'forside.plikter.lenke'}
178+
lenkeTekstSpråkId={'forside.plikter.lenketekst'}
179+
target="_blank"
180+
/>
181+
</Accordion.Content>
182+
</Accordion.Item>
183+
<Accordion.Item>
184+
<Accordion.Header>Vi vil hente og bruke informasjon om deg</Accordion.Header>
185+
<Accordion.Content>
186+
<BodyShort /* dette blir en tekstblock fra sanity*/>
187+
I tillegg til den informasjonen du oppgir i søknaden, henter vi:
188+
</BodyShort>
189+
<ul>
190+
<li>personinformasjon om deg og barna dine fra Folkeregisteret</li>
191+
<li>opplysninger om deg vi har fra før</li>
192+
</ul>
193+
<BodyShort>
194+
Dette gjør vi for å vurdere om du har rett til barnetrygd.
195+
</BodyShort>
196+
<EksternLenke
197+
lenkeSpråkId={'forside.behandling-av-personopplysning.lenke'}
198+
lenkeTekstSpråkId={'forside.behandling-av-personopplysning.lenketekst'}
199+
target="_blank"
200+
/>
201+
</Accordion.Content>
202+
</Accordion.Item>
203+
</StyledAccordion>
102204
{kanFortsettePåSøknad ? <FortsettPåSøknad /> : <BekreftelseOgStartSoknad />}
103-
104-
<Informasjonsbolk>
105-
<EksternLenke
106-
lenkeSpråkId={'forside.behandling-av-personopplysning.lenke'}
107-
lenkeTekstSpråkId={'forside.behandling-av-personopplysning.lenketekst'}
108-
target="_blank"
109-
/>
110-
</Informasjonsbolk>
111-
</InnholdContainer>
205+
</Layout>
112206
);
113207
};
114208

0 commit comments

Comments
 (0)