@altinn/altinn-components 0.6.2 → 0.6.4

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

@@ -1,67 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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>
-  );
-};

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

@@ -1,238 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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;
-  /** OnClick handler */
-  onClick?: () => void;
-  /** Group id */
-  groupId?: string;
-};
-
-/**
- * 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,
-  onClick,
-  select,
-  selected,
-  status,
-  sender,
-  recipient,
-  grouped,
-  updatedAt,
-  updatedAtLabel,
-  dueAt,
-  dueAtLabel,
-  seen = false,
-  seenBy,
-  touchedBy,
-  attachmentsCount,
-  title,
-  summary,
-}: DialogListItemProps) => {
-  return (
-    <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}>
-            {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

@@ -1,52 +0,0 @@
-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;
-  /** OnClick handler */
-  onClick?: () => void;
-};
-
-/**
- * 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,
-  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} onClick={onClick} tabIndex={0}>
-        {children}
-      </Component>
-      {select && <DialogSelect className={styles.select} {...select} />}
-    </article>
-  );
-};

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

@@ -1,75 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-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',
-    },
-  },
-};