@altinn/altinn-components 0.6.1 → 0.6.3

package/dist/components/Header/HeaderLogo.js

@@ -0,0 +1,17 @@
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { c as e } from "../../index-L8X2o7IH.js";
+import { ButtonBase as c } from "../Button/ButtonBase.js";
+import "../Icon/SvgIcon.js";
+import { DigdirLogomark as i } from "./DigdirLogomark.js";
+import '../../assets/HeaderLogo.css';const a = "_logo_y48xn_1", x = "_symbol_y48xn_8", y = "_riksSymbol_y48xn_14", _ = "_text_y48xn_20", o = {
+  logo: a,
+  symbol: x,
+  riksSymbol: y,
+  text: _
+}, k = ({ className: t, as: m = "a", title: r = "Altinn", href: l = "/" }) => /* @__PURE__ */ n(c, { as: m, className: e(o.logo, t), href: l, children: [
+  /* @__PURE__ */ s(i, { className: o.symbol }),
+  /* @__PURE__ */ s("span", { className: o.text, children: r })
+] });
+export {
+  k as HeaderLogo
+};

package/dist/components/Header/HeaderLogo.stories.js

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

package/dist/components/Header/HeaderMenu.js

@@ -0,0 +1,8 @@
+import { jsx as a } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
+import '../../assets/HeaderMenu.css';const r = "_menu_1cafh_1", o = {
+  menu: r
+}, u = ({ expanded: e = !1, className: n, children: s }) => /* @__PURE__ */ a("div", { className: m(o.menu, n), "aria-expanded": e, children: s });
+export {
+  u as HeaderMenu
+};

package/dist/components/Header/HeaderSearch.js

@@ -0,0 +1,8 @@
+import { jsx as a } from "react/jsx-runtime";
+import { c } from "../../index-L8X2o7IH.js";
+import '../../assets/HeaderSearch.css';const o = "_search_15b0s_1", t = {
+  search: o
+}, n = ({ expanded: s = !1, className: e, children: r }) => /* @__PURE__ */ a("div", { className: c(t.search, e), "aria-expanded": s, children: r });
+export {
+  n as HeaderSearch
+};

package/dist/components/Header/index.js

@@ -0,0 +1,10 @@
+import { Header as o } from "./Header.js";
+import { HeaderBase as a } from "./HeaderBase.js";
+import { HeaderLogo as f } from "./HeaderLogo.js";
+import { HeaderButton as p } from "./HeaderButton.js";
+export {
+  o as Header,
+  a as HeaderBase,
+  p as HeaderButton,
+  f as HeaderLogo
+};

package/dist/components/History/HistoryAttachments.js

@@ -0,0 +1,12 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { AttachmentList as e } from "../Attachment/AttachmentList.js";
+import { MetaItem as i } from "../Meta/MetaItem.js";
+const p = ({ title: o = "Attachments", items: t }) => t != null && t.length ? /* @__PURE__ */ n("section", { children: [
+  /* @__PURE__ */ r(i, { as: "h2", size: "xs", children: o }),
+  /* @__PURE__ */ r(e, { size: "lg", items: t })
+] }) : null;
+export {
+  p as HistoryAttachments
+};

package/dist/components/History/HistoryBorder.js

@@ -0,0 +1,8 @@
+import { jsx as s } from "react/jsx-runtime";
+import { c as t } from "../../index-L8X2o7IH.js";
+import '../../assets/HistoryBorder.css';const c = "_border_1gycv_1", d = {
+  border: c
+}, n = ({ seen: r = !0, className: o, children: e }) => /* @__PURE__ */ s("div", { className: t(d.border, o), "data-seen": r, children: e });
+export {
+  n as HistoryBorder
+};

package/dist/components/History/HistoryItem.js

