@altinn/altinn-components 0.9.1 → 0.10.1

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

@@ -1,36 +1,36 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Fragment as s, useState as g } from "react";
+import { Fragment as s, useState as k } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
-import { MetaItem as r } from "../Meta/MetaItem.js";
-import { ListItemBase as k } from "./ListItemBase.js";
-import { ListItemHeader as b } from "./ListItemHeader.js";
+import { Button as b } from "../Button/Button.js";
+import { MetaItem as i } from "../Meta/MetaItem.js";
 import "../RootProvider/RootProvider.js";
-import { ListItem as t } from "./ListItem.js";
-import { ListBase as d } from "./ListBase.js";
-import { List as y } from "./List.js";
-import { Button as v } from "../Button/Button.js";
-const l = ["lg", "md", "sm", "xs"], S = {
+import { ListItemBase as y } from "./ListItemBase.js";
+import { ListItemHeader as v } from "./ListItemHeader.js";
+import { ListItem as r } from "./ListItem.js";
+import { ListBase as c } from "./ListBase.js";
+import { List as I } from "./List.js";
+const f = ["neutral", "accent", "transparent"], l = ["xl", "lg", "md", "sm", "xs"], j = {
   title: "List/ListItem",
-  component: t,
+  component: r,
   tags: ["autodocs"],
   parameters: {},
   args: {
     id: "id",
     title: "Title",
     description: "Description",
-    size: "md"
+    size: "sm"
   }
-}, _ = {
+}, P = {
   args: {}
-}, j = (n) => /* @__PURE__ */ a(d, { children: [
-  /* @__PURE__ */ e(t, { ...n }),
-  /* @__PURE__ */ e(r, { children: "No media" }),
-  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear" }),
-  /* @__PURE__ */ e(r, { children: "Icon" }),
+}, G = (n) => /* @__PURE__ */ a(c, { children: [
+  /* @__PURE__ */ e(r, { ...n }),
+  /* @__PURE__ */ e(i, { children: "No media" }),
+  /* @__PURE__ */ e(r, { ...n, icon: "teddy-bear" }),
+  /* @__PURE__ */ e(i, { children: "Icon" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
       avatar: {
@@ -39,9 +39,9 @@ const l = ["lg", "md", "sm", "xs"], S = {
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "Person" }),
+  /* @__PURE__ */ e(i, { children: "Person" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
       avatar: {
@@ -50,9 +50,9 @@ const l = ["lg", "md", "sm", "xs"], S = {
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "Company" }),
+  /* @__PURE__ */ e(i, { children: "Company" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
       avatar: {
@@ -62,9 +62,9 @@ const l = ["lg", "md", "sm", "xs"], S = {
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "Logo" }),
+  /* @__PURE__ */ e(i, { children: "Logo" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
       avatarGroup: {
@@ -85,9 +85,9 @@ const l = ["lg", "md", "sm", "xs"], S = {
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "People group" }),
+  /* @__PURE__ */ e(i, { children: "People group" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
       avatarGroup: {
@@ -108,78 +108,78 @@ const l = ["lg", "md", "sm", "xs"], S = {
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "Company group" })
-] }), P = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
-  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: i, loading: !0 }),
-  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: i, loading: !1 }),
-  /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), G = (n) => /* @__PURE__ */ a(d, { children: [
-  /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right" }),
-  /* @__PURE__ */ e(r, { children: "Link icon, emphasising that this will take you somewhere" }),
-  /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right", linkText: "Åpne" }),
-  /* @__PURE__ */ e(r, { children: "Link icon + link text, emphasising that this will take you somewhere" }),
-  /* @__PURE__ */ e(t, { ...n, collapsible: !0, badge: { label: "Admin" } }),
-  /* @__PURE__ */ e(r, { children: "Collapsible item with badge" }),
-  /* @__PURE__ */ e(t, { ...n, collapsible: !0, expanded: !0 }),
-  /* @__PURE__ */ e(r, { children: "Collapsible and expanded item" }),
+  /* @__PURE__ */ e(i, { children: "Company group" })
+] }), N = (n) => /* @__PURE__ */ e(c, { children: l.map((t) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(r, { ...n, icon: "teddy-bear", size: t, loading: !0 }),
+  /* @__PURE__ */ e(r, { ...n, icon: "teddy-bear", size: t, loading: !1 }),
+  /* @__PURE__ */ e(i, { children: t })
+] }, t)) }), Q = (n) => /* @__PURE__ */ a(c, { children: [
+  /* @__PURE__ */ e(r, { ...n, linkIcon: "chevron-right" }),
+  /* @__PURE__ */ e(i, { children: "Link icon, emphasising that this will take you somewhere" }),
+  /* @__PURE__ */ e(r, { ...n, linkIcon: "chevron-right", linkText: "Åpne" }),
+  /* @__PURE__ */ e(i, { children: "Link icon + link text, emphasising that this will take you somewhere" }),
+  /* @__PURE__ */ e(r, { ...n, collapsible: !0, badge: { label: "Admin" } }),
+  /* @__PURE__ */ e(i, { children: "Collapsible item with badge" }),
+  /* @__PURE__ */ e(r, { ...n, collapsible: !0, expanded: !0 }),
+  /* @__PURE__ */ e(i, { children: "Collapsible and expanded item" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
       badge: { label: "Admin" },
       linkIcon: "chevron-right",
       menu: {
+        id: "menu",
         items: [
-          { title: "Innstillinger", icon: "cog" },
-          { title: "Aktivitetslogg", icon: "clock-dashed" }
+          { id: "settings", title: "Innstillinger", icon: "cog" },
+          { id: "log", title: "Aktivitetslogg", icon: "clock-dashed" }
         ]
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "List item with badge, linkIcon and context menu" }),
+  /* @__PURE__ */ e(i, { children: "List item with badge, linkIcon and context menu" }),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
-      controls: /* @__PURE__ */ e("div", { style: { position: "absolute", right: 0, display: "flex", alignItems: "center", margin: "0.625rem" }, children: /* @__PURE__ */ e(v, { icon: "pencil", size: "sm", variant: "outline", children: "Rediger" }) })
+      controls: /* @__PURE__ */ e("div", { style: { position: "absolute", right: 0, display: "flex", alignItems: "center", margin: "0.625rem" }, children: /* @__PURE__ */ e(b, { icon: "pencil", size: "sm", variant: "outline", children: "Rediger" }) })
     }
   ),
-  /* @__PURE__ */ e(r, { children: "List item with custom controls" })
-] }), N = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(i, { children: "List item with custom controls" })
+] }), Y = (n) => /* @__PURE__ */ e(c, { children: l == null ? void 0 : l.map((t) => /* @__PURE__ */ a(s, { children: [
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
-      size: i,
+      size: t,
       select: {
         checked: !1
       }
     }
   ),
   /* @__PURE__ */ e(
-    t,
+    r,
     {
       ...n,
-      size: i,
+      size: t,
       select: {
         checked: !0
       },
       selected: !0
     }
   ),
-  /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), Q = (n) => /* @__PURE__ */ a(d, { children: [
-  /* @__PURE__ */ e(t, { ...n }),
-  /* @__PURE__ */ e(r, { children: "Default" }),
-  /* @__PURE__ */ e(t, { ...n, color: "accent" }),
-  /* @__PURE__ */ e(r, { children: "Accent" })
-] }), Y = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
-  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: i, selected: i === (n == null ? void 0 : n.size), linkIcon: "chevron-right" }),
-  /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), F = (n) => {
-  const [i, p] = g(!1), m = () => {
+  /* @__PURE__ */ e(i, { children: t })
+] }, t)) }), F = (n) => /* @__PURE__ */ e(c, { children: f.map((t) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(r, { ...n, icon: "teddy-bear", color: t, linkIcon: "chevron-right" }),
+  /* @__PURE__ */ e(i, { children: t })
+] }, t)) }), J = (n) => /* @__PURE__ */ e(c, { children: l == null ? void 0 : l.map((t) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(r, { ...n, icon: "teddy-bear", size: t, linkIcon: "chevron-right" }),
+  /* @__PURE__ */ e(r, { ...n, avatar: { name: "Avatar" }, size: t, linkIcon: "chevron-right" }),
+  /* @__PURE__ */ e(i, { children: t })
+] }, t)) }), q = (n) => {
+  const [t, p] = k(!1), m = () => {
     p((o) => !o);
-  }, c = [
+  }, d = [
     {
       name: "Per Ove Ludvigsen",
       role: "Sportlig leder",
@@ -200,7 +200,7 @@ const l = ["lg", "md", "sm", "xs"], S = {
       role: "Toppspillerutvikler",
       rights: "Ingen rettigheter"
     }
-  ], h = c == null ? void 0 : c.map((o) => ({
+  ], h = d.map((o, g) => ({
     avatar: {
       ...o,
       type: "person"
@@ -208,36 +208,44 @@ const l = ["lg", "md", "sm", "xs"], S = {
     title: o == null ? void 0 : o.name,
     description: o == null ? void 0 : o.role,
     badge: { label: o == null ? void 0 : o.rights },
-    linkIcon: "menu-elipsis-horizontal"
+    menu: {
+      id: "menu" + g,
+      items: [
+        {
+          id: "item1",
+          title: "Hallo"
+        }
+      ]
+    }
   })), u = {
-    items: c == null ? void 0 : c.map((o) => ({
+    items: d.map((o) => ({
       name: o == null ? void 0 : o.name,
       type: "person"
     }))
   };
-  return /* @__PURE__ */ a(k, { children: [
+  return /* @__PURE__ */ a(y, { children: [
     /* @__PURE__ */ e(
-      b,
+      v,
       {
         ...n,
         avatarGroup: u,
         collapsible: !0,
-        expanded: i,
+        expanded: t,
         onClick: m,
         as: "button"
       }
     ),
-    i && /* @__PURE__ */ e(y, { size: "sm", spacing: "none", items: h })
+    t && /* @__PURE__ */ e(I, { spacing: "none", defaultItemSize: "xs", defaultItemColor: "transparent", items: h })
   ] });
 };
 export {
-  F as Collapsible,
-  Q as Colors,
-  G as Controls,
-  _ as Default,
-  P as Loading,
-  j as MediaTypes,
-  N as Selectable,
-  Y as Sizes,
-  S as default
+  q as Collapsible,
+  F as Colors,
+  Q as Controls,
+  P as Default,
+  N as Loading,
+  G as MediaTypes,
+  Y as Selectable,
+  J as Sizes,
+  j as default
 };

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 = 'neutral' | '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_1grve_1", x = {
+  item: p
+}, v = ({
   size: e,
-  color: a = "default",
-  shadow: t = "xs",
-  loading: s,
-  disabled: i,
+  variant: t = "solid",
+  color: a = "neutral",
+  shadow: s = "xs",
+  loading: i,
+  disabled: r,
   hidden: d = !1,
-  active: r = !1,
-  selected: n,
-  expanded: l,
+  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,
+    "data-shadow": a === "transparent" ? "none" : s,
+    "data-active": n,
     "aria-hidden": d,
-    "aria-disabled": i || s,
-    "aria-selected": n,
-    "aria-expanded": l,
+    "aria-disabled": r || i,
+    "aria-selected": l,
+    "aria-expanded": o,
     children: m
   }
 );
 export {
-  x as ListItemBase
+  v as ListItemBase
 };

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

@@ -1,24 +1,16 @@
-import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps } from '../Avatar';
 import { BadgeProps } from '../Badge';
 import { IconName } from '../Icon';
-import { ListItemColor, ListItemSize } from './ListItemBase';
+import { ListItemSize } from './ListItemBase';
+import { ListItemLinkProps } from './ListItemLink';
 import { ListItemMenuProps } from './ListItemMenu';
 import { ListItemSelectProps } from './ListItemSelect';
-export interface ListItemHeaderProps {
-    as?: ElementType;
-    href?: string;
-    onClick?: () => void;
-    onKeyPress?: KeyboardEventHandler;
-    tabIndex?: number;
+export interface ListItemHeaderProps extends ListItemLinkProps {
     /** Header is loading */
     loading?: boolean;
-    /** Header is disabled */
-    disabled?: boolean;
     /** Header size */
     size?: ListItemSize;
-    /** Optional color */
-    color?: ListItemColor;
     /** Optional classname */
     className?: string;
     /** Select controls */
@@ -50,4 +42,4 @@ export interface ListItemHeaderProps {
     /** Custom label */
     children?: ReactNode;
 }
-export declare const ListItemHeader: ({ as, loading, disabled, select, href, onClick, onKeyPress, tabIndex, collapsible, expanded, size, color, title, description, icon, avatar, avatarGroup, linkIcon, linkText, badge, menu, controls, className, children, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemHeader: ({ as, loading, disabled, select, href, onClick, onKeyPress, tabIndex, collapsible, expanded, size, title, description, icon, avatar, avatarGroup, linkIcon, linkText, badge, menu, controls, className, children, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemHeader.js

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