@altinn/altinn-components 0.29.4 → 0.30.0

package/dist/assets/Banner.css

@@ -0,0 +1 @@
+._banner_1of7r_1{background-color:var(--ds-color-base-default);color:var(--ds-color-base-contrast-default);margin-top:0;padding:.5rem;display:flex;justify-content:space-between;align-items:center;column-gap:.5rem}._sticky_1of7r_12{position:sticky;top:0;z-index:1000}._title_1of7r_18{margin:0;padding:1rem;font-size:1rem;font-weight:500;line-height:1.5rem}._infoIcon_1of7r_25{min-height:1.5rem;max-height:1.5rem;min-width:1.5rem;max-width:1.5rem;margin-right:.5rem;vertical-align:bottom}._closeIcon_1of7r_34{min-height:1.5rem;max-height:1.5rem;min-width:1.5rem;max-width:1.5rem;color:var(--ds-color-warning-text-default);font-size:1.5rem}

package/dist/components/Banner/Banner.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { c as f } from "../../index-L8X2o7IH.js";
+import * as c from "react";
+import { forwardRef as d } from "react";
+import "../RootProvider/RootProvider.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { IconButton as m } from "../Button/IconButton.js";
+import { u as p } from "../../useId-BVFxCjkq.js";
+import { S as u } from "../../XMark-DIqxCTTQ.js";
+import '../../assets/Banner.css';var v = function(e, o) {
+  var n = {};
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && o.indexOf(t) < 0 && (n[t] = e[t]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var r = 0, t = Object.getOwnPropertySymbols(e); r < t.length; r++)
+      o.indexOf(t[r]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[r]) && (n[t[r]] = e[t[r]]);
+  return n;
+};
+const h = d((e, o) => {
+  var { title: n, titleId: t } = e, r = v(e, ["title", "titleId"]);
+  let a = p();
+  return a = n ? t || "title-" + a : void 0, c.createElement(
+    "svg",
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: o, "aria-labelledby": a }, r),
+    n ? c.createElement("title", { id: a }, n) : null,
+    c.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4 3.25a.75.75 0 0 0-.75.75v16c0 .414.336.75.75.75h16a.75.75 0 0 0 .75-.75V4a.75.75 0 0 0-.75-.75zm.75 16V4.75h14.5v14.5zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0M10.5 10a.75.75 0 0 0 0 1.5h.75v4h-.75a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-.75v-4.75A.75.75 0 0 0 12 10z", clipRule: "evenodd" })
+  );
+}), _ = "_banner_1of7r_1", b = "_sticky_1of7r_12", g = "_title_1of7r_18", y = "_infoIcon_1of7r_25", i = {
+  banner: _,
+  sticky: b,
+  title: g,
+  infoIcon: y
+};
+var w = /* @__PURE__ */ ((e) => (e.accent = "accent", e.success = "success", e.warning = "warning", e.danger = "danger", e.info = "info", e))(w || {});
+const z = ({ closeTitle: e = "close", onClose: o, text: n, color: t, sticky: r = !0 }) => /* @__PURE__ */ s(
+  "section",
+  {
+    className: f(i.banner, { [i.sticky]: r }),
+    role: "status",
+    "aria-live": "polite",
+    "data-color": t,
+    children: [
+      /* @__PURE__ */ s("div", { className: i.title, children: [
+        /* @__PURE__ */ l(h, { className: i.infoIcon, "aria-hidden": !0 }),
+        /* @__PURE__ */ l("span", { children: n })
+      ] }),
+      /* @__PURE__ */ l(
+        m,
+        {
+          icon: u,
+          variant: "solid",
+          onClick: o,
+          className: i.dismiss,
+          iconAltText: e
+        }
+      )
+    ]
+  }
+);
+export {
+  z as Banner,
+  w as BannerColorEnum
+};

package/dist/components/Banner/index.js

@@ -0,0 +1,5 @@
+import { Banner as o, BannerColorEnum as e } from "./Banner.js";
+export {
+  o as Banner,
+  e as BannerColorEnum
+};

package/dist/components/Menu/MenuOption.js

@@ -1,39 +1,29 @@
-import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { jsxs as u, jsx as m } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { MenuItemBase as d } from "./MenuItemBase.js";
+import { MenuItemBase as x } from "./MenuItemBase.js";
 import { MenuItemLabel as I } from "./MenuItemLabel.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Label as M } from "../Forms/Label.js";
 import { Input as b } from "../Forms/Input.js";
 const y = ({
-  size: r = "md",
-  type: t,
+  size: t = "md",
+  type: o,
   name: e,
   value: i,
   label: p,
-  title: n,
+  title: d,
   description: s,
-  badge: f,
-  checked: m = !1,
+  badge: n,
+  checked: r = !1,
   disabled: l,
-  onChange: a,
-  ...u
-}) => /* @__PURE__ */ x(d, { disabled: l, selected: m, size: r, as: M, ...u, children: [
-  /* @__PURE__ */ o(
-    b,
-    {
-      size: "xs",
-      name: e,
-      value: i,
-      type: t,
-      checked: m,
-      onChange: a
-    }
-  ),
-  /* @__PURE__ */ o(I, { title: n, description: s, size: r, badge: f, children: p })
+  onChange: f,
+  ...a
+}) => /* @__PURE__ */ u(x, { disabled: l, selected: r, size: t, as: M, ...a, children: [
+  /* @__PURE__ */ m(b, { size: "xs", name: e, value: i, type: o, checked: r, onChange: f }),
+  /* @__PURE__ */ m(I, { title: p, description: s, size: t, badge: n })
 ] });
 export {
   y as MenuOption

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

@@ -0,0 +1,16 @@
+export declare enum BannerColorEnum {
+    accent = "accent",
+    success = "success",
+    warning = "warning",
+    danger = "danger",
+    info = "info"
+}
+export type BannerColor = keyof typeof BannerColorEnum;
+export interface BannerProps {
+    onClose?: () => void;
+    closeTitle?: string;
+    text?: string | React.ReactNode;
+    color?: BannerColor;
+    sticky?: boolean;
+}
+export declare const Banner: ({ closeTitle, onClose, text, color, sticky }: BannerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react-vite';
+import { BannerProps } from './Banner';
+declare const meta: {
+    title: string;
+    component: ({ closeTitle, onClose, text, color, sticky }: BannerProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        sticky: true;
+        closeTitle: string;
+        onClose: () => void;
+        text: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Colors: (args: BannerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Banner/index.d.ts

@@ -0,0 +1 @@
+export * from './Banner.tsx';

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

@@ -19,3 +19,4 @@ export default meta;
 export declare const Preview: (args: LayoutProps) => import("react/jsx-runtime").JSX.Element;
 export declare const HiddenSidebar: (args: LayoutProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Fullscreen: (args: LayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WithBanner: (args: LayoutProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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