@altinn/altinn-components 0.6.1 → 0.6.2

package/lib/components/Dialog/DialogActions.tsx

@@ -0,0 +1,80 @@
+'use client';
+import { type MouseEventHandler, useMemo, useState } from 'react';
+import { Button, ComboButton } from '../Button';
+import { Menu, type MenuItemProps } from '../Menu';
+import styles from './dialogAction.module.css';
+
+export type DialogButtonPriority = 'primary' | 'secondary' | 'tertiary';
+
+export interface DialogActionButtonProps {
+  id: string;
+  priority: DialogButtonPriority;
+  label?: string;
+  onClick?: MouseEventHandler;
+  loading?: boolean;
+}
+
+export interface DialogActionsProps {
+  /** List of actions */
+  items: DialogActionButtonProps[];
+  /** How many actions to display before turning into a ComboButton */
+  maxItems?: number;
+}
+
+export const DialogActions = ({ items, maxItems = 2 }: DialogActionsProps) => {
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const sortedItems = useMemo(() => {
+    return (items || []).sort((a, b) => {
+      const priorityOrder = ['primary', 'secondary', 'tertiary'];
+      return priorityOrder.indexOf(a?.priority) - priorityOrder.indexOf(b?.priority);
+    });
+  }, [items]);
+
+  if (!sortedItems.length || maxItems <= 0) {
+    return null;
+  }
+
+  if (sortedItems.length > maxItems) {
+    const remainingItems: MenuItemProps[] = sortedItems.slice(1).map((item) => ({
+      id: item.id,
+      title: item.label,
+      onClick: item.onClick,
+      group: item.priority,
+    }));
+    return (
+      <section className={styles.comboButton}>
+        <ComboButton
+          color="primary"
+          variant="solid"
+          icon={expanded ? 'chevron-up' : 'chevron-down'}
+          size="lg"
+          onIconClick={() => setExpanded((expanded) => !expanded)}
+        >
+          {sortedItems[0].label}
+        </ComboButton>
+        <div className={styles.dropdown} aria-expanded={expanded}>
+          <Menu items={remainingItems} theme="global" />
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className={styles.action}>
+      {sortedItems.map((item, index) => {
+        return (
+          <Button
+            key={'button-' + index}
+            onClick={item.onClick}
+            color="primary"
+            variant={item.priority === 'primary' ? 'solid' : 'outline'}
+            size="lg"
+            loading={item.loading}
+          >
+            {item.label}
+          </Button>
+        );
+      })}
+    </section>
+  );
+};

package/lib/components/Dialog/DialogActivityLog.tsx

@@ -0,0 +1,18 @@
+import type { ElementType, MouseEventHandler } from 'react';
+import { MetaItem, type MetaItemSize } from '../Meta';
+
+export interface DialogActivityLogProps {
+  size?: MetaItemSize;
+  label?: string;
+  as?: ElementType;
+  onClick?: MouseEventHandler;
+  href?: string;
+}
+
+export const DialogActivityLog = ({ size = 'xs', label = 'Activity log', ...rest }: DialogActivityLogProps) => {
+  return (
+    <MetaItem {...rest} size={size} icon={'clock-dashed'}>
+      {label}
+    </MetaItem>
+  );
+};

package/lib/components/Dialog/DialogArticleBase.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import styles from './dialogArticleBase.module.css';
+
+interface ArticleBaseProps {
+  children?: ReactNode;
+}
+
+export const DialogArticleBase = ({ children }: ArticleBaseProps) => {
+  return <article className={styles.article}>{children}</article>;
+};

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DialogAttachments } from './DialogAttachments';
+
+const meta = {
+  title: 'Dialog/Sections/DialogAttachments',
+  component: DialogAttachments,
+  tags: ['autodocs'],
+  args: {
+    title: '6 vedlegg',
+    items: [
+      {
+        label: 'A10-01 Situasjonsplan.pdf',
+      },
+      {
+        label: 'A40-01 Fasade Nord Ny.pdf',
+      },
+      {
+        label: 'A40-01 Fasade Øst.pdf',
+      },
+      {
+        label: 'Tegning ny fasade.pdf',
+      },
+      {
+        label: 'Tegning nytt snitt.pdf',
+      },
+      {
+        label: 'Redegjørelse estetikk.pdf',
+      },
+    ],
+  },
+} satisfies Meta<typeof DialogAttachments>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/components/Dialog/DialogAttachments.tsx

