@altinn/altinn-components 0.6.1 → 0.6.3

package/dist/components/Dialog/DialogHeadings.stories.js

@@ -0,0 +1,30 @@
+import { DialogHeadings as e } from "./DialogHeadings.js";
+const a = {
+  title: "Dialog/DialogHeadings",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    sender: {
+      name: "Sender"
+    },
+    recipient: {
+      type: "person",
+      name: "Recipient"
+    }
+  }
+}, o = {}, r = {
+  args: {
+    grouped: !0
+  }
+}, n = {
+  args: {
+    grouped: !0
+  }
+};
+export {
+  r as Company,
+  o as Default,
+  n as Grouped,
+  a as default
+};

package/dist/components/Dialog/DialogHistory.js

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import { HistoryList as t } from "../History/HistoryList.js";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../Icon/SvgIcon.js";
+import { DialogSectionBase as m } from "./DialogSectionBase.js";
+const a = ({ title: i = "History", items: r }) => r ? /* @__PURE__ */ o(m, { title: i, children: /* @__PURE__ */ o(t, { items: r }) }) : null;
+export {
+  a as DialogHistory
+};

package/dist/components/Dialog/DialogHistory.stories.js

@@ -0,0 +1,64 @@
+import { DialogHistory as t } from "./DialogHistory.js";
+const a = {
+  title: "Dialog/Sections/DialogHistory",
+  component: t,
+  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."
+      }
+    ]
+  }
+}, n = {
+  args: {}
+};
+export {
+  n as Default,
+  a as default
+};

package/dist/components/Dialog/DialogList.js

@@ -0,0 +1,27 @@
+import { jsx as c } from "react/jsx-runtime";
+import { createElement as t } from "react";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "../RootProvider/RootProvider.js";
+import { useMenu as f } from "../../hooks/useMenu.js";
+import { DialogListItem as l } from "./DialogListItem.js";
+import { SectionBase as y } from "../Page/SectionBase.js";
+import { DialogGroup as d } from "./DialogGroup.js";
+const P = ({ items: e, groups: m = {} }) => {
+  const { menu: r } = f({
+    items: e,
+    groups: m,
+    groupByKey: "groupId",
+    keyboardEvents: !1
+  });
+  return /* @__PURE__ */ c(y, { spacing: "none", margin: "md", children: r == null ? void 0 : r.map((o, i) => {
+    const p = o.props || {};
+    return /* @__PURE__ */ t(d, { ...p, key: i }, o == null ? void 0 : o.items.map((s, n) => {
+      const a = s.props || {};
+      return /* @__PURE__ */ t(l, { ...a, key: n });
+    }));
+  }) });
+};
+export {
+  P as DialogList
+};

package/dist/components/Dialog/DialogList.stories.js

@@ -0,0 +1,61 @@
+import { DialogList as t } from "./DialogList.js";
+const l = {
+  title: "Dialog/DialogList",
+  component: t,
+  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"
+      }
+    ]
+  }
+}, s = {
+  args: {}
+}, i = {
+  args: {
+    groups: {
+      "2024-01": {
+        title: "Januar 2024"
+      },
+      "2024-02": {
+        title: "Februar 2024"
+      }
+    }
+  }
+};
+export {
+  s as Default,
+  i as Grouped,
+  l as default
+};

package/dist/components/Dialog/DialogListItem.js

