@altinn/altinn-components 0.9.0 → 0.10.0

package/dist/components/List/ListItem.stories.js

@@ -2,16 +2,16 @@ import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { Fragment as s, useState as g } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
+import "../Autocomplete/AutocompleteBase.js";
 import { Button as k } from "../Button/Button.js";
-import "../RootProvider/RootProvider.js";
 import { MetaItem as r } from "../Meta/MetaItem.js";
+import "../RootProvider/RootProvider.js";
 import { ListItemBase as b } from "./ListItemBase.js";
 import { ListItemHeader as y } from "./ListItemHeader.js";
 import { ListItem as t } from "./ListItem.js";
 import { ListBase as d } from "./ListBase.js";
 import { List as v } from "./List.js";
-import "../Searchbar/AutocompleteBase.js";
-const l = ["lg", "md", "sm", "xs"], S = {
+const l = ["xl", "lg", "md", "sm", "xs"], S = {
   title: "List/ListItem",
   component: t,
   tags: ["autodocs"],

package/dist/components/List/ListItemBase.d.ts

@@ -1,9 +1,11 @@
 import { ReactNode } from 'react';
 export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type ListItemColor = 'default' | 'accent' | 'transparent';
+export type ListItemVariant = 'solid' | 'dotted';
+export type ListItemColor = 'subtle' | 'accent' | 'transparent';
 export type ListItemShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface ListItemBaseProps {
     color?: ListItemColor;
+    variant?: ListItemVariant;
     size?: ListItemSize;
     shadow?: ListItemShadow;
     className?: string;
@@ -13,7 +15,6 @@ export interface ListItemBaseProps {
     active?: boolean;
     selected?: boolean;
     expanded?: boolean;
-    controls?: ReactNode;
     children?: ReactNode;
 }
-export declare const ListItemBase: ({ size, color, shadow, loading, disabled, hidden, active, selected, expanded, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemBase: ({ size, variant, color, shadow, loading, disabled, hidden, active, selected, expanded, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemBase.js

@@ -1,32 +1,34 @@
-import { jsx as o } from "react/jsx-runtime";
-import '../../assets/ListItemBase.css';const c = "_item_1isz3_1", f = {
-  item: c
-}, x = ({
+import { jsx as c } from "react/jsx-runtime";
+import '../../assets/ListItemBase.css';const p = "_item_19vbq_1", x = {
+  item: p
+}, f = ({
   size: e,
-  color: a = "default",
-  shadow: t = "xs",
-  loading: s,
-  disabled: i,
-  hidden: d = !1,
-  active: r = !1,
-  selected: n,
-  expanded: l,
+  variant: t = "solid",
+  color: a = "subtle",
+  shadow: s = "xs",
+  loading: i,
+  disabled: d,
+  hidden: r = !1,
+  active: n = !1,
+  selected: l,
+  expanded: o,
   children: m
-}) => /* @__PURE__ */ o(
+}) => /* @__PURE__ */ c(
   "article",
   {
-    className: f.item,
+    className: x.item,
+    "data-variant": t,
     "data-color": a,
     "data-size": e,
-    "data-shadow": a === "transparent" ? "none" : t,
-    "data-active": r,
-    "aria-hidden": d,
-    "aria-disabled": i || s,
-    "aria-selected": n,
-    "aria-expanded": l,
+    "data-shadow": a === "transparent" ? "none" : s,
+    "data-active": n,
+    "aria-hidden": r,
+    "aria-disabled": d || i,
+    "aria-selected": l,
+    "aria-expanded": o,
     children: m
   }
 );
 export {
-  x as ListItemBase
+  f as ListItemBase
 };

package/dist/components/List/ListItemHeader.js

@@ -1,49 +1,49 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { c as H } from "../../index-L8X2o7IH.js";
-import { ListItemControls as S } from "./ListItemControls.js";
-import { ListItemLabel as A } from "./ListItemLabel.js";
-import { ListItemMedia as B } from "./ListItemMedia.js";
-import { ListItemMenu as D } from "./ListItemMenu.js";
-import { ListItemSelect as F } from "./ListItemSelect.js";
-import '../../assets/ListItemHeader.css';const G = "_header_pqany_1", J = "_link_pqany_8", h = {
-  header: G,
-  link: J
-}, X = ({
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { c as q } from "../../index-L8X2o7IH.js";
+import { ListItemControls as A } from "./ListItemControls.js";
+import { ListItemLabel as B } from "./ListItemLabel.js";
+import { ListItemMedia as D } from "./ListItemMedia.js";
+import { ListItemMenu as F } from "./ListItemMenu.js";
+import { ListItemSelect as G } from "./ListItemSelect.js";
+import '../../assets/ListItemHeader.css';const J = "_header_s8c6k_1", O = "_link_s8c6k_8", h = {
+  header: J,
+  link: O
+}, Y = ({
   as: I,
   loading: e,
   disabled: L,
-  select: n,
+  select: s,
   href: f,
   onClick: a,
   onKeyPress: m,
   tabIndex: _,
   collapsible: i,
-  expanded: s,
+  expanded: n,
   size: t = "sm",
   color: o,
   title: l,
-  description: x,
-  icon: b,
-  avatar: u,
-  avatarGroup: j,
-  linkIcon: k,
-  linkText: q,
-  badge: v,
+  description: k,
+  icon: x,
+  avatar: b,
+  avatarGroup: u,
+  linkIcon: j,
+  linkText: v,
+  badge: M,
   menu: d,
-  controls: M,
-  className: N,
-  children: w
+  controls: N,
+  className: w,
+  children: E
 }) => {
-  const y = I || "button", E = i && s ? "chevron-up" : i ? "chevron-down" : k;
-  return /* @__PURE__ */ c("header", { className: h.header, "data-size": t, "data-color": o, "aria-expanded": s, children: [
-    n && /* @__PURE__ */ r(F, { ...n, size: t }),
-    /* @__PURE__ */ c(
-      y,
+  const H = I || "button", S = i && n ? "chevron-up" : i ? "chevron-down" : j;
+  return /* @__PURE__ */ p("header", { className: h.header, "data-size": t, "data-color": o, "aria-expanded": n, children: [
+    s && /* @__PURE__ */ r(G, { ...s, size: t }),
+    /* @__PURE__ */ p(
+      H,
       {
-        className: H(h.link, N),
+        className: q(h.link, w),
         href: f,
-        onKeyPress: (p) => {
-          p.key === "Enter" && (a == null || a()), m == null || m(p);
+        onKeyPress: (c) => {
+          c.key === "Enter" && (a == null || a()), m == null || m(c);
         },
         onClick: a,
         tabIndex: _,
@@ -52,24 +52,24 @@ import '../../assets/ListItemHeader.css';const G = "_header_pqany_1", J = "_link
         "aria-disabled": e || L,
         children: [
           /* @__PURE__ */ r(
-            B,
+            D,
             {
               loading: e,
               size: t,
               color: o,
-              icon: b,
-              avatar: u,
-              avatarGroup: j
+              icon: x,
+              avatar: b,
+              avatarGroup: u
             }
           ),
-          /* @__PURE__ */ r(A, { loading: e, size: t, title: l, description: x, children: w }),
-          /* @__PURE__ */ r(S, { linkIcon: E, linkText: q, badge: v })
+          /* @__PURE__ */ r(B, { loading: e, size: t, title: l, description: k, children: E }),
+          /* @__PURE__ */ r(A, { linkIcon: S, linkText: v, badge: M })
         ]
       }
     ),
-    d && /* @__PURE__ */ r(D, { ...d }) || M
+    d && /* @__PURE__ */ r(F, { ...d }) || N
   ] });
 };
 export {
-  X as ListItemHeader
+  Y as ListItemHeader
 };

package/dist/components/List/ListItemHeader.stories.js

@@ -2,12 +2,12 @@ import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { Fragment as s, useState as g } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
+import "../Autocomplete/AutocompleteBase.js";
 import { Button as k } from "../Button/Button.js";
-import "../RootProvider/RootProvider.js";
 import { MetaItem as r } from "../Meta/MetaItem.js";
+import "../RootProvider/RootProvider.js";
 import { ListItemHeader as t } from "./ListItemHeader.js";
 import { ListBase as d } from "./ListBase.js";
-import "../Searchbar/AutocompleteBase.js";
 const l = ["lg", "md", "sm", "xs"], w = {
   title: "List/ListItemHeader",
   component: t,

package/dist/components/List/ListItemLabel.js

@@ -1,14 +1,14 @@
 import { jsx as e, jsxs as r, Fragment as o } from "react/jsx-runtime";
 import { Skeleton as a } from "../Skeleton/Skeleton.js";
-import '../../assets/ListItemLabel.css';const d = "_label_1uuk4_3", m = "_title_1uuk4_36", p = "_description_1uuk4_42", s = {
+import '../../assets/ListItemLabel.css';const d = "_label_1jhqj_3", m = "_title_1jhqj_36", h = "_description_1jhqj_43", s = {
   label: d,
   title: m,
-  description: p
-}, h = ({ loading: l = !1, size: t = "sm", title: c, description: n, children: i }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: i || /* @__PURE__ */ r(o, { children: [
+  description: h
+}, j = ({ loading: l = !1, size: t = "sm", title: c, description: n, children: i }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: i || /* @__PURE__ */ r(o, { children: [
   /* @__PURE__ */ e("h2", { className: s.title, "data-size": t, children: /* @__PURE__ */ e(a, { loading: l, children: c }) }),
   " ",
   /* @__PURE__ */ e("p", { className: s.description, "data-size": t, children: /* @__PURE__ */ e(a, { loading: l, children: n }) })
 ] }) });
 export {
-  h as ListItemLabel
+  j as ListItemLabel
 };

package/dist/components/List/ListItemMedia.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps } from '../Avatar';
 import { IconName } from '../Icon';
 import { ListItemColor, ListItemSize } from './ListItemBase';
-interface ListItemMediaProps {
+export interface ListItemMediaProps {
     loading?: boolean;
     color?: ListItemColor;
     size?: ListItemSize;
@@ -12,4 +12,3 @@ interface ListItemMediaProps {
     children?: ReactNode;
 }
 export declare const ListItemMedia: ({ loading, size, color, icon, avatar, avatarGroup, children, }: ListItemMediaProps) => false | import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/List/ListItemMedia.js

@@ -1,12 +1,12 @@
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import { Avatar as x } from "../Avatar/Avatar.js";
-import { AvatarGroup as f } from "../Avatar/AvatarGroup.js";
+import { AvatarGroup as p } from "../Avatar/AvatarGroup.js";
 import { Icon as n } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
-import { Skeleton as u } from "../Skeleton/Skeleton.js";
-import '../../assets/ListItemMedia.css';const p = "_media_14b0z_3", v = "_icon_14b0z_24", a = {
-  media: p,
+import { Skeleton as f } from "../Skeleton/Skeleton.js";
+import '../../assets/ListItemMedia.css';const u = "_media_14b0z_3", v = "_icon_14b0z_24", a = {
+  media: u,
   icon: v
 }, m = {
   avatar: {
@@ -24,23 +24,23 @@ import '../../assets/ListItemMedia.css';const p = "_media_14b0z_3", v = "_icon_1
     xl: "lg"
   }
 }, I = ({
-  loading: l,
+  loading: i,
   size: t = "sm",
-  color: c = "default",
+  color: c = "transparent",
   icon: s,
   avatar: o,
   avatarGroup: e,
-  children: i
-}) => !s && !o && !e && !i ? !1 : l ? /* @__PURE__ */ r(u, { loading: l, variant: "circle", size: t, className: a.media, children: /* @__PURE__ */ r(n, { name: "airplane", variant: "outline", className: a.icon }) }) : /* @__PURE__ */ d("div", { className: a.media, "data-size": t, "data-color": s ? c : null, children: [
+  children: l
+}) => !s && !o && !e && !l ? !1 : i ? /* @__PURE__ */ r(f, { loading: i, variant: "circle", size: t, className: a.media, children: /* @__PURE__ */ r(n, { name: "airplane", variant: "outline", className: a.icon }) }) : /* @__PURE__ */ d("div", { className: a.media, "data-size": t, "data-color": s ? c : null, children: [
   s && /* @__PURE__ */ r(n, { name: s, variant: "outline", className: a.icon }) || o && /* @__PURE__ */ r(x, { ...o, size: m == null ? void 0 : m.avatar[t], className: a.avatar }) || e && /* @__PURE__ */ r(
-    f,
+    p,
     {
       ...e,
       size: m == null ? void 0 : m.avatarGroup[t],
       className: a.avatarGroup
     }
   ),
-  i
+  l
 ] });
 export {
   I as ListItemMedia

package/dist/components/List/ListItemSelect.js

@@ -1,15 +1,15 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { c as a } from "../../index-L8X2o7IH.js";
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { c as l } from "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { CheckboxIcon as i } from "../Icon/CheckboxIcon.js";
-import '../../assets/ListItemSelect.css';const r = "_label_hd89l_1", m = "_input_hd89l_38", p = "_icon_hd89l_43", t = {
+import { CheckboxIcon as a } from "../Icon/CheckboxIcon.js";
+import '../../assets/ListItemSelect.css';const r = "_label_1niu5_1", m = "_input_1niu5_39", p = "_icon_1niu5_44", t = {
   label: r,
   input: m,
   icon: p
-}, h = ({ size: l, checked: e = !1, onChange: s, className: c }) => /* @__PURE__ */ n("label", { className: a(t.label, c), "data-size": l, children: [
-  /* @__PURE__ */ o("input", { type: "checkbox", checked: e, onChange: s, className: t.input, tabIndex: -1 }),
-  /* @__PURE__ */ o(i, { hover: !0, checked: e, className: t.icon })
+}, f = ({ size: o, checked: e = !1, onChange: s, className: i }) => /* @__PURE__ */ c("label", { className: l(t.label, i), "data-size": o, children: [
+  /* @__PURE__ */ n("input", { type: "checkbox", checked: e, onChange: s, className: t.input, tabIndex: -1 }),
+  /* @__PURE__ */ n(a, { hover: !0, checked: e, className: t.icon })
 ] });
 export {
-  h as ListItemSelect
+  f as ListItemSelect
 };

package/dist/components/Menu/Menu.d.ts

@@ -1,8 +1,6 @@
 import { MenuTheme } from './MenuBase';
 import { MenuItemsProps } from './MenuItems';
-import { MenuSearchProps } from './MenuSearch';
 export interface MenuProps extends MenuItemsProps {
     theme?: MenuTheme;
-    search?: MenuSearchProps;
 }
 export declare const Menu: ({ theme, defaultItemColor, defaultItemSize, groups, items, search, }: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/Menu.js

@@ -1,18 +1,23 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { MenuBase as u } from "./MenuBase.js";
-import { MenuItems as p } from "./MenuItems.js";
-import { MenuSearch as f } from "./MenuSearch.js";
-const j = ({
-  theme: m = "inherit",
-  defaultItemColor: o = "subtle",
-  defaultItemSize: t = "sm",
-  groups: n,
-  items: i = [],
-  search: r
-}) => /* @__PURE__ */ s(u, { theme: m, children: [
-  r && /* @__PURE__ */ e(f, { ...r }),
-  /* @__PURE__ */ e(p, { items: i, groups: n, defaultItemColor: o, defaultItemSize: t })
-] });
+import { jsx as r } from "react/jsx-runtime";
+import { MenuBase as s } from "./MenuBase.js";
+import { MenuItems as u } from "./MenuItems.js";
+const c = ({
+  theme: e = "inherit",
+  defaultItemColor: t = "subtle",
+  defaultItemSize: m = "sm",
+  groups: o,
+  items: n = [],
+  search: i
+}) => /* @__PURE__ */ r(s, { theme: e, children: /* @__PURE__ */ r(
+  u,
+  {
+    search: i,
+    items: n,
+    groups: o,
+    defaultItemColor: t,
+    defaultItemSize: m
+  }
+) });
 export {
-  j as Menu
+  c as Menu
 };

package/dist/components/Menu/Menu.stories.d.ts

@@ -0,0 +1,35 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ theme, defaultItemColor, defaultItemSize, groups, items, search, }: import('./Menu').MenuProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const GlobalMenu: Story;
+export declare const CollapsibleGlobalMenu: Story;
+export declare const ExpandedGlobalMenu: Story;
+export declare const DrilldownMenu: Story;
+export declare const InboxMenu: Story;
+export declare const InboxMenuWithShortcuts: {
+    args: {
+        groups: {
+            shortcuts: {
+                title: string;
+                defaultItemColor: string;
+            };
+        };
+        items: (import('./MenuItem.tsx').MenuItemProps | {
+            id: string;
+            groupId: string;
+            icon: string;
+            title: string;
+        })[];
+    };
+};
+export declare const PersonMenu: Story;
+export declare const CompanyMenu: Story;
+export declare const AccountMenu: Story;
+export declare const AccountMenuWithSearch: Story;

package/dist/components/Menu/Menu.stories.js

@@ -1,15 +1,16 @@
-import { Menu as a } from "./Menu.js";
-const s = {
+import { menuItems as l } from "../../examples/menuItems.js";
+import { Menu as s } from "./Menu.js";
+const d = {
   title: "Menu/Menu",
-  component: a,
+  component: s,
   tags: ["autodocs"],
   parameters: {},
   args: {}
-}, d = {
+}, p = {
   args: {
     groups: {
       settings: {
-        defaultItemColor: "default"
+        defaultItemColor: "neutral"
       }
     },
     items: [
@@ -61,11 +62,11 @@ const s = {
       }
     ]
   }
-}, r = {
+}, i = {
   args: {
     groups: {
       settings: {
-        defaultItemColor: "default"
+        defaultItemColor: "neutral"
       }
     },
     items: [
@@ -143,18 +144,18 @@ const s = {
       }
     ]
   }
-}, g = {
+}, u = {
   args: {
-    ...r.args,
-    items: [...r.args.items].map((e) => e.collapsible ? {
+    ...i.args,
+    items: [...i.args.items].map((e) => e.collapsible ? {
       ...e,
       group: (e == null ? void 0 : e.id) === "inbox" ? "inbox" : "",
       expanded: !0
     } : e)
   }
-}, p = {
+}, c = {
   args: {
-    color: "subtle",
+    defaultItemColor: "subtle",
     groups: {
       "level-1": {
         divider: !0
@@ -174,7 +175,7 @@ const s = {
         items: [
           {
             groupId: "level-2",
-            name: "tema",
+            id: "tema",
             icon: "teddy-bear",
             title: "Tema",
             expanded: !0,
@@ -264,11 +265,11 @@ const s = {
     defaultItemColor: "subtle"
   }
 };
-var i, o;
-const u = {
+var r, o;
+const k = {
   args: {
     groups: {
-      ...(i = t.args) == null ? void 0 : i.groups,
+      ...(r = t.args) == null ? void 0 : r.groups,
       shortcuts: {
         title: "Snarveier",
         defaultItemColor: "default"
@@ -290,7 +291,7 @@ const u = {
       }
     ]
   }
-}, c = {
+}, m = {
   args: {
     groups: {},
     items: [
@@ -336,7 +337,7 @@ const u = {
       }
     ]
   }
-}, m = {
+}, I = {
   args: {
     groups: {},
     items: [
@@ -376,123 +377,35 @@ const u = {
       }
     ]
   }
-}, l = {
+}, n = {
   args: {
     groups: {
       a1: {
         title: "Deg selv, favoritter og grupper"
       },
-      b1: {
-        id: "companies",
-        title: "Andre kontoer"
-      }
+      b1: { title: "Andre kontoer" }
     },
-    items: [
-      {
-        id: "1",
-        groupId: "a1",
-        avatar: {
-          type: "person",
-          name: "Dolly Duck"
-        },
-        title: "Dolly Duck",
-        badge: {
-          label: "15"
-        }
-      },
-      {
-        id: "2",
-        groupId: "a2",
-        avatar: {
-          type: "company",
-          name: "Bergen Bar"
-        },
-        title: "Bergen Bar",
-        badge: {
-          label: "21"
-        }
-      },
-      {
-        id: "3",
-        groupId: "a2",
-        avatar: {
-          type: "company",
-          name: "Sportsklubben Brann"
-        },
-        title: "Sportsklubben Brann",
-        badge: {
-          label: "4"
-        }
-      },
-      {
-        id: "4",
-        groupId: "a3",
-        avatarGroup: {
-          type: "company",
-          items: [
-            {
-              name: "Sportsklubben Brann"
-            },
-            {
-              name: "Bergen Bar"
-            }
-          ]
-        },
-        title: "Alle virksomheter",
-        badge: {
-          label: "45"
-        }
-      },
-      {
-        id: "5",
-        groupId: "b1",
-        avatar: {
-          type: "company",
-          name: "Jensens Laks"
-        },
-        title: "Jensens laks"
-      },
-      {
-        id: "6",
-        groupId: "b1",
-        avatar: {
-          type: "company",
-          name: "Haralds gym"
-        },
-        title: "Haralds gym",
-        badge: {
-          label: "2"
-        }
-      },
-      {
-        id: "7",
-        groupId: "b1",
-        avatar: {
-          type: "company",
-          name: "Trim og tran"
-        },
-        title: "Trim og tran"
-      }
-    ]
+    items: l
   }
 }, b = {
   args: {
-    ...l.args,
+    ...n.args,
     search: {
+      name: "search",
       placeholder: "Søk i kontoer"
     }
   }
 };
 export {
-  l as AccountMenu,
+  n as AccountMenu,
   b as AccountMenuWithSearch,
-  r as CollapsibleGlobalMenu,
-  m as CompanyMenu,
-  p as DrilldownMenu,
-  g as ExpandedGlobalMenu,
-  d as GlobalMenu,
+  i as CollapsibleGlobalMenu,
+  I as CompanyMenu,
+  c as DrilldownMenu,
+  u as ExpandedGlobalMenu,
+  p as GlobalMenu,
   t as InboxMenu,
-  u as InboxMenuWithShortcuts,
-  c as PersonMenu,
-  s as default
+  k as InboxMenuWithShortcuts,
+  m as PersonMenu,
+  d as default
 };