@altinn/altinn-components 0.6.1 → 0.6.3

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

@@ -0,0 +1,173 @@
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { Fragment as p, useState as g } from "react";
+import { MetaItem as k } from "../Meta/MetaItem.js";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "../RootProvider/RootProvider.js";
+import { ListItem as s } from "./ListItem.js";
+import { ListBase as u } from "./ListBase.js";
+import { List as y } from "./List.js";
+const a = ["lg", "md", "sm", "xs"], I = {
+  title: "List/ListItem",
+  component: s,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    id: "id",
+    title: "Title",
+    description: "Description",
+    size: "md",
+    href: "#"
+  }
+}, _ = {
+  args: {}
+}, D = {
+  args: {
+    icon: "teddy-bear"
+  }
+}, B = {
+  args: {
+    color: "accent",
+    icon: "teddy-bear"
+  }
+}, Q = {
+  args: {
+    avatar: {
+      type: "person",
+      name: "Erik Huseklepp"
+    }
+  }
+}, S = {
+  args: {
+    avatar: {
+      type: "company",
+      name: "Sportsklubben Brann"
+    }
+  }
+}, E = {
+  args: {
+    avatar: {
+      type: "company",
+      name: "Politiets sikkerhetstjeneste",
+      imageUrl: "https://media.licdn.com/dms/image/v2/D4D0BAQH7Yv86kmHN5g/company-logo_200_200/company-logo_200_200/0/1688735908848?e=1738195200&v=beta&t=f-Mkzd03bqzdQN4IT0h89VQ9_Jri1iJ6XphYYnjsgEo"
+    }
+  }
+}, P = {
+  args: {
+    avatarGroup: {
+      items: [
+        {
+          type: "person",
+          name: "Albert Åberg"
+        },
+        {
+          type: "person",
+          name: "Birger Meling"
+        },
+        {
+          type: "person",
+          name: "Celine Dion"
+        }
+      ]
+    }
+  }
+}, T = {
+  args: {
+    avatarGroup: {
+      items: [
+        {
+          type: "company",
+          name: "Albert Åberg"
+        },
+        {
+          type: "company",
+          name: "Birger Meling"
+        },
+        {
+          type: "company",
+          name: "Celine Dion"
+        }
+      ]
+    }
+  }
+}, z = {
+  args: {
+    avatar: {
+      type: "company",
+      name: "Direktoratet for samfunnssikkerhet og beredskap",
+      imageUrl: "https://media.licdn.com/dms/image/v2/C510BAQHlQiOWI4f45w/company-logo_200_200/company-logo_200_200/0/1631389121726?e=1738195200&v=beta&t=Q1P8kOwpgLvoqHBxyrHCaYd2upNkPQVi2zSSxJzbdCA"
+    },
+    title: "Samtykke for å reparere elektrisk utstyr hvis bruk er forbundet med særlig risiko, herunder elektromedisinsk utstyr",
+    description: "Direktoratet for samfunnssikkerhet og beredskap"
+  }
+}, G = (t) => /* @__PURE__ */ o(u, { children: a == null ? void 0 : a.map((r) => /* @__PURE__ */ i(p, { children: [
+  /* @__PURE__ */ o(s, { ...t, size: r, selected: r === (t == null ? void 0 : t.size) }),
+  /* @__PURE__ */ o(k, { children: r })
+] }, r)) }), j = (t) => {
+  const [r, l] = g(!1), m = () => {
+    l((e) => !e);
+  }, n = [
+    {
+      name: "Per Ove Ludvigsen",
+      role: "Sportlig leder",
+      rights: "Admin"
+    },
+    {
+      name: "Eirik Horneland",
+      role: "Trener",
+      rights: "Admin"
+    },
+    {
+      name: "Erik Huseklepp",
+      role: "Assistenttrener",
+      rights: "Lese og skrive"
+    },
+    {
+      name: "Hassan El Fakiri",
+      role: "Toppspillerutvikler",
+      rights: "Ingen rettigheter"
+    }
+  ], c = n == null ? void 0 : n.map((e) => ({
+    avatar: {
+      ...e,
+      type: "person"
+    },
+    title: e == null ? void 0 : e.name,
+    description: e == null ? void 0 : e.role,
+    badge: { label: e == null ? void 0 : e.rights },
+    linkIcon: "menu-elipsis-horizontal"
+  })), d = {
+    items: n == null ? void 0 : n.map((e) => ({
+      name: e == null ? void 0 : e.name,
+      type: "person"
+    }))
+  };
+  return /* @__PURE__ */ i(p, { children: [
+    /* @__PURE__ */ o(
+      s,
+      {
+        ...t,
+        avatarGroup: d,
+        collapsible: !0,
+        expanded: r,
+        onClick: m,
+        as: "button"
+      }
+    ),
+    r && /* @__PURE__ */ o(y, { size: "xs", items: c })
+  ] });
+};
+export {
+  j as Collapsible,
+  S as Company,
+  T as CompanyGroup,
+  _ as Default,
+  D as Icon,
+  B as IconAccent,
+  E as Logo,
+  z as LongTitle,
+  P as PeopleGroup,
+  Q as Person,
+  G as Sizes,
+  I as default
+};

