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 = () => (
+
+
+ Mer info til saksbehandler
+
+ En ekstra detalj her
+
+);
+
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 }) => {
}
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 (
{
description={enhet ? `Enhet: ${enhet}` : 'Ukjent enhet'}
className="ml-auto"
/>
- {popoverItems && (
+ {(popoverItems || popoverDetail) && (
-
- {popoverItems.map((lenke, index) => {
- return ;
- })}
-
+ {popoverDetail}
+ {popoverDetail && popoverItems && }
+ {popoverItems && (
+
+ {popoverItems.map((lenke, index) => {
+ return ;
+ })}
+
+ )}
)}
@@ -84,14 +90,16 @@ export const LenkePopover = ({ lenker }: LenkePopoverProps) => {
const DropdownLenke: React.FC<{ lenke: PopoverItem }> = ({ lenke }) => {
return (
- lenke?.onClick && lenke?.onClick(e)}
- >
- {lenke.name}
-
+
+ lenke?.onClick && lenke?.onClick(e)}
+ >
+ {lenke.name}
+
+
);
};
@@ -100,6 +108,7 @@ export const Header = ({
children,
brukerinfo,
tittelHref = '/',
+ brukerPopoverDetail,
brukerPopoverItems,
eksterneLenker = [],
tittelOnClick,
@@ -118,6 +127,7 @@ export const Header = ({