@altinn/altinn-components 0.4.1 → 0.5.1

package/lib/components/Button/comboButton.module.css

@@ -2,84 +2,34 @@
   display: inline-flex;
   flex-direction: row-reverse;
   align-items: center;
-  border: 1px solid;
   border-radius: 2px;
 }
 
-/*
-.button[aria-selected="true"] {
-  background-color: var(--theme-background-subtle);
-  color: var(--theme-text-default);
-}
-  */
-
-.label {
-  line-height: 1rem;
-  font-weight: 600;
-}
-
 .divider {
+  align-self: stretch;
   border-left: 1px solid currentColor;
   width: 1px;
-  height: 1em;
+  margin: 0.375rem 0;
 }
 
-.icon {
-  display: flex;
+.primary,
+.secondary {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-}
-
-/* variant */
-
-.button[data-variant="solid"] {
-  border-color: var(--theme-base-hover);
-  background-color: var(--theme-base-hover);
-  color: white;
-}
-
-/* sm 36px */
-
-.label[data-size="sm"] {
-  font-size: 0.875rem;
-  padding: 8px 10px;
+  border: none;
 }
 
-.divider[data-size="sm"] {
-  height: 20px;
-}
-
-.icon[data-size="sm"] {
-  font-size: 1.25rem;
-  padding: 6px 5px;
-}
-
-/* md 44px */
-
-.button[data-size="md"] {
-  font-size: 1rem;
-}
-
-.label[data-size="md"] {
-  padding: 10px;
-}
-
-.icon[data-size="md"] {
-  font-size: 1.25rem;
-  padding: 12px 8px;
-}
-
-/* lg 56 */
-
-.button[data-size="lg"] {
-  font-size: 1.125rem;
+.primary[data-size="sm"],
+.secondary[data-size="sm"] {
+  padding: 0 0.375rem;
 }
 
-.label[data-size="lg"] {
-  padding: 1rem;
+.primary[data-size="md"],
+.secondary[data-size="md"] {
+  padding: 0 0.5rem;
 }
 
-.icon[data-size="lg"] {
-  font-size: 1.5rem;
-  padding: 16px 10px;
+.primary[data-size="lg"],
+.secondary[data-size="lg"] {
+  padding: 0 0.625rem;
 }

package/lib/components/Button/iconButton.module.css

@@ -1,7 +1,4 @@
 .button {
-  border: 1px solid;
-  width: 2.75rem;
-  height: 2.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,5 +7,25 @@
 
 .icon {
   font-size: 1.5rem;
-  margin: 0.625rem;
+}
+
+/* sm 36 */
+
+.button[data-size="sm"] {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+
+/* md 44 */
+
+.button[data-size="md"] {
+  width: 2.75rem;
+  height: 2.75rem;
+}
+
+/* lg 56 */
+
+.button[data-size="lg"] {
+  width: 3.5rem;
+  height: 3.5rem;
 }

package/lib/components/Button/index.ts

@@ -1,4 +1,6 @@
 export * from './ButtonBase';
+export * from './ButtonLabel';
+export * from './ButtonIcon';
 export * from './Button';
 export * from './ComboButton';
 export * from './IconButton';

package/lib/components/ContextMenu/ContextMenu.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ContextMenu } from './ContextMenu';
+
+const meta = {
+  title: 'ContextMenu/ContextMenu',
+  component: ContextMenu,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    placement: 'left',
+    items: [
+      {
+        id: '1',
+        groupId: '1',
+        icon: 'arrow-redo',
+        label: 'Del og gi tilgang',
+      },
+      {
+        id: '2',
+        groupId: '1',
+        icon: 'eye-closed',
+        label: 'Marker som ny',
+      },
+      {
+        id: '3',
+        groupId: '2',
+        icon: 'archive',
+        label: 'Flytt til arkiv',
+      },
+      {
+        id: '4',
+        groupId: '2',
+        icon: 'trash',
+        label: 'Flytt til papirkurv',
+      },
+      {
+        id: '5',
+        groupId: '3',
+        icon: 'clock-dashed',
+        label: 'Aktivitetslogg',
+      },
+    ],
+  },
+} satisfies Meta<typeof ContextMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/lib/components/ContextMenu/ContextMenu.tsx

@@ -1,28 +1,20 @@
-import type { MouseEventHandler } from 'react';
-import { ButtonBase } from '../Button';
-import { Icon } from '../Icon';
-import { Menu, type MenuGroups, type MenuItemProps } from '../Menu';
-import styles from './contextMenu.module.css';
+import type { DropdownPlacement, MenuItemProps } from '../';
+import { type MenuItemGroups, MenuItems } from '../';
+import { useRootContext } from '../RootProvider';
+import { ContextMenuBase } from './ContextMenuBase';
 
 export interface ContextMenuProps {
-  onToggle?: MouseEventHandler;
-  label: string;
-  value: string | number;
+  id: string;
   items: MenuItemProps[];
-  groups?: MenuGroups;
-  expanded?: boolean;
-  className?: string;
+  placement?: DropdownPlacement;
+  groups?: MenuItemGroups;
 }
 
-export const ContextMenu = ({ expanded = true, onToggle, groups = {}, items }: ContextMenuProps) => {
+export const ContextMenu = ({ id = 'context-menu', placement = 'right', groups = {}, items }: ContextMenuProps) => {
+  const { currentId, toggleId } = useRootContext();
   return (
-    <div className={styles.toggle}>
-      <ButtonBase className={styles.button} as="button" color="secondary" onClick={onToggle}>
-        <Icon className={styles.icon} name="menu-elipsis-horizontal" />
-      </ButtonBase>
-      <div className={styles.dropdown} aria-expanded={expanded}>
-        <Menu theme="global" defaultItemColor="subtle" groups={groups} items={items} />
-      </div>
-    </div>
+    <ContextMenuBase placement={placement} expanded={currentId === id} onToggle={() => toggleId(id)}>
+      <MenuItems groups={groups} items={items} />
+    </ContextMenuBase>
   );
 };

package/lib/components/ContextMenu/ContextMenuBase.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import { DropdownBase, IconButton } from '../';
+import type { DropdownPlacement } from '../';
+import styles from './contextMenuBase.module.css';
+
+export interface ContextMenuBaseProps {
+  placement: DropdownPlacement;
+  expanded: boolean;
+  onToggle?: () => void;
+  children?: ReactNode;
+}
+
+export const ContextMenuBase = ({
+  placement = 'right',
+  expanded = false,
+  onToggle,
+  children,
+}: ContextMenuBaseProps) => {
+  return (
+    <div className={styles.toggle}>
+      <IconButton
+        className={styles.button}
+        icon="menu-elipsis-horizontal"
+        variant="text"
+        color="secondary"
+        onClick={onToggle}
+      />
+      <DropdownBase className={styles.dropdown} placement={placement} expanded={expanded}>
+        {children}
+      </DropdownBase>
+    </div>
+  );
+};

package/lib/components/Dialog/Dialog.stories.ts

@@ -8,11 +8,15 @@ const meta = {
   parameters: {},
   argTypes: { body: { control: 'text' } },
   args: {
-    menu: [
-      {
-        items: [{ label: 'Menu 1' }],
-      },
-    ],
+    menu: {
+      id: 'context-menu',
+      items: [
+        {
+          label: 'Fjern',
+          id: 'remove',
+        },
+      ],
+    },
     updatedAt: '1999-05-26',
     updatedAtLabel: '26. mai 1999',
     title: 'Title',
@@ -42,9 +46,11 @@ export const Attachments: Story = {
       items: [
         {
           label: 'Dokument 1.pdf',
+          href: '',
         },
         {
           label: 'Dokument 2.pdf',
+          href: '',
         },
       ],
     },
@@ -106,6 +112,7 @@ export const Example: Story = {
       items: [
         {
           label: 'Vedtak om innlevering av bedriftsdata.pdf',
+          href: '',
         },
       ],
     },

package/lib/components/Dialog/Dialog.tsx

@@ -19,6 +19,8 @@ import { type DialogBackButtonProps, DialogNav } from './DialogNav';
 import type { DialogStatusProps } from './DialogStatus';
 
 export interface DialogProps {
+  /** Dialog id */
+  id: string;
   /** Title */
   title: string;
   /** Back button */

package/lib/components/Dialog/DialogGroup.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { Heading, ListBase, SectionBase, SectionHeader } from '../';
+import { Button } from '../Button';
+
+export interface DialogGroupProps {
+  title?: string;
+  children?: ReactNode;
+}
+
+export const DialogGroup = ({ title, children }: DialogGroupProps) => {
+  return (
+    <SectionBase spacing="md">
+      {title && (
+        <SectionHeader padding margin>
+          <Heading>{title}</Heading>
+          <Button variant="text" icon="checkmark" size="sm" reverse>
+            Velg alle
+          </Button>
+        </SectionHeader>
+      )}
+      <ListBase spacing="md">{children}</ListBase>
+    </SectionBase>
+  );
+};

package/lib/components/Dialog/DialogList.stories.ts

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
 import { DialogList } from './DialogList';
 
 const meta = {
@@ -16,26 +14,31 @@ const meta = {
         title: 'Støtte til utbygging av solceller',
         summary: 'Din støtte er innvilget',
         status: { value: 'draft' },
+        groupId: '2024-01',
       },
       {
         title: 'Støtte til utbygging av solceller',
         summary: 'Din støtte er innvilget',
         status: { value: 'sent' },
+        groupId: '2024-02',
       },
       {
         title: 'Støtte til utbygging av solceller',
         summary: 'Din støtte er innvilget',
         status: { value: 'requires-attention' },
+        groupId: '2024-01',
       },
       {
         title: 'Støtte til utbygging av solceller',
         summary: 'Din støtte er innvilget',
         status: { value: 'in-progress' },
+        groupId: '2024-02',
       },
       {
         title: 'Støtte til utbygging av solceller',
         summary: 'Din støtte er innvilget.',
         status: { value: 'completed' },
+        groupId: '2024-01',
       },
     ],
   },
@@ -48,14 +51,15 @@ export const Default: Story = {
   args: {},
 };
 
-export const Company: Story = {
+export const Grouped: Story = {
   args: {
-    theme: 'company',
-  },
-};
-
-export const Person: Story = {
-  args: {
-    theme: 'person',
+    groups: {
+      '2024-01': {
+        title: 'Januar 2024',
+      },
+      '2024-02': {
+        title: 'Februar 2024',
+      },
+    },
   },
 };

package/lib/components/Dialog/DialogList.tsx

@@ -1,20 +1,35 @@
-import type { LayoutTheme } from '../Layout';
-import { ListBase } from '../List';
+import { SectionBase } from '../';
+import { useMenu } from '../../hooks';
+import { DialogGroup, type DialogGroupProps } from './DialogGroup';
 import { DialogListItem, type DialogListItemProps } from './DialogListItem';
-import type { DialogListItemSize } from './DialogListItemBase';
 
 export interface DialogListProps {
-  size?: DialogListItemSize;
-  theme?: LayoutTheme;
-  items?: DialogListItemProps[];
+  items: DialogListItemProps[];
+  groups?: Record<string, DialogGroupProps>;
 }
 
-export const DialogList = ({ theme, size = 'md', items }: DialogListProps) => {
+export const DialogList = ({ items, groups = {} }: DialogListProps) => {
+  const { menu } = useMenu<DialogListItemProps, DialogGroupProps>({
+    items,
+    groups,
+    groupByKey: 'groupId',
+    keyboardEvents: false,
+  });
+
   return (
-    <ListBase theme={theme} size={size}>
-      {items?.map((item, index) => {
-        return <DialogListItem {...item} size={size} key={'item' + index} />;
+    <SectionBase spacing="none" margin="md">
+      {menu?.map((group, groupIndex) => {
+        const groupProps = group.props || {};
+
+        return (
+          <DialogGroup {...groupProps} key={groupIndex}>
+            {group?.items.map((item, index) => {
+              const itemProps = item.props || {};
+              return <DialogListItem {...itemProps} key={index} />;
+            })}
+          </DialogGroup>
+        );
       })}
-    </ListBase>
+    </SectionBase>
   );
 };

package/lib/components/Dialog/DialogListItem.tsx

@@ -55,6 +55,8 @@ export type DialogListItemProps = {
   attachmentsCount?: number;
   /** OnClick handler */
   onClick?: () => void;
+  /** Group id */
+  groupId?: string;
 };
 
 /**
@@ -68,6 +70,7 @@ export const DialogListItem = ({
   size = 'lg',
   variant = 'neutral',
   href,
+  onClick,
   select,
   selected,
   status,
@@ -84,10 +87,17 @@ export const DialogListItem = ({
   attachmentsCount,
   title,
   summary,
-  ...rest
 }: DialogListItemProps) => {
   return (
-    <DialogListItemBase as={as} size={size} href={href} select={select} selected={selected} variant={variant} {...rest}>
+    <DialogListItemBase
+      as={as}
+      size={size}
+      href={href}
+      select={select}
+      selected={selected}
+      variant={variant}
+      onClick={onClick}
+    >
       <DialogBorder className={styles.border} size={size} seen={seen}>
         <header data-size={size} className={styles.header}>
           <DialogTitle size={size} seen={seen} variant={variant}>

package/lib/components/Dialog/DialogListItemBase.tsx

@@ -20,6 +20,8 @@ export type DialogListItemBaseProps = {
   children?: ReactNode;
   /** Variant */
   variant?: DialogListItemVariant;
+  /** OnClick handler */
+  onClick?: () => void;
 };
 
 /**
@@ -35,13 +37,13 @@ export const DialogListItemBase = ({
   select,
   selected,
   children,
-  ...rest
+  onClick,
 }: DialogListItemBaseProps) => {
   const Component = as || 'button';
 
   return (
     <article className={styles.item} data-size={size} aria-selected={selected}>
-      <Component className={styles.link} data-size={size} href={href} {...rest}>
+      <Component className={styles.link} data-size={size} href={href} onClick={onClick} tabIndex={0}>
         {children}
       </Component>
       {select && <DialogSelect className={styles.select} {...select} />}

package/lib/components/Dialog/DialogNav.stories.ts

@@ -54,31 +54,31 @@ export const ContextMenu: Story = {
       items: [
         {
           id: '1',
-          group: '1',
+          groupId: '1',
           icon: 'arrow-redo',
           label: 'Del og gi tilgang',
         },
         {
           id: '2',
-          group: '1',
+          groupId: '1',
           icon: 'eye-closed',
           label: 'Marker som ny',
         },
         {
           id: '3',
-          group: '2',
+          groupId: '2',
           icon: 'archive',
           label: 'Flytt til arkiv',
         },
         {
           id: '4',
-          group: '2',
+          groupId: '2',
           icon: 'trash',
           label: 'Flytt til papirkurv',
         },
         {
           id: '5',
-          group: '3',
+          groupId: '3',
           icon: 'clock-dashed',
           label: 'Aktivitetslogg',
         },

package/lib/components/Dialog/DialogNav.tsx

@@ -1,8 +1,7 @@
 'use client';
-import { useState } from 'react';
 import type { ElementType } from 'react';
 import { Button } from '../Button';
-import { ContextMenu, type ContextMenuProps } from '../ContextMenu/ContextMenu.tsx';
+import { ContextMenu, type ContextMenuProps } from '../ContextMenu';
 import { MetaTimestamp } from '../Meta';
 import { DialogStatus, type DialogStatusProps } from './DialogStatus';
 import { DialogTouchedBy, type DialogTouchedByActor } from './DialogTouchedBy';
@@ -37,9 +36,6 @@ export const DialogNav = ({
   touchedBy,
   menu,
 }: DialogNavProps) => {
-  const [expandedItem, setexpandedItem] = useState<boolean>(false);
-  const onToggle = () => setexpandedItem((expanded) => !expanded);
-
   return (
     <nav className={styles.nav}>
       <Button {...backButton} variant="text" color="secondary" icon="arrow-left" reverse>
@@ -53,7 +49,7 @@ export const DialogNav = ({
         )}
         {status && <DialogStatus {...status} />}
         {touchedBy && <DialogTouchedBy touchedBy={touchedBy} />}
-        {menu && <ContextMenu {...menu} expanded={expandedItem} onToggle={onToggle} />}
+        {menu && <ContextMenu {...menu} />}
       </div>
     </nav>
   );

package/lib/components/Dialog/DialogSelect.tsx

@@ -16,7 +16,7 @@ export type DialogSelectProps = {
 export const DialogSelect = ({ checked = false, onChange, className }: DialogSelectProps) => {
   return (
     <label className={cx(styles.label, className)}>
-      <input type="checkbox" checked={checked} onChange={onChange} className={styles.input} />
+      <input type="checkbox" checked={checked} onChange={onChange} className={styles.input} tabIndex={-1} />
       <CheckboxIcon hover={true} checked={checked} className={styles.icon} />
     </label>
   );

package/lib/components/Dialog/dialogGroup.module.css

@@ -0,0 +1,35 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+  margin: 0.5rem 0;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin: 0.5rem 0;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  margin: 0.375rem 0;
+}
+
+.title {
+  padding: 0 1rem;
+}
+
+@media (min-width: 1024px) {
+  .title {
+    padding: 0;
+  }
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+}

package/lib/components/Dropdown/Backdrop.tsx

@@ -1,11 +1,12 @@
 import cx from 'classnames';
+import type { MouseEventHandler } from 'react';
 import styles from './backdrop.module.css';
 
 export interface BackdropProps {
-  expanded?: boolean;
   className?: string;
+  onClick?: MouseEventHandler;
 }
 
-export const Backdrop = ({ expanded = false, className }: BackdropProps) => {
-  return <div className={cx(styles.backdrop, className)} aria-expanded={expanded} />;
+export const Backdrop = ({ className, onClick }: BackdropProps) => {
+  return <div className={cx(styles.backdrop, className)} onMouseDown={onClick} />;
 };

package/lib/components/Dropdown/DrawerBase.tsx

@@ -2,15 +2,18 @@ import cx from 'classnames';
 import type { ReactNode } from 'react';
 import styles from './drawerBase.module.css';
 
+export type DrawerPlacement = 'inline' | 'bottom';
+
 export interface DrawerBaseProps {
+  placement?: DrawerPlacement;
   expanded?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-export const DrawerBase = ({ expanded = false, className, children }: DrawerBaseProps) => {
+export const DrawerBase = ({ placement = 'inline', expanded = false, className, children }: DrawerBaseProps) => {
   return (
-    <div className={cx(styles.drawer, className)} aria-expanded={expanded}>
+    <div className={cx(styles.drawer, className)} data-placement={placement} aria-expanded={expanded}>
       {children}
     </div>
   );

package/lib/components/Dropdown/DrawerBody.tsx

@@ -0,0 +1,12 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './drawerBody.module.css';
+
+export interface DrawerBodyProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const DrawerBody = ({ className, children }: DrawerBodyProps) => {
+  return <div className={cx(styles.body, className)}>{children}</div>;
+};