@altinn/altinn-components 0.4.1 → 0.5.1

package/lib/components/Menu/MenuItemBase.tsx

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import type { ElementType, ReactNode } from 'react';
+import type { ElementType, MouseEventHandler, ReactNode } from 'react';
 import { Badge, type BadgeProps } from '../Badge';
 import { Icon, type IconName } from '../Icon';
 import styles from './menuItemBase.module.css';
@@ -9,12 +9,16 @@ export type MenuItemSize = 'sm' | 'md' | 'lg';
 
 export interface MenuItemBaseProps {
   as?: ElementType;
+  onClick?: MouseEventHandler;
   color?: MenuItemColor;
   children?: ReactNode;
+  tabIndex?: number;
   size?: MenuItemSize;
   linkIcon?: IconName;
+  linkText?: string;
   badge?: BadgeProps;
   collapsible?: boolean;
+  active?: boolean;
   expanded?: boolean;
   selected?: boolean;
   disabled?: boolean;
@@ -23,10 +27,14 @@ export interface MenuItemBaseProps {
 
 export const MenuItemBase = ({
   as,
+  onClick,
   size,
   color,
   linkIcon,
+  linkText,
   badge,
+  tabIndex = 0,
+  active = false,
   collapsible = false,
   expanded = false,
   selected = false,
@@ -42,11 +50,15 @@ export const MenuItemBase = ({
 
   return (
     <Component
+      role="menuitem"
+      tabIndex={!disabled && tabIndex}
       data-size={size}
       data-color={color}
+      data-active={active}
       aria-expanded={expanded}
       aria-disabled={disabled}
       aria-selected={selected}
+      onClick={onClick}
       className={cx(styles.item, className)}
       {...rest}
     >
@@ -56,7 +68,8 @@ export const MenuItemBase = ({
       </div>
       {applicableIcon && (
         <div className={styles.action}>
-          {applicableIcon && <Icon name={applicableIcon} className={styles.actionIcon} />}
+          <span className={styles.linkText}>{linkText}</span>
+          {applicableIcon && <Icon name={applicableIcon} className={styles.linkIcon} />}
         </div>
       )}
     </Component>

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

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

package/lib/components/Menu/MenuItems.tsx

@@ -0,0 +1,96 @@
+'use client';
+import { Fragment } from 'react';
+import { MenuHeader, MenuItem, MenuList, MenuListItem } from '../';
+import type { MenuItemColor, MenuItemProps, MenuItemSize } from '../';
+import { useMenu } from '../../hooks';
+
+export interface MenuGroupProps {
+  title?: string;
+  divider?: boolean;
+  defaultItemColor?: MenuItemColor;
+  defaultItemSize?: MenuItemSize;
+}
+
+export type MenuItemGroups = Record<string, MenuGroupProps>;
+
+export interface MenuItemsProps {
+  level?: number;
+  expanded?: boolean;
+  items: MenuItemProps[];
+  groups?: MenuItemGroups;
+  defaultItemColor?: MenuItemColor;
+  defaultItemSize?: MenuItemSize;
+}
+
+export const MenuItems = ({
+  level = 0,
+  expanded,
+  items,
+  groups = {},
+  defaultItemColor,
+  defaultItemSize,
+}: MenuItemsProps) => {
+  const { menu } = useMenu<MenuItemProps, MenuGroupProps>({
+    items,
+    groups,
+    groupByKey: 'groupId',
+    keyboardEvents: false,
+  });
+
+  return (
+    <MenuList expanded={expanded}>
+      {menu.map((group, groupIndex) => {
+        const groupProps: MenuGroupProps = group?.props || {};
+        const { title, divider = true } = groupProps;
+        const nextGroup = menu[groupIndex + 1];
+
+        return (
+          <Fragment key={groupIndex}>
+            {/** Render a separator if this is a new group or a new level */}
+
+            {(level > 0 || groupIndex) && divider ? <MenuListItem role="separator" /> : ''}
+
+            {title && (
+              <MenuListItem>
+                <MenuHeader title={title} />
+              </MenuListItem>
+            )}
+
+            {group?.items.map((item, index) => {
+              const { active } = item;
+              const { groupId: _, ...itemProps } = item.props || {};
+              const { expanded } = itemProps;
+              const nextItem = group?.items[index + 1];
+
+              return (
+                <MenuListItem role="presentation" expanded={expanded} key={index}>
+                  <MenuItem
+                    {...itemProps}
+                    color={itemProps?.color || groupProps?.defaultItemColor || defaultItemColor}
+                    size={itemProps?.size || groupProps?.defaultItemSize || defaultItemSize}
+                    active={active}
+                    tabIndex={itemProps?.disabled ? -1 : 0}
+                  />
+                  {expanded && itemProps?.items && (
+                    <>
+                      <MenuItems
+                        expanded={expanded}
+                        level={level + 1}
+                        items={itemProps?.items}
+                        groups={groups}
+                        defaultItemColor={defaultItemColor}
+                        defaultItemSize={defaultItemSize}
+                      />
+                      {/** Render a separator if expanded and there are items underneath */}
+                      {(nextGroup || nextItem) && <MenuListItem role="separator" />}
+                    </>
+                  )}
+                </MenuListItem>
+              );
+            })}
+          </Fragment>
+        );
+      })}
+    </MenuList>
+  );
+};

package/lib/components/Menu/MenuOption.tsx

@@ -1,4 +1,5 @@
 import type { ChangeEventHandler } from 'react';
+import type { BadgeProps } from '../Badge';
 import { CheckboxIcon, RadioIcon } from '../Icon';
 import { MenuItemBase, type MenuItemSize } from './MenuItemBase';
 import { MenuItemLabel } from './MenuItemLabel';
@@ -14,6 +15,7 @@ export interface MenuOptionProps {
   name?: string;
   title?: string;
   description?: string;
+  badge?: BadgeProps;
   checked?: boolean;
   disabled?: boolean;
   onChange?: ChangeEventHandler;
@@ -28,12 +30,13 @@ export const MenuOption = ({
   label,
   title,
   description,
+  badge,
   checked = false,
   disabled,
   onChange,
 }: MenuOptionProps) => {
   return (
-    <MenuItemBase className={styles.label} disabled={disabled} selected={checked} size={size} as="label">
+    <MenuItemBase className={styles.label} disabled={disabled} selected={checked} size={size} badge={badge} as="label">
       <input className={styles.input} name={name} value={value} type={type} checked={checked} onChange={onChange} />
       {type === 'checkbox' && <CheckboxIcon checked={checked} hover={true} className={styles.icon} />}
       {type === 'radio' && <RadioIcon checked={checked} hover={true} className={styles.icon} />}

package/lib/components/Menu/index.ts

@@ -4,7 +4,7 @@ export * from './MenuItemMedia';
 export * from './MenuItem';
 export * from './MenuOption';
 export * from './MenuSearch';
-export * from './MenuGroup';
 export * from './MenuHeader';
+export * from './MenuItems';
 export * from './MenuBase';
 export * from './Menu';

package/lib/components/Menu/menu.module.css

@@ -3,16 +3,15 @@
   flex-direction: column;
 }
 
-.menu ul {
+.group {
   list-style: none;
   padding: 0;
   margin: 0;
   text-indent: 0;
 }
 
-.menu li {
+.menuItem {
   list-style: none;
-  list-style-type: none;
 }
 
 .group[data-divider="true"] + .group {

package/lib/components/Menu/menuBase.module.css

@@ -0,0 +1,25 @@
+.menu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-indent: 0;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.item {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.item[role="separator"] {
+  border-top: 1px solid var(--theme-border-subtle);
+}

package/lib/components/Menu/menuItemBase.module.css

@@ -36,7 +36,12 @@
   padding: 10px;
 }
 
-.actionIcon {
+.linkText {
+  font-size: 0.875rem;
+  white-space: nowrap;
+}
+
+.linkIcon {
   font-size: 1.5rem;
 }
 
@@ -47,14 +52,15 @@
   color: var(--theme-text-default);
 }
 
-.item:hover {
-  background-color: var(--theme-surface-hover);
-}
-
 .item[aria-selected="true"] {
   background-color: var(--theme-background-default);
 }
 
+.item:hover,
+.item:active {
+  background-color: var(--theme-surface-hover);
+}
+
 .media[data-color="subtle"] {
   background-color: var(--theme-background-default);
   color: var(--theme-text-default);