@altinn/altinn-components 0.6.2 → 0.6.3

package/lib/components/Dialog/DialogMetadata.tsx

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

@@ -1,88 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-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',
-          groupId: '1',
-          icon: 'arrow-redo',
-          label: 'Del og gi tilgang',
-        },
-        {
-          id: '2',
-          groupId: '1',
-          icon: 'eye-closed',
-          label: 'Marker som ny',
-        },
-        {
-          id: '3',
-          groupId: '2',
-          icon: 'archive',
-          label: 'Flytt til arkiv',
-        },
-        {
-          id: '4',
-          groupId: '2',
-          icon: 'trash',
-          label: 'Flytt til papirkurv',
-        },
-        {
-          id: '5',
-          groupId: '3',
-          icon: 'clock-dashed',
-          label: 'Aktivitetslogg',
-        },
-      ],
-    },
-  },
-};

package/lib/components/Dialog/DialogNav.tsx

@@ -1,56 +0,0 @@
-'use client';
-import type { ElementType } from 'react';
-import { Button } from '../Button';
-import { ContextMenu, type ContextMenuProps } from '../ContextMenu';
-import { MetaTimestamp } from '../Meta';
-import { DialogStatus, type DialogStatusProps } from './DialogStatus';
-import { DialogTouchedBy, type DialogTouchedByActor } from './DialogTouchedBy';
-import styles from './dialogNav.module.css';
-
-export interface DialogBackButtonProps {
-  as?: ElementType;
-  href?: string;
-  label?: string;
-}
-
-export interface DialogNavProps {
-  status?: DialogStatusProps;
-  dueAt?: string;
-  dueAtLabel?: string;
-  touchedBy?: DialogTouchedByActor[];
-  backButton?: DialogBackButtonProps;
-  menu?: ContextMenuProps;
-}
-
-/**
- * Dialog navigation bar with Back button and possibly a context menu.
- */
-export const DialogNav = ({
-  backButton = {
-    as: 'a',
-    label: 'Back',
-  },
-  status,
-  dueAt,
-  dueAtLabel,
-  touchedBy,
-  menu,
-}: DialogNavProps) => {
-  return (
-    <nav className={styles.nav}>
-      <Button {...backButton} variant="text" color="secondary" icon="arrow-left" reverse>
-        {backButton?.label || 'Back'}
-      </Button>
-      <div className={styles.action}>
-        {dueAt && dueAtLabel && (
-          <MetaTimestamp datetime={dueAt} size="xs">
-            {dueAtLabel}
-          </MetaTimestamp>
-        )}
-        {status && <DialogStatus {...status} />}
-        {touchedBy && <DialogTouchedBy touchedBy={touchedBy} />}
-        {menu && <ContextMenu {...menu} />}
-      </div>
-    </nav>
-  );
-};

package/lib/components/Dialog/DialogSectionBase.tsx

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

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

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DialogSeenBy } from './DialogSeenBy';
-
-const meta = {
-  title: 'Dialog/Atoms/DialogSeenBy',
-  component: DialogSeenBy,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    seenByEndUser: true,
-    seenByOthersCount: 2,
-    label: '',
-  },
-} satisfies Meta<typeof DialogSeenBy>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Unseen: Story = {
-  args: {
-    seenByEndUser: false,
-    seenByOthersCount: 0,
-  },
-};
-
-export const seenByEndUser: Story = {
-  args: {
-    seenByEndUser: true,
-    seenByOthersCount: 0,
-  },
-};
-
-export const seenByEndUserAndOthers: Story = {
-  args: {
-    seenByEndUser: true,
-    seenByOthersCount: 10,
-  },
-};
-
-export const ExampleLabel = ({
-  seenByEndUser,
-  seenByOthersCount,
-}: { seenByEndUser: boolean; seenByOthersCount: number }) => {
-  const seenByLabel = [];
-
-  if (seenByEndUser) {
-    seenByLabel.push('deg');
-  }
-
-  if (seenByOthersCount) {
-    seenByLabel.push(seenByOthersCount);
-  }
-
-  const label = 'Sett av ' + seenByLabel.join('+');
-  return <DialogSeenBy seenByEndUser={seenByEndUser} seenByOthersCount={seenByOthersCount} label={label} />;
-};

package/lib/components/Dialog/DialogSeenBy.tsx

@@ -1,36 +0,0 @@
-import type { ElementType, MouseEventHandler } from 'react';
-import { MetaItem, type MetaItemSize } from '../Meta';
-
-export interface DialogSeenByProps {
-  size?: MetaItemSize;
-  /** Dialog has been seen by current end user */
-  seenByEndUser?: boolean;
-  /** Dialog has been seen by other people */
-  seenByOthersCount?: number;
-  /** A label explaining that the dialog have been seen and by whom. */
-  label: string;
-  /** Render element as a link or button to display more informastion */
-  as?: ElementType;
-  onClick?: MouseEventHandler;
-  href?: string;
-}
-
-/**
- * Dialog seen by. Used to indicate if the dialog has been seen by end user or other users.
- */
-
-export const DialogSeenBy = ({
-  size = 'xs',
-  label = 'Seen by label',
-  seenByEndUser = false,
-  seenByOthersCount = 0,
-  ...rest
-}: DialogSeenByProps) => {
-  const seen = seenByEndUser || seenByOthersCount > 0;
-  const iconName = seen ? 'eye' : 'eye-closed';
-  return (
-    <MetaItem size={size} icon={iconName} {...rest}>
-      {label}
-    </MetaItem>
-  );
-};

