From 85753bbe3f0cfa67fe0112bed83e19f7255b69b9 Mon Sep 17 00:00:00 2001
From: Hanne Olsen <hanne.olsen@nav.no>
Date: Mon, 16 Dec 2024 10:27:28 +0100
Subject: [PATCH] =?UTF-8?q?feat(header.tsx):=20kan=20vise=20ekstra=20info?=
 =?UTF-8?q?=20i=20brukers=20dropdown=20f=C3=B8r=20lenkene=20(#1595)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/familie-header/header.stories.tsx    | 12 +++++-
 packages/familie-header/src/header/Header.tsx | 40 ++++++++++++-------
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/packages/familie-header/header.stories.tsx b/packages/familie-header/header.stories.tsx
index 2ac72078..f6d8913c 100644
--- a/packages/familie-header/header.stories.tsx
+++ b/packages/familie-header/header.stories.tsx
@@ -8,7 +8,7 @@ import {
     byggTomRessurs,
     Ressurs,
 } from '@navikt/familie-typer';
-import { BodyShort } from '@navikt/ds-react';
+import { BodyShort, Detail } from '@navikt/ds-react';
 import { idnr } from '@navikt/fnrvalidator';
 import { Endringslogg } from '@navikt/familie-endringslogg';
 
@@ -36,6 +36,15 @@ const popover: PopoverItem = {
     },
 };
 
+const PopoverDetail = () => (
+    <dl>
+        <BodyShort as="dt" size="small">
+            Mer info til saksbehandler
+        </BodyShort>
+        <Detail as="dd">En ekstra detalj her</Detail>
+    </dl>
+);
+
 const eksterneLenkerForStory = [
     { name: 'Google', href: 'https://www.google.com', isExternal: true },
     { name: 'NAV forside', href: 'https://www.nav.no' },
@@ -124,6 +133,7 @@ export const HeaderOgSøk: React.FC = ({ ...args }) => {
             <Header
                 tittel={'tittel'}
                 brukerinfo={saksbehandler}
+                brukerPopoverDetail={<PopoverDetail />}
                 brukerPopoverItems={[popover]}
                 tittelHref={'#'}
                 eksterneLenker={eksterneLenkerForStory}
diff --git a/packages/familie-header/src/header/Header.tsx b/packages/familie-header/src/header/Header.tsx
index cf0c5689..1f8dd4f3 100644
--- a/packages/familie-header/src/header/Header.tsx
+++ b/packages/familie-header/src/header/Header.tsx
@@ -20,6 +20,7 @@ export interface HeaderProps {
     brukerinfo: Brukerinfo;
     tittelHref?: string;
     children?: React.ReactNode | React.ReactNode[];
+    brukerPopoverDetail?: React.ReactNode;
     brukerPopoverItems?: PopoverItem[];
     eksterneLenker: PopoverItem[];
     tittelOnClick?: () => void;
@@ -28,6 +29,7 @@ export interface HeaderProps {
 interface BrukerProps {
     navn: string;
     enhet?: string;
+    popoverDetail?: React.ReactNode;
     popoverItems?: PopoverItem[];
 }
 
@@ -35,7 +37,7 @@ interface LenkePopoverProps {
     lenker: PopoverItem[];
 }
 
-export const Bruker = ({ navn, enhet, popoverItems }: BrukerProps) => {
+export const Bruker = ({ navn, enhet, popoverItems, popoverDetail }: BrukerProps) => {
     return (
         <Dropdown>
             <NavHeader.UserButton
@@ -44,13 +46,17 @@ export const Bruker = ({ navn, enhet, popoverItems }: BrukerProps) => {
                 description={enhet ? `Enhet: ${enhet}` : 'Ukjent enhet'}
                 className="ml-auto"
             />
-            {popoverItems && (
+            {(popoverItems || popoverDetail) && (
                 <Dropdown.Menu>
-                    <Dropdown.Menu.List>
-                        {popoverItems.map((lenke, index) => {
-                            return <DropdownLenke key={index} lenke={lenke} />;
-                        })}
-                    </Dropdown.Menu.List>
+                    {popoverDetail}
+                    {popoverDetail && popoverItems && <Dropdown.Menu.Divider />}
+                    {popoverItems && (
+                        <Dropdown.Menu.List>
+                            {popoverItems.map((lenke, index) => {
+                                return <DropdownLenke key={index} lenke={lenke} />;
+                            })}
+                        </Dropdown.Menu.List>
+                    )}
                 </Dropdown.Menu>
             )}
         </Dropdown>
@@ -84,14 +90,16 @@ export const LenkePopover = ({ lenker }: LenkePopoverProps) => {
 
 const DropdownLenke: React.FC<{ lenke: PopoverItem }> = ({ lenke }) => {
     return (
-        <a
-            href={lenke.href}
-            target={lenke.isExternal ? '_blank' : ''}
-            rel={lenke.isExternal ? 'noopener noreferrer' : ''}
-            onClick={e => lenke?.onClick && lenke?.onClick(e)}
-        >
-            <Dropdown.Menu.List.Item>{lenke.name}</Dropdown.Menu.List.Item>
-        </a>
+        <Dropdown.Menu.List.Item>
+            <a
+                href={lenke.href}
+                target={lenke.isExternal ? '_blank' : ''}
+                rel={lenke.isExternal ? 'noopener noreferrer' : ''}
+                onClick={e => lenke?.onClick && lenke?.onClick(e)}
+            >
+                {lenke.name}
+            </a>
+        </Dropdown.Menu.List.Item>
     );
 };
 
@@ -100,6 +108,7 @@ export const Header = ({
     children,
     brukerinfo,
     tittelHref = '/',
+    brukerPopoverDetail,
     brukerPopoverItems,
     eksterneLenker = [],
     tittelOnClick,
@@ -118,6 +127,7 @@ export const Header = ({
             <Bruker
                 navn={brukerinfo.navn}
                 enhet={brukerinfo.enhet}
+                popoverDetail={brukerPopoverDetail}
                 popoverItems={brukerPopoverItems}
             />
         </NavHeader>