@altinn/altinn-components 0.2.1 → 0.3.0

package/lib/components/{Header → GlobalMenu}/GlobalMenu.tsx

@@ -1,10 +1,7 @@
 'use client';
-import cx from 'classnames';
 import { type MouseEventHandler, useState } from 'react';
 import type { AvatarType } from '../Avatar';
 import { Menu, type MenuGroups, MenuItem, type MenuItemProps, type MenuSearchProps } from '../Menu';
-import { HeaderButton } from './HeaderButton';
-import styles from './globalMenu.module.css';
 
 export type Account = {
   type: AvatarType;
@@ -18,7 +15,10 @@ export interface AccountSearch extends MenuSearchProps {
   hidden?: boolean;
 }
 
+export type MobileMenuType = 'dropdown' | 'drawer';
+
 export interface GlobalMenuProps {
+  variant: MobileMenuType;
   expanded: boolean;
   onToggle: MouseEventHandler;
   items: MenuItemProps[];
@@ -34,15 +34,11 @@ export interface GlobalMenuProps {
 const defaultResultLabel = (hits: number) => `${hits} hits`;
 
 export const GlobalMenu = ({
-  className,
-  expanded,
-  onToggle,
   accounts = [],
   accountGroups = {},
   accountSearch,
   items = [],
   groups,
-  menuLabel = 'Menu',
   backLabel = 'Back',
 }: GlobalMenuProps) => {
   const accountMenu: MenuItemProps[] = accounts.map((account) => ({
@@ -72,7 +68,7 @@ export const GlobalMenu = ({
     onClick: onToggleAccounts,
   };
 
-  const globalMenu = selectedAccount ? [accountMenuItem, ...items] : items;
+  const MobileMenu = selectedAccount ? [accountMenuItem, ...items] : items;
 
   const filteredAccountMenu = filterString
     ? accountMenu
@@ -113,19 +109,14 @@ export const GlobalMenu = ({
     ...(filteredAccountMenu.length > 0 ? filteredAccountMenu : [{ id: 'search', group: 'search', hidden: true }]),
   ];
 
-  return (
-    <div className={cx(styles.button, className)}>
-      <HeaderButton as="div" avatar={accountMenuItem.avatar} onClick={onToggle} expanded={expanded} label={menuLabel} />
-      <div className={styles.dropdown} aria-expanded={expanded}>
-        {selectAccount ? (
-          <>
-            <MenuItem {...backItem} />
-            <Menu theme="global" search={accountSearchItem} groups={filterAccountGroups} items={accountSwitcher} />
-          </>
-        ) : (
-          <Menu theme="global" groups={groups} items={globalMenu} />
-        )}
-      </div>
-    </div>
-  );
+  if (selectAccount) {
+    return (
+      <>
+        <MenuItem {...backItem} />
+        <Menu theme="global" search={accountSearchItem} groups={filterAccountGroups} items={accountSwitcher} />
+      </>
+    );
+  }
+
+  return <Menu theme="global" groups={groups} items={MobileMenu} />;
 };

package/lib/components/GlobalMenu/index.tsx

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

package/lib/components/Header/Header.stories.ts

@@ -6,39 +6,79 @@ const meta = {
   component: Header,
   tags: ['autodocs'],
   parameters: {},
-  args: {},
-} satisfies Meta<typeof Header>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Person: Story = {
   args: {
     expanded: true,
-    globalMenu: {
+    search: {
+      placeholder: 'Søk i Altinn',
+    },
+    menu: {
+      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,
+        },
       ],
-      menu: [
+      items: [
         {
+          id: '1',
           icon: 'airplane',
           size: 'lg',
           label: 'Section 1',
         },
         {
+          id: '2',
           icon: 'briefcase',
           size: 'lg',
           label: 'Section 2',
         },
         {
+          id: '3',
           size: 'lg',
           label: 'Section 3',
           icon: 'camera',
@@ -46,29 +86,17 @@ export const Person: Story = {
       ],
     },
   },
-};
+} satisfies Meta<typeof Header>;
 
-export const Company: Story = {
-  args: {
-    globalMenu: {
-      accounts: [
-        {
-          type: 'company',
-          name: 'Bergen bar',
-          selected: true,
-        },
-        {
-          type: 'person',
-          name: 'Aurora Mikalsen',
-        },
-      ],
-    },
-  },
-};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
 
-export const CompanyAndMenu: Story = {
+export const Company: Story = {
   args: {
-    globalMenu: {
+    menu: {
+      ...meta.args?.menu,
       accounts: [
         {
           type: 'company',

package/lib/components/Header/Header.tsx

@@ -1,29 +1,36 @@
 'use client';
+import cx from 'classnames';
 import { useState } from 'react';
-import { GlobalMenu, type GlobalMenuProps } from './GlobalMenu';
+import { Backdrop, DrawerBase, DropdownBase } from '../Dropdown';
+import { GlobalMenu, type GlobalMenuProps } from '../GlobalMenu';
+import { HeaderBase } from './HeaderBase';
+import { HeaderButton } from './HeaderButton';
 import { HeaderLogo } from './HeaderLogo';
+import { HeaderMenu } from './HeaderMenu';
 import { HeaderSearch, type HeaderSearchProps } from './HeaderSearch';
 import styles from './header.module.css';
 
-export type HeaderColor = 'default' | 'dark' | 'light';
+export type HeaderExpandedType = 'search' | 'menu' | null;
 
 export interface HeaderAccountProps {
   type?: string;
   name?: string;
 }
 
-type ExpandedType = 'search' | 'account';
-
 export interface HeaderProps {
-  color?: HeaderColor;
   menu: GlobalMenuProps;
   search?: HeaderSearchProps;
 }
 
-export const Header = ({ color, search, menu }: HeaderProps) => {
-  const [expandedType, setExpandedType] = useState<ExpandedType | null>(null);
+export const Header = ({ search, menu }: HeaderProps) => {
+  const [expandedType, setExpandedType] = useState<HeaderExpandedType | null>(null);
+  const selectedAccount = menu?.accounts?.find((account) => account.selected);
+  const selectedAvatar = selectedAccount && {
+    type: selectedAccount.type,
+    name: selectedAccount.name,
+  };
 
-  const onToggle = (type: ExpandedType) => {
+  const onToggle = (type: HeaderExpandedType) => {
     if (expandedType === type) {
       setExpandedType(null);
     } else {
@@ -40,16 +47,30 @@ export const Header = ({ color, search, menu }: HeaderProps) => {
   };
 
   return (
-    <header className={styles.header} data-color={color}>
+    <HeaderBase
+      className={cx(
+        styles.header,
+        expandedType === 'menu' && styles.menuExpanded,
+        expandedType === 'search' && styles.searchExpanded,
+      )}
+      expanded={(expandedType && true) || false}
+    >
+      <Backdrop className={styles.backdrop} />
       <HeaderLogo className={styles.logo} />
-      {menu && (
-        <GlobalMenu
-          {...menu}
-          expanded={expandedType === 'account'}
-          onToggle={() => onToggle('account')}
-          className={styles.button}
+      <HeaderMenu className={styles.menu}>
+        <HeaderButton
+          avatar={selectedAvatar}
+          onClick={() => onToggle('menu')}
+          expanded={expandedType === 'menu'}
+          label={menu?.menuLabel}
         />
-      )}
+        {menu && (
+          <DropdownBase expanded={expandedType === 'menu'} className={styles.dropdown}>
+            <GlobalMenu {...menu} variant="dropdown" />
+          </DropdownBase>
+        )}
+      </HeaderMenu>
+
       {search && (
         <HeaderSearch
           {...search}
@@ -59,6 +80,11 @@ export const Header = ({ color, search, menu }: HeaderProps) => {
           onFocus={onSearchFocus}
         />
       )}
-    </header>
+      {menu && (
+        <DrawerBase expanded={expandedType === 'menu'} className={styles.drawer}>
+          <GlobalMenu {...menu} variant="drawer" expanded={expandedType === 'menu'} />
+        </DrawerBase>
+      )}
+    </HeaderBase>
   );
 };

package/lib/components/Header/HeaderBase.tsx

@@ -1,10 +1,17 @@
+import cx from 'classnames';
 import type { ReactNode } from 'react';
-import styles from './header.module.css';
+import styles from './headerBase.module.css';
 
 export interface HeaderBaseProps {
+  expanded?: boolean;
+  className?: string;
   children?: ReactNode;
 }
 
-export const HeaderBase = ({ children }: HeaderBaseProps) => {
-  return <header className={styles.header}>{children}</header>;
+export const HeaderBase = ({ expanded, className, children }: HeaderBaseProps) => {
+  return (
+    <header className={cx(styles.header, className)} aria-expanded={expanded}>
+      {children}
+    </header>
+  );
 };

package/lib/components/Header/HeaderButton.stories.ts

@@ -43,6 +43,22 @@ export const Company: Story = {
   },
 };
 
+export const CompanyGroup: Story = {
+  args: {
+    avatarGroup: {
+      defaultType: 'company',
+      items: [
+        {
+          name: 'Bergen bar',
+        },
+        {
+          name: 'Sportsklubben Brann',
+        },
+      ],
+    },
+  },
+};
+
 export const Expanded: Story = {
   args: {
     expanded: true,

package/lib/components/Header/HeaderButton.tsx

@@ -1,6 +1,7 @@
 import cx from 'classnames';
 import type { ElementType } from 'react';
 import { Avatar, type AvatarProps } from '../Avatar';
+import { AvatarGroup, type AvatarGroupProps } from '../Avatar';
 import { ButtonBase, type ButtonProps } from '../Button';
 import { Icon, type IconName } from '../Icon';
 
@@ -9,6 +10,7 @@ import styles from './headerButton.module.css';
 export interface HeaderButtonProps extends ButtonProps {
   label?: string;
   avatar?: AvatarProps;
+  avatarGroup?: AvatarGroupProps;
   as?: ElementType;
   className?: string;
   expanded?: boolean;
@@ -19,6 +21,7 @@ export const HeaderButton = ({
   className,
   as = 'button',
   avatar,
+  avatarGroup,
   icon = 'padlock-locked',
   expanded,
   label = 'Menu',
@@ -35,6 +38,15 @@ export const HeaderButton = ({
     );
   }
 
+  if (avatarGroup) {
+    return (
+      <ButtonBase {...buttonProps} as={as} className={cx(styles.button, className)}>
+        <span className={styles.label}>{label}</span>
+        <AvatarGroup {...avatarGroup} size="sm" />
+      </ButtonBase>
+    );
+  }
+
   if (avatar) {
     return (
       <ButtonBase {...buttonProps} as={as} className={cx(styles.button, className)}>

package/lib/components/Header/HeaderMenu.tsx

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

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

@@ -1,21 +1,35 @@
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 1rem;
-  padding: 1rem;
+.backdrop {
+  display: none;
+  z-index: 2;
 }
 
-/* color */
+.header .drawer[aria-expanded="true"] {
+  display: block;
+}
 
-.header[data-color="light"] {
-  background-color: var(--global-background-default);
+.header .dropdown[aria-expanded="true"] {
+  width: 320px;
+  display: none;
 }
 
-.header[data-color="dark"] {
-  background-color: var(--global-base-default);
-  color: #fff;
+/* menu */
+
+.header.menuExpanded {
+  background-color: white;
+}
+
+@media (min-width: 1024px) {
+  .header.menuExpanded {
+    background-color: transparent;
+  }
+
+  .header.menuExpanded .backdrop {
+    display: block;
+  }
+
+  .header.menuExpanded .menu {
+    z-index: 2;
+  }
 }
 
 /* search */
@@ -24,7 +38,31 @@
   width: 100%;
 }
 
+.header.searchExpanded {
+  margin-top: -72px;
+}
+
+.header.searchExpanded .search {
+  z-index: 2;
+}
+
+.header.searchExpanded .backdrop {
+  display: block;
+}
+
 @media (min-width: 1024px) {
+  .header.searchExpanded {
+    margin-top: 0;
+  }
+
+  .header .drawer[aria-expanded="true"] {
+    display: none;
+  }
+
+  .header .dropdown[aria-expanded="true"] {
+    display: block;
+  }
+
   .search {
     position: absolute;
     left: 0;

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

@@ -0,0 +1,8 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 1rem;
+}

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

@@ -6,6 +6,7 @@
   background-color: var(--global-base-default);
   color: white;
   padding: 0.625rem;
+  border: none;
   border-radius: 4px;
 }
 

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

@@ -0,0 +1,3 @@
+.menu {
+  position: relative;
+}

package/lib/components/Header/index.tsx

@@ -2,4 +2,3 @@ export * from './Header';
 export * from './HeaderBase';
 export * from './HeaderLogo';
 export * from './HeaderButton';
-export * from './GlobalMenu.tsx';