@altinn/altinn-components 0.5.2 → 0.6.1

package/lib/components/ContextMenu/ContextMenu.stories.ts

@@ -1,49 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ContextMenu } from './ContextMenu';
-
-const meta = {
-  title: 'ContextMenu/ContextMenu',
-  component: ContextMenu,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    placement: 'left',
-    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',
-      },
-    ],
-  },
-} satisfies Meta<typeof ContextMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/lib/components/ContextMenu/ContextMenu.tsx

@@ -1,20 +0,0 @@
-import type { DropdownPlacement, MenuItemProps } from '../';
-import { type MenuItemGroups, MenuItems } from '../';
-import { useRootContext } from '../RootProvider';
-import { ContextMenuBase } from './ContextMenuBase';
-
-export interface ContextMenuProps {
-  id: string;
-  items: MenuItemProps[];
-  placement?: DropdownPlacement;
-  groups?: MenuItemGroups;
-}
-
-export const ContextMenu = ({ id = 'context-menu', placement = 'right', groups = {}, items }: ContextMenuProps) => {
-  const { currentId, toggleId } = useRootContext();
-  return (
-    <ContextMenuBase placement={placement} expanded={currentId === id} onToggle={() => toggleId(id)}>
-      <MenuItems groups={groups} items={items} />
-    </ContextMenuBase>
-  );
-};

package/lib/components/ContextMenu/ContextMenuBase.tsx

@@ -1,33 +0,0 @@
-import type { ReactNode } from 'react';
-import { DropdownBase, IconButton } from '../';
-import type { DropdownPlacement } from '../';
-import styles from './contextMenuBase.module.css';
-
-export interface ContextMenuBaseProps {
-  placement: DropdownPlacement;
-  expanded: boolean;
-  onToggle?: () => void;
-  children?: ReactNode;
-}
-
-export const ContextMenuBase = ({
-  placement = 'right',
-  expanded = false,
-  onToggle,
-  children,
-}: ContextMenuBaseProps) => {
-  return (
-    <div className={styles.toggle}>
-      <IconButton
-        className={styles.button}
-        icon="menu-elipsis-horizontal"
-        variant="text"
-        color="secondary"
-        onClick={onToggle}
-      />
-      <DropdownBase className={styles.dropdown} placement={placement} expanded={expanded}>
-        {children}
-      </DropdownBase>
-    </div>
-  );
-};

package/lib/components/ContextMenu/contextMenuBase.module.css

@@ -1,35 +0,0 @@
-.toggle {
-  position: relative;
-}
-
-.button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.75rem;
-  padding: 0.625rem;
-  border-radius: 50%;
-}
-
-.icon {
-  font-size: 1.5rem;
-}
-
-.dropdown {
-  display: none;
-}
-
-.dropdown[aria-expanded="true"] {
-  display: block;
-  position: absolute;
-  right: 0;
-  z-index: 2;
-}
-
-.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);
-}

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

