Skip to content

Commit

Permalink
Referansesider: dagoversikten BreadCrumbs
Browse files Browse the repository at this point in the history
  • Loading branch information
@JulianNymark
JulianNymark committed Oct 9, 2024
1 parent dcf5452 commit fdbd634
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 75 deletions.
8 changes: 6 additions & 2 deletions examples/referansesider/src/components/Page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ export const Page = ({
options,
}: {
children: ReactNode;
options?: { width?: "large" | "medium" | "xlarge"; footer?: "none" };
options?: {
width?: "large" | "medium" | "xlarge" | "2xlarge";
footer?: "none";
};
}) => {
const _options = options ?? {
width: "medium",
Expand All @@ -21,7 +24,8 @@ export const Page = ({
"lg:px-0",
{ [`lg:w-[874px]`]: width === "medium" },
{ [`lg:w-[921px]`]: width === "large" },
{ [`lg:w-[1872px]`]: width === "xlarge" },
{ [`lg:w-[1440px]`]: width === "xlarge" },
{ [`lg:w-[1872px]`]: width === "2xlarge" },
{ ["min-h-screen"]: footer !== "none" },
)}
>
Expand Down
167 changes: 94 additions & 73 deletions examples/referansesider/src/routes/dagoversikten.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,60 @@
import { createFileRoute } from "@tanstack/react-router";
import { ReactNode, createFileRoute } from "@tanstack/react-router";
import styled from "styled-components";
import {
BaggageIcon,
BriefcaseIcon,
CalendarIcon,
ChevronLeftCircleIcon,
ChevronRightCircleIcon,
FilesIcon,
PersonIcon,
PersonCircleFillIcon,
PlateFillIcon,
} from "@navikt/aksel-icons";
import * as tokens from "@navikt/ds-tokens/dist/darkside/tokens";
import { Button } from "../components/Button";
import { Link } from "../components/Link";
import { Page } from "../components/Page";
import { Tag } from "../components/Tag";

const Breadcrumb = () => {
return (
<div className="flex">
<div className="flex">
<PersonIcon />
<span>Mia Cathrine Svendsen (37 år)</span>
</div>
<div className="flex">
<span>121084 34566</span>
<FilesIcon />
</div>
<div className="flex">
<span>Aktør-ID 12345678910113</span>
<FilesIcon />
</div>
<span>Boenhet 999 (Ummo)</span>
</div>
);
};
let Breadcrumb: ReactNode;
{
const ScDiv = styled.div`
background-color: ${tokens.BgNeutral};
padding-block: 8px;
padding-inline: 16px;
`;

const ScCrumb = styled.div`
&[data-directory="true"]::after {
margin-inline: 20px;
content: "/";
}
`;

Breadcrumb = () => {
return (
<ScDiv className="flex">
<ScCrumb className="flex items-center" data-directory="true">
<PersonCircleFillIcon className="text-red-600 mb-0.5 mx-1" />
<span>Mia Cathrine Svendsen (37 år)</span>
</ScCrumb>
<ScCrumb className="flex items-center" data-directory="true">
<span>121084 34566</span>
<FilesIcon className="mb-0.5 mx-1" />
</ScCrumb>
<ScCrumb className="flex items-center" data-directory="true">
<span>Aktør-ID 12345678910113</span>
<FilesIcon className="mb-0.5 mx-1" />
</ScCrumb>
<ScCrumb>Boenhet 999 (Ummo)</ScCrumb>
</ScDiv>
);
};
}

const Timeline = () => {
return (
<div className="flex flex-col">
<div className="flex flex-col my-4">
<div className="flex">
<span>Nov 22</span>
<span>Okt 22</span>
Expand Down Expand Up @@ -74,62 +93,64 @@ const Timeline = () => {

const DagoversiktPage = () => {
return (
<div>
<Breadcrumb />
<Timeline />
<div className="flex border border-gray-300">
<div className="flex flex-col border border-gray-300">
<div className="flex gap-2">
<Tag $variant="neutral">Forlengelse</Tag>
<Tag $variant="info">Revurdering</Tag>
</div>
<div className="flex">
<CalendarIcon />
<span>09.05.19 - 16.05.19</span>
</div>
<div className="flex">
<CalendarIcon />
<span>09.05.19</span>
</div>
<div className="flex">
<PlateFillIcon className="text-red-600" />
<span>09.05.19 - 16.05.19</span>
</div>
<div className="flex">
<BriefcaseIcon />
<span>09.05.19 - 16.05.19</span>
</div>
<div className="flex justify-between">
<span>Månedsbeløp:</span>
<span>10 000,00 kr</span>
<Page options={{ width: "xlarge" }}>
<div>
<Breadcrumb />
<Timeline />
<div className="flex border border-gray-300">
<div className="flex flex-col border border-gray-300">
<div className="flex gap-2">
<Tag $variant="neutral">Forlengelse</Tag>
<Tag $variant="info">Revurdering</Tag>
</div>
<div className="flex">
<CalendarIcon />
<span>09.05.19 - 16.05.19</span>
</div>
<div className="flex">
<CalendarIcon />
<span>09.05.19</span>
</div>
<div className="flex">
<PlateFillIcon className="text-red-600" />
<span>09.05.19 - 16.05.19</span>
</div>
<div className="flex">
<BriefcaseIcon />
<span>09.05.19 - 16.05.19</span>
</div>
<div className="flex justify-between">
<span>Månedsbeløp:</span>
<span>10 000,00 kr</span>
</div>
<span className="mt-4">UTBETALINGSINFORMASJON</span>
<div className="flex justify-between">
<span>Sykepengegrunnlag:</span>
<span>240 123,00 kr</span>
</div>
<div className="flex justify-between">
<span>Utbetalingsdager:</span>
<span>3 dager</span>
</div>
<div className="flex justify-between mt-4 font-bold">
<span>Beløp for perioden</span>
<span>2 769,00 kr</span>
</div>
<Link>Simulering</Link>
<div>
<Button variant="primary">Fatt vedtak</Button>
<Button variant="secondary">Kan ikke behandles her</Button>
</div>
</div>
<span className="mt-4">UTBETALINGSINFORMASJON</span>
<div className="flex justify-between">
<span>Sykepengegrunnlag:</span>
<span>240 123,00 kr</span>
<div className="border grow border-gray-300">
<div>Vis varsler (3 av 4 er sjekket)</div>
</div>
<div className="flex justify-between">
<span>Utbetalingsdager:</span>
<span>3 dager</span>
<div className="border border-gray-300">
<div>Historikk</div>
</div>
<div className="flex justify-between mt-4 font-bold">
<span>Beløp for perioden</span>
<span>2 769,00 kr</span>
</div>
<Link>Simulering</Link>
<div>
<Button variant="primary">Fatt vedtak</Button>
<Button variant="secondary">Kan ikke behandles her</Button>
</div>
</div>
<div className="border grow border-gray-300">
<div>Vis varsler (3 av 4 er sjekket)</div>
</div>
<div className="border border-gray-300">
<div>Historikk</div>
</div>
</div>
</div>
</Page>
);
};

Expand Down

0 comments on commit fdbd634

Please sign in to comment.