@altinn/altinn-components 0.9.0 → 0.10.0

package/dist/components/Page/Section.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties, ReactNode } from 'react';
+export type SectionTheme = 'inherit' | 'global' | 'neutral' | 'article';
+export type SectionColor = 'transparent' | 'subtle' | 'surface' | 'accent';
+export type SectionElement = 'section' | 'article' | 'header' | 'footer' | 'div';
+export type SectionSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SectionPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SectionMargin = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SectionShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SectionFlex = 'col' | 'row';
+export type SectionAlign = 'initial' | 'start' | 'end' | 'center' | 'stretch';
+export type SectionJustify = 'initial' | 'start' | 'end' | 'center' | 'between';
+export interface SectionProps {
+    as?: SectionElement;
+    theme?: SectionTheme;
+    color?: SectionColor;
+    flex?: SectionFlex;
+    align?: SectionAlign;
+    justify?: SectionJustify;
+    reverse?: boolean;
+    padding?: SectionPadding;
+    spacing?: SectionSpacing;
+    margin?: SectionMargin;
+    shadow?: SectionShadow;
+    inset?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const Section: ({ as, theme, color, flex, reverse, align, justify, padding, spacing, margin, shadow, inset, className, style, children, }: SectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Page/Section.js

@@ -0,0 +1,42 @@
+import { jsx as x } from "react/jsx-runtime";
+import { c as h } from "../../index-L8X2o7IH.js";
+import '../../assets/Section.css';const _ = "_section_1qkfl_1", j = {
+  section: _
+}, k = ({
+  as: a = "section",
+  theme: t = "inherit",
+  color: n = "transparent",
+  flex: e = "col",
+  reverse: o = !1,
+  align: s = "initial",
+  justify: i = "initial",
+  padding: c = "none",
+  spacing: d = "none",
+  margin: r = "none",
+  shadow: l = "none",
+  inset: m = !1,
+  className: p,
+  style: f,
+  children: g
+}) => /* @__PURE__ */ x(
+  a,
+  {
+    className: h(j.section, p),
+    style: f,
+    "data-flex": e,
+    "data-reverse": o,
+    "data-align": s,
+    "data-justify": i,
+    "data-theme": t,
+    "data-color": n,
+    "data-inset": m,
+    "data-padding": c,
+    "data-spacing": d,
+    "data-margin": r,
+    "data-shadow": l,
+    children: g
+  }
+);
+export {
+  k as Section
+};

package/dist/components/Page/SectionHeader.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
-export interface SectionHeaderProps {
-    padding?: boolean;
-    margin?: boolean;
+import { SectionProps } from './Section';
+export interface SectionHeaderProps extends SectionProps {
     children?: ReactNode;
 }
-export declare const SectionHeader: ({ margin, children }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionHeader: ({ flex, align, justify, children, ...rest }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Page/SectionHeader.js

@@ -1,7 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
-import '../../assets/SectionHeader.css';const s = "_header_77w1b_1", t = {
-  header: s
-}, o = ({ margin: e = !1, children: a }) => /* @__PURE__ */ r("header", { "data-margin": e, className: t.header, children: a });
+import { jsx as c } from "react/jsx-runtime";
+import { Section as i } from "./Section.js";
+const p = ({
+  flex: e = "row",
+  align: r = "center",
+  justify: o = "between",
+  children: t,
+  ...n
+}) => /* @__PURE__ */ c(i, { as: "header", flex: e, align: r, justify: o, ...n, children: t });
 export {
-  o as SectionHeader
+  p as SectionHeader
 };

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

@@ -1,5 +1,7 @@
 export * from './PageBase';
+export * from './PageNav';
 export * from './PageHeader';
-export * from './SectionBase';
 export * from './SectionHeader';
 export * from './SectionFooter';
+export * from './Article';
+export * from './Section';

package/dist/components/Page/index.js

@@ -1,12 +1,16 @@
 import { PageBase as r } from "./PageBase.js";
-import { PageHeader as a } from "./PageHeader.js";
-import { SectionBase as m } from "./SectionBase.js";
+import { PageNav as a } from "./PageNav.js";
+import { PageHeader as m } from "./PageHeader.js";
 import { SectionHeader as x } from "./SectionHeader.js";
 import { SectionFooter as i } from "./SectionFooter.js";
+import { Article as n } from "./Article.js";
+import { Section as S } from "./Section.js";
 export {
+  n as Article,
   r as PageBase,
-  a as PageHeader,
-  m as SectionBase,
+  m as PageHeader,
+  a as PageNav,
+  S as Section,
   i as SectionFooter,
   x as SectionHeader
 };

package/dist/components/ResourceList/ResourceList.js

@@ -2,8 +2,8 @@ import { jsx as e } from "react/jsx-runtime";
 import { createElement as i } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
+import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
 import { ResourceListItem as p } from "./ResourceListItem.js";
 import { ListBase as s } from "../List/ListBase.js";
 const x = ({ items: o, size: t = "md", ...m }) => /* @__PURE__ */ e(s, { ...m, children: o.map((r) => /* @__PURE__ */ i(p, { ...r, key: r.id, size: t })) });

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

@@ -1,11 +1,9 @@
-import { ListItemSize } from '../List';
-export interface ResourceListItemProps {
+import { ListItemProps } from '../List';
+export interface ResourceListItemProps extends Pick<ListItemProps, 'size' | 'controls' | 'as' | 'onClick'> {
     id: string;
     ownerName: string;
     resourceName: string;
     ownerLogoUrl?: string;
     ownerLogoUrlAlt?: string;
-    size?: ListItemSize;
-    controls?: React.ReactNode;
 }
-export declare const ResourceListItem: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, size, controls, }: ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ResourceListItem: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, ...props }: ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ResourceList/ResourceListItem.js

@@ -1,30 +1,28 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
+import "../Icon/SvgIcon.js";
+import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
-import { ListItem as a } from "../List/ListItem.js";
+import { ListItem as e } from "../List/ListItem.js";
 const u = ({
   ownerName: t,
   resourceName: r,
-  ownerLogoUrlAlt: m,
-  ownerLogoUrl: i,
-  size: o = "md",
-  controls: p
-}) => /* @__PURE__ */ e(
-  a,
+  ownerLogoUrlAlt: i,
+  ownerLogoUrl: m,
+  ...o
+}) => /* @__PURE__ */ p(
+  e,
   {
     avatar: {
       name: t,
-      imageUrl: i,
-      imageUrlAlt: m,
+      imageUrl: m,
+      imageUrlAlt: i,
       type: "company"
     },
     title: r,
     description: t,
-    size: o,
-    controls: p
+    ...o
   }
 );
 export {

package/dist/components/Searchbar/Searchbar.d.ts

@@ -1,9 +1,9 @@
-import { AutocompleteProps } from './Autocomplete';
+import { AutocompleteProps } from '../Autocomplete';
 import { SearchFieldProps } from './SearchField';
 export interface SearchbarProps extends SearchFieldProps {
     className?: string;
     autocomplete?: AutocompleteProps;
-    expanded: boolean;
+    expanded?: boolean;
     tabIndex?: number;
 }
 export declare const Searchbar: ({ className, autocomplete, expanded, onClose, tabIndex, ...search }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Searchbar/Searchbar.js

@@ -1,5 +1,5 @@
 import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { Autocomplete as s } from "./Autocomplete.js";
+import { Autocomplete as s } from "../Autocomplete/Autocomplete.js";
 import { SearchField as a } from "./SearchField.js";
 import { SearchbarBase as h } from "./SearchbarBase.js";
 const j = ({

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,5 @@
+import { TimelineSectionProps } from '.';
+export interface TimelineProps {
+    items: TimelineSectionProps[];
+}
+export declare const Timeline: ({ items }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,8 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createElement as i } from "react";
+import { TimelineBase as m } from "./TimelineBase.js";
+import { TimelineSection as l } from "./TimelineSection.js";
+const a = ({ items: r }) => /* @__PURE__ */ n(m, { children: r == null ? void 0 : r.map((e, o) => /* @__PURE__ */ i(l, { ...e, key: o }, e.children)) });
+export {
+  a as Timeline
+};

package/dist/components/Timeline/Timeline.stories.js

@@ -0,0 +1,65 @@
+import "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { Timeline as e } from "./Timeline.js";
+const s = {
+  title: "Timeline/Timeline",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    items: [
+      {
+        children: "Timeline section"
+      },
+      {
+        datetime: "2024-12-12 11:15",
+        dateline: "12. desember 2024",
+        children: "With byline"
+      },
+      {
+        size: "xs",
+        avatar: {
+          name: "Per Person"
+        },
+        datetime: "2024-12-12 11:15",
+        dateline: "12. desember 2024",
+        children: "XS avatar and byline"
+      },
+      {
+        size: "sm",
+        avatar: {
+          name: "Per Person"
+        },
+        datetime: "2024-12-12 11:15",
+        dateline: "12. desember 2024",
+        children: "Small avatar and byline"
+      },
+      {
+        size: "lg",
+        avatar: {
+          type: "company",
+          name: "Bergen bar"
+        },
+        byline: "Bergen bar",
+        datetime: "2024-12-12 11:15",
+        dateline: "12. desember 2024",
+        children: "Large avatar and byline"
+      }
+    ]
+  }
+}, d = {
+  args: {}
+}, o = {
+  args: {
+    items: [{}]
+  }
+};
+export {
+  o as ActivityLog,
+  d as Default,
+  s as default
+};

package/dist/components/Timeline/TimelineBase.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface TimelineBaseProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const TimelineBase: ({ className, children }: TimelineBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Timeline/TimelineBase.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
+import '../../assets/TimelineBase.css';const s = "_timeline_1o6zh_1", n = {
+  timeline: s
+}, r = ({ className: e, children: i }) => /* @__PURE__ */ t("div", { className: m(n.timeline, e), children: i });
+export {
+  r as TimelineBase
+};

package/dist/components/Timeline/TimelineSection.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { AvatarProps, BylineSize, IconName } from '..';
+export interface TimelineSectionProps {
+    loading?: boolean;
+    seen?: boolean;
+    size?: BylineSize;
+    datetime?: string;
+    dateline?: string;
+    byline?: ReactNode;
+    avatar?: AvatarProps;
+    icon?: IconName;
+    children?: ReactNode;
+}
+export declare const TimelineSection: ({ loading, size, seen, datetime, dateline, byline, avatar, children, }: TimelineSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Timeline/TimelineSection.js

@@ -0,0 +1,40 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import { Avatar as _ } from "../Avatar/Avatar.js";
+import "../RootProvider/RootProvider.js";
+import { Byline as p } from "../Byline/Byline.js";
+import '../../assets/TimelineSection.css';const u = "_section_1nusr_1", h = "_sidebar_1nusr_6", l = "_media_1nusr_19", N = "_dot_1nusr_26", v = "_border_1nusr_37", x = "_content_1nusr_52", o = {
+  section: u,
+  sidebar: h,
+  media: l,
+  dot: N,
+  border: v,
+  content: x
+}, k = ({
+  loading: e,
+  size: s = "xs",
+  seen: c = !0,
+  datetime: i,
+  dateline: n,
+  byline: t,
+  avatar: d,
+  children: m
+}) => /* @__PURE__ */ a("section", { className: o.section, "data-size": s, "data-seen": c, children: [
+  /* @__PURE__ */ a("aside", { className: o.sidebar, "data-size": s, children: [
+    (t || n) && /* @__PURE__ */ r("div", { className: o.media, "data-size": s, children: d && /* @__PURE__ */ r(_, { ...d, size: s }) || /* @__PURE__ */ r("div", { className: o.dot, "data-seen": c }) }),
+    /* @__PURE__ */ r("div", { className: o.border, "data-seen": c })
+  ] }),
+  /* @__PURE__ */ a("div", { className: o.content, "data-size": s, children: [
+    (t || n) && /* @__PURE__ */ a(p, { loading: e, datetime: i, size: s, children: [
+      t && /* @__PURE__ */ r("strong", { children: t && n ? t + ", " : t }),
+      n && /* @__PURE__ */ r("span", { children: n })
+    ] }),
+    m
+  ] })
+] });
+export {
+  k as TimelineSection
+};

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

@@ -0,0 +1,3 @@
+export * from './TimelineBase';
+export * from './TimelineSection';
+export * from './Timeline';

package/dist/components/Timeline/index.js

@@ -0,0 +1,8 @@
+import { TimelineBase as o } from "./TimelineBase.js";
+import { TimelineSection as r } from "./TimelineSection.js";
+import { Timeline as t } from "./Timeline.js";
+export {
+  t as Timeline,
+  o as TimelineBase,
+  r as TimelineSection
+};

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

@@ -1,16 +1,16 @@
 import { ReactNode } from 'react';
+import { ToolbarAccountMenuProps } from './ToolbarAccountMenu.tsx';
 import { ToolbarFilterProps } from './ToolbarFilter.tsx';
-import { ToolbarMenuProps } from './ToolbarMenu.tsx';
 import { ToolbarSearchProps } from './ToolbarSearch.tsx';
 export type FilterState = Record<string, ToolbarFilterProps['value']>;
 export interface ToolbarProps {
+    accountMenu?: ToolbarAccountMenuProps;
     filters?: ToolbarFilterProps[];
     search?: ToolbarSearchProps;
-    menu?: ToolbarMenuProps;
     filterState?: FilterState;
     getFilterLabel?: (name: string, value: ToolbarFilterProps['value']) => string;
     onFilterStateChange?: (state: FilterState) => void;
     showResultsLabel?: string;
     children?: ReactNode;
 }
-export declare const Toolbar: ({ filters, filterState, onFilterStateChange, search, menu, getFilterLabel, children, showResultsLabel, }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toolbar: ({ filters, filterState, onFilterStateChange, search, accountMenu, getFilterLabel, children, showResultsLabel, }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Toolbar/Toolbar.js

@@ -1,23 +1,23 @@
 "use client";
 import { jsxs as L, jsx as i } from "react/jsx-runtime";
 import { useState as u, useMemo as T } from "react";
-import { useRootContext as M } from "../RootProvider/RootProvider.js";
-import { ToolbarAdd as k } from "./ToolbarAdd.js";
-import { ToolbarBase as B } from "./ToolbarBase.js";
-import { ToolbarFilter as V } from "./ToolbarFilter.js";
-import { ToolbarMenu as $ } from "./ToolbarMenu.js";
+import { useRootContext as k } from "../RootProvider/RootProvider.js";
+import { ToolbarAccountMenu as B } from "./ToolbarAccountMenu.js";
+import { ToolbarAdd as M } from "./ToolbarAdd.js";
+import { ToolbarBase as V } from "./ToolbarBase.js";
+import { ToolbarFilter as $ } from "./ToolbarFilter.js";
 import { ToolbarSearch as q } from "./ToolbarSearch.js";
 const g = (n, l) => l || `toolbar-filter-${n}`, O = ({
   filters: n = [],
   filterState: l,
   onFilterStateChange: s,
   search: m,
-  menu: b,
+  accountMenu: b,
   getFilterLabel: y,
   children: S,
   showResultsLabel: h
 }) => {
-  const { openId: x, closeAll: A } = M(), [C, I] = u(
+  const { openId: x, closeAll: A } = k(), [C, I] = u(
     l ?? {}
   ), c = typeof s == "function" ? s : I, t = l || C, [d, f] = u(
     (n == null ? void 0 : n.filter((o) => !(o.removable && typeof t[o.name] > "u")).map((o) => o.name)) ?? []
@@ -43,11 +43,11 @@ const g = (n, l) => l || `toolbar-filter-${n}`, O = ({
   }, v = (o, e) => {
     f((r) => [...r, o]), x(e);
   };
-  return /* @__PURE__ */ L(B, { children: [
-    b && /* @__PURE__ */ i($, { ...b }),
+  return /* @__PURE__ */ L(V, { children: [
+    b && /* @__PURE__ */ i(B, { ...b }),
     m && /* @__PURE__ */ i(q, { ...m }),
     N.map((o) => /* @__PURE__ */ i(
-      V,
+      $,
       {
         id: g(o.name, o.id),
         showResultsLabel: h,
@@ -68,7 +68,7 @@ const g = (n, l) => l || `toolbar-filter-${n}`, O = ({
       o.name
     )),
     (a == null ? void 0 : a.length) > 0 && /* @__PURE__ */ i(
-      k,
+      M,
       {
         id: "toolbar-filter-add",
         items: a.map((o) => {