@altinn/altinn-components 0.17.0 → 0.18.0

package/README.md

@@ -23,11 +23,11 @@ To install the package, run the following command:
 
 ```bash
 # for npm users
-npm install @altinn/components
+npm install @altinn/altinn-components
 # for yarn users
-yarn add @altinn/components
+yarn add @altinn/altinn-components
 # for pnpm users
-pnpm add @altinn/components
+pnpm add @altinn/altinn-components
 ```
 
 Tested with Node.js 20.x <
@@ -75,42 +75,46 @@ The tags are:
 - `@experimental` - The component is experimental and is work in progress. Recommended not to use.
 - `@deprecated` - The component is deprecated and should not be used.
 
-The main motivation behind having tags is relieving the pressure of having to make everything stable before releasing it for use. 
+The main motivation behind having tags is relieving the pressure of having to make everything stable before releasing it for use.
 It also allows us to get feedback on the components in an early stage.
 
 ## Storybook test runner (accessibility)
+
 Config for the storybook test runner is placed under .storybook/test-runner.ts
 
+First you will need to run the storybook:
 
-First you will need to run the storybook: 
 ```
 pnpm storybook
 ```
+
 -
 
 When that is done, in another terminal run following command to test all the stories for accessibility
+
 ```
 pnpm test-storybook
 ```
- - 
 
-To test a specific file, run... 
+-
+
+To test a specific file, run...
+
 ```
 pnpm test-storybook --watch
 ```
-...and press 'p' to choose filtering by file name. Then start typing the name of the storybook file f.ex. 'badge'. The helper will list all the files matching your input. 
 
-Hit enter to test the file. 
+...and press 'p' to choose filtering by file name. Then start typing the name of the storybook file f.ex. 'badge'. The helper will list all the files matching your input.
+
+Hit enter to test the file.
 
 If there is more files matching your input, they will also be tested.
 
-- 
-If the storybook cli runs all the tests even with --watch flag, alternatively you can simply run: 
+- If the storybook cli runs all the tests even with --watch flag, alternatively you can simply run:
 
 ```
 pnpm test-storybook --watch 'MyComponent.stories.tsx'
 ```
 
-- 
-To skip the test add 'skip-test' string into the tags array for the test you want to exclude. That option is defined in the test-runner.ts file. 
-Currently all the tests under stories/Demo and docs are excluded as the accessibility test is not needed there.
+- To skip the test add 'skip-test' string into the tags array for the test you want to exclude. That option is defined in the test-runner.ts file.
+  Currently all the tests under stories/Demo and docs are excluded as the accessibility test is not needed there.

package/dist/components/AccessAreaList/AccessAreaListItem.js

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

package/dist/components/AccessPackageList/AccessPackageListItem.js

@@ -5,21 +5,13 @@ import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { ListItem as i } from "../List/ListItem.js";
-const d = ({ as: r = "button", icon: t, title: m, ...o }) => /* @__PURE__ */ e(
-  i,
-  {
-    avatar: t ? {
-      imageUrl: t,
-      type: "company",
-      name: m || ""
-    } : void 0,
-    as: r,
-    size: "sm",
-    color: "accent",
-    title: m,
-    ...o
-  }
-);
+import { S as s } from "../../Package-ASRzCHA7.js";
+const k = ({
+  as: t = "button",
+  title: m,
+  color: o = "neutral",
+  ...r
+}) => /* @__PURE__ */ e(i, { icon: s, as: t, size: "sm", title: m, color: o, theme: "subtle", ...r });
 export {
-  d as AccessPackageListItem
+  k as AccessPackageListItem
 };

package/dist/components/List/ListItemHeader.js

@@ -1,22 +1,22 @@
 import { jsxs as i, jsx as e, Fragment as p } from "react/jsx-runtime";
-import { c as g } from "../../index-L8X2o7IH.js";
-import { isValidElement as y } from "react";
+import { c as y } from "../../index-L8X2o7IH.js";
+import { isValidElement as B } from "react";
 import { Icon as d } from "../Icon/Icon.js";
-import { Badge as B } from "../Badge/Badge.js";
+import { Badge as M } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemLink as M } from "./ListItemLink.js";
-import { ListItemLabel as v } from "./ListItemLabel.js";
-import { ListItemIcon as C } from "./ListItemIcon.js";
-import { ListItemControls as F } from "./ListItemControls.js";
-import { ListItemSelect as H } from "./ListItemSelect.js";
+import { ListItemLink as v } from "./ListItemLink.js";
+import { ListItemLabel as C } from "./ListItemLabel.js";
+import { ListItemIcon as F } from "./ListItemIcon.js";
+import { ListItemControls as H } from "./ListItemControls.js";
+import { ListItemSelect as V } from "./ListItemSelect.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/ListItemHeader.css';const V = "_header_13dzg_1", b = "_link_13dzg_39", r = {
-  header: V,
-  link: b
+import '../../assets/ListItemHeader.css';const b = "_header_13dzg_1", g = "_link_13dzg_39", m = {
+  header: b,
+  link: g
 }, X = ({
   as: f,
-  loading: m,
+  loading: t,
   disabled: I,
   select: c,
   href: h,
@@ -30,7 +30,7 @@ import '../../assets/ListItemHeader.css';const V = "_header_13dzg_1", b = "_link
   avatar: N,
   avatarGroup: S,
   chevron: l,
-  badge: t,
+  badge: r,
   controls: o,
   className: j,
   children: E
@@ -41,35 +41,35 @@ import '../../assets/ListItemHeader.css';const V = "_header_13dzg_1", b = "_link
     md: "lg",
     lg: "lg",
     xl: "xl"
-  }[s], a = () => t && typeof t == "object" && "label" in t ? /* @__PURE__ */ e(B, { ...t }) : y(t) ? t : null;
-  return /* @__PURE__ */ i("header", { className: r.header, "data-size": s, children: [
-    /* @__PURE__ */ i("div", { className: r.link, children: [
-      c && /* @__PURE__ */ e(H, { ...c, className: r.select, size: n }),
+  }[s], a = () => r && !t && typeof r == "object" && "label" in r ? /* @__PURE__ */ e(M, { ...r }) : B(r) ? r : null;
+  return /* @__PURE__ */ i("header", { className: m.header, "data-size": s, children: [
+    /* @__PURE__ */ i("div", { className: m.link, children: [
+      c && /* @__PURE__ */ e(V, { ...c, className: m.select, size: n }),
       /* @__PURE__ */ i(
-        M,
+        v,
         {
           interactive: !!o,
-          className: g(r.link, j),
+          className: y(m.link, j),
           as: f,
           href: h,
           onClick: L,
           onKeyPress: x,
           tabIndex: z,
-          loading: m,
-          disabled: I || m,
+          loading: t,
+          disabled: I || t,
           size: s,
           children: [
             /* @__PURE__ */ e(
-              C,
+              F,
               {
-                loading: m,
+                loading: t,
                 size: n,
                 icon: u,
                 avatar: N,
                 avatarGroup: S
               }
             ),
-            /* @__PURE__ */ e(v, { size: s, loading: m, title: k, description: _, children: E }),
+            /* @__PURE__ */ e(C, { size: s, loading: t, title: k, description: _, children: E }),
             o && /* @__PURE__ */ i(p, { children: [
               a(),
               l && /* @__PURE__ */ e(d, { svgElement: l, size: n })
@@ -78,7 +78,7 @@ import '../../assets/ListItemHeader.css';const V = "_header_13dzg_1", b = "_link
         }
       )
     ] }),
-    /* @__PURE__ */ e(F, { className: r.controls, children: o || /* @__PURE__ */ i(p, { children: [
+    /* @__PURE__ */ e(H, { className: m.controls, children: o && !t ? o : /* @__PURE__ */ i(p, { children: [
       a(),
       l && /* @__PURE__ */ e(d, { svgElement: l, size: n })
     ] }) })

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

@@ -1,9 +1,18 @@
+import { Color } from '../../types';
 import { SvgElement } from '../Icon';
 import { ListItemProps } from '../List';
-export interface AccessAreaListItemProps extends Pick<ListItemProps, 'size' | 'onClick' | 'expanded'> {
+export interface AccessAreaListItemProps 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 */
+    badgeText?: string;
+    /** Children to render when the item is expanded */
     children?: React.ReactNode;
 }
-export declare const AccessAreaListItem: ({ name, icon, size, children, expanded, onClick, ...props }: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccessAreaListItem: ({ name, icon, size, children, expanded, onClick, badgeText, colorTheme, loading, ...props }: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,14 +3,16 @@ import { default as React } from 'react';
 import { AccessAreaListItemProps } from './AccessAreaListItem';
 declare const meta: {
     title: string;
-    component: ({ name, icon, size, children, expanded, onClick, ...props }: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ name, icon, 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>>;
-        children: import("react/jsx-runtime").JSX.Element;
+        badgeText: string;
+        colorTheme: "company";
+        loading: false;
     };
     argTypes: {
         expanded: {
@@ -29,9 +31,16 @@ declare const meta: {
                 disable: true;
             };
         };
+        colorTheme: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const AreaListItemStory: Story;
+export declare const AreaWithPackages: (args: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AllAreas: (args: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/AccessPackageList/AccessPackageList.stories.d.ts

@@ -1,15 +1,17 @@
-import { StoryObj } from '@storybook/react';
+import { AccessPackageListProps } from './AccessPackageList';
 declare const meta: {
     title: string;
-    component: ({ items, spacing, ...props }: import('./AccessPackageList').AccessPackageListProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ items, spacing, ...props }: AccessPackageListProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
-    args: {
-        items: {
-            id: string;
-            title: string;
-        }[];
+    args: {};
+    argTypes: {
+        spacing: {
+            options: string[];
+            control: {
+                type: "inline-radio";
+            };
+        };
     };
 };
 export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const AccessPackageListStory: Story;
+export declare const AccessPackageListStory: (args: AccessPackageListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/AccessPackageList/AccessPackageListItem.d.ts

@@ -1,6 +1,5 @@
 import { ListItemProps } from '../List';
-export interface AccessPackageListItemProps extends Pick<ListItemProps, 'onClick' | 'as' | 'title' | 'description' | 'size' | 'controls'> {
+export interface AccessPackageListItemProps extends Pick<ListItemProps, 'color' | 'onClick' | 'as' | 'title' | 'description' | 'size' | 'controls' | 'loading'> {
     id: string;
-    icon?: string;
 }
-export declare const AccessPackageListItem: ({ as, icon, title, ...props }: AccessPackageListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccessPackageListItem: ({ as, title, color, ...props }: AccessPackageListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/ResourceList/ResourceList.stories.d.ts

@@ -5,13 +5,6 @@ declare const meta: {
     tags: string[];
     parameters: {};
     args: {
-        items: {
-            id: string;
-            ownerName: string;
-            resourceName: string;
-            ownerLogoUrl: string;
-            ownerLogoUrlAlt: string;
-        }[];
         defaultItemSize: "md";
     };
     argTypes: {

package/dist/types/lib/components/ResourceList/ResourceListItem.d.ts

@@ -1,9 +1,17 @@
+import { BadgeProps } from '../Badge';
 import { ListItemProps } from '../List';
-export interface ResourceListItemProps extends Pick<ListItemProps, 'size' | 'controls' | 'as' | 'onClick'> {
+export interface ResourceListItemProps extends Pick<ListItemProps, 'size' | 'controls' | 'as' | 'onClick' | 'loading'> {
+    /** Unique identifier for the resource item */
     id: string;
+    /** Name of the owner of the resource */
     ownerName: string;
+    /** Name of the resource */
     resourceName: string;
+    /** URL of the owner's logo (optional) */
     ownerLogoUrl?: string;
+    /** Alternative text for the owner's logo (optional) */
     ownerLogoUrlAlt?: string;
+    /** Badge properties for the resource item (optional) */
+    badge?: BadgeProps;
 }
 export declare const ResourceListItem: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, ...props }: ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/ResourceList/ResourceListItem.stories.d.ts

@@ -7,6 +7,7 @@ declare const meta: {
     args: {
         size: "md";
         id: string;
+        loading: false;
         resourceName: string;
         ownerName: string;
         ownerLogoUrl: string;

package/package.json

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