@altinn/altinn-components 0.1.0 → 0.2.1

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

@@ -0,0 +1,55 @@
+/* label */
+
+.label {
+  display: flex;
+  justify-content: center;
+}
+
+.label[data-size="xs"] {
+  align-items: center;
+  column-gap: 0.25em;
+  font-size: 0.875rem;
+}
+
+.label[data-size="sm"] {
+  align-items: center;
+  column-gap: 0.25rem;
+}
+
+.label[data-size="md"] {
+  flex-direction: column;
+}
+
+.label[data-size="lg"] {
+  flex-direction: column;
+}
+
+.label[data-size="xl"] {
+  flex-direction: column;
+}
+
+/* title + descr */
+
+.title {
+  font-weight: 600;
+  margin: 0;
+}
+
+.title[data-size="lg"] {
+  font-size: 1.125rem;
+}
+
+.title[data-size="xl"] {
+  font-size: 1.25rem;
+}
+
+.description {
+  color: var(--theme-text-subtle);
+  margin: 0;
+}
+
+.description[data-size="md"],
+.description[data-size="lg"],
+.description[data-size="xl"] {
+  font-size: 0.875em;
+}

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

@@ -0,0 +1,41 @@
+/* media */
+
+.media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1em;
+  height: 1em;
+}
+
+.media {
+  font-size: 1.5rem;
+}
+
+.media[data-size="xs"] {
+  font-size: 1.25rem;
+}
+
+.media[data-size="md"] {
+  font-size: 1.875rem;
+}
+
+.media[data-size="md"] .icon {
+  font-size: 1.5rem;
+}
+
+.media[data-size="lg"] {
+  font-size: 2.25rem;
+}
+
+.media[data-size="lg"] .icon {
+  font-size: 1.75rem;
+}
+
+.media[data-size="xl"] {
+  font-size: 2.75rem;
+}
+
+.media[data-size="xl"] .icon {
+  font-size: 2rem;
+}

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