package/dist/components/List/ListItemBase.js

@@ -0,0 +1,62 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { c as B } from "../../index-L8X2o7IH.js";
+import { Badge as g } from "../Badge/Badge.js";
+import { ContextMenu as w } from "../ContextMenu/ContextMenu.js";
+import { Icon as z } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import '../../assets/ListItemBase.css';const E = "_item_2cjkt_3", L = "_content_2cjkt_50", M = "_action_2cjkt_60", b = "_linkIcon_2cjkt_67", a = {
+  item: E,
+  content: L,
+  action: M,
+  linkIcon: b
+}, J = ({
+  as: l,
+  children: I,
+  className: f,
+  href: o,
+  size: e,
+  color: h,
+  active: j = !1,
+  hidden: v = !1,
+  collapsible: i,
+  selected: x,
+  expanded: m,
+  linkIcon: k,
+  menu: r,
+  badge: s,
+  onClick: t,
+  onKeyPress: c,
+  style: N
+}) => {
+  const u = l || "a", d = i && m ? "chevron-up" : i ? "chevron-down" : o ? "chevron-right" : k;
+  return /* @__PURE__ */ p(
+    u,
+    {
+      className: B(a.item, f),
+      "data-color": h,
+      "data-size": e,
+      "data-active": j,
+      "aria-hidden": v,
+      "aria-selected": x,
+      "aria-expanded": m,
+      href: o,
+      onKeyPress: (_) => {
+        _.key === "Enter" && (t == null || t()), c == null || c(_);
+      },
+      onClick: t,
+      tabIndex: -1,
+      style: N,
+      children: [
+        /* @__PURE__ */ n("div", { className: a.content, "data-size": e, children: I }),
+        /* @__PURE__ */ p("div", { className: a.action, children: [
+          s && /* @__PURE__ */ n(g, { ...s }),
+          r && /* @__PURE__ */ n(w, { ...r }),
+          d && /* @__PURE__ */ n(z, { name: d, className: a.linkIcon })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  J as ListItemBase
+};

package/dist/components/List/ListItemLabel.js

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

package/dist/components/List/ListItemMedia.js

@@ -0,0 +1,45 @@
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import { Avatar as n } 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/ListItemMedia.css';const x = "_media_pfuu4_3", f = "_icon_pfuu4_23", s = {
+  media: x,
+  icon: f
+}, a = {
+  avatar: {
+    xs: "xs",
+    sm: "sm",
+    md: "md",
+    lg: "lg",
+    xl: "xl"
+  },
+  avatarGroup: {
+    xs: "xs",
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+    xl: "lg"
+  }
+}, A = ({
+  size: t = "sm",
+  color: i = "default",
+  icon: m,
+  avatar: o,
+  avatarGroup: r,
+  children: e
+}) => !m && !o && !r && !e ? !1 : /* @__PURE__ */ d("div", { className: s.media, "data-size": t, "data-color": m ? i : null, children: [
+  m && /* @__PURE__ */ l(u, { name: m, variant: "outline", className: s.icon }) || o && /* @__PURE__ */ l(n, { ...o, size: a == null ? void 0 : a.avatar[t], className: s.avatar }) || r && /* @__PURE__ */ l(
+    c,
+    {
+      ...r,
+      size: a == null ? void 0 : a.avatarGroup[t],
+      className: s.avatarGroup
+    }
+  ),
+  e
+] });
+export {
+  A as ListItemMedia
+};

package/dist/components/List/index.js

@@ -0,0 +1,14 @@
+import { ListItemBase as o } from "./ListItemBase.js";
+import { ListItem as m } from "./ListItem.js";
+import { ListBase as i } from "./ListBase.js";
+import { List as f } from "./List.js";
+import { ListItemLabel as x } from "./ListItemLabel.js";
+import { ListItemMedia as I } from "./ListItemMedia.js";
+export {
+  f as List,
+  i as ListBase,
+  m as ListItem,
+  o as ListItemBase,
+  x as ListItemLabel,
+  I as ListItemMedia
+};

package/dist/components/Menu/Menu.js

@@ -0,0 +1,18 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { MenuBase as u } from "./MenuBase.js";
+import { MenuItems as p } from "./MenuItems.js";
+import { MenuSearch as f } from "./MenuSearch.js";
+const j = ({
+  theme: m = "inherit",
+  defaultItemColor: o = "subtle",
+  defaultItemSize: t = "sm",
+  groups: n,
+  items: i = [],
+  search: r
+}) => /* @__PURE__ */ s(u, { theme: m, children: [
+  r && /* @__PURE__ */ e(f, { ...r }),
+  /* @__PURE__ */ e(p, { items: i, groups: n, defaultItemColor: o, defaultItemSize: t })
+] });
+export {
+  j as Menu
+};