@altinn/altinn-components 0.0.1

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

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { GlobalMenu } from './GlobalMenu';
+
+const meta = {
+  title: 'Header/GlobalMenu',
+  component: GlobalMenu,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    groups: {
+      apps: {
+        divider: true,
+      },
+    },
+    items: [
+      {
+        id: 'inbox',
+        group: 'apps',
+        size: 'lg',
+        icon: 'inbox',
+        label: 'Innboks',
+      },
+      {
+        id: 'settings',
+        group: 'apps',
+        size: 'lg',
+        icon: 'cog',
+        label: 'Settings',
+      },
+    ],
+  },
+} satisfies Meta<typeof GlobalMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Login: Story = {
+  args: {
+    expanded: true,
+    items: [
+      {
+        id: 'login',
+        size: 'lg',
+        icon: 'padlock-locked',
+        title: 'Logg inn',
+      },
+      {
+        id: 'help',
+        size: 'lg',
+        icon: 'chat-exclamationmark',
+        title: 'Hjelp',
+      },
+    ],
+  },
+};
+
+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,
+      },
+    ],
+  },
+};
+
+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,
+      },
+    ],
+  },
+};
+
+export const Accounts: Story = {
+  args: {
+    menuLabel: 'Meny',
+    backLabel: 'Tilbake',
+    accountSearch: {
+      placeholder: 'Søk etter konto',
+      getResultsLabel: (hits = 0) => {
+        if (hits) {
+          return hits + ' treff';
+        }
+        return 'Ingen treff';
+      },
+      hidden: false,
+    },
+    expanded: true,
+    accountGroups: {
+      primary: {
+        title: 'Deg selv og favoritter',
+      },
+      secondary: {
+        divider: true,
+        title: 'Andre kontoer',
+      },
+      favourites: {
+        divider: true,
+      },
+      company: {
+        divider: true,
+      },
+      person: {
+        divider: true,
+      },
+    },
+    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/Header/GlobalMenu.tsx

@@ -0,0 +1,131 @@
+'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;
+  name: string;
+  selected?: boolean;
+  group?: string;
+};
+
+export interface AccountSearch extends MenuSearchProps {
+  getResultsLabel?: (hits: number) => string;
+  hidden?: boolean;
+}
+
+export interface GlobalMenuProps {
+  expanded: boolean;
+  onToggle: MouseEventHandler;
+  items: MenuItemProps[];
+  groups?: MenuGroups;
+  accounts?: Account[];
+  accountGroups?: MenuGroups;
+  accountSearch?: AccountSearch;
+  menuLabel?: string;
+  backLabel?: string;
+  className?: string;
+}
+
+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) => ({
+    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 globalMenu = 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 }]),
+  ];
+
+  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>
+  );
+};

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

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+
+const meta = {
+  title: 'Header/Header',
+  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: {
+      accounts: [
+        {
+          type: 'person',
+          name: 'Aurora Mikalsen',
+          selected: true,
+        },
+      ],
+      menu: [
+        {
+          icon: 'airplane',
+          size: 'lg',
+          label: 'Section 1',
+        },
+        {
+          icon: 'briefcase',
+          size: 'lg',
+          label: 'Section 2',
+        },
+        {
+          size: 'lg',
+          label: 'Section 3',
+          icon: 'camera',
+        },
+      ],
+    },
+  },
+};
+
+export const Company: Story = {
+  args: {
+    globalMenu: {
+      accounts: [
+        {
+          type: 'company',
+          name: 'Bergen bar',
+          selected: true,
+        },
+        {
+          type: 'person',
+          name: 'Aurora Mikalsen',
+        },
+      ],
+    },
+  },
+};
+
+export const CompanyAndMenu: Story = {
+  args: {
+    globalMenu: {
+      accounts: [
+        {
+          type: 'company',
+          name: 'Bergen bar',
+          selected: true,
+        },
+        {
+          type: 'person',
+          name: 'Aurora Mikalsen',
+        },
+      ],
+    },
+  },
+};

package/lib/components/Header/Header.tsx

@@ -0,0 +1,64 @@
+'use client';
+import { useState } from 'react';
+import { GlobalMenu, type GlobalMenuProps } from './GlobalMenu';
+import { HeaderLogo } from './HeaderLogo';
+import { HeaderSearch, type HeaderSearchProps } from './HeaderSearch';
+import styles from './header.module.css';
+
+export type HeaderColor = 'default' | 'dark' | 'light';
+
+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);
+
+  const onToggle = (type: ExpandedType) => {
+    if (expandedType === type) {
+      setExpandedType(null);
+    } else {
+      setExpandedType(type);
+    }
+  };
+
+  const onSearchFocus = () => {
+    setExpandedType('search');
+  };
+
+  const onSearchBlur = () => {
+    setExpandedType(null);
+  };
+
+  return (
+    <header className={styles.header} data-color={color}>
+      <HeaderLogo className={styles?.logo} />
+      {menu && (
+        <GlobalMenu
+          {...menu}
+          expanded={expandedType === 'account'}
+          onToggle={() => onToggle('account')}
+          className={styles?.button}
+        />
+      )}
+      {search && (
+        <HeaderSearch
+          {...search}
+          className={styles?.search}
+          expanded={expandedType === 'search'}
+          onBlur={onSearchBlur}
+          onFocus={onSearchFocus}
+        />
+      )}
+    </header>
+  );
+};

