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} + ); };