From fdbd6340121f228cbc24bea371fb5b18c733c186 Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Wed, 9 Oct 2024 12:37:13 +0200
Subject: [PATCH] Referansesider: dagoversikten BreadCrumbs

---
 .../referansesider/src/components/Page.tsx    |   8 +-
 .../src/routes/dagoversikten.tsx              | 167 ++++++++++--------
 2 files changed, 100 insertions(+), 75 deletions(-)

diff --git a/examples/referansesider/src/components/Page.tsx b/examples/referansesider/src/components/Page.tsx
index 875a9ae0ef..7e9f22b5ab 100644
--- a/examples/referansesider/src/components/Page.tsx
+++ b/examples/referansesider/src/components/Page.tsx
@@ -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",
@@ -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" },
       )}
     >
diff --git a/examples/referansesider/src/routes/dagoversikten.tsx b/examples/referansesider/src/routes/dagoversikten.tsx
index f5960c01a0..54695a5d04 100644
--- a/examples/referansesider/src/routes/dagoversikten.tsx
+++ b/examples/referansesider/src/routes/dagoversikten.tsx
@@ -1,4 +1,5 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { ReactNode, createFileRoute } from "@tanstack/react-router";
+import styled from "styled-components";
 import {
   BaggageIcon,
   BriefcaseIcon,
@@ -6,36 +7,54 @@ import {
   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>
@@ -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>
   );
 };