@altinn/altinn-components 0.4.0 → 0.5.0

package/lib/components/List/ListBase.tsx

@@ -1,18 +1,18 @@
 import type { ReactNode } from 'react';
 import styles from './listBase.module.css';
 
-import type { LayoutTheme } from '../Layout';
-import type { ListItemSize } from './ListItemBase';
+export type ListTheme = 'inherit' | 'global' | 'neutral' | 'person' | 'company';
+export type ListSpacing = 'none' | 'sm' | 'md' | 'lg';
 
 export interface ListBaseProps {
-  size?: ListItemSize;
-  theme?: LayoutTheme;
+  theme?: ListTheme;
+  spacing?: ListSpacing;
   children?: ReactNode;
 }
 
-export const ListBase = ({ size = 'md', theme, children }: ListBaseProps) => {
+export const ListBase = ({ theme = 'inherit', spacing = 'md', children }: ListBaseProps) => {
   return (
-    <div className={styles.list} data-theme={theme} data-size={size}>
+    <div className={styles.list} data-theme={theme} data-spacing={spacing}>
       {children}
     </div>
   );

package/lib/components/List/ListItem.tsx

@@ -13,7 +13,10 @@ export interface ListItemProps {
   as?: ElementType;
   color?: ListItemColor;
   href?: string;
-  onClick?: () => void;
+  onClick?(): void;
+  /** Item is active */
+  active?: boolean;
+  /** Item should be hidden from view */
   hidden?: boolean;
   /** Collapsible item, sets linkIcon to "chevron down" */
   collapsible?: boolean;

package/lib/components/List/ListItemBase.tsx

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import type { ElementType, ReactNode } from 'react';
+import type { ElementType, KeyboardEvent, KeyboardEventHandler, ReactNode } from 'react';
 import { Badge, type BadgeProps } from '../Badge';
 import { Icon, type IconName } from '../Icon';
 import styles from './listItemBase.module.css';
@@ -15,10 +15,15 @@ interface ListItemBaseProps {
   badge?: BadgeProps;
   href?: string;
   className?: string;
+  active?: boolean;
+  hidden?: boolean;
   collapsible?: boolean;
   selected?: boolean;
   expanded?: boolean;
+  onClick?: () => void;
+  onKeyPress?: KeyboardEventHandler;
   children?: ReactNode;
+  style?: React.CSSProperties;
 }
 
 export const ListItemBase = ({
@@ -28,27 +33,38 @@ export const ListItemBase = ({
   href,
   size,
   color,
+  active = false,
+  hidden = false,
   collapsible,
   selected,
   expanded,
   linkIcon,
   badge,
-  ...rest
+  onClick,
+  onKeyPress,
+  style,
 }: ListItemBaseProps) => {
   const Component = as || 'a';
 
   const applicableIcon =
     collapsible && expanded ? 'chevron-up' : collapsible ? 'chevron-down' : href ? 'chevron-right' : linkIcon;
-
   return (
     <Component
       className={cx(styles.item, className)}
       data-color={color}
       data-size={size}
+      data-active={active}
+      aria-hidden={hidden}
       aria-selected={selected}
       aria-expanded={expanded}
       href={href}
-      {...rest}
+      onKeyPress={(e: KeyboardEvent) => {
+        e.key === 'Enter' && onClick?.();
+        onKeyPress?.(e);
+      }}
+      onClick={onClick}
+      tabIndex={-1}
+      style={style}
     >
       <div className={styles.content} data-size={size}>
         {children}

package/lib/components/List/listBase.module.css

@@ -3,14 +3,14 @@
   flex-direction: column;
 }
 
-.list[data-size="sm"] {
+.list[data-spacing="sm"] {
   row-gap: 4px;
 }
 
-.list[data-size="md"] {
+.list[data-spacing="md"] {
   row-gap: 8px;
 }
 
-.list[data-size="lg"] {
+.list[data-spacing="lg"] {
   row-gap: 16px;
 }

package/lib/components/List/listItemBase.module.css

@@ -77,6 +77,10 @@
   box-shadow: var(--ds-shadow-xs);
 }
 
+.item[data-active="true"] {
+  background-color: var(--theme-surface-default);
+}
+
 .item[data-color="accent"] {
   background-color: var(--theme-surface-default);
 }

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

@@ -22,7 +22,7 @@ export const GlobalMenu: Story = {
     items: [
       {
         id: 'account',
-        group: 'account',
+        groupId: 'account',
         size: 'lg',
         avatar: {
           type: 'person',
@@ -33,7 +33,7 @@ export const GlobalMenu: Story = {
       },
       {
         id: 'inbox',
-        group: 'apps',
+        groupId: 'apps',
         size: 'lg',
         icon: 'inbox',
         title: 'Innboks',
@@ -44,7 +44,7 @@ export const GlobalMenu: Story = {
       },
       {
         id: 'access',
-        group: 'apps',
+        groupId: 'apps',
         size: 'lg',
         icon: 'bookmark',
         title: 'Tilganger',
@@ -55,14 +55,14 @@ export const GlobalMenu: Story = {
       },
       {
         id: 'access',
-        group: 'apps',
+        groupId: 'apps',
         size: 'lg',
         icon: 'menu-grid',
         title: 'Alle skjema',
       },
       {
         id: 'settings',
-        group: 'settings',
+        groupId: 'settings',
         icon: 'cog',
         title: 'Innstillinger',
       },
@@ -80,7 +80,7 @@ export const CollapsibleGlobalMenu: Story = {
     items: [
       {
         id: 'account',
-        group: 'account',
+        groupId: 'account',
         size: 'lg',
         avatar: {
           type: 'person',
@@ -91,7 +91,7 @@ export const CollapsibleGlobalMenu: Story = {
       },
       {
         id: 'innboks',
-        group: 'apps',
+        groupId: 'apps',
         size: 'lg',
         icon: 'inbox',
         title: 'Innboks',
@@ -99,32 +99,32 @@ export const CollapsibleGlobalMenu: Story = {
         items: [
           {
             id: 'utkast',
-            group: '1',
+            groupId: '1',
             icon: 'doc-pencil',
             title: 'Utkast',
           },
           {
             id: 'sent',
-            group: '1',
+            groupId: '1',
             icon: 'file-checkmark',
             selected: true,
             title: 'Sendt',
           },
           {
             id: 'bookmarks',
-            group: '3',
+            groupId: '3',
             icon: 'bookmark',
             title: 'Lagrede søk',
           },
           {
             id: 'arkiv',
-            group: '4',
+            groupId: '4',
             icon: 'archive',
             title: 'Arkivert',
           },
           {
             id: 'trash',
-            group: '4',
+            groupId: '4',
             icon: 'trash',
             title: 'Papirkurv',
           },
@@ -132,21 +132,21 @@ export const CollapsibleGlobalMenu: Story = {
       },
       {
         id: 'tilganger',
-        group: 'apps',
+        groupId: 'apps',
         size: 'lg',
         icon: 'bookmark',
         title: 'Tilganger',
       },
       {
         id: 'skjema',
-        group: 'apps',
+        groupId: 'apps',
         size: 'lg',
         icon: 'menu-grid',
         title: 'Alle skjema',
       },
       {
         id: 'settings',
-        group: 'settings',
+        groupId: 'settings',
         icon: 'cog',
         title: 'Innstillinger',
       },
@@ -184,14 +184,14 @@ export const DrilldownMenu: Story = {
     items: [
       {
         id: 'people',
-        group: 'level-1',
+        groupId: 'level-1',
         size: 'lg',
         icon: 'menu-grid',
         title: 'Alle skjema',
         expanded: true,
         items: [
           {
-            group: 'level-2',
+            groupId: 'level-2',
             name: 'tema',
             icon: 'teddy-bear',
             title: 'Tema',
@@ -199,16 +199,16 @@ export const DrilldownMenu: Story = {
             items: [
               {
                 id: 'c1',
-                group: 'level-3',
+                groupId: 'level-3',
                 title: 'Kategori 1',
               },
               {
-                group: 'level-3',
+                groupId: 'level-3',
                 id: 'c2',
                 title: 'Kategori 2',
               },
               {
-                group: 'level-3',
+                groupId: 'level-3',
                 id: 'c3',
                 title: 'Kategori 3',
               },
@@ -226,7 +226,7 @@ export const InboxMenu: Story = {
     items: [
       {
         id: 'innboks',
-        group: '1',
+        groupId: '1',
         size: 'lg',
         icon: 'inbox',
         title: 'Innboks',
@@ -235,7 +235,7 @@ export const InboxMenu: Story = {
       },
       {
         id: 'utkast',
-        group: '2',
+        groupId: '2',
         icon: 'doc-pencil',
         title: 'Utkast',
         badge: {
@@ -244,7 +244,7 @@ export const InboxMenu: Story = {
       },
       {
         id: 'sendt',
-        group: '2',
+        groupId: '2',
         icon: 'file-checkmark',
         selected: true,
         title: 'Sendt',
@@ -254,7 +254,7 @@ export const InboxMenu: Story = {
       },
       {
         id: 'lagret',
-        group: '3',
+        groupId: '3',
         icon: 'bookmark',
         title: 'Lagrede søk',
         badge: {
@@ -263,7 +263,7 @@ export const InboxMenu: Story = {
       },
       {
         id: 'arkivert',
-        group: '4',
+        groupId: '4',
         icon: 'archive',
         title: 'Arkivert',
         badge: {
@@ -272,7 +272,7 @@ export const InboxMenu: Story = {
       },
       {
         id: 'papirkurv',
-        group: '4',
+        groupId: '4',
         disabled: true,
         icon: 'trash',
         title: 'Papirkurv',
@@ -299,13 +299,13 @@ export const InboxMenuWithShortcuts = {
       ...(InboxMenu?.args?.items ?? []),
       {
         id: 'users',
-        group: 'shortcuts',
+        groupId: 'shortcuts',
         icon: 'person-group',
         title: 'Brukere',
       },
       {
         id: 'settings',
-        group: 'shortcuts',
+        groupId: 'shortcuts',
         icon: 'cog',
         title: 'Innstillinger',
       },
@@ -319,7 +319,7 @@ export const PersonMenu: Story = {
     items: [
       {
         id: 'person',
-        group: '1',
+        groupId: '1',
         size: 'lg',
         avatar: {
           type: 'person',
@@ -329,31 +329,31 @@ export const PersonMenu: Story = {
       },
       {
         id: 'profil',
-        group: '2',
+        groupId: '2',
         icon: 'person-circle',
         title: 'Kontaktinformasjon',
       },
       {
         id: 'varslinger',
-        group: '2',
+        groupId: '2',
         icon: 'bell',
         title: 'Varslingsinnstillinger',
       },
       {
         id: 'bookmarks',
-        group: '3',
+        groupId: '3',
         icon: 'bookmark',
         title: 'Favoritter',
       },
       {
         id: 'grupper',
-        group: '3',
+        groupId: '3',
         icon: 'hexagon-grid',
         title: 'Grupper',
       },
       {
         id: 'logg',
-        group: '4',
+        groupId: '4',
         icon: 'clock-dashed',
         title: 'Aktivitetslogg',
       },
@@ -367,7 +367,7 @@ export const CompanyMenu: Story = {
     items: [
       {
         id: 'company',
-        group: '1',
+        groupId: '1',
         size: 'lg',
         avatar: {
           type: 'company',
@@ -377,25 +377,25 @@ export const CompanyMenu: Story = {
       },
       {
         id: 'profil',
-        group: '2',
+        groupId: '2',
         icon: 'buildings2',
         title: 'Firmaprofil',
       },
       {
         id: 'brukere',
-        group: '3',
+        groupId: '3',
         icon: 'person-group',
         title: 'Brukere',
       },
       {
         id: 'grupper',
-        group: '3',
+        groupId: '3',
         icon: 'hexagon-grid',
         title: 'Grupper',
       },
       {
         id: 'logg',
-        group: '4',
+        groupId: '4',
         icon: 'clock-dashed',
         title: 'Aktivitetslogg',
       },
@@ -417,7 +417,7 @@ export const AccountMenu: Story = {
     items: [
       {
         id: '1',
-        group: 'a1',
+        groupId: 'a1',
         avatar: {
           type: 'person',
           name: 'Dolly Duck',
@@ -429,7 +429,7 @@ export const AccountMenu: Story = {
       },
       {
         id: '2',
-        group: 'a2',
+        groupId: 'a2',
         avatar: {
           type: 'company',
           name: 'Bergen Bar',
@@ -441,7 +441,7 @@ export const AccountMenu: Story = {
       },
       {
         id: '3',
-        group: 'a2',
+        groupId: 'a2',
         avatar: {
           type: 'company',
           name: 'Sportsklubben Brann',
@@ -453,7 +453,7 @@ export const AccountMenu: Story = {
       },
       {
         id: '4',
-        group: 'a3',
+        groupId: 'a3',
         avatarGroup: {
           type: 'company',
           items: [
@@ -472,7 +472,7 @@ export const AccountMenu: Story = {
       },
       {
         id: '5',
-        group: 'b1',
+        groupId: 'b1',
         avatar: {
           type: 'company',
           name: 'Jensens Laks',
@@ -481,7 +481,7 @@ export const AccountMenu: Story = {
       },
       {
         id: '6',
-        group: 'b1',
+        groupId: 'b1',
         avatar: {
           type: 'company',
           name: 'Haralds gym',
@@ -493,7 +493,7 @@ export const AccountMenu: Story = {
       },
       {
         id: '7',
-        group: 'b1',
+        groupId: 'b1',
         avatar: {
           type: 'company',
           name: 'Trim og tran',

package/lib/components/Menu/Menu.tsx

@@ -1,111 +1,12 @@
-import { MenuBase } from './MenuBase';
-import { MenuGroup } from './MenuGroup';
-import { MenuHeader } from './MenuHeader';
+import { MenuBase, type MenuTheme } from './MenuBase';
+import { MenuItems, type MenuItemsProps } from './MenuItems';
 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 = 'inherit' | 'global' | 'neutral' | 'company' | 'person';
-
-interface MenuItemsGroupProps {
-  title?: string;
-  divider?: boolean;
-  defaultItemColor?: MenuItemColor;
-  defaultItemSize?: MenuItemSize;
-}
-
-export type MenuGroups = Record<string, MenuItemsGroupProps>;
-
-export interface MenuProps {
-  items: MenuItemProps[];
+export interface MenuProps extends MenuItemsProps {
   theme?: MenuTheme;
-  defaultItemColor?: MenuItemColor;
-  defaultItemSize?: MenuItemSize;
-  groups?: MenuGroups;
   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 = 'inherit',
   defaultItemColor = 'subtle',

package/lib/components/Menu/MenuBase.tsx

@@ -1,10 +1,30 @@
 import cx from 'classnames';
 import type { ElementType, ReactNode } from 'react';
-import styles from './menu.module.css';
+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?: string;
+  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;
 }
@@ -12,7 +32,31 @@ export interface MenuBaseProps {
 export const MenuBase = ({ as = 'nav', theme, className, children }: MenuBaseProps) => {
   const Component = as;
   return (
-    <Component className={cx(styles.menu, className)} data-theme={theme}>
+    <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>
   );