@@ -0,0 +1,44 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { Avatar as p } from "../Avatar/Avatar.js";
+import "../../index-L8X2o7IH.js";
+import "react";
+import { MetaBase as l } from "../Meta/MetaBase.js";
+import "../Icon/SvgIcon.js";
+import { MetaTimestamp as a } from "../Meta/MetaTimestamp.js";
+import { Typography as h } from "../Typography/Typography.js";
+import { HistoryAttachments as b } from "./HistoryAttachments.js";
+import { HistoryBorder as d } from "./HistoryBorder.js";
+import '../../assets/HistoryItem.css';const _ = "_item_1bsu6_1", c = "_header_1bsu6_6", f = "_border_1bsu6_10", u = "_body_1bsu6_17", m = {
+  item: _,
+  header: c,
+  border: f,
+  body: u
+}, T = ({
+  createdBy: o = {
+    type: "person"
+  },
+  createdAt: i,
+  createdAtLabel: t,
+  summary: n,
+  attachments: e
+}) => /* @__PURE__ */ s("section", { className: m.item, children: [
+  /* @__PURE__ */ r("header", { className: m.header, children: /* @__PURE__ */ r(
+    p,
+    {
+      type: o.type || "person",
+      imageUrl: o == null ? void 0 : o.imageUrl,
+      name: o.name || "Unknown name",
+      size: "sm"
+    }
+  ) }),
+  /* @__PURE__ */ r(d, { className: m.border, children: /* @__PURE__ */ s("article", { className: m.body, children: [
+    /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(a, { datetime: i, size: "xs", children: [o == null ? void 0 : o.name, t].join(", ") }) }),
+    /* @__PURE__ */ s(h, { size: "lg", children: [
+      /* @__PURE__ */ r("p", { children: n }),
+      e && /* @__PURE__ */ r(b, { ...e })
+    ] })
+  ] }) })
+] });
+export {
+  T as HistoryItem
+};

package/dist/components/History/HistoryItem.stories.js

@@ -0,0 +1,50 @@
+import { HistoryItem as e } from "./HistoryItem.js";
+const a = {
+  title: "History/HistoryItem",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    createdAt: "2024-09-22 13:34",
+    createdAtLabel: "22. september 2024 kl 13.34",
+    createdBy: {
+      name: "Eirik Horneland"
+    },
+    summary: "Brann slo Glimt 4-1 på Stadion."
+  }
+}, r = {
+  args: {}
+}, l = {
+  args: {
+    attachments: {
+      title: "6 vedlegg",
+      items: [
+        {
+          href: "#",
+          label: "1-0 Castro.pdf"
+        },
+        {
+          href: "#",
+          label: "2-0 Kornvig.pdf"
+        },
+        {
+          href: "#",
+          label: "3-0 Kartum.pdf"
+        },
+        {
+          href: "#",
+          label: "3-1 Zinkernagel.pdf"
+        },
+        {
+          href: "#",
+          label: "4-1 Castro.pdf"
+        }
+      ]
+    }
+  }
+};
+export {
+  l as Attachments,
+  r as Default,
+  a as default
+};

package/dist/components/History/HistoryList.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
+import { HistoryItem as o } from "./HistoryItem.js";
+import '../../assets/HistoryList.css';const n = "_list_6hz70_1", c = "_item_6hz70_10", i = {
+  list: n,
+  item: c
+}, p = ({ items: s, className: r }) => s.length ? /* @__PURE__ */ t("ul", { className: m(i.list, r), children: s.map((e, l) => /* @__PURE__ */ t("li", { className: i.item, children: /* @__PURE__ */ t(o, { ...e }) }, l)) }) : null;
+export {
+  p as HistoryList
+};

package/dist/components/History/HistoryList.stories.js

