@altinn/altinn-components 0.6.0 → 0.6.1

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

@@ -1,438 +0,0 @@
-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

@@ -1,96 +0,0 @@
-'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

@@ -1,52 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,25 +0,0 @@
-.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);
-}