@altinn/altinn-components 0.6.1 → 0.6.3

package/dist/components/Icon/index.js

@@ -0,0 +1,14 @@
+import { Icon as e } from "./Icon.js";
+import { SvgIcon as p } from "./SvgIcon.js";
+import { CheckboxIcon as f } from "./CheckboxIcon.js";
+import { RadioIcon as n } from "./RadioIcon.js";
+import { ProgressIcon as I } from "./ProgressIcon.js";
+import { iconsMap as a } from "./iconsMap.js";
+export {
+  f as CheckboxIcon,
+  e as Icon,
+  I as ProgressIcon,
+  n as RadioIcon,
+  p as SvgIcon,
+  a as iconsMap
+};

package/dist/components/Layout/Layout.js

@@ -0,0 +1,29 @@
+import { jsxs as r, jsx as m } from "react/jsx-runtime";
+import { LayoutBase as y } from "./LayoutBase.js";
+import { LayoutBody as L } from "./LayoutBody.js";
+import { LayoutContent as c } from "./LayoutContent.js";
+import { LayoutSidebar as i } from "./LayoutSidebar.js";
+import { Footer as x } from "../Footer/Footer.js";
+import { Header as j } from "../Header/Header.js";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import { useRootContext as B } from "../RootProvider/RootProvider.js";
+import { Menu as C } from "../Menu/Menu.js";
+const z = ({ theme: f = "global", header: p, footer: u, sidebar: o = {}, content: t = {}, children: n }) => {
+  const { currentId: e } = B(), { menu: h, ...l } = o;
+  return /* @__PURE__ */ r(y, { theme: f, currentId: e, children: [
+    p && /* @__PURE__ */ m(j, { ...p }),
+    /* @__PURE__ */ r(L, { children: [
+      o && /* @__PURE__ */ r(i, { hidden: o == null ? void 0 : o.hidden, theme: o == null ? void 0 : o.theme, ...l, children: [
+        h && /* @__PURE__ */ m(C, { ...h }),
+        o == null ? void 0 : o.children
+      ] }),
+      /* @__PURE__ */ m(c, { theme: t == null ? void 0 : t.theme, children: n })
+    ] }),
+    u && /* @__PURE__ */ m(x, { ...u })
+  ] });
+};
+export {
+  z as Layout
+};

package/dist/components/Layout/Layout.stories.js