@@ -0,0 +1,25 @@
+import { type AttachmentLinkProps, AttachmentList } from '../Attachment';
+import { MetaItem } from '../Meta';
+import { Typography } from '../Typography';
+
+export interface DialogAttachmentsProps {
+  title?: string;
+  items?: AttachmentLinkProps[];
+}
+
+export const DialogAttachments = ({ title = 'Attachments', items }: DialogAttachmentsProps) => {
+  if (!items?.length) {
+    return null;
+  }
+
+  return (
+    <section>
+      <MetaItem as="h2" size="xs">
+        {title}
+      </MetaItem>
+      <Typography size="lg">
+        <AttachmentList size="lg" items={items} />
+      </Typography>
+    </section>
+  );
+};

package/lib/components/Dialog/DialogBase.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import styles from './dialog.module.css';
+
+export interface DialogBaseProps {
+  children?: ReactNode;
+}
+
+export const DialogBase = ({ children }: DialogBaseProps) => {
+  return <div className={styles.dialog}>{children}</div>;
+};

package/lib/components/Dialog/DialogBodyBase.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { DialogBorder } from './DialogBorder';
+import styles from './dialogBodyBase.module.css';
+
+export interface DialogBodyProps {
+  children?: ReactNode;
+}
+
+export const DialogBodyBase = ({ children }: DialogBodyProps) => {
+  return (
+    <DialogBorder className={styles.border}>
+      <div className={styles.body} data-theme="article">
+        {children}
+      </div>
+    </DialogBorder>
+  );
+};

package/lib/components/Dialog/DialogBorder.tsx

