Oppsummeringsside for søknadsdialoger
Oppsummeringssiden er den siste siden søkerne ser før de sender inn en søknad. Målet med oppsummeringssiden er at søkeren kvalitetssikrer svarene sine før søknaden sendes inn.
Malen
tsx
import React, { useEffect } from "react";
import {
ArrowLeftIcon,
FloppydiskIcon,
PaperplaneIcon,
TrashIcon,
} from "@navikt/aksel-icons";
import {
Bleed,
BodyLong,
BodyShort,
Box,
FormProgress,
FormSummary,
GuidePanel,
Heading,
Link,
Page,
Show,
Stack,
VStack,
Button,
HGrid,
} from "@navikt/ds-react";
function Example() {
useDekorator();
return (
<Page footer={<Footer />}>
<Header />
<Page.Block as="main" width="text" gutters>
<VStack gap="8">
<Bleed marginInline={{ lg: "24" }}>
<Stack
gap="6"
direction={{ sm: "row-reverse", lg: "row" }}
justify={{ sm: "space-between", lg: "start" }}
wrap={false}
>
<Show above="sm">
<ApplicationPictogram />
</Show>
<VStack gap="1">
<BodyShort size="small">
Nav 10-07.03 (Om søknaden har ID)
</BodyShort>
<Heading level="1" size="xlarge">
Søknad om [ytelse]
</Heading>
</VStack>
</Stack>
</Bleed>
<div data-aksel-template="form-summarypage-v2">
<Link href="#">
<ArrowLeftIcon aria-hidden /> Forrige steg
</Link>
<Box paddingBlock="6 5">
<Heading level="2" size="large">
Oppsummering
</Heading>
</Box>
<FormProgress activeStep={3} totalSteps={3}>
<FormProgress.Step href="#">Steg 1</FormProgress.Step>
<FormProgress.Step href="#">Steg 2</FormProgress.Step>
<FormProgress.Step href="#">Oppsummering</FormProgress.Step>
</FormProgress>
</div>
<GuidePanel poster>
<BodyLong spacing>
Nå kan du se over at alt er riktig før du sender inn søknaden. Ved
behov kan du endre opplysningene.
</BodyLong>
<BodyLong>
Når du har sendt inn søknaden kommer du til en kvitteringsside med
informasjon om veien videre. Der kan du også ettersende
dokumentasjon som mangler.
</BodyLong>
</GuidePanel>
<FormSummary>
<FormSummary.Header>
<FormSummary.Heading level="2">Om deg</FormSummary.Heading>
<FormSummary.EditLink href="#" />
</FormSummary.Header>
<FormSummary.Answers>
<FormSummary.Answer>
<FormSummary.Label>Navn</FormSummary.Label>
<FormSummary.Value>Anakin Skywalker</FormSummary.Value>
</FormSummary.Answer>
<FormSummary.Answer>
<FormSummary.Label>Fødselsnummer</FormSummary.Label>
<FormSummary.Value>123456 78912</FormSummary.Value>
</FormSummary.Answer>
<FormSummary.Answer>
<FormSummary.Label>Folkeregistrert adresse</FormSummary.Label>
<FormSummary.Value>
Tulleveien 1337
<br />
0472 Oslo
</FormSummary.Value>
</FormSummary.Answer>
<FormSummary.Answer>
<FormSummary.Label>Telefon</FormSummary.Label>
<FormSummary.Value>90 90 90 90</FormSummary.Value>
</FormSummary.Answer>
<FormSummary.Answer>
<FormSummary.Label>E-postadresse</FormSummary.Label>
<FormSummary.Value>mail@tull.tøys</FormSummary.Value>
</FormSummary.Answer>
</FormSummary.Answers>
</FormSummary>
<FormSummary>
<FormSummary.Header>
<FormSummary.Heading level="2">Barnetillegg</FormSummary.Heading>
<FormSummary.EditLink href="#" />
</FormSummary.Header>
<FormSummary.Answers>
<FormSummary.Answer>
<FormSummary.Label>Barn nr. 1</FormSummary.Label>
<FormSummary.Value>
<FormSummary.Answers>
<FormSummary.Answer>
<FormSummary.Label>Navn</FormSummary.Label>
<FormSummary.Value>Luke Skywalker</FormSummary.Value>
</FormSummary.Answer>
<FormSummary.Answer>
<FormSummary.Label>Fødselsdato</FormSummary.Label>
<FormSummary.Value>19 BBY</FormSummary.Value>
</FormSummary.Answer>
</FormSummary.Answers>
</FormSummary.Value>
</FormSummary.Answer>
<FormSummary.Answer>
<FormSummary.Label>Barn nr. 2</FormSummary.Label>
<FormSummary.Value>
<FormSummary.Answers>
<FormSummary.Answer>
<FormSummary.Label>Navn</FormSummary.Label>
<FormSummary.Value>Leia Organa</FormSummary.Value>
</FormSummary.Answer>
<FormSummary.Answer>
<FormSummary.Label>Fødselsdato</FormSummary.Label>
<FormSummary.Value>19 BBY</FormSummary.Value>
</FormSummary.Answer>
</FormSummary.Answers>
</FormSummary.Value>
</FormSummary.Answer>
</FormSummary.Answers>
</FormSummary>
<VStack gap="4">
<BodyShort as="div" size="small" textColor="subtle">
Sist lagret: 10. mars 2024 kl. 13.55
</BodyShort>
<HGrid
gap={{ xs: "4", sm: "8 4" }}
columns={{ xs: 1, sm: 2 }}
width={{ sm: "fit-content" }}
>
<Button
variant="secondary"
icon={<ArrowLeftIcon aria-hidden />}
iconPosition="left"
>
Forrige steg
</Button>
<Button
variant="primary"
icon={<PaperplaneIcon aria-hidden />}
iconPosition="right"
>
Send søknad
</Button>
<Box asChild marginBlock={{ xs: "4 0", sm: "0" }}>
<Button
variant="tertiary"
icon={<FloppydiskIcon aria-hidden />}
iconPosition="left"
>
Fortsett senere
</Button>
</Box>
<Button
variant="tertiary"
icon={<TrashIcon aria-hidden />}
iconPosition="left"
>
Slett søknaden
</Button>
</HGrid>
</VStack>
</VStack>
</Page.Block>
<Env
languages={[
{ locale: "nb", url: "https://www.nav.no" },
{ locale: "en", url: "https://www.nav.no/en" },
]}
/>
</Page>
);
}
const ApplicationPictogram = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="72"
height="72"
viewBox="0 0 72 72"
fill="none"
style={{ flexShrink: 0 }}
aria-hidden
>
<rect x="23.25" y="22.5" width="26.25" height="9" fill="#CCE2F0" />
<rect x="23.25" y="36.75" width="26.25" height="9" fill="#CCE2F0" />
<circle cx="36.75" cy="34.5" r="21" fill="#CCE2F0" />
<path
d="M23.7672 5.508L30.1202 11.8434M1.5 33.75H34.5M26.4706 2.81211L10.5882 18.6506L9 26.5699L16.9412 24.986L32.8235 9.14751C34.5778 7.39804 34.5778 4.56158 32.8235 2.81211C31.0692 1.06263 28.2249 1.06263 26.4706 2.81211Z"
stroke="#23262A"
strokeWidth="2.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M56.25 44.25L63.75 44.25"
stroke="#262626"
strokeWidth="2.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M56.25 52.5L63.75 52.5"
stroke="#262626"
strokeWidth="2.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M56.25 60.75L63.75 60.75"
stroke="#262626"
strokeWidth="2.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M48 52.5L51 52.5"
stroke="#262626"
strokeWidth="2.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M48 52.5L51 52.5"
stroke="#262626"
strokeWidth="2.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M48 44.25L51 44.25"
stroke="#262626"
strokeWidth="2.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M48 44.25L51 44.25"
stroke="#262626"
strokeWidth="2.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M48 60.75L51 60.75"
stroke="#262626"
strokeWidth="2.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M48 60.75L51 60.75"
stroke="#262626"
strokeWidth="2.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<rect
x="41.25"
y="33"
width="29.25"
height="37.5"
stroke="#262626"
strokeWidth="2.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
function Header() {
return <div id="decorator-header" />;
}
function Footer() {
return <div id="decorator-footer" />;
}
const MILJO_URL = "https://www.nav.no/dekoratoren";
function Env({ languages }: { languages?: { locale: string; url: string }[] }) {
return (
<div
id="decorator-env"
data-src={`${MILJO_URL}/env?context=privatperson&simple=true${
languages
? `&availableLanguages=[${languages
.map((language) => JSON.stringify(language))
.join(",")}]`
: ""
}`}
/>
);
}
/**
* OBS: Dette er ikke anbefalt metode for å laste dekoratør!
* Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
* @see https://github.com/navikt/nav-dekoratoren
*/
function useDekorator() {
useEffect(() => {
const script = document.createElement("script");
script.src = `${MILJO_URL}/client.js`;
script.async = true;
document.body.appendChild(script);
const styles = document.createElement("link");
styles.href = `${MILJO_URL}/css/client.css`;
styles.rel = "stylesheet";
document.head.appendChild(styles);
return () => {
document.body.removeChild(script);
document.head.removeChild(styles);
};
}, []);
}
Om malen
Før en søknad sendes inn er det viktig at søkeren får mulighet til å se over svarene sine. På oppsummeringssiden får søkeren informasjon om at hen har kommet til slutten av søknaden, og kan gå tilbake for å endre svarene om det er behov for det.
Malen inkluderer:
Responsive layout, byggeklosser fra Aksel og veiledning. Både innholdet og byggeklossene er i tråd med NAV sin standard for søknadsdialoger, som du finner her.
Brukes til
Malen brukes til oppsummeringsside i søknadsdialoger.
Delene i malen
Disse delene hører med på alle oppsummeringssider, uavhengig av hva slags søknad det gjelder.
Tilbake-lenke
Lenken på toppen av siden navigerer søkeren tilbake til forrige side. Lenketeksten skal være "Forrige steg".
Heading
Standard overskrift til en side i søknadsdialogen. Teksten skal være "Oppsummering".
FormProgress
Komponenten viser at søkeren er på siste steg i søknadsdialogen. Se FormProgress for detaljert informasjon om komponenten.
GuidePanel
Komponenten GuidePanel brukes til en kort veiledning som ber søkeren se over svarene sine og justere ved behov.
FormSummary
Hvert steg i en søknadsdialog blir oppsummert med komponenten FormSummary. Legg til en FormSummary for hvert steg i søknadsdialogen.
Navigasjon
Dette er standard oppsett for navigering med knapper i søknadsdialoger. Primary og Secondary knapp er standard og brukes til handlingene "Forrige steg" og "Send søknad". Tertiary-knappene brukes om søknadsdialogen har støtte for handlingene "Fortsett senere" og "Slett søknaden".
Eksempler på oppsummeringssider
Dette er eksempler på hvordan oppsummeringssiden til noen av søknadsdialogene kan se ut basert på ny mal.
Merk: Det er Aksel-teamet som har "oversatt" oppsummeringssidene til ny mal, så dette er ikke nødvendigvis slik det vil se ut.
Endringer
| Dato | Versjon | Endringer |
|---|---|---|
| 31.05.2024 | 1 | Publiserte malen |
| 20.06.2024 | 2 | Justerte hvordan knappene nederst vises på mobil |