@altinn/altinn-components 0.9.1 → 0.10.1

package/dist/components/Byline/Byline.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { AvatarGroupProps, AvatarProps } from '..';
+export type BylineSize = 'xs' | 'sm' | 'lg';
+export interface BylineProps {
+    size?: BylineSize;
+    avatar?: AvatarProps;
+    avatarGroup?: AvatarGroupProps;
+    datetime?: string;
+    loading?: boolean;
+    children?: ReactNode;
+}
+/** Byline, possible avatar/avatarGroup, name and more info */
+export declare const Byline: ({ loading, size, avatar, avatarGroup, datetime, children }: BylineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Byline/Byline.js

@@ -0,0 +1,19 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import { Avatar as c } from "../Avatar/Avatar.js";
+import { AvatarGroup as p } from "../Avatar/AvatarGroup.js";
+import { Skeleton as m } from "../Skeleton/Skeleton.js";
+import "../RootProvider/RootProvider.js";
+import '../../assets/Byline.css';const b = "_byline_pzenw_1", d = "_label_pzenw_7", e = {
+  byline: b,
+  label: d
+}, A = ({ loading: r, size: t = "xs", avatar: l, avatarGroup: i, datetime: s, children: o }) => /* @__PURE__ */ n("div", { className: e.byline, "data-size": t, children: [
+  /* @__PURE__ */ a(m, { variant: "circle", className: e.avatar, loading: r, children: i ? /* @__PURE__ */ a(p, { ...i, size: t, className: e.avatar }) : l && /* @__PURE__ */ a(c, { ...l, size: t, className: e.avatar }) }),
+  /* @__PURE__ */ a("time", { "data-size": t, dateTime: s, className: e.label, children: /* @__PURE__ */ a(m, { loading: r, children: o }) })
+] });
+export {
+  A as Byline
+};

package/dist/components/Byline/Byline.stories.js

@@ -0,0 +1,44 @@
+import { jsxs as e, Fragment as r, jsx as t } from "react/jsx-runtime";
+import { Byline as a } from "./Byline.js";
+const o = {
+  title: "Byline/Byline",
+  component: a,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    datetime: "2024-12-12 11:15"
+  }
+}, i = {
+  args: {
+    children: "12. desember 2024 kl 11.15"
+  }
+}, l = {
+  args: {
+    avatar: {
+      type: "person",
+      name: "Per Person"
+    },
+    children: /* @__PURE__ */ e(r, { children: [
+      /* @__PURE__ */ t("strong", { children: "Per Person," }),
+      " 12. desember 2024"
+    ] })
+  }
+}, c = {
+  args: {
+    size: "lg",
+    avatar: {
+      type: "person",
+      name: "Per Person"
+    },
+    children: /* @__PURE__ */ e(r, { children: [
+      /* @__PURE__ */ t("strong", { children: "Skatteetaten" }),
+      " til Per Person"
+    ] })
+  }
+};
+export {
+  l as Avatar,
+  i as Default,
+  c as LargeAvatar,
+  o as default
+};

package/dist/components/Byline/index.d.ts

@@ -0,0 +1 @@
+export * from './Byline';

package/dist/components/Byline/index.js

@@ -0,0 +1,4 @@
+import { Byline as r } from "./Byline.js";
+export {
+  r as Byline
+};

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,33 +1,36 @@
 "use client";
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { c as u } from "../../index-L8X2o7IH.js";
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import { c as _ } from "../../index-L8X2o7IH.js";
+import { useRef as f } from "react";
 import "../Icon/SvgIcon.js";
-import "react";
+import { useClickOutside as y } from "../../hooks/useClickOutside.js";
 import "../Autocomplete/AutocompleteBase.js";
