@altinn/altinn-components 0.6.2 → 0.6.4

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

@@ -0,0 +1,424 @@
+import { MenuItems as r } from "./MenuItems.js";
+const o = {
+  title: "Menu/MenuItems",
+  component: r,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, a = {
+  args: {
+    groups: {
+      shortcuts: {
+        title: "Snarveier",
+        defaultItemColor: "default"
+      }
+    },
+    defaultItemColor: "subtle",
+    items: [
+      {
+        id: "innboks",
+        groupId: "1",
+        size: "lg",
+        icon: "inbox",
+        title: "Innboks",
+        color: "strong",
+        badge: { color: "alert", label: "4" }
+      },
+      {
+        id: "utkast",
+        groupId: "2",
+        icon: "doc-pencil",
+        title: "Utkast",
+        badge: {
+          label: "3"
+        }
+      },
+      {
+        id: "sendt",
+        groupId: "2",
+        icon: "file-checkmark",
+        selected: !0,
+        title: "Sendt",
+        badge: {
+          label: "2"
+        }
+      },
+      {
+        id: "lagret",
+        groupId: "3",
+        icon: "bookmark",
+        title: "Lagrede søk",
+        badge: {
+          label: "5"
+        }
+      },
+      {
+        id: "arkivert",
+        groupId: "4",
+        icon: "archive",
+        title: "Arkivert",
+        badge: {
+          label: "100+"
+        }
+      },
+      {
+        id: "papirkurv",
+        groupId: "4",
+        disabled: !0,
+        icon: "trash",
+        title: "Papirkurv",
+        badge: {
+          label: "45"
+        }
+      },
+      {
+        id: "users",
+        groupId: "shortcuts",
+        icon: "person-group",
+        title: "Brukere"
+      },
+      {
+        id: "settings",
+        groupId: "shortcuts",
+        icon: "cog",
+        title: "Innstillinger"
+      }
+    ]
+  }
+}, l = {
+  args: {
+    groups: {},
+    defaultItemColor: "subtle",
+    items: [
+      {
+        id: "person",
+        groupId: "1",
+        size: "lg",
+        avatar: {
+          type: "person",
+          name: "Erik Huseklepp"
+        },
+        title: "Erik Huseklepp"
+      },
+      {
+        id: "profil",
+        groupId: "2",
+        icon: "person-circle",
+        title: "Kontaktinformasjon"
+      },
+      {
+        id: "varslinger",
+        groupId: "2",
+        icon: "bell",
+        title: "Varslingsinnstillinger"
+      },
+      {
+        id: "bookmarks",
+        groupId: "3",
+        icon: "bookmark",
+        title: "Favoritter"
+      },
+      {
+        id: "grupper",
+        groupId: "3",
+        icon: "hexagon-grid",
+        title: "Grupper"
+      },
+      {
+        id: "logg",
+        groupId: "4",
+        icon: "clock-dashed",
+        title: "Aktivitetslogg"
+      }
+    ]
+  }
+}, n = {
+  args: {
+    groups: {},
+    defaultItemColor: "subtle",
+    items: [
+      {
+        id: "company",
+        groupId: "1",
+        size: "lg",
+        avatar: {
+          type: "company",
+          name: "Bergen Bar"
+        },
+        title: "Bergen Bar"
+      },
+      {
+        id: "profil",
+        groupId: "2",
+        icon: "buildings2",
+        title: "Firmaprofil"
+      },
+      {
+        id: "brukere",
+        groupId: "3",
+        icon: "person-group",
+        title: "Brukere"
+      },
+      {
+        id: "grupper",
+        groupId: "3",
+        icon: "hexagon-grid",
+        title: "Grupper"
+      },
+      {
+        id: "logg",
+        groupId: "4",
+        icon: "clock-dashed",
+        title: "Aktivitetslogg"
+      }
+    ]
+  }
+}, d = {
+  args: {
+    groups: {
+      a1: {
+        title: "Deg selv, favoritter og grupper"
+      },
+      b1: {
+        id: "companies",
+        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"
+      }
+    ]
+  }
+}, t = {
+  args: {
+    defaultItemColor: "subtle",
+    groups: {
+      settings: {
+        defaultItemColor: "neutral"
+      }
+    },
+    items: [
+      {
+        id: "account",
+        groupId: "account",
+        size: "lg",
+        avatar: {
+          type: "person",
+          name: "Herman Friele"
+        },
+        title: "Herman Friele",
+        description: "Fødselsnr: XX.XX.XXXX"
+      },
+      {
+        id: "innboks",
+        groupId: "apps",
+        size: "lg",
+        icon: "inbox",
+        title: "Innboks",
+        collapsible: !0,
+        items: [
+          {
+            id: "utkast",
+            groupId: "1",
+            icon: "doc-pencil",
+            title: "Utkast"
+          },
+          {
+            id: "sent",
+            groupId: "1",
+            icon: "file-checkmark",
+            selected: !0,
+            title: "Sendt"
+          },
+          {
+            id: "bookmarks",
+            groupId: "3",
+            icon: "bookmark",
+            title: "Lagrede søk"
+          },
+          {
+            id: "arkiv",
+            groupId: "4",
+            icon: "archive",
+            title: "Arkivert"
+          },
+          {
+            id: "trash",
+            groupId: "4",
+            icon: "trash",
+            title: "Papirkurv"
+          }
+        ]
+      },
+      {
+        id: "tilganger",
+        groupId: "apps",
+        size: "lg",
+        icon: "bookmark",
+        title: "Tilganger"
+      },
+      {
+        id: "skjema",
+        groupId: "apps",
+        size: "lg",
+        icon: "menu-grid",
+        title: "Alle skjema"
+      },
+      {
+        id: "settings",
+        groupId: "settings",
+        icon: "cog",
+        title: "Innstillinger"
+      }
+    ]
+  }
+}, s = {
+  args: {
+    ...t.args,
+    items: [...t.args.items].map((e) => e.collapsible ? {
+      ...e,
+      expanded: !0
+    } : e)
+  }
+}, g = {
+  args: {
+    defaultItemColor: "subtle",
+    groups: {
+      "level-1": {
+        divider: !0
+      },
+      "level-2": {
+        divider: !0
+      }
+    },
+    items: [
+      {
+        id: "people",
+        groupId: "level-1",
+        size: "lg",
+        icon: "menu-grid",
+        title: "Alle skjema",
+        expanded: !0,
+        items: [
+          {
+            groupId: "level-2",
+            name: "tema",
+            icon: "teddy-bear",
+            title: "Tema",
+            expanded: !0,
+            items: [
+              {
+                id: "c1",
+                groupId: "level-3",
+                title: "Kategori 1"
+              },
+              {
+                groupId: "level-3",
+                id: "c2",
+                title: "Kategori 2"
+              },
+              {
+                groupId: "level-3",
+                id: "c3",
+                title: "Kategori 3"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+};
+export {
+  d as AccountMenu,
+  t as CollapsibleGlobalMenu,
+  n as CompanyMenu,
+  g as DrilldownMenu,
+  s as ExpandedGlobalMenu,
+  a as InboxMenu,
+  l as PersonMenu,
+  o as default
+};

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

@@ -0,0 +1,19 @@
+import { ChangeEventHandler } from 'react';
+import { BadgeProps } from '../Badge';
+import { MenuItemSize } from './MenuItemBase';
+export type MenuOptionType = 'checkbox' | 'radio';
+export interface MenuOptionProps {
+    value: string | number;
+    label: string;
+    groupId?: string;
+    size?: MenuItemSize;
+    name?: string;
+    title?: string;
+    description?: string;
+    badge?: BadgeProps;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: ChangeEventHandler;
+    type?: MenuOptionType;
+}
+export declare const MenuOption: ({ size, type, name, value, label, title, description, badge, checked, disabled, onChange, }: MenuOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuOption.js

@@ -0,0 +1,32 @@
+import { jsxs as _, jsx as n } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { CheckboxIcon as b } from "../Icon/CheckboxIcon.js";
+import { RadioIcon as f } from "../Icon/RadioIcon.js";
+import { MenuItemBase as x } from "./MenuItemBase.js";
+import { MenuItemLabel as I } from "./MenuItemLabel.js";
+import '../../assets/MenuOption.css';const N = "_label_1am63_1", h = "_input_1am63_5", M = "_icon_1am63_10", t = {
+  label: N,
+  input: h,
+  icon: M
+}, R = ({
+  size: e = "sm",
+  type: a,
+  name: m,
+  value: r,
+  label: s,
+  title: i,
+  description: l,
+  badge: c,
+  checked: o = !1,
+  disabled: p,
+  onChange: u
+}) => /* @__PURE__ */ _(x, { className: t.label, disabled: p, selected: o, size: e, badge: c, as: "label", children: [
+  /* @__PURE__ */ n("input", { className: t.input, name: m, value: r, type: a, checked: o, onChange: u }),
+  a === "checkbox" && /* @__PURE__ */ n(b, { checked: o, hover: !0, className: t.icon }),
+  a === "radio" && /* @__PURE__ */ n(f, { checked: o, hover: !0, className: t.icon }),
+  /* @__PURE__ */ n(I, { title: i, description: l, size: e, children: s })
+] });
+export {
+  R as MenuOption
+};

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

@@ -0,0 +1,46 @@
+import { MenuOption as e } from "./MenuOption.js";
+const s = {
+  title: "Menu/MenuOption",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    value: "",
+    label: "Label"
+  }
+}, c = {
+  args: {
+    type: "checkbox",
+    title: "Title",
+    size: "sm",
+    checked: !1
+  }
+}, o = {
+  args: {
+    type: "checkbox",
+    title: "Title",
+    size: "sm",
+    checked: !0
+  }
+}, a = {
+  args: {
+    type: "radio",
+    title: "Title",
+    size: "sm",
+    checked: !1
+  }
+}, i = {
+  args: {
+    type: "radio",
+    title: "Title",
+    size: "sm",
+    checked: !0
+  }
+};
+export {
+  c as Checkbox,
+  o as CheckboxChecked,
+  a as Radio,
+  i as RadioChecked,
+  s as default
+};

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

@@ -0,0 +1,8 @@
+import { ChangeEventHandler } from 'react';
+export interface MenuSearchProps {
+    placeholder?: string;
+    name: string;
+    value: string;
+    onChange: ChangeEventHandler;
+}
+export declare const MenuSearch: ({ value, name, placeholder, onChange }: MenuSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuSearch.js

@@ -0,0 +1,21 @@
+import { jsx as t } from "react/jsx-runtime";
+import '../../assets/MenuSearch.css';const i = "_input_73dww_1", _ = "_button_73dww_13", u = "_close_73dww_18", l = "_icon_73dww_22", o = {
+  input: i,
+  button: _,
+  close: u,
+  icon: l
+}, r = ({ value: n, name: c, placeholder: s = "Søk", onChange: e }) => /* @__PURE__ */ t("div", { className: o.field, children: /* @__PURE__ */ t(
+  "input",
+  {
+    type: "search",
+    value: n,
+    name: c,
+    placeholder: s,
+    className: o.input,
+    onChange: e,
+    autoComplete: "off"
+  }
+) });
+export {
+  r as MenuSearch
+};

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

@@ -0,0 +1,14 @@
+import { MenuSearch as e } from "./MenuSearch.js";
+const a = {
+  title: "Menu/MenuSearch",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, o = {
+  args: {}
+};
+export {
+  o as Default,
+  a as default
+};

package/dist/components/Menu/index.js

@@ -0,0 +1,26 @@
+import { MenuItemBase as o } from "./MenuItemBase.js";
+import { MenuItemLabel as m } from "./MenuItemLabel.js";
+import { MenuItemMedia as u } from "./MenuItemMedia.js";
+import { MenuItem as p } from "./MenuItem.js";
+import { MenuInputField as x } from "./MenuInputField.js";
+import { MenuOption as a } from "./MenuOption.js";
+import { MenuSearch as s } from "./MenuSearch.js";
+import { MenuHeader as L } from "./MenuHeader.js";
+import { MenuItems as B } from "./MenuItems.js";
+import { MenuBase as c, MenuList as h, MenuListItem as F } from "./MenuBase.js";
+import { Menu as O } from "./Menu.js";
+export {
+  O as Menu,
+  c as MenuBase,
+  L as MenuHeader,
+  x as MenuInputField,
+  p as MenuItem,
+  o as MenuItemBase,
+  m as MenuItemLabel,
+  u as MenuItemMedia,
+  B as MenuItems,
+  h as MenuList,
+  F as MenuListItem,
+  a as MenuOption,
+  s as MenuSearch
+};

package/dist/components/Meta/MetaBase.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { MetaItemSize } from './MetaItemBase';
+export interface MetaBaseProps {
+    size?: MetaItemSize;
+    children?: ReactNode;
+}
+export declare const MetaBase: ({ size, children }: MetaBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Meta/MetaBase.js

@@ -0,0 +1,7 @@
+import { jsx as s } from "react/jsx-runtime";
+import '../../assets/MetaBase.css';const a = "_meta_17kd2_1", m = {
+  meta: a
+}, r = ({ size: t = "xs", children: e }) => /* @__PURE__ */ s("div", { className: m.meta, "data-size": t, children: e });
+export {
+  r as MetaBase
+};

package/dist/components/Meta/MetaItem.d.ts

@@ -0,0 +1,18 @@
+import { ElementType, ReactNode } from 'react';
+import { IconName } from '../Icon';
+import { MetaItemSize, MetaItemVariant } from './MetaItemBase';
+export interface MetaItemProps {
+    /**  Render as element */
+    as?: ElementType;
+    /** Meta size */
+    size?: MetaItemSize;
+    /** Variant */
+    variant?: MetaItemVariant;
+    /** Icon name */
+    icon?: IconName;
+    /** Label */
+    children?: ReactNode;
+    /** classname */
+    className?: string;
+}
+export declare const MetaItem: ({ size, variant, icon, children, ...rest }: MetaItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Meta/MetaItem.js

@@ -0,0 +1,11 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { MetaItemBase as x } from "./MetaItemBase.js";
+import { MetaItemLabel as M } from "./MetaItemLabel.js";
+import { MetaItemMedia as f } from "./MetaItemMedia.js";
+const j = ({ size: t = "xs", variant: e = "text", icon: m, children: o, ...a }) => /* @__PURE__ */ p(x, { variant: e, size: t, ...a, children: [
+  m && /* @__PURE__ */ r(f, { icon: m, size: t }),
+  /* @__PURE__ */ r(M, { variant: e, size: t, children: o })
+] });
+export {
+  j as MetaItem
+};

package/dist/components/Meta/MetaItem.stories.js

@@ -0,0 +1,21 @@
+import { MetaItem as t } from "./MetaItem.js";
+const a = {
+  title: "Meta/MetaItem",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered"
+  },
+  args: {
+    children: "Label"
+  }
+}, o = {
+  args: {}
+}, c = {
+  args: { icon: "clock-dashed" }
+};
+export {
+  o as Default,
+  c as Icon,
+  a as default
+};

package/dist/components/Meta/MetaItemBase.d.ts

@@ -0,0 +1,15 @@
+import { ElementType, ReactNode } from 'react';
+export type MetaItemVariant = 'solid' | 'outline' | 'dotted' | 'text';
+export type MetaItemSize = 'xs';
+export type MetaItemColor = 'subtle';
+export interface MetaItemBaseProps {
+    as?: ElementType;
+    variant?: MetaItemVariant;
+    size?: MetaItemSize;
+    color?: MetaItemColor;
+    datetime?: string;
+    progress?: number;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const MetaItemBase: ({ as, variant, size, color, progress, datetime, className, children, ...rest }: MetaItemBaseProps) => import("react/jsx-runtime").JSX.Element;