@@ -0,0 +1,265 @@
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { useState as g, createElement as I } from "react";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "../RootProvider/RootProvider.js";
+import { DialogListItem as y } from "../Dialog/DialogListItem.js";
+import { ListBase as A } from "../List/ListBase.js";
+import { Layout as k } from "./Layout.js";
+import { ActionHeader as v } from "../LayoutAction/ActionHeader.js";
+import { ActionFooter as w } from "../LayoutAction/ActionFooter.js";
+import { ActionMenu as C } from "../LayoutAction/ActionMenu.js";
+import { Snackbar as L } from "../Snackbar/Snackbar.js";
+const m = {
+  search: {
+    name: "search",
+    placeholder: "Søk i Altinn"
+  },
+  currentAccount: {
+    id: "party:aurora",
+    type: "person",
+    name: "Aurora Mikalsen"
+  },
+  menu: {
+    accounts: [
+      {
+        id: "party:aurora",
+        type: "person",
+        name: "Aurora Mikalsen"
+      }
+    ]
+  }
+}, M = {
+  address: "Postboks 1382 Vika, 0114 Oslo.",
+  menu: {
+    items: [
+      {
+        id: "1",
+        href: "#",
+        title: "Om Altinn"
+      },
+      {
+        id: "2",
+        href: "#",
+        title: "Driftsmeldinger"
+      },
+      {
+        id: "3",
+        href: "#",
+        title: "Personvern"
+      },
+      {
+        id: "4",
+        href: "#",
+        title: "Tilgjengelighet"
+      }
+    ]
+  }
+}, f = {
+  groups: {},
+  items: [
+    {
+      id: "1",
+      groupId: 1,
+      size: "lg",
+      icon: "inbox",
+      title: "Innboks",
+      color: "strong"
+    },
+    {
+      id: "2",
+      groupId: 2,
+      icon: "doc-pencil",
+      title: "Utkast"
+    },
+    {
+      id: "3",
+      group: 2,
+      icon: "file-checkmark",
+      selected: !0,
+      title: "Sendt"
+    },
+    {
+      id: "4",
+      groupId: 3,
+      icon: "bookmark",
+      title: "Lagrede søk"
+    },
+    {
+      id: "5",
+      groupId: 4,
+      icon: "archive",
+      title: "Arkivert"
+    },
+    {
+      id: "6",
+      groupId: 4,
+      disabled: !0,
+      icon: "trash",
+      title: "Papirkurv"
+    }
+  ]
+}, H = {
+  title: "Layout/Layout",
+  component: k,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen"
+  },
+  args: {
+    theme: "person",
+    header: m,
+    footer: M,
+    sidebar: {
+      menu: f
+    }
+  }
+}, Q = {
+  args: {}
+}, U = (a) => {
+  const [r, s] = g(""), h = (t) => {
+    s(t.target.value);
+  }, p = [
+    {
+      groupId: "1",
+      id: "inbox",
+      href: "#",
+      label: r ? () => /* @__PURE__ */ u("span", { children: [
+        /* @__PURE__ */ n("mark", { children: r }),
+        " i innboksen"
+      ] }) : "Alt i innboksen"
+    },
+    {
+      groupId: "1",
+      id: "global",
+      href: "#",
+      label: r ? () => /* @__PURE__ */ u("span", { children: [
+        /* @__PURE__ */ n("mark", { children: r }),
+        " i hele Altinn"
+      ] }) : "Alt i hele Altinn"
+    }
+  ], c = r ? [
+    {
+      groupId: "2",
+      href: "http://www.altinn.no",
+      label: "Skattemelding 2024"
+    },
+    {
+      groupId: "2",
+      href: "http://www.altinn.no",
+      label: "Skattemelding 2025"
+    }
+  ].filter((t) => t.label.toLowerCase().includes((r ?? "").toLowerCase())) : [], d = {
+    groups: {
+      2: {
+        title: `${c.length} treff i innboksen`
+      }
+    },
+    items: [...p, ...c]
+  };
+  return /* @__PURE__ */ n(
+    k,
+    {
+      ...a,
+      header: {
+        ...a.header,
+        search: {
+          ...a.header.search,
+          value: r,
+          onChange: h,
+          onClear: () => s(""),
+          autocomplete: d
+        }
+      }
+    }
+  );
+}, V = (a) => {
+  const [r, s] = g([]), [h, p] = g({
+    1: {
+      id: "1",
+      title: "Item 1",
+      selected: !0
+    },
+    2: {
+      id: "2",
+      title: "Item 2",
+      selected: !1
+    },
+    3: {
+      id: "3",
+      title: "Item 2",
+      selected: !1
+    }
+  }), c = [
+    {
+      id: "1",
+      icon: "arrow-redo",
+      title: "Del og gi tilgang"
+    },
+    {
+      id: "2",
+      icon: "eye",
+      title: "Marker som lest"
+    },
+    {
+      id: "3",
+      icon: "archive",
+      title: "Flytt til arkiv"
+    },
+    {
+      id: "4",
+      icon: "trash",
+      title: "Flytt til papirkurv"
+    }
+  ].map((e) => ({
+    ...e,
+    as: "button",
+    onClick: () => s((o) => [
+      ...o,
+      {
+        message: "Snack me"
+      }
+    ])
+  })), d = ({ id: e }) => {
+    p((o) => ({
+      ...o,
+      [e]: {
+        ...o[e],
+        selected: !o[e].selected
+      }
+    }));
+  }, t = Object.values(h), l = t == null ? void 0 : t.filter((e) => e.selected), i = (l == null ? void 0 : l.length) > 0, b = (l == null ? void 0 : l.length) + " av " + (t == null ? void 0 : t.length) + " valgt";
+  return /* @__PURE__ */ u(
+    k,
+    {
+      theme: i ? "neutral" : "company",
+      header: { ...m, search: i ? null : m.search },
+      sidebar: { hidden: i, menu: f },
+      content: { theme: "neutral" },
+      children: [
+        /* @__PURE__ */ n(v, { title: b, hidden: !i }),
+        /* @__PURE__ */ n(A, { children: t == null ? void 0 : t.map((e) => /* @__PURE__ */ I(
+          y,
+          {
+            ...e,
+            key: e == null ? void 0 : e.id,
+            title: e.title,
+            onClick: i ? () => d(e) : void 0,
+            selected: e.selected,
+            select: { checked: e == null ? void 0 : e.selected, onChange: () => d(e) }
+          }
+        )) }),
+        /* @__PURE__ */ u(w, { children: [
+          i && /* @__PURE__ */ n(C, { items: c }),
+          r.length > 0 && (r == null ? void 0 : r.map((e, o) => /* @__PURE__ */ n(L, { ...e }, o)))
+        ] })
+      ]
+    }
+  );
+};
+export {
+  U as ControlledStateSearch,
+  Q as Default,
+  V as InboxBulkMode,
+  H as default
+};