@@ -0,0 +1,73 @@
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { DialogHeadings as k } from "./DialogHeadings.js";
+import { DialogTitle as j } from "./DialogTitle.js";
+import { DialogTouchedBy as I } from "./DialogTouchedBy.js";
+import { DialogListItemBase as L } from "./DialogListItemBase.js";
+import { DialogBorder as T } from "./DialogBorder.js";
+import { DialogMetadata as H } from "./DialogMetadata.js";
+import '../../assets/DialogListItem.css';const M = "_border_6r71i_1", q = "_header_6r71i_10", w = "_summary_6r71i_16", z = "_footer_6r71i_30", A = "_touchedBy_6r71i_34", C = "_link_6r71i_58", e = {
+  border: M,
+  header: q,
+  summary: w,
+  footer: z,
+  touchedBy: A,
+  link: C
+}, Q = ({
+  as: m = "a",
+  size: r = "lg",
+  variant: t = "neutral",
+  href: l,
+  onClick: d,
+  select: c,
+  selected: n,
+  status: _,
+  sender: h,
+  recipient: f,
+  grouped: u,
+  updatedAt: g,
+  updatedAtLabel: p,
+  dueAt: y,
+  dueAtLabel: D,
+  seen: s = !1,
+  seenBy: B,
+  touchedBy: i,
+  attachmentsCount: x,
+  title: N,
+  summary: b
+}) => /* @__PURE__ */ o(
+  L,
+  {
+    as: m,
+    size: r,
+    href: l,
+    select: c,
+    selected: n,
+    variant: t,
+    onClick: d,
+    children: /* @__PURE__ */ a(T, { className: e.border, size: r, seen: s, children: [
+      /* @__PURE__ */ a("header", { "data-size": r, className: e.header, children: [
+        /* @__PURE__ */ o(j, { size: r, seen: s, variant: t, children: N }),
+        /* @__PURE__ */ o(k, { size: "xs", grouped: u, sender: h, recipient: f })
+      ] }),
+      /* @__PURE__ */ o("p", { "data-size": r, className: e.summary, children: b }),
+      /* @__PURE__ */ a("footer", { "data-size": r, className: e.footer, children: [
+        /* @__PURE__ */ o(
+          H,
+          {
+            status: _,
+            updatedAt: g,
+            updatedAtLabel: p,
+            dueAt: y,
+            dueAtLabel: D,
+            seenBy: B,
+            attachmentsCount: x
+          }
+        ),
+        i && /* @__PURE__ */ o(I, { size: "xs", touchedBy: i, className: e.touchedBy })
+      ] })
+    ] })
+  }
+);
+export {
+  Q as DialogListItem
+};

package/dist/components/Dialog/DialogListItem.stories.js

@@ -0,0 +1,192 @@
+import { jsx as s, jsxs as n } from "react/jsx-runtime";
+import { useState as f, Fragment as o } from "react";
+import { DialogListItem as l } from "./DialogListItem.js";
+import { DialogStatusEnum as b } from "./DialogStatus.js";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { MetaItem as u } from "../Meta/MetaItem.js";
+import "../RootProvider/RootProvider.js";
+import { ListBase as d } from "../List/ListBase.js";
+const y = (r) => {
+  switch (r) {
+    case "draft":
+      return "Utkast";
+    case "sent":
+      return "Sendt";
+    case "requires-attention":
+      return "Krever handling";
+    case "in-progress":
+      return "Under arbeid";
+    case "completed":
+      return "Avsluttet";
+    default:
+      return "";
+  }
+}, i = ["lg", "md", "sm", "xs"];
+var g;
+const c = (g = Object.keys(b)) == null ? void 0 : g.map((r) => ({
+  value: r,
+  label: y(r)
+})), T = {
+  title: "Dialog/DialogListItem",
+  component: l,
+  tags: ["autodocs"],
+  parameters: {},
+  argTypes: {},
+  args: {
+    title: "Title",
+    summary: "Summary",
+    sender: {
+      type: "company",
+      name: "Sender name"
+    },
+    recipient: {
+      type: "person",
+      name: "Recipient name"
+    },
+    status: {
+      value: "completed"
+    }
+  }
+}, j = {
+  args: {
+    select: {
+      checked: !1
+    }
+  }
+}, q = {
+  args: {
+    selected: !0,
+    select: {
+      checked: !0
+    }
+  }
+}, x = {
+  args: {
+    seenByEndUser: !0
+  }
+}, A = {
+  args: {
+    touchedBy: [
+      {
+        name: "Lars"
+      },
+      {
+        name: "Trine"
+      }
+    ]
+  }
+}, E = {
+  args: {
+    status: {
+      value: "draft"
+    }
+  }
+}, M = {
+  args: {
+    status: {
+      value: "sent"
+    }
+  }
+}, U = {
+  args: {
+    status: {
+      value: "requires-attention"
+    }
+  }
+}, w = {
+  args: {
+    status: {
+      value: "in-progress"
+    }
+  }
+}, O = {
+  args: {
+    status: {
+      value: "completed"
+    }
+  }
+}, P = {
+  args: {
+    grouped: !0
+  }
+}, R = {
+  args: {
+    title: "Long summary",
+    summary: `Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.
+
+Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.`
+  }
+}, F = {
+  args: {
+    title: "Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.",
+    summary: "Short summary."
+  }
+}, G = (r) => {
+  var p;
+  const [t, h] = f({
+    1: {
+      id: "1",
+      title: "Item 1",
+      selected: !0
+    },
+    2: {
+      id: "2",
+      title: "Item 2",
+      selected: !1
+    },
+    3: {
+      id: "3",
+      title: "Item 2",
+      selected: !1
+    }
+  }), m = ({ id: e }) => {
+    h((a) => ({
+      ...a,
+      [e]: {
+        ...a[e],
+        selected: !a[e].selected
+      }
+    }));
+  };
+  return /* @__PURE__ */ s(d, { children: (p = Object.values(t)) == null ? void 0 : p.map((e) => /* @__PURE__ */ n(o, { children: [
+    /* @__PURE__ */ s(
+      l,
+      {
+        ...r,
+        title: e.title,
+        onClick: e.selected ? () => m(e) : null,
+        selected: e.selected,
+        select: { checked: e == null ? void 0 : e.selected, onChange: () => m(e) }
+      }
+    ),
+    /* @__PURE__ */ n(u, { children: [
+      "selected:",
+      e.selected ? "true" : "false"
+    ] })
+  ] }, e == null ? void 0 : e.id)) });
+}, K = (r) => /* @__PURE__ */ s(d, { children: c == null ? void 0 : c.map((t) => /* @__PURE__ */ n(o, { children: [
+  /* @__PURE__ */ s(l, { ...r, status: t }),
+  /* @__PURE__ */ s(u, { children: t == null ? void 0 : t.value })
+] }, t == null ? void 0 : t.value)) }), V = (r) => /* @__PURE__ */ s(d, { children: i == null ? void 0 : i.map((t) => /* @__PURE__ */ n(o, { children: [
+  /* @__PURE__ */ s(l, { ...r, size: t }),
+  /* @__PURE__ */ s(u, { children: t })
+] }, t)) });
+export {
+  O as Completed,
+  E as Draft,
+  P as GroupedView,
+  w as InProgress,
+  R as LongSummary,
+  F as LongTitle,
+  U as RequiresAttention,
+  G as SelectableSelected,
+  M as Sent,
+  V as Sizes,
+  K as Statuses,
+  A as TouchedBy,
+  T as default,
+  x as seenByEndUser,
+  j as selectable,
+  q as selected
+};

