@altinn/altinn-components 0.5.0 → 0.5.1

package/.storybook/StoryDecorator.tsx

@@ -19,7 +19,7 @@ export const StoryDecorator = ({
   return (
       <RootProvider>
           <div className={styles.preview} data-theme={theme}>
-              <div className={styles.component}>{children}</div>
+              <div id="story-in-story-decorator-root" className={styles.component}>{children}</div>
               <span className={styles.tag} data-tag={state}>
                   {state}
               </span>

package/.storybook/main.ts

@@ -8,14 +8,13 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-themes",
     "@chromatic-com/storybook",
-    "@storybook/addon-interactions"
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y"
   ],
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+  docs: {},
 };
 export default config;

package/.storybook/preview.tsx

@@ -2,9 +2,35 @@ import { withThemeByDataAttribute } from "@storybook/addon-themes";
 import { Preview, StoryFn } from "@storybook/react";
 import { StoryDecorator } from "./StoryDecorator";
 import "../lib/css/global.css";
+import {A11yParameters} from "@storybook/addon-a11y";
+import { Rule, getRules } from "axe-core";
+
 /** @type { import('@storybook/react').Preview } */
+
+const enabledTags = [
+    "wcag2a",
+    "wcag2aa",
+    "wcag21a",
+    "wcag21aa",
+    "wcag22aa",
+    "best-practice",
+];
+
+const enabledRules: Rule[] = getRules(enabledTags).map((ruleMetadata) => ({
+    id: ruleMetadata.ruleId,
+    enabled: true
+}));
+
+const a11y: A11yParameters = {
+    config: {
+        rules: enabledRules,
+    },
+    element: '#story-in-story-decorator-root',
+};
+
 const preview: Preview = {
     parameters: {
+        a11y,
         controls: {
             matchers: {
                 color: /(background|color)$/i,
@@ -32,4 +58,6 @@ const preview: Preview = {
         }),
     ],
 };
+
+
 export default preview;

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.5.1](https://github.com/Altinn/altinn-components/compare/v0.5.0...v0.5.1) (2024-11-16)
+
+
+### Bug Fixes
+
+* add log out button and refactoring of global menu ([#50](https://github.com/Altinn/altinn-components/issues/50)) ([0fc8bfa](https://github.com/Altinn/altinn-components/commit/0fc8bfaa0feb113624da9e740aed54d61de15d4c))
+
 ## [0.5.0](https://github.com/Altinn/altinn-components/compare/v0.4.1...v0.5.0) (2024-11-15)
 
 

package/lib/components/Button/ButtonLabel.tsx

@@ -1,15 +1,17 @@
+import cx from 'classnames';
 import type { ReactNode } from 'react';
 import type { ButtonSize } from './ButtonBase';
 import styles from './buttonLabel.module.css';
 
 export interface ButtonLabelProps {
   size: ButtonSize;
+  className?: string;
   children: ReactNode;
 }
 
-export const ButtonLabel = ({ size, children }: ButtonLabelProps) => {
+export const ButtonLabel = ({ className, size, children }: ButtonLabelProps) => {
   return (
-    <span className={styles.label} data-size={size}>
+    <span className={cx(styles.label, className)} data-size={size}>
       {children}
     </span>
   );

package/lib/components/Dialog/Dialog.stories.ts

@@ -8,11 +8,15 @@ const meta = {
   parameters: {},
   argTypes: { body: { control: 'text' } },
   args: {
-    menu: [
-      {
-        items: [{ label: 'Menu 1' }],
-      },
-    ],
+    menu: {
+      id: 'context-menu',
+      items: [
+        {
+          label: 'Fjern',
+          id: 'remove',
+        },
+      ],
+    },
     updatedAt: '1999-05-26',
     updatedAtLabel: '26. mai 1999',
     title: 'Title',
@@ -42,9 +46,11 @@ export const Attachments: Story = {
       items: [
         {
           label: 'Dokument 1.pdf',
+          href: '',
         },
         {
           label: 'Dokument 2.pdf',
+          href: '',
         },
       ],
     },
@@ -106,6 +112,7 @@ export const Example: Story = {
       items: [
         {
           label: 'Vedtak om innlevering av bedriftsdata.pdf',
+          href: '',
         },
       ],
     },

package/lib/components/Dropdown/DropdownBase.tsx

@@ -6,14 +6,26 @@ export type DropdownPlacement = 'left' | 'right';
 
 export interface DropdownBaseProps {
   placement?: DropdownPlacement;
+  padding?: boolean;
   expanded?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-export const DropdownBase = ({ placement = 'left', expanded = false, className, children }: DropdownBaseProps) => {
+export const DropdownBase = ({
+  placement = 'left',
+  padding = true,
+  expanded = false,
+  className,
+  children,
+}: DropdownBaseProps) => {
   return (
-    <div className={cx(styles.dropdown, className)} data-placement={placement} aria-expanded={expanded}>
+    <div
+      className={cx(styles.dropdown, className)}
+      data-placement={placement}
+      data-padding={padding}
+      aria-expanded={expanded}
+    >
       {children}
     </div>
   );

package/lib/components/Dropdown/dropdownBase.module.css

@@ -16,13 +16,17 @@
   right: 0;
 }
 
+.dropdown[data-padding="trur"] {
+  padding: 0 0.5rem;
+}
+
 .dropdown {
   min-width: 14rem;
   margin-top: 0.5rem;
-  padding: 0 0.5rem;
   background-color: var(--neutral-background-default);
   border-radius: 0.375rem;
   box-shadow: var(--ds-shadow-md);
+  overflow: hidden;
 }
 
 .drawer .button {

package/lib/components/GlobalMenu/AccountButton.tsx

@@ -0,0 +1,29 @@
+import { MenuItemBase, MenuItemLabel, MenuItemMedia } from '../Menu';
+
+type Account = {
+  type: 'person' | 'company';
+  name: string;
+  description?: string;
+};
+
+export type AccountButtonProps = {
+  account: Account;
+  description?: string;
+  linkText?: string;
+  onClick?: () => void;
+};
+
+export const AccountButton = ({ account, linkText, onClick }: AccountButtonProps) => {
+  return (
+    <MenuItemBase size="lg" onClick={onClick} linkText={linkText} linkIcon="arrow-right">
+      <MenuItemMedia
+        size="lg"
+        avatar={{
+          name: account.name,
+          type: account.type,
+        }}
+      />
+      <MenuItemLabel size="lg" title={account?.name} description={account?.description} />
+    </MenuItemBase>
+  );
+};

package/lib/components/GlobalMenu/AccountMenu.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { AccountMenu } from './AccountMenu';
+
+const meta = {
+  title: 'GlobalMenu/AccountMenu',
+  component: AccountMenu,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    accountGroups: {
+      primary: {
+        title: 'Deg selv og favoritter',
+      },
+      secondary: {
+        title: 'Andre kontoer',
+      },
+    },
+    accounts: [
+      {
+        groupId: 'primary',
+        type: 'person',
+        name: 'Aurora Mikalsen',
+        selected: true,
+      },
+      {
+        groupId: 'favourites',
+        type: 'company',
+        name: 'Bergen Bar',
+        selected: false,
+      },
+      {
+        groupId: 'secondary',
+        type: 'company',
+        name: 'Keeperhansker AS',
+        selected: false,
+      },
+      {
+        groupId: 'secondary',
+        type: 'company',
+        name: 'Stadion drift AS',
+        selected: false,
+      },
+      {
+        groupId: 'favourites',
+        type: 'company',
+        name: 'Sportsklubben Brann',
+        selected: false,
+      },
+      {
+        groupId: 'secondary',
+        type: 'company',
+        name: 'Landslaget',
+        selected: false,
+      },
+    ],
+  },
+} satisfies Meta<typeof AccountMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/components/GlobalMenu/AccountMenu.tsx

@@ -0,0 +1,73 @@
+'use client';
+import { useState } from 'react';
+import { Menu, type MenuItemGroups, type MenuItemProps, type MenuSearchProps } from '../Menu';
+
+export interface AccountSearch extends MenuSearchProps {
+  getResultsLabel?: (hits: number) => string;
+  hidden?: boolean;
+}
+
+export interface AccountMenuItem {
+  type: 'person' | 'company';
+  name: string;
+  id?: string;
+  groupId?: string;
+  selected?: boolean;
+}
+
+export interface AccountMenuProps {
+  accounts?: AccountMenuItem[];
+  accountGroups?: MenuItemGroups;
+  accountSearch?: AccountSearch;
+}
+
+const defaultResultLabel = (hits: number) => `${hits} hits`;
+
+export const AccountMenu = ({ accounts = [], accountGroups = {}, accountSearch }: AccountMenuProps) => {
+  const accountMenu: MenuItemProps[] = accounts.map((account) => ({
+    id: account.name,
+    groupId: account.groupId || 'search',
+    selected: account.selected,
+    title: account.name,
+    avatar: {
+      type: account.type,
+      name: account.name,
+    },
+  }));
+
+  const [filterString, setFilterString] = useState<string>('');
+
+  const filteredAccountMenu = filterString
+    ? accountMenu
+        .filter((item) => item?.title?.toLowerCase().includes(filterString.toLowerCase()))
+        .map((item) => {
+          return {
+            ...item,
+            groupId: 'search',
+          };
+        })
+    : accountMenu;
+
+  const filterAccountGroups = filterString
+    ? {
+        search: {
+          title:
+            accountSearch?.getResultsLabel?.(filteredAccountMenu.length) ??
+            defaultResultLabel(filteredAccountMenu.length),
+        },
+      }
+    : accountGroups;
+
+  const accountSearchItem: MenuSearchProps = {
+    name: 'account-search',
+    value: filterString,
+    placeholder: accountSearch?.placeholder ?? 'Find account',
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => setFilterString(event.target.value),
+  };
+
+  const accountSwitcher: MenuItemProps[] = [
+    ...(filteredAccountMenu.length > 0 ? filteredAccountMenu : [{ id: 'search', groupId: 'search', hidden: true }]),
+  ];
+
+  return <Menu theme="global" search={accountSearchItem} groups={filterAccountGroups} items={accountSwitcher} />;
+};

package/lib/components/GlobalMenu/BackButton.tsx

@@ -0,0 +1,10 @@
+import { MenuItem } from '../Menu';
+
+export interface BackButtonProps {
+  label: string;
+  onClick?: () => void;
+}
+
+export const BackButton = ({ label, onClick }: BackButtonProps) => {
+  return <MenuItem id="back" icon="arrow-left" title={label} onClick={onClick} />;
+};

package/lib/components/GlobalMenu/GlobalMenu.stories.tsx

@@ -3,11 +3,62 @@ import { useState } from 'react';
 import { GlobalMenu } from './GlobalMenu';
 
 const meta = {
-  title: 'Header/GlobalMenu',
+  title: 'GlobalMenu/GlobalMenu',
   component: GlobalMenu,
   tags: ['autodocs'],
   parameters: {},
   args: {
+    accountGroups: {
+      primary: {
+        title: 'Deg selv og favoritter',
+      },
+      secondary: {
+        title: 'Andre kontoer',
+      },
+    },
+    currentAccount: {
+      type: 'person',
+      name: 'Mathias Dyngeland',
+      description: 'Fødselsnr. 07101995 XXXXXX',
+    },
+    accounts: [
+      {
+        groupId: 'primary',
+        type: 'person',
+        name: 'Mathias Dyngeland',
+        selected: true,
+      },
+      {
+        groupId: 'favourites',
+        type: 'company',
+        name: 'Bergen bar',
+        selected: false,
+      },
+      {
+        groupId: 'secondary',
+        type: 'company',
+        name: 'Keeperhansker AS',
+        selected: false,
+      },
+      {
+        groupId: 'secondary',
+        type: 'company',
+        name: 'Stadion drift AS',
+        selected: false,
+      },
+      {
+        groupId: 'favourites',
+        type: 'company',
+        name: 'Sportsklubben Brann',
+        selected: false,
+      },
+      {
+        groupId: 'secondary',
+        type: 'company',
+        name: 'Landslaget',
+        selected: false,
+      },
+    ],
     groups: {
       apps: {
         divider: true,
@@ -19,14 +70,45 @@ const meta = {
         groupId: 'apps',
         size: 'lg',
         icon: 'inbox',
-        label: 'Innboks',
+        title: 'Innboks',
+        badge: {
+          color: 'alert',
+          label: '4',
+        },
       },
       {
-        id: 'settings',
+        id: 'access',
         groupId: 'apps',
         size: 'lg',
-        icon: 'cog',
-        label: 'Settings',
+        icon: 'bookmark',
+        title: 'Tilganger',
+        badge: {
+          color: 'alert',
+          label: '2',
+        },
+      },
+      {
+        id: 'access',
+        groupId: 'apps',
+        size: 'lg',
+        icon: 'menu-grid',
+        title: 'Alle skjema',
+      },
+      {
+        id: 'startup',
+        groupId: 'help',
+        color: 'neutral',
+        size: 'sm',
+        icon: 'buildings2',
+        title: 'Starte og drive bedrift',
+      },
+      {
+        id: 'help',
+        groupId: 'help',
+        size: 'sm',
+        color: 'neutral',
+        icon: 'chat-exclamationmark',
+        title: 'Trenger du hjelp?',
       },
     ],
   },
@@ -39,43 +121,31 @@ export const Default: Story = {};
 
 export const Login: Story = {
   args: {
-    expanded: true,
+    currentAccount: undefined,
     items: [
       {
         id: 'login',
+        groupId: 'login',
         size: 'lg',
+        color: 'strong',
         icon: 'padlock-locked',
         title: 'Logg inn',
       },
       {
-        id: 'help',
-        size: 'lg',
-        icon: 'chat-exclamationmark',
-        title: 'Hjelp',
+        id: 'startup',
+        groupId: 'help',
+        color: 'neutral',
+        size: 'sm',
+        icon: 'buildings2',
+        title: 'Starte og drive bedrift',
       },
-    ],
-  },
-};
-
-export const ControlledStateLogin = () => {
-  const [expanded, setExpanded] = useState<boolean>(false);
-  return (
-    <GlobalMenu
-      {...Login.args}
-      expanded={expanded}
-      onToggle={() => setExpanded((prevState) => !prevState)}
-      items={Login.args.items ?? []}
-    />
-  );
-};
-
-export const Person: Story = {
-  args: {
-    accounts: [
       {
-        type: 'person',
-        name: 'Aurora Mikalsen',
-        selected: true,
+        id: 'help',
+        groupId: 'help',
+        color: 'neutral',
+        size: 'sm',
+        icon: 'chat-exclamationmark',
+        title: 'Trenger du hjelp?',
       },
     ],
   },
@@ -83,46 +153,20 @@ export const Person: Story = {
 
 export const Company: Story = {
   args: {
-    accounts: [
-      {
-        type: 'company',
-        name: 'Bergen bar',
-        selected: true,
-      },
-    ],
-  },
-};
-
-export const Expanded: Story = {
-  args: {
-    expanded: true,
-    accounts: [
-      {
-        type: 'company',
-        name: 'Bergen bar',
-        selected: true,
-      },
-    ],
-  },
-};
-
-export const CustomLabel: Story = {
-  args: {
-    menuLabel: 'Meny',
-    accounts: [
-      {
-        type: 'person',
-        name: 'Aurora Mikalsen',
-        selected: true,
-      },
-    ],
+    currentAccount: {
+      type: 'company',
+      name: 'Sportsklubben Brann',
+      description: 'Org. nr. 934908988',
+    },
   },
 };
 
-export const Accounts: Story = {
+export const CustomLabels: Story = {
   args: {
+    logoutLabel: 'Logg ut',
     menuLabel: 'Meny',
     backLabel: 'Tilbake',
+    changeLabel: 'Endre konto',
     accountSearch: {
       placeholder: 'Søk etter konto',
       getResultsLabel: (hits = 0) => {
@@ -133,58 +177,5 @@ export const Accounts: Story = {
       },
       hidden: false,
     },
-    expanded: true,
-    accountGroups: {
-      primary: {
-        title: 'Deg selv og favoritter',
-      },
-      secondary: {
-        title: 'Andre kontoer',
-      },
-    },
-    accounts: [
-      {
-        groupId: 'primary',
-        type: 'person',
-        name: 'Aurora Mikalsen',
-        selected: true,
-      },
-      {
-        groupId: 'favourites',
-        type: 'person',
-        name: 'Rakel Engelsvik',
-        selected: false,
-      },
-      {
-        groupId: 'favourites',
-        type: 'company',
-        name: 'Auroras keeperskole',
-        selected: false,
-      },
-      {
-        groupId: 'secondary',
-        type: 'company',
-        name: 'Keeperhansker AS',
-        selected: false,
-      },
-      {
-        groupId: 'secondary',
-        type: 'company',
-        name: 'Stadion drift AS',
-        selected: false,
-      },
-      {
-        groupId: 'secondary',
-        type: 'company',
-        name: 'Sportsklubben Brann',
-        selected: false,
-      },
-      {
-        groupId: 'secondary',
-        type: 'company',
-        name: 'Landslaget',
-        selected: false,
-      },
-    ],
   },
 };

package/lib/components/GlobalMenu/GlobalMenu.tsx

@@ -1,122 +1,74 @@
 'use client';
 import { type MouseEventHandler, useState } from 'react';
-import type { AvatarType } from '../Avatar';
-import { Menu, MenuItem, type MenuItemGroups, type MenuItemProps, type MenuSearchProps } from '../Menu';
-
-export type Account = {
-  type: AvatarType;
+import { Menu, type MenuItemGroups, type MenuItemProps } from '../Menu';
+import { AccountButton } from './AccountButton';
+import { AccountMenu, type AccountMenuProps } from './AccountMenu';
+import { BackButton } from './BackButton';
+import { GlobalMenuBase, GlobalMenuFooter, GlobalMenuHeader } from './GlobalMenuBase';
+import { LogoutButton } from './LogoutButton';
+
+export interface CurrentAccount {
+  type: 'person' | 'company';
   name: string;
-  selected?: boolean;
-  group?: string;
-};
-
-export interface AccountSearch extends MenuSearchProps {
-  getResultsLabel?: (hits: number) => string;
-  hidden?: boolean;
+  description?: string;
 }
 
-export type MobileMenuType = 'dropdown' | 'drawer';
-
-export interface GlobalMenuProps {
-  variant: MobileMenuType;
+export interface GlobalMenuProps extends AccountMenuProps {
+  currentEndUser?: CurrentAccount;
   expanded: boolean;
   onToggle: MouseEventHandler;
   items: MenuItemProps[];
   groups?: MenuItemGroups;
-  accounts?: Account[];
-  accountGroups?: MenuItemGroups;
-  accountSearch?: AccountSearch;
   menuLabel?: string;
   backLabel?: string;
+  changeLabel?: string;
+  logoutLabel?: string;
   className?: string;
 }
 
-const defaultResultLabel = (hits: number) => `${hits} hits`;
-
 export const GlobalMenu = ({
+  currentEndUser,
   accounts = [],
   accountGroups = {},
   accountSearch,
   items = [],
   groups,
+  changeLabel = 'Change',
+  logoutLabel = 'Logout',
   backLabel = 'Back',
 }: GlobalMenuProps) => {
-  const accountMenu: MenuItemProps[] = accounts.map((account) => ({
-    id: account.name,
-    group: account.group || 'search',
-    selected: account.selected,
-    title: account.name,
-    avatar: {
-      type: account.type,
-      name: account.name,
-    },
-  }));
-
-  const selectedAccount = accountMenu.find((account) => account.selected);
   const [selectAccount, setSelectAccount] = useState<boolean>(false);
-  const [filterString, setFilterString] = useState<string>('');
 
   const onToggleAccounts = () => {
     setSelectAccount((prevState) => !prevState);
   };
 
-  const accountMenuItem: MenuItemProps = {
-    ...selectedAccount,
-    id: 'account',
-    selected: false,
-    size: 'lg',
-    onClick: onToggleAccounts,
-  };
-
-  const MobileMenu = selectedAccount ? [accountMenuItem, ...items] : items;
-
-  const filteredAccountMenu = filterString
-    ? accountMenu
-        .filter((item) => item?.title?.toLowerCase().includes(filterString.toLowerCase()))
-        .map((item) => {
-          return {
-            ...item,
-            groupId: 'search',
-          };
-        })
-    : accountMenu;
-
-  const filterAccountGroups = filterString
-    ? {
-        search: {
-          title:
-            accountSearch?.getResultsLabel?.(filteredAccountMenu.length) ??
-            defaultResultLabel(filteredAccountMenu.length),
-        },
-      }
-    : accountGroups;
-
-  const accountSearchItem: MenuSearchProps = {
-    name: 'account-search',
-    value: filterString,
-    placeholder: accountSearch?.placeholder ?? 'Find account',
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => setFilterString(event.target.value),
-  };
-
-  const backItem: MenuItemProps = {
-    id: 'back',
-    title: backLabel ?? 'Back',
-    icon: 'arrow-left',
-    onClick: onToggleAccounts,
-  };
-
-  const accountSwitcher: MenuItemProps[] = [
-    ...(filteredAccountMenu.length > 0 ? filteredAccountMenu : [{ id: 'search', groupId: 'search', hidden: true }]),
-  ];
-
   if (selectAccount) {
     return (
-      <>
-        <MenuItem {...backItem} />
-        <Menu theme="global" search={accountSearchItem} groups={filterAccountGroups} items={accountSwitcher} />
-      </>
+      <GlobalMenuBase>
+        <BackButton onClick={onToggleAccounts} label={backLabel} />
+        <AccountMenu accounts={accounts} accountGroups={accountGroups} accountSearch={accountSearch} />
+      </GlobalMenuBase>
+    );
+  }
+
+  if (currentEndUser) {
+    return (
+      <GlobalMenuBase>
+        <GlobalMenuHeader>
+          <AccountButton account={currentEndUser} linkText={changeLabel} onClick={onToggleAccounts} />
+        </GlobalMenuHeader>
+        <Menu groups={groups} items={items} />
+        <GlobalMenuFooter>
+          <LogoutButton label={logoutLabel} />
+        </GlobalMenuFooter>
+      </GlobalMenuBase>
     );
   }
 
-  return <Menu theme="global" groups={groups} items={MobileMenu} />;
+  return (
+    <GlobalMenuBase>
+      <Menu groups={groups} items={items} />
+    </GlobalMenuBase>
+  );
 };

package/lib/components/GlobalMenu/GlobalMenuBase.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import styles from './globalMenuBase.module.css';
+
+export interface GlobalMenuBaseProps {
+  children: ReactNode;
+}
+
+export const GlobalMenuBase = ({ children }: GlobalMenuBaseProps) => {
+  return (
+    <nav className={styles.nav} data-theme="global">
+      {children}
+    </nav>
+  );
+};
+
+export const GlobalMenuHeader = ({ children }: GlobalMenuBaseProps) => {
+  return <header className={styles.header}>{children}</header>;
+};
+
+export const GlobalMenuFooter = ({ children }: GlobalMenuBaseProps) => {
+  return <footer className={styles.footer}>{children}</footer>;
+};

package/lib/components/GlobalMenu/LogoutButton.tsx

@@ -0,0 +1,19 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import { ButtonBase, ButtonLabel } from '../Button';
+import styles from './logoutButton.module.css';
+
+export interface LogoutButtonProps {
+  label?: string;
+  children?: ReactNode;
+  onClick?: MouseEventHandler;
+}
+
+export const LogoutButton = ({ label = 'Logout', children, onClick }: LogoutButtonProps) => {
+  return (
+    <ButtonBase className={styles.button} variant="outline" size="lg" onClick={onClick}>
+      <ButtonLabel className={styles.label} size="lg">
+        {children || label}
+      </ButtonLabel>
+    </ButtonBase>
+  );
+};

package/lib/components/GlobalMenu/globalMenuBase.module.css

@@ -0,0 +1,39 @@
+.nav {
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  padding: 0 0.5rem;
+}
+
+.header {
+  border-bottom: 1px solid var(--theme-border-subtle);
+}
+
+.footer {
+  border-top: 1px solid var(--theme-border-subtle);
+  padding: 1rem 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.drawer[aria-expanded="true"] {
+  display: block;
+  padding: 0.5rem;
+  z-index: 2;
+}
+
+.dropdown[aria-expanded="true"] {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .drawer[aria-expanded="true"] {
+    display: none;
+  }
+
+  .dropdown[aria-expanded="true"] {
+    display: block;
+    z-index: 2;
+  }
+}

package/lib/components/GlobalMenu/index.tsx

@@ -1 +1 @@
-export * from './GlobalMenu.tsx';
+export * from './GlobalMenu';

package/lib/components/GlobalMenu/logoutButton.module.css

@@ -0,0 +1,9 @@
+.button {
+  justify-content: center;
+}
+
+.label {
+  display: block;
+  width: 100%;
+  text-align: center;
+}

package/lib/components/Header/Header.tsx

@@ -48,8 +48,8 @@ export const Header = ({ search, menu }: HeaderProps) => {
           label={menu?.menuLabel}
         />
         {menu && (
-          <DropdownBase placement="right" expanded={currentId === 'menu'} className={styles.dropdown}>
-            <GlobalMenu {...menu} variant="dropdown" />
+          <DropdownBase padding={false} placement="right" expanded={currentId === 'menu'} className={styles.dropdown}>
+            <GlobalMenu {...menu} currentEndUser={selectedAccount} />
           </DropdownBase>
         )}
       </HeaderMenu>
@@ -64,7 +64,7 @@ export const Header = ({ search, menu }: HeaderProps) => {
       )}
       {menu && (
         <DrawerBase expanded={currentId === 'menu'} className={styles.drawer}>
-          <GlobalMenu {...menu} variant="drawer" expanded={currentId === 'menu'} />
+          <GlobalMenu {...menu} currentEndUser={selectedAccount} expanded={currentId === 'menu'} />
         </DrawerBase>
       )}
     </HeaderBase>

package/lib/components/Menu/MenuItem.tsx

@@ -31,6 +31,8 @@ export interface MenuItemProps {
   avatarGroup?: AvatarGroupProps;
   children?: ReactNode;
   items?: MenuItemProps[];
+  linkIcon?: IconName;
+  linkText?: string;
   className?: string;
 }
 

package/lib/components/Menu/MenuItemBase.tsx

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import type { ElementType, ReactNode } from 'react';
+import type { ElementType, MouseEventHandler, ReactNode } from 'react';
 import { Badge, type BadgeProps } from '../Badge';
 import { Icon, type IconName } from '../Icon';
 import styles from './menuItemBase.module.css';
@@ -9,11 +9,13 @@ export type MenuItemSize = 'sm' | 'md' | 'lg';
 
 export interface MenuItemBaseProps {
   as?: ElementType;
+  onClick?: MouseEventHandler;
   color?: MenuItemColor;
   children?: ReactNode;
   tabIndex?: number;
   size?: MenuItemSize;
   linkIcon?: IconName;
+  linkText?: string;
   badge?: BadgeProps;
   collapsible?: boolean;
   active?: boolean;
@@ -25,9 +27,11 @@ export interface MenuItemBaseProps {
 
 export const MenuItemBase = ({
   as,
+  onClick,
   size,
   color,
   linkIcon,
+  linkText,
   badge,
   tabIndex = 0,
   active = false,
@@ -54,6 +58,7 @@ export const MenuItemBase = ({
       aria-expanded={expanded}
       aria-disabled={disabled}
       aria-selected={selected}
+      onClick={onClick}
       className={cx(styles.item, className)}
       {...rest}
     >
@@ -63,7 +68,8 @@ export const MenuItemBase = ({
       </div>
       {applicableIcon && (
         <div className={styles.action}>
-          {applicableIcon && <Icon name={applicableIcon} className={styles.actionIcon} />}
+          <span className={styles.linkText}>{linkText}</span>
+          {applicableIcon && <Icon name={applicableIcon} className={styles.linkIcon} />}
         </div>
       )}
     </Component>

package/lib/components/Menu/menuItemBase.module.css

@@ -36,7 +36,12 @@
   padding: 10px;
 }
 
-.actionIcon {
+.linkText {
+  font-size: 0.875rem;
+  white-space: nowrap;
+}
+
+.linkIcon {
   font-size: 1.5rem;
 }
 

package/lib/components/Menu/menuItemLabel.module.css

@@ -4,12 +4,22 @@
   padding: 0 0.25rem;
 }
 
+.title {
+  color: var(--theme-text-default);
+}
+
 .title[data-size="lg"] {
   font-size: 1.125rem;
   line-height: 1.25;
   font-weight: 500;
 }
 
+.title[data-size="md"] {
+  font-size: 1rem;
+  line-height: 1.25;
+  font-weight: 500;
+}
+
 .title[data-size="sm"] {
   font-size: 1rem;
   line-height: 1.25;
@@ -17,6 +27,6 @@
 }
 
 .description {
-  font-size: 14px;
+  font-size: 0.875rem;
   color: var(--theme-text-subtle);
 }

package/lib/components/Menu/menuSearch.module.css

@@ -1,5 +1,6 @@
 .input {
   width: 100%;
+  height: 2.75rem;
   font-size: 0.875rem;
   line-height: 1rem;
   font-weight: normal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "main": "lib/index.ts",
   "description": "Reusable react components",
   "publishConfig": {
@@ -16,23 +16,25 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.3",
-    "@chromatic-com/storybook": "^1.9.0",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-onboarding": "^8.3.5",
-    "@storybook/addon-themes": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-a11y": "^8.4.4",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
+    "@storybook/addon-onboarding": "^8.4.4",
+    "@storybook/addon-themes": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/react": "^8.4.4",
+    "@storybook/react-vite": "^8.4.4",
+    "@storybook/test": "^8.4.4",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.7.1",
+    "axe-core": "^4.10.2",
     "lint-staged": "^15.2.10",
     "prop-types": "^15.8.1",
-    "storybook": "^8.3.5",
-    "storybook-addon-theme-provider": "^0.2.6",
+    "storybook": "^8.4.4",
+    "storybook-addon-theme-provider": "^0.2.8",
     "typescript": "^5.6.3",
     "vite": "^5.4.9"
   },

package/lib/components/Menu/__MenuGroup.tsx

@@ -1,18 +0,0 @@
-import type { ElementType, ReactNode } from 'react';
-import styles from './menu.module.css';
-
-export interface MenuGroupProps {
-  as?: ElementType;
-  expanded?: boolean;
-  divider?: boolean;
-  children?: ReactNode;
-}
-
-export const MenuGroup = ({ as = 'div', expanded, divider = true, children }: MenuGroupProps) => {
-  const Component = as;
-  return (
-    <Component aria-expanded={expanded} data-divider={divider} className={styles.group}>
-      {children}
-    </Component>
-  );
-};

package/lib/components/Menu/__menuItem.module.css

@@ -1,130 +0,0 @@
-.item {
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  column-gap: 4px;
-  border: 0;
-  user-select: none;
-  cursor: pointer;
-  margin: 0.5rem 0;
-}
-
-.item[aria-disabled="true"] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-/* size */
-
-.item[data-size="sm"] {
-  min-height: 44px;
-}
-
-/* content */
-
-.content {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  column-gap: 6px;
-  padding: 6px;
-}
-
-.action {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-}
-
-.actionIcon {
-  font-size: 1.5rem;
-}
-
-.media {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 5%;
-  width: 2rem;
-  height: 2rem;
-}
-
-.media[data-size="lg"] {
-  width: 44px;
-  height: 44px;
-}
-
-.icon {
-  font-size: 1.5rem;
-}
-
-/* label */
-
-.label {
-  display: flex;
-  flex-direction: column;
-  padding: 0 0.25rem;
-}
-
-/* title */
-
-.title[data-size="lg"] {
-  font-size: 1.125rem;
-  line-height: 1.25;
-  font-weight: 500;
-}
-
-.title[data-size="sm"] {
-  font-size: 1rem;
-  line-height: 1.25;
-  font-weight: 400;
-}
-
-.description {
-  font-size: 14px;
-  color: var(--theme-text-subtle);
-}
-
-.item:hover {
-  background-color: var(--theme-surface-default);
-}
-
-.item[aria-selected="true"] {
-  background-color: var(--theme-background-default);
-}
-
-.media[data-color="subtle"] {
-  background-color: var(--theme-background-default);
-  color: var(--theme-text-default);
-}
-
-.media[data-color="strong"] {
-  background-color: var(--theme-base-default);
-  color: var(--theme-background-default);
-}
-
-.item[data-color="company"]:hover {
-  background-color: var(--company-background-subtle);
-}
-
-.item[data-color="company"][aria-selected="true"] {
-  background-color: var(--company-surface-default);
-}
-
-.media[data-color="company"] {
-  background-color: var(--company-surface-default);
-}
-
-.item[data-color="person"]:hover {
-  background-color: var(--person-background-subtle);
-}
-
-.item[data-color="person"][aria-selected="true"] {
-  background-color: var(--person-surface-default);
-}
-
-.media[data-color="person"] {
-  background-color: var(--person-surface-default);
-}