@altinn/altinn-components 0.31.0 → 0.32.0

package/dist/types/lib/components/Dialog/DialogMetadata.d.ts

@@ -1,4 +1,8 @@
-import { AvatarProps, DialogActivityLogProps, DialogSeenByProps, DialogStatusProps } from '..';
+import { AvatarProps, DialogSeenByProps, DialogStatusProps } from '..';
+interface DialogMetadataButtonProps {
+    label: string;
+    onClick?: () => void;
+}
 export type DialogMetadataProps = {
     className?: string;
     /** Metadata is loading */
@@ -42,9 +46,10 @@ export type DialogMetadataProps = {
     /** Transmissions label */
     transmissionsLabel?: string;
     /** Activity Log */
-    activityLog?: DialogActivityLogProps;
+    activityLog?: DialogMetadataButtonProps;
 };
 /**
  * Metadata for a dialog in list view.
  */
 export declare const DialogMetadata: ({ className, loading, status, sender, updatedAt, updatedAtLabel, dueAt, dueAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, seenBy, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, transmissionsLabel, activityLog, }: DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/lib/components/Dialog/DialogMetadata.stories.d.ts

@@ -12,12 +12,9 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Draft: Story;
-export declare const Sent: Story;
-export declare const DueDate: Story;
-export declare const SeenByEndUser: Story;
-export declare const SeenByOthers: Story;
-export declare const SeenByEndUserAndOthers: Story;
-export declare const SeenByAndActivityLog: Story;
-export declare const SeenByLog: Story;
+export declare const RequiresAttention: Story;
+export declare const InProgress: Story;
+export declare const Completed: Story;
+export declare const NotApplicable: Story;
+export declare const Transmissions: Story;
 export declare const ActivityLog: Story;
-export declare const SentAndReceivedCount: Story;

package/dist/types/lib/components/Modal/ModalBase.d.ts

@@ -0,0 +1,11 @@
+import { BackdropColor } from '../';
+export interface ModalBaseProps {
+    open: boolean;
+    onClose: () => void;
+    children?: React.ReactNode;
+    backdropColor?: BackdropColor;
+    variant?: 'default' | 'content' | 'full';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    color?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'inherit';
+}
+export declare const ModalBase: ({ open, onClose, children, backdropColor, size, color, variant, }: ModalBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Modal/ModalBase.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ModalBase } from './';
+declare const meta: Meta<typeof ModalBase>;
+export default meta;
+type Story = StoryObj<typeof ModalBase>;
+export declare const Default: Story;
+export declare const NoContent: Story;
+export declare const Content: Story;
+export declare const Full: Story;

package/dist/types/lib/components/Modal/ModalBody.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { SectionProps } from '../';
+export interface ModalBodyProps extends SectionProps {
+    children?: ReactNode;
+}
+export declare const ModalBody: ({ children, ...props }: ModalBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Modal/ModalHeader.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface ModalHeaderProps {
+    title: string;
+    closeTitle?: string;
+    onClose?: () => void;
+    children?: ReactNode;
+    sticky?: boolean;
+}
+export declare const ModalHeader: ({ title, onClose, closeTitle, children }: ModalHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Modal/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ModalBase';
+export * from './ModalHeader';
+export * from './ModalBody';

package/dist/types/lib/components/index.d.ts

@@ -38,4 +38,5 @@ export * from './Settings';
 export * from './Dashboard';
 export * from './ActivityLog';
 export * from './Article';
+export * from './Modal';
 export * from './DsComponents';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "main": "dist/index.js",
   "files": [
     "dist/",

package/dist/DialogActivityLog-BoPREh7Y.js

@@ -1,37 +0,0 @@
-"use client";
-import { jsx as n } from "react/jsx-runtime";
-import "./index-L8X2o7IH.js";
-import * as a from "react";
-import { forwardRef as m } from "react";
-import "./components/RootProvider/RootProvider.js";
-import "./components/Searchbar/AutocompleteBase.js";
-import "./components/Snackbar/useSnackbar.js";
-import { MetaItem as c } from "./components/Metadata/MetaItem.js";
-import { u as f } from "./useId-BVFxCjkq.js";
-var d = function(t, o) {
-  var r = {};
-  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && o.indexOf(e) < 0 && (r[e] = t[e]);
-  if (t != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var l = 0, e = Object.getOwnPropertySymbols(t); l < e.length; l++)
-      o.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
-  return r;
-};
-const p = m((t, o) => {
-  var { title: r, titleId: e } = t, l = d(t, ["title", "titleId"]);
-  let i = f();
-  return i = r ? e || "title-" + i : void 0, a.createElement(
-    "svg",
-    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: o, "aria-labelledby": i }, l),
-    r ? a.createElement("title", { id: i }, r) : null,
-    a.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.5 1.75a.75.75 0 0 1 .75.75v2.464a9.75 9.75 0 1 1 12.342 15.023.75.75 0 1 1-.86-1.229A8.251 8.251 0 1 0 6.084 6.25H9a.75.75 0 0 1 0 1.5H4.5A.75.75 0 0 1 3.75 7V2.5a.75.75 0 0 1 .75-.75M12.75 6a.75.75 0 0 0-1.5 0v6c0 .199.079.39.22.53l2.5 2.5a.75.75 0 1 0 1.06-1.06l-2.28-2.28zM3 11.25a.75.75 0 0 1 .75.75q0 .66.105 1.31a.75.75 0 0 1-1.481.24A10 10 0 0 1 2.25 12a.75.75 0 0 1 .75-.75m1.855 4.875a.75.75 0 0 0-1.299.75q.39.675.882 1.28a.75.75 0 1 0 1.163-.947 8 8 0 0 1-.746-1.083m1.995 3.294a.75.75 0 0 1 1.025-.274q.57.33 1.188.564a.75.75 0 1 1-.535 1.402 10 10 0 0 1-1.403-.667.75.75 0 0 1-.275-1.025m6.7 2.207a.75.75 0 1 0-.24-1.48q-.65.104-1.31.104a.75.75 0 0 0 0 1.5q.78 0 1.55-.124", clipRule: "evenodd" })
-  );
-}), h = ({
-  size: t = "xs",
-  label: o = "Activity log",
-  onClick: r,
-  ...e
-}) => /* @__PURE__ */ n(c, { ...e, size: t, icon: p, children: o });
-export {
-  h as D,
-  p as S
-};

package/dist/components/Dialog/DialogActivity.js

@@ -1,32 +0,0 @@
-import { jsx as m, jsxs as n } from "react/jsx-runtime";
-import "../../index-L8X2o7IH.js";
-import "react";
-import { Byline as e } from "../Byline/Byline.js";
-import "../RootProvider/RootProvider.js";
-import { TimelineBase as h } from "../Timeline/TimelineBase.js";
-import { Typography as g } from "../Typography/Typography.js";
-import "../Searchbar/AutocompleteBase.js";
-import "../Snackbar/useSnackbar.js";
-import { Section as c } from "../Page/Section.js";
-import { TransmissionList as x } from "../Transmission/TransmissionList.js";
-import { S } from "../../CircleFill-BkDF4Wm0.js";
-const y = ({
-  icon: p = S,
-  color: l = "neutral",
-  size: s = "sm",
-  createdBy: i,
-  createdAt: f,
-  createdAtLabel: o,
-  description: r,
-  transmissions: t
-}) => /* @__PURE__ */ m(h, { color: l, icon: s === "md" ? i : p, children: /* @__PURE__ */ n(c, { style: { marginBottom: ".5em" }, children: [
-  o && /* @__PURE__ */ n(e, { datetime: f, children: [
-    /* @__PURE__ */ m("strong", { children: i == null ? void 0 : i.name }),
-    o
-  ] }),
-  r && /* @__PURE__ */ m(g, { children: r }),
-  t && /* @__PURE__ */ m(x, { items: t })
-] }) });
-export {
-  y as DialogActivity
-};

package/dist/types/lib/components/Dialog/DialogActivity.d.ts

@@ -1,22 +0,0 @@
-import { ReactNode } from 'react';
-import { AvatarProps, BadgeProps, Color, SvgElement, TransmissionProps } from '..';
-export interface DialogActivityBadge {
-    label?: string;
-    value?: string;
-}
-export type DialogActivitySize = 'sm' | 'md';
-export interface DialogActivityProps {
-    type?: string;
-    size?: DialogActivitySize;
-    icon?: SvgElement;
-    color?: Color;
-    badge?: BadgeProps;
-    createdAt?: string;
-    createdAtLabel?: string;
-    createdBy?: AvatarProps;
-    description?: string | ReactNode;
-    transmissions?: TransmissionProps[];
-    collapsed?: boolean;
-    children?: ReactNode;
-}
-export declare const DialogActivity: ({ icon, color, size, createdBy, createdAt, createdAtLabel, description, transmissions, }: DialogActivityProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dialog/DialogListItem.stories.d.ts

@@ -1,260 +0,0 @@
-import { DialogListItemProps, DialogListItemSize } from '..';
-declare const meta: {
-    title: string;
-    component: ({ size, state, loading, controls, select, selected, status, sender, recipient, recipientLabel, grouped, updatedAt, updatedAtLabel, archived, archivedAt, archivedAtLabel, trashed, trashedAt, trashedAtLabel, badge, dueAt, dueAtLabel, unread, seenBy, seenByLog, draftsLabel, sentCount, receivedCount, attachmentsCount, attachmentsLabel, title, description, summary, variant, id, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    argTypes: {};
-    args: {
-        title: string;
-        summary: string;
-        sender: import('..').AvatarProps;
-        recipient: {
-            type: "person";
-            name: string;
-        };
-        updatedAt: string;
-        updatedAtLabel: string;
-        status: {};
-    };
-    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react-vite').ReactRenderer, {
-        title: string;
-        id?: string | undefined;
-        sender?: import('..').AvatarProps | undefined;
-        recipient?: import('..').AvatarProps | undefined;
-        recipientLabel?: string | undefined;
-        grouped?: boolean | undefined;
-        description?: string | undefined;
-        summary?: string | undefined;
-        size?: DialogListItemSize | undefined;
-        controls?: React.ReactNode;
-        selected?: boolean | undefined;
-        state?: import('./DialogListItem').DialogListItemState | undefined;
-        tabIndex?: number | undefined;
-        badge?: import('..').BadgeProps | undefined;
-        unread?: boolean | undefined;
-        seenBy?: import('./DialogSeenBy').DialogSeenByProps | undefined;
-        seenByLog?: import('./SeenByLog').SeenByLogProps | undefined;
-        attachmentsCount?: number | undefined;
-        attachmentsLabel?: string | undefined;
-        groupId?: string | undefined;
-        theme?: import('./DialogListItem').DialogListItemTheme | undefined;
-        color?: import('..').Color | undefined;
-        variant?: import('..').ListItemVariant | undefined;
-        className?: string | undefined;
-        loading?: boolean | undefined;
-        ariaLabel?: string | undefined;
-        icon?: import('..').SvgElement | import('..').IconProps | React.ReactNode | import('..').AvatarProps | import('..').AvatarGroupProps;
-        linkIcon?: boolean | undefined;
-        label?: React.ReactNode | (() => React.ReactElement);
-        interactive?: boolean | undefined;
-        as?: React.ElementType | undefined;
-        shadow?: import('..').Shadow | undefined;
-        border?: import('..').ListItemBorder | undefined;
-        disabled?: boolean | undefined;
-        hidden?: boolean | undefined;
-        active?: boolean | undefined;
-        expanded?: boolean | undefined;
-        onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
-        children?: React.ReactNode;
-        select?: import('..').ListItemSelectProps | undefined;
-        collapsible?: boolean | undefined;
-        href?: string | undefined;
-        onClick?: (() => void) | undefined;
-        onKeyPress?: React.KeyboardEventHandler | undefined;
-        status?: import('./DialogStatus').DialogStatusProps | undefined;
-        updatedAt?: string | undefined;
-        updatedAtLabel?: string | undefined;
-        dueAt?: string | undefined;
-        dueAtLabel?: string | undefined;
-        archived?: boolean | undefined;
-        archivedAt?: string | undefined;
-        archivedAtLabel?: string | undefined;
-        trashed?: boolean | undefined;
-        trashedAt?: string | undefined;
-        trashedAtLabel?: string | undefined;
-        draftsLabel?: string | undefined;
-        sentCount?: number | undefined;
-        receivedCount?: number | undefined;
-        transmissionsLabel?: string | undefined;
-        activityLog?: import('./DialogActivityLog').DialogActivityLogProps | undefined;
-    }>) => import("react/jsx-runtime").JSX.Element)[];
-};
-export default meta;
-export declare const Default: {
-    args: {};
-};
-export declare const Unread: {
-    args: {
-        unread: boolean;
-        badge: {
-            label: string;
-        };
-    };
-};
-export declare const SeenByEndUser: {
-    args: {
-        seenByLog: {
-            title: string;
-            items: {
-                id: string;
-                name: string;
-                seenAt: string;
-                seenAtLabel: string;
-                isEndUser: boolean;
-            }[];
-        };
-    };
-};
-export declare const SeenByMultiple: {
-    args: {
-        seenByLog: import('./SeenByLog').SeenByLogProps;
-    };
-};
-export declare const UnopenedContent: {
-    args: {
-        seenByLog: import('./SeenByLog').SeenByLogProps;
-        badge: {
-            label: string;
-        };
-    };
-};
-export declare const MarkedAsUnread: {
-    args: {
-        seenByLog: import('./SeenByLog').SeenByLogProps;
-        unread: boolean;
-    };
-};
-export declare const GroupedAvatars: {
-    args: {
-        grouped: boolean;
-    };
-};
-export declare const RequiresAttention: {
-    args: {
-        status: {
-            value: string;
-            label: string;
-        };
-    };
-};
-export declare const DueAt: {
-    args: {
-        dueAt: string;
-        dueAtLabel: string;
-        status: {
-            value: string;
-            label: string;
-        };
-    };
-};
-export declare const InProgress: {
-    args: {
-        status: {
-            value: string;
-            label: string;
-        };
-    };
-};
-export declare const Completed: {
-    args: {
-        status: {
-            value: string;
-            label: string;
-        };
-    };
-};
-export declare const AttachmentsCount: {
-    args: {
-        attachmentsCount: number;
-        status: {
-            value: string;
-            label: string;
-        };
-    };
-};
-export declare const AttachmentsLabel: {
-    args: {
-        attachmentsLabel: string;
-        attachmentsCount: number;
-        status: {
-            value: string;
-            label: string;
-        };
-    };
-};
-export declare const Draft: {
-    args: {
-        summary: undefined;
-        recipient: undefined;
-        draftsLabel: string;
-    };
-};
-export declare const DraftAndStatus: {
-    args: {
-        draftsLabel: string;
-        status: {
-            value: string;
-            label: string;
-        };
-    };
-};
-export declare const SentCount: {
-    args: {
-        sentCount: number;
-        status: {
-            value: string;
-            label: string;
-        };
-    };
-};
-export declare const ReceivedCount: {
-    args: {
-        receivedCount: number;
-        status: {
-            value: string;
-            label: string;
-        };
-    };
-};
-export declare const Transmissions: {
-    args: {
-        summary: undefined;
-        sentCount: number;
-        receivedCount: number;
-    };
-};
-export declare const Archived: {
-    args: {
-        summary: undefined;
-        archived: boolean;
-        archivedAt: string;
-        archivedAtLabel: string;
-    };
-};
-export declare const Trashed: {
-    args: {
-        summary: undefined;
-        trashed: boolean;
-        trashedAt: string;
-        trashedAtLabel: string;
-    };
-};
-export declare const Loading: {
-    args: {
-        loading: boolean;
-    };
-};
-export declare const LongTitle: {
-    args: {
-        title: string;
-    };
-};
-export declare const LongSummary: {
-    args: {
-        summary: string;
-    };
-};
-export declare const Selectable: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element[];
-export declare const Sizes: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element[];
-export declare const AsLink: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CustomControls: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;