@altinn/altinn-components 0.5.0 → 0.5.2

package/lib/components/GlobalMenu/GlobalMenu.tsx

@@ -1,122 +1,81 @@
 '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;
-  name: string;
-  selected?: boolean;
-  group?: string;
-};
-
-export interface AccountSearch extends MenuSearchProps {
-  getResultsLabel?: (hits: number) => string;
-  hidden?: boolean;
-}
-
-export type MobileMenuType = 'dropdown' | 'drawer';
-
-export interface GlobalMenuProps {
-  variant: MobileMenuType;
+import { Menu, type MenuItemGroups, type MenuItemProps } from '../Menu';
+import { type Account, 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 GlobalMenuProps extends AccountMenuProps {
   expanded: boolean;
   onToggle: MouseEventHandler;
   items: MenuItemProps[];
   groups?: MenuItemGroups;
-  accounts?: Account[];
-  accountGroups?: MenuItemGroups;
-  accountSearch?: AccountSearch;
   menuLabel?: string;
   backLabel?: string;
+  changeLabel?: string;
+  logoutLabel?: string;
   className?: string;
+  currentAccount?: Account;
+  changeCurrentAccount?: (id: string) => void;
 }
 
-const defaultResultLabel = (hits: number) => `${hits} hits`;
-
 export const GlobalMenu = ({
   accounts = [],
   accountGroups = {},
   accountSearch,
   items = [],
   groups,
+  changeLabel = 'Change',
+  logoutLabel = 'Logout',
   backLabel = 'Back',
+  currentAccount,
+  changeCurrentAccount,
 }: 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 [selectingAccount, setSelectingAccount] = useState<boolean>(false);
 
   const onToggleAccounts = () => {
-    setSelectAccount((prevState) => !prevState);
-  };
-
-  const accountMenuItem: MenuItemProps = {
-    ...selectedAccount,
-    id: 'account',
-    selected: false,
-    size: 'lg',
-    onClick: onToggleAccounts,
+    setSelectingAccount((prevState) => !prevState);
   };
 
-  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 onSelectAccount = (id: string) => {
+    onToggleAccounts();
+    changeCurrentAccount?.(id);
   };
 
-  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 (selectingAccount) {
+    return (
+      <GlobalMenuBase>
+        <BackButton onClick={onToggleAccounts} label={backLabel} />
+        <AccountMenu
+          currentAccount={currentAccount}
+          accounts={accounts}
+          accountGroups={accountGroups}
+          accountSearch={accountSearch}
+          onSelectAccount={onSelectAccount}
+        />
+      </GlobalMenuBase>
+    );
+  }
 
-  if (selectAccount) {
+  if (currentAccount) {
     return (
-      <>
-        <MenuItem {...backItem} />
-        <Menu theme="global" search={accountSearchItem} groups={filterAccountGroups} items={accountSwitcher} />
-      </>
+      <GlobalMenuBase>
+        <GlobalMenuHeader>
+          <AccountButton account={currentAccount} 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.stories.tsx

@@ -25,46 +25,46 @@ const meta = {
       },
       accounts: [
         {
+          id: 'party:aurora',
           groupId: 'primary',
           type: 'person',
           name: 'Aurora Mikalsen',
-          selected: true,
         },
         {
+          id: 'party:rakel',
           groupId: 'favourites',
           type: 'person',
           name: 'Rakel Engelsvik',
-          selected: false,
         },
         {
+          id: 'party:auroraskeeperskole',
           groupId: 'favourites',
           type: 'company',
           name: 'Auroras keeperskole',
-          selected: false,
         },
         {
+          id: 'party:aurorashandsker',
           groupId: 'secondary',
           type: 'company',
           name: 'Keeperhansker AS',
-          selected: false,
         },
         {
+          id: 'party:aurorasfotballskole',
           groupId: 'secondary',
           type: 'company',
           name: 'Stadion drift AS',
-          selected: false,
         },
         {
+          id: 'party:aurorasfotballskole',
           groupId: 'secondary',
           type: 'company',
           name: 'Sportsklubben Brann',
-          selected: false,
         },
         {
+          id: 'party:aurorasfotballskole',
           groupId: 'secondary',
           type: 'company',
           name: 'Landslaget',
-          selected: false,
         },
       ],
       items: [
@@ -94,10 +94,20 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    currentAccount: {
+      id: 'party:aurora',
+      type: 'person',
+      name: 'Aurora Mikalsen',
+    },
+  },
+};
 
 export const ControlledState = (args) => {
   const [q, setQ] = useState<string>('');
+  const currentEndUserId = 'party:aurora';
+  const [selectedAccountId, setSelectedAccountId] = useState<string>(currentEndUserId);
   const onChange = (event) => {
     setQ(event.target.value);
   };
@@ -160,6 +170,12 @@ export const ControlledState = (args) => {
   return (
     <Header
       {...args}
+      currentAccount={args.menu.accounts.find((account) => account.id === selectedAccountId)}
+      menu={{
+        ...args.menu,
+        ...args.menu.accounts,
+        changeCurrentAccount: setSelectedAccountId,
+      }}
       search={{
         ...args.search,
         value: q,

package/lib/components/Header/Header.tsx

@@ -2,6 +2,7 @@
 import { useEscapeKey } from '../../hooks';
 import { DrawerBase, DropdownBase } from '../Dropdown';
 import { GlobalMenu, type GlobalMenuProps } from '../GlobalMenu';
+import type { Account } from '../GlobalMenu/AccountButton.tsx';
 import { useRootContext } from '../RootProvider';
 import { Searchbar, type SearchbarProps } from '../Searchbar';
 import { HeaderBase } from './HeaderBase';
@@ -13,15 +14,11 @@ import styles from './header.module.css';
 export interface HeaderProps {
   menu: GlobalMenuProps;
   search?: SearchbarProps;
+  currentAccount?: Account;
 }
 
-export const Header = ({ search, menu }: HeaderProps) => {
+export const Header = ({ search, menu, currentAccount }: HeaderProps) => {
   const { currentId, toggleId, openId, closeAll } = useRootContext();
-  const selectedAccount = menu.accounts?.find((account) => account.selected);
-  const selectedAvatar = selectedAccount && {
-    type: selectedAccount.type,
-    name: selectedAccount.name,
-  };
 
   useEscapeKey(closeAll);
 
@@ -42,14 +39,19 @@ export const Header = ({ search, menu }: HeaderProps) => {
       <HeaderLogo className={styles.logo} />
       <HeaderMenu className={styles.menu}>
         <HeaderButton
-          avatar={selectedAvatar}
+          avatar={
+            currentAccount && {
+              type: currentAccount.type,
+              name: currentAccount.name,
+            }
+          }
           onClick={onToggleMenu}
           expanded={currentId === 'menu'}
           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} currentAccount={currentAccount} />
           </DropdownBase>
         )}
       </HeaderMenu>
@@ -64,7 +66,7 @@ export const Header = ({ search, menu }: HeaderProps) => {
       )}
       {menu && (
         <DrawerBase expanded={currentId === 'menu'} className={styles.drawer}>
-          <GlobalMenu {...menu} variant="drawer" expanded={currentId === 'menu'} />
+          <GlobalMenu {...menu} expanded={currentId === 'menu'} currentAccount={currentAccount} />
         </DrawerBase>
       )}
     </HeaderBase>

package/lib/components/Layout/Layout.stories.tsx

@@ -9,12 +9,17 @@ const header: HeaderProps = {
     name: 'search',
     placeholder: 'Søk i Altinn',
   },
+  currentAccount: {
+    id: 'party:aurora',
+    type: 'person',
+    name: 'Aurora Mikalsen',
+  },
   menu: {
     accounts: [
       {
+        id: 'party:aurora',
         type: 'person',
         name: 'Aurora Mikalsen',
-        selected: true,
       },
     ],
   },
@@ -197,7 +202,7 @@ export const ControlledStateSearch = (args) => {
 };
 
 export const InboxBulkMode = (args) => {
-  const [snackbars, setSnacbars] = useState([]);
+  const [snackbars, setSnackbars] = useState([]);
 
   const [itemsById, setItemsById] = useState({
     1: {

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/lib/stories/Inbox/InboxLayout.tsx

@@ -19,6 +19,7 @@ export const InboxLayout = ({ children }: InboxLayoutProps) => {
       footer={footer}
       header={{
         ...header,
+        currentAccount: accounts?.[0],
         menu: {
           accounts,
         },

package/lib/stories/Inbox/InboxProvider.tsx

@@ -5,7 +5,6 @@ interface AccountProps {
   id?: string;
   type?: string;
   name?: string;
-  selected?: boolean;
 }
 
 export interface InboxDefaultValue {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "main": "lib/index.ts",
   "description": "Reusable react components",
   "publishConfig": {
@@ -15,24 +15,26 @@
     "react": "^18.3.1"
   },
   "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",
+    "@biomejs/biome": "1.9.4",
+    "@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>
-  );
-};