@altinn/altinn-components 0.18.1 → 0.18.2

package/dist/components/AccessAreaList/AccessAreaList.js

@@ -1,12 +1,12 @@
-import { jsx as m } from "react/jsx-runtime";
-import { createElement as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
+import "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { AccessAreaListItem as i } from "./AccessAreaListItem.js";
+import { AccessAreaListItem as m } from "./AccessAreaListItem.js";
 import { ListBase as p } from "../List/ListBase.js";
-const l = ({ items: t, color: o }) => /* @__PURE__ */ m(p, { color: o, spacing: 1, children: t.map((r) => /* @__PURE__ */ e(i, { ...r, key: r.id, ...r })) });
+const d = ({ items: i, color: o }) => /* @__PURE__ */ t(p, { color: o, spacing: 1, children: i.map((r) => /* @__PURE__ */ t(m, { ...r }, r.id)) });
 export {
-  l as AccessAreaList
+  d as AccessAreaList
 };

package/dist/components/AccessAreaList/AccessAreaListItem.js

@@ -4,36 +4,43 @@ import "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { ListItem as a } from "../List/ListItem.js";
-import '../../assets/AccessAreaListItem.css';const b = "_content_7hk0i_1", d = {
-  content: b
-}, j = ({
+import { ListItem as b } from "../List/ListItem.js";
+import '../../assets/AccessAreaListItem.css';const d = "_content_7hk0i_1", f = {
+  content: d
+}, k = ({
   name: c,
   icon: m,
-  size: i = "md",
-  children: r,
+  iconUrl: i,
+  size: r = "md",
+  children: l,
   expanded: t = !1,
-  onClick: l,
-  badgeText: o,
-  colorTheme: e,
+  onClick: p,
+  badgeText: e,
+  colorTheme: o,
   loading: n,
-  ...p
+  ...a
 }) => /* @__PURE__ */ s(
-  a,
+  b,
   {
     as: "button",
-    icon: { svgElement: m, theme: "subtle", color: e },
+    icon: {
+      svgElement: m,
+      iconUrl: i,
+      theme: "subtle",
+      color: o,
+      altText: ""
+    },
     title: c,
-    size: i,
+    size: r,
     collapsible: !n,
     expanded: t,
-    onClick: l,
-    badge: o ? { label: o, color: e } : void 0,
+    onClick: p,
+    badge: e ? { label: e, color: o } : void 0,
     loading: n,
-    ...p,
-    children: t && /* @__PURE__ */ s("div", { className: d.content, children: r })
+    ...a,
+    children: t && /* @__PURE__ */ s("div", { className: f.content, children: l })
   }
 );
 export {
-  j as AccessAreaListItem
+  k as AccessAreaListItem
 };

package/dist/components/Icon/Icon.js

@@ -1,13 +1,22 @@
-import { jsx as o } from "react/jsx-runtime";
-import { c as i } from "../../index-L8X2o7IH.js";
+import { jsx as r } from "react/jsx-runtime";
+import { c as t } from "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { Skeleton as p } from "../Skeleton/Skeleton.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/Icon.css';const l = "_icon_3p8he_1", n = {
-  icon: l
-}, j = ({ loading: a, altText: c, svgElement: r, size: e, color: s, theme: m, className: t }) => r ? /* @__PURE__ */ o(p, { loading: a, variant: "circle", children: /* @__PURE__ */ o("span", { "data-size": e, "data-color": s, "data-theme": m, className: i([n.icon], t), children: /* @__PURE__ */ o(r, { "aria-hidden": "true", "alt-label": c }) }) }) : /* @__PURE__ */ o("span", { className: i([n.icon], t) });
+import '../../assets/Icon.css';const d = "_icon_3p8he_1", a = {
+  icon: d
+}, b = ({
+  loading: c,
+  altText: n,
+  svgElement: o,
+  size: e,
+  color: s,
+  theme: m,
+  iconUrl: l,
+  className: i
+}) => o ? /* @__PURE__ */ r(p, { loading: c, variant: "circle", children: /* @__PURE__ */ r("span", { "data-size": e, "data-color": s, "data-theme": m, className: t([a.icon], i), children: /* @__PURE__ */ r(o, { "aria-hidden": "true", "alt-label": n }) }) }) : l ? /* @__PURE__ */ r(p, { loading: c, variant: "circle", children: /* @__PURE__ */ r("span", { "data-size": e, "data-color": s, "data-theme": m, className: t([a.icon], i), children: /* @__PURE__ */ r("img", { src: l, alt: n, className: a.icon }) }) }) : /* @__PURE__ */ r("span", { className: t([a.icon], i) });
 export {
-  j as Icon
+  b as Icon
 };

package/dist/components/Icon/IconOrAvatar.js

@@ -1,5 +1,5 @@
-import { jsx as o } from "react/jsx-runtime";
-import { isValidElement as n } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { isValidElement as o } from "react";
 import { Icon as i } from "./Icon.js";
 import "../../index-L8X2o7IH.js";
 import { Avatar as s } from "../Avatar/Avatar.js";
@@ -8,17 +8,17 @@ import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 function u(r) {
-  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || n(r);
+  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || o(r);
 }
-const l = (r) => r.svgElement !== void 0, x = ({ size: r, icon: t, iconTheme: f, avatar: e, avatarGroup: m }) => {
-  if (!t && !e && !m)
+const d = (r) => r.svgElement !== void 0 || r.iconUrl !== void 0, x = ({ size: r, icon: e, iconTheme: f, avatar: t, avatarGroup: m }) => {
+  if (!e && !t && !m)
     return null;
-  if (t)
-    return l(t) ? /* @__PURE__ */ o(i, { theme: t.theme || f, size: t.size || r, ...t }) : u(t) ? t : /* @__PURE__ */ o(i, { svgElement: t, theme: f, size: r });
   if (e)
-    return /* @__PURE__ */ o(s, { ...e, size: e.size || r });
+    return d(e) ? /* @__PURE__ */ n(i, { theme: e.theme || f, size: e.size || r, ...e }) : u(e) ? e : /* @__PURE__ */ n(i, { svgElement: e, theme: f, size: r });
+  if (t)
+    return /* @__PURE__ */ n(s, { ...t, size: t.size || r });
   if (m)
-    return /* @__PURE__ */ o(p, { ...m, size: m.size || r });
+    return /* @__PURE__ */ n(p, { ...m, size: m.size || r });
 };
 export {
   x as IconOrAvatar

package/dist/types/lib/components/AccessAreaList/AccessAreaListItem.d.ts

@@ -1,13 +1,11 @@
 import { Color } from '../../types';
 import { SvgElement } from '../Icon';
 import { ListItemProps } from '../List';
-export interface AccessAreaListItemProps extends Pick<ListItemProps, 'size' | 'onClick' | 'expanded' | 'loading'> {
+interface AccessAreaListItemDefaultProps extends Pick<ListItemProps, 'size' | 'onClick' | 'expanded' | 'loading'> {
     /** Id of the item */
     id: string;
     /** Name of the Access Area */
     name: string;
-    /** The icon associated with the Access Area */
-    icon: SvgElement;
     /** Color theme of the Access Area */
     colorTheme?: Color;
     /** Optional Badge to display things like the number of packages a user has in the area */
@@ -15,4 +13,12 @@ export interface AccessAreaListItemProps extends Pick<ListItemProps, 'size' | 'o
     /** Children to render when the item is expanded */
     children?: React.ReactNode;
 }
-export declare const AccessAreaListItem: ({ name, icon, size, children, expanded, onClick, badgeText, colorTheme, loading, ...props }: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;
+export type AccessAreaListItemProps = (AccessAreaListItemDefaultProps & {
+    icon: SvgElement;
+    iconUrl?: never;
+}) | (AccessAreaListItemDefaultProps & {
+    iconUrl: string;
+    icon?: never;
+});
+export declare const AccessAreaListItem: ({ name, icon, iconUrl, size, children, expanded, onClick, badgeText, colorTheme, loading, ...props }: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/lib/components/AccessAreaList/AccessAreaListItem.stories.d.ts

@@ -1,15 +1,14 @@
 import { StoryObj } from '@storybook/react';
-import { default as React } from 'react';
 import { AccessAreaListItemProps } from './AccessAreaListItem';
 declare const meta: {
     title: string;
-    component: ({ name, icon, size, children, expanded, onClick, badgeText, colorTheme, loading, ...props }: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ name, icon, iconUrl, size, children, expanded, onClick, badgeText, colorTheme, loading, ...props }: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     args: {
         id: string;
         size: "md";
         name: string;
-        icon: React.FC<React.SVGProps<SVGSVGElement>>;
+        iconUrl: string;
         badgeText: string;
         colorTheme: "company";
         loading: false;
@@ -26,11 +25,6 @@ declare const meta: {
                 type: "inline-radio";
             };
         };
-        icon: {
-            control: {
-                disable: true;
-            };
-        };
         colorTheme: {
             options: string[];
             control: {

package/dist/types/lib/components/Icon/Icon.d.ts

@@ -4,7 +4,8 @@ export type IconSize = Size | undefined;
 export type IconColor = Color;
 export type IconTheme = Theme;
 export interface IconProps {
-    svgElement: SvgElement | undefined | null | string;
+    svgElement?: SvgElement | undefined | null | string;
+    iconUrl?: string;
     altText?: string;
     loading?: boolean;
     size?: IconSize;
@@ -12,4 +13,4 @@ export interface IconProps {
     theme?: IconTheme;
     className?: string;
 }
-export declare const Icon: ({ loading, altText, svgElement: SvgElement, size, color, theme, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ loading, altText, svgElement: SvgElement, size, color, theme, iconUrl, className, }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "main": "dist/index.js",
   "files": [
     "dist/",