package/dist/components/Layout/LayoutBase.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+import '../../assets/LayoutBase.css';const o = "_base_1401f_1", r = {
+  base: o
+}, n = ({ currentId: s, theme: a, children: e }) => /* @__PURE__ */ t("div", { className: r.base, "data-theme": a, "data-current-id": s, children: e });
+export {
+  n as LayoutBase
+};

package/dist/components/Layout/LayoutBase.stories.js

@@ -0,0 +1,14 @@
+import { LayoutBase as t } from "./LayoutBase.js";
+const o = {
+  title: "Layout/LayoutBase",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, e = {
+  args: {}
+};
+export {
+  e as Default,
+  o as default
+};

package/dist/components/Layout/LayoutBody.js

@@ -0,0 +1,7 @@
+import { jsx as s } from "react/jsx-runtime";
+import '../../assets/LayoutBody.css';const d = "_body_3cqh5_1", y = {
+  body: d
+}, a = ({ theme: o, children: t }) => /* @__PURE__ */ s("div", { className: y.body, "data-theme": o, children: t });
+export {
+  a as LayoutBody
+};

package/dist/components/Layout/LayoutBody.stories.js

@@ -0,0 +1,14 @@
+import { LayoutBody as t } from "./LayoutBody.js";
+const a = {
+  title: "Layout/LayoutBody",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, e = {
+  args: {}
+};
+export {
+  e as Default,
+  a as default
+};

package/dist/components/Layout/LayoutContent.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import '../../assets/LayoutContent.css';const e = "_content_1wkbr_1", c = {
+  content: e
+}, a = ({ theme: t, children: n }) => /* @__PURE__ */ o("main", { className: c.content, "data-theme": t, children: n });
+export {
+  a as LayoutContent
+};

package/dist/components/Layout/LayoutContent.stories.js

@@ -0,0 +1,14 @@
+import { LayoutContent as t } from "./LayoutContent.js";
+const a = {
+  title: "Layout/LayoutContent",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, e = {
+  args: {}
+};
+export {
+  e as Default,
+  a as default
+};

package/dist/components/Layout/LayoutSidebar.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+import '../../assets/LayoutSidebar.css';const t = "_sidebar_zsh57_1", d = {
+  sidebar: t
+}, o = ({ theme: s, hidden: a = !1, children: e }) => /* @__PURE__ */ r("aside", { className: d.sidebar, "data-theme": s, "aria-hidden": a, children: e });
+export {
+  o as LayoutSidebar
+};

package/dist/components/Layout/LayoutSidebar.stories.js

@@ -0,0 +1,14 @@
+import { LayoutSidebar as t } from "./LayoutSidebar.js";
+const o = {
+  title: "Layout/LayoutSidebar",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, e = {
+  args: {}
+};
+export {
+  e as Default,
+  o as default
+};

package/dist/components/Layout/index.js

@@ -0,0 +1,12 @@
+import { LayoutBase as r } from "./LayoutBase.js";
+import { LayoutBody as a } from "./LayoutBody.js";
+import { LayoutContent as f } from "./LayoutContent.js";
+import { LayoutSidebar as p } from "./LayoutSidebar.js";
+import { Layout as x } from "./Layout.js";
+export {
+  x as Layout,
+  r as LayoutBase,
+  a as LayoutBody,
+  f as LayoutContent,
+  p as LayoutSidebar
+};

package/dist/components/LayoutAction/ActionFooter.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import '../../assets/ActionFooter.css';const r = "_footer_t35ns_1", s = {
+  footer: r
+}, n = ({ hidden: o = !1, children: t }) => /* @__PURE__ */ e("footer", { className: s.footer, "aria-hidden": o, children: t });
+export {
+  n as ActionFooter
+};

package/dist/components/LayoutAction/ActionFooter.stories.js

@@ -0,0 +1,61 @@
+import { jsx as e, jsxs as o, Fragment as r } from "react/jsx-runtime";
+import { Snackbar as t } from "../Snackbar/Snackbar.js";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { ActionFooter as s } from "./ActionFooter.js";
+import { ActionMenu as a } from "./ActionMenu.js";
+const i = {
+  items: [
+    {
+      id: "1",
+      icon: "arrow-redo",
+      title: "Del og gi tilgang"
+    },
+    {
+      id: "2",
+      icon: "eye",
+      title: "Marker som lest"
+    },
+    {
+      id: "3",
+      icon: "archive",
+      title: "Flytt til arkiv"
+    },
+    {
+      id: "4",
+      icon: "trash",
+      title: "Flytt til papirkurv"
+    }
+  ]
+}, p = {
+  title: "LayoutAction/ActionFooter",
+  component: s,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, h = {
+  args: {
+    children: /* @__PURE__ */ e(a, { ...i })
+  }
+}, k = {
+  args: {
+    children: /* @__PURE__ */ o(r, { children: [
+      /* @__PURE__ */ e(t, { message: "A message" }),
+      /* @__PURE__ */ e(t, { message: "Some other message" }),
+      /* @__PURE__ */ e(t, { message: "Another message" })
+    ] })
+  }
+}, u = {
+  args: {
+    children: /* @__PURE__ */ o(r, { children: [
+      /* @__PURE__ */ e(t, { message: "Snack 1" }),
+      /* @__PURE__ */ e(a, { ...i, theme: "global-dark" })
+    ] })
+  }
+};
+export {
+  h as Menu,
+  u as MenuAndSnackbar,
+  k as Snackbars,
+  p as default
+};

package/dist/components/LayoutAction/ActionHeader.js

@@ -0,0 +1,16 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { IconButton as d } from "../Button/IconButton.js";
+import '../../assets/ActionHeader.css';const s = "_header_ldd78_1", l = "_title_ldd78_34", c = "_button_ldd78_39", m = "_icon_ldd78_53", t = {
+  header: s,
+  title: l,
+  button: c,
+  icon: m
+}, b = ({ hidden: o = !1, title: n, dismissable: a = !0, onDismiss: i }) => /* @__PURE__ */ r("header", { className: t.header, "aria-hidden": o, "data-theme": "global-dark", children: [
+  /* @__PURE__ */ e("h2", { className: t.title, children: n }),
+  a && /* @__PURE__ */ e(d, { icon: "x-mark", variant: "outline", onClick: i, className: t.dismiss })
+] });
+export {
+  b as ActionHeader
+};

package/dist/components/LayoutAction/ActionHeader.stories.js

@@ -0,0 +1,16 @@
+import { ActionHeader as t } from "./ActionHeader.js";
+const a = {
+  title: "LayoutAction/ActionHeader",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, o = {
+  args: {
+    title: "Title"
+  }
+};
+export {
+  o as Default,
+  a as default
+};

package/dist/components/LayoutAction/ActionMenu.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import { MenuItem as n } from "../Menu/MenuItem.js";
+import "../RootProvider/RootProvider.js";
+import { MenuBase as o } from "../Menu/MenuBase.js";
+import '../../assets/ActionMenu.css';const s = "_menu_12gbo_1", l = "_list_12gbo_14", e = {
+  menu: s,
+  list: l
+}, f = ({ theme: m = "inherit", items: r = [] }) => /* @__PURE__ */ t(o, { theme: m, className: e.menu, children: /* @__PURE__ */ t("ul", { className: e.list, children: r.map((i) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(n, { ...i, className: e.item }) }, i.id)) }) });
+export {
+  f as ActionMenu
+};

package/dist/components/LayoutAction/ActionMenu.stories.js

@@ -0,0 +1,36 @@
+import { ActionMenu as t } from "./ActionMenu.js";
+const e = {
+  title: "LayoutAction/ActionMenu",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    theme: "global-dark",
+    items: [
+      {
+        id: "1",
+        icon: "arrow-redo",
+        title: "Del og gi tilgang"
+      },
+      {
+        id: "2",
+        icon: "eye",
+        title: "Marker som lest"
+      },
+      {
+        id: "3",
+        icon: "archive",
+        title: "Flytt til arkiv"
+      },
+      {
+        id: "4",
+        icon: "trash",
+        title: "Flytt til papirkurv"
+      }
+    ]
+  }
+}, o = {};
+export {
+  o as Default,
+  e as default
+};

package/dist/components/LayoutAction/index.js

@@ -0,0 +1,8 @@
+import { ActionHeader as e } from "./ActionHeader.js";
+import { ActionFooter as n } from "./ActionFooter.js";
+import { ActionMenu as f } from "./ActionMenu.js";
+export {
+  n as ActionFooter,
+  e as ActionHeader,
+  f as ActionMenu
+};

package/dist/components/List/List.js

@@ -0,0 +1,11 @@
+import { jsx as p } from "react/jsx-runtime";
+import { createElement as s } from "react";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "../RootProvider/RootProvider.js";
+import { ListItem as n } from "./ListItem.js";
+import { ListBase as f } from "./ListBase.js";
+const h = ({ theme: r, size: t = "md", spacing: m = "md", items: o = [] }) => /* @__PURE__ */ p(f, { theme: r, spacing: m, children: o.map((e, i) => /* @__PURE__ */ s(n, { ...e, size: t, key: "item" + i })) });
+export {
+  h as List
+};

package/dist/components/List/List.stories.js

@@ -0,0 +1,40 @@
+import "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import { List as t } from "./List.js";
+const m = {
+  title: "List/List",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    items: [
+      {
+        id: "1",
+        title: "Title",
+        description: "Description",
+        href: "#"
+      },
+      {
+        id: "2",
+        title: "Title",
+        description: "Description",
+        href: "#"
+      },
+      {
+        id: "3",
+        title: "Title",
+        description: "Description",
+        href: "#"
+      }
+    ]
+  }
+}, a = {
+  args: {}
+};
+export {
+  a as Default,
+  m as default
+};

package/dist/components/List/ListBase.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import '../../assets/ListBase.css';const a = "_list_18nep_1", n = {
+  list: a
+}, o = ({ theme: t = "inherit", spacing: s = "md", children: i }) => /* @__PURE__ */ e("div", { className: n.list, "data-theme": t, "data-spacing": s, children: i });
+export {
+  o as ListBase
+};

package/dist/components/List/ListItem.js

@@ -0,0 +1,25 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { ListItemBase as x } from "./ListItemBase.js";
+import { ListItemLabel as b } from "./ListItemLabel.js";
+import { ListItemMedia as j } from "./ListItemMedia.js";
+const M = ({
+  as: e = "a",
+  color: m,
+  children: i,
+  selected: s,
+  disabled: l,
+  size: t = "sm",
+  icon: o,
+  avatar: a,
+  avatarGroup: p,
+  badge: L,
+  title: d,
+  description: f,
+  ...I
+}) => /* @__PURE__ */ n(x, { as: e, size: t, badge: L, color: m, selected: s, ...I, children: [
+  /* @__PURE__ */ r(j, { color: m, size: t, icon: o, avatar: a, avatarGroup: p }),
+  /* @__PURE__ */ r(b, { title: d, description: f, size: t, children: i })
+] });
+export {
+  M as ListItem
+};