diff --git a/packages/familie-header/header.stories.tsx b/packages/familie-header/header.stories.tsx
index f6d8913c..6a54f3a2 100644
--- a/packages/familie-header/header.stories.tsx
+++ b/packages/familie-header/header.stories.tsx
@@ -30,8 +30,7 @@ const saksbehandler: Brukerinfo = {
const popover: PopoverItem = {
name: 'Logg ut',
- href: '#',
- onClick: () => {
+ onSelect: () => {
alert('Du har nå logget ut');
},
};
@@ -45,9 +44,16 @@ const PopoverDetail = () => (
);
-const eksterneLenkerForStory = [
- { name: 'Google', href: 'https://www.google.com', isExternal: true },
+const eksterneLenkerForStory: PopoverItem[] = [
+ {
+ name: 'Side med onClick',
+ onSelect: () => {
+ // tslint:disable-next-line:no-console
+ console.log('ekstern lenke med klikk');
+ },
+ },
{ name: 'NAV forside', href: 'https://www.nav.no' },
+ { name: 'Google', href: 'https://www.google.com', isExternal: true },
];
const defaultIdent = '12345678910';
@@ -150,6 +156,7 @@ export const HeaderOgSøk: React.FC = ({ ...args }) => {
søkeresultater={søkeresultat}
søkeresultatOnClick={x => {
settValgtResultat(x);
+ // tslint:disable-next-line:no-console
console.log('Du har klikket på et av resultatene', x);
}}
/>
diff --git a/packages/familie-header/src/header/Header.tsx b/packages/familie-header/src/header/Header.tsx
index 1f8dd4f3..ce58e6d3 100644
--- a/packages/familie-header/src/header/Header.tsx
+++ b/packages/familie-header/src/header/Header.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import '@navikt/ds-css';
-import { Dropdown, InternalHeader as NavHeader } from '@navikt/ds-react';
+import { ActionMenu, InternalHeader as NavHeader } from '@navikt/ds-react';
import { MenuGridIcon } from '@navikt/aksel-icons';
export interface Brukerinfo {
@@ -8,12 +8,14 @@ export interface Brukerinfo {
enhet?: string;
}
-export interface PopoverItem {
- name: string;
- href: string;
- isExternal?: boolean;
- onClick?: (e: React.SyntheticEvent) => void;
-}
+export type PopoverItem =
+ | {
+ name: string;
+ href: string;
+ isExternal?: boolean;
+ onSelect?: never;
+ }
+ | { name: string; href?: never; isExternal?: never; onSelect: (e: Event) => void };
export interface HeaderProps {
tittel: string;
@@ -39,67 +41,66 @@ interface LenkePopoverProps {
export const Bruker = ({ navn, enhet, popoverItems, popoverDetail }: BrukerProps) => {
return (
-
-
+
+
+
+
{(popoverItems || popoverDetail) && (
-
+
{popoverDetail}
- {popoverDetail && popoverItems && }
+ {popoverDetail && popoverItems && }
{popoverItems && (
-
+
{popoverItems.map((lenke, index) => {
- return ;
+ return ;
})}
-
+
)}
-
+
)}
-
+
);
};
export const LenkePopover = ({ lenker }: LenkePopoverProps) => {
return (
-
-
-
-
+
+
+
+
+
+
{lenker && (
-
-
+
+
{lenker.map((lenke, index) => {
- return ;
+ return ;
})}
-
-
+
+
)}
-
+
);
};
-const DropdownLenke: React.FC<{ lenke: PopoverItem }> = ({ lenke }) => {
- return (
-
- lenke?.onClick && lenke?.onClick(e)}
- >
- {lenke.name}
-
-
+const ActionMenuLenke: React.FC<{ lenke: PopoverItem }> = ({ lenke }) => {
+ return lenke.onSelect ? (
+ lenke?.onSelect && lenke?.onSelect(e)}>
+ {lenke.name}
+
+ ) : (
+
+ {lenke.name}
+
);
};