fix(familie-header): endre fra DropdownMenu til ActionMenu (#1599)

Siden DropdownMenu ikke er klikkbare på hele feltet og i tillegg skal deprecates så bytter vi til nye ActionMenu. Endrer også kontrakten til PopoverItem slik at man ENTEN sender med href eller sender med onSelectct. BREAKING CHANGE: Må endre på hvordan vi sender med popoverItems
navikt · Jan 9, 2025 · 35fa1ed · 35fa1ed
1 parent 851e011
commit 35fa1ed
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 53 deletions.
diff --git 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 = () => (
     </dl>
 );
 
-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
@@ -1,19 +1,21 @@
 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 {
     navn: string;
     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 (
-        <Dropdown>
-            <NavHeader.UserButton
-                as={Dropdown.Toggle}
-                name={navn}
-                description={enhet ? `Enhet: ${enhet}` : 'Ukjent enhet'}
-                className="ml-auto"
-            />
+        <ActionMenu>
+            <ActionMenu.Trigger>
+                <NavHeader.UserButton
+                    name={navn}
+                    description={enhet ? `Enhet: ${enhet}` : 'Ukjent enhet'}
+                    className="ml-auto"
+                />
+            </ActionMenu.Trigger>
             {(popoverItems || popoverDetail) && (
-                <Dropdown.Menu>
+                <ActionMenu.Content>
                     {popoverDetail}
-                    {popoverDetail && popoverItems && <Dropdown.Menu.Divider />}
+                    {popoverDetail && popoverItems && <ActionMenu.Divider />}
                     {popoverItems && (
-                        <Dropdown.Menu.List>
+                        <ActionMenu.Group label={''}>
                             {popoverItems.map((lenke, index) => {
-                                return <DropdownLenke key={index} lenke={lenke} />;
+                                return <ActionMenuLenke key={index} lenke={lenke} />;
                             })}
-                        </Dropdown.Menu.List>
+                        </ActionMenu.Group>
                     )}
-                </Dropdown.Menu>
+                </ActionMenu.Content>
             )}
-        </Dropdown>
+        </ActionMenu>
     );
 };
 
 export const LenkePopover = ({ lenker }: LenkePopoverProps) => {
     return (
-        <Dropdown>
-            <NavHeader.Button as={Dropdown.Toggle} className="ml-auto">
-                <MenuGridIcon
-                    fr="mask"
-                    style={{ fontSize: '1.5rem' }}
-                    title="Andre systemer"
-                    onResize={undefined}
-                    onResizeCapture={undefined}
-                />
-            </NavHeader.Button>
+        <ActionMenu>
+            <ActionMenu.Trigger>
+                <NavHeader.Button className="ml-auto">
+                    <MenuGridIcon fontSize={'1.5rem'} title="Andre systemer" />
+                </NavHeader.Button>
+            </ActionMenu.Trigger>
             {lenker && (
-                <Dropdown.Menu>
-                    <Dropdown.Menu.List>
+                <ActionMenu.Content>
+                    <ActionMenu.Group label={''}>
                         {lenker.map((lenke, index) => {
-                            return <DropdownLenke lenke={lenke} key={index} />;
+                            return <ActionMenuLenke lenke={lenke} key={index} />;
                         })}
-                    </Dropdown.Menu.List>
-                </Dropdown.Menu>
+                    </ActionMenu.Group>
+                </ActionMenu.Content>
             )}
-        </Dropdown>
+        </ActionMenu>
     );
 };
 
-const DropdownLenke: React.FC<{ lenke: PopoverItem }> = ({ lenke }) => {
-    return (
-        <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>
+const ActionMenuLenke: React.FC<{ lenke: PopoverItem }> = ({ lenke }) => {
+    return lenke.onSelect ? (
+        <ActionMenu.Item onSelect={e => lenke?.onSelect && lenke?.onSelect(e)}>
+            {lenke.name}
+        </ActionMenu.Item>
+    ) : (
+        <ActionMenu.Item
+            as={'a'}
+            href={lenke.href}
+            target={lenke.isExternal ? '_blank' : ''}
+            rel={lenke.isExternal ? 'noopener noreferrer' : ''}
+        >
+            {lenke.name}
+        </ActionMenu.Item>
     );
 };