@@ -14,7 +14,6 @@ type Story = StoryObj<typeof meta>;
 
 export const GlobalMenu: Story = {
   args: {
-    theme: 'global',
     groups: {
       settings: {
         defaultItemColor: 'default',
@@ -38,6 +37,10 @@ export const GlobalMenu: Story = {
         size: 'lg',
         icon: 'inbox',
         title: 'Innboks',
+        badge: {
+          color: 'alert',
+          label: '4',
+        },
       },
       {
         id: 'access',
@@ -45,6 +48,10 @@ export const GlobalMenu: Story = {
         size: 'lg',
         icon: 'bookmark',
         title: 'Tilganger',
+        badge: {
+          color: 'alert',
+          label: '2',
+        },
       },
       {
         id: 'access',
@@ -65,7 +72,6 @@ export const GlobalMenu: Story = {
 
 export const CollapsibleGlobalMenu: Story = {
   args: {
-    theme: 'global',
     groups: {
       settings: {
         defaultItemColor: 'default',
@@ -89,7 +95,6 @@ export const CollapsibleGlobalMenu: Story = {
         size: 'lg',
         icon: 'inbox',
         title: 'Innboks',
-        badge: '4',
         collapsible: true,
         items: [
           {
@@ -104,14 +109,12 @@ export const CollapsibleGlobalMenu: Story = {
             icon: 'file-checkmark',
             selected: true,
             title: 'Sendt',
-            badge: 2,
           },
           {
             id: 'bookmarks',
             group: '3',
             icon: 'bookmark',
             title: 'Lagrede søk',
-            badge: 11,
           },
           {
             id: 'arkiv',
@@ -154,7 +157,7 @@ export const CollapsibleGlobalMenu: Story = {
 export const ExpandedGlobalMenu: Story = {
   args: {
     ...CollapsibleGlobalMenu.args,
-    items: [...(CollapsibleGlobalMenu?.args?.items ?? [])].map((item) => {
+    items: [...CollapsibleGlobalMenu.args.items].map((item) => {
       if (item.collapsible) {
         return {
           ...item,
@@ -169,7 +172,6 @@ export const ExpandedGlobalMenu: Story = {
 
 export const DrilldownMenu: Story = {
   args: {
-    theme: 'global',
     color: 'subtle',
     groups: {
       'level-1': {
@@ -196,18 +198,18 @@ export const DrilldownMenu: Story = {
             expanded: true,
             items: [
               {
+                id: 'c1',
                 group: 'level-3',
-                name: 'c1',
                 title: 'Kategori 1',
               },
               {
                 group: 'level-3',
-                name: 'c2',
+                id: 'c2',
                 title: 'Kategori 2',
               },
               {
                 group: 'level-3',
-                name: 'c3',
+                id: 'c3',
                 title: 'Kategori 3',
               },
             ],
@@ -220,9 +222,7 @@ export const DrilldownMenu: Story = {
 
 export const InboxMenu: Story = {
   args: {
-    theme: 'global',
     groups: {},
-
     items: [
       {
         id: 'innboks',
@@ -231,13 +231,16 @@ export const InboxMenu: Story = {
         icon: 'inbox',
         title: 'Innboks',
         color: 'strong',
-        badge: 4,
+        badge: { color: 'alert', label: '4' },
       },
       {
         id: 'utkast',
         group: '2',
         icon: 'doc-pencil',
         title: 'Utkast',
+        badge: {
+          label: '3',
+        },
       },
       {
         id: 'sendt',
@@ -245,20 +248,27 @@ export const InboxMenu: Story = {
         icon: 'file-checkmark',
         selected: true,
         title: 'Sendt',
-        badge: 2,
+        badge: {
+          label: '2',
+        },
       },
       {
         id: 'lagret',
         group: '3',
         icon: 'bookmark',
         title: 'Lagrede søk',
-        badge: 11,
+        badge: {
+          label: '5',
+        },
       },
       {
         id: 'arkivert',
         group: '4',
         icon: 'archive',
         title: 'Arkivert',
+        badge: {
+          label: '100+',
+        },
       },
       {
         id: 'papirkurv',
@@ -266,16 +276,18 @@ export const InboxMenu: Story = {
         disabled: true,
         icon: 'trash',
         title: 'Papirkurv',
+        badge: {
+          label: '45',
+        },
       },
     ],
 
-    color: 'subtle',
+    defaultItemColor: 'subtle',
   },
 };
 
 export const InboxMenuWithShortcuts = {
   args: {
-    theme: 'global',
     groups: {
       ...InboxMenu.args?.groups,
       shortcuts: {
@@ -284,7 +296,7 @@ export const InboxMenuWithShortcuts = {
       },
     },
     items: [
-      ...(InboxMenu.args?.items ?? []),
+      ...(InboxMenu?.args?.items ?? []),
       {
         id: 'users',
         group: 'shortcuts',
@@ -303,7 +315,6 @@ export const InboxMenuWithShortcuts = {
 
 export const PersonMenu: Story = {
   args: {
-    theme: 'global',
     groups: {},
     items: [
       {
@@ -352,7 +363,6 @@ export const PersonMenu: Story = {
 
 export const CompanyMenu: Story = {
   args: {
-    theme: 'global',
     groups: {},
     items: [
       {
@@ -395,12 +405,12 @@ export const CompanyMenu: Story = {
 
 export const AccountMenu: Story = {
   args: {
-    theme: 'global',
     groups: {
       a1: {
         title: 'Deg selv, favoritter og grupper',
       },
       b1: {
+        id: 'companies',
         title: 'Andre kontoer',
       },
     },
@@ -413,7 +423,9 @@ export const AccountMenu: Story = {
           name: 'Dolly Duck',
         },
         title: 'Dolly Duck',
-        badge: '15',
+        badge: {
+          label: '15',
+        },
       },
       {
         id: '2',
@@ -423,7 +435,9 @@ export const AccountMenu: Story = {
           name: 'Bergen Bar',
         },
         title: 'Bergen Bar',
-        badge: 21,
+        badge: {
+          label: '21',
+        },
       },
       {
         id: '3',
@@ -433,7 +447,9 @@ export const AccountMenu: Story = {
           name: 'Sportsklubben Brann',
         },
         title: 'Sportsklubben Brann',
-        badge: '4',
+        badge: {
+          label: '4',
+        },
       },
       {
         id: '4',
@@ -450,6 +466,9 @@ export const AccountMenu: Story = {
           ],
         },
         title: 'Alle virksomheter',
+        badge: {
+          label: '45',
+        },
       },
       {
         id: '5',
@@ -468,6 +487,9 @@ export const AccountMenu: Story = {
           name: 'Haralds gym',
         },
         title: 'Haralds gym',
+        badge: {
+          label: '2',
+        },
       },
       {
         id: '7',
@@ -487,9 +509,6 @@ export const AccountMenuWithSearch: Story = {
     ...AccountMenu.args,
     search: {
       placeholder: 'Søk i kontoer',
-      name: 'search',
-      value: '',
-      onChange: () => {},
     },
   },
 };

package/lib/components/Menu/Menu.tsx

@@ -8,7 +8,7 @@ import type { MenuItemColor, MenuItemSize } from './MenuItemBase';
 import { MenuItem, type MenuItemProps } from './MenuItem';
 import styles from './menu.module.css';
 
-export type MenuTheme = 'global' | 'neutral' | 'company' | 'person';
+export type MenuTheme = 'inherit' | 'global' | 'neutral' | 'company' | 'person';
 
 interface MenuItemsGroupProps {
   title?: string;
@@ -20,11 +20,11 @@ interface MenuItemsGroupProps {
 export type MenuGroups = Record<string, MenuItemsGroupProps>;
 
 export interface MenuProps {
+  items: MenuItemProps[];
   theme?: MenuTheme;
   defaultItemColor?: MenuItemColor;
   defaultItemSize?: MenuItemSize;
   groups?: MenuGroups;
-  items?: MenuItemProps[];
   search?: MenuSearchProps;
 }
 
@@ -107,7 +107,7 @@ export const MenuItems = ({
 };
 
 export const Menu = ({
-  theme,
+  theme = 'inherit',
   defaultItemColor = 'subtle',
   defaultItemSize = 'sm',
   groups,

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

@@ -6,7 +6,9 @@ const meta = {
   component: MenuItem,
   tags: ['autodocs'],
   parameters: {},
-  args: {},
+  args: {
+    id: 'inbox',
+  },
 } satisfies Meta<typeof MenuItem>;
 
 export default meta;
@@ -23,7 +25,9 @@ export const DefaultBadge: Story = {
   args: {
     icon: 'inbox',
     title: 'Innboks',
-    badge: 4,
+    badge: {
+      label: '4',
+    },
   },
 };
 
@@ -36,13 +40,16 @@ export const Large: Story = {
   },
 };
 
-export const LargeBadge: Story = {
+export const AlertBadge: Story = {
   args: {
     size: 'lg',
     icon: 'inbox',
     title: 'Innboks',
-    badge: 4,
     color: 'strong',
+    badge: {
+      color: 'alert',
+      label: '4',
+    },
   },
 };
 
@@ -81,8 +88,8 @@ export const PersonGroup: Story = {
 export const Company: Story = {
   args: {
     avatar: {
-      name: 'Sportsklubben Brann',
       type: 'company',
+      name: 'Sportsklubben Brann',
     },
     title: 'Sportsklubben Brann',
   },

package/lib/components/Menu/MenuItem.tsx

@@ -1,5 +1,6 @@
-import type { ElementType, ReactNode } from 'react';
+import type { ElementType, MouseEventHandler, ReactNode } from 'react';
 import type { AvatarGroupProps, AvatarProps } from '../Avatar';
+import type { BadgeProps } from '../Badge';
 import type { IconName } from '../Icon';
 import { MenuItemBase, type MenuItemColor, type MenuItemSize } from './MenuItemBase';
 import { MenuItemLabel } from './MenuItemLabel';
@@ -11,7 +12,7 @@ export interface MenuItemProps {
   as?: ElementType;
   color?: MenuItemColor;
   href?: string;
-  onClick?: () => void;
+  onClick?: MouseEventHandler;
   hidden?: boolean;
   collapsible?: boolean;
   expanded?: boolean;
@@ -22,7 +23,7 @@ export interface MenuItemProps {
   title?: string;
   description?: string;
   label?: string;
-  badge?: string;
+  badge?: BadgeProps;
   icon?: IconName;
   avatar?: AvatarProps;
   avatarGroup?: AvatarGroupProps;

package/lib/components/Menu/MenuItemBase.tsx

@@ -1,8 +1,8 @@
 import cx from 'classnames';
 import type { ElementType, ReactNode } from 'react';
-import { Badge } from '../Badge';
+import { Badge, type BadgeProps } from '../Badge';
 import { Icon, type IconName } from '../Icon';
-import styles from './menuItem.module.css';
+import styles from './menuItemBase.module.css';
 
 export type MenuItemColor = 'default' | 'subtle' | 'strong' | 'company' | 'person';
 export type MenuItemSize = 'sm' | 'md' | 'lg';
@@ -13,7 +13,7 @@ export interface MenuItemBaseProps {
   children?: ReactNode;
   size?: MenuItemSize;
   linkIcon?: IconName;
-  badge?: string | number | undefined;
+  badge?: BadgeProps;
   collapsible?: boolean;
   expanded?: boolean;
   selected?: boolean;
@@ -47,15 +47,15 @@ export const MenuItemBase = ({
       aria-expanded={expanded}
       aria-disabled={disabled}
       aria-selected={selected}
-      className={cx(styles?.item, className)}
+      className={cx(styles.item, className)}
       {...rest}
     >
       <div className={styles.content}>
         {children}
-        {badge && <Badge>{badge}</Badge>}
+        {badge && <Badge {...badge} />}
       </div>
-      <div className={styles?.action}>
-        {applicableIcon && <Icon name={applicableIcon} className={styles?.actionIcon} />}
+      <div className={styles.action}>
+        {applicableIcon && <Icon name={applicableIcon} className={styles.actionIcon} />}
       </div>
     </Component>
   );

package/lib/components/Menu/MenuItemLabel.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { MenuItemSize } from './MenuItemBase';
-import styles from './menuItem.module.css';
+import styles from './menuItemLabel.module.css';
 
 export interface MenuItemLabelProps {
   size?: MenuItemSize;
@@ -12,15 +12,15 @@ export interface MenuItemLabelProps {
 
 export const MenuItemLabel = ({ size = 'sm', label, title, description, children }: MenuItemLabelProps) => {
   return (
-    <span className={styles?.label} data-size={size}>
+    <span className={styles.label} data-size={size}>
       {children ? (
         children
       ) : (
         <>
-          <strong className={styles?.title} data-size={size}>
+          <strong className={styles.title} data-size={size}>
             {title || label}
           </strong>
-          <span className={styles?.description} data-size={size}>
+          <span className={styles.description} data-size={size}>
             {description}
           </span>
         </>

package/lib/components/Menu/MenuItemMedia.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize } from '../Avatar';
 import { Icon, type IconName } from '../Icon';
 import type { MenuItemColor, MenuItemSize } from './MenuItemBase';
-import styles from './menuItem.module.css';
+import styles from './menuItemMedia.module.css';
 
 interface MenuItemMediaProps {
   color?: MenuItemColor;
@@ -33,7 +33,7 @@ export const MenuItemMedia = ({ size = 'sm', color, icon, avatar, avatarGroup, c
 
   return (
     <div className={styles.media} data-size={size} data-color={!icon ? null : color}>
-      {icon ? <Icon name={icon} variant={color === 'strong' ? 'solid' : 'outline'} className={styles?.icon} /> : ''}
+      {icon && <Icon name={icon} variant={color === 'strong' ? 'solid' : 'outline'} className={styles.icon} />}
       {avatar && <Avatar {...avatar} size={sizeMap?.avatar[size] as AvatarSize} />}
       {avatarGroup && <AvatarGroup {...avatarGroup} size={sizeMap?.avatarGroup[size] as AvatarSize} />}
       {children}

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

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { MenuOption } from './MenuOption';
 
 const meta = {
@@ -7,7 +6,10 @@ const meta = {
   component: MenuOption,
   tags: ['autodocs'],
   parameters: {},
-  args: {},
+  args: {
+    value: '',
+    label: 'Label',
+  },
 } satisfies Meta<typeof MenuOption>;
 
 export default meta;

package/lib/components/Menu/MenuOption.tsx

@@ -33,10 +33,10 @@ export const MenuOption = ({
   onChange,
 }: MenuOptionProps) => {
   return (
-    <MenuItemBase className={styles?.label} disabled={disabled} selected={checked} size={size} as="label">
-      <input className={styles?.input} name={name} value={value} type={type} checked={checked} onChange={onChange} />
-      {type === 'checkbox' && <CheckboxIcon checked={checked} className={styles.icon} />}
-      {type === 'radio' && <RadioIcon checked={checked} className={styles.icon} />}
+    <MenuItemBase className={styles.label} disabled={disabled} selected={checked} size={size} 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>

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

@@ -0,0 +1,72 @@
+.item {
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  border: 0;
+  user-select: none;
+  cursor: pointer;
+  margin: 0.5rem 0;
+}
+
+.item[aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* size */
+
+.item[data-size="sm"] {
+  min-height: 44px;
+}
+
+/* content */
+
+.content {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  column-gap: 6px;
+  padding: 6px;
+}
+
+.action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+}
+
+.actionIcon {
+  font-size: 1.5rem;
+}
+
+/* colors */
+
+.item:hover {
+  background-color: var(--theme-background-default);
+}
+
+.item[aria-selected="true"] {
+  background-color: var(--theme-background-default);
+}
+
+/* company */
+
+.item[data-color="company"]:hover {
+  background-color: var(--company-background-subtle);
+}
+
+.item[data-color="company"][aria-selected="true"] {
+  background-color: var(--company-surface-default);
+}
+
+/* person */
+
+.item[data-color="person"]:hover {
+  background-color: var(--person-background-subtle);
+}
+
+.item[data-color="person"][aria-selected="true"] {
+  background-color: var(--person-surface-default);
+}

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

@@ -0,0 +1,22 @@
+.label {
+  display: flex;
+  flex-direction: column;
+  padding: 0 0.25rem;
+}
+
+.title[data-size="lg"] {
+  font-size: 1.125rem;
+  line-height: 1.25;
+  font-weight: 500;
+}
+
+.title[data-size="sm"] {
+  font-size: 1rem;
+  line-height: 1.25;
+  font-weight: 400;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--theme-text-subtle);
+}