@altinn/altinn-components 0.5.1 → 0.6.0

package/lib/components/GlobalMenu/AccountButton.tsx

@@ -1,6 +1,7 @@
 import { MenuItemBase, MenuItemLabel, MenuItemMedia } from '../Menu';
 
-type Account = {
+export type Account = {
+  id: string;
   type: 'person' | 'company';
   name: string;
   description?: string;
@@ -11,11 +12,27 @@ export type AccountButtonProps = {
   description?: string;
   linkText?: string;
   onClick?: () => void;
+  multipleAccounts?: boolean;
 };
 
-export const AccountButton = ({ account, linkText, onClick }: AccountButtonProps) => {
+export const AccountButton = ({ account, linkText, onClick, multipleAccounts }: AccountButtonProps) => {
+  if (multipleAccounts) {
+    return (
+      <MenuItemBase size="lg" onClick={onClick} linkText={linkText} linkIcon="arrow-right" as="button">
+        <MenuItemMedia
+          size="lg"
+          avatar={{
+            name: account.name,
+            type: account.type,
+          }}
+        />
+        <MenuItemLabel size="lg" title={account?.name} description={account?.description} />
+      </MenuItemBase>
+    );
+  }
+
   return (
-    <MenuItemBase size="lg" onClick={onClick} linkText={linkText} linkIcon="arrow-right">
+    <MenuItemBase size="lg" as="div">
       <MenuItemMedia
         size="lg"
         avatar={{

package/lib/components/GlobalMenu/AccountMenu.tsx

@@ -10,7 +10,7 @@ export interface AccountSearch extends MenuSearchProps {
 export interface AccountMenuItem {
   type: 'person' | 'company';
   name: string;
-  id?: string;
+  id: string;
   groupId?: string;
   selected?: boolean;
 }
@@ -19,20 +19,29 @@ export interface AccountMenuProps {
   accounts?: AccountMenuItem[];
   accountGroups?: MenuItemGroups;
   accountSearch?: AccountSearch;
+  currentAccount?: AccountMenuItem;
+  onSelectAccount?: (id: string) => void;
 }
 
 const defaultResultLabel = (hits: number) => `${hits} hits`;
 
-export const AccountMenu = ({ accounts = [], accountGroups = {}, accountSearch }: AccountMenuProps) => {
+export const AccountMenu = ({
+  accounts = [],
+  accountGroups = {},
+  accountSearch,
+  onSelectAccount,
+  currentAccount,
+}: AccountMenuProps) => {
   const accountMenu: MenuItemProps[] = accounts.map((account) => ({
-    id: account.name,
+    id: account.id || account.name,
     groupId: account.groupId || 'search',
-    selected: account.selected,
+    selected: account.selected ?? currentAccount?.id === account.id,
     title: account.name,
     avatar: {
       type: account.type,
       name: account.name,
     },
+    onClick: () => onSelectAccount?.(account.id || account.name),
   }));
 
   const [filterString, setFilterString] = useState<string>('');

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

@@ -23,40 +23,40 @@ const meta = {
     },
     accounts: [
       {
+        id: 'party:mathias',
         groupId: 'primary',
         type: 'person',
         name: 'Mathias Dyngeland',
-        selected: true,
       },
       {
+        id: 'party:bergerbar',
         groupId: 'favourites',
         type: 'company',
         name: 'Bergen bar',
-        selected: false,
       },
       {
+        id: 'party:keeperhansker',
         groupId: 'secondary',
         type: 'company',
         name: 'Keeperhansker AS',
-        selected: false,
       },
       {
+        id: 'party:stadiondrift',
         groupId: 'secondary',
         type: 'company',
         name: 'Stadion drift AS',
-        selected: false,
       },
       {
+        id: 'party:brann',
         groupId: 'favourites',
         type: 'company',
         name: 'Sportsklubben Brann',
-        selected: false,
       },
       {
+        id: 'party:landslaget',
         groupId: 'secondary',
         type: 'company',
         name: 'Landslaget',
-        selected: false,
       },
     ],
     groups: {

package/lib/components/GlobalMenu/GlobalMenu.tsx

@@ -1,67 +1,79 @@
 'use client';
-import { type MouseEventHandler, useState } from 'react';
+import { useState } from 'react';
 import { Menu, type MenuItemGroups, type MenuItemProps } from '../Menu';
-import { AccountButton } from './AccountButton';
+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 CurrentAccount {
-  type: 'person' | 'company';
-  name: string;
-  description?: string;
-}
+import { LogoutButton, type LogoutButtonProps } from './LogoutButton';
 
 export interface GlobalMenuProps extends AccountMenuProps {
-  currentEndUser?: CurrentAccount;
-  expanded: boolean;
-  onToggle: MouseEventHandler;
   items: MenuItemProps[];
   groups?: MenuItemGroups;
   menuLabel?: string;
   backLabel?: string;
+  logoutButton?: LogoutButtonProps;
   changeLabel?: string;
-  logoutLabel?: string;
   className?: string;
+  currentAccount?: Account;
+  changeCurrentAccount?: (id: string) => void;
 }
 
 export const GlobalMenu = ({
-  currentEndUser,
   accounts = [],
   accountGroups = {},
   accountSearch,
   items = [],
   groups,
   changeLabel = 'Change',
-  logoutLabel = 'Logout',
   backLabel = 'Back',
+  currentAccount,
+  changeCurrentAccount,
+  logoutButton,
 }: GlobalMenuProps) => {
-  const [selectAccount, setSelectAccount] = useState<boolean>(false);
+  const [selectingAccount, setSelectingAccount] = useState<boolean>(false);
 
   const onToggleAccounts = () => {
-    setSelectAccount((prevState) => !prevState);
+    setSelectingAccount((prevState) => !prevState);
+  };
+
+  const onSelectAccount = (id: string) => {
+    onToggleAccounts();
+    changeCurrentAccount?.(id);
   };
 
-  if (selectAccount) {
+  if (selectingAccount) {
     return (
       <GlobalMenuBase>
         <BackButton onClick={onToggleAccounts} label={backLabel} />
-        <AccountMenu accounts={accounts} accountGroups={accountGroups} accountSearch={accountSearch} />
+        <AccountMenu
+          currentAccount={currentAccount}
+          accounts={accounts}
+          accountGroups={accountGroups}
+          accountSearch={accountSearch}
+          onSelectAccount={onSelectAccount}
+        />
       </GlobalMenuBase>
     );
   }
 
-  if (currentEndUser) {
+  if (currentAccount) {
     return (
       <GlobalMenuBase>
         <GlobalMenuHeader>
-          <AccountButton account={currentEndUser} linkText={changeLabel} onClick={onToggleAccounts} />
+          <AccountButton
+            account={currentAccount}
+            linkText={changeLabel}
+            multipleAccounts={accounts.length > 1}
+            onClick={onToggleAccounts}
+          />
         </GlobalMenuHeader>
         <Menu groups={groups} items={items} />
-        <GlobalMenuFooter>
-          <LogoutButton label={logoutLabel} />
-        </GlobalMenuFooter>
+        {logoutButton && (
+          <GlobalMenuFooter>
+            <LogoutButton {...logoutButton} />
+          </GlobalMenuFooter>
+        )}
       </GlobalMenuBase>
     );
   }

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,26 +2,24 @@
 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';
 import { HeaderButton } from './HeaderButton';
 import { HeaderLogo } from './HeaderLogo';
 import { HeaderMenu } from './HeaderMenu';
+import { HeaderSearch } from './HeaderSearch';
 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,29 +40,30 @@ 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 padding={false} placement="right" expanded={currentId === 'menu'} className={styles.dropdown}>
-            <GlobalMenu {...menu} currentEndUser={selectedAccount} />
+            <GlobalMenu {...menu} currentAccount={currentAccount} />
           </DropdownBase>
         )}
       </HeaderMenu>
       {search && (
-        <Searchbar
-          {...search}
-          className={styles.search}
-          expanded={currentId === 'search'}
-          onClose={onSearchClose}
-          onFocus={onSearchFocus}
-        />
+        <HeaderSearch expanded={currentId === 'search'}>
+          <Searchbar {...search} expanded={currentId === 'search'} onClose={onSearchClose} onFocus={onSearchFocus} />
+        </HeaderSearch>
       )}
       {menu && (
         <DrawerBase expanded={currentId === 'menu'} className={styles.drawer}>
-          <GlobalMenu {...menu} currentEndUser={selectedAccount} expanded={currentId === 'menu'} />
+          <GlobalMenu {...menu} currentAccount={currentAccount} />
         </DrawerBase>
       )}
     </HeaderBase>

package/lib/components/Header/HeaderButton.tsx

@@ -15,6 +15,7 @@ export interface HeaderButtonProps extends ButtonProps {
   className?: string;
   expanded?: boolean;
   icon?: IconName;
+  tabIndex?: number;
 }
 
 export const HeaderButton = ({

package/lib/components/Header/HeaderSearch.tsx

@@ -0,0 +1,17 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './headerSearch.module.css';
+
+export interface HeaderSearchProps {
+  className?: string;
+  expanded?: boolean;
+  children?: ReactNode;
+}
+
+export const HeaderSearch = ({ expanded = false, className, children }: HeaderSearchProps) => {
+  return (
+    <div className={cx(styles.search, className)} aria-expanded={expanded}>
+      {children}
+    </div>
+  );
+};

package/lib/components/Header/header.module.css

@@ -22,24 +22,3 @@
     display: block;
   }
 }
-
-/* search */
-
-.search {
-  width: 100%;
-}
-
-@media (min-width: 1024px) {
-  .search {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    max-width: 320px;
-  }
-
-  .search[aria-expanded="true"] {
-    z-index: 2;
-    max-width: 640px;
-  }
-}

package/lib/components/Header/headerSearch.module.css

@@ -0,0 +1,21 @@
+.search {
+  width: 100%;
+}
+
+.search[aria-expanded="true"] {
+  z-index: 2;
+}
+
+@media (min-width: 1024px) {
+  .search {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    max-width: 320px;
+  }
+
+  .search[aria-expanded="true"] {
+    max-width: 640px;
+  }
+}

package/lib/components/History/HistoryList.stories.ts

@@ -11,7 +11,8 @@ const meta = {
   args: {
     items: [
       {
-        createdAt: '2004-09-22 13:34',
+        createdAt: '2024-09-22 13:34',
+        createdAtLabel: '22. september 2024 kl 13.34',
         createdBy: {
           name: 'Eirik Horneland',
         },
@@ -44,6 +45,7 @@ const meta = {
       },
       {
         createdAt: '2004-09-09 13:34',
+        createdAtLabel: '22. september 2024 kl 13.34',
         createdBy: {
           name: 'Eirik Horneland',
         },

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/List/ListItemBase.tsx

@@ -1,6 +1,7 @@
 import cx from 'classnames';
 import type { ElementType, KeyboardEvent, KeyboardEventHandler, ReactNode } from 'react';
 import { Badge, type BadgeProps } from '../Badge';
+import { ContextMenu, type ContextMenuProps } from '../ContextMenu';
 import { Icon, type IconName } from '../Icon';
 import styles from './listItemBase.module.css';
 
@@ -10,6 +11,7 @@ export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 interface ListItemBaseProps {
   as?: ElementType;
   size?: ListItemSize;
+  menu?: ContextMenuProps;
   linkIcon?: IconName;
   color?: ListItemColor;
   badge?: BadgeProps;
@@ -39,6 +41,7 @@ export const ListItemBase = ({
   selected,
   expanded,
   linkIcon,
+  menu,
   badge,
   onClick,
   onKeyPress,
@@ -71,6 +74,7 @@ export const ListItemBase = ({
       </div>
       <div className={styles.action}>
         {badge && <Badge {...badge} />}
+        {menu && <ContextMenu {...menu} />}
         {applicableIcon && <Icon name={applicableIcon} className={styles.linkIcon} />}
       </div>
     </Component>

package/lib/components/List/listBase.module.css

@@ -14,3 +14,17 @@
 .list[data-spacing="lg"] {
   row-gap: 16px;
 }
+
+/*
+
+.list[data-spacing="none"] > :first-child {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.list[data-spacing="none"] > :last-child {
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+*/

package/lib/components/List/listItemBase.module.css

@@ -1,8 +1,6 @@
 /* reset */
 
 .item {
-  border: none;
-
   color: inherit;
   font: inherit;
   text-align: inherit;
@@ -77,6 +75,15 @@
   box-shadow: var(--ds-shadow-xs);
 }
 
+.item:hover {
+  outline: 2px solid var(--theme-border-strong);
+  z-index: 2;
+}
+
+.item:hover strong {
+  text-decoration: underline;
+}
+
 .item[data-active="true"] {
   background-color: var(--theme-surface-default);
 }

package/lib/components/Menu/MenuInputField.tsx

@@ -0,0 +1,38 @@
+import type { ChangeEventHandler } from 'react';
+import styles from './menuInputField.module.css';
+
+type InputType = 'text' | 'date' | 'search';
+
+export interface MenuInputFieldProps {
+  placeholder?: string;
+  type?: InputType;
+  label?: string;
+  name: string;
+  value: string;
+  onChange: ChangeEventHandler;
+}
+
+export const MenuInputField = ({
+  label,
+  type = 'text',
+  value,
+  name,
+  placeholder = 'Søk',
+  onChange,
+}: MenuInputFieldProps) => {
+  return (
+    <label className={styles.field}>
+      {label && <span className={styles.label}>{label}</span>}
+      <input
+        data-value={value && true}
+        type={type}
+        value={value}
+        name={name}
+        placeholder={placeholder}
+        className={styles.input}
+        onChange={onChange}
+        autoComplete="off"
+      />
+    </label>
+  );
+};

package/lib/components/Menu/MenuItemBase.tsx

@@ -51,7 +51,7 @@ export const MenuItemBase = ({
   return (
     <Component
       role="menuitem"
-      tabIndex={!disabled && tabIndex}
+      tabIndex={disabled ? '-1' : (tabIndex ?? 0)}
       data-size={size}
       data-color={color}
       data-active={active}

package/lib/components/Menu/MenuOption.tsx

@@ -10,7 +10,7 @@ export type MenuOptionType = 'checkbox' | 'radio';
 export interface MenuOptionProps {
   value: string | number;
   label: string;
-  group?: string;
+  groupId?: string;
   size?: MenuItemSize;
   name?: string;
   title?: string;

package/lib/components/Menu/index.ts

@@ -2,6 +2,7 @@ export * from './MenuItemBase';
 export * from './MenuItemLabel';
 export * from './MenuItemMedia';
 export * from './MenuItem';
+export * from './MenuInputField';
 export * from './MenuOption';
 export * from './MenuSearch';
 export * from './MenuHeader';