@@ -1,331 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Dialog } from './Dialog';
-
-const meta = {
-  title: 'Dialog/Dialog',
-  component: Dialog,
-  tags: ['autodocs'],
-  parameters: {},
-  argTypes: { body: { control: 'text' } },
-  args: {
-    menu: {
-      id: 'context-menu',
-      items: [
-        {
-          label: 'Fjern',
-          id: 'remove',
-        },
-      ],
-    },
-    updatedAt: '1999-05-26',
-    updatedAtLabel: '26. mai 1999',
-    title: 'Title',
-    summary: 'Summary',
-  },
-} satisfies Meta<typeof Dialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Body: Story = {
-  args: {
-    body:
-      '## Body\n\n' +
-      'Body will be loaded async.\n\n' +
-      '### Syntax\n\n' +
-      'body supporters basic headings from h2 -> h4 + lists.\n\n' +
-      '- List 1\n' +
-      '- List 2\n' +
-      '- List 3\n',
-  },
-};
-
-export const Attachments: Story = {
-  args: {
-    attachments: {
-      items: [
-        {
-          label: 'Dokument 1.pdf',
-          href: '',
-        },
-        {
-          label: 'Dokument 2.pdf',
-          href: '',
-        },
-      ],
-    },
-  },
-};
-
-export const Action: Story = {
-  args: {
-    action: [
-      {
-        label: 'Primary',
-      },
-      {
-        label: 'Secondary',
-      },
-    ],
-  },
-};
-
-export const SeenBy: Story = {
-  args: {
-    ...Action.args,
-    seenBy: {
-      as: 'a',
-      href: '#',
-      label: 'Sett av deg + 24',
-      seenByEndUser: true,
-      seenByOthersCount: 24,
-    },
-    activityLog: {
-      as: 'a',
-      href: '#',
-      label: 'Aktivitetslogg',
-    },
-  },
-};
-
-export const Example: Story = {
-  args: {
-    status: { value: 'requires-attention' },
-    sender: {
-      name: 'Statistisk sentralbyrå',
-      imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
-    },
-    recipient: {
-      name: 'Bergen Bar',
-    },
-    title: 'Rapportering av bedriftsdata',
-    summary: 'Du må levere bedriftsdata innen 31. oktober.',
-    additionalInfo:
-      'Din bedrift er pålagt å rapportere inn bedriftsdata innen **31. oktober**. ' +
-      'Vi bruker svarene dine kun til å utarbeide statistikk, og enkeltsvar vil aldri bli offentliggjort. Du kan når som helst kontakte oss og kreve av opplysningene om deg blir slettet.',
-    action: [
-      {
-        label: 'Rapporter bedriftsdata',
-      },
-    ],
-    attachments: {
-      items: [
-        {
-          label: 'Vedtak om innlevering av bedriftsdata.pdf',
-          href: '',
-        },
-      ],
-    },
-  },
-};
-
-export const HistoryContact: Story = {
-  args: {
-    status: { value: 'requires-attention' },
-    sender: {
-      name: 'Statistisk sentralbyrå',
-      imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
-    },
-    recipient: {
-      name: 'Bergen Bar',
-    },
-    title: 'Rapportering av bedriftsdata',
-    summary: 'Innrapporteringen inneholder feil. Se over og lever på nytt.',
-    additionalInfo:
-      'Din bedrift er pålagt å rapportere inn bedriftsdata innen **31. oktober**. ' +
-      'Vi bruker svarene dine kun til å utarbeide statistikk, og enkeltsvar vil aldri bli offentliggjort. Du kan når som helst kontakte oss og kreve av opplysningene om deg blir slettet.',
-    action: [
-      {
-        label: 'Rapporter bedriftsdata',
-      },
-    ],
-    attachments: {
-      items: [
-        {
-          label: 'Feilliste.pdf',
-        },
-      ],
-    },
-    history: [
-      {
-        createdAt: '2004-01-01 13:34',
-        createdBy: {
-          name: 'Eirik Horneland',
-        },
-        summary: 'Rapportering ble sendt inn.',
-        attachments: [
-          {
-            label: 'Kvittering.pdf',
-          },
-        ],
-      },
-      {
-        createdAt: '2004-01-01 13:34',
-        createdBy: {
-          imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
-
-          name: 'Statistisk sentralbyrå',
-        },
-        summary: 'Du må levere bedriftsdata innen 31. oktober.',
-        attachments: [
-          {
-            label: 'Vedtak om innlevering av bedriftsdata.pdf',
-          },
-        ],
-      },
-    ],
-    contactInfo:
-      'Kontakt oss på svar@ssb.no eller ring 62 88 56 08.\n\n' +
-      'Svartjenesten er åpen alle hverdager fra kl. 9-21 og lørdager fra kl. 10-16.',
-  },
-};
-
-export const Signering: Story = {
-  args: {
-    status: { value: 'requires-attention' },
-
-    sender: {
-      name: 'Statistisk sentralbyrå',
-      imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
-    },
-
-    recipient: {
-      name: 'Bergen Bar',
-    },
-
-    title: 'Registrere enkeltmannsforetak',
-    summary: 'Skjema er klar til signering.',
-    additionalInfo:
-      'Din bedrift er pålagt å rapportere inn bedriftsdata innen **31. oktober**. Vi bruker svarene dine kun til å utarbeide statistikk, og enkeltsvar vil aldri bli offentliggjort. Du kan når som helst kontakte oss og kreve av opplysningene om deg blir slettet.',
-
-    action: [
-      {
-        label: 'Gå til signering',
-      },
-    ],
-
-    attachments: {},
-
-    history: {
-      items: [
-        {
-          updatedAt: '2004-01-01 13:34',
-
-          updatedBy: {
-            name: 'Eirik Horneland',
-          },
-
-          summary: 'Rapportering ble sendt inn.',
-
-          attachments: [
-            {
-              label: 'Kvittering.pdf',
-            },
-          ],
-        },
-        {
-          updatedAt: '2004-01-01 13:34',
-
-          updatedBy: {
-            imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
-            name: 'Statistisk sentralbyrå',
-          },
-
-          summary: 'Du må levere bedriftsdata innen 31. oktober.',
-
-          attachments: [
-            {
-              label: 'Vedtak om innlevering av bedriftsdata.pdf',
-            },
-          ],
-        },
-      ],
-    },
-
-    contact: {
-      title: 'Ta kontakt',
-      body: 'Ta kontakt for mer informasjon på telefon 99 00 00 00.',
-    },
-  },
-};
-
-export const BrregDraft: Story = {
-  args: {
-    status: { value: 'draft' },
-
-    sender: {
-      name: 'Statistisk sentralbyrå',
-      imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
-    },
-
-    recipient: {
-      name: 'Bergen Bar',
-    },
-
-    title: 'Registrere enkeltmannsforetak',
-    summary: 'Skjema er opprettet.',
-
-    action: [
-      {
-        label: 'Gå til skjema',
-      },
-      {
-        label: 'Forkast',
-      },
-    ],
-
-    attachments: {},
-    additionalInfo:
-      'Enkeltpersonforetak må registreres i Enhetsregisteret for å få et organisasjonsnummer. Enkelte må også registreres i Foretaksregisteret.',
-  },
-};
-
-export const BrregSign: Story = {
-  args: {
-    ...BrregDraft.args,
-    status: { value: 'requires-attention' },
-    summary: 'Skjema er klar til signering.',
-
-    action: [
-      {
-        label: 'Til signering',
-      },
-      {
-        label: 'Avslå signering',
-      },
-    ],
-
-    history: {
-      items: [
-        {
-          createdAt: '2004-01-01 13:34',
-          createdBy: {
-            type: 'person',
-            name: 'Eirik Horneland',
-          },
-          summary: 'Rapportering ble sendt inn.',
-          attachments: [
-            {
-              label: 'Kvittering.pdf',
-            },
-          ],
-        },
-        {
-          createdAt: '2004-01-01 13:34',
-          createdBy: {
-            imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
-            name: 'Statistisk sentralbyrå',
-          },
-
-          summary: 'Du må levere bedriftsdata innen 31. oktober.',
-
-          attachments: [
-            {
-              label: 'Vedtak om innlevering av bedriftsdata.pdf',
-            },
-          ],
-        },
-      ],
-    },
-  },
-};

