@altinn/altinn-components 0.6.2 → 0.6.4

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

@@ -0,0 +1,164 @@
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { Header as i } from "./Header.js";
+const h = {
+  title: "Header/Header",
+  component: i,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen"
+  },
+  args: {
+    expanded: !0,
+    search: {
+      placeholder: "Søk i Altinn"
+    },
+    menu: {
+      accountGroups: {
+        primary: {
+          title: "Deg selv og favoritter"
+        },
+        secondary: {
+          title: "Andre kontoer"
+        }
+      },
+      accounts: [
+        {
+          id: "party:aurora",
+          groupId: "primary",
+          type: "person",
+          name: "Aurora Mikalsen"
+        },
+        {
+          id: "party:rakel",
+          groupId: "favourites",
+          type: "person",
+          name: "Rakel Engelsvik"
+        },
+        {
+          id: "party:auroraskeeperskole",
+          groupId: "favourites",
+          type: "company",
+          name: "Auroras keeperskole"
+        },
+        {
+          id: "party:aurorashandsker",
+          groupId: "secondary",
+          type: "company",
+          name: "Keeperhansker AS"
+        },
+        {
+          id: "party:aurorasfotballskole",
+          groupId: "secondary",
+          type: "company",
+          name: "Stadion drift AS"
+        },
+        {
+          id: "party:aurorasfotballskole",
+          groupId: "secondary",
+          type: "company",
+          name: "Sportsklubben Brann"
+        },
+        {
+          id: "party:aurorasfotballskole",
+          groupId: "secondary",
+          type: "company",
+          name: "Landslaget"
+        }
+      ],
+      items: [
+        {
+          id: "1",
+          icon: "airplane",
+          size: "lg",
+          label: "Section 1"
+        },
+        {
+          id: "2",
+          icon: "briefcase",
+          size: "lg",
+          label: "Section 2"
+        },
+        {
+          id: "3",
+          size: "lg",
+          label: "Section 3",
+          icon: "camera"
+        }
+      ]
+    }
+  }
+}, b = {
+  args: {
+    currentAccount: {
+      id: "party:aurora",
+      type: "person",
+      name: "Aurora Mikalsen"
+    }
+  }
+}, A = (r) => {
+  const [e, t] = s(""), c = "party:aurora", [u, p] = s(c), d = (a) => {
+    t(a.target.value);
+  }, m = [
+    {
+      groupId: "1",
+      id: "inbox",
+      href: "#",
+      label: e ? () => /* @__PURE__ */ l("span", { children: [
+        /* @__PURE__ */ n("mark", { children: e }),
+        " i innboksen"
+      ] }) : "Alt i innboksen"
+    },
+    {
+      groupId: "1",
+      id: "global",
+      href: "#",
+      label: e ? () => /* @__PURE__ */ l("span", { children: [
+        /* @__PURE__ */ n("mark", { children: e }),
+        " i hele Altinn"
+      ] }) : "Alt i hele Altinn"
+    }
+  ], o = e ? [
+    {
+      groupId: "2",
+      href: "http://www.altinn.no",
+      label: "Skattemelding 2024"
+    },
+    {
+      groupId: "2",
+      href: "http://www.altinn.no",
+      label: "Skattemelding 2025"
+    }
+  ].filter((a) => a.label.toLowerCase().includes((e ?? "").toLowerCase())) : [], y = {
+    groups: {
+      2: {
+        title: `${o.length} treff i innboksen`
+      }
+    },
+    items: [...m, ...o]
+  };
+  return /* @__PURE__ */ n(
+    i,
+    {
+      ...r,
+      currentAccount: r.menu.accounts.find((a) => a.id === u),
+      menu: {
+        ...r.menu,
+        ...r.menu.accounts,
+        changeCurrentAccount: p
+      },
+      search: {
+        ...r.search,
+        value: e,
+        onChange: d,
+        onClear: () => t(""),
+        autocomplete: y
+      }
+    }
+  );
+};
+export {
+  A as ControlledState,
+  b as Default,
+  h as default
+};

package/dist/components/Header/HeaderBase.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface HeaderBaseProps {
+    currentId?: string;
+    className?: string;
+    children?: ReactNode;
+    open?: boolean;
+    onClose?: () => void;
+}
+export declare const HeaderBase: ({ currentId, className, children, open, onClose }: HeaderBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Header/HeaderBase.js

@@ -0,0 +1,16 @@
+import { jsxs as t, jsx as d } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import { Backdrop as m } from "../Dropdown/Backdrop.js";
+import '../../assets/HeaderBase.css';const i = "_header_5ao8r_1", n = "_backdrop_5ao8r_11", r = {
+  header: i,
+  backdrop: n
+}, f = ({ currentId: o, className: a, children: e, open: c, onClose: s }) => /* @__PURE__ */ t("header", { className: p(r.header, a), "data-current-id": o, children: [
+  c && /* @__PURE__ */ d(m, { className: r.backdrop, onClick: s }),
+  e
+] });
+export {
+  f as HeaderBase
+};

package/dist/components/Header/HeaderButton.d.ts

@@ -0,0 +1,15 @@
+import { ElementType } from 'react';
+import { AvatarProps, AvatarGroupProps } from '../Avatar';
+import { ButtonProps } from '../Button';
+import { IconName } from '../Icon';
+export interface HeaderButtonProps extends ButtonProps {
+    label?: string;
+    avatar?: AvatarProps;
+    avatarGroup?: AvatarGroupProps;
+    as?: ElementType;
+    className?: string;
+    expanded?: boolean;
+    icon?: IconName;
+    tabIndex?: number;
+}
+export declare const HeaderButton: ({ className, as, avatar, avatarGroup, icon, expanded, label, ...buttonProps }: HeaderButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Header/HeaderButton.js

@@ -0,0 +1,38 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { c as e } from "../../index-L8X2o7IH.js";
+import { Avatar as u } from "../Avatar/Avatar.js";
+import { AvatarGroup as h } from "../Avatar/AvatarGroup.js";
+import { ButtonBase as r } from "../Button/ButtonBase.js";
+import { Icon as b } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import '../../assets/HeaderButton.css';const f = "_button_t01b4_1", I = "_label_t01b4_14", N = "_icon_t01b4_20", g = "_loginIcon_t01b4_30", x = "_closeIcon_t01b4_35", n = {
+  button: f,
+  label: I,
+  icon: N,
+  loginIcon: g,
+  closeIcon: x
+}, H = ({
+  className: l,
+  as: s = "button",
+  avatar: c,
+  avatarGroup: _,
+  icon: p = "padlock-locked",
+  expanded: d,
+  label: t = "Menu",
+  ...i
+}) => d ? /* @__PURE__ */ m(r, { ...i, as: s, className: e(n.button, l), children: [
+  /* @__PURE__ */ o("span", { className: n.label, children: t }),
+  /* @__PURE__ */ o("span", { className: e(n.icon, n.closeIcon), children: /* @__PURE__ */ o(b, { name: "x-mark" }) })
+] }) : _ ? /* @__PURE__ */ m(r, { ...i, as: s, className: e(n.button, l), children: [
+  /* @__PURE__ */ o("span", { className: n.label, children: t }),
+  /* @__PURE__ */ o(h, { ..._, size: "sm" })
+] }) : c ? /* @__PURE__ */ m(r, { ...i, as: s, className: e(n.button, l), children: [
+  /* @__PURE__ */ o("span", { className: n.label, children: t }),
+  /* @__PURE__ */ o(u, { type: c == null ? void 0 : c.type, name: c == null ? void 0 : c.name, size: "lg" })
+] }) : /* @__PURE__ */ m(r, { ...i, as: s, className: e(n.button, l), children: [
+  /* @__PURE__ */ o("span", { className: n.label, children: t }),
+  /* @__PURE__ */ o("span", { className: e(n.icon, n.loginIcon), children: /* @__PURE__ */ o(b, { name: p }) })
+] });
+export {
+  H as HeaderButton
+};

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

@@ -0,0 +1,61 @@
+import { HeaderButton as a } from "./HeaderButton.js";
+const n = {
+  title: "Header/HeaderButton",
+  component: a,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered"
+  },
+  args: {}
+}, r = {
+  args: {}
+}, t = {
+  args: {
+    icon: "inbox"
+  }
+}, o = {
+  args: {
+    avatar: {
+      type: "person",
+      name: "Aurora Mikalsen"
+    }
+  }
+}, s = {
+  args: {
+    avatar: {
+      type: "company",
+      name: "Bergen bar"
+    }
+  }
+}, p = {
+  args: {
+    avatarGroup: {
+      defaultType: "company",
+      items: [
+        {
+          name: "Bergen bar"
+        },
+        {
+          name: "Sportsklubben Brann"
+        }
+      ]
+    }
+  }
+}, m = {
+  args: {
+    expanded: !0,
+    avatar: {
+      type: "company",
+      name: "Bergen bar"
+    }
+  }
+};
+export {
+  s as Company,
+  p as CompanyGroup,
+  r as Default,
+  m as Expanded,
+  t as Icon,
+  o as Person,
+  n as default
+};

package/dist/components/Header/HeaderLogo.d.ts

@@ -0,0 +1,9 @@
+import { ElementType, MouseEventHandler } from 'react';
+export interface HeaderLogoProps {
+    className?: string;
+    as?: ElementType;
+    href?: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    title?: string;
+}
+export declare const HeaderLogo: ({ className, as, title, href }: HeaderLogoProps) => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface HeaderMenuProps {
+    className?: string;
+    expanded?: boolean;
+    children?: ReactNode;
+}
+export declare const HeaderMenu: ({ expanded, className, children }: HeaderMenuProps) => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface HeaderSearchProps {
+    className?: string;
+    expanded?: boolean;
+    children?: ReactNode;
+}
+export declare const HeaderSearch: ({ expanded, className, children }: HeaderSearchProps) => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -0,0 +1,6 @@
+import { AttachmentLinkProps } from '../Attachment';
+export interface HistoryAttachmentsProps {
+    title?: string;
+    items?: AttachmentLinkProps[];
+}
+export declare const HistoryAttachments: ({ title, items }: HistoryAttachmentsProps) => import("react/jsx-runtime").JSX.Element | null;

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.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface HistoryBorderProps {
+    seen?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const HistoryBorder: ({ seen, className, children }: HistoryBorderProps) => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -0,0 +1,14 @@
+import { HistoryAttachmentsProps } from './HistoryAttachments';
+export interface CreatedByProps {
+    type?: 'company' | 'person';
+    name?: string;
+    imageUrl?: string;
+}
+export interface HistoryItemProps {
+    createdBy?: CreatedByProps;
+    createdAt?: string;
+    createdAtLabel?: string;
+    summary?: string;
+    attachments?: HistoryAttachmentsProps;
+}
+export declare const HistoryItem: ({ createdBy, createdAt, createdAtLabel, summary, attachments, }: HistoryItemProps) => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -0,0 +1,6 @@
+import { HistoryItemProps } from './HistoryItem';
+export interface HistoryProps {
+    items: HistoryItemProps[];
+    className?: string;
+}
+export declare const HistoryList: ({ items, className }: HistoryProps) => import("react/jsx-runtime").JSX.Element | null;

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.d.ts

@@ -0,0 +1,8 @@
+export type CheckboxCheckedIconProps = {
+    title?: string;
+    className?: string;
+};
+/**
+ * Checkbox for lists and list items
+ */
+export declare const CheckboxCheckedIcon: ({ title, className }: CheckboxCheckedIconProps) => import("react/jsx-runtime").JSX.Element;