package/dist/components/Dialog/DialogListItemBase.js

@@ -0,0 +1,24 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { DialogSelect as _ } from "./DialogSelect.js";
+import '../../assets/DialogListItemBase.css';const d = "_item_1ate4_1", k = "_link_1ate4_13", p = "_select_1ate4_23", t = {
+  item: d,
+  link: k,
+  select: p
+}, b = ({
+  as: i = "a",
+  size: e,
+  href: l,
+  select: s,
+  selected: c,
+  children: n,
+  onClick: o
+}) => {
+  const m = i || "button";
+  return /* @__PURE__ */ r("article", { className: t.item, "data-size": e, "aria-selected": c, children: [
+    /* @__PURE__ */ a(m, { className: t.link, "data-size": e, href: l, onClick: o, tabIndex: 0, children: n }),
+    s && /* @__PURE__ */ a(_, { className: t.select, ...s })
+  ] });
+};
+export {
+  b as DialogListItemBase
+};

package/dist/components/Dialog/DialogMetadata.js

@@ -0,0 +1,26 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { MetaBase as x } from "../Meta/MetaBase.js";
+import { MetaItem as l } from "../Meta/MetaItem.js";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { MetaTimestamp as p } from "../Meta/MetaTimestamp.js";
+import { DialogSeenBy as f } from "./DialogSeenBy.js";
+import { DialogStatus as n } from "./DialogStatus.js";
+const k = ({
+  status: r,
+  updatedAt: o,
+  updatedAtLabel: a,
+  dueAt: e,
+  dueAtLabel: m,
+  seenBy: s,
+  attachmentsCount: t = 0
+}) => /* @__PURE__ */ c(x, { size: "xs", children: [
+  r && /* @__PURE__ */ i(n, { size: "xs", ...r }),
+  o && /* @__PURE__ */ i(p, { datetime: o, size: "xs", children: a }),
+  e && m && /* @__PURE__ */ i(p, { datetime: e, size: "xs", icon: "clock-dashed", children: m }),
+  s && /* @__PURE__ */ i(f, { size: "xs", ...s }),
+  t > 0 && /* @__PURE__ */ i(l, { size: "xs", icon: "paperclip", children: t })
+] });
+export {
+  k as DialogMetadata
+};