@@ -0,0 +1,67 @@
+import { HistoryList as e } from "./HistoryList.js";
+const a = {
+  title: "History/HistoryList",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    items: [
+      {
+        createdAt: "2024-09-22 13:34",
+        createdAtLabel: "22. september 2024 kl 13.34",
+        createdBy: {
+          name: "Eirik Horneland"
+        },
+        summary: "Brann slo Glimt 4-1 på Stadion.",
+        attachments: {
+          title: "6 vedlegg",
+          items: [
+            {
+              href: "#",
+              label: "1-0 Castro.pdf"
+            },
+            {
+              href: "#",
+              label: "2-0 Kornvig.pdf"
+            },
+            {
+              href: "#",
+              label: "3-0 Kartum.pdf"
+            },
+            {
+              href: "#",
+              label: "3-1 Zinkernagel.pdf"
+            },
+            {
+              href: "#",
+              label: "4-1 Castro.pdf"
+            }
+          ]
+        }
+      },
+      {
+        createdAt: "2004-09-09 13:34",
+        createdAtLabel: "22. september 2024 kl 13.34",
+        createdBy: {
+          name: "Eirik Horneland"
+        },
+        summary: "Brann vant 1-0 i Haugesund.",
+        attachments: {
+          title: "1 vedlegg",
+          items: [
+            {
+              href: "#",
+              label: "Målet til Heggebø.pdf"
+            }
+          ]
+        }
+      }
+    ]
+  }
+}, r = {
+  args: {}
+};
+export {
+  r as Default,
+  a as default
+};

package/dist/components/History/index.js

@@ -0,0 +1,6 @@
+import { HistoryList as t } from "./HistoryList.js";
+import { HistoryItem as i } from "./HistoryItem.js";
+export {
+  i as HistoryItem,
+  t as HistoryList
+};

package/dist/components/Icon/CheckboxCheckedIcon.js

@@ -0,0 +1,27 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+const t = ({ title: l = "Checkbox", className: C }) => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: C,
+    children: [
+      /* @__PURE__ */ e("title", { children: l }),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M2.5 0C1.11929 0 0 1.11929 0 2.5V21.5C0 22.8807 1.11929 24 2.5 24H21.5C22.8807 24 24 22.8807 24 21.5V2.5C24 1.11929 22.8807 0 21.5 0H2.5ZM18.5547 5.76815C19.0142 6.07451 19.1384 6.69538 18.8321 7.1549L11.6321 17.9549C11.4659 18.2042 11.1967 18.3658 10.8985 18.3953C10.6004 18.4249 10.3047 18.3192 10.0929 18.1073L5.29289 13.3073C4.90237 12.9168 4.90237 12.2836 5.29289 11.8931C5.68342 11.5026 6.31658 11.5026 6.70711 11.8931L10.6446 15.8306L17.1679 6.0455C17.4743 5.58598 18.0952 5.4618 18.5547 5.76815Z",
+          fill: "black"
+        }
+      )
+    ]
+  }
+);
+export {
+  t as CheckboxCheckedIcon
+};

package/dist/components/Icon/CheckboxIcon.js

@@ -0,0 +1,10 @@
+import { jsx as c } from "react/jsx-runtime";
+import { CheckboxCheckedIcon as h } from "./CheckboxCheckedIcon.js";
+import { CheckboxUncheckedIcon as k } from "./CheckboxUncheckedIcon.js";
+const s = ({ checked: e, title: r = "checkbox", hover: n = !1, className: t }) => {
+  const o = { title: r, className: t };
+  return e ? /* @__PURE__ */ c(h, { ...o }) : /* @__PURE__ */ c(k, { ...o, hover: n });
+};
+export {
+  s as CheckboxIcon
+};

package/dist/components/Icon/CheckboxIcon.stories.js

