@altinn/altinn-components 0.6.2 → 0.6.4

package/dist/components/GlobalMenu/AccountMenu.d.ts

@@ -0,0 +1,20 @@
+import { MenuItemGroups, MenuSearchProps } from '../Menu';
+export interface AccountSearch extends MenuSearchProps {
+    getResultsLabel?: (hits: number) => string;
+    hidden?: boolean;
+}
+export interface AccountMenuItem {
+    type: 'person' | 'company';
+    name: string;
+    id: string;
+    groupId?: string;
+    selected?: boolean;
+}
+export interface AccountMenuProps {
+    accounts?: AccountMenuItem[];
+    accountGroups?: MenuItemGroups;
+    accountSearch?: AccountSearch;
+    currentAccount?: AccountMenuItem;
+    onSelectAccount?: (id: string) => void;
+}
+export declare const AccountMenu: ({ accounts, accountGroups, accountSearch, onSelectAccount, currentAccount, }: AccountMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/GlobalMenu/AccountMenu.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as L } from "react/jsx-runtime";
+import { useState as M } from "react";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "../RootProvider/RootProvider.js";
+import { Menu as b } from "../Menu/Menu.js";
+const v = (r) => `${r} hits`, R = ({
+  accounts: r = [],
+  accountGroups: f = {},
+  accountSearch: s,
+  onSelectAccount: t,
+  currentAccount: d
+}) => {
+  var m;
+  const p = r.map((e) => ({
+    id: e.id || e.name,
+    groupId: e.groupId || "search",
+    selected: e.selected ?? (d == null ? void 0 : d.id) === e.id,
+    title: e.name,
+    avatar: {
+      type: e.type,
+      name: e.name
+    },
+    onClick: () => t == null ? void 0 : t(e.id || e.name)
+  })), [i, o] = M(""), l = i ? p.filter((e) => {
+    var g;
+    return (g = e == null ? void 0 : e.title) == null ? void 0 : g.toLowerCase().includes(i.toLowerCase());
+  }).map((e) => ({
+    ...e,
+    groupId: "search"
+  })) : p, h = i ? {
+    search: {
+      title: ((m = s == null ? void 0 : s.getResultsLabel) == null ? void 0 : m.call(s, l.length)) ?? v(l.length)
+    }
+  } : f, I = {
+    name: "account-search",
+    value: i,
+    placeholder: (s == null ? void 0 : s.placeholder) ?? "Find account",
+    onChange: (e) => o(e.target.value)
+  }, C = [
+    ...l.length > 0 ? l : [{ id: "search", groupId: "search", hidden: !0 }]
+  ];
+  return /* @__PURE__ */ L(b, { theme: "global", search: I, groups: h, items: C });
+};
+export {
+  R as AccountMenu
+};

package/dist/components/GlobalMenu/AccountMenu.stories.js

@@ -0,0 +1,61 @@
+import { AccountMenu as e } from "./AccountMenu.js";
+const t = {
+  title: "GlobalMenu/AccountMenu",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    accountGroups: {
+      primary: {
+        title: "Deg selv og favoritter"
+      },
+      secondary: {
+        title: "Andre kontoer"
+      }
+    },
+    accounts: [
+      {
+        groupId: "primary",
+        type: "person",
+        name: "Aurora Mikalsen",
+        selected: !0
+      },
+      {
+        groupId: "favourites",
+        type: "company",
+        name: "Bergen Bar",
+        selected: !1
+      },
+      {
+        groupId: "secondary",
+        type: "company",
+        name: "Keeperhansker AS",
+        selected: !1
+      },
+      {
+        groupId: "secondary",
+        type: "company",
+        name: "Stadion drift AS",
+        selected: !1
+      },
+      {
+        groupId: "favourites",
+        type: "company",
+        name: "Sportsklubben Brann",
+        selected: !1
+      },
+      {
+        groupId: "secondary",
+        type: "company",
+        name: "Landslaget",
+        selected: !1
+      }
+    ]
+  }
+}, o = {
+  args: {}
+};
+export {
+  o as Default,
+  t as default
+};

package/dist/components/GlobalMenu/BackButton.d.ts

@@ -0,0 +1,5 @@
+export interface BackButtonProps {
+    label: string;
+    onClick?: () => void;
+}
+export declare const BackButton: ({ label, onClick }: BackButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/GlobalMenu/BackButton.js

@@ -0,0 +1,10 @@
+import { jsx as r } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import { MenuItem as i } from "../Menu/MenuItem.js";
+import "../RootProvider/RootProvider.js";
+const f = ({ label: t, onClick: o }) => /* @__PURE__ */ r(i, { id: "back", icon: "arrow-left", title: t, onClick: o });
+export {
+  f as BackButton
+};

package/dist/components/GlobalMenu/GlobalMenu.d.ts

@@ -0,0 +1,16 @@
+import { MenuItemGroups, MenuItemProps } from '../Menu';
+import { Account } from './AccountButton';
+import { AccountMenuProps } from './AccountMenu';
+import { LogoutButtonProps } from './LogoutButton';
+export interface GlobalMenuProps extends AccountMenuProps {
+    items: MenuItemProps[];
+    groups?: MenuItemGroups;
+    menuLabel?: string;
+    backLabel?: string;
+    logoutButton?: LogoutButtonProps;
+    changeLabel?: string;
+    className?: string;
+    currentAccount?: Account;
+    changeCurrentAccount?: (id: string) => void;
+}
+export declare const GlobalMenu: ({ accounts, accountGroups, accountSearch, items, groups, changeLabel, backLabel, currentAccount, changeCurrentAccount, logoutButton, }: GlobalMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/GlobalMenu/GlobalMenu.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { useState as x } from "react";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "../RootProvider/RootProvider.js";
+import { Menu as f } from "../Menu/Menu.js";
+import { AccountButton as G } from "./AccountButton.js";
+import { AccountMenu as h } from "./AccountMenu.js";
+import { BackButton as S } from "./BackButton.js";
+import { GlobalMenuBase as n, GlobalMenuHeader as j, GlobalMenuFooter as T } from "./GlobalMenuBase.js";
+import { LogoutButton as g } from "./LogoutButton.js";
+const I = ({
+  accounts: r = [],
+  accountGroups: a = {},
+  accountSearch: u,
+  items: m = [],
+  groups: c,
+  changeLabel: d = "Change",
+  backLabel: M = "Back",
+  currentAccount: t,
+  changeCurrentAccount: e,
+  logoutButton: p
+}) => {
+  const [b, k] = x(!1), l = () => {
+    k((i) => !i);
+  }, B = (i) => {
+    l(), e == null || e(i);
+  };
+  return b ? /* @__PURE__ */ s(n, { children: [
+    /* @__PURE__ */ o(S, { onClick: l, label: M }),
+    /* @__PURE__ */ o(
+      h,
+      {
+        currentAccount: t,
+        accounts: r,
+        accountGroups: a,
+        accountSearch: u,
+        onSelectAccount: B
+      }
+    )
+  ] }) : t ? /* @__PURE__ */ s(n, { children: [
+    /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(
+      G,
+      {
+        account: t,
+        linkText: d,
+        multipleAccounts: r.length > 1,
+        onClick: l
+      }
+    ) }),
+    /* @__PURE__ */ o(f, { groups: c, items: m }),
+    p && /* @__PURE__ */ o(T, { children: /* @__PURE__ */ o(g, { ...p }) })
+  ] }) : /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(f, { groups: c, items: m }) });
+};
+export {
+  I as GlobalMenu
+};

package/dist/components/GlobalMenu/GlobalMenu.stories.js

@@ -0,0 +1,169 @@
+import { GlobalMenu as r } from "./GlobalMenu.js";
+const t = {
+  title: "GlobalMenu/GlobalMenu",
+  component: r,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    accountGroups: {
+      primary: {
+        title: "Deg selv og favoritter"
+      },
+      secondary: {
+        title: "Andre kontoer"
+      }
+    },
+    currentAccount: {
+      type: "person",
+      name: "Mathias Dyngeland",
+      description: "Fødselsnr. 07101995 XXXXXX"
+    },
+    accounts: [
+      {
+        id: "party:mathias",
+        groupId: "primary",
+        type: "person",
+        name: "Mathias Dyngeland"
+      },
+      {
+        id: "party:bergerbar",
+        groupId: "favourites",
+        type: "company",
+        name: "Bergen bar"
+      },
+      {
+        id: "party:keeperhansker",
+        groupId: "secondary",
+        type: "company",
+        name: "Keeperhansker AS"
+      },
+      {
+        id: "party:stadiondrift",
+        groupId: "secondary",
+        type: "company",
+        name: "Stadion drift AS"
+      },
+      {
+        id: "party:brann",
+        groupId: "favourites",
+        type: "company",
+        name: "Sportsklubben Brann"
+      },
+      {
+        id: "party:landslaget",
+        groupId: "secondary",
+        type: "company",
+        name: "Landslaget"
+      }
+    ],
+    groups: {
+      apps: {
+        divider: !0
+      }
+    },
+    items: [
+      {
+        id: "inbox",
+        groupId: "apps",
+        size: "lg",
+        icon: "inbox",
+        title: "Innboks",
+        badge: {
+          color: "alert",
+          label: "4"
+        }
+      },
+      {
+        id: "access",
+        groupId: "apps",
+        size: "lg",
+        icon: "bookmark",
+        title: "Tilganger",
+        badge: {
+          color: "alert",
+          label: "2"
+        }
+      },
+      {
+        id: "access",
+        groupId: "apps",
+        size: "lg",
+        icon: "menu-grid",
+        title: "Alle skjema"
+      },
+      {
+        id: "startup",
+        groupId: "help",
+        color: "neutral",
+        size: "sm",
+        icon: "buildings2",
+        title: "Starte og drive bedrift"
+      },
+      {
+        id: "help",
+        groupId: "help",
+        size: "sm",
+        color: "neutral",
+        icon: "chat-exclamationmark",
+        title: "Trenger du hjelp?"
+      }
+    ]
+  }
+}, o = {}, n = {
+  args: {
+    currentAccount: void 0,
+    items: [
+      {
+        id: "login",
+        groupId: "login",
+        size: "lg",
+        color: "strong",
+        icon: "padlock-locked",
+        title: "Logg inn"
+      },
+      {
+        id: "startup",
+        groupId: "help",
+        color: "neutral",
+        size: "sm",
+        icon: "buildings2",
+        title: "Starte og drive bedrift"
+      },
+      {
+        id: "help",
+        groupId: "help",
+        color: "neutral",
+        size: "sm",
+        icon: "chat-exclamationmark",
+        title: "Trenger du hjelp?"
+      }
+    ]
+  }
+}, i = {
+  args: {
+    currentAccount: {
+      type: "company",
+      name: "Sportsklubben Brann",
+      description: "Org. nr. 934908988"
+    }
+  }
+}, l = {
+  args: {
+    logoutLabel: "Logg ut",
+    menuLabel: "Meny",
+    backLabel: "Tilbake",
+    changeLabel: "Endre konto",
+    accountSearch: {
+      placeholder: "Søk etter konto",
+      getResultsLabel: (e = 0) => e ? e + " treff" : "Ingen treff",
+      hidden: !1
+    }
+  }
+};
+export {
+  i as Company,
+  l as CustomLabels,
+  o as Default,
+  n as Login,
+  t as default
+};

package/dist/components/GlobalMenu/GlobalMenuBase.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface GlobalMenuBaseProps {
+    children: ReactNode;
+}
+export declare const GlobalMenuBase: ({ children }: GlobalMenuBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GlobalMenuHeader: ({ children }: GlobalMenuBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GlobalMenuFooter: ({ children }: GlobalMenuBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/GlobalMenu/GlobalMenuBase.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import '../../assets/GlobalMenuBase.css';const a = "_nav_gzloq_1", n = "_header_gzloq_8", t = "_footer_gzloq_12", s = "_drawer_gzloq_20", l = "_dropdown_gzloq_26", r = {
+  nav: a,
+  header: n,
+  footer: t,
+  drawer: s,
+  dropdown: l
+}, _ = ({ children: o }) => /* @__PURE__ */ e("nav", { className: r.nav, "data-theme": "global", children: o }), c = ({ children: o }) => /* @__PURE__ */ e("header", { className: r.header, children: o }), f = ({ children: o }) => /* @__PURE__ */ e("footer", { className: r.footer, children: o });
+export {
+  _ as GlobalMenuBase,
+  f as GlobalMenuFooter,
+  c as GlobalMenuHeader
+};

package/dist/components/GlobalMenu/LogoutButton.d.ts

@@ -0,0 +1,7 @@
+import { MouseEventHandler, ReactNode } from 'react';
+export interface LogoutButtonProps {
+    label?: string;
+    children?: ReactNode;
+    onClick?: MouseEventHandler;
+}
+export declare const LogoutButton: ({ label, children, onClick }: LogoutButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/GlobalMenu/LogoutButton.js

@@ -0,0 +1,12 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ButtonBase as s } from "../Button/ButtonBase.js";
+import { ButtonLabel as r } from "../Button/ButtonLabel.js";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import '../../assets/LogoutButton.css';const a = "_button_1260s_1", i = "_label_1260s_5", o = {
+  button: a,
+  label: i
+}, _ = ({ label: l = "Logout", children: e, onClick: n }) => /* @__PURE__ */ t(s, { className: o.button, variant: "outline", size: "lg", onClick: n, children: /* @__PURE__ */ t(r, { className: o.label, size: "lg", children: e || l }) });
+export {
+  _ as LogoutButton
+};

package/dist/components/GlobalMenu/index.js

@@ -0,0 +1,4 @@
+import { GlobalMenu as l } from "./GlobalMenu.js";
+export {
+  l as GlobalMenu
+};

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

@@ -0,0 +1,5 @@
+export interface SymbolProps {
+    className?: string;
+    title?: string;
+}
+export declare const DigdirLogomark: ({ className, title }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Header/DigdirLogomark.js

@@ -0,0 +1,25 @@
+import { jsxs as o, jsx as C } from "react/jsx-runtime";
+const e = ({ className: r, title: i = "Digdir logomark" }) => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: r,
+    children: [
+      /* @__PURE__ */ C("title", { children: i }),
+      /* @__PURE__ */ C(
+        "path",
+        {
+          d: "M12.3167 0H0.486059C0.357148 0 0.233518 0.0511029 0.142363 0.142066C0.0512097 0.23303 0 0.356402 0 0.485044V23.515C0 23.6436 0.0512097 23.767 0.142363 23.8579C0.233518 23.9489 0.357148 24 0.486059 24H12.3167C15.4455 23.9112 18.4163 22.6085 20.5979 20.3686C22.7795 18.1288 24 15.1284 24 12.0049C24 8.88133 22.7795 5.88089 20.5979 3.64106C18.4163 1.40122 15.4455 0.0985018 12.3167 0.00970113V0ZM13.4735 20.3815C11.6835 20.689 9.84199 20.4199 8.21543 19.6132C6.58891 18.8066 5.26188 17.5042 4.42651 15.8948C3.59114 14.2853 3.29078 12.4523 3.56892 10.6611C3.84707 8.86999 4.68929 7.2137 5.97362 5.93205C7.25795 4.6504 8.91774 3.80994 10.7126 3.53237C12.5075 3.25481 14.3444 3.55454 15.9572 4.38817C17.57 5.2218 18.875 6.54605 19.6834 8.16918C20.4918 9.79233 20.7614 11.6301 20.4534 13.4163C20.1535 15.1547 19.3216 16.7576 18.0717 18.0049C16.8218 19.2521 15.2155 20.0824 13.4735 20.3815Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+export {
+  e as DigdirLogomark
+};

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

@@ -0,0 +1,9 @@
+import { GlobalMenuProps } from '../GlobalMenu';
+import { Account } from '../GlobalMenu/AccountButton.tsx';
+import { SearchbarProps } from '../Searchbar';
+export interface HeaderProps {
+    menu: GlobalMenuProps;
+    search?: SearchbarProps;
+    currentAccount?: Account;
+}
+export declare const Header: ({ search, menu, currentAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Header/Header.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import "react";
+import { useEscapeKey as h } from "../../hooks/useEscapeKey.js";
+import { DropdownBase as w } from "../Dropdown/DropdownBase.js";
+import "../../index-L8X2o7IH.js";
+import { DrawerBase as g } from "../Dropdown/DrawerBase.js";
+import "../Icon/SvgIcon.js";
+import { useRootContext as x } from "../RootProvider/RootProvider.js";
+import { GlobalMenu as t } from "../GlobalMenu/GlobalMenu.js";
+import { HeaderBase as H } from "./HeaderBase.js";
+import { HeaderLogo as _ } from "./HeaderLogo.js";
+import { HeaderButton as C } from "./HeaderButton.js";
+import { Searchbar as b } from "../Searchbar/Searchbar.js";
+import { HeaderMenu as y } from "./HeaderMenu.js";
+import { HeaderSearch as B } from "./HeaderSearch.js";
+import '../../assets/Header.css';const N = "_drawer_1wgf5_1", S = "_dropdown_1wgf5_5", d = {
+  drawer: N,
+  dropdown: S
+}, z = ({ search: s, menu: r, currentAccount: a }) => {
+  const { currentId: e, toggleId: n, openId: l, closeAll: m } = x();
+  h(m);
+  const i = () => {
+    l("search");
+  }, c = () => {
+    n("search");
+  }, f = () => {
+    n("menu");
+  };
+  return /* @__PURE__ */ p(H, { currentId: e, open: e === "search" || e === "menu", onClose: m, children: [
+    /* @__PURE__ */ o(_, { className: d.logo }),
+    /* @__PURE__ */ p(y, { className: d.menu, children: [
+      /* @__PURE__ */ o(
+        C,
+        {
+          avatar: a && {
+            type: a.type,
+            name: a.name
+          },
+          onClick: f,
+          expanded: e === "menu",
+          label: r == null ? void 0 : r.menuLabel
+        }
+      ),
+      r && /* @__PURE__ */ o(w, { padding: !1, placement: "right", expanded: e === "menu", className: d.dropdown, children: /* @__PURE__ */ o(t, { ...r, currentAccount: a }) })
+    ] }),
+    s && /* @__PURE__ */ o(B, { expanded: e === "search", children: /* @__PURE__ */ o(b, { ...s, expanded: e === "search", onClose: c, onFocus: i }) }),
+    r && /* @__PURE__ */ o(g, { expanded: e === "menu", className: d.drawer, children: /* @__PURE__ */ o(t, { ...r, currentAccount: a }) })
+  ] });
+};
+export {
+  z as Header
+};