@altinn/altinn-components 0.4.1 → 0.5.1

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,
@@ -16,17 +67,48 @@ const meta = {
     items: [
       {
         id: 'inbox',
-        group: 'apps',
+        groupId: 'apps',
         size: 'lg',
         icon: 'inbox',
-        label: 'Innboks',
+        title: 'Innboks',
+        badge: {
+          color: 'alert',
+          label: '4',
+        },
+      },
+      {
+        id: 'access',
+        groupId: 'apps',
+        size: 'lg',
+        icon: 'bookmark',
+        title: 'Tilganger',
+        badge: {
+          color: 'alert',
+          label: '2',
+        },
       },
       {
-        id: 'settings',
-        group: 'apps',
+        id: 'access',
+        groupId: 'apps',
         size: 'lg',
-        icon: 'cog',
-        label: 'Settings',
+        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: [
-      {
-        group: 'primary',
-        type: 'person',
-        name: 'Aurora Mikalsen',
-        selected: true,
-      },
-      {
-        group: 'favourites',
-        type: 'person',
-        name: 'Rakel Engelsvik',
-        selected: false,
-      },
-      {
-        group: 'favourites',
-        type: 'company',
-        name: 'Auroras keeperskole',
-        selected: false,
-      },
-      {
-        group: 'secondary',
-        type: 'company',
-        name: 'Keeperhansker AS',
-        selected: false,
-      },
-      {
-        group: 'secondary',
-        type: 'company',
-        name: 'Stadion drift AS',
-        selected: false,
-      },
-      {
-        group: 'secondary',
-        type: 'company',
-        name: 'Sportsklubben Brann',
-        selected: false,
-      },
-      {
-        group: '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, type MenuGroups, MenuItem, 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?: MenuGroups;
-  accounts?: Account[];
-  accountGroups?: MenuGroups;
-  accountSearch?: AccountSearch;
+  groups?: MenuItemGroups;
   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,
-            group: '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', group: '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.stories.ts → Header.stories.tsx}

@@ -1,11 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { Header } from './Header';
 
 const meta = {
   title: 'Header/Header',
   component: Header,
   tags: ['autodocs'],
-  parameters: {},
+  parameters: {
+    layout: 'fullscreen',
+  },
   args: {
     expanded: true,
     search: {
@@ -22,43 +25,43 @@ const meta = {
       },
       accounts: [
         {
-          group: 'primary',
+          groupId: 'primary',
           type: 'person',
           name: 'Aurora Mikalsen',
           selected: true,
         },
         {
-          group: 'favourites',
+          groupId: 'favourites',
           type: 'person',
           name: 'Rakel Engelsvik',
           selected: false,
         },
         {
-          group: 'favourites',
+          groupId: 'favourites',
           type: 'company',
           name: 'Auroras keeperskole',
           selected: false,
         },
         {
-          group: 'secondary',
+          groupId: 'secondary',
           type: 'company',
           name: 'Keeperhansker AS',
           selected: false,
         },
         {
-          group: 'secondary',
+          groupId: 'secondary',
           type: 'company',
           name: 'Stadion drift AS',
           selected: false,
         },
         {
-          group: 'secondary',
+          groupId: 'secondary',
           type: 'company',
           name: 'Sportsklubben Brann',
           selected: false,
         },
         {
-          group: 'secondary',
+          groupId: 'secondary',
           type: 'company',
           name: 'Landslaget',
           selected: false,
@@ -93,21 +96,77 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-export const Company: Story = {
-  args: {
-    menu: {
-      ...meta.args?.menu,
-      accounts: [
+export const ControlledState = (args) => {
+  const [q, setQ] = useState<string>('');
+  const onChange = (event) => {
+    setQ(event.target.value);
+  };
+
+  const scopes = [
+    {
+      groupId: '1',
+      id: 'inbox',
+      href: '#',
+      label: q
+        ? () => {
+            return (
+              <span>
+                <mark>{q}</mark> i innboksen
+              </span>
+            );
+          }
+        : 'Alt i innboksen',
+    },
+    {
+      groupId: '1',
+      id: 'global',
+      href: '#',
+      label: q
+        ? () => {
+            return (
+              <span>
+                <mark>{q}</mark> i hele Altinn
+              </span>
+            );
+          }
+        : 'Alt i hele Altinn',
+    },
+  ];
+
+  const suggestions = q
+    ? [
         {
-          type: 'company',
-          name: 'Bergen bar',
-          selected: true,
+          groupId: '2',
+          href: 'http://www.altinn.no',
+          label: 'Skattemelding 2024',
         },
         {
-          type: 'person',
-          name: 'Aurora Mikalsen',
+          groupId: '2',
+          href: 'http://www.altinn.no',
+          label: 'Skattemelding 2025',
         },
-      ],
+      ].filter((item) => item.label.toLowerCase().includes((q ?? '').toLowerCase()))
+    : [];
+
+  const autocomplete = {
+    groups: {
+      2: {
+        title: `${suggestions.length} treff i innboksen`,
+      },
     },
-  },
+    items: [...scopes, ...suggestions],
+  };
+
+  return (
+    <Header
+      {...args}
+      search={{
+        ...args.search,
+        value: q,
+        onChange,
+        onClear: () => setQ(''),
+        autocomplete,
+      }}
+    />
+  );
 };