package/lib/components/Dialog/DialogSelect.tsx

@@ -1,23 +0,0 @@
-import cx from 'classnames';
-import type { ChangeEventHandler } from 'react';
-import { CheckboxIcon } from '../Icon/';
-import styles from './dialogSelect.module.css';
-
-export type DialogSelectProps = {
-  checked?: boolean;
-  onChange?: ChangeEventHandler;
-  className?: string;
-};
-
-/**
- * Dialog checkbox
- */
-
-export const DialogSelect = ({ checked = false, onChange, className }: DialogSelectProps) => {
-  return (
-    <label className={cx(styles.label, className)}>
-      <input type="checkbox" checked={checked} onChange={onChange} className={styles.input} tabIndex={-1} />
-      <CheckboxIcon hover={true} checked={checked} className={styles.icon} />
-    </label>
-  );
-};

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

@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { DialogStatus, DialogStatusEnum } from './DialogStatus';
-
-const meta = {
-  title: 'Dialog/DialogStatus',
-  component: DialogStatus,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    value: {
-      options: Object.keys(DialogStatusEnum),
-    },
-  },
-  args: {},
-} satisfies Meta<typeof DialogStatus>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Draft: Story = {
-  args: {
-    value: 'draft',
-    label: 'Utkast',
-  },
-};
-
-export const Sent: Story = {
-  args: {
-    value: 'sent',
-    label: 'Sendt',
-  },
-};
-
-export const RequiresAttention: Story = {
-  args: {
-    value: 'requires-attention',
-    label: 'Krever handling',
-  },
-};
-
-export const InProgress: Story = {
-  args: {
-    value: 'in-progress',
-    label: 'Under arbeid',
-  },
-};
-
-export const Completed: Story = {
-  args: {
-    value: 'completed',
-    label: 'Avsluttet',
-  },
-};

package/lib/components/Dialog/DialogStatus.tsx

@@ -1,61 +0,0 @@
-import { MetaItem, type MetaItemSize, MetaProgress } from '../Meta';
-
-export enum DialogStatusEnum {
-  /** Used to indicate user-initiated dialogs not yet sent. */
-  draft = 'DRAFT',
-  /** Sent by the service owner. In a serial process, this is used after a submission is made. */
-  sent = 'SENT',
-  /** The dialogue is considered new. Typically used for simple messages that do not require any interaction, or as an initial step for dialogues. This is the default. */
-  new = 'NEW',
-  /** The dialogue was completed. This typically means that the dialogue is moved to a GUI archive or similar. */
-  completed = 'COMPLETED',
-  /** Started. In a serial process, this is used to indicate that, for example, a form filling is ongoing. */
-  'in-progress' = 'IN_PROGRESS',
-  /** Used to indicate that the dialogue is in progress/under work, but is in a state where the user must do something - for example, correct an error, or other conditions that hinder further processing. */
-  'requires-attention' = 'REQUIRES_ATTENTION',
-}
-
-export type DialogStatusValue = keyof typeof DialogStatusEnum;
-
-export interface DialogStatusProps {
-  size?: MetaItemSize;
-  value?: DialogStatusValue;
-  label?: string;
-}
-
-/**
- * Dialog status.
- */
-
-export const DialogStatus = ({ size = 'xs', value = 'new', label }: DialogStatusProps) => {
-  switch (value) {
-    case 'new':
-      return null;
-    case 'draft':
-      return (
-        <MetaItem size={size} variant="dotted">
-          {label || value}
-        </MetaItem>
-      );
-    case 'requires-attention':
-      return <MetaItem variant="solid">{label || value}</MetaItem>;
-    case 'in-progress':
-      return (
-        <MetaProgress size={size} variant="outline" progress={75}>
-          {label || value}
-        </MetaProgress>
-      );
-    case 'completed':
-      return (
-        <MetaProgress size={size} variant="outline" progress={100}>
-          {label || value}
-        </MetaProgress>
-      );
-    default:
-      return (
-        <MetaItem size={size} variant="outline">
-          {label || value}
-        </MetaItem>
-      );
-  }
-};

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

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DialogTitle } from './DialogTitle';
-
-const meta = {
-  title: 'Dialog/DialogTitle',
-  component: DialogTitle,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    children: 'Title',
-  },
-} satisfies Meta<typeof DialogTitle>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Seen: Story = {
-  args: {
-    variant: 'seen',
-  },
-};
-
-export const Trash: Story = {
-  args: {
-    variant: 'trash',
-  },
-};