-import { IconButton as g } from "../Button/IconButton.js";
-import { useRootContext as _ } from "../RootProvider/RootProvider.js";
-import { MenuItems as y } from "../Menu/MenuItems.js";
-import { DropdownBase as x } from "../Dropdown/DropdownBase.js";
-import '../../assets/ContextMenu.css';const f = "_toggle_ya7jy_1", j = "_button_ya7jy_5", h = "_icon_ya7jy_14", w = "_dropdown_ya7jy_18", t = {
-  toggle: f,
-  button: j,
-  icon: h,
-  dropdown: w
-}, A = ({
+import { IconButton as x } from "../Button/IconButton.js";
+import { MenuItems as j } from "../Menu/MenuItems.js";
+import { useRootContext as h } from "../RootProvider/RootProvider.js";
+import { DropdownBase as w } from "../Dropdown/DropdownBase.js";
+import '../../assets/ContextMenu.css';const b = "_toggle_ya7jy_1", C = "_button_ya7jy_5", I = "_icon_ya7jy_14", N = "_dropdown_ya7jy_18", t = {
+  toggle: b,
+  button: C,
+  icon: I,
+  dropdown: N
+}, T = ({
   id: n = "context-menu",
-  placement: e = "right",
-  size: r,
-  groups: s = {},
-  className: c,
-  items: i
+  placement: r = "right",
+  size: s,
+  groups: c = {},
+  className: i,
+  items: m
 }) => {
-  const { currentId: m, toggleId: l, closeAll: a } = _(), p = () => l(n);
-  return /* @__PURE__ */ d("div", { className: u(t.toggle, c), "data-theme": "neutral", children: [
+  const { currentId: l, toggleId: a, closeAll: d } = h(), e = f(null);
+  y(e, () => d());
+  const p = () => a(n), u = l === n;
+  return /* @__PURE__ */ g("div", { className: _(t.toggle, i), "data-theme": "neutral", ref: e, children: [
     /* @__PURE__ */ o(
-      g,
+      x,
       {
         className: t.button,
-        size: r,
+        size: s,
         icon: "menu-elipsis-horizontal",
         iconSize: "md",
         variant: "text",
@@ -35,9 +38,9 @@ import '../../assets/ContextMenu.css';const f = "_toggle_ya7jy_1", j = "_button_
         onClick: p
       }
     ),
-    /* @__PURE__ */ o(x, { className: t.dropdown, placement: e, open: m === n, onClose: a, children: /* @__PURE__ */ o(y, { groups: s, items: i }) })
+    /* @__PURE__ */ o(w, { className: t.dropdown, placement: r, open: u, children: /* @__PURE__ */ o(j, { groups: c, items: m }) })
   ] });
 };
 export {
-  A as ContextMenu
+  T as ContextMenu
 };

package/dist/components/Dialog/Dialog.d.ts

@@ -1,21 +1,16 @@
 import { ReactNode } from 'react';
-import { AttachmentSectionProps } from '../Attachment';
-import { ContextMenuProps } from '../ContextMenu/';
-import { TransmissionSectionProps } from '../Transmission';
-import { DialogActionButtonProps } from './DialogActions.tsx';
-import { DialogActivityLogProps } from './DialogActivityLog';
-import { DialogRecipientProps, DialogSenderProps } from './DialogHeadings.tsx';
-import { DialogHistoryProps } from './DialogHistory';
-import { DialogBackButtonProps } from './DialogNav';
-import { DialogSeenByProps } from './DialogSeenBy';
-import { DialogStatusProps } from './DialogStatus';
+import { AvatarProps, BackButtonProps, ContextMenuProps, DialogActionButtonProps, DialogActivityLogProps, DialogAttachmentsProps, DialogHistoryProps, DialogSectionProps, DialogSeenByProps, DialogStatusProps, DialogTimelineProps } from '..';
 export interface DialogProps {
     /** Dialog id */
     id: string;
     /** Title */
     title: string;
+    /** Sender */
+    sender: AvatarProps;
+    /** Recipient  */
+    recipient?: AvatarProps;
     /** Back button */
-    backButton?: DialogBackButtonProps;
+    backButton?: BackButtonProps;
     /** Context menu */
     menu?: ContextMenuProps;
     /** Dialog status */
@@ -28,10 +23,10 @@ export interface DialogProps {
     dueAt?: string;
     /** Due at label */
     dueAtLabel?: string;
-    /** Sender */
-    sender?: DialogSenderProps;
-    /** Recipient  */
-    recipient?: DialogRecipientProps;
+    /** Recipient label (prefix) */
+    recipientLabel?: string;
+    /** Group recipient, show both sender and recipient avatars */
+    recipientGroup?: boolean;
     /** Summary */
     summary?: string;
     /** Body (should be an output markdown/html rendered to React / HTML) */
@@ -42,16 +37,18 @@ export interface DialogProps {
     seenBy?: DialogSeenByProps;
     /** Activity Log */
     activityLog?: DialogActivityLogProps;
-    /** More information about the dialog, process, etc. */
-    additionalInfo?: ReactNode;
     /** Dialog attachments */
-    attachments?: AttachmentSectionProps;
-    /** Dialog transmissions */
-    transmissions?: TransmissionSectionProps;
-    /** History */
+    attachments?: DialogAttachmentsProps;
+    /** Dialog history */
     history?: DialogHistoryProps;
+    /** Dialog timeline */
+    timeline?: DialogTimelineProps;
+    /** More information about the dialog, process, etc. */
+    additionalInfo?: DialogSectionProps;
+    /** Contact information. */
+    contactInfo?: DialogSectionProps;
 }
 /**
  * Full representation of a dialog, including attachments, actions and history,
  */
-export declare const Dialog: ({ backButton, menu, updatedAt, updatedAtLabel, dueAt, dueAtLabel, status, title, sender, recipient, summary, body, actions, attachments, history, seenBy, activityLog, additionalInfo, transmissions, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: ({ backButton, menu, updatedAt, updatedAtLabel, dueAt, dueAtLabel, status, title, sender, recipient, recipientLabel, recipientGroup, summary, body, actions, attachments, seenBy, activityLog, history, timeline, additionalInfo, contactInfo, }: DialogProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/Dialog.js

@@ -1,61 +1,71 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { AttachmentSection as x } from "../Attachment/AttachmentSection.js";
-import { MetaBase as j } from "../Meta/MetaBase.js";
+import { Typography as s } from "../Typography/Typography.js";
+import { Heading as w } from "../Typography/Heading.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { DialogSeenBy as v } from "./DialogSeenBy.js";
-import { DialogActions as y } from "./DialogActions.js";
-import { DialogActivityLog as H } from "./DialogActivityLog.js";
-import { DialogArticleBase as C } from "./DialogArticleBase.js";
-import { DialogBase as F } from "./DialogBase.js";
-import { DialogBodyBase as M } from "./DialogBodyBase.js";
-import { DialogContent as N } from "./DialogContent.js";
-import { DialogFooter as T } from "./DialogFooter.js";
-import { DialogHeader as b } from "./DialogHeader.js";
-import { DialogHistory as k } from "./DialogHistory.js";
-import { DialogNav as q } from "./DialogNav.js";
+import { DialogMetadata as C } from "./DialogMetadata.js";
+import { DialogByline as M } from "./DialogByline.js";
+import { DialogActions as N } from "./DialogActions.js";
+import { DialogContent as k } from "./DialogContent.js";
+import { DialogSection as D } from "./DialogSection.js";
+import { DialogAttachments as q } from "./DialogAttachments.js";
 import "../RootProvider/RootProvider.js";
-import { TransmissionSection as w } from "../Transmission/TransmissionSection.js";
-const ro = ({
-  backButton: f,
-  menu: g,
-  updatedAt: D,
-  updatedAtLabel: n,
-  dueAt: B,
-  dueAtLabel: c,
-  status: d,
-  title: h,
-  sender: s,
-  recipient: A,
+import { DialogTimeline as E } from "./DialogTimeline.js";
+import { DialogHistory as F } from "./DialogHistory.js";
+import { PageBase as G } from "../Page/PageBase.js";
+import { PageNav as J } from "../Page/PageNav.js";
+import { Article as K } from "../Page/Article.js";
+const er = ({
+  backButton: o,
+  menu: t,
+  updatedAt: x,
+  updatedAtLabel: u,
+  dueAt: y,
+  dueAtLabel: z,
+  status: A,
+  title: b,
+  sender: j,
+  recipient: B,
+  recipientLabel: H = "to",
+  recipientGroup: P,
   summary: S = "Summary.",
-  body: u,
-  actions: r = [],
-  attachments: i,
-  history: t,
-  seenBy: e,
-  activityLog: p,
-  additionalInfo: l,
-  transmissions: a
-}) => /* @__PURE__ */ m(F, { children: [
-  /* @__PURE__ */ o(q, { status: d, dueAt: B, dueAtLabel: c, backButton: f, menu: g }),
-  /* @__PURE__ */ m(C, { children: [
-    /* @__PURE__ */ o(b, { title: h, sender: s, recipient: A, seen: !1, variant: "neutral" }),
-    /* @__PURE__ */ m(M, { children: [
-      /* @__PURE__ */ o(N, { updatedAt: D, updatedAtLabel: n, summary: S, body: u }),
-      i && /* @__PURE__ */ o(x, { ...i }),
-      (r == null ? void 0 : r.length) > 0 && /* @__PURE__ */ o(y, { items: r }),
-      a && /* @__PURE__ */ o(w, { ...a }),
-      /* @__PURE__ */ m(j, { children: [
-        e && /* @__PURE__ */ o(v, { ...e }),
-        p && /* @__PURE__ */ o(H, { ...p })
-      ] })
+  body: T,
+  actions: i = [],
+  attachments: p,
+  seenBy: d,
+  activityLog: v,
+  history: g,
+  timeline: h,
+  additionalInfo: m,
+  contactInfo: e
+}) => /* @__PURE__ */ l(G, { color: "subtle", shadow: "xs", children: [
+  /* @__PURE__ */ r(J, { padding: "sm", backButton: o, menu: t, children: /* @__PURE__ */ r(C, { status: A, dueAt: y, dueAtLabel: z }) }),
+  /* @__PURE__ */ l(K, { theme: "article", padding: "xl", spacing: "xl", children: [
+    /* @__PURE__ */ r(w, { size: "lg", children: b }),
+    g && /* @__PURE__ */ r(F, { ...g, collapsible: !0 }),
+    /* @__PURE__ */ r(
+      M,
+      {
+        size: "lg",
+        sender: j,
+        recipient: B,
+        recipientLabel: H,
+        recipientGroup: P
+      }
+    ),
+    /* @__PURE__ */ l(k, { updatedAt: x, updatedAtLabel: u, seenBy: d, activityLog: v, children: [
+      /* @__PURE__ */ r("p", { children: S }),
+      T,
+      p && /* @__PURE__ */ r(q, { ...p }),
+      (i == null ? void 0 : i.length) > 0 && /* @__PURE__ */ r(N, { items: i })
     ] }),
-    l && /* @__PURE__ */ o(T, { additionalInfo: l }),
-    t && /* @__PURE__ */ o(k, { ...t })
+    h && /* @__PURE__ */ r(E, { ...h }),
+    m && /* @__PURE__ */ r(D, { title: m == null ? void 0 : m.title, children: /* @__PURE__ */ r(s, { size: "md", children: m == null ? void 0 : m.children }) }),
+    e && /* @__PURE__ */ r(D, { title: e == null ? void 0 : e.title, children: /* @__PURE__ */ r(s, { size: "md", children: e == null ? void 0 : e.children }) })
   ] })
 ] });
 export {
-  ro as Dialog
+  er as Dialog
 };