import {
ArrowLeftIcon,
FloppydiskIcon,
PaperplaneIcon,
TrashIcon,
} from "@navikt/aksel-icons";
import {
Bleed,
BodyLong,
Box,
FormProgress,
FormSummary,
GuidePanel,
Heading,
Link,
Page,
Tag,
VStack,
BodyShort,
Button,
HGrid,
Hide,
Show,
} from "@navikt/ds-react";
import React from "react";
import { useEffect } from "react";
function Example() {
useDekorator();
return (
<Page footer={<Footer />}>
<Header />
<Page.Block as="main" width="text" gutters>
<VStack gap="space-32">
<VStack gap="space-12">
<Bleed asChild marginInline={{ lg: "space-128" }}>
<Box
width={{ xs: "64px", lg: "96px" }}
height={{ xs: "64px", lg: "96px" }}
asChild
position={{ xs: "relative", lg: "absolute" }}
>
<ApplicationPictogram />
</Box>
</Bleed>
<VStack gap="space-4" align="start">
<Heading level="1" size="xlarge">
Søknad om [ytelse]
</Heading>
<Tag variant="neutral-moderate" size="small">
Nav 10-07.03 (Om søknaden har ID)
</Tag>
</VStack>
</VStack>
<div data-aksel-template="form-summarypage-v5">
<Link href="#">
<ArrowLeftIcon aria-hidden /> Forrige steg
</Link>
<Box paddingBlock="space-24 space-20">
<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.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.Footer>
<FormSummary.EditLink href="/eksempel" />
</FormSummary.Footer>
</FormSummary>
<FormSummary>
<FormSummary.Header>
<FormSummary.Heading level="2">Barnetillegg</FormSummary.Heading>
</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.Footer>
<FormSummary.EditLink href="/eksempel" />
</FormSummary.Footer>
</FormSummary>
<VStack gap="space-16">
<BodyShort as="div" size="small" textColor="subtle">
Sist lagret: 10. mars 2024 kl. 13.55
</BodyShort>
<HGrid
gap={{ xs: "space-16", sm: "space-32 space-16" }}
columns={{ xs: 1, sm: 2 }}
width={{ sm: "fit-content" }}
>
<Hide above="sm" asChild>
<Button
variant="primary"
icon={<PaperplaneIcon aria-hidden />}
iconPosition="right"
>
Send søknad
</Button>
</Hide>
<Button
variant="secondary"
icon={<ArrowLeftIcon aria-hidden />}
iconPosition="left"
>
Forrige steg
</Button>
<Show above="sm" asChild>
<Button
variant="primary"
icon={<PaperplaneIcon aria-hidden />}
iconPosition="right"
>
Send søknad
</Button>
</Show>
<Box
asChild
marginBlock={{ xs: "space-16 space-0", sm: "space-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 = (props: React.SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="96"
height="96"
viewBox="0 0 72 72"
fill="none"
aria-hidden
{...props}
>
<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(",")}]`
: ""
}`}
/>
);
}
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);
};
}, []);
}
