@helsenorge/designsystem-react 7.6.0 → 7.7.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [7.6.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.5.0&targetVersion=GTv7.6.0) (2024-05-15)
+
+### Features
+
+- **notificationpanel:** legg til prop for å sette html tag for label
+  ([ebd331a](https://github.com/helsenorge/designsystem/commit/ebd331a75f04099c4ad7e552ff70df8751675734)), closes
+  [#324952](https://github.com/helsenorge/designsystem/issues/324952)
+
+### Bug Fixes
+
+- skjemaelementer med error styling overlapper utifra dom rekkefølge
+  ([b07b7d6](https://github.com/helsenorge/designsystem/commit/b07b7d69391b3e4296e8a8cde8b8d312f835cb03)), closes
+  [#324846](https://github.com/helsenorge/designsystem/issues/324846)
+- **expanderlist:** fiks så variant fill ikke mister margin top ved åpning av expander
+  ([d277c97](https://github.com/helsenorge/designsystem/commit/d277c97660aa8334a44b1183445f55f2037b2263)), closes
+  [#324823](https://github.com/helsenorge/designsystem/issues/324823)
+
 ## [7.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.4.0&targetVersion=GTv7.5.0) (2024-05-08)
 
 ### Features

package/components/Badge/Badge.d.ts

@@ -1,16 +1,22 @@
 import React from 'react';
+import { BadgeNotificationVariant } from './NotificationBadge';
 import { PaletteNames } from '../../theme/palette';
 export type BadgeColors = Extract<PaletteNames, 'blueberry' | 'cherry' | 'neutral'>;
 export type BadgeChildren = string | number;
+export type BadgeVariant = 'string' | 'notification';
 export interface BadgeProps {
     /** Sets the content of the badge. */
-    children: BadgeChildren;
+    children?: BadgeChildren;
     /** Adds custom classes to the element. */
     className?: string;
     /** Changes the badge background color. */
     color?: BadgeColors;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Changes the type of the badge. Default: string */
+    type?: BadgeVariant;
+    /** Type of notification badge. Only works if type is 'notification'. */
+    notificationVariant?: BadgeNotificationVariant;
 }
 export type BadgeType = React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;
 declare const Badge: BadgeType;

package/components/Badge/Badge.js

@@ -1,20 +1,30 @@
-import r from "react";
-import n from "classnames";
-import { AnalyticsId as b } from "../../constants.js";
+import t from "react";
+import m from "classnames";
+import g from "./NotificationBadge.js";
+import { IconSize as b, AnalyticsId as d } from "../../constants.js";
 import e from "../Badge/styles.module.scss";
-const m = r.forwardRef(function(t, d) {
-  const { children: s, className: o = "", color: a = "blueberry", testId: l } = t, c = n(
+const u = t.forwardRef(function(n, s) {
+  const { children: c, className: r = "", color: a = "blueberry", testId: i, type: l = "string", notificationVariant: o = "info" } = n, f = m(
     e.badge,
     {
       [e["badge--blueberry"]]: a === "blueberry",
       [e["badge--cherry"]]: a === "cherry",
       [e["badge--neutral"]]: a === "neutral"
     },
-    o
+    r
   );
-  return /* @__PURE__ */ r.createElement("span", { className: c, ref: d, "data-testid": l, "data-analyticsid": b.Badge }, s);
-}), p = m;
+  return l === "notification" && o !== void 0 ? /* @__PURE__ */ t.createElement(
+    g,
+    {
+      variant: o,
+      size: b.XSmall,
+      className: r,
+      testId: i,
+      "data-analyticsid": d.Badge
+    }
+  ) : /* @__PURE__ */ t.createElement("span", { className: f, ref: s, "data-testid": i, "data-analyticsid": d.Badge }, c);
+}), R = u;
 export {
-  p as default
+  R as default
 };
 //# sourceMappingURL=Badge.js.map

package/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\n\nimport badgeStyles from './styles.module.scss';\n\nexport type BadgeColors = Extract<PaletteNames, 'blueberry' | 'cherry' | 'neutral'>;\nexport type BadgeChildren = string | number;\n\nexport interface BadgeProps {\n  /** Sets the content of the badge. */\n  children: BadgeChildren;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the badge background color. */\n  color?: BadgeColors;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type BadgeType = React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;\nconst Badge: BadgeType = React.forwardRef(function BadgeForwardedRef(props: BadgeProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', color = 'blueberry', testId } = props;\n  const badgeClasses = classNames(\n    badgeStyles.badge,\n    {\n      [badgeStyles['badge--blueberry']]: color === 'blueberry',\n      [badgeStyles['badge--cherry']]: color === 'cherry',\n      [badgeStyles['badge--neutral']]: color === 'neutral',\n    },\n    className\n  );\n\n  return (\n    <span className={badgeClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Badge}>\n      {children}\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","React","props","ref","children","className","color","testId","badgeClasses","classNames","badgeStyles","AnalyticsId","Badge$1"],"mappings":";;;;AAuBA,MAAMA,IAAmBC,EAAM,WAAW,SAA2BC,GAAmBC,GAAsC;AAC5H,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,OAAAC,IAAQ,aAAa,QAAAC,EAAW,IAAAL,GAC5DM,IAAeC;AAAA,IACnBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,kBAAkB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAY,eAAe,CAAC,GAAGJ,MAAU;AAAA,MAC1C,CAACI,EAAY,gBAAgB,CAAC,GAAGJ,MAAU;AAAA,IAC7C;AAAA,IACAD;AAAA,EAAA;AAIA,SAAAJ,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWO,GAAc,KAAAL,GAAU,eAAaI,GAAQ,oBAAkBI,EAAY,MAAA,GACzFP,CACH;AAEJ,CAAC,GAEDQ,IAAeZ;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport NotificationBadge, { BadgeNotificationVariant } from './NotificationBadge';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\n\nimport badgeStyles from './styles.module.scss';\n\nexport type BadgeColors = Extract<PaletteNames, 'blueberry' | 'cherry' | 'neutral'>;\nexport type BadgeChildren = string | number;\nexport type BadgeVariant = 'string' | 'notification';\n\nexport interface BadgeProps {\n  /** Sets the content of the badge. */\n  children?: BadgeChildren;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the badge background color. */\n  color?: BadgeColors;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the type of the badge. Default: string */\n  type?: BadgeVariant;\n  /** Type of notification badge. Only works if type is 'notification'. */\n  notificationVariant?: BadgeNotificationVariant;\n}\n\nexport type BadgeType = React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;\nconst Badge: BadgeType = React.forwardRef(function BadgeForwardedRef(props: BadgeProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', color = 'blueberry', testId, type = 'string', notificationVariant = 'info' } = props;\n  const badgeClasses = classNames(\n    badgeStyles.badge,\n    {\n      [badgeStyles['badge--blueberry']]: color === 'blueberry',\n      [badgeStyles['badge--cherry']]: color === 'cherry',\n      [badgeStyles['badge--neutral']]: color === 'neutral',\n    },\n    className\n  );\n\n  if (type === 'notification' && notificationVariant !== undefined) {\n    return (\n      <NotificationBadge\n        variant={notificationVariant}\n        size={IconSize.XSmall}\n        className={className}\n        testId={testId}\n        data-analyticsid={AnalyticsId.Badge}\n      />\n    );\n  }\n\n  return (\n    <span className={badgeClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Badge}>\n      {children}\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","React","props","ref","children","className","color","testId","type","notificationVariant","badgeClasses","classNames","badgeStyles","NotificationBadge","IconSize","AnalyticsId","Badge$1"],"mappings":";;;;;AA8BA,MAAMA,IAAmBC,EAAM,WAAW,SAA2BC,GAAmBC,GAAsC;AACtH,QAAA,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,OAAAC,IAAQ,aAAa,QAAAC,GAAQ,MAAAC,IAAO,UAAU,qBAAAC,IAAsB,OAAA,IAAWP,GAC3GQ,IAAeC;AAAA,IACnBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,kBAAkB,CAAC,GAAGN,MAAU;AAAA,MAC7C,CAACM,EAAY,eAAe,CAAC,GAAGN,MAAU;AAAA,MAC1C,CAACM,EAAY,gBAAgB,CAAC,GAAGN,MAAU;AAAA,IAC7C;AAAA,IACAD;AAAA,EAAA;AAGE,SAAAG,MAAS,kBAAkBC,MAAwB,SAEnDR,gBAAAA,EAAA;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,SAASJ;AAAA,MACT,MAAMK,EAAS;AAAA,MACf,WAAAT;AAAA,MACA,QAAAE;AAAA,MACA,oBAAkBQ,EAAY;AAAA,IAAA;AAAA,EAAA,IAMlCd,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWS,GAAc,KAAAP,GAAU,eAAaI,GAAQ,oBAAkBQ,EAAY,MAAA,GACzFX,CACH;AAEJ,CAAC,GAEDY,IAAehB;"}

package/components/Badge/Badge.stories.d.ts

@@ -14,6 +14,8 @@ declare const meta: {
     args: {
         children: string;
         color: "blueberry";
+        type: "string";
+        notificationVariant: "info";
     };
     argTypes: {
         children: {
@@ -23,9 +25,18 @@ declare const meta: {
             control: string;
             options: string[];
         };
+        type: {
+            control: string;
+            options: string[];
+        };
+        notificationVariant: {
+            control: string;
+            options: string[];
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Variants: Story;
+export declare const Notification: Story;

package/components/Badge/NotificationBadge.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IconSize } from '../../constants';
+export type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';
+export interface NotificationBadgeProps {
+    /** Changes the type of the badge */
+    variant: BadgeNotificationVariant;
+    /** Sets the size of the badge */
+    size: IconSize;
+    /** Adds custom classes to the element */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Sets hover state */
+    isHovered?: boolean;
+}
+declare const NotificationBadge: (props: NotificationBadgeProps) => React.JSX.Element;
+export default NotificationBadge;

package/components/Badge/NotificationBadge.js

@@ -0,0 +1,68 @@
+import c from "react";
+import { palette as r } from "../../theme/palette.js";
+import { Icon as n } from "../Icon/Icon.js";
+import s from "../Icons/CheckFill.js";
+import m from "../Icons/ErrorSignFill.js";
+import f from "../Icons/InfoSignFill.js";
+import v from "../Icons/TriangleX.js";
+const g = (i) => {
+  const { variant: l, size: e, className: o = "", testId: t, isHovered: a = !1 } = i;
+  switch (l) {
+    case "info":
+      return /* @__PURE__ */ c.createElement(
+        n,
+        {
+          svgIcon: f,
+          color: r.blueberry700,
+          hoverColor: r.blueberry700,
+          size: e,
+          className: o,
+          testId: t,
+          isHovered: a
+        }
+      );
+    case "warn":
+      return /* @__PURE__ */ c.createElement(
+        n,
+        {
+          svgIcon: m,
+          color: r.banana700,
+          hoverColor: r.banana700,
+          size: e,
+          className: o,
+          testId: t,
+          isHovered: a
+        }
+      );
+    case "error":
+      return /* @__PURE__ */ c.createElement(
+        n,
+        {
+          svgIcon: v,
+          color: r.cherry700,
+          hoverColor: r.cherry700,
+          size: e,
+          className: o,
+          testId: t,
+          isHovered: a
+        }
+      );
+    case "success":
+      return /* @__PURE__ */ c.createElement(
+        n,
+        {
+          svgIcon: s,
+          color: r.kiwi900,
+          hoverColor: r.kiwi900,
+          size: e,
+          className: o,
+          testId: t,
+          isHovered: a
+        }
+      );
+  }
+}, E = g;
+export {
+  E as default
+};
+//# sourceMappingURL=NotificationBadge.js.map

package/components/Badge/NotificationBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBadge.js","sources":["../../../src/components/Badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nexport type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';\n\nexport interface NotificationBadgeProps {\n  /** Changes the type of the badge */\n  variant: BadgeNotificationVariant;\n  /** Sets the size of the badge */\n  size: IconSize;\n  /** Adds custom classes to the element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets hover state */\n  isHovered?: boolean;\n}\n\nconst NotificationBadge = (props: NotificationBadgeProps): React.JSX.Element => {\n  const { variant, size, className = '', testId, isHovered = false } = props;\n  switch (variant) {\n    case 'info':\n      return (\n        <Icon\n          svgIcon={InfoSignFill}\n          color={palette.blueberry700}\n          hoverColor={palette.blueberry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'warn':\n      return (\n        <Icon\n          svgIcon={ErrorSignFill}\n          color={palette.banana700}\n          hoverColor={palette.banana700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'error':\n      return (\n        <Icon\n          svgIcon={TriangleX}\n          color={palette.cherry700}\n          hoverColor={palette.cherry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'success':\n      return (\n        <Icon\n          svgIcon={CheckFill}\n          color={palette.kiwi900}\n          hoverColor={palette.kiwi900}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n  }\n};\n\nexport default NotificationBadge;\n"],"names":["NotificationBadge","props","variant","size","className","testId","isHovered","React","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill","NotificationBadge$1"],"mappings":";;;;;;;AAyBA,MAAMA,IAAoB,CAACC,MAAqD;AACxE,QAAA,EAAE,SAAAC,GAAS,MAAAC,GAAM,WAAAC,IAAY,IAAI,QAAAC,GAAQ,WAAAC,IAAY,GAAU,IAAAL;AACrE,UAAQC,GAAS;AAAA,IACf,KAAK;AAED,aAAAK,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASC;AAAA,UACT,OAAOC,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AAED,aAAAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASG;AAAA,UACT,OAAOD,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AAED,aAAAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASI;AAAA,UACT,OAAOF,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AAED,aAAAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASK;AAAA,UACT,OAAOH,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,EAGR;AACF,GAEAQ,IAAed;"}

package/components/Expander/styles.module.scss

@@ -3,6 +3,7 @@
 @import '../../scss/breakpoints';
 @import '../../scss/palette';
 @import '../../scss/font-settings';
+@import '../../scss/supernova/styles/colors';
 
 .expander {
   position: relative;
@@ -53,11 +54,11 @@
     text-align: left;
 
     &:hover {
-      background-color: $blueberry50;
+      background-color: var(--color-action-background-transparent-onlight-hover);
     }
 
     &--expanded {
-      background-color: $blueberry50;
+      background-color: var(--color-action-background-transparent-onlight-hover);
     }
   }
 

package/components/LinkList/LinkList.stories.d.ts

@@ -46,3 +46,4 @@ export declare const VariantOutline: Story;
 export declare const VariantFill: Story;
 export declare const WithRef: Story;
 export declare const AsButton: Story;
+export declare const WithNotificationBadge: Story;

package/components/ListHeader/ListHeader.d.ts

@@ -32,7 +32,7 @@ export interface ListHeaderProps {
 interface ListHeaderChildren {
     avatarChild?: React.ReactElement<AvatarProps>;
     listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];
-    badgeChild?: React.ReactElement<BadgeProps>;
+    badgeChildren?: React.ReactElement<BadgeProps>[];
     elementChild?: React.ReactElement;
     stringChildren: string[];
     remainingChildren: React.ReactNode[];

package/components/ListHeader/ListHeader.js

@@ -1,80 +1,84 @@
-import r from "react";
-import h from "classnames";
+import a from "react";
+import _ from "classnames";
 import L from "./ListHeaderText/ListHeaderText.js";
-import { useBreakpoint as k, Breakpoint as A } from "../../hooks/useBreakpoint.js";
+import { useBreakpoint as A, Breakpoint as $ } from "../../hooks/useBreakpoint.js";
 import { isComponent as u, isComponentWithChildren as N } from "../../utils/component.js";
-import $, { AvatarSize as B } from "../Avatar/Avatar.js";
-import R from "../Badge/Badge.js";
-import { Icon as p } from "../Icon/Icon.js";
+import { uuid as B } from "../../utils/uuid.js";
+import R, { AvatarSize as X } from "../Avatar/Avatar.js";
+import w from "../Badge/Badge.js";
+import { Icon as M } from "../Icon/Icon.js";
 import { IconSize as C } from "../../constants.js";
 import t from "../ListHeader/styles.module.scss";
-const K = (m, f, _, i, c, o) => {
+const U = (m, f, h, i, c, o) => {
   if (u(m, E))
-    return r.cloneElement(m, {
+    return a.cloneElement(m, {
       chevronIcon: c,
       icon: o,
-      isHovered: _,
+      isHovered: h,
       size: i
     });
   if (m)
-    return /* @__PURE__ */ r.createElement(E, { titleHtmlMarkup: f, chevronIcon: c, icon: o, isHovered: _, size: i }, m);
+    return /* @__PURE__ */ a.createElement(E, { titleHtmlMarkup: f, chevronIcon: c, icon: o, isHovered: h, size: i }, m);
 }, b = (m, f = !1) => {
   var d, g, s, e;
-  let _, i;
-  const c = [], o = [], l = [];
-  r.Children.forEach(m, (a) => {
-    a === null || typeof a > "u" || (u(a, $) ? _ = a : u(a, L) ? c.push(a) : u(a, R) ? i = a : typeof a == "string" ? o.push(a) : l.push(a));
+  let h;
+  const i = [], c = [], o = [], l = [];
+  a.Children.forEach(m, (r) => {
+    r === null || typeof r > "u" || (u(r, R) ? h = r : u(r, L) ? c.push(r) : u(r, w) ? i.push(r) : typeof r == "string" ? o.push(r) : l.push(r));
   });
-  const n = _ !== void 0 || c.length > 0 || i !== void 0 && o.length > 0, v = l.length === 0 || N(l[0]) && typeof ((g = (d = l[0]) == null ? void 0 : d.props) == null ? void 0 : g.children) > "u";
+  const n = h !== void 0 || c.length > 0 || i !== void 0 && o.length > 0, v = l.length === 0 || N(l[0]) && typeof ((g = (d = l[0]) == null ? void 0 : d.props) == null ? void 0 : g.children) > "u";
   if (f || n || v)
-    return { avatarChild: _, listHeaderTextChildren: c, badgeChild: i, stringChildren: o, remainingChildren: l };
+    return { avatarChild: h, listHeaderTextChildren: c, badgeChildren: i, stringChildren: o, remainingChildren: l };
   if (N(l[0]))
     return b((e = (s = l[0]) == null ? void 0 : s.props) == null ? void 0 : e.children, !0);
 }, E = (m) => {
-  const { className: f = "", titleHtmlMarkup: _ = "h2", chevronIcon: i, children: c, icon: o, isHovered: l, size: n, testId: v } = m, d = k(), g = n !== "small" && !!(i || o), s = typeof c == "string", e = b(c), a = (e == null ? void 0 : e.avatarChild) || (e == null ? void 0 : e.listHeaderTextChildren) && e.listHeaderTextChildren.length > 0 || (e == null ? void 0 : e.remainingChildren) && (e == null ? void 0 : e.remainingChildren.length) > 0, H = h(
+  const { className: f = "", titleHtmlMarkup: h = "h2", chevronIcon: i, children: c, icon: o, isHovered: l, size: n, testId: v } = m, d = A(), g = n !== "small" && !!(i || o), s = typeof c == "string", e = b(c), r = (e == null ? void 0 : e.avatarChild) || (e == null ? void 0 : e.listHeaderTextChildren) && e.listHeaderTextChildren.length > 0 || (e == null ? void 0 : e.remainingChildren) && (e == null ? void 0 : e.remainingChildren.length) > 0, H = _(
     t["list-header"],
     {
       [t["list-header--for-element-content"]]: !s,
-      [t["list-header--top-align-content"]]: a
+      [t["list-header--top-align-content"]]: r
     },
     f
-  ), x = h(
+  ), x = _(
     t["list-header__badge"],
     {
       [t["list-header__badge--for-string-content"]]: s
     },
     !s && n && t[`list-header__badge--${n}`]
-  ), S = h(t["list-header__chevron"], !s && n && t[`list-header__chevron--${n}`], {
+  ), y = _(t["list-header__chevron"], !s && n && t[`list-header__chevron--${n}`], {
     [t["list-header__chevron--for-string-content"]]: s
-  }), y = h(t["list-header__content"], {
+  }), S = _(t["list-header__content"], {
     [t["list-header__content--string"]]: s,
     [t["list-header__content--element"]]: !s,
     [t["list-header__content--spacing"]]: !(e != null && e.avatarChild) && !o
-  }), I = h(
+  }), I = _(
     t["list-header__icon"],
     !s && n && (n === "medium" || n === "large") && t[`list-header__icon--for-element-content--${n}`],
     {
       [t["list-header__icon--for-string-content"]]: s,
       [t["list-header__icon--for-element-content"]]: !s
     }
-  ), T = h(
+  ), T = _(
     t["list-header__avatar"],
     !s && n && (n === "medium" || n === "large") && t[`list-header__avatar--for-element-content--${n}`],
     {
       [t["list-header__avatar--for-string-content"]]: s,
       [t["list-header__avatar--for-element-content"]]: !s
     }
-  ), z = _;
-  return /* @__PURE__ */ r.createElement("span", { "data-testid": v, className: H }, g && o && /* @__PURE__ */ r.createElement("span", { className: I }, r.cloneElement(o, {
-    size: d === A.xs ? C.XSmall : C.Small,
+  ), k = h;
+  return /* @__PURE__ */ a.createElement("span", { "data-testid": v, className: H }, g && o && /* @__PURE__ */ a.createElement("span", { className: I }, a.cloneElement(o, {
+    size: d === $.xs ? C.XSmall : C.Small,
     isHovered: l
-  })), n !== "small" && (e == null ? void 0 : e.avatarChild) && /* @__PURE__ */ r.createElement("span", { className: T }, r.cloneElement(e.avatarChild, { size: B.xsmall })), /* @__PURE__ */ r.createElement("span", { className: y }, e == null ? void 0 : e.listHeaderTextChildren, !!(e != null && e.stringChildren.length) && /* @__PURE__ */ r.createElement(z, { className: t["list-header__title"] }, e.stringChildren), e == null ? void 0 : e.remainingChildren), (e == null ? void 0 : e.badgeChild) && /* @__PURE__ */ r.createElement("span", { className: x }, e.badgeChild), g && i && /* @__PURE__ */ r.createElement("span", { className: S }, /* @__PURE__ */ r.createElement(p, { svgIcon: i, isHovered: l, size: C.XSmall })));
+  })), n !== "small" && (e == null ? void 0 : e.avatarChild) && /* @__PURE__ */ a.createElement("span", { className: T }, a.cloneElement(e.avatarChild, { size: X.xsmall })), /* @__PURE__ */ a.createElement("span", { className: S }, e == null ? void 0 : e.listHeaderTextChildren, !!(e != null && e.stringChildren.length) && /* @__PURE__ */ a.createElement(k, { className: t["list-header__title"] }, e.stringChildren), e == null ? void 0 : e.remainingChildren), (e == null ? void 0 : e.badgeChildren) && e.badgeChildren.map((p) => {
+    const z = B();
+    return /* @__PURE__ */ a.createElement("span", { key: z, className: x }, p);
+  }), g && i && /* @__PURE__ */ a.createElement("span", { className: y }, /* @__PURE__ */ a.createElement(M, { svgIcon: i, isHovered: l, size: C.XSmall })));
 };
 E.displayName = "ListHeader";
 export {
   E as ListHeader,
   E as default,
   b as mapChildren,
-  K as renderListHeader
+  U as renderListHeader
 };
 //# sourceMappingURL=ListHeader.js.map

package/components/ListHeader/ListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.js","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.FC<ListHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChild?: React.ReactElement<BadgeProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = props => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(\n    styles['list-header__badge'],\n    {\n      [styles['list-header__badge--for-string-content']]: contentIsString,\n    },\n    !contentIsString && size && styles[`list-header__badge--${size}`]\n  );\n  const chevronClasses = cn(styles['list-header__chevron'], !contentIsString && size && styles[`list-header__chevron--${size}`], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(\n    styles['list-header__icon'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__icon--for-element-content--${size}`],\n    {\n      [styles['list-header__icon--for-string-content']]: contentIsString,\n      [styles['list-header__icon--for-element-content']]: !contentIsString,\n    }\n  );\n  const avatarClasses = cn(\n    styles['list-header__avatar'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__avatar--for-element-content--${size}`],\n    {\n      [styles['list-header__avatar--for-string-content']]: contentIsString,\n      [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    }\n  );\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","isComponentWithChildren","_b","_a","_d","_c","props","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":"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"}
+{"version":3,"file":"ListHeader.js","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport uuid from '../../utils/uuid';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.FC<ListHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChildren, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = props => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(\n    styles['list-header__badge'],\n    {\n      [styles['list-header__badge--for-string-content']]: contentIsString,\n    },\n    !contentIsString && size && styles[`list-header__badge--${size}`]\n  );\n  const chevronClasses = cn(styles['list-header__chevron'], !contentIsString && size && styles[`list-header__chevron--${size}`], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(\n    styles['list-header__icon'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__icon--for-element-content--${size}`],\n    {\n      [styles['list-header__icon--for-string-content']]: contentIsString,\n      [styles['list-header__icon--for-element-content']]: !contentIsString,\n    }\n  );\n  const avatarClasses = cn(\n    styles['list-header__avatar'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__avatar--for-element-content--${size}`],\n    {\n      [styles['list-header__avatar--for-string-content']]: contentIsString,\n      [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    }\n  );\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChildren &&\n        mappedChildren.badgeChildren.map(badgeChild => {\n          const id = uuid();\n          return (\n            <span key={id} className={badgeClasses}>\n              {badgeChild}\n            </span>\n          );\n        })}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChildren","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","isComponentWithChildren","_b","_a","_d","_c","props","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","badgeChild","id","uuid","Icon"],"mappings":"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"}

package/components/NotificationPanel/NotificationPanel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';
+export type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'error' | 'success';
 export type NotificationCompactVariants = 'basic' | 'outline';
 export type NotificationPanelSizes = 'small' | 'medium' | 'large';
 export type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';

package/components/NotificationPanel/NotificationPanel.js

@@ -1,128 +1,94 @@
 import t from "react";
 import c from "classnames";
-import { DetailButton as P } from "./DetailButton/DetailButton.js";
-import { IconSize as o, AnalyticsId as R } from "../../constants.js";
-import { useUuid as $ } from "../../hooks/useUuid.js";
-import { getColor as M } from "../../theme/currys/color.js";
-import { palette as n } from "../../theme/palette.js";
-import { getAriaLabelAttributes as V } from "../../utils/accessibility.js";
-import D from "../Close/Close.js";
-import { Icon as p } from "../Icon/Icon.js";
-import H from "../Icons/CheckFill.js";
-import O from "../Icons/ErrorSignFill.js";
-import U from "../Icons/InfoSignFill.js";
-import W from "../Icons/TriangleX.js";
+import { AnalyticsId as R, IconSize as C } from "../../constants.js";
+import { useUuid as T } from "../../hooks/useUuid.js";
+import { getColor as $ } from "../../theme/currys/color.js";
+import { getAriaLabelAttributes as F } from "../../utils/accessibility.js";
+import V from "../Badge/NotificationBadge.js";
+import H from "../Close/Close.js";
+import M from "../Expander/Expander.js";
 import e from "../NotificationPanel/styles.module.scss";
-const j = ({ fluid: s, children: m }) => {
-  if (s) {
-    const l = c(e["fluid-wrapper"]);
-    return /* @__PURE__ */ t.createElement("div", { className: l }, m);
+const U = ({ fluid: r, children: s }) => {
+  if (r) {
+    const i = c(e["fluid-wrapper"]);
+    return /* @__PURE__ */ t.createElement("div", { className: i }, s);
   }
-  return m;
-}, q = t.forwardRef((s, m) => {
+  return s;
+}, W = t.forwardRef((r, s) => {
   const {
-    children: l,
-    variant: f = "info",
-    dismissable: u = !1,
+    children: i,
+    variant: o = "info",
+    dismissable: m = !1,
     onClick: E,
-    expanderChildren: r,
-    expanderButtonText: b,
-    expanderButtonClosedText: _,
+    expanderChildren: l,
+    expanderButtonText: d,
+    expanderButtonClosedText: f,
     expanderOpenFromStart: N = !1,
     compactVariant: a,
-    label: i,
-    labelHtmlMarkup: S = "h1",
-    fluid: I = !1,
-    size: C,
-    className: g,
-    labelId: x,
-    role: w,
-    testId: y
-  } = s, d = $(x), T = {
-    info: /* @__PURE__ */ t.createElement(
-      p,
-      {
-        svgIcon: U,
-        color: n.blueberry700,
-        hoverColor: n.blueberry700,
-        size: a ? o.XSmall : o.Small
-      }
-    ),
-    warn: /* @__PURE__ */ t.createElement(
-      p,
-      {
-        svgIcon: O,
-        color: n.banana700,
-        hoverColor: n.banana700,
-        size: a ? o.XSmall : o.Small
-      }
-    ),
-    alert: /* @__PURE__ */ t.createElement(
-      p,
-      {
-        svgIcon: W,
-        color: n.cherry700,
-        hoverColor: n.cherry700,
-        size: a ? o.XSmall : o.Small
-      }
-    ),
-    success: /* @__PURE__ */ t.createElement(
-      p,
-      {
-        svgIcon: H,
-        color: n.kiwi900,
-        hoverColor: n.kiwi900,
-        size: a ? o.XSmall : o.Small
-      }
-    )
-  }, k = () => {
-    const h = a === "outline", X = c(e["notification-panel__content"]), A = c(e["notification-panel__label"], {
-      [e["notification-panel__label--no-content"]]: !l && !r,
+    label: n,
+    labelHtmlMarkup: h = "h1",
+    fluid: v = !1,
+    size: u,
+    className: I,
+    labelId: S,
+    role: g,
+    testId: w
+  } = r, p = T(S), A = () => {
+    const b = a === "outline", P = c(e["notification-panel__content"]), k = c(e["notification-panel__label"], {
+      [e["notification-panel__label--no-content"]]: !i && !l,
       [e["notification-panel__label--compact"]]: !!a,
-      [e["notification-panel__label--outline"]]: h
-    }), B = c(e["notification-panel__children"], {
-      [e["notification-panel__children--with-label"]]: i,
-      [e["notification-panel__children--expander-no-label"]]: r && !i,
-      [e["notification-panel__children--outline"]]: h
-    }), L = S;
-    return /* @__PURE__ */ t.createElement("div", { className: X, id: i ? void 0 : d }, i && /* @__PURE__ */ t.createElement(L, { className: A, id: d }, i), l && /* @__PURE__ */ t.createElement("div", { className: B }, l), r && b && _ && !a && /* @__PURE__ */ t.createElement(
-      P,
+      [e["notification-panel__label--outline"]]: b
+    }), y = c(e["notification-panel__children"], {
+      [e["notification-panel__children--with-label"]]: n,
+      [e["notification-panel__children--expander-no-label"]]: l && !n,
+      [e["notification-panel__children--outline"]]: b
+    }), z = h, [x, O] = t.useState(N);
+    return /* @__PURE__ */ t.createElement("div", { className: P, id: n ? void 0 : p }, n && /* @__PURE__ */ t.createElement(z, { className: k, id: p }, n), i && /* @__PURE__ */ t.createElement("div", { className: y }, i), l && d && f && !a && /* @__PURE__ */ t.createElement(
+      M,
       {
-        expanderOpenFromStart: N,
-        content: r,
-        buttonText: b,
-        buttonClosedText: _
-      }
+        title: x ? d : f,
+        onExpand: O,
+        expanded: x,
+        testId: "expand"
+      },
+      l
     ));
-  }, z = c(
+  }, B = c(
     e["notification-panel"],
-    e[`notification-panel--${f}`],
-    C && e[`notification-panel--${C}`],
+    e[`notification-panel--${o}`],
+    u && e[`notification-panel--${u}`],
     {
       [e["notification-panel--compact"]]: !!a,
       [e["notification-panel--compact--basic"]]: a === "basic",
       [e["notification-panel--compact--outline"]]: a === "outline",
-      [e["notification-panel--with-content"]]: r || i && l,
-      [e["notification-panel--dismissable"]]: u
+      [e["notification-panel--with-content"]]: l || n && i,
+      [e["notification-panel--dismissable"]]: m
     },
-    g
-  ), v = w || f === "alert" && "alert" || void 0, F = v ? V({ label: i, id: d }) : void 0;
-  return /* @__PURE__ */ t.createElement(j, { fluid: I }, /* @__PURE__ */ t.createElement(
+    I
+  ), _ = g || (o === "alert" || o === "error") && "alert" || void 0, L = _ ? F({ label: n, id: p }) : void 0;
+  return /* @__PURE__ */ t.createElement(U, { fluid: v }, /* @__PURE__ */ t.createElement(
     "div",
     {
-      ref: m,
-      role: v,
-      "data-testid": y,
+      ref: s,
+      role: _,
+      "data-testid": w,
       "data-analyticsid": R.NotificationPanel,
-      className: z,
-      ...F
+      className: B,
+      ...L
     },
-    /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__icon"] }, T[f]),
-    u && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement(D, { ariaLabel: s.ariaLabelCloseBtn, onClick: E, color: M("black") })),
-    k()
+    /* @__PURE__ */ t.createElement(
+      V,
+      {
+        variant: o == "alert" ? "error" : o,
+        size: a ? C.XSmall : C.Small,
+        className: e["notification-panel__icon"]
+      }
+    ),
+    m && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement(H, { ariaLabel: r.ariaLabelCloseBtn, onClick: E, color: $("black") })),
+    A()
   ));
-}), se = q;
+}), ee = W;
 export {
-  se as default
+  ee as default
 };
 //# sourceMappingURL=NotificationPanel.js.map

package/components/NotificationPanel/NotificationPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationPanel.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { DetailButton } from './DetailButton/DetailButton';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const variantToIconMap = {\n    info: (\n      <Icon\n        svgIcon={InfoSignFill}\n        color={palette.blueberry700}\n        hoverColor={palette.blueberry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    warn: (\n      <Icon\n        svgIcon={ErrorSignFill}\n        color={palette.banana700}\n        hoverColor={palette.banana700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    alert: (\n      <Icon\n        svgIcon={TriangleX}\n        color={palette.cherry700}\n        hoverColor={palette.cherry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    success: (\n      <Icon\n        svgIcon={CheckFill}\n        color={palette.kiwi900}\n        hoverColor={palette.kiwi900}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n  };\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={uuid}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <DetailButton\n            expanderOpenFromStart={expanderOpenFromStart}\n            content={expanderChildren}\n            buttonText={expanderButtonText}\n            buttonClosedText={expanderButtonClosedText}\n          />\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'alert' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <span className={styles['notification-panel__icon']}>{variantToIconMap[variant]}</span>\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["FluidWrapper","fluid","children","fluidClasses","classNames","styles","React","NotificationPanel","props","ref","variant","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","labelHtmlMarkup","size","className","labelId","role","testId","uuid","useUuid","variantToIconMap","Icon","InfoSignFill","palette","IconSize","ErrorSignFill","TriangleX","CheckFill","renderContent","outlineVariant","contentClasses","labelClasses","childrenClasses","CustomTag","DetailButton","notificationPanelClasses","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Close","getColor","NotificationPanel$1"],"mappings":"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"}
+{"version":3,"file":"NotificationPanel.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={uuid}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || ((variant === 'alert' || variant === 'error') && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant == 'alert' ? 'error' : variant}\n          size={compactVariant ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["FluidWrapper","fluid","children","fluidClasses","classNames","styles","React","NotificationPanel","props","ref","variant","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","labelHtmlMarkup","size","className","labelId","role","testId","uuid","useUuid","renderContent","outlineVariant","contentClasses","labelClasses","childrenClasses","CustomTag","expanderOpen","setExpanderOpen","Expander","notificationPanelClasses","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","NotificationBadge","IconSize","Close","getColor","NotificationPanel$1"],"mappings":"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"}

package/components/NotificationPanel/NotificationPanel.stories.d.ts

@@ -17,7 +17,7 @@ declare const meta: {
         fluid: false;
         label: string;
         labelHtmlMarkup: "h1";
-        variant: "alert";
+        variant: "error";
         role: undefined;
     };
     argTypes: {

package/components/NotificationPanel/styles.module.scss

@@ -98,6 +98,20 @@
     border: none;
   }
 
+  &--error {
+    border: 0.125rem solid $cherry700;
+    background-color: $cherry50;
+  }
+
+  &--error#{&}--compact {
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  &--error#{&}--compact--basic {
+    border: none;
+  }
+
   &--success {
     border: 0.125rem solid $kiwi900;
     background-color: $kiwi50;

package/components/NotificationPanel/styles.module.scss.d.ts

@@ -20,6 +20,7 @@ export type Styles = {
   'notification-panel--compact--basic': string;
   'notification-panel--compact--outline': string;
   'notification-panel--dismissable': string;
+  'notification-panel--error': string;
   'notification-panel--info': string;
   'notification-panel--large': string;
   'notification-panel--medium': string;

package/components/ServiceMessage/ServiceMessage.js

@@ -1,101 +1,92 @@
-import e, { useState as R } from "react";
-import u from "classnames";
-import { useBreakpoint as w } from "../../hooks/useBreakpoint.js";
-import { useHover as h } from "../../hooks/useHover.js";
-import { useUuid as y } from "../../hooks/useUuid.js";
-import { getColor as I } from "../../theme/currys/color.js";
-import { breakpoints as M } from "../../theme/grid.js";
-import { palette as t } from "../../theme/palette.js";
-import { getAriaLabelAttributes as X } from "../../utils/accessibility.js";
-import F from "../Close/Close.js";
-import { Icon as n } from "../Icon/Icon.js";
-import { IconSize as N } from "../../constants.js";
-import L from "../Icons/CheckFill.js";
+import e, { useState as h } from "react";
+import p from "classnames";
+import { useBreakpoint as z } from "../../hooks/useBreakpoint.js";
+import { useHover as u } from "../../hooks/useHover.js";
+import { useUuid as w } from "../../hooks/useUuid.js";
+import { getColor as H } from "../../theme/currys/color.js";
+import { breakpoints as L } from "../../theme/grid.js";
+import { getAriaLabelAttributes as M } from "../../utils/accessibility.js";
+import X from "../Badge/NotificationBadge.js";
+import y from "../Close/Close.js";
+import { Icon as C } from "../Icon/Icon.js";
+import { IconSize as E } from "../../constants.js";
 import A from "../Icons/ChevronDown.js";
 import U from "../Icons/ChevronUp.js";
-import $ from "../Icons/ErrorSignFill.js";
-import j from "../Icons/Forward.js";
-import B from "../Icons/InfoSignFill.js";
-import q from "../Icons/TriangleX.js";
-import D from "../Icons/X.js";
-import r from "../ServiceMessage/styles.module.scss";
-const G = ({ label: c, variant: l, id: m, hasExpander: s, isExpanded: i, dismissable: g, onExpand: v, onDismiss: f, closeBtnText: _ }) => {
-  const d = w(), { isHovered: o, hoverRef: p } = h(), a = d < M.lg ? N.XSmall : N.Small, C = {
-    info: /* @__PURE__ */ e.createElement(n, { svgIcon: B, color: t.blueberry700, hoverColor: t.blueberry700, size: a, isHovered: o }),
-    warn: /* @__PURE__ */ e.createElement(n, { svgIcon: $, color: t.banana700, hoverColor: t.banana700, size: a, isHovered: o }),
-    alert: /* @__PURE__ */ e.createElement(n, { svgIcon: q, color: t.cherry700, hoverColor: t.cherry700, size: a, isHovered: o }),
-    success: /* @__PURE__ */ e.createElement(n, { svgIcon: L, color: t.kiwi900, hoverColor: t.kiwi900, size: a, isHovered: o })
-  }, b = s ? "button" : "span", E = u(
-    r["service-message__label-container"],
-    s && r["service-message__label-container--has-expander"]
+import B from "../Icons/Forward.js";
+import $ from "../Icons/X.js";
+import s from "../ServiceMessage/styles.module.scss";
+const j = ({ label: c, variant: t, id: m, hasExpander: r, isExpanded: i, dismissable: v, onExpand: l, onDismiss: _, closeBtnText: n }) => {
+  const g = z(), { isHovered: a, hoverRef: d } = u(), o = g < L.lg ? E.XSmall : E.Small, N = r ? "button" : "span", f = p(
+    s["service-message__label-container"],
+    r && s["service-message__label-container--has-expander"]
   );
-  return /* @__PURE__ */ e.createElement("div", { className: E, ref: p }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__container"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__row"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__col"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__label"] }, C[l], /* @__PURE__ */ e.createElement("h1", { className: r["service-message__title"], id: m }, /* @__PURE__ */ e.createElement(
-    b,
+  return /* @__PURE__ */ e.createElement("div", { className: f, ref: d }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__container"] }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__row"] }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__col"] }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__label"] }, /* @__PURE__ */ e.createElement(X, { variant: t == "alert" ? "error" : t, size: o, isHovered: a }), /* @__PURE__ */ e.createElement("h1", { className: s["service-message__title"], id: m }, /* @__PURE__ */ e.createElement(
+    N,
     {
-      className: r["service-message__toggle"],
-      onClick: s ? v : void 0,
-      "aria-expanded": s ? i : void 0
+      className: s["service-message__toggle"],
+      onClick: r ? l : void 0,
+      "aria-expanded": r ? i : void 0
     },
     c
-  )), s && /* @__PURE__ */ e.createElement(n, { size: a, svgIcon: i ? U : A, isHovered: o }), !s && g && /* @__PURE__ */ e.createElement(F, { onClick: f, ariaLabel: _, className: r["service-message__close"] }))))));
-}, J = ({ info: c, extraInfo: l, urlTitle: m, url: s, target: i, dismissable: g, closeBtnText: v, onDismiss: f }) => {
-  const { hoverRef: _, isHovered: d } = h(), { hoverRef: o, isHovered: p } = h(), a = s && m;
-  return /* @__PURE__ */ e.createElement("div", { className: r["service-message__container"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__row"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__col"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__content"] }, c && /* @__PURE__ */ e.createElement("p", { className: r["service-message__info"] }, c), l && /* @__PURE__ */ e.createElement("p", { className: u(r["service-message__info"], r["service-message__info--extra"]) }, l), /* @__PURE__ */ e.createElement("div", { className: r["service-message__actions"] }, a && /* @__PURE__ */ e.createElement("a", { className: r["service-message__action"], href: s, ref: _, target: i }, m, /* @__PURE__ */ e.createElement(n, { size: N.XSmall, svgIcon: j, color: I("blueberry", 700), isHovered: d })), g && /* @__PURE__ */ e.createElement(
+  )), r && /* @__PURE__ */ e.createElement(C, { size: o, svgIcon: i ? U : A, isHovered: a }), !r && v && /* @__PURE__ */ e.createElement(y, { onClick: _, ariaLabel: n, className: s["service-message__close"] }))))));
+}, F = ({ info: c, extraInfo: t, urlTitle: m, url: r, target: i, dismissable: v, closeBtnText: l, onDismiss: _ }) => {
+  const { hoverRef: n, isHovered: g } = u(), { hoverRef: a, isHovered: d } = u(), o = r && m;
+  return /* @__PURE__ */ e.createElement("div", { className: s["service-message__container"] }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__row"] }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__col"] }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__content"] }, c && /* @__PURE__ */ e.createElement("p", { className: s["service-message__info"] }, c), t && /* @__PURE__ */ e.createElement("p", { className: p(s["service-message__info"], s["service-message__info--extra"]) }, t), /* @__PURE__ */ e.createElement("div", { className: s["service-message__actions"] }, o && /* @__PURE__ */ e.createElement("a", { className: s["service-message__action"], href: r, ref: n, target: i }, m, /* @__PURE__ */ e.createElement(C, { size: E.XSmall, svgIcon: B, color: H("blueberry", 700), isHovered: g })), v && /* @__PURE__ */ e.createElement(
     "button",
     {
-      ref: o,
-      className: u(r["service-message__action"], r["service-message__action--close"]),
-      "aria-label": v,
-      onClick: f
+      ref: a,
+      className: p(s["service-message__action"], s["service-message__action--close"]),
+      "aria-label": l,
+      onClick: _
     },
-    v,
-    /* @__PURE__ */ e.createElement(n, { size: N.XSmall, svgIcon: D, color: I("blueberry", 700), isHovered: p })
+    l,
+    /* @__PURE__ */ e.createElement(C, { size: E.XSmall, svgIcon: $, color: H("blueberry", 700), isHovered: d })
   ))))));
-}, K = ({
+}, q = ({
   label: c,
-  dismissable: l = !0,
+  dismissable: t = !0,
   onDismiss: m,
-  info: s,
+  info: r,
   extraInfo: i,
-  urlTitle: g,
-  url: v,
-  target: f = "_self",
-  closeBtnText: _ = "fjern melding",
-  expanderOpenFromStart: d = !1,
-  variant: o = "alert",
-  testId: p
+  urlTitle: v,
+  url: l,
+  target: _ = "_self",
+  closeBtnText: n = "fjern melding",
+  expanderOpenFromStart: g = !1,
+  variant: a = "error",
+  testId: d
 }) => {
-  const [a, C] = R(d), b = y(), E = !!s || !!i, S = o === "alert" ? "alert" : "region", k = X({ label: c, id: b }), z = () => {
-    E && C(!a);
-  }, H = u(r["service-message"], r[`service-message--${o}`]);
-  return /* @__PURE__ */ e.createElement("div", { className: H, role: S, ...k, "data-testid": p }, /* @__PURE__ */ e.createElement(
-    G,
+  const [o, N] = h(g), f = w(), b = !!r || !!i, S = a === "alert" || a === "error" ? "alert" : "region", R = M({ label: c, id: f }), k = () => {
+    b && N(!o);
+  }, I = p(s["service-message"], s[`service-message--${a}`]);
+  return /* @__PURE__ */ e.createElement("div", { className: I, role: S, ...R, "data-testid": d }, /* @__PURE__ */ e.createElement(
+    j,
     {
       label: c,
-      variant: o,
-      id: b,
-      hasExpander: E,
-      isExpanded: a,
-      dismissable: l,
-      onExpand: z,
+      variant: a,
+      id: f,
+      hasExpander: b,
+      isExpanded: o,
+      dismissable: t,
+      onExpand: k,
       onDismiss: m,
-      closeBtnText: _
+      closeBtnText: n
     }
-  ), E && a && /* @__PURE__ */ e.createElement(
-    J,
+  ), b && o && /* @__PURE__ */ e.createElement(
+    F,
     {
-      info: s,
+      info: r,
       extraInfo: i,
-      urlTitle: g,
-      url: v,
-      target: f,
-      dismissable: l,
+      urlTitle: v,
+      url: l,
+      target: _,
+      dismissable: t,
       onDismiss: m,
-      closeBtnText: _
+      closeBtnText: n
     }
   ));
-}, _e = K;
+}, te = q;
 export {
-  _e as default
+  te as default
 };
 //# sourceMappingURL=ServiceMessage.js.map

package/components/ServiceMessage/ServiceMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceMessage.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport Forward from '../Icons/Forward';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const variantToIconMap = {\n    info: (\n      <Icon svgIcon={InfoSignFill} color={palette.blueberry700} hoverColor={palette.blueberry700} size={iconSize} isHovered={isHovered} />\n    ),\n    warn: <Icon svgIcon={ErrorSignFill} color={palette.banana700} hoverColor={palette.banana700} size={iconSize} isHovered={isHovered} />,\n    alert: <Icon svgIcon={TriangleX} color={palette.cherry700} hoverColor={palette.cherry700} size={iconSize} isHovered={isHovered} />,\n    success: <Icon svgIcon={CheckFill} color={palette.kiwi900} hoverColor={palette.kiwi900} size={iconSize} isHovered={isHovered} />,\n  };\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={hoverRef}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              {variantToIconMap[variant]}\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover<HTMLAnchorElement>();\n  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'alert',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useUuid();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'alert' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["Label","label","variant","id","hasExpander","isExpanded","dismissable","onExpand","onDismiss","closeBtnText","breakpoint","useBreakpoint","isHovered","hoverRef","useHover","iconSize","breakpoints","IconSize","variantToIconMap","React","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill","CustomTag","labelContainerClasses","classNames","styles","ChevronUp","ChevronDown","Close","Content","info","extraInfo","urlTitle","url","target","readMoreRef","readMoreHoverRefIsHovered","closeButtonRef","closeButtonIsHovered","hasUrl","Forward","getColor","X","ServiceMessage","expanderOpenFromStart","testId","setIsExpanded","useState","labelId","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","handleClick","classes","ServiceMessage$1"],"mappings":"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"}
+{"version":3,"file":"ServiceMessage.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={hoverRef}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              <NotificationBadge variant={variant == 'alert' ? 'error' : variant} size={iconSize} isHovered={isHovered} />\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover<HTMLAnchorElement>();\n  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'error',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useUuid();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'alert' || variant === 'error' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["Label","label","variant","id","hasExpander","isExpanded","dismissable","onExpand","onDismiss","closeBtnText","breakpoint","useBreakpoint","isHovered","hoverRef","useHover","iconSize","breakpoints","IconSize","CustomTag","labelContainerClasses","classNames","styles","React","NotificationBadge","Icon","ChevronUp","ChevronDown","Close","Content","info","extraInfo","urlTitle","url","target","readMoreRef","readMoreHoverRefIsHovered","closeButtonRef","closeButtonIsHovered","hasUrl","Forward","getColor","X","ServiceMessage","expanderOpenFromStart","testId","setIsExpanded","useState","labelId","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","handleClick","classes","ServiceMessage$1"],"mappings":"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"}

package/components/ServiceMessage/ServiceMessage.stories.d.ts

@@ -21,7 +21,7 @@ declare const meta: {
         url: string;
         target: "_parent";
         closeBtnText: string;
-        variant: "alert";
+        variant: "error";
         testId: string;
     };
     argTypes: {

package/components/ServiceMessage/styles.module.scss

@@ -67,6 +67,19 @@
     }
   }
 
+  &--error {
+    background-color: $cherry50;
+
+    &:hover {
+      background-color: rgba-to-rgb(rgba($cherry500, 0.1), $cherry50);
+    }
+
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $cherry700;
+    }
+  }
+
   &__container {
     @include make-container;
     @include make-container-max-widths;

package/components/ServiceMessage/styles.module.scss.d.ts

@@ -16,6 +16,7 @@ export type Styles = {
   'service-message__title': string;
   'service-message__toggle': string;
   'service-message--alert': string;
+  'service-message--error': string;
   'service-message--info': string;
   'service-message--success': string;
   'service-message--warn': string;

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "7.6.0",
+  "version": "7.7.0",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {

package/components/NotificationPanel/DetailButton/DetailButton.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-type Props = {
-    content: React.ReactNode;
-    buttonClosedText: string;
-    buttonText: string;
-    expanderOpenFromStart: boolean;
-};
-export declare const DetailButton: React.FC<Props>;
-export {};

package/components/NotificationPanel/DetailButton/DetailButton.js

@@ -1,28 +0,0 @@
-import e, { useState as f } from "react";
-import n from "classnames";
-import { AnalyticsId as _ } from "../../../constants.js";
-import { useUuid as u } from "../../../hooks/useUuid.js";
-import { getAriaLabelAttributes as b } from "../../../utils/accessibility.js";
-import v from "../../Button/Button.js";
-import { Icon as x } from "../../Icon/Icon.js";
-import E from "../../Icons/ChevronDown.js";
-import I from "../../Icons/ChevronUp.js";
-import a from "../../NotificationPanel/DetailButton/styles.module.scss";
-const T = ({ content: i, buttonText: r, buttonClosedText: s, expanderOpenFromStart: c }) => {
-  const [t, l] = f(c), o = t ? r : s, m = u(), p = b({
-    label: o,
-    id: m,
-    prefer: "label"
-  }), d = {
-    onClick: () => l(!t),
-    variant: "borderless",
-    className: n(a["notification-panel__detail"], a["notification-panel__detail-button"]),
-    "aria-expanded": t,
-    ...p
-  };
-  return /* @__PURE__ */ e.createElement("div", { className: a["notification-panel__detail-section"] }, /* @__PURE__ */ e.createElement("div", { className: a["notification-panel__detail-section__button--wrapper"] }, /* @__PURE__ */ e.createElement(v, { testId: "expand", "data-analyticsid": _.Expander, ...d }, o, /* @__PURE__ */ e.createElement(x, { svgIcon: t ? I : E }))), t && /* @__PURE__ */ e.createElement("div", { className: n(a["notification-panel__detail-section__content"]) }, i));
-};
-export {
-  T as DetailButton
-};
-//# sourceMappingURL=DetailButton.js.map

package/components/NotificationPanel/DetailButton/DetailButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DetailButton.js","sources":["../../../../src/components/NotificationPanel/DetailButton/DetailButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../../constants';\nimport { useUuid } from '../../../hooks/useUuid';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../../utils/accessibility';\nimport Button, { ButtonProps } from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\ntype Props = {\n  content: React.ReactNode;\n  buttonClosedText: string;\n  buttonText: string;\n  expanderOpenFromStart: boolean;\n};\nexport const DetailButton: React.FC<Props> = ({ content, buttonText, buttonClosedText, expanderOpenFromStart }: Props): JSX.Element => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n  const activeButtonText = isExpanded ? buttonText : buttonClosedText;\n\n  const buttonTextId = useUuid();\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: activeButtonText,\n    id: buttonTextId,\n    prefer: 'label',\n  });\n\n  const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n    onClick: () => setIsExpanded(!isExpanded),\n    variant: 'borderless',\n    className: classNames(styles['notification-panel__detail'], styles['notification-panel__detail-button']),\n    'aria-expanded': isExpanded,\n    ...ariaLabelAttributes,\n  };\n\n  return (\n    <div className={styles['notification-panel__detail-section']}>\n      <div className={styles['notification-panel__detail-section__button--wrapper']}>\n        <Button testId=\"expand\" data-analyticsid={AnalyticsId.Expander} {...commonProps}>\n          {activeButtonText}\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      </div>\n      {isExpanded && <div className={classNames(styles['notification-panel__detail-section__content'])}>{content}</div>}\n    </div>\n  );\n};\n"],"names":["DetailButton","content","buttonText","buttonClosedText","expanderOpenFromStart","isExpanded","setIsExpanded","useState","activeButtonText","buttonTextId","useUuid","ariaLabelAttributes","getAriaLabelAttributes","commonProps","classNames","styles","React","Button","AnalyticsId","Icon","ChevronUp","ChevronDown"],"mappings":";;;;;;;;;;AAoBO,MAAMA,IAAgC,CAAC,EAAE,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,GAAkB,uBAAAC,QAAgD;AACrI,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAkBH,CAAqB,GACrEI,IAAmBH,IAAaH,IAAaC,GAE7CM,IAAeC,KAEfC,IAAsBC,EAAuB;AAAA,IACjD,OAAOJ;AAAA,IACP,IAAIC;AAAA,IACJ,QAAQ;AAAA,EAAA,CACT,GAEKI,IAA0D;AAAA,IAC9D,SAAS,MAAMP,EAAc,CAACD,CAAU;AAAA,IACxC,SAAS;AAAA,IACT,WAAWS,EAAWC,EAAO,4BAA4B,GAAGA,EAAO,mCAAmC,CAAC;AAAA,IACvG,iBAAiBV;AAAA,IACjB,GAAGM;AAAA,EAAA;AAGL,yCACG,OAAI,EAAA,WAAWI,EAAO,oCAAoC,EAAA,mCACxD,OAAI,EAAA,WAAWA,EAAO,qDAAqD,KACzEC,gBAAAA,EAAA,cAAAC,GAAA,EAAO,QAAO,UAAS,oBAAkBC,EAAY,UAAW,GAAGL,EACjE,GAAAL,mCACAW,GAAK,EAAA,SAASd,IAAae,IAAYC,EAAA,CAAa,CACvD,CACF,GACChB,KAAeW,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWF,EAAWC,EAAO,6CAA6C,CAAC,KAAId,CAAQ,CAC7G;AAEJ;"}

package/components/NotificationPanel/DetailButton/styles.module.scss

@@ -1,38 +0,0 @@
-@import '../../../scss/spacers';
-@import '../../../scss/breakpoints';
-@import '../../../scss/font-settings';
-@import '../../../scss/palette';
-
-.notification-panel__detail-section {
-  display: flex;
-  flex-direction: column-reverse;
-
-  &__button--wrapper {
-    padding: 0.375rem 0 0.625rem;
-    font-size: $font-size-xs;
-    line-height: $lineheight-size-xs;
-  }
-
-  &__content {
-    padding: getSpacer(3xs) 0;
-    font-size: $font-size-xs;
-    line-height: $lineheight-size-xs;
-  }
-}
-
-html .notification-panel__detail.notification-panel__detail-button {
-  text-decoration: underline;
-  text-decoration-color: $blueberry600;
-  margin-left: -0.25rem;
-  padding: 0 0 0 getSpacer(3xs);
-  white-space: nowrap;
-  overflow: initial;
-  text-overflow: clip;
-  font-size: $font-size-sm;
-  line-height: 1.625rem;
-  height: 1.625rem;
-
-  @media (width >= 0) {
-    min-height: unset;
-  }
-}

package/components/NotificationPanel/DetailButton/styles.module.scss.d.ts

@@ -1,13 +0,0 @@
-export type Styles = {
-  'notification-panel__detail': string;
-  'notification-panel__detail-button': string;
-  'notification-panel__detail-section': string;
-  'notification-panel__detail-section__button--wrapper': string;
-  'notification-panel__detail-section__content': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;