feat(header.tsx): kan vise ekstra info i brukers dropdown før lenkene (…

…#1595)
navikt · Dec 16, 2024 · 85753bb · 85753bb
1 parent 8d2c73d
commit 85753bb
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git 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
@@ -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,14 +29,15 @@ export interface HeaderProps {
 interface BrukerProps {
     navn: string;
     enhet?: string;
+    popoverDetail?: React.ReactNode;
     popoverItems?: PopoverItem[];
 }
 
 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>