@altinn/altinn-components 0.1.0 → 0.2.0

package/lib/components/Dialog/DialogListItem.stories.tsx

@@ -0,0 +1,238 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Fragment, useState } from 'react';
+
+import { DialogListItem } from './DialogListItem';
+import { DialogStatusEnum } from './DialogStatus';
+
+import { ListBase } from '../List';
+import { MetaItem } from '../Meta';
+
+const getStatusLabel = (value) => {
+  switch (value) {
+    case 'draft':
+      return 'Utkast';
+    case 'sent':
+      return 'Sendt';
+    case 'requires-attention':
+      return 'Krever handling';
+    case 'in-progress':
+      return 'Under arbeid';
+    case 'completed':
+      return 'Avsluttet';
+    default:
+      return '';
+  }
+};
+
+const sizes = ['lg', 'md', 'sm', 'xs'];
+const statuslist = Object.keys(DialogStatusEnum)?.map((value) => {
+  return {
+    value,
+    label: getStatusLabel(value),
+  };
+});
+
+const meta = {
+  title: 'Dialog/DialogListItem',
+  component: DialogListItem,
+  tags: ['autodocs'],
+  parameters: {},
+  argTypes: {},
+  args: {
+    title: 'Title',
+    summary: 'Summary',
+    sender: {
+      type: 'company',
+      name: 'Sender name',
+    },
+    recipient: {
+      type: 'person',
+      name: 'Recipient name',
+    },
+    status: {
+      value: 'completed',
+    },
+  },
+} satisfies Meta<typeof DialogListItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const selectable: Story = {
+  args: {
+    select: {
+      checked: false,
+    },
+  },
+};
+
+export const selected: Story = {
+  args: {
+    selected: true,
+    select: {
+      checked: true,
+    },
+  },
+};
+
+export const seenByEndUser: Story = {
+  args: {
+    seenByEndUser: true,
+  },
+};
+
+export const TouchedBy: Story = {
+  args: {
+    touchedBy: [
+      {
+        name: 'Lars',
+      },
+      {
+        name: 'Trine',
+      },
+    ],
+  },
+};
+
+export const Draft: Story = {
+  args: {
+    status: {
+      value: 'draft',
+    },
+  },
+};
+
+export const Sent: Story = {
+  args: {
+    status: {
+      value: 'sent',
+    },
+  },
+};
+
+export const RequiresAttention: Story = {
+  args: {
+    status: {
+      value: 'requires-attention',
+    },
+  },
+};
+
+export const InProgress: Story = {
+  args: {
+    status: {
+      value: 'in-progress',
+    },
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    status: {
+      value: 'completed',
+    },
+  },
+};
+
+export const GroupedView: Story = {
+  args: {
+    grouped: true,
+  },
+};
+
+export const LongSummary: Story = {
+  args: {
+    title: 'Long summary',
+    summary:
+      'Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.\n\nCras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.',
+  },
+};
+
+export const LongTitle: Story = {
+  args: {
+    title:
+      'Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.',
+    summary: 'Short summary.',
+  },
+};
+
+export const SelectableSelected = (args) => {
+  const [items, setItems] = useState({
+    1: {
+      id: '1',
+      title: 'Item 1',
+      selected: true,
+    },
+    2: {
+      id: '2',
+      title: 'Item 2',
+      selected: false,
+    },
+    3: {
+      id: '3',
+      title: 'Item 2',
+      selected: false,
+    },
+  });
+
+  const onSelect = ({ id }) => {
+    setItems((prevState) => {
+      return {
+        ...prevState,
+        [id]: {
+          ...prevState[id],
+          selected: !prevState[id].selected,
+        },
+      };
+    });
+  };
+
+  return (
+    <ListBase>
+      {Object.values(items)?.map((item) => {
+        return (
+          <Fragment key={item?.id}>
+            <DialogListItem
+              {...args}
+              title={item.title}
+              onClick={item.selected ? () => onSelect(item) : null}
+              selected={item.selected}
+              select={{ checked: item?.selected, onChange: () => onSelect(item) }}
+            />
+            <MetaItem>selected:{item.selected ? 'true' : 'false'}</MetaItem>
+          </Fragment>
+        );
+      })}
+    </ListBase>
+  );
+};
+
+export const Statuses = (args) => {
+  return (
+    <ListBase>
+      {statuslist?.map((status) => {
+        return (
+          <Fragment key={status?.value}>
+            <DialogListItem {...args} status={status} />
+            <MetaItem>{status?.value}</MetaItem>
+          </Fragment>
+        );
+      })}
+    </ListBase>
+  );
+};
+
+export const Sizes = (args) => {
+  return (
+    <ListBase>
+      {sizes?.map((size) => {
+        return (
+          <Fragment key={size}>
+            <DialogListItem {...args} size={size} />
+            <MetaItem>{size}</MetaItem>
+          </Fragment>
+        );
+      })}
+    </ListBase>
+  );
+};