package/lib/components/Dialog/DialogTitle.tsx

@@ -1,31 +0,0 @@
-import type { ReactNode } from 'react';
-import { Icon, type IconName } from '../Icon';
-import type { DialogListItemVariant } from './DialogListItemBase';
-import styles from './dialogTitle.module.css';
-
-export type DialogTitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type DialogTitleProps = {
-  /** Variant */
-  variant: DialogListItemVariant;
-  /** Size */
-  size?: DialogTitleSize;
-  /** Variant */
-  seen?: boolean;
-  /** Display an icon next to title */
-  icon?: IconName;
-  /** Dialog title */
-  children?: ReactNode;
-};
-
-/**
- * Dialog title
- */
-export const DialogTitle = ({ size = 'sm', seen = false, variant, icon, children }: DialogTitleProps) => {
-  return (
-    <h2 className={styles.title} data-seen={seen} data-size={size} data-variant={variant}>
-      <span>{children}</span>
-      {icon && <Icon name={icon} className={styles.icon} />}
-    </h2>
-  );
-};

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

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DialogTouchedBy } from './DialogTouchedBy';
-
-const meta = {
-  title: 'Dialog/Atoms/DialogTouchedBy',
-  component: DialogTouchedBy,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    touchedBy: [
-      {
-        name: 'Donald Duck',
-      },
-      {
-        name: 'Pelle Khan',
-      },
-      {
-        name: 'Langbein',
-      },
-    ],
-  },
-} satisfies Meta<typeof DialogTouchedBy>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/lib/components/Dialog/DialogTouchedBy.tsx

@@ -1,19 +0,0 @@
-import { AvatarGroup, type AvatarSize } from '../Avatar';
-
-export interface DialogTouchedByActor {
-  name: string;
-}
-
-export interface DialogTouchedByProps {
-  size?: AvatarSize;
-  touchedBy?: DialogTouchedByActor[];
-  className?: string;
-}
-
-export const DialogTouchedBy = ({ size = 'sm', touchedBy = [], className }: DialogTouchedByProps) => {
-  if (!touchedBy?.length) {
-    return null;
-  }
-
-  return <AvatarGroup defaultType="person" items={touchedBy} size={size} className={className} />;
-};

package/lib/components/Dialog/dialog.module.css

@@ -1,21 +0,0 @@
-.dialog {
-  background-color: var(--theme-background-default);
-  display: flex;
-  flex-direction: column;
-  row-gap: 1.5em;
-  box-shadow: var(--ds-shadow-xs);
-}
-
-.nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem;
-}
-
-.header {
-  display: flex;
-  flex-direction: column;
-  row-gap: 1.5em;
-  margin-bottom: 1.5rem;
-}

package/lib/components/Dialog/dialogAction.module.css

@@ -1,26 +0,0 @@
-.action {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.comboButton {
-  position: relative;
-}
-
-.dropdown {
-  margin-top: 0.5rem;
-  padding: 0 0.5rem;
-  background-color: var(--neutral-background-default);
-  border-radius: 2px;
-  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  display: none;
-}
-
-.dropdown[aria-expanded="true"] {
-  display: block;
-  position: absolute;
-  min-width: 256px;
-  left: 0;
-  z-index: 2;
-}

package/lib/components/Dialog/dialogArticleBase.module.css

@@ -1,5 +0,0 @@
-.article {
-  display: flex;
-  flex-direction: column;
-  padding: 0 1.5rem;
-}

package/lib/components/Dialog/dialogBodyBase.module.css

@@ -1,13 +0,0 @@
-.border {
-  padding-left: 1.5rem;
-  padding-top: 0;
-  margin-left: 1rem;
-  row-gap: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-.body {
-  display: flex;
-  flex-direction: column;
-  row-gap: 1.5em;
-}

package/lib/components/Dialog/dialogBorder.module.css

@@ -1,42 +0,0 @@
-.border {
-  border-left: 0.25rem solid;
-  border-color: var(--theme-surface-active);
-  /*
-  padding-left: 1rem;
-  display: flex;
-  flex-direction: column;
-  */
-}
-
-.border[data-seen="true"] {
-  border-color: var(--neutral-surface-default);
-}
-
-/*
-
-.border[data-size="sm"][data-status="draft"] {
-  border-color: transparent;
-  padding-left: 0;
-}
-
-.border[data-size="sm"] {
-  row-gap: 1rem;
-}
-
-.border[data-size="lg"] {
-  font-size: 18px;
-  padding-left: 1.5rem;
-  padding-top: 0;
-  padding-bottom: 1.5rem;
-  margin-left: 1rem;
-  row-gap: 1.5rem;
-}
-
-.border[data-size="lg"][data-status="draft"] {
-  border: 1px dashed;
-  border-color: var(--theme-text-subtle);
-  padding: 1.5rem;
-  margin-left: 0;
-}
-
-*/