package/lib/components/Dialog/Dialog.tsx

@@ -1,111 +0,0 @@
-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 { ContextMenuProps } from '../ContextMenu/';
-
-import type { ReactNode } from 'react';
-import { type DialogActionButtonProps, DialogActions } from './DialogActions.tsx';
-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 {
-  /** Dialog id */
-  id: string;
-  /** Title */
-  title: string;
-  /** Back button */
-  backButton?: DialogBackButtonProps;
-  /** Context menu */
-  menu?: ContextMenuProps;
-  /** Dialog status */
-  status?: DialogStatusProps;
-  /** Updated date time */
-  updatedAt?: string;
-  /** Updated label */
-  updatedAtLabel?: string;
-  /** Due date */
-  dueAt?: string;
-  /** Due at label */
-  dueAtLabel?: 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,
-  menu,
-  updatedAt,
-  updatedAtLabel,
-  dueAt,
-  dueAtLabel,
-  status,
-  title,
-  sender,
-  recipient,
-  summary = 'Summary.',
-  body,
-  actions = [],
-  attachments,
-  history,
-  seenBy,
-  activityLog,
-  additionalInfo,
-}: DialogProps) => {
-  return (
-    <DialogBase>
-      <DialogNav status={status} dueAt={dueAt} dueAtLabel={dueAtLabel} backButton={backButton} menu={menu} />
-      <DialogArticleBase>
-        <DialogHeader
-          title={title}
-          sender={sender}
-          recipient={recipient}
-          seen={seenBy?.seenByEndUser ?? false}
-          variant="neutral"
-        />
-        <DialogBodyBase>
-          <DialogContent updatedAt={updatedAt} updatedAtLabel={updatedAtLabel} summary={summary} body={body} />
-          {attachments && <DialogAttachments {...attachments} />}
-          {actions?.length > 0 && <DialogActions items={actions} />}
-          <MetaBase>
-            {seenBy && <DialogSeenBy {...seenBy} />}
-            {activityLog && <DialogActivityLog {...activityLog} />}
-          </MetaBase>
-        </DialogBodyBase>
-        {additionalInfo && <DialogFooter additionalInfo={additionalInfo} />}
-        {history && <DialogHistory {...history} />}
-      </DialogArticleBase>
-    </DialogBase>
-  );
-};

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

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