@@ -0,0 +1,27 @@
+import { CheckboxIcon as e } from "./CheckboxIcon.js";
+const c = {
+  title: "Atoms/Icon/CheckboxIcon",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, t = {
+  args: {
+    checked: !1
+  }
+}, s = {
+  args: {
+    checked: !1,
+    hover: !0
+  }
+}, a = {
+  args: {
+    checked: !0
+  }
+};
+export {
+  a as Checked,
+  t as Default,
+  s as Hover,
+  c as default
+};

package/dist/components/Icon/CheckboxUncheckedIcon.js

@@ -0,0 +1,37 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+const n = ({ title: l = "Checkbox", className: o, hover: d = !1 }) => /* @__PURE__ */ t(
+  "svg",
+  {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: o,
+    children: [
+      /* @__PURE__ */ e("title", { children: l }),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M21.5 2.5H2.5V21.5H21.5V2.5ZM2.5 0C1.11929 0 0 1.11929 0 2.5V21.5C0 22.8807 1.11929 24 2.5 24H21.5C22.8807 24 24 22.8807 24 21.5V2.5C24 1.11929 22.8807 0 21.5 0H2.5Z",
+          fill: "black"
+        }
+      ),
+      d && /* @__PURE__ */ e(
+        "path",
+        {
+          "data-hover": !0,
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M18.5547 5.76815C19.0142 6.07451 19.1384 6.69538 18.8321 7.1549L11.6321 17.9549C11.4659 18.2042 11.1967 18.3658 10.8985 18.3953C10.6004 18.4249 10.3047 18.3192 10.0929 18.1073L5.29289 13.3073C4.90237 12.9168 4.90237 12.2836 5.29289 11.8931C5.68342 11.5026 6.31658 11.5026 6.70711 11.8931L10.6446 15.8306L17.1679 6.0455C17.4743 5.58598 18.0952 5.4618 18.5547 5.76815Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+export {
+  n as CheckboxUncheckedIcon
+};

package/dist/components/Icon/Icon.js

@@ -0,0 +1,14 @@
+import { jsx as i } from "react/jsx-runtime";
+import { c as r } from "../../index-L8X2o7IH.js";
+import { SvgIcon as f } from "./SvgIcon.js";
+import { iconsMap as m } from "./iconsMap.js";
+import '../../assets/Icon.css';const a = "_icon_1z0mb_1", p = {
+  icon: a
+}, v = ({ name: o, variant: e = "outline", className: n }) => {
+  var t, s;
+  const c = ((t = m[o]) == null ? void 0 : t[e]) ?? ((s = m[o]) == null ? void 0 : s.outline);
+  return c ? /* @__PURE__ */ i(f, { svgIconComponent: c, className: r([p.icon], n) }) : /* @__PURE__ */ i("span", { className: r([p.icon], n) });
+};
+export {
+  v as Icon
+};

package/dist/components/Icon/Icon.stories.js

@@ -0,0 +1,21 @@
+import { Icon as o } from "./Icon.js";
+import { iconsMap as t } from "./iconsMap.js";
+const n = {
+  title: "Atoms/Icon/Icon",
+  component: o,
+  tags: ["autodocs"],
+  parameters: {},
+  argTypes: {
+    name: Object.keys(t)
+  },
+  args: {
+    name: "inbox",
+    variant: "outline"
+  }
+}, s = {
+  args: {}
+};
+export {
+  s as Default,
+  n as default
+};

package/dist/components/Icon/ProgressIcon.js

@@ -0,0 +1,44 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
+import '../../assets/ProgressIcon.css';const i = "_progress_1uknp_1", g = "_complete_1uknp_25", n = {
+  progress: i,
+  complete: g
+}, C = ({ value: e = 0, total: s = 100, className: c }) => {
+  const r = Math.round(e / s * 100);
+  if (e === s)
+    return /* @__PURE__ */ o(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: n.complete,
+        children: [
+          /* @__PURE__ */ o("title", { children: [
+            "Progress ",
+            e,
+            " of ",
+            s
+          ] }),
+          /* @__PURE__ */ t(
+            "path",
+            {
+              fill: "currentColor",
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.1751 5.11246C11.3892 4.87167 11.7579 4.84998 11.9987 5.06402C12.2395 5.27805 12.2612 5.64676 12.0471 5.88755L7.60268 10.8876C7.49595 11.0076 7.34442 11.0784 7.18383 11.0831C7.02324 11.0878 6.86782 11.0261 6.75421 10.9125L3.97644 8.13471C3.74863 7.9069 3.74863 7.53756 3.97644 7.30975C4.20424 7.08194 4.57359 7.08194 4.80139 7.30975L7.14172 9.65007L11.1751 5.11246Z"
+            }
+          )
+        ]
+      }
+    );
+  const l = {
+    "--progress": `${r}%`
+  };
+  return /* @__PURE__ */ t("div", { className: p(n.progress, c), style: l, "data-value": `${r}%` });
+};
+export {
+  C as ProgressIcon
+};

package/dist/components/Icon/ProgressIcon.stories.js

@@ -0,0 +1,36 @@
+import { ProgressIcon as s } from "./ProgressIcon.js";
+const r = {
+  title: "Atoms/Icon/ProgressIcon",
+  component: s,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, a = {
+  args: {
+    value: 0
+  }
+}, e = {
+  args: {
+    value: 25
+  }
+}, t = {
+  args: {
+    value: 50
+  }
+}, g = {
+  args: {
+    value: 75
+  }
+}, c = {
+  args: {
+    value: 100
+  }
+};
+export {
+  a as Default,
+  c as Progress100,
+  e as Progress25,
+  t as Progress50,
+  g as Progress75,
+  r as default
+};

package/dist/components/Icon/RadioCheckedIcon.js

@@ -0,0 +1,27 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+const t = ({ title: l = "Radio", className: i }) => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: i,
+    children: [
+      /* @__PURE__ */ e("title", { children: l }),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z",
+          fill: "black"
+        }
+      )
+    ]
+  }
+);
+export {
+  t as RadioCheckedIcon
+};

package/dist/components/Icon/RadioIcon.js

@@ -0,0 +1,10 @@
+import { jsx as r } from "react/jsx-runtime";
+import { RadioCheckedIcon as t } from "./RadioCheckedIcon.js";
+import { RadioUncheckedIcon as d } from "./RadioUncheckedIcon.js";
+const s = ({ checked: c, title: i = "Radio", hover: n = !1, className: e }) => {
+  const o = { title: i, className: e };
+  return c ? /* @__PURE__ */ r(t, { ...o }) : /* @__PURE__ */ r(d, { ...o, hover: n });
+};
+export {
+  s as RadioIcon
+};

package/dist/components/Icon/RadioIcon.stories.js

@@ -0,0 +1,27 @@
+import { RadioIcon as e } from "./RadioIcon.js";
+const t = {
+  title: "Atoms/Icon/RadioIcon",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, a = {
+  args: {
+    checked: !1
+  }
+}, c = {
+  args: {
+    checked: !1,
+    hover: !0
+  }
+}, s = {
+  args: {
+    checked: !0
+  }
+};
+export {
+  s as Checked,
+  a as Default,
+  c as Hover,
+  t as default
+};

package/dist/components/Icon/RadioUncheckedIcon.js

@@ -0,0 +1,28 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+const d = ({ title: l = "Radio", className: i, hover: c = !1 }) => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: i,
+    children: [
+      /* @__PURE__ */ e("title", { children: l }),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
+          fill: "black"
+        }
+      ),
+      c && /* @__PURE__ */ e("circle", { "data-hover": !0, cx: "12", cy: "12", r: "5", fill: "black" })
+    ]
+  }
+);
+export {
+  d as RadioUncheckedIcon
+};

package/dist/components/Icon/SvgIcon.js

@@ -0,0 +1,6 @@
+import { isValidElement as r, cloneElement as n } from "react";
+const t = ({ svgIconComponent: e, ...l }) => r(e) ? n(e, { ...l }) : null;
+t.displayName = "SvgIcon";
+export {
+  t as SvgIcon
+};