package/dist/components/Dialog/DialogMetadata.stories.js

@@ -0,0 +1,68 @@
+import { DialogMetadata as e } from "./DialogMetadata.js";
+const a = {
+  title: "Dialog/DialogMetadata",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    updatedAt: "1999-05-26",
+    updatedAtLabel: "26. mai 1999"
+  }
+}, s = {
+  args: {
+    status: {
+      value: "draft",
+      label: "Utkast"
+    },
+    updatedAtLabel: "Ole Gunnar Solskjær, 26. mai 1999"
+  }
+}, n = {
+  args: {
+    status: {
+      value: "sent",
+      label: "Sendt"
+    }
+  }
+}, r = {
+  args: {
+    status: {
+      value: "requires-attention",
+      label: "Krever handling"
+    },
+    attachmentsCount: 3,
+    dueAt: "2000-01-01",
+    dueAtLabel: "Frist: 1. januar 2001"
+  }
+}, l = {
+  args: {
+    status: {
+      value: "in-progress",
+      label: "Under arbeid"
+    },
+    seenBy: {
+      seenByEndUser: !1,
+      seenByOthersCount: 4,
+      label: "Sett av 4"
+    }
+  }
+}, u = {
+  args: {
+    status: {
+      value: "completed",
+      label: "Avsluttet"
+    },
+    seenBy: {
+      seenByEndUser: !0,
+      seenByOthersCount: 0,
+      label: "Sett av deg"
+    }
+  }
+};
+export {
+  u as CompletedSeenByEndUser,
+  s as Draft,
+  l as InProgressSeenByOthers,
+  r as RequiresAttentionAndDueDate,
+  n as Sent,
+  a as default
+};

package/dist/components/Dialog/DialogNav.js

@@ -0,0 +1,33 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { Button as l } from "../Button/Button.js";
+import { ContextMenu as c } from "../ContextMenu/ContextMenu.js";
+import { MetaTimestamp as p } from "../Meta/MetaTimestamp.js";
+import { DialogStatus as v } from "./DialogStatus.js";
+import { DialogTouchedBy as f } from "./DialogTouchedBy.js";
+import '../../assets/DialogNav.css';const x = "_nav_678a5_1", _ = "_action_678a5_8", s = {
+  nav: x,
+  action: _
+}, T = ({
+  backButton: o = {
+    as: "a",
+    label: "Back"
+  },
+  status: a,
+  dueAt: i,
+  dueAtLabel: e,
+  touchedBy: t,
+  menu: m
+}) => /* @__PURE__ */ n("nav", { className: s.nav, children: [
+  /* @__PURE__ */ r(l, { ...o, variant: "text", color: "secondary", icon: "arrow-left", reverse: !0, children: (o == null ? void 0 : o.label) || "Back" }),
+  /* @__PURE__ */ n("div", { className: s.action, children: [
+    i && e && /* @__PURE__ */ r(p, { datetime: i, size: "xs", children: e }),
+    a && /* @__PURE__ */ r(v, { ...a }),
+    t && /* @__PURE__ */ r(f, { touchedBy: t }),
+    m && /* @__PURE__ */ r(c, { ...m })
+  ] })
+] });
+export {
+  T as DialogNav
+};

package/dist/components/Dialog/DialogNav.stories.js

@@ -0,0 +1,81 @@
+import { DialogNav as t } from "./DialogNav.js";
+const e = {
+  title: "Dialog/DialogNav",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, s = {
+  args: {
+    status: {
+      value: "draft",
+      label: "Utkast"
+    }
+  }
+}, o = {
+  args: {
+    status: {
+      value: "draft",
+      label: "Utkast"
+    }
+  }
+}, l = {
+  args: {
+    status: {
+      value: "requires-attention",
+      label: "Utkast"
+    }
+  }
+}, r = {
+  args: {
+    status: {
+      value: "in-progress",
+      label: "Utkast"
+    }
+  }
+}, i = {
+  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"
+        }
+      ]
+    }
+  }
+};
+export {
+  i as ContextMenu,
+  s as Draft,
+  r as InProgress,
+  l as RequiresAttention,
+  o as Sent,
+  e as default
+};