@altinn/altinn-components 0.0.1

package/lib/components/Menu/Menu.stories.ts

@@ -0,0 +1,495 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Menu } from './Menu';
+
+const meta = {
+  title: 'Menu/Menu',
+  component: Menu,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const GlobalMenu: Story = {
+  args: {
+    theme: 'global',
+    groups: {
+      settings: {
+        defaultItemColor: 'default',
+      },
+    },
+    items: [
+      {
+        id: 'account',
+        group: 'account',
+        size: 'lg',
+        avatar: {
+          type: 'person',
+          name: 'Herman Friele',
+        },
+        title: 'Herman Friele',
+        description: 'Fødselsnr: XX.XX.XXXX',
+      },
+      {
+        id: 'inbox',
+        group: 'apps',
+        size: 'lg',
+        icon: 'inbox',
+        title: 'Innboks',
+      },
+      {
+        id: 'access',
+        group: 'apps',
+        size: 'lg',
+        icon: 'bookmark',
+        title: 'Tilganger',
+      },
+      {
+        id: 'access',
+        group: 'apps',
+        size: 'lg',
+        icon: 'menu-grid',
+        title: 'Alle skjema',
+      },
+      {
+        id: 'settings',
+        group: 'settings',
+        icon: 'cog',
+        title: 'Innstillinger',
+      },
+    ],
+  },
+};
+
+export const CollapsibleGlobalMenu: Story = {
+  args: {
+    theme: 'global',
+    groups: {
+      settings: {
+        defaultItemColor: 'default',
+      },
+    },
+    items: [
+      {
+        id: 'account',
+        group: 'account',
+        size: 'lg',
+        avatar: {
+          type: 'person',
+          name: 'Herman Friele',
+        },
+        title: 'Herman Friele',
+        description: 'Fødselsnr: XX.XX.XXXX',
+      },
+      {
+        id: 'innboks',
+        group: 'apps',
+        size: 'lg',
+        icon: 'inbox',
+        title: 'Innboks',
+        badge: '4',
+        collapsible: true,
+        items: [
+          {
+            id: 'utkast',
+            group: '1',
+            icon: 'doc-pencil',
+            title: 'Utkast',
+          },
+          {
+            id: 'sent',
+            group: '1',
+            icon: 'file-checkmark',
+            selected: true,
+            title: 'Sendt',
+            badge: 2,
+          },
+          {
+            id: 'bookmarks',
+            group: '3',
+            icon: 'bookmark',
+            title: 'Lagrede søk',
+            badge: 11,
+          },
+          {
+            id: 'arkiv',
+            group: '4',
+            icon: 'archive',
+            title: 'Arkivert',
+          },
+          {
+            id: 'trash',
+            group: '4',
+            icon: 'trash',
+            title: 'Papirkurv',
+          },
+        ],
+      },
+      {
+        id: 'tilganger',
+        group: 'apps',
+        size: 'lg',
+        icon: 'bookmark',
+        title: 'Tilganger',
+      },
+      {
+        id: 'skjema',
+        group: 'apps',
+        size: 'lg',
+        icon: 'menu-grid',
+        title: 'Alle skjema',
+      },
+      {
+        id: 'settings',
+        group: 'settings',
+        icon: 'cog',
+        title: 'Innstillinger',
+      },
+    ],
+  },
+};
+
+export const ExpandedGlobalMenu: Story = {
+  args: {
+    ...CollapsibleGlobalMenu.args,
+    items: [...(CollapsibleGlobalMenu?.args?.items ?? [])].map((item) => {
+      if (item.collapsible) {
+        return {
+          ...item,
+          group: item?.id === 'inbox' ? 'inbox' : '',
+          expanded: true,
+        };
+      }
+      return item;
+    }),
+  },
+};
+
+export const DrilldownMenu: Story = {
+  args: {
+    theme: 'global',
+    color: 'subtle',
+    groups: {
+      'level-1': {
+        divider: true,
+      },
+      'level-2': {
+        divider: true,
+      },
+    },
+    items: [
+      {
+        id: 'people',
+        group: 'level-1',
+        size: 'lg',
+        icon: 'menu-grid',
+        title: 'Alle skjema',
+        expanded: true,
+        items: [
+          {
+            group: 'level-2',
+            name: 'tema',
+            icon: 'teddy-bear',
+            title: 'Tema',
+            expanded: true,
+            items: [
+              {
+                group: 'level-3',
+                name: 'c1',
+                title: 'Kategori 1',
+              },
+              {
+                group: 'level-3',
+                name: 'c2',
+                title: 'Kategori 2',
+              },
+              {
+                group: 'level-3',
+                name: 'c3',
+                title: 'Kategori 3',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const InboxMenu: Story = {
+  args: {
+    theme: 'global',
+    groups: {},
+
+    items: [
+      {
+        id: 'innboks',
+        group: '1',
+        size: 'lg',
+        icon: 'inbox',
+        title: 'Innboks',
+        color: 'strong',
+        badge: 4,
+      },
+      {
+        id: 'utkast',
+        group: '2',
+        icon: 'doc-pencil',
+        title: 'Utkast',
+      },
+      {
+        id: 'sendt',
+        group: '2',
+        icon: 'file-checkmark',
+        selected: true,
+        title: 'Sendt',
+        badge: 2,
+      },
+      {
+        id: 'lagret',
+        group: '3',
+        icon: 'bookmark',
+        title: 'Lagrede søk',
+        badge: 11,
+      },
+      {
+        id: 'arkivert',
+        group: '4',
+        icon: 'archive',
+        title: 'Arkivert',
+      },
+      {
+        id: 'papirkurv',
+        group: '4',
+        disabled: true,
+        icon: 'trash',
+        title: 'Papirkurv',
+      },
+    ],
+
+    color: 'subtle',
+  },
+};
+
+export const InboxMenuWithShortcuts = {
+  args: {
+    theme: 'global',
+    groups: {
+      ...InboxMenu.args?.groups,
+      shortcuts: {
+        title: 'Snarveier',
+        defaultItemColor: 'default',
+      },
+    },
+    items: [
+      ...(InboxMenu.args?.items ?? []),
+      {
+        id: 'users',
+        group: 'shortcuts',
+        icon: 'person-group',
+        title: 'Brukere',
+      },
+      {
+        id: 'settings',
+        group: 'shortcuts',
+        icon: 'cog',
+        title: 'Innstillinger',
+      },
+    ],
+  },
+};
+
+export const PersonMenu: Story = {
+  args: {
+    theme: 'global',
+    groups: {},
+    items: [
+      {
+        id: 'person',
+        group: '1',
+        size: 'lg',
+        avatar: {
+          type: 'person',
+          name: 'Erik Huseklepp',
+        },
+        title: 'Erik Huseklepp',
+      },
+      {
+        id: 'profil',
+        group: '2',
+        icon: 'person-circle',
+        title: 'Kontaktinformasjon',
+      },
+      {
+        id: 'varslinger',
+        group: '2',
+        icon: 'bell',
+        title: 'Varslingsinnstillinger',
+      },
+      {
+        id: 'bookmarks',
+        group: '3',
+        icon: 'bookmark',
+        title: 'Favoritter',
+      },
+      {
+        id: 'grupper',
+        group: '3',
+        icon: 'hexagon-grid',
+        title: 'Grupper',
+      },
+      {
+        id: 'logg',
+        group: '4',
+        icon: 'clock-dashed',
+        title: 'Aktivitetslogg',
+      },
+    ],
+  },
+};
+
+export const CompanyMenu: Story = {
+  args: {
+    theme: 'global',
+    groups: {},
+    items: [
+      {
+        id: 'company',
+        group: '1',
+        size: 'lg',
+        avatar: {
+          type: 'company',
+          name: 'Bergen Bar',
+        },
+        title: 'Bergen Bar',
+      },
+      {
+        id: 'profil',
+        group: '2',
+        icon: 'buildings2',
+        title: 'Firmaprofil',
+      },
+      {
+        id: 'brukere',
+        group: '3',
+        icon: 'person-group',
+        title: 'Brukere',
+      },
+      {
+        id: 'grupper',
+        group: '3',
+        icon: 'hexagon-grid',
+        title: 'Grupper',
+      },
+      {
+        id: 'logg',
+        group: '4',
+        icon: 'clock-dashed',
+        title: 'Aktivitetslogg',
+      },
+    ],
+  },
+};
+
+export const AccountMenu: Story = {
+  args: {
+    theme: 'global',
+    groups: {
+      a1: {
+        title: 'Deg selv, favoritter og grupper',
+      },
+      b1: {
+        title: 'Andre kontoer',
+      },
+    },
+    items: [
+      {
+        id: '1',
+        group: 'a1',
+        avatar: {
+          type: 'person',
+          name: 'Dolly Duck',
+        },
+        title: 'Dolly Duck',
+        badge: '15',
+      },
+      {
+        id: '2',
+        group: 'a2',
+        avatar: {
+          type: 'company',
+          name: 'Bergen Bar',
+        },
+        title: 'Bergen Bar',
+        badge: 21,
+      },
+      {
+        id: '3',
+        group: 'a2',
+        avatar: {
+          type: 'company',
+          name: 'Sportsklubben Brann',
+        },
+        title: 'Sportsklubben Brann',
+        badge: '4',
+      },
+      {
+        id: '4',
+        group: 'a3',
+        avatarGroup: {
+          type: 'company',
+          items: [
+            {
+              name: 'Sportsklubben Brann',
+            },
+            {
+              name: 'Bergen Bar',
+            },
+          ],
+        },
+        title: 'Alle virksomheter',
+      },
+      {
+        id: '5',
+        group: 'b1',
+        avatar: {
+          type: 'company',
+          name: 'Jensens Laks',
+        },
+        title: 'Jensens laks',
+      },
+      {
+        id: '6',
+        group: 'b1',
+        avatar: {
+          type: 'company',
+          name: 'Haralds gym',
+        },
+        title: 'Haralds gym',
+      },
+      {
+        id: '7',
+        group: 'b1',
+        avatar: {
+          type: 'company',
+          name: 'Trim og tran',
+        },
+        title: 'Trim og tran',
+      },
+    ],
+  },
+};
+
+export const AccountMenuWithSearch: Story = {
+  args: {
+    ...AccountMenu.args,
+    search: {
+      placeholder: 'Søk i kontoer',
+      name: 'search',
+      value: '',
+      onChange: () => {},
+    },
+  },
+};

package/lib/components/Menu/Menu.tsx

@@ -0,0 +1,123 @@
+import { MenuBase } from './MenuBase';
+import { MenuGroup } from './MenuGroup';
+import { MenuHeader } from './MenuHeader';
+import { MenuSearch, type MenuSearchProps } from './MenuSearch';
+
+import type { MenuItemColor, MenuItemSize } from './MenuItemBase';
+
+import { MenuItem, type MenuItemProps } from './MenuItem';
+import styles from './menu.module.css';
+
+export type MenuTheme = 'global' | 'neutral' | 'company' | 'person';
+
+interface MenuItemsGroupProps {
+  title?: string;
+  divider?: boolean;
+  defaultItemColor?: MenuItemColor;
+  defaultItemSize?: MenuItemSize;
+}
+
+export type MenuGroups = Record<string, MenuItemsGroupProps>;
+
+export interface MenuProps {
+  theme?: MenuTheme;
+  defaultItemColor?: MenuItemColor;
+  defaultItemSize?: MenuItemSize;
+  groups?: MenuGroups;
+  items?: MenuItemProps[];
+  search?: MenuSearchProps;
+}
+
+const groupMenuItems = (items: MenuItemProps[]) => {
+  const groups: Record<string, MenuItemProps[]> = items?.reduce(
+    (acc: Record<string, MenuItemProps[]>, item: MenuItemProps) => {
+      const group = item?.group || '';
+      if (!acc[group]) {
+        acc[group] = [];
+      }
+      acc[group].push(item);
+      return acc;
+    },
+    {} as Record<string, MenuItemProps[]>,
+  );
+
+  return groups;
+};
+
+export const MenuItems = ({
+  defaultItemColor,
+  defaultItemSize,
+  groups = {},
+  items = [],
+}: {
+  defaultItemColor: MenuItemColor;
+  defaultItemSize: MenuItemSize;
+  groups?: MenuGroups;
+  items: MenuItemProps[];
+}) => {
+  const sections = groupMenuItems(items);
+
+  return Object.entries(sections)?.map(([key, options]) => {
+    const groupProps = groups?.[key];
+    return (
+      <MenuGroup as="ul" divider={groupProps?.divider} key={key}>
+        {groupProps?.title && (
+          <li className={styles.item}>
+            <MenuHeader title={groupProps.title} />
+          </li>
+        )}
+        {(options ?? [])
+          .filter((option) => !option.hidden)
+          .map((option, index) => {
+            if (option.expanded && option.items) {
+              return (
+                <li className={styles.item} aria-expanded="true" key={'item' + index}>
+                  <MenuItem
+                    {...option}
+                    className={styles.menuItem}
+                    color={option?.color || groupProps?.defaultItemColor || defaultItemColor}
+                    size={option?.size || groupProps?.defaultItemSize || defaultItemSize}
+                    key={'menu-item' + index}
+                  />
+                  <MenuItems
+                    groups={groups}
+                    items={option?.items}
+                    defaultItemColor={defaultItemColor}
+                    defaultItemSize={defaultItemSize}
+                  />
+                </li>
+              );
+            }
+
+            return (
+              <li className={styles.item} key={'item' + index}>
+                <MenuItem
+                  {...option}
+                  className={styles.menuItem}
+                  color={option?.color || groupProps?.defaultItemColor || defaultItemColor}
+                  size={option?.size || groupProps?.defaultItemSize || defaultItemSize}
+                  key={'menu-item' + index}
+                />
+              </li>
+            );
+          })}
+      </MenuGroup>
+    );
+  });
+};
+
+export const Menu = ({
+  theme,
+  defaultItemColor = 'subtle',
+  defaultItemSize = 'sm',
+  groups,
+  items = [],
+  search,
+}: MenuProps) => {
+  return (
+    <MenuBase theme={theme}>
+      {search && <MenuSearch {...search} />}
+      <MenuItems items={items} groups={groups} defaultItemColor={defaultItemColor} defaultItemSize={defaultItemSize} />
+    </MenuBase>
+  );
+};

package/lib/components/Menu/MenuBase.tsx

@@ -0,0 +1,17 @@
+import type { ElementType, ReactNode } from 'react';
+import styles from './menu.module.css';
+
+export interface MenuBaseProps {
+  as?: ElementType;
+  theme?: string;
+  children?: ReactNode;
+}
+
+export const MenuBase = ({ as = 'nav', theme, children }: MenuBaseProps) => {
+  const Component = as;
+  return (
+    <Component className={styles.menu} data-theme={theme}>
+      {children}
+    </Component>
+  );
+};

package/lib/components/Menu/MenuGroup.tsx

@@ -0,0 +1,18 @@
+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 = 'ul', expanded, divider = true, children }: MenuGroupProps) => {
+  const Component = as;
+  return (
+    <Component aria-expanded={expanded} data-divider={divider} className={styles.group}>
+      {children}
+    </Component>
+  );
+};

package/lib/components/Menu/MenuHeader.tsx

@@ -0,0 +1,13 @@
+import styles from './menuHeader.module.css';
+
+export interface MenuHeaderProps {
+  title: string;
+}
+
+export const MenuHeader = ({ title }: MenuHeaderProps) => {
+  return (
+    <header className={styles.header}>
+      <h2 className={styles.title}>{title}</h2>
+    </header>
+  );
+};