@@ -0,0 +1,19 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import type { DialogListItemSize } from './DialogListItemBase';
+import styles from './dialogBorder.module.css';
+
+export interface DialogBorderProps {
+  seen?: boolean;
+  size?: DialogListItemSize;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const DialogBorder = ({ seen = true, size = 'lg', className, children }: DialogBorderProps) => {
+  return (
+    <div className={cx(styles.border, className)} data-size={size} data-seen={seen}>
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DialogContent } from './DialogContent';
+
+const meta = {
+  title: 'Dialog/DialogContent',
+  component: DialogContent,
+  tags: ['autodocs'],
+  args: {
+    updatedAt: '1999-05-26 22:59:00',
+    summary: 'Summary',
+    body: 'Body',
+  },
+} satisfies Meta<typeof DialogContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const UpdatedByName: Story = {
+  args: {
+    updatedByName: 'Ole Gunnar Solskjær',
+  },
+};

package/lib/components/Dialog/DialogContent.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { Typography } from '../Typography';
+import { DialogMetadata } from './DialogMetadata';
+
+export interface DialogContentProps {
+  updatedAt?: string;
+  updatedAtLabel?: string;
+  summary?: string;
+  body?: ReactNode;
+}
+
+/** Main textual content of a dialog, including summary, body and a timestamp */
+export const DialogContent = ({ updatedAt, updatedAtLabel, summary, body }: DialogContentProps) => {
+  return (
+    <section>
+      <DialogMetadata updatedAt={updatedAt} updatedAtLabel={updatedAtLabel} />
+      <Typography size="lg">
+        <p>{summary}</p>
+        {body}
+      </Typography>
+    </section>
+  );
+};

package/lib/components/Dialog/DialogFooter.tsx

@@ -0,0 +1,14 @@
+import { Typography } from '../Typography';
+import { DialogSectionBase } from './DialogSectionBase';
+
+export interface DialogFooterProps {
+  additionalInfo?: string;
+}
+
+export const DialogFooter = ({ additionalInfo }: DialogFooterProps) => {
+  return (
+    <DialogSectionBase>
+      <Typography size="md">{additionalInfo}</Typography>
+    </DialogSectionBase>
+  );
+};

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/DialogHeader.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DialogHeader } from './DialogHeader';
+
+const meta = {
+  title: 'Dialog/Sections/DialogHeader',
+  component: DialogHeader,
+  tags: ['autodocs'],
+  args: {
+    title: 'Title',
+    sender: {
+      name: 'Sender',
+    },
+    recipient: {
+      name: 'Recipient',
+    },
+  },
+} satisfies Meta<typeof DialogHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/components/Dialog/DialogHeader.tsx

@@ -0,0 +1,23 @@
+import { DialogHeaderBase } from './DialogHeaderBase';
+import { DialogHeadings, type DialogRecipientProps, type DialogSenderProps } from './DialogHeadings';
+import type { DialogListItemVariant } from './DialogListItemBase.tsx';
+import { DialogTitle } from './DialogTitle';
+
+export interface DialogHeaderProps {
+  title: string;
+  seen: boolean;
+  variant: DialogListItemVariant;
+  sender?: DialogSenderProps;
+  recipient?: DialogRecipientProps;
+}
+
+export const DialogHeader = ({ title, sender, recipient, seen, variant }: DialogHeaderProps) => {
+  return (
+    <DialogHeaderBase>
+      <DialogTitle seen={seen} size="xl" variant={variant}>
+        {title}
+      </DialogTitle>
+      <DialogHeadings size="xl" sender={sender} recipient={recipient} />
+    </DialogHeaderBase>
+  );
+};

package/lib/components/Dialog/DialogHeaderBase.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import styles from './dialogHeaderBase.module.css';
+
+export interface DialogHeaderBaseProps {
+  children?: ReactNode;
+}
+
+export const DialogHeaderBase = ({ children }: DialogHeaderBaseProps) => {
+  return <header className={styles.header}>{children}</header>;
+};

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DialogHeadings } from './DialogHeadings';
+
+const meta = {
+  title: 'Dialog/DialogHeadings',
+  component: DialogHeadings,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    sender: {
+      name: 'Sender',
+    },
+    recipient: {
+      type: 'person',
+      name: 'Recipient',
+    },
+  },
+} satisfies Meta<typeof DialogHeadings>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Company: Story = {
+  args: {
+    grouped: true,
+  },
+};
+
+export const Grouped: Story = {
+  args: {
+    grouped: true,
+  },
+};

package/lib/components/Dialog/DialogHeadings.tsx

@@ -0,0 +1,77 @@
+import { Avatar, AvatarGroup, type AvatarSize } from '../Avatar';
+import { MetaItem } from '../Meta';
+import styles from './dialogHeadings.module.css';
+
+export type DialogSenderType = 'company' | 'person';
+export type DialogRecipientType = 'company' | 'person';
+
+export interface DialogSenderProps {
+  type?: DialogSenderType;
+  name: string;
+  imageUrl?: string;
+}
+
+export interface DialogRecipientProps {
+  type?: DialogRecipientType;
+  name: string;
+}
+
+type DialogHeadingsSize = 'sm' | 'xs' | 'sm' | 'lg' | 'xl';
+
+const sizeMap = {
+  avatar: {
+    xs: 'xs',
+    sm: 'xs',
+    md: 'xs',
+    lg: 'xs',
+    xl: 'lg',
+  },
+};
+
+export interface DialogHeadingsProps {
+  size: DialogHeadingsSize;
+  /** Group sender and recipient avatars */
+  grouped?: boolean;
+  /** Sender */
+  sender?: DialogSenderProps;
+  /** Recipient */
+  recipient?: DialogRecipientProps;
+}
+
+/** Dialog headings for sender and recipient. Should present an avatar for the sender. */
+
+export const DialogHeadings = ({
+  grouped,
+  size = 'lg',
+  sender = { type: 'company', name: 'Sender' },
+  recipient = { type: 'person', name: 'Recipient' },
+}: DialogHeadingsProps) => {
+  return (
+    <div className={styles.headings} data-size={size}>
+      {grouped ? (
+        <AvatarGroup
+          items={[{ ...sender, type: 'company' }, recipient]}
+          size={sizeMap?.avatar[size] as AvatarSize}
+          className={styles.avatar}
+        />
+      ) : (
+        <Avatar
+          type="company"
+          imageUrl={sender?.imageUrl}
+          name={sender.name}
+          size={sizeMap?.avatar[size] as AvatarSize}
+          className={styles.avatar}
+        />
+      )}
+      <MetaItem size="xs" className={styles.text}>
+        <span className={styles.sender}>{sender.name}</span>
+        {recipient?.name && (
+          <span>
+            {' til '}
+            <span>{recipient.name}</span>
+          </span>
+        )}
+      </MetaItem>
+    </div>
+  );
+};

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

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DialogHistory } from './DialogHistory';
+
+const meta = {
+  title: 'Dialog/Sections/DialogHistory',
+  component: DialogHistory,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    items: [
+      {
+        createdBy: {
+          name: 'Kari Nordmann',
+        },
+        createdAt: '2023-03-11 08:00',
+        summary: 'Skattemeldingen ble levert.',
+        attachments: [
+          {
+            label: 'Kvittering på innsendt skattemelding.pdf',
+          },
+        ],
+      },
+      {
+        createdBy: {
+          type: 'company',
+          name: 'Skatteetaten',
+          imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/Skatteetaten.636ef817.png',
+        },
+        createdAt: '2023-03-11 08:00',
+        summary: 'Vi har mottatt nye opplysninger og oppdatert skattemeldingen din.',
+        attachments: [
+          {
+            label: 'Nye opplysninger til Skattemeldingen.pdf',
+          },
+        ],
+      },
+      {
+        createdBy: {
+          name: 'Kari Nordmann',
+        },
+        createdAt: '2023-03-11 08:00',
+        summary: 'Skattemeldingen ble levert.',
+        attachments: [
+          {
+            label: 'Kvittering på innsendt skattemelding.pdf',
+          },
+        ],
+      },
+      {
+        createdBy: {
+          type: 'company',
+          name: 'Skatteetaten',
+          imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/Skatteetaten.636ef817.png',
+        },
+        createdAt: '2023-03-11 08:00',
+        summary: 'Skattemeldingen din for 2022 er tilgjengelig.',
+      },
+    ],
+  },
+} satisfies Meta<typeof DialogHistory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/components/Dialog/DialogHistory.tsx

@@ -0,0 +1,19 @@
+import { type HistoryItemProps, HistoryList } from '../History/';
+import { DialogSectionBase } from './DialogSectionBase';
+
+export interface DialogHistoryProps {
+  title?: string;
+  items?: HistoryItemProps[];
+}
+
+export const DialogHistory = ({ title = 'History', items }: DialogHistoryProps) => {
+  if (!items) {
+    return null;
+  }
+
+  return (
+    <DialogSectionBase title={title}>
+      <HistoryList items={items} />
+    </DialogSectionBase>
+  );
+};

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DialogList } from './DialogList';
+
+const meta = {
+  title: 'Dialog/DialogList',
+  component: DialogList,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    items: [
+      {
+        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',
+      },
+    ],
+  },
+} satisfies Meta<typeof DialogList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Grouped: Story = {
+  args: {
+    groups: {
+      '2024-01': {
+        title: 'Januar 2024',
+      },
+      '2024-02': {
+        title: 'Februar 2024',
+      },
+    },
+  },
+};

package/lib/components/Dialog/DialogList.tsx

@@ -0,0 +1,35 @@
+import { SectionBase } from '../';
+import { useMenu } from '../../hooks';
+import { DialogGroup, type DialogGroupProps } from './DialogGroup';
+import { DialogListItem, type DialogListItemProps } from './DialogListItem';
+
+export interface DialogListProps {
+  items: DialogListItemProps[];
+  groups?: Record<string, DialogGroupProps>;
+}
+
+export const DialogList = ({ items, groups = {} }: DialogListProps) => {
+  const { menu } = useMenu<DialogListItemProps, DialogGroupProps>({
+    items,
+    groups,
+    groupByKey: 'groupId',
+    keyboardEvents: false,
+  });
+
+  return (
+    <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>
+        );
+      })}
+    </SectionBase>
+  );
+};