@altinn/altinn-components 0.9.0 → 0.10.0

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

@@ -1,174 +1,46 @@
-import { GlobalMenu as a } from "./GlobalMenu.js";
-const t = {
+import { jsx as p } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { globalMenu as a } from "../../examples/globalMenu.js";
+import { loginMenu as l } from "../../examples/loginMenu.js";
+import "../../examples/inboxFilters.js";
+import "../../examples/dialog/reportingDraftDialog.js";
+import "../../examples/dialog/reportingInProgressDialog.js";
+import "../../examples/dialog/reportingCompletedDialog.js";
+import "../../examples/dialog/transmissionsTimeline.js";
+import "../../examples/dialog/transmissionsInProgressDialog.js";
+import "../../examples/dialog/transmissionsCompletedDialog.js";
+import { GlobalMenu as n } from "./GlobalMenu.js";
+const y = {
   title: "GlobalMenu/GlobalMenu",
-  component: a,
+  component: n,
   tags: ["autodocs"],
   parameters: {},
   args: {
-    accountGroups: {
-      primary: {
-        title: "Deg selv og favoritter"
-      },
-      secondary: {
-        title: "Andre kontoer"
-      }
-    },
-    currentAccount: {
-      id: "party:mathias",
-      type: "person",
-      name: "Mathias Dyngeland",
-      description: "Fødselsnr. 07101995 XXXXXX"
-    },
-    logoutButton: {
-      label: "Logg ut"
-    },
-    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?"
-      }
-    ]
+    ...a
   }
-}, i = {
-  args: {
-    currentAccount: {
-      type: "company",
-      name: "Sportsklubben Brann",
-      description: "Org. nr. 934908988"
+}, C = (o) => {
+  const t = o.accounts, [r, e] = u(t[0]), c = (m) => {
+    const i = t == null ? void 0 : t.find((s) => s.id === m);
+    e(i);
+  };
+  return /* @__PURE__ */ p(
+    n,
+    {
+      ...o,
+      currentAccount: {
+        ...r,
+        description: r.type === "person" ? "Fødselsnr. XXXXXX YYYYY" : "Org. nr"
+      },
+      onSelectAccount: c
     }
-  }
-}, l = {
+  );
+}, D = {
   args: {
-    logoutLabel: "Logg ut",
-    menuLabel: "Meny",
-    backLabel: "Tilbake",
-    changeLabel: "Endre konto",
-    accountSearch: {
-      placeholder: "Finn konto",
-      name: "search-account",
-      getResultsLabel: (e = 0) => e ? e + " treff" : "Ingen treff",
-      hidden: !1
-    }
+    ...l
   }
 };
 export {
-  l as AccountSearch,
-  i as Company,
-  o as Default,
-  n as Login,
-  t as default
+  C as Default,
+  D as Login,
+  y as default
 };

package/dist/components/Header/Header.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { DropdownBase as g } from "../Dropdown/DropdownBase.js";
 import "../../index-L8X2o7IH.js";
 import { DrawerBase as x } from "../Dropdown/DrawerBase.js";
 import "../Icon/SvgIcon.js";
 import "react";
+import "../Autocomplete/AutocompleteBase.js";
 import { useRootContext as H } from "../RootProvider/RootProvider.js";
 import { GlobalMenu as m } from "../GlobalMenu/GlobalMenu.js";
 import { HeaderBase as _ } from "./HeaderBase.js";
@@ -16,18 +17,18 @@ import { HeaderSearch as S } from "./HeaderSearch.js";
 import '../../assets/Header.css';const v = "_drawer_ft5v3_1", y = "_dropdown_ft5v3_5", s = {
   drawer: v,
   dropdown: y
-}, J = ({ search: d, menu: r, currentAccount: a, logo: p = {}, badge: l }) => {
-  const { currentId: e, toggleId: n, openId: i, closeAll: c } = H(), h = () => {
+}, K = ({ search: d, menu: r, currentAccount: a, logo: p = {}, badge: l }) => {
+  const { currentId: o, toggleId: n, openId: i, closeAll: c } = H(), h = () => {
     i("search");
   }, f = () => {
     n("search");
   }, w = () => {
     n("menu");
   };
-  return /* @__PURE__ */ t(_, { currentId: e, open: e === "search" || e === "menu", onClose: c, children: [
-    /* @__PURE__ */ o(C, { ...p, className: s.logo }),
+  return /* @__PURE__ */ t(_, { currentId: o, open: o === "search" || o === "menu", onClose: c, children: [
+    /* @__PURE__ */ e(C, { ...p, className: s.logo }),
     /* @__PURE__ */ t(N, { className: s.menu, children: [
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ e(
         b,
         {
           badge: l,
@@ -36,16 +37,16 @@ import '../../assets/Header.css';const v = "_drawer_ft5v3_1", y = "_dropdown_ft5
             name: a.name
           },
           onClick: w,
-          expanded: e === "menu",
+          expanded: o === "menu",
           label: r == null ? void 0 : r.menuLabel
         }
       ),
-      r && /* @__PURE__ */ o(g, { padding: !0, placement: "right", open: e === "menu", className: s.dropdown, children: /* @__PURE__ */ o(m, { ...r, currentAccount: a }) })
+      r && /* @__PURE__ */ e(g, { padding: !0, placement: "right", open: o === "menu", className: s.dropdown, children: /* @__PURE__ */ e(m, { ...r, currentAccount: a }) })
     ] }),
-    d && /* @__PURE__ */ o(S, { expanded: e === "search", children: /* @__PURE__ */ o(B, { ...d, expanded: e === "search", onClose: f, onFocus: h }) }),
-    r && /* @__PURE__ */ o(x, { open: e === "menu", className: s.drawer, children: /* @__PURE__ */ o(m, { ...r, currentAccount: a }) })
+    d && /* @__PURE__ */ e(S, { expanded: o === "search", children: /* @__PURE__ */ e(B, { ...d, expanded: o === "search", onClose: f, onFocus: h }) }),
+    r && /* @__PURE__ */ e(x, { open: o === "menu", className: s.drawer, children: /* @__PURE__ */ e(m, { ...r, currentAccount: a }) })
   ] });
 };
 export {
-  J as Header
+  K as Header
 };

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

@@ -1,164 +1,35 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { useState as l } from "react";
-import { Header as i } from "./Header.js";
-const h = {
-  title: "Header/Header",
-  component: i,
+import { jsx as m } from "react/jsx-runtime";
+import "../../examples/globalMenu.js";
+import "../../examples/inboxFilters.js";
+import { header as c } from "../../examples/header.js";
+import { useInboxSearch as n } from "../../examples/useInboxSearch.js";
+import { useAccountMenu as a } from "../../examples/useAccountMenu.js";
+import "../../examples/dialog/reportingDraftDialog.js";
+import "../../examples/dialog/reportingInProgressDialog.js";
+import "../../examples/dialog/reportingCompletedDialog.js";
+import "../../examples/dialog/transmissionsTimeline.js";
+import "../../examples/dialog/transmissionsInProgressDialog.js";
+import "../../examples/dialog/transmissionsCompletedDialog.js";
+import { Header as o } from "./Header.js";
+const S = {
+  title: "Layout/Header",
+  component: o,
   tags: ["autodocs"],
   parameters: {
     layout: "fullscreen"
   },
   args: {
-    expanded: !0,
+    ...c,
     search: {
+      name: "inbox-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:stadiondrift",
-          groupId: "secondary",
-          type: "company",
-          name: "Stadion drift AS"
-        },
-        {
-          id: "party:skb",
-          groupId: "secondary",
-          type: "company",
-          name: "Sportsklubben Brann"
-        },
-        {
-          id: "party:landslaget",
-          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 = (n) => {
-  const [e, a] = l(""), c = "party:aurora", [d, p] = l(c), u = (r) => {
-    a(r.target.value);
-  }, m = [
-    {
-      groupId: "1",
-      id: "inbox",
-      href: "#",
-      label: e ? () => /* @__PURE__ */ s("span", { children: [
-        /* @__PURE__ */ t("mark", { children: e }),
-        " i innboksen"
-      ] }) : "Alt i innboksen"
-    },
-    {
-      groupId: "1",
-      id: "global",
-      href: "#",
-      label: e ? () => /* @__PURE__ */ s("span", { children: [
-        /* @__PURE__ */ t("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((r) => r.label.toLowerCase().includes((e ?? "").toLowerCase())) : [], y = {
-    groups: {
-      2: {
-        title: `${o.length} treff i innboksen`
-      }
-    },
-    items: [...m, ...o]
-  };
-  return /* @__PURE__ */ t(
-    i,
-    {
-      ...n,
-      currentAccount: n.menu.accounts.find((r) => r.id === d),
-      menu: {
-        ...n.menu,
-        ...n.menu.accounts,
-        onSelectAccount: p
-      },
-      search: {
-        ...n.search,
-        value: e,
-        onChange: u,
-        onClear: () => a(""),
-        autocomplete: y
-      }
-    }
-  );
+}, j = (r) => {
+  const e = n(r.search), t = a(r.menu);
+  return /* @__PURE__ */ m(o, { ...r, currentAccount: t.currentAccount, menu: t, search: e });
 };
 export {
-  A as ControlledState,
-  b as Default,
-  h as default
+  j as Default,
+  S as default
 };

package/dist/components/Header/HeaderBase.js

@@ -2,9 +2,9 @@ import { jsxs as s, jsx as d } from "react/jsx-runtime";
 import { c as p } from "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
+import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import { Backdrop as m } from "../Dropdown/Backdrop.js";
-import "../Searchbar/AutocompleteBase.js";
 import '../../assets/HeaderBase.css';const i = "_header_5ao8r_1", n = "_backdrop_5ao8r_11", r = {
   header: i,
   backdrop: n

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

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ className, as, avatar, avatarGroup, icon, expanded, label, badge, ...buttonProps }: import('./HeaderButton').HeaderButtonProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Icon: Story;
+export declare const Person: Story;
+export declare const Company: Story;
+export declare const CompanyGroup: Story;
+export declare const Expanded: Story;

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

@@ -1,6 +1,6 @@
 import { HeaderButton as a } from "./HeaderButton.js";
-const r = {
-  title: "Header/HeaderButton",
+const t = {
+  title: "Layout/HeaderButton",
   component: a,
   tags: ["autodocs"],
   parameters: {
@@ -9,7 +9,7 @@ const r = {
   args: {}
 }, n = {
   args: {}
-}, t = {
+}, r = {
   args: {
     icon: "inbox"
   }
@@ -59,7 +59,7 @@ export {
   p as CompanyGroup,
   n as Default,
   c as Expanded,
-  t as Icon,
+  r as Icon,
   o as Person,
-  r as default
+  t as default
 };

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

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ className, as, title, href }: import('./HeaderLogo').HeaderLogoProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

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

package/dist/components/Icon/CheckboxIcon.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ checked, title, hover, className }: import('./CheckboxIcon').CheckboxIconProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Hover: Story;
+export declare const Checked: Story;

package/dist/components/Icon/ProgressIcon.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ value, total, className }: import('./ProgressIcon').ProgressIconProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Progress25: Story;
+export declare const Progress50: Story;
+export declare const Progress75: Story;
+export declare const Progress100: Story;

package/dist/components/Icon/RadioIcon.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ checked, title, hover, className }: import('./RadioIcon').RadioIconProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Hover: Story;
+export declare const Checked: Story;

package/dist/components/Layout/Layout.d.ts

@@ -18,7 +18,7 @@ export interface LayoutProps {
     footer?: FooterProps;
     sidebar?: SidebarProps;
     content?: ContentProps;
-    children: ReactNode;
+    children?: ReactNode;
 }
 export declare const Layout: ({ theme, header, footer, sidebar, content, children }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Layout/Layout.js

@@ -9,19 +9,19 @@ import { Header as j } from "../Header/Header.js";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
-import { useRootContext as B } from "../RootProvider/RootProvider.js";
-import { Menu as C } from "../Menu/Menu.js";
-import "../Searchbar/AutocompleteBase.js";
-const A = ({ theme: n = "global", header: p, footer: u, sidebar: o = {}, content: t = {}, children: e }) => {
-  const { currentId: f } = B(), { menu: h, ...l } = o;
-  return /* @__PURE__ */ r(i, { theme: n, currentId: f, children: [
+import "../Autocomplete/AutocompleteBase.js";
+import { Menu as B } from "../Menu/Menu.js";
+import { useRootContext as C } from "../RootProvider/RootProvider.js";
+const A = ({ theme: e = "global", header: p, footer: u, sidebar: o = {}, content: t = {}, children: f }) => {
+  const { currentId: h } = C(), { menu: n, ...l } = o;
+  return /* @__PURE__ */ r(i, { theme: e, currentId: h, children: [
     p && /* @__PURE__ */ m(j, { ...p }),
-    /* @__PURE__ */ r(y, { children: [
+    /* @__PURE__ */ r(y, { currentId: h, children: [
       o && /* @__PURE__ */ r(L, { hidden: o == null ? void 0 : o.hidden, theme: o == null ? void 0 : o.theme, ...l, children: [
-        h && /* @__PURE__ */ m(C, { ...h }),
+        n && /* @__PURE__ */ m(B, { ...n }),
         o == null ? void 0 : o.children
       ] }),
-      /* @__PURE__ */ m(c, { theme: t == null ? void 0 : t.theme, children: e })
+      /* @__PURE__ */ m(c, { theme: t == null ? void 0 : t.theme, children: f })
     ] }),
     u && /* @__PURE__ */ m(x, { ...u })
   ] });