@altinn/altinn-components 0.6.1 → 0.6.3

package/dist/components/Menu/MenuItemBase.js

@@ -0,0 +1,61 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { c as N } from "../../index-L8X2o7IH.js";
+import { Badge as u } from "../Badge/Badge.js";
+import { Icon as T } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import '../../assets/MenuItemBase.css';const j = "_item_1qa8m_1", B = "_content_1qa8m_31", g = "_action_1qa8m_39", w = "_linkText_1qa8m_46", y = "_linkIcon_1qa8m_51", z = "_media_1qa8m_71", n = {
+  item: j,
+  content: B,
+  action: g,
+  linkText: w,
+  linkIcon: y,
+  media: z
+}, E = ({
+  as: r,
+  onClick: l,
+  size: _,
+  color: d,
+  linkIcon: o,
+  linkText: p,
+  badge: c,
+  tabIndex: f = 0,
+  active: x = !1,
+  collapsible: i = !1,
+  expanded: s = !1,
+  selected: h = !1,
+  disabled: m = !1,
+  className: k,
+  children: I,
+  ...q
+}) => {
+  const v = r || "a", e = i && s ? "chevron-up" : i ? "chevron-down" : o && "chevron-right";
+  return /* @__PURE__ */ a(
+    v,
+    {
+      role: "menuitem",
+      tabIndex: m ? "-1" : f ?? 0,
+      "data-size": _,
+      "data-color": d,
+      "data-active": x,
+      "aria-expanded": s,
+      "aria-disabled": m,
+      "aria-selected": h,
+      onClick: l,
+      className: N(n.item, k),
+      ...q,
+      children: [
+        /* @__PURE__ */ a("div", { className: n.content, children: [
+          I,
+          c && /* @__PURE__ */ t(u, { ...c })
+        ] }),
+        e && /* @__PURE__ */ a("div", { className: n.action, children: [
+          /* @__PURE__ */ t("span", { className: n.linkText, children: p }),
+          e && /* @__PURE__ */ t(T, { name: e, className: n.linkIcon })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  E as MenuItemBase
+};

package/dist/components/Menu/MenuItemLabel.js

@@ -0,0 +1,12 @@
+import { jsx as t, jsxs as r, Fragment as c } from "react/jsx-runtime";
+import '../../assets/MenuItemLabel.css';const o = "_label_1rsak_1", d = "_title_1rsak_7", _ = "_description_1rsak_29", e = {
+  label: o,
+  title: d,
+  description: _
+}, p = ({ size: s = "sm", label: l, title: n, description: i, children: a }) => /* @__PURE__ */ t("span", { className: e.label, "data-size": s, children: a || /* @__PURE__ */ r(c, { children: [
+  /* @__PURE__ */ t("strong", { className: e.title, "data-size": s, children: n || l }),
+  /* @__PURE__ */ t("span", { className: e.description, "data-size": s, children: i })
+] }) });
+export {
+  p as MenuItemLabel
+};

package/dist/components/Menu/MenuItemMedia.js

@@ -0,0 +1,29 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { Avatar as l } from "../Avatar/Avatar.js";
+import { AvatarGroup as c } from "../Avatar/AvatarGroup.js";
+import { Icon as u } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import '../../assets/MenuItemMedia.css';const f = "_media_7n7uy_1", _ = "_icon_7n7uy_16", e = {
+  media: f,
+  icon: _
+}, m = {
+  avatar: {
+    sm: "sm",
+    md: "md",
+    lg: "lg"
+  },
+  avatarGroup: {
+    sm: "xs",
+    md: "sm",
+    lg: "md"
+  }
+}, A = ({ size: o = "sm", color: n, icon: t, avatar: s, avatarGroup: r, children: i }) => !t && !s && !r && !i ? !1 : /* @__PURE__ */ d("div", { className: e.media, "data-size": o, "data-color": t ? n : null, children: [
+  t && /* @__PURE__ */ a(u, { name: t, variant: n === "strong" ? "solid" : "outline", className: e.icon }),
+  s && /* @__PURE__ */ a(l, { ...s, size: m == null ? void 0 : m.avatar[o] }),
+  r && /* @__PURE__ */ a(c, { ...r, size: m == null ? void 0 : m.avatarGroup[o] }),
+  i
+] });
+export {
+  A as MenuItemMedia
+};

package/dist/components/Menu/MenuItems.js

@@ -0,0 +1,63 @@
+import { jsx as a, jsxs as i, Fragment as z } from "react/jsx-runtime";
+import { Fragment as L } from "react";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "../RootProvider/RootProvider.js";
+import { MenuItem as k } from "./MenuItem.js";
+import { MenuHeader as B } from "./MenuHeader.js";
+import { MenuList as E, MenuListItem as m } from "./MenuBase.js";
+import { useMenu as G } from "../../hooks/useMenu.js";
+const H = ({
+  level: r = 0,
+  expanded: I,
+  items: b,
+  groups: c = {},
+  defaultItemColor: l,
+  defaultItemSize: o
+}) => {
+  const { menu: f } = G({
+    items: b,
+    groups: c,
+    groupByKey: "groupId",
+    keyboardEvents: !1
+  });
+  return /* @__PURE__ */ a(E, { expanded: I, children: f.map((t, d) => {
+    const n = (t == null ? void 0 : t.props) || {}, { title: x, divider: v = !0 } = n, y = f[d + 1];
+    return /* @__PURE__ */ i(L, { children: [
+      (r > 0 || d) && v ? /* @__PURE__ */ a(m, { role: "separator" }) : "",
+      x && /* @__PURE__ */ a(m, { children: /* @__PURE__ */ a(B, { title: x }) }),
+      t == null ? void 0 : t.items.map((M, h) => {
+        const { active: F } = M, { groupId: K, ...e } = M.props || {}, { expanded: s } = e, j = t == null ? void 0 : t.items[h + 1];
+        return /* @__PURE__ */ i(m, { role: "presentation", expanded: s, children: [
+          /* @__PURE__ */ a(
+            k,
+            {
+              ...e,
+              color: (e == null ? void 0 : e.color) || (n == null ? void 0 : n.defaultItemColor) || l,
+              size: (e == null ? void 0 : e.size) || (n == null ? void 0 : n.defaultItemSize) || o,
+              active: F,
+              tabIndex: e != null && e.disabled ? -1 : 0
+            }
+          ),
+          s && (e == null ? void 0 : e.items) && /* @__PURE__ */ i(z, { children: [
+            /* @__PURE__ */ a(
+              H,
+              {
+                expanded: s,
+                level: r + 1,
+                items: e == null ? void 0 : e.items,
+                groups: c,
+                defaultItemColor: l,
+                defaultItemSize: o
+              }
+            ),
+            (y || j) && /* @__PURE__ */ a(m, { role: "separator" })
+          ] })
+        ] }, h);
+      })
+    ] }, d);
+  }) });
+};
+export {
+  H as MenuItems
+};

package/dist/components/Menu/MenuItems.stories.js

@@ -0,0 +1,424 @@
+import { MenuItems as r } from "./MenuItems.js";
+const o = {
+  title: "Menu/MenuItems",
+  component: r,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, a = {
+  args: {
+    groups: {
+      shortcuts: {
+        title: "Snarveier",
+        defaultItemColor: "default"
+      }
+    },
+    defaultItemColor: "subtle",
+    items: [
+      {
+        id: "innboks",
+        groupId: "1",
+        size: "lg",
+        icon: "inbox",
+        title: "Innboks",
+        color: "strong",
+        badge: { color: "alert", label: "4" }
+      },
+      {
+        id: "utkast",
+        groupId: "2",
+        icon: "doc-pencil",
+        title: "Utkast",
+        badge: {
+          label: "3"
+        }
+      },
+      {
+        id: "sendt",
+        groupId: "2",
+        icon: "file-checkmark",
+        selected: !0,
+        title: "Sendt",
+        badge: {
+          label: "2"
+        }
+      },
+      {
+        id: "lagret",
+        groupId: "3",
+        icon: "bookmark",
+        title: "Lagrede søk",
+        badge: {
+          label: "5"
+        }
+      },
+      {
+        id: "arkivert",
+        groupId: "4",
+        icon: "archive",
+        title: "Arkivert",
+        badge: {
+          label: "100+"
+        }
+      },
+      {
+        id: "papirkurv",
+        groupId: "4",
+        disabled: !0,
+        icon: "trash",
+        title: "Papirkurv",
+        badge: {
+          label: "45"
+        }
+      },
+      {
+        id: "users",
+        groupId: "shortcuts",
+        icon: "person-group",
+        title: "Brukere"
+      },
+      {
+        id: "settings",
+        groupId: "shortcuts",
+        icon: "cog",
+        title: "Innstillinger"
+      }
+    ]
+  }
+}, l = {
+  args: {
+    groups: {},
+    defaultItemColor: "subtle",
+    items: [
+      {
+        id: "person",
+        groupId: "1",
+        size: "lg",
+        avatar: {
+          type: "person",
+          name: "Erik Huseklepp"
+        },
+        title: "Erik Huseklepp"
+      },
+      {
+        id: "profil",
+        groupId: "2",
+        icon: "person-circle",
+        title: "Kontaktinformasjon"
+      },
+      {
+        id: "varslinger",
+        groupId: "2",
+        icon: "bell",
+        title: "Varslingsinnstillinger"
+      },
+      {
+        id: "bookmarks",
+        groupId: "3",
+        icon: "bookmark",
+        title: "Favoritter"
+      },
+      {
+        id: "grupper",
+        groupId: "3",
+        icon: "hexagon-grid",
+        title: "Grupper"
+      },
+      {
+        id: "logg",
+        groupId: "4",
+        icon: "clock-dashed",
+        title: "Aktivitetslogg"
+      }
+    ]
+  }
+}, n = {
+  args: {
+    groups: {},
+    defaultItemColor: "subtle",
+    items: [
+      {
+        id: "company",
+        groupId: "1",
+        size: "lg",
+        avatar: {
+          type: "company",
+          name: "Bergen Bar"
+        },
+        title: "Bergen Bar"
+      },
+      {
+        id: "profil",
+        groupId: "2",
+        icon: "buildings2",
+        title: "Firmaprofil"
+      },
+      {
+        id: "brukere",
+        groupId: "3",
+        icon: "person-group",
+        title: "Brukere"
+      },
+      {
+        id: "grupper",
+        groupId: "3",
+        icon: "hexagon-grid",
+        title: "Grupper"
+      },
+      {
+        id: "logg",
+        groupId: "4",
+        icon: "clock-dashed",
+        title: "Aktivitetslogg"
+      }
+    ]
+  }
+}, d = {
+  args: {
+    groups: {
+      a1: {
+        title: "Deg selv, favoritter og grupper"
+      },
+      b1: {
+        id: "companies",
+        title: "Andre kontoer"
+      }
+    },
+    items: [
+      {
+        id: "1",
+        groupId: "a1",
+        avatar: {
+          type: "person",
+          name: "Dolly Duck"
+        },
+        title: "Dolly Duck",
+        badge: {
+          label: "15"
+        }
+      },
+      {
+        id: "2",
+        groupId: "a2",
+        avatar: {
+          type: "company",
+          name: "Bergen Bar"
+        },
+        title: "Bergen Bar",
+        badge: {
+          label: "21"
+        }
+      },
+      {
+        id: "3",
+        groupId: "a2",
+        avatar: {
+          type: "company",
+          name: "Sportsklubben Brann"
+        },
+        title: "Sportsklubben Brann",
+        badge: {
+          label: "4"
+        }
+      },
+      {
+        id: "4",
+        groupId: "a3",
+        avatarGroup: {
+          type: "company",
+          items: [
+            {
+              name: "Sportsklubben Brann"
+            },
+            {
+              name: "Bergen Bar"
+            }
+          ]
+        },
+        title: "Alle virksomheter",
+        badge: {
+          label: "45"
+        }
+      },
+      {
+        id: "5",
+        groupId: "b1",
+        avatar: {
+          type: "company",
+          name: "Jensens Laks"
+        },
+        title: "Jensens laks"
+      },
+      {
+        id: "6",
+        groupId: "b1",
+        avatar: {
+          type: "company",
+          name: "Haralds gym"
+        },
+        title: "Haralds gym",
+        badge: {
+          label: "2"
+        }
+      },
+      {
+        id: "7",
+        groupId: "b1",
+        avatar: {
+          type: "company",
+          name: "Trim og tran"
+        },
+        title: "Trim og tran"
+      }
+    ]
+  }
+}, t = {
+  args: {
+    defaultItemColor: "subtle",
+    groups: {
+      settings: {
+        defaultItemColor: "neutral"
+      }
+    },
+    items: [
+      {
+        id: "account",
+        groupId: "account",
+        size: "lg",
+        avatar: {
+          type: "person",
+          name: "Herman Friele"
+        },
+        title: "Herman Friele",
+        description: "Fødselsnr: XX.XX.XXXX"
+      },
+      {
+        id: "innboks",
+        groupId: "apps",
+        size: "lg",
+        icon: "inbox",
+        title: "Innboks",
+        collapsible: !0,
+        items: [
+          {
+            id: "utkast",
+            groupId: "1",
+            icon: "doc-pencil",
+            title: "Utkast"
+          },
+          {
+            id: "sent",
+            groupId: "1",
+            icon: "file-checkmark",
+            selected: !0,
+            title: "Sendt"
+          },
+          {
+            id: "bookmarks",
+            groupId: "3",
+            icon: "bookmark",
+            title: "Lagrede søk"
+          },
+          {
+            id: "arkiv",
+            groupId: "4",
+            icon: "archive",
+            title: "Arkivert"
+          },
+          {
+            id: "trash",
+            groupId: "4",
+            icon: "trash",
+            title: "Papirkurv"
+          }
+        ]
+      },
+      {
+        id: "tilganger",
+        groupId: "apps",
+        size: "lg",
+        icon: "bookmark",
+        title: "Tilganger"
+      },
+      {
+        id: "skjema",
+        groupId: "apps",
+        size: "lg",
+        icon: "menu-grid",
+        title: "Alle skjema"
+      },
+      {
+        id: "settings",
+        groupId: "settings",
+        icon: "cog",
+        title: "Innstillinger"
+      }
+    ]
+  }
+}, s = {
+  args: {
+    ...t.args,
+    items: [...t.args.items].map((e) => e.collapsible ? {
+      ...e,
+      expanded: !0
+    } : e)
+  }
+}, g = {
+  args: {
+    defaultItemColor: "subtle",
+    groups: {
+      "level-1": {
+        divider: !0
+      },
+      "level-2": {
+        divider: !0
+      }
+    },
+    items: [
+      {
+        id: "people",
+        groupId: "level-1",
+        size: "lg",
+        icon: "menu-grid",
+        title: "Alle skjema",
+        expanded: !0,
+        items: [
+          {
+            groupId: "level-2",
+            name: "tema",
+            icon: "teddy-bear",
+            title: "Tema",
+            expanded: !0,
+            items: [
+              {
+                id: "c1",
+                groupId: "level-3",
+                title: "Kategori 1"
+              },
+              {
+                groupId: "level-3",
+                id: "c2",
+                title: "Kategori 2"
+              },
+              {
+                groupId: "level-3",
+                id: "c3",
+                title: "Kategori 3"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+};
+export {
+  d as AccountMenu,
+  t as CollapsibleGlobalMenu,
+  n as CompanyMenu,
+  g as DrilldownMenu,
+  s as ExpandedGlobalMenu,
+  a as InboxMenu,
+  l as PersonMenu,
+  o as default
+};

package/dist/components/Menu/MenuOption.js

@@ -0,0 +1,32 @@
+import { jsxs as _, jsx as n } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { CheckboxIcon as b } from "../Icon/CheckboxIcon.js";
+import { RadioIcon as f } from "../Icon/RadioIcon.js";
+import { MenuItemBase as x } from "./MenuItemBase.js";
+import { MenuItemLabel as I } from "./MenuItemLabel.js";
+import '../../assets/MenuOption.css';const N = "_label_1am63_1", h = "_input_1am63_5", M = "_icon_1am63_10", t = {
+  label: N,
+  input: h,
+  icon: M
+}, R = ({
+  size: e = "sm",
+  type: a,
+  name: m,
+  value: r,
+  label: s,
+  title: i,
+  description: l,
+  badge: c,
+  checked: o = !1,
+  disabled: p,
+  onChange: u
+}) => /* @__PURE__ */ _(x, { className: t.label, disabled: p, selected: o, size: e, badge: c, as: "label", children: [
+  /* @__PURE__ */ n("input", { className: t.input, name: m, value: r, type: a, checked: o, onChange: u }),
+  a === "checkbox" && /* @__PURE__ */ n(b, { checked: o, hover: !0, className: t.icon }),
+  a === "radio" && /* @__PURE__ */ n(f, { checked: o, hover: !0, className: t.icon }),
+  /* @__PURE__ */ n(I, { title: i, description: l, size: e, children: s })
+] });
+export {
+  R as MenuOption
+};

package/dist/components/Menu/MenuOption.stories.js

@@ -0,0 +1,46 @@
+import { MenuOption as e } from "./MenuOption.js";
+const s = {
+  title: "Menu/MenuOption",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    value: "",
+    label: "Label"
+  }
+}, c = {
+  args: {
+    type: "checkbox",
+    title: "Title",
+    size: "sm",
+    checked: !1
+  }
+}, o = {
+  args: {
+    type: "checkbox",
+    title: "Title",
+    size: "sm",
+    checked: !0
+  }
+}, a = {
+  args: {
+    type: "radio",
+    title: "Title",
+    size: "sm",
+    checked: !1
+  }
+}, i = {
+  args: {
+    type: "radio",
+    title: "Title",
+    size: "sm",
+    checked: !0
+  }
+};
+export {
+  c as Checkbox,
+  o as CheckboxChecked,
+  a as Radio,
+  i as RadioChecked,
+  s as default
+};

package/dist/components/Menu/MenuSearch.js

@@ -0,0 +1,21 @@
+import { jsx as t } from "react/jsx-runtime";
+import '../../assets/MenuSearch.css';const i = "_input_73dww_1", _ = "_button_73dww_13", u = "_close_73dww_18", l = "_icon_73dww_22", o = {
+  input: i,
+  button: _,
+  close: u,
+  icon: l
+}, r = ({ value: n, name: c, placeholder: s = "Søk", onChange: e }) => /* @__PURE__ */ t("div", { className: o.field, children: /* @__PURE__ */ t(
+  "input",
+  {
+    type: "search",
+    value: n,
+    name: c,
+    placeholder: s,
+    className: o.input,
+    onChange: e,
+    autoComplete: "off"
+  }
+) });
+export {
+  r as MenuSearch
+};

package/dist/components/Menu/MenuSearch.stories.js

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