@altinn/altinn-components 0.6.0 → 0.6.1

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

@@ -1,514 +0,0 @@
-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: {
-    groups: {
-      settings: {
-        defaultItemColor: 'default',
-      },
-    },
-    items: [
-      {
-        id: 'account',
-        groupId: 'account',
-        size: 'lg',
-        avatar: {
-          type: 'person',
-          name: 'Herman Friele',
-        },
-        title: 'Herman Friele',
-        description: 'Fødselsnr: XX.XX.XXXX',
-      },
-      {
-        id: 'inbox',
-        groupId: 'apps',
-        size: 'lg',
-        icon: 'inbox',
-        title: 'Innboks',
-        badge: {
-          color: 'alert',
-          label: '4',
-        },
-      },
-      {
-        id: 'access',
-        groupId: 'apps',
-        size: 'lg',
-        icon: 'bookmark',
-        title: 'Tilganger',
-        badge: {
-          color: 'alert',
-          label: '2',
-        },
-      },
-      {
-        id: 'access',
-        groupId: 'apps',
-        size: 'lg',
-        icon: 'menu-grid',
-        title: 'Alle skjema',
-      },
-      {
-        id: 'settings',
-        groupId: 'settings',
-        icon: 'cog',
-        title: 'Innstillinger',
-      },
-    ],
-  },
-};
-
-export const CollapsibleGlobalMenu: Story = {
-  args: {
-    groups: {
-      settings: {
-        defaultItemColor: 'default',
-      },
-    },
-    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,
-          group: item?.id === 'inbox' ? 'inbox' : '',
-          expanded: true,
-        };
-      }
-      return item;
-    }),
-  },
-};
-
-export const DrilldownMenu: Story = {
-  args: {
-    color: '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',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-};
-
-export const InboxMenu: Story = {
-  args: {
-    groups: {},
-    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',
-        },
-      },
-    ],
-
-    defaultItemColor: 'subtle',
-  },
-};
-
-export const InboxMenuWithShortcuts = {
-  args: {
-    groups: {
-      ...InboxMenu.args?.groups,
-      shortcuts: {
-        title: 'Snarveier',
-        defaultItemColor: 'default',
-      },
-    },
-    items: [
-      ...(InboxMenu?.args?.items ?? []),
-      {
-        id: 'users',
-        groupId: 'shortcuts',
-        icon: 'person-group',
-        title: 'Brukere',
-      },
-      {
-        id: 'settings',
-        groupId: 'shortcuts',
-        icon: 'cog',
-        title: 'Innstillinger',
-      },
-    ],
-  },
-};
-
-export const PersonMenu: Story = {
-  args: {
-    groups: {},
-    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: {},
-    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 AccountMenuWithSearch: Story = {
-  args: {
-    ...AccountMenu.args,
-    search: {
-      placeholder: 'Søk i kontoer',
-    },
-  },
-};

package/lib/components/Menu/Menu.tsx

@@ -1,24 +0,0 @@
-import { MenuBase, type MenuTheme } from './MenuBase';
-import { MenuItems, type MenuItemsProps } from './MenuItems';
-import { MenuSearch, type MenuSearchProps } from './MenuSearch';
-
-export interface MenuProps extends MenuItemsProps {
-  theme?: MenuTheme;
-  search?: MenuSearchProps;
-}
-
-export const Menu = ({
-  theme = 'inherit',
-  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

@@ -1,63 +0,0 @@
-import cx from 'classnames';
-import type { ElementType, ReactNode } from 'react';
-import styles from './menuBase.module.css';
-
-export type MenuTheme = 'inherit' | 'global' | 'neutral' | 'company' | 'person' | 'global-dark';
-export type MenuListRole = 'presentation' | 'group';
-export type MenuListItemRole = 'presentation' | 'group' | 'separator';
-
-export interface MenuBaseProps {
-  as?: ElementType;
-  theme?: MenuTheme;
-  className?: string;
-  children?: ReactNode;
-}
-
-export interface MenuListProps {
-  as?: ElementType;
-  role?: MenuListRole;
-  expanded?: boolean;
-  className?: string;
-  children?: ReactNode;
-}
-
-export interface MenuListItemProps {
-  as?: ElementType;
-  role?: MenuListItemRole;
-  expanded?: boolean;
-  className?: string;
-  children?: ReactNode;
-}
-
-export const MenuBase = ({ as = 'nav', theme, className, children }: MenuBaseProps) => {
-  const Component = as;
-  return (
-    <Component className={cx(styles.menu, className)} data-theme={theme} role="menu">
-      {children}
-    </Component>
-  );
-};
-
-export const MenuList = ({ as = 'ul', role = 'group', expanded, className, children }: MenuListProps) => {
-  const Component = as;
-  return (
-    <Component className={cx(styles.list, className)} role={role} aria-expanded={expanded}>
-      {children}
-    </Component>
-  );
-};
-
-export const MenuListItem = ({
-  as = 'li',
-  role = 'presentation',
-  expanded,
-  className,
-  children,
-}: MenuListItemProps) => {
-  const Component = as;
-  return (
-    <Component className={cx(styles.item, className)} role={role} aria-expanded={expanded}>
-      {children}
-    </Component>
-  );
-};

package/lib/components/Menu/MenuHeader.tsx

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

package/lib/components/Menu/MenuInputField.tsx

@@ -1,38 +0,0 @@
-import type { ChangeEventHandler } from 'react';
-import styles from './menuInputField.module.css';
-
-type InputType = 'text' | 'date' | 'search';
-
-export interface MenuInputFieldProps {
-  placeholder?: string;
-  type?: InputType;
-  label?: string;
-  name: string;
-  value: string;
-  onChange: ChangeEventHandler;
-}
-
-export const MenuInputField = ({
-  label,
-  type = 'text',
-  value,
-  name,
-  placeholder = 'Søk',
-  onChange,
-}: MenuInputFieldProps) => {
-  return (
-    <label className={styles.field}>
-      {label && <span className={styles.label}>{label}</span>}
-      <input
-        data-value={value && true}
-        type={type}
-        value={value}
-        name={name}
-        placeholder={placeholder}
-        className={styles.input}
-        onChange={onChange}
-        autoComplete="off"
-      />
-    </label>
-  );
-};