@altinn/altinn-components 0.5.2 → 0.6.1

package/lib/components/Dialog/DialogActions.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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>
-  );
-};