@altinn/altinn-components 0.6.1 → 0.6.2

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.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MenuOption } from './MenuOption';
+
+const meta = {
+  title: 'Menu/MenuOption',
+  component: MenuOption,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    value: '',
+    label: 'Label',
+  },
+} satisfies Meta<typeof MenuOption>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Checkbox: Story = {
+  args: {
+    type: 'checkbox',
+    title: 'Title',
+    size: 'sm',
+    checked: false,
+  },
+};
+
+export const CheckboxChecked: Story = {
+  args: {
+    type: 'checkbox',
+    title: 'Title',
+    size: 'sm',
+    checked: true,
+  },
+};
+
+export const Radio: Story = {
+  args: {
+    type: 'radio',
+    title: 'Title',
+    size: 'sm',
+    checked: false,
+  },
+};
+
+export const RadioChecked: Story = {
+  args: {
+    type: 'radio',
+    title: 'Title',
+    size: 'sm',
+    checked: true,
+  },
+};

package/lib/components/Menu/MenuOption.tsx

@@ -0,0 +1,48 @@
+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';
+import styles from './menuOption.module.css';
+
+export type MenuOptionType = 'checkbox' | 'radio';
+
+export interface MenuOptionProps {
+  value: string | number;
+  label: string;
+  groupId?: string;
+  size?: MenuItemSize;
+  name?: string;
+  title?: string;
+  description?: string;
+  badge?: BadgeProps;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: ChangeEventHandler;
+  type?: MenuOptionType;
+}
+
+export const MenuOption = ({
+  size = 'sm',
+  type,
+  name,
+  value,
+  label,
+  title,
+  description,
+  badge,
+  checked = false,
+  disabled,
+  onChange,
+}: MenuOptionProps) => {
+  return (
+    <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} />}
+      <MenuItemLabel title={title} description={description} size={size}>
+        {label}
+      </MenuItemLabel>
+    </MenuItemBase>
+  );
+};

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

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

package/lib/components/Menu/MenuSearch.tsx

@@ -0,0 +1,25 @@
+import type { ChangeEventHandler } from 'react';
+import styles from './menuSearch.module.css';
+
+export interface MenuSearchProps {
+  placeholder?: string;
+  name: string;
+  value: string;
+  onChange: ChangeEventHandler;
+}
+
+export const MenuSearch = ({ value, name, placeholder = 'Søk', onChange }: MenuSearchProps) => {
+  return (
+    <div className={styles.field}>
+      <input
+        type="search"
+        value={value}
+        name={name}
+        placeholder={placeholder}
+        className={styles.input}
+        onChange={onChange}
+        autoComplete="off"
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,25 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.group {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-indent: 0;
+}
+
+.menuItem {
+  list-style: none;
+}
+
+.group[data-divider="true"] + .group {
+  border-top: 1px solid;
+  border-color: var(--theme-border-subtle);
+}
+
+.item[aria-expanded="true"] > .group {
+  border-top: 1px solid;
+  border-color: var(--theme-border-subtle);
+}