package/lib/components/Header/HeaderBase.tsx

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

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderButton } from './HeaderButton';
+
+const meta = {
+  title: 'Header/HeaderButton',
+  component: HeaderButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {},
+} satisfies Meta<typeof HeaderButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Icon: Story = {
+  args: {
+    icon: 'inbox',
+  },
+};
+
+export const Person: Story = {
+  args: {
+    avatar: {
+      type: 'person',
+      name: 'Aurora Mikalsen',
+    },
+  },
+};
+
+export const Company: Story = {
+  args: {
+    avatar: {
+      type: 'company',
+      name: 'Bergen bar',
+    },
+  },
+};
+
+export const Expanded: Story = {
+  args: {
+    expanded: true,
+    avatar: {
+      type: 'company',
+      name: 'Bergen bar',
+    },
+  },
+};

package/lib/components/Header/HeaderButton.tsx

@@ -0,0 +1,55 @@
+import cx from 'classnames';
+import type { ElementType } from 'react';
+import { Avatar, type AvatarProps } from '../Avatar';
+import { ButtonBase, type ButtonProps } from '../Button';
+import { Icon, type IconName } from '../Icon';
+
+import styles from './headerButton.module.css';
+
+export interface HeaderButtonProps extends ButtonProps {
+  label?: string;
+  avatar?: AvatarProps;
+  as?: ElementType;
+  className?: string;
+  expanded?: boolean;
+  icon?: IconName;
+}
+
+export const HeaderButton = ({
+  className,
+  as = 'button',
+  avatar,
+  icon = 'padlock-locked',
+  expanded,
+  label = 'Menu',
+  ...buttonProps
+}: HeaderButtonProps) => {
+  if (expanded) {
+    return (
+      <ButtonBase {...buttonProps} as={as} className={cx(styles.button, className)}>
+        <span className={styles.label}>{label}</span>
+        <span className={cx(styles.icon, styles.closeIcon)}>
+          <Icon name={'x-mark'} />
+        </span>
+      </ButtonBase>
+    );
+  }
+
+  if (avatar) {
+    return (
+      <ButtonBase {...buttonProps} as={as} className={cx(styles.button, className)}>
+        <span className={styles.label}>{label}</span>
+        <Avatar type={avatar?.type} name={avatar?.name} size="lg" />
+      </ButtonBase>
+    );
+  }
+
+  return (
+    <ButtonBase {...buttonProps} as={as} className={cx(styles.button, className)}>
+      <span className={styles.label}>{label}</span>
+      <span className={cx(styles.icon, styles.loginIcon)}>
+        <Icon name={icon} />
+      </span>
+    </ButtonBase>
+  );
+};

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HeaderLogo } from './HeaderLogo';
+
+const meta = {
+  title: 'Header/HeaderLogo',
+  component: HeaderLogo,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta<typeof HeaderLogo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/components/Header/HeaderLogo.tsx

@@ -0,0 +1,22 @@
+import cx from 'classnames';
+import type { ElementType, MouseEventHandler } from 'react';
+import { ButtonBase } from '../Button';
+import { DigdirLogomark } from './DigdirLogomark.tsx';
+import styles from './headerLogo.module.css';
+
+export interface HeaderLogoProps {
+  className?: string;
+  as?: ElementType;
+  href?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  title?: string;
+}
+
+export const HeaderLogo = ({ className, as = 'a', title = 'Altinn', href = '/' }: HeaderLogoProps) => {
+  return (
+    <ButtonBase as={as} className={cx(styles.logo, className)} href={href}>
+      <DigdirLogomark className={styles.symbol} />
+      <span className={styles.text}>{title}</span>
+    </ButtonBase>
+  );
+};

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HeaderSearch } from './HeaderSearch';
+
+const meta = {
+  title: 'Header/HeaderSearch',
+  component: HeaderSearch,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta<typeof HeaderSearch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Search',
+    name: 'search',
+  },
+};

package/lib/components/Header/HeaderSearch.tsx

@@ -0,0 +1,44 @@
+import cx from 'classnames';
+import type { ChangeEventHandler, FocusEventHandler } from 'react';
+import { Icon } from '../Icon';
+import styles from './headerSearch.module.css';
+
+export interface HeaderSearchProps {
+  className?: string;
+  expanded?: boolean;
+  placeholder?: string;
+  name: string;
+  value?: string;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
+  onChange?: ChangeEventHandler;
+}
+
+export const HeaderSearch = ({
+  className,
+  expanded = false,
+  name = 'q',
+  value,
+  placeholder = 'Søk',
+  onFocus,
+  onBlur,
+  onChange,
+}: HeaderSearchProps) => {
+  return (
+    <div className={cx(styles.form, className)} aria-expanded={expanded}>
+      <div className={styles.field}>
+        <input
+          onFocus={onFocus}
+          onBlur={onBlur}
+          name={name}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          className={styles?.input}
+          type="search"
+        />
+        <Icon name="magnifying-glass" className={styles.icon} />
+      </div>
+    </div>
+  );
+};