Skip to content

Commit

Permalink
Forbedring av navigasjon-knapper iht Aksel (#1313)
Browse files Browse the repository at this point in the history 
* Bytter til nytt navigasjonspanel iht Aksel

* Legger til fortsette senere-knapp

* Legger til Forrige steg lenke

* Legger til Sanity tekst for Forrige steg-lenke

* Endre layout på knapper

* Endrer kode-struktur og tekst-innhold for sletting av søknad og starte på nytt

* Flytter håndtering av åpning og startPåNytt ut av SlettSøknadenModal

* Legger til SlettSøknadenModal i navigasjonspanel

* Endrer tekstinnhold

* Endrer tekster til å bruke testId for 'neste-steg' knapp istedenfor 'Gå videre' tekst

* Flytter små funksjoner inn i Button for å skape mindre splitting av små kode-biter

* Fikser variant av neste-steg knapp

* Fjerner 'forrigeStegLenke' tekst ettersom den inneholder samme tekst som 'tilbakeKnapp' og dermed fjernes fra Sanity
  • Loading branch information
@ole-kristian-rudjord
ole-kristian-rudjord authored Aug 6, 2024
1 parent 8b73303 commit c8cdbe0
Show file tree
Hide file tree
Showing 15 changed files with 283 additions and 196 deletions.
177 changes: 92 additions & 85 deletions src/frontend/components/Felleskomponenter/Steg/Navigeringspanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,21 @@
import React from 'react';

import styled from 'styled-components';

import { Button } from '@navikt/ds-react';
import {
ArrowLeftIcon,
ArrowRightIcon,
FloppydiskIcon,
PaperplaneIcon,
TrashIcon,
} from '@navikt/aksel-icons';
import { Box, Button, HGrid, VStack } from '@navikt/ds-react';
import { RessursStatus } from '@navikt/familie-typer';

import { useApp } from '../../../context/AppContext';
import { useSteg } from '../../../context/StegContext';
import { device } from '../../../Theme';
import { RouteEnum } from '../../../typer/routes';
import SpråkTekst from '../SpråkTekst/SpråkTekst';

const Container = styled.nav`
padding: 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
' tilbake gåVidere '
' avbryt avbryt';
grid-template-rows: auto;
gap: 0.5rem;
justify-content: center;
@media all and ${device.mobile} {
grid-template-columns: 1fr;
grid-template-areas:
' gåVidere '
' tilbake '
' avbryt';
padding: 2rem 0;
}
`;

const StyledButton = styled(Button)<{
$placeself: 'end' | 'center' | 'start';
$gridarea: 'tilbake' | 'gåVidere' | 'avbryt';
}>`
&& {
grid-area: ${props => props.$gridarea};
min-width: 12.5rem;
place-self: ${props => props.$placeself};
@media all and ${device.mobile} {
place-self: center;
}
}
`;
import { useBekreftelseOgStartSoknad } from '../../SøknadsSteg/Forside/useBekreftelseOgStartSoknad';

type Knappetype = 'primary' | 'secondary';
import { SlettSøknadenModal } from './SlettSøknadenModal';

const Navigeringspanel: React.FC<{
onAvbrytCallback: () => void;
Expand All @@ -55,54 +24,92 @@ const Navigeringspanel: React.FC<{
}> = ({ onAvbrytCallback, onTilbakeCallback, valideringErOk }) => {
const { hentNesteSteg } = useSteg();
const nesteSteg = hentNesteSteg();
const { innsendingStatus } = useApp();
const { innsendingStatus, tekster, plainTekst } = useApp();
const { visStartPåNyttModal, settVisStartPåNyttModal, startPåNytt } =
useBekreftelseOgStartSoknad();

const hentKnappetype = (): Knappetype => {
if (valideringErOk) {
return valideringErOk() ? 'primary' : 'secondary';
} else {
return 'primary';
}
};
const {
sendSoeknadKnapp,
gaaVidereKnapp,
tilbakeKnapp,
fortsettSenereKnapp,
slettSoeknadKnapp,
} = tekster().FELLES.navigasjon;

return (
<Container>
<StyledButton
variant={'secondary'}
type={'button'}
onClick={onTilbakeCallback}
$placeself={'end'}
$gridarea={'tilbake'}
>
<SpråkTekst id={'felles.navigasjon.tilbake'} />
</StyledButton>
<StyledButton
type={'submit'}
variant={hentKnappetype()}
$placeself={'start'}
$gridarea={'gåVidere'}
loading={innsendingStatus.status === RessursStatus.HENTER}
>
<SpråkTekst
id={
nesteSteg.route === RouteEnum.Kvittering
? 'dokumentasjon.send-søknad.knapp'
: 'felles.navigasjon.gå-videre'
}
/>
</StyledButton>
<>
<Box marginBlock="12 0">
<VStack gap="4">
<HGrid
gap={{ xs: '4', sm: '8 4' }}
columns={{ xs: 1, sm: 2 }}
width={{ sm: 'fit-content' }}
>
<Button
type={'button'}
variant="secondary"
onClick={onTilbakeCallback}
icon={<ArrowLeftIcon aria-hidden />}
iconPosition="left"
>
{plainTekst(tilbakeKnapp)}
</Button>
<Button
type={'submit'}
variant={
valideringErOk
? valideringErOk()
? 'primary'
: 'secondary'
: 'primary'
}
icon={
nesteSteg.route === RouteEnum.Kvittering ? (
<PaperplaneIcon aria-hidden />
) : (
<ArrowRightIcon aria-hidden />
)
}
iconPosition="right"
loading={innsendingStatus.status === RessursStatus.HENTER}
data-testid="neste-steg"
>
{plainTekst(
nesteSteg.route === RouteEnum.Kvittering
? sendSoeknadKnapp
: gaaVidereKnapp
)}
</Button>

<StyledButton
variant={'tertiary'}
type={'button'}
onClick={onAvbrytCallback}
$gridarea={'avbryt'}
$placeself={'center'}
margintop={'0'}
>
<SpråkTekst id={'felles.navigasjon.avbryt'} />
</StyledButton>
</Container>
<Box asChild marginBlock={{ xs: '4 0', sm: '0' }}>
<Button
variant="tertiary"
type={'button'}
onClick={onAvbrytCallback}
icon={<FloppydiskIcon aria-hidden />}
iconPosition="left"
>
{plainTekst(fortsettSenereKnapp)}
</Button>
</Box>
<Button
variant="tertiary"
type={'button'}
icon={<TrashIcon aria-hidden />}
iconPosition="left"
onClick={() => settVisStartPåNyttModal(true)}
>
{plainTekst(slettSoeknadKnapp)}
</Button>
</HGrid>
</VStack>
</Box>
<SlettSøknadenModal
open={visStartPåNyttModal}
avbryt={() => settVisStartPåNyttModal(false)}
startPåNytt={() => startPåNytt()}
/>
</>
);
};

Expand Down
48 changes: 48 additions & 0 deletions src/frontend/components/Felleskomponenter/Steg/SlettSøknadenModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react';

import styled from 'styled-components';

import { Button, Heading, Modal } from '@navikt/ds-react';

import { useApp } from '../../../context/AppContext';

const StyledHeading = styled(Heading)`
&& {
white-space: nowrap;
margin-right: var(--a-spacing-18);
}
`;

interface ISlettSøkadenModalProps {
open: boolean;
avbryt: () => void;
startPåNytt: () => void;
}

export const SlettSøknadenModal: React.FC<ISlettSøkadenModalProps> = ({
open,
avbryt,
startPåNytt,
}) => {
const { tekster, plainTekst } = useApp();

const startPåNyttTekster = tekster().FELLES.modaler.startPåNytt;

return (
<Modal open={open} onClose={avbryt} aria-labelledby="modal-heading">
<Modal.Header>
<StyledHeading level="1" size="medium" id="modal-heading">
{plainTekst(startPåNyttTekster.startPaaNyttTittel)}
</StyledHeading>
</Modal.Header>
<Modal.Footer>
<Button variant={'danger'} type="button" onClick={startPåNytt}>
{plainTekst(startPåNyttTekster.startNySoeknadKnapp)}
</Button>
<Button variant={'secondary'} type="button" onClick={avbryt}>
{plainTekst(startPåNyttTekster.startPaaNyttAvbryt)}
</Button>
</Modal.Footer>
</Modal>
);
};
58 changes: 39 additions & 19 deletions src/frontend/components/Felleskomponenter/Steg/Steg.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import React, { ReactNode, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';

import { Box, FormProgress, GuidePanel, Heading } from '@navikt/ds-react';
import { ArrowLeftIcon } from '@navikt/aksel-icons';
import { Box, FormProgress, GuidePanel, Heading, Link, VStack } from '@navikt/ds-react';
import { ISkjema } from '@navikt/familie-skjema';
import { setAvailableLanguages } from '@navikt/nav-dekoratoren-moduler';

Expand Down Expand Up @@ -45,7 +46,7 @@ interface ISteg {
children?: ReactNode;
}

const FormProgressContainer = styled.div`
const TopNavigasjonContainer = styled.div`
max-width: var(--innhold-bredde);
margin: 0 auto;
Expand Down Expand Up @@ -89,6 +90,8 @@ const Steg: React.FC<ISteg> = ({
settNåværendeRoute,
modellVersjonOppdatert,
søknad,
tekster,
plainTekst,
} = useApp();
const {
formProgressSteps,
Expand Down Expand Up @@ -167,33 +170,50 @@ const Steg: React.FC<ISteg> = ({
navigate(steg.path);
};

const { tilbakeKnapp } = tekster().FELLES.navigasjon;

return (
<>
<ScrollHandler />
<header>
<Banner />
{nyesteNåværendeRoute !== RouteEnum.Kvittering && (
<FormProgressContainer>
<FormProgress
totalSteps={formProgressSteps.length}
activeStep={hentNåværendeStegIndex()}
onStepChange={stegIndex => håndterGåTilSteg(stegIndex - 1)}
>
{formProgressSteps.map((value, index) => (
<FormProgress.Step
key={index}
completed={index + 1 < hentNåværendeStegIndex()}
interactive={index + 1 < hentNåværendeStegIndex()}
<TopNavigasjonContainer>
<VStack gap="4">
<div>
<Link
href={forrigeRoute.path}
variant="action"
onClick={event => {
event.preventDefault();
håndterTilbake();
}}
>
{value.label}
</FormProgress.Step>
))}
</FormProgress>
</FormProgressContainer>
<ArrowLeftIcon aria-hidden />
{plainTekst(tilbakeKnapp)}
</Link>
</div>
<FormProgress
totalSteps={formProgressSteps.length}
activeStep={hentNåværendeStegIndex()}
onStepChange={stegIndex => håndterGåTilSteg(stegIndex - 1)}
>
{formProgressSteps.map((value, index) => (
<FormProgress.Step
key={index}
completed={index + 1 < hentNåværendeStegIndex()}
interactive={index + 1 < hentNåværendeStegIndex()}
>
{value.label}
</FormProgress.Step>
))}
</FormProgress>
</VStack>
</TopNavigasjonContainer>
)}
</header>
<InnholdContainer>
<TittelContainer id={'stegHovedtittel'} tabIndex={-1}>
<TittelContainer>
<Heading level={'2'} size={'large'}>
{tittel}
</Heading>
Expand Down
13 changes: 6 additions & 7 deletions src/frontend/components/SøknadsSteg/DinLivssituasjon/DinLivssituasjon.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,12 @@ describe('DinLivssituasjon', () => {
it('Stopper fra å gå videre hvis årsak ikke er valgt', async () => {
spyOnUseApp(søknad);

const { findByText, queryAllByText, getByText } = render(
const { queryAllByText, getByText, findByTestId } = render(
<TestProvidereMedEkteTekster>
<DinLivssituasjon />
</TestProvidereMedEkteTekster>
);
const gåVidere = await findByText('Gå videre');

const gåVidere = await findByTestId('neste-steg');
act(() => gåVidere.click());

const feiloppsummeringstittel = getByText(
Expand Down Expand Up @@ -131,12 +130,12 @@ describe('DinLivssituasjon', () => {
it('Viser feilmelding med spørsmål tittel når ikke utfylt', async () => {
spyOnUseApp(søknad);

const { findByText, getByText, getAllByText } = render(
const { findByTestId, getByText, getAllByText } = render(
<TestProvidereMedEkteTekster>
<DinLivssituasjon />
</TestProvidereMedEkteTekster>
);
const gåVidere = await findByText('Gå videre');
const gåVidere = await findByTestId('neste-steg');
act(() => gåVidere.click());
const feiloppsummeringstittel = getByText(
'Du må rette opp eller svare på følgende spørsmål for å gå videre'
Expand All @@ -149,7 +148,7 @@ describe('DinLivssituasjon', () => {
it('Viser riktige feilmeldinger ved ingen utfylte felt av nåværende samboer', async () => {
spyOnUseApp(søknad);

const { findByText, findByRole, getAllByText, getByText } = render(
const { findByTestId, findByRole, getAllByText, getByText } = render(
<TestProvidereMedEkteTekster>
<DinLivssituasjon />
</TestProvidereMedEkteTekster>
Expand All @@ -160,7 +159,7 @@ describe('DinLivssituasjon', () => {
const jaKnapp: HTMLElement = within(harSamboerNåSpmFieldset).getByText('Ja');
act(() => jaKnapp.click());

const gåVidereKnapp = await findByText('Gå videre');
const gåVidereKnapp = await findByTestId('neste-steg');
act(() => gåVidereKnapp.click());

const feiloppsummeringstittel = getByText(
Expand Down
Loading

0 comments on commit c8cdbe0

Please sign in to comment.