package/lib/components/Dialog/DialogListItem.tsx

@@ -0,0 +1,114 @@
+import type { ElementType } from 'react';
+import { DialogHeadings, type DialogRecipientProps, type DialogSenderProps } from './DialogHeadings';
+import type { DialogSelectProps } from './DialogSelect';
+import type { DialogStatusProps } from './DialogStatus';
+import { DialogTitle } from './DialogTitle';
+import { DialogTouchedBy, type DialogTouchedByActor } from './DialogTouchedBy';
+import styles from './dialogListItem.module.css';
+
+import { DialogListItemBase, type DialogListItemSize, type DialogListItemVariant } from './DialogListItemBase';
+
+import { DialogBorder } from './DialogBorder';
+import { DialogMetadata } from './DialogMetadata';
+import type { DialogSeenByProps } from './DialogSeenBy';
+
+export type DialogListItemProps = {
+  /** Dialog title */
+  title: string;
+  /** Render as */
+  as?: ElementType;
+  /** Size */
+  size?: DialogListItemSize;
+  /** Variant */
+  variant?: DialogListItemVariant;
+  /** Link */
+  href?: string;
+  /** Select: Use to support batch operations */
+  select?: DialogSelectProps;
+  /** Dialog is selected */
+  selected?: boolean;
+  /** Dialog status */
+  status?: DialogStatusProps;
+  /** Dialog sender */
+  sender?: DialogSenderProps;
+  /** Dialog Recipient  */
+  recipient?: DialogRecipientProps;
+  /** Group view, show avatar for recipient */
+  grouped?: boolean;
+  /** Dialog summary */
+  summary?: string;
+  /** Updated datetime */
+  updatedAt?: string;
+  /** Updated at label */
+  updatedAtLabel?: string;
+  /** Dialog due date */
+  dueAt?: string;
+  /** Dialog due date label */
+  dueAtLabel?: string;
+  /** Dialog has been seen */
+  seen?: boolean;
+  /** Dialog is seen by the user */
+  seenBy?: DialogSeenByProps;
+  /** List of users that have touched the dialog */
+  touchedBy?: DialogTouchedByActor[];
+  /** Number of attachments */
+  attachmentsCount?: number;
+};
+
+/**
+ * Represents a dialog in list view, displaying information such as the title,
+ * summary, sender, and receiver.
+ * to mark the item as checked/unchecked and can visually indicate if it is unread.
+ */
+
+export const DialogListItem = ({
+  as = 'a',
+  size = 'lg',
+  variant = 'neutral',
+  href,
+  select,
+  selected,
+  status,
+  sender,
+  recipient,
+  grouped,
+  updatedAt,
+  updatedAtLabel,
+  dueAt,
+  dueAtLabel,
+  seen = false,
+  seenBy,
+  touchedBy,
+  attachmentsCount,
+  title,
+  summary,
+  ...rest
+}: DialogListItemProps) => {
+  return (
+    <DialogListItemBase as={as} size={size} href={href} select={select} selected={selected} variant={variant} {...rest}>
+      <DialogBorder className={styles.border} size={size} seen={seen}>
+        <header data-size={size} className={styles.header}>
+          <DialogTitle size={size} seen={seen} variant={variant}>
+            {title}
+          </DialogTitle>
+          <DialogHeadings size="xs" grouped={grouped} sender={sender} recipient={recipient} />
+        </header>
+        <p data-size={size} className={styles.summary}>
+          {summary}
+        </p>
+        <footer data-size={size} className={styles.footer}>
+          <DialogMetadata
+            status={status}
+            updatedAt={updatedAt}
+            updatedAtLabel={updatedAtLabel}
+            dueAt={dueAt}
+            dueAtLabel={dueAtLabel}
+            seenBy={seenBy}
+            attachmentsCount={attachmentsCount}
+          />
+          {touchedBy && <DialogTouchedBy size="xs" touchedBy={touchedBy} className={styles.touchedBy} />}
+        </footer>
+      </DialogBorder>
+    </DialogListItemBase>
+  );
+};

package/lib/components/Dialog/DialogListItemBase.tsx

@@ -0,0 +1,50 @@
+import type { ElementType, ReactNode } from 'react';
+import { DialogSelect, type DialogSelectProps } from './DialogSelect';
+import styles from './dialogListItemBase.module.css';
+
+export type DialogListItemVariant = 'neutral' | 'draft' | 'bin' | 'archive';
+export type DialogListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type DialogListItemBaseProps = {
+  /** Render as */
+  as?: ElementType;
+  /** Size */
+  size?: DialogListItemSize;
+  /** Link */
+  href?: string;
+  /** Select? Use to support batch operations */
+  select?: DialogSelectProps;
+  /** Dialog is selected */
+  selected?: boolean;
+  /** Children */
+  children?: ReactNode;
+  /** Variant */
+  variant?: DialogListItemVariant;
+};
+
+/**
+ * Represents a dialog in list view, displaying information such as the title,
+ * summary, sender, and receiver.
+ * to mark the item as checked/unchecked and can visually indicate if it is unread.
+ */
+
+export const DialogListItemBase = ({
+  as = 'a',
+  size,
+  href,
+  select,
+  selected,
+  children,
+  ...rest
+}: 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}>
+        {children}
+      </Component>
+      {select && <DialogSelect className={styles.select} {...select} />}
+    </article>
+  );
+};

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { DialogMetadata } from './DialogMetadata';
+
+const meta = {
+  title: 'Dialog/DialogMetadata',
+  component: DialogMetadata,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    updatedAt: '1999-05-26',
+    updatedAtLabel: '26. mai 1999',
+  },
+} satisfies Meta<typeof DialogMetadata>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Draft: Story = {
+  args: {
+    status: {
+      value: 'draft',
+      label: 'Utkast',
+    },
+    updatedAtLabel: 'Ole Gunnar Solskjær, 26. mai 1999',
+  },
+};
+
+export const Sent: Story = {
+  args: {
+    status: {
+      value: 'sent',
+      label: 'Sendt',
+    },
+  },
+};
+
+export const RequiresAttentionAndDueDate: Story = {
+  args: {
+    status: {
+      value: 'requires-attention',
+      label: 'Krever handling',
+    },
+    attachmentsCount: 3,
+    dueAt: '2000-01-01',
+    dueAtLabel: 'Frist: 1. januar 2001',
+  },
+};
+
+export const InProgressSeenByOthers: Story = {
+  args: {
+    status: {
+      value: 'in-progress',
+      label: 'Under arbeid',
+    },
+    seenBy: {
+      seenByEndUser: false,
+      seenByOthersCount: 4,
+      label: 'Sett av 4',
+    },
+  },
+};
+
+export const CompletedSeenByEndUser: Story = {
+  args: {
+    status: {
+      value: 'completed',
+      label: 'Avsluttet',
+    },
+    seenBy: {
+      seenByEndUser: true,
+      seenByOthersCount: 0,
+      label: 'Sett av deg',
+    },
+  },
+};

package/lib/components/Dialog/DialogMetadata.tsx

@@ -0,0 +1,56 @@
+import { MetaBase, MetaItem, MetaTimestamp } from '../Meta';
+import { DialogSeenBy, type DialogSeenByProps } from './DialogSeenBy';
+import { DialogStatus, type DialogStatusProps } from './DialogStatus';
+
+export type DialogMetadataProps = {
+  /** Dialog status */
+  status?: DialogStatusProps;
+  /** Updated datetime */
+  updatedAt?: string;
+  /** Updated label */
+  updatedAtLabel?: string;
+  /** Due date */
+  dueAt?: string;
+  /** Due date label */
+  dueAtLabel?: string;
+  /** Who have seen the dialog after latest update */
+  seenBy?: DialogSeenByProps;
+  /** Number of attachments */
+  attachmentsCount?: number;
+};
+
+/**
+ * Metadata for a dialog in list view.
+ */
+
+export const DialogMetadata = ({
+  status,
+  updatedAt,
+  updatedAtLabel,
+  dueAt,
+  dueAtLabel,
+  seenBy,
+  attachmentsCount = 0,
+}: DialogMetadataProps) => {
+  return (
+    <MetaBase size="xs">
+      {status && <DialogStatus size="xs" {...status} />}
+      {updatedAt && (
+        <MetaTimestamp datetime={updatedAt} size="xs">
+          {updatedAtLabel}
+        </MetaTimestamp>
+      )}
+      {dueAt && dueAtLabel && (
+        <MetaTimestamp datetime={dueAt} size="xs" icon="clock-dashed">
+          {dueAtLabel}
+        </MetaTimestamp>
+      )}
+      {seenBy && <DialogSeenBy size="xs" {...seenBy} />}
+      {attachmentsCount > 0 && (
+        <MetaItem size="xs" icon="paperclip">
+          {attachmentsCount}
+        </MetaItem>
+      )}
+    </MetaBase>
+  );
+};

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

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { DialogNav } from './DialogNav';
+
+const meta = {
+  title: 'Dialog/DialogNav',
+  component: DialogNav,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta<typeof DialogNav>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Draft: Story = {
+  args: {
+    status: {
+      value: 'draft',
+      label: 'Utkast',
+    },
+  },
+};
+
+export const Sent: Story = {
+  args: {
+    status: {
+      value: 'draft',
+      label: 'Utkast',
+    },
+  },
+};
+
+export const RequiresAttention: Story = {
+  args: {
+    status: {
+      value: 'requires-attention',
+      label: 'Utkast',
+    },
+  },
+};
+
+export const InProgress: Story = {
+  args: {
+    status: {
+      value: 'in-progress',
+      label: 'Utkast',
+    },
+  },
+};
+
+export const ContextMenu: Story = {
+  args: {
+    menu: {
+      items: [
+        {
+          id: '1',
+          group: '1',
+          icon: 'arrow-redo',
+          label: 'Del og gi tilgang',
+        },
+        {
+          id: '2',
+          group: '1',
+          icon: 'eye-closed',
+          label: 'Marker som ny',
+        },
+        {
+          id: '3',
+          group: '2',
+          icon: 'archive',
+          label: 'Flytt til arkiv',
+        },
+        {
+          id: '4',
+          group: '2',
+          icon: 'trash',
+          label: 'Flytt til papirkurv',
+        },
+        {
+          id: '5',
+          group: '3',
+          icon: 'clock-dashed',
+          label: 'Aktivitetslogg',
+        },
+      ],
+    },
+  },
+};

package/lib/components/Dialog/DialogNav.tsx

@@ -0,0 +1,60 @@
+'use client';
+import { useState } from 'react';
+import type { ElementType } from 'react';
+import { Button } from '../Button';
+import { ContextMenu, type DialogContextMenuProps } from '../ContextMenu/ContextMenu.tsx';
+import { MetaTimestamp } from '../Meta';
+import { DialogStatus, type DialogStatusProps } from './DialogStatus';
+import { DialogTouchedBy, type DialogTouchedByActor } from './DialogTouchedBy';
+import styles from './dialog.module.css';
+
+export interface DialogBackButtonProps {
+  as?: ElementType;
+  href?: string;
+  label?: string;
+}
+
+export interface DialogNavProps {
+  status?: DialogStatusProps;
+  dueAt?: string;
+  duaAtLabel?: string;
+  touchedBy?: DialogTouchedByActor[];
+  backButton?: DialogBackButtonProps;
+  menu?: DialogContextMenuProps;
+}
+
+/**
+ * Dialog navigation bar with Back button and possibly a context menu.
+ */
+export const DialogNav = ({
+  backButton = {
+    as: 'a',
+    label: 'Back',
+  },
+  status,
+  dueAt,
+  touchedBy,
+  duaAtLabel,
+  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>
+        {backButton?.label || 'Back'}
+      </Button>
+      <div className={styles.action}>
+        {duaAtLabel && duaAtLabel && (
+          <MetaTimestamp datetime={dueAt} size="xs">
+            {duaAtLabel}
+          </MetaTimestamp>
+        )}
+        {status && <DialogStatus {...status} />}
+        {touchedBy && <DialogTouchedBy touchedBy={touchedBy} />}
+        {menu && <ContextMenu {...menu} expanded={expandedItem} onToggle={onToggle} />}
+      </div>
+    </nav>
+  );
+};

package/lib/components/Dialog/DialogSectionBase.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import styles from './dialogSectionBase.module.css';
+
+export interface DialogSectionBaseProps {
+  title?: string;
+  children?: ReactNode;
+}
+
+export const DialogSectionBase = ({ title, children }: DialogSectionBaseProps) => {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <section className={styles.section}>
+      {title && <h2 className={styles.title}>{title}</h2>}
+      {children}
+    </section>
+  );
+};