@altinn/altinn-components 0.0.1 → 0.2.0

package/lib/components/Dialog/Dialog.tsx

@@ -0,0 +1,101 @@
+import { MetaBase } from '../Meta';
+import { DialogActivityLog, type DialogActivityLogProps } from './DialogActivityLog';
+import { DialogArticleBase } from './DialogArticleBase';
+import { DialogAttachments, type DialogAttachmentsProps } from './DialogAttachments';
+import { DialogBase } from './DialogBase';
+import { DialogBodyBase } from './DialogBodyBase';
+import { DialogContent } from './DialogContent';
+import { DialogFooter } from './DialogFooter';
+import { DialogHeader } from './DialogHeader';
+import { DialogSeenBy, type DialogSeenByProps } from './DialogSeenBy';
+
+import type { ReactNode } from 'react';
+import { DialogAction, type DialogActionButtonProps } from './DialogAction';
+import type { DialogRecipientProps, DialogSenderProps } from './DialogHeadings.tsx';
+import { DialogHistory, type DialogHistoryProps } from './DialogHistory';
+import { type DialogBackButtonProps, DialogNav } from './DialogNav';
+import type { DialogStatusProps } from './DialogStatus';
+
+export interface DialogProps {
+  /** Title */
+  title: string;
+  /** Back button */
+  backButton?: DialogBackButtonProps;
+  /** Dialog status */
+  status?: DialogStatusProps;
+  /** Updated date time */
+  updatedAt?: string;
+  /** Latest updated by name */
+  updatedByName?: string;
+  /** Due date */
+  dueAt?: string;
+  /** Sender */
+  sender?: DialogSenderProps;
+  /** Recipient  */
+  recipient?: DialogRecipientProps;
+  /** Summary */
+  summary?: string;
+  /** Body (should be an output markdown/html rendered to React / HTML) */
+  body?: ReactNode;
+  /** List of action (buttons) */
+  actions?: DialogActionButtonProps[];
+  /** Dialog attachments */
+  attachments?: DialogAttachmentsProps;
+  /** Dialog is seen by the end user or others */
+  seenBy?: DialogSeenByProps;
+  /** Activity Log */
+  activityLog?: DialogActivityLogProps;
+  /** More information about the dialog, process, etc. */
+  additionalInfo?: string;
+  /** History */
+  history?: DialogHistoryProps;
+}
+
+/**
+ * Full representation of a dialog, including attachments, actions and history,
+ */
+
+export const Dialog = ({
+  backButton,
+  updatedAt,
+  updatedByName,
+  dueAt,
+  status,
+  title,
+  sender,
+  recipient,
+  summary = 'Summary.',
+  body,
+  actions = [],
+  attachments,
+  history,
+  seenBy,
+  activityLog,
+  additionalInfo,
+}: DialogProps) => {
+  return (
+    <DialogBase>
+      <DialogNav status={status} dueAt={dueAt} backButton={backButton} />
+      <DialogArticleBase>
+        <DialogHeader
+          title={title}
+          sender={sender}
+          recipient={recipient}
+          seen={seenBy?.seenByEndUser ?? false}
+          variant="neutral"
+        />
+        <DialogBodyBase>
+          <DialogContent updatedAt={updatedAt} updatedByName={updatedByName} summary={summary} body={body} />
+          {attachments && <DialogAttachments {...attachments} />}
+          {actions?.length > 0 && <DialogAction items={actions} />}
+          <MetaBase>
+            {seenBy && <DialogSeenBy {...seenBy} />}
+            {activityLog && <DialogActivityLog {...activityLog} />}
+          </MetaBase>
+        </DialogBodyBase>
+        {additionalInfo && <DialogFooter additionalInfo={additionalInfo} />}
+        {history && <DialogHistory {...history} />}
+      </DialogArticleBase>
+    </DialogBase>
+  );
+};

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DialogAction } from './DialogAction';
+
+const meta = {
+  title: 'Dialog/Sections/DialogAction',
+  component: DialogAction,
+  tags: ['autodocs'],
+  args: {
+    items: [
+      {
+        label: 'Primary',
+        priority: 'primary',
+      },
+      {
+        label: 'Secondary',
+        priority: 'secondary',
+      },
+    ],
+  },
+} satisfies Meta<typeof DialogAction>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Secondary: Story = {
+  args: {},
+};
+
+export const MultipleButtons: Story = {
+  args: {
+    items: [
+      {
+        label: 'Primary',
+        priority: 'primary',
+      },
+      {
+        label: 'Secondary',
+        priority: 'secondary',
+      },
+      {
+        label: 'Third action',
+        priority: 'tertiary',
+      },
+      {
+        label: 'Fourth action',
+        priority: 'tertiary',
+      },
+    ],
+  },
+};

package/lib/components/Dialog/DialogAction.tsx

@@ -0,0 +1,79 @@
+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 DialogActionProps {
+  /** List of actions */
+  items: DialogActionButtonProps[];
+  /** How many actions to display before turning into a ComboButton */
+  maxItems?: number;
+}
+
+export const DialogAction = ({ items, maxItems = 2 }: DialogActionProps) => {
+  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,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+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,24 @@
+import type { ReactNode } from 'react';
+import { Typography } from '../Typography';
+import { DialogMetadata } from './DialogMetadata';
+
+export interface DialogContentProps {
+  updatedByName?: string;
+  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/DialogHeader.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+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 DialogHeaderProps {
+  children?: ReactNode;
+}
+
+export const DialogHeaderBase = ({ children }: DialogHeaderProps) => {
+  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>
+  );
+};