@altinn/altinn-components 0.0.1

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

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { MenuItem } from './MenuItem';
+
+const meta = {
+  title: 'Menu/MenuItem',
+  component: MenuItem,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta<typeof MenuItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: 'inbox',
+    title: 'Innboks',
+  },
+};
+
+export const DefaultBadge: Story = {
+  args: {
+    icon: 'inbox',
+    title: 'Innboks',
+    badge: 4,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    icon: 'inbox',
+    title: 'Innboks',
+    color: 'strong',
+  },
+};
+
+export const LargeBadge: Story = {
+  args: {
+    size: 'lg',
+    icon: 'inbox',
+    title: 'Innboks',
+    badge: 4,
+    color: 'strong',
+  },
+};
+
+export const Person: Story = {
+  args: {
+    avatar: {
+      type: 'person',
+      name: 'Eirik Horneland',
+    },
+    title: 'Eirik Horneland',
+  },
+};
+
+export const PersonGroup: Story = {
+  args: {
+    avatarGroup: {
+      items: [
+        {
+          type: 'person',
+          name: 'Eirik Horneland',
+        },
+        {
+          type: 'person',
+          name: 'Japhet Sery Larsen',
+        },
+        {
+          type: 'person',
+          name: 'Aune Heggebø',
+        },
+      ],
+    },
+    title: '3 personer',
+  },
+};
+
+export const Company: Story = {
+  args: {
+    avatar: {
+      type: 'company',
+      name: 'Sportsklubben Brann',
+    },
+    title: 'Sportsklubben Brann',
+  },
+};
+
+export const CompanyGroup: Story = {
+  args: {
+    avatarGroup: {
+      type: 'company',
+      items: [
+        {
+          name: 'Sportsklubben Brann',
+        },
+        {
+          name: 'Bergen Næringsråd',
+        },
+        {
+          name: 'Bergen bar',
+        },
+      ],
+    },
+    title: '3 virksomheter',
+  },
+};
+
+export const PersonAccount: Story = {
+  args: {
+    ...Person.args,
+    size: 'lg',
+    description: 'Født: XX.XX.XXXX',
+  },
+};
+
+export const CompanyAccount: Story = {
+  args: {
+    ...Company.args,
+    size: 'lg',
+    description: 'Org nr.: XX.XX.XXXX',
+  },
+};

package/lib/components/Menu/MenuItem.tsx

@@ -0,0 +1,58 @@
+import type { ElementType, ReactNode } from 'react';
+import type { AvatarGroupProps, AvatarProps } from '../Avatar';
+import type { IconName } from '../Icon';
+import { MenuItemBase, type MenuItemColor, type MenuItemSize } from './MenuItemBase';
+import { MenuItemLabel } from './MenuItemLabel';
+import { MenuItemMedia } from './MenuItemMedia';
+
+export interface MenuItemProps {
+  id: string;
+  type?: string;
+  as?: ElementType;
+  color?: MenuItemColor;
+  href?: string;
+  onClick?: () => void;
+  hidden?: boolean;
+  collapsible?: boolean;
+  expanded?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+  group?: string | number;
+  size?: MenuItemSize;
+  title?: string;
+  description?: string;
+  label?: string;
+  badge?: string;
+  icon?: IconName;
+  avatar?: AvatarProps;
+  avatarGroup?: AvatarGroupProps;
+  children?: ReactNode;
+  items?: MenuItemProps[];
+  className?: string;
+}
+
+export const MenuItem = ({
+  as = 'a',
+  color,
+  children,
+  selected,
+  disabled,
+  size = 'sm',
+  icon,
+  avatar,
+  avatarGroup,
+  badge,
+  label,
+  title,
+  description,
+  ...rest
+}: MenuItemProps) => {
+  return (
+    <MenuItemBase as={as} size={size} badge={badge} color={color} selected={selected} disabled={disabled} {...rest}>
+      <MenuItemMedia color={color} size={size} icon={icon} avatar={avatar} avatarGroup={avatarGroup} />
+      <MenuItemLabel title={title} description={description} size={size}>
+        {label || children}
+      </MenuItemLabel>
+    </MenuItemBase>
+  );
+};

package/lib/components/Menu/MenuItemBase.tsx

@@ -0,0 +1,62 @@
+import cx from 'classnames';
+import type { ElementType, ReactNode } from 'react';
+import { Badge } from '../Badge';
+import { Icon, type IconName } from '../Icon';
+import styles from './menuItem.module.css';
+
+export type MenuItemColor = 'default' | 'subtle' | 'strong' | 'company' | 'person';
+export type MenuItemSize = 'sm' | 'md' | 'lg';
+
+export interface MenuItemBaseProps {
+  as?: ElementType;
+  color?: MenuItemColor;
+  children?: ReactNode;
+  size?: MenuItemSize;
+  linkIcon?: IconName;
+  badge?: string | number | undefined;
+  collapsible?: boolean;
+  expanded?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const MenuItemBase = ({
+  as,
+  size,
+  color,
+  linkIcon,
+  badge,
+  collapsible = false,
+  expanded = false,
+  selected = false,
+  disabled = false,
+  className,
+  children,
+  ...rest
+}: MenuItemBaseProps) => {
+  const Component = as || 'a';
+
+  const applicableIcon =
+    collapsible && expanded ? 'chevron-up' : collapsible ? 'chevron-down' : linkIcon ? 'chevron-right' : linkIcon;
+
+  return (
+    <Component
+      data-size={size}
+      data-color={color}
+      aria-expanded={expanded}
+      aria-disabled={disabled}
+      aria-selected={selected}
+      className={cx(styles?.item, className)}
+      {...rest}
+    >
+      <div className={styles.content}>
+        {children}
+        {badge && <Badge>{badge}</Badge>}
+      </div>
+      <div className={styles?.action}>
+        {applicableIcon && <Icon name={applicableIcon} className={styles?.actionIcon} />}
+      </div>
+    </Component>
+  );
+};

package/lib/components/Menu/MenuItemLabel.tsx

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

package/lib/components/Menu/MenuItemMedia.tsx

@@ -0,0 +1,42 @@
+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';
+
+interface MenuItemMediaProps {
+  color?: MenuItemColor;
+  size?: MenuItemSize;
+  icon?: IconName;
+  avatar?: AvatarProps;
+  avatarGroup?: AvatarGroupProps;
+  children?: ReactNode;
+}
+
+const sizeMap = {
+  avatar: {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+  },
+  avatarGroup: {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+  },
+};
+
+export const MenuItemMedia = ({ size = 'sm', color, icon, avatar, avatarGroup, children }: MenuItemMediaProps) => {
+  if (!icon && !avatar && !avatarGroup && !children) {
+    return false;
+  }
+
+  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} /> : ''}
+      {avatar && <Avatar {...avatar} size={sizeMap?.avatar[size] as AvatarSize} />}
+      {avatarGroup && <AvatarGroup {...avatarGroup} size={sizeMap?.avatarGroup[size] as AvatarSize} />}
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MenuOption } from './MenuOption';
+
+const meta = {
+  title: 'Menu/MenuOption',
+  component: MenuOption,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} 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,45 @@
+import type { ChangeEventHandler } from 'react';
+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;
+  group?: string;
+  size?: MenuItemSize;
+  name?: string;
+  title?: string;
+  description?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: ChangeEventHandler;
+  type?: MenuOptionType;
+}
+
+export const MenuOption = ({
+  size = 'sm',
+  type,
+  name,
+  value,
+  label,
+  title,
+  description,
+  checked = false,
+  disabled,
+  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} />}
+      <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/index.ts

@@ -0,0 +1,10 @@
+export * from './MenuItemBase';
+export * from './MenuItemLabel';
+export * from './MenuItemMedia';
+export * from './MenuItem';
+export * from './MenuOption';
+export * from './MenuSearch';
+export * from './MenuGroup';
+export * from './MenuHeader';
+export * from './MenuBase';
+export * from './Menu';

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

@@ -0,0 +1,26 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.menu ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-indent: 0;
+}
+
+.menu li {
+  list-style: none;
+  list-style-type: 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);
+}

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

@@ -0,0 +1,12 @@
+.header {
+  padding: 0.75rem 0.5rem;
+  margin: 0.5rem 0;
+}
+
+.title {
+  font-size: 0.875rem;
+  font-weight: normal;
+  line-height: 1.25rem;
+  color: var(--theme-text-subtle);
+  margin: 0;
+}

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

@@ -0,0 +1,136 @@
+.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;
+}
+
+.media {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5%;
+  width: 2rem;
+  height: 2rem;
+}
+
+.media[data-size="lg"] {
+  width: 44px;
+  height: 44px;
+}
+
+.icon {
+  font-size: 1.5rem;
+}
+
+/* label */
+
+.label {
+  display: flex;
+  flex-direction: column;
+  padding: 0 0.25rem;
+}
+
+/* title */
+
+.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);
+}
+
+/* colors */
+
+.item:hover {
+  background-color: var(--theme-surface-default);
+}
+
+.item[aria-selected="true"] {
+  background-color: var(--theme-background-default);
+}
+
+.media[data-color="subtle"] {
+  background-color: var(--theme-background-default);
+  color: var(--theme-text-default);
+}
+
+.media[data-color="strong"] {
+  background-color: var(--theme-base-default);
+  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);
+}
+
+.media[data-color="company"] {
+  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);
+}
+
+.media[data-color="person"] {
+  background-color: var(--person-surface-default);
+}

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

@@ -0,0 +1,29 @@
+.label {
+  padding-left: 6px;
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+}
+
+.icon {
+  font-size: 1rem;
+  border: 2px solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon > svg {
+  color: transparent;
+}
+
+.label:hover .icon > svg {
+  color: var(--theme-base-default);
+}
+
+.icon[data-checked="true"] > svg,
+.label:hover .icon[data-checked="true"] > svg {
+  color: var(--theme-background-subtle);
+}