@altinn/altinn-components 0.9.0 → 0.10.0

package/dist/components/Toolbar/ToolbarMenu.js

@@ -2,17 +2,17 @@ import { jsxs as d, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
-import { useRootContext as u } from "../RootProvider/RootProvider.js";
+import "../Autocomplete/AutocompleteBase.js";
+import { Menu as u } from "../Menu/Menu.js";
 import { ToolbarButton as f } from "./ToolbarButton.js";
-import { Menu as b } from "../Menu/Menu.js";
+import { useRootContext as b } from "../RootProvider/RootProvider.js";
 import { ToolbarFilterBase as g } from "./ToolbarFilterBase.js";
 import { DrawerOrDropdown as h } from "../Dropdown/DrawerOrDropdown.js";
-import "../Searchbar/AutocompleteBase.js";
 const v = ({ label: e, value: n, groups: l, search: m, items: i, id: r = "toolbar-menu" }) => {
-  const { currentId: p, toggleId: s, closeAll: a } = u(), c = () => s(r), t = p === r;
+  const { currentId: p, toggleId: s, closeAll: a } = b(), c = () => s(r), t = p === r;
   return /* @__PURE__ */ d(g, { expanded: t, children: [
     /* @__PURE__ */ o(f, { type: "switch", onToggle: c, active: !!n, children: e }),
-    /* @__PURE__ */ o(h, { open: t, drawerTitle: "Endre konto", onClose: a, children: /* @__PURE__ */ o(b, { theme: "global", defaultItemColor: "subtle", groups: l, search: m, items: i }) })
+    /* @__PURE__ */ o(h, { open: t, drawerTitle: "Endre konto", onClose: a, children: /* @__PURE__ */ o(u, { theme: "global", defaultItemColor: "subtle", groups: l, search: m, items: i }) })
   ] });
 };
 export {

package/dist/components/Toolbar/ToolbarMenu.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ label, value, groups, search, items, id }: import('./ToolbarMenu').ToolbarMenuProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        label: string;
+        value: string;
+        items: {
+            id: string;
+            title: string;
+        }[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Expanded: Story;

package/dist/components/Toolbar/ToolbarMenu.stories.js

@@ -9,23 +9,24 @@ const a = {
     value: "skatt",
     items: [
       {
+        id: "Skatteetaten",
         title: "Skatteetaten"
       },
       {
+        id: "Digdir",
         title: "Digdir"
       },
       {
+        id: "Helstilsynet",
         title: "Helstilsynet"
       }
     ]
   }
-}, o = {}, l = {
-  args: {
-    expanded: !0
-  }
+}, l = {}, o = {
+  args: {}
 };
 export {
-  o as Default,
-  l as Expanded,
+  l as Default,
+  o as Expanded,
   a as default
 };

package/dist/components/Toolbar/ToolbarOptions.js

@@ -5,8 +5,8 @@ import "../Icon/SvgIcon.js";
 import { MenuOption as v } from "../Menu/MenuOption.js";
 import { MenuSearch as j } from "../Menu/MenuSearch.js";
 import { MenuHeader as x } from "../Menu/MenuHeader.js";
+import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
 import { MenuBase as O, MenuList as I, MenuListItem as m } from "../Menu/MenuBase.js";
 const w = ({ search: d, optionGroups: n = {}, options: h, onChange: b, optionType: g }) => {
   var a;

package/dist/components/Toolbar/ToolbarOptions.stories.d.ts

@@ -0,0 +1,12 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ search, optionGroups, options, onChange, optionType }: import('./ToolbarOptions').ToolbarOptionsProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Checkboxes: Story;
+export declare const Radio: Story;

package/dist/components/Toolbar/ToolbarOptions.stories.js

@@ -5,7 +5,7 @@ const o = {
   tags: ["autodocs"],
   parameters: {},
   args: {}
-}, t = {
+}, a = {
   args: {
     optionType: "checkbox",
     options: [
@@ -49,55 +49,9 @@ const o = {
       }
     ]
   }
-}, r = {
-  args: {
-    optionGroups: {
-      a: {
-        title: "Velg skadedyr",
-        optionType: "radio"
-      },
-      b: {
-        title: "Velg straff",
-        optionType: "checkbox"
-      }
-    },
-    options: [
-      {
-        groupId: "a",
-        name: "animal",
-        label: "Katt",
-        value: "cat",
-        checked: !0
-      },
-      {
-        groupId: "a",
-        name: "animal",
-        label: "Mus",
-        value: "mouse"
-      },
-      {
-        groupId: "a",
-        name: "animal",
-        label: "Veggdyr",
-        value: "spider"
-      },
-      {
-        groupId: "b",
-        label: "Husarrest",
-        value: "digdir"
-      },
-      {
-        groupId: "b",
-        checked: !0,
-        label: "Piskeslag",
-        value: "helse"
-      }
-    ]
-  }
 };
 export {
-  t as Checkboxes,
+  a as Checkboxes,
   l as Radio,
-  r as RadioCheckbox,
   o as default
 };

package/dist/components/Toolbar/ToolbarSearch.js

@@ -1,30 +1,30 @@
-import { jsxs as s, jsx as i } from "react/jsx-runtime";
-import { Icon as a } from "../Icon/Icon.js";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { Icon as e } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
+import "../Autocomplete/AutocompleteBase.js";
 import { IconButton as m } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
-import '../../assets/ToolbarSearch.css';const l = "_field_dvezx_1", p = "_icon_dvezx_5", d = "_input_dvezx_14", _ = "_clear_dvezx_30", o = {
+import '../../assets/ToolbarSearch.css';const l = "_field_tw5fx_1", p = "_icon_tw5fx_5", f = "_input_tw5fx_14", _ = "_clear_tw5fx_30", o = {
   field: l,
   icon: p,
-  input: d,
+  input: f,
   clear: _
-}, g = ({ value: t, name: e, placeholder: n = "Search", onChange: r, onClear: c }) => /* @__PURE__ */ s("div", { className: o.field, children: [
-  /* @__PURE__ */ i(
+}, j = ({ value: c, name: n, placeholder: r = "Search", onChange: s, onClear: i }) => /* @__PURE__ */ a("div", { className: o.field, children: [
+  /* @__PURE__ */ t(
     "input",
     {
       type: "search",
-      value: t,
-      name: e,
-      placeholder: n,
+      value: c,
+      name: n,
+      placeholder: r,
       className: o.input,
-      onChange: r
+      onChange: s
     }
   ),
-  /* @__PURE__ */ i(a, { name: "magnifying-glass", className: o.icon }),
-  c && /* @__PURE__ */ i(
+  /* @__PURE__ */ t(e, { name: "magnifying-glass", className: o.icon }),
+  i && /* @__PURE__ */ t(
     m,
     {
       icon: "x-mark",
@@ -32,10 +32,10 @@ import '../../assets/ToolbarSearch.css';const l = "_field_dvezx_1", p = "_icon_d
       variant: "solid",
       size: "custom",
       className: o.clear,
-      onClick: c
+      onClick: i
     }
   )
 ] });
 export {
-  g as ToolbarSearch
+  j as ToolbarSearch
 };

package/dist/components/Toolbar/ToolbarSearch.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ value, name, placeholder, onChange, onClear }: import('./ToolbarSearch').ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        name: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Toolbar/ToolbarSearch.stories.js

@@ -1,17 +1,16 @@
-import { fn as o } from "@storybook/test";
 import { ToolbarSearch as a } from "./ToolbarSearch.js";
-const e = {
+const r = {
   title: "Toolbar/ToolbarSearch",
   component: a,
   tags: ["autodocs"],
   parameters: {},
-  args: {}
-}, s = {
   args: {
-    onClear: o()
+    name: "search"
   }
+}, t = {
+  args: {}
 };
 export {
-  s as Default,
-  e as default
+  t as Default,
+  r as default
 };

package/dist/components/Transmission/TransmissionItem.d.ts

@@ -1,7 +1,9 @@
-import { AttachmentSectionProps } from '../Attachment';
 import { AvatarProps } from '../Avatar';
 import { BadgeProps } from '../Badge';
+import { DialogAttachmentsProps } from '../Dialog';
+import { TransmissionTypeProps } from './TransmissionType';
 export interface TransmissionItemProps {
+    type?: TransmissionTypeProps;
     loading?: boolean;
     expanded?: boolean;
     sender: AvatarProps;
@@ -11,6 +13,6 @@ export interface TransmissionItemProps {
     title?: string;
     description?: string | undefined;
     summary?: string;
-    attachments?: AttachmentSectionProps;
+    attachments?: DialogAttachmentsProps;
 }
-export declare const TransmissionItem: ({ loading, sender, createdAt, createdAtLabel, badge, title, description, summary, attachments, }: TransmissionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TransmissionItem: ({ type, loading, sender, createdAt, createdAtLabel, title, description, summary, attachments, }: TransmissionItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Transmission/TransmissionItem.js

@@ -1,60 +1,71 @@
-import { jsxs as i, jsx as m } from "react/jsx-runtime";
-import { useState as f } from "react";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { useState as v } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import { Typography as x } from "../Typography/Typography.js";
-import { AttachmentSection as b } from "../Attachment/AttachmentSection.js";
-import { MetaTimestamp as T } from "../Meta/MetaTimestamp.js";
-import { ListItemBase as u } from "../List/ListItemBase.js";
-import { ListItemHeader as v } from "../List/ListItemHeader.js";
+import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
-import '../../assets/TransmissionItem.css';const I = "_body_1m345_1", z = {
-  body: I
-}, M = ({
-  loading: c,
+import { ListItem as b } from "../List/ListItem.js";
+import { MetaTimestamp as z } from "../Meta/MetaTimestamp.js";
+import { DialogAttachments as I } from "../Dialog/DialogAttachments.js";
+import '../../assets/TransmissionItem.css';const T = "_body_1m345_1", k = {
+  body: T
+}, N = ({
+  type: i,
+  loading: g,
   sender: o,
-  createdAt: p,
-  createdAtLabel: l,
-  badge: r,
-  title: n,
-  description: g,
-  summary: h,
-  attachments: a
+  createdAt: t,
+  createdAtLabel: h,
+  title: r,
+  description: c,
+  summary: s,
+  attachments: n
 }) => {
-  const [t, s] = f(!1);
-  return /* @__PURE__ */ i(u, { expanded: t, children: [
-    /* @__PURE__ */ m(
-      v,
-      {
-        as: "button",
-        onClick: () => {
-          s((y) => !y);
-        },
-        size: "sm",
-        avatar: {
-          type: o == null ? void 0 : o.type,
-          imageUrl: o == null ? void 0 : o.imageUrl,
-          name: o == null ? void 0 : o.name
-        },
-        title: n,
-        description: t ? "" : g,
-        badge: r,
-        linkIcon: t ? "chevron-down" : "chevron-up"
-      }
-    ),
-    t && /* @__PURE__ */ i("div", { className: z.body, children: [
-      p && /* @__PURE__ */ i(T, { loading: c, datetime: p, size: "xs", children: [
-        o && /* @__PURE__ */ m("strong", { children: (o == null ? void 0 : o.name) + ", " }),
-        l
-      ] }),
-      /* @__PURE__ */ i(x, { size: "lg", children: [
-        /* @__PURE__ */ m("p", { children: h }),
-        a && /* @__PURE__ */ m(b, { ...a })
+  const [m, f] = v(!1), p = () => {
+    f((u) => !u);
+  };
+  return (i == null ? void 0 : i.value) === "draft" ? /* @__PURE__ */ a(
+    b,
+    {
+      as: "button",
+      color: "transparent",
+      variant: "dotted",
+      size: "sm",
+      icon: "pencil",
+      title: r,
+      description: c,
+      badge: { label: i == null ? void 0 : i.label },
+      linkIcon: "chevron-right"
+    }
+  ) : /* @__PURE__ */ a(
+    b,
+    {
+      as: "button",
+      expanded: m,
+      onClick: p,
+      size: "sm",
+      avatar: {
+        type: o == null ? void 0 : o.type,
+        imageUrl: o == null ? void 0 : o.imageUrl,
+        name: o == null ? void 0 : o.name
+      },
+      title: r,
+      description: m ? "" : c,
+      badge: { label: i == null ? void 0 : i.label },
+      linkIcon: m ? "chevron-down" : "chevron-up",
+      children: m && /* @__PURE__ */ l("div", { className: k.body, children: [
+        t && /* @__PURE__ */ l(z, { loading: g, datetime: t, size: "xs", children: [
+          o && /* @__PURE__ */ a("strong", { children: (o == null ? void 0 : o.name) + ", " }),
+          h
+        ] }),
+        /* @__PURE__ */ l(x, { size: "lg", children: [
+          /* @__PURE__ */ a("p", { children: s }),
+          n && /* @__PURE__ */ a(I, { ...n })
+        ] })
       ] })
-    ] })
-  ] });
+    }
+  );
 };
 export {
-  M as TransmissionItem
+  N as TransmissionItem
 };

package/dist/components/Transmission/TransmissionItem.stories.d.ts

@@ -0,0 +1,25 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ type, loading, sender, createdAt, createdAtLabel, title, description, summary, attachments, }: import('./TransmissionItem').TransmissionItemProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        createdAt: string;
+        createdAtLabel: string;
+        sender: {
+            type: "person";
+            name: string;
+        };
+        title: string;
+        description: string;
+        badge: {
+            label: string;
+        };
+        summary: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Attachments: Story;

package/dist/components/Transmission/TransmissionList.js

@@ -2,9 +2,9 @@ import { jsx as o } from "react/jsx-runtime";
 import { createElement as i } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { TransmissionItem as e } from "./TransmissionItem.js";
+import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
+import { TransmissionItem as e } from "./TransmissionItem.js";
 import { ListBase as n } from "../List/ListBase.js";
 const x = ({ items: r }) => r.length ? /* @__PURE__ */ o(n, { children: r.map((t, m) => /* @__PURE__ */ i(e, { ...t, key: m })) }) : null;
 export {

package/dist/components/Transmission/TransmissionList.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ items }: import('./TransmissionList').TransmissionListProps) => import("react/jsx-runtime").JSX.Element | null;
+    tags: string[];
+    parameters: {};
+    args: {
+        items: import('./TransmissionItem').TransmissionItemProps[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Transmission/TransmissionList.stories.js

@@ -1,63 +1,27 @@
-import { TransmissionList as e } from "./TransmissionList.js";
-const n = {
+import "../../examples/globalMenu.js";
+import "../../examples/inboxFilters.js";
+import "react/jsx-runtime";
+import "react";
+import { transmissionList as t } from "../../examples/dialog/transmissionList.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 { TransmissionList as i } from "./TransmissionList.js";
+const u = {
   title: "Transmission/TransmissionList",
-  component: e,
+  component: i,
   tags: ["autodocs"],
   parameters: {},
   args: {
-    items: [
-      {
-        createdAt: "2024-09-22 13:34",
-        createdAtLabel: "22. september 2024 kl 13.34",
-        badge: {
-          label: "Godkjent, med feil"
-        },
-        sender: {
-          name: "Skatteetaten",
-          type: "Company",
-          imageUrl: "https://cdn.sanity.io/images/z3it2oa7/production/e16a4f384d1d5ed959e1d74f0626259711d67509-88x88.png?w=96"
-        },
-        title: "Leveransen er godkjent, men inneholder feil",
-        description: "22. sept 11.10",
-        summary: "Leveransen er godkjent, men det er feil i oppgaver du må se nærmere på. Se tilbakemelding og feilliste under.",
-        attachments: {
-          title: "6 vedlegg",
-          items: [
-            {
-              href: "#",
-              label: "Feilliste.pdf"
-            }
-          ]
-        }
-      },
-      {
-        createdAt: "2004-09-09 11:05",
-        createdAtLabel: "22. september 2024 kl 11.05",
-        sender: {
-          name: "Eirik Horneland"
-        },
-        badge: {
-          label: "Sendt inn"
-        },
-        title: "Tredjepartsopplysninger ble sendt inn",
-        description: "22. sept 11.05",
-        summary: "Dere får tilbakemelding om en kort stund.",
-        attachments: {
-          title: "1 vedlegg",
-          items: [
-            {
-              href: "#",
-              label: "Innsendte opplysninger.pdf"
-            }
-          ]
-        }
-      }
-    ]
+    items: t
   }
-}, a = {
+}, L = {
   args: {}
 };
 export {
-  a as Default,
-  n as default
+  L as Default,
+  u as default
 };

package/dist/components/Transmission/TransmissionType.d.ts

@@ -0,0 +1,26 @@
+import { BadgeSize } from '../Badge';
+export declare enum TransmissionTypeEnum {
+    /** Used to indicate a user-initiated transmission not yet sent. */
+    draft = "draft",
+    /** Transmissions submitted by an end user. */
+    submission = "submission",
+    /** User submitted correction. */
+    correction = "correction",
+    /** The transmission has been accepted. */
+    acceptance = "acceptance",
+    /** The transmission has been rejected. */
+    rejection = "Rejection",
+    /** The transmission is an elert. */
+    alert = "Alert"
+}
+export type TransmissionTypeValue = keyof typeof TransmissionTypeEnum;
+export interface TransmissionTypeProps {
+    loading?: boolean;
+    size?: BadgeSize;
+    value?: TransmissionTypeValue;
+    label?: string;
+}
+/**
+ * Transmission type.
+ */
+export declare const TransmissionType: ({ loading, size, label }: TransmissionTypeProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Transmission/TransmissionType.js

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Badge as o } from "../Badge/Badge.js";
+var a = /* @__PURE__ */ ((r) => (r.draft = "draft", r.submission = "submission", r.correction = "correction", r.acceptance = "acceptance", r.rejection = "Rejection", r.alert = "Alert", r))(a || {});
+const d = ({ loading: r, size: t = "sm", label: c }) => r ? null : /* @__PURE__ */ e(o, { size: t, children: c });
+export {
+  d as TransmissionType,
+  a as TransmissionTypeEnum
+};

package/dist/components/Transmission/index.d.ts

@@ -1,3 +1,2 @@
 export * from './TransmissionItem';
 export * from './TransmissionList';
-export * from './TransmissionSection';

package/dist/components/Transmission/index.js

@@ -1,8 +1,6 @@
 import { TransmissionItem as r } from "./TransmissionItem.js";
 import { TransmissionList as m } from "./TransmissionList.js";
-import { TransmissionSection as t } from "./TransmissionSection.js";
 export {
   r as TransmissionItem,
-  m as TransmissionList,
-  t as TransmissionSection
+  m as TransmissionList
 };

package/dist/components/Typography/Heading.d.ts

@@ -1,10 +1,12 @@
 import { ReactNode } from 'react';
 export type HeadingSize = 'xs' | 'sm' | 'md' | 'lg';
+export type HeadingWeight = 'normal' | 'medium' | 'bold';
 export type HeadingComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export interface HeadingProps {
     as?: HeadingComponent;
     size?: HeadingSize;
+    weight?: HeadingWeight;
     className?: string;
     children?: ReactNode;
 }
-export declare const Heading: ({ as, size, className, children }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading: ({ as, size, weight, className, children }: HeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Typography/Heading.js

@@ -1,8 +1,8 @@
-import { jsx as t } from "react/jsx-runtime";
-import { c as o } from "../../index-L8X2o7IH.js";
-import '../../assets/Heading.css';const i = "_heading_1ay9p_1", c = {
-  heading: i
-}, g = ({ as: a = "h2", size: s = "md", className: e, children: n }) => /* @__PURE__ */ t(a, { className: o(c.heading, e), "data-size": s, children: n });
+import { jsx as n } from "react/jsx-runtime";
+import { c as d } from "../../index-L8X2o7IH.js";
+import '../../assets/Heading.css';const o = "_heading_15ax1_1", m = {
+  heading: o
+}, h = ({ as: a = "h2", size: e = "md", weight: t = "medium", className: s, children: i }) => /* @__PURE__ */ n(a, { className: d(m.heading, s), "data-size": e, "data-weight": t, children: i });
 export {
-  g as Heading
+  h as Heading
 };

package/dist/components/Typography/Typography.d.ts

@@ -1,10 +1,10 @@
 import { ElementType, ReactNode } from 'react';
-import { LayoutTheme } from '../Layout';
-export type TypographySize = 'sm' | 'md' | 'lg';
+export type TypographyTheme = 'inherit' | 'neutral' | 'company' | 'person' | 'article';
+export type TypographySize = 'xs' | 'sm' | 'md' | 'lg';
 export interface TypographyProps {
     as?: ElementType;
     size?: TypographySize;
-    theme?: LayoutTheme;
+    theme?: TypographyTheme;
     className?: string;
     children?: ReactNode;
     href?: string;