@helsenorge/designsystem-react 7.4.0 → 7.6.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [7.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.4.0&targetVersion=GTv7.5.0) (2024-05-08)
+
+### Features
+
+- **notificationpanel:** compactmode kan nå vise children
+  ([8056e4a](https://github.com/helsenorge/designsystem/commit/8056e4a95ed03caecd05b69bedbb5c16f6ba1f4a)), closes
+  [#324320](https://github.com/helsenorge/designsystem/issues/324320)
+
+## [7.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.3.1&targetVersion=GTv7.4.0) (2024-05-07)
+
+### Features
+
+- bruk Supernova tokens ([4f75387](https://github.com/helsenorge/designsystem/commit/4f753874252ebf8d4a12950ba52996eb9f3abc32)), closes
+  [#318458](https://github.com/helsenorge/designsystem/issues/318458)
+- mulighet for å gi en tekst på popmenu knapp i tillegg til ikon
+  ([80b232b](https://github.com/helsenorge/designsystem/commit/80b232b4c1bbc1bdd64f711767c6576a01958f56)), closes
+  [#323182](https://github.com/helsenorge/designsystem/issues/323182)
+
+### Bug Fixes
+
+- ikke unødvendig mellomrom i aria-describedby
+  ([0053898](https://github.com/helsenorge/designsystem/commit/0053898bf559a39a401a38194e23550d99bee859)), closes
+  [#324479](https://github.com/helsenorge/designsystem/issues/324479)
+- skjemakomponenter har ikke tom aria-describedby
+  ([186db10](https://github.com/helsenorge/designsystem/commit/186db100d5a3303316d9e40196d64fb06136a58c)), closes
+  [#324479](https://github.com/helsenorge/designsystem/issues/324479)
+
 ## [7.3.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.3.0&targetVersion=GTv7.3.1) (2024-04-22)
 
 ### Bug Fixes

package/components/ErrorWrapper/styles.module.scss

@@ -5,6 +5,7 @@
 @import '../../scss/font-settings';
 
 .error-wrapper {
+  position: relative;
   padding-bottom: getSpacer(m);
 
   @media (min-width: map.get($grid-breakpoints, md)) {

package/components/ExpanderList/styles.module.scss

@@ -89,8 +89,13 @@
   &--closed:not(:hover, .expander-list-link--fill) {
     background-color: transparent;
   }
+
+  &--fill {
+    margin-top: getSpacer(s);
+  }
+
   &--closed#{&}--fill {
-    margin: getSpacer(s) 0;
+    margin-bottom: getSpacer(s);
 
     &:not(:hover) {
       background-color: $neutral50;

package/components/NotificationPanel/NotificationPanel.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';
 export type NotificationCompactVariants = 'basic' | 'outline';
 export type NotificationPanelSizes = 'small' | 'medium' | 'large';
+export type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';
 export interface NotificationPanelProps {
     /** Adds custom classes to the element. */
     className?: string;
@@ -29,6 +30,8 @@ export interface NotificationPanelProps {
     fluid?: boolean;
     /** Sets a label for the notification panel. */
     label?: string;
+    /** Changes the underlying element of the label. */
+    labelHtmlMarkup?: LabelTags;
     /** Close button aria-label */
     ariaLabelCloseBtn?: string;
     /** Custom id for the label */

package/components/NotificationPanel/NotificationPanel.js

@@ -1,47 +1,48 @@
 import t from "react";
 import c from "classnames";
-import { DetailButton as A } from "./DetailButton/DetailButton.js";
-import { IconSize as o, AnalyticsId as B } from "../../constants.js";
-import { useUuid as L } from "../../hooks/useUuid.js";
-import { getColor as P } from "../../theme/currys/color.js";
+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 R } from "../../utils/accessibility.js";
-import $ from "../Close/Close.js";
+import { getAriaLabelAttributes as V } from "../../utils/accessibility.js";
+import D from "../Close/Close.js";
 import { Icon as p } from "../Icon/Icon.js";
-import D from "../Icons/CheckFill.js";
-import M from "../Icons/ErrorSignFill.js";
-import O from "../Icons/InfoSignFill.js";
-import U from "../Icons/TriangleX.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 e from "../NotificationPanel/styles.module.scss";
-const V = ({ fluid: s, children: m }) => {
+const j = ({ fluid: s, children: m }) => {
   if (s) {
     const l = c(e["fluid-wrapper"]);
     return /* @__PURE__ */ t.createElement("div", { className: l }, m);
   }
   return m;
-}, W = t.forwardRef((s, m) => {
+}, q = t.forwardRef((s, m) => {
   const {
     children: l,
     variant: f = "info",
-    dismissable: _ = !1,
+    dismissable: u = !1,
     onClick: E,
     expanderChildren: r,
     expanderButtonText: b,
-    expanderButtonClosedText: u,
-    expanderOpenFromStart: h = !1,
+    expanderButtonClosedText: _,
+    expanderOpenFromStart: N = !1,
     compactVariant: a,
     label: i,
-    fluid: N = !1,
+    labelHtmlMarkup: S = "h1",
+    fluid: I = !1,
     size: C,
-    className: S,
-    labelId: I,
-    role: g,
-    testId: x
-  } = s, d = L(I), y = {
+    className: g,
+    labelId: x,
+    role: w,
+    testId: y
+  } = s, d = $(x), T = {
     info: /* @__PURE__ */ t.createElement(
       p,
       {
-        svgIcon: O,
+        svgIcon: U,
         color: n.blueberry700,
         hoverColor: n.blueberry700,
         size: a ? o.XSmall : o.Small
@@ -50,7 +51,7 @@ const V = ({ fluid: s, children: m }) => {
     warn: /* @__PURE__ */ t.createElement(
       p,
       {
-        svgIcon: M,
+        svgIcon: O,
         color: n.banana700,
         hoverColor: n.banana700,
         size: a ? o.XSmall : o.Small
@@ -59,7 +60,7 @@ const V = ({ fluid: s, children: m }) => {
     alert: /* @__PURE__ */ t.createElement(
       p,
       {
-        svgIcon: U,
+        svgIcon: W,
         color: n.cherry700,
         hoverColor: n.cherry700,
         size: a ? o.XSmall : o.Small
@@ -68,28 +69,29 @@ const V = ({ fluid: s, children: m }) => {
     success: /* @__PURE__ */ t.createElement(
       p,
       {
-        svgIcon: D,
+        svgIcon: H,
         color: n.kiwi900,
         hoverColor: n.kiwi900,
         size: a ? o.XSmall : o.Small
       }
     )
-  }, w = () => {
-    const k = c(e["notification-panel__content"]), F = c(e["notification-panel__label"], {
+  }, 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,
-      [e["notification-panel__label__compact"]]: !!a,
-      [e["notification-panel__label__compact--basic"]]: a === "basic"
-    }), X = c(e["notification-panel__children"], {
-      [e["notification-panel__label-and-content--spacing"]]: i,
-      [e["notification-panel__children--expander-no-label"]]: r && !i
-    });
-    return /* @__PURE__ */ t.createElement("div", { className: k, id: i ? void 0 : d }, i && /* @__PURE__ */ t.createElement("h1", { className: F, id: d }, i), l && !a && /* @__PURE__ */ t.createElement("div", { className: X }, l), r && b && u && !a && /* @__PURE__ */ t.createElement(
-      A,
+      [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,
       {
-        expanderOpenFromStart: h,
+        expanderOpenFromStart: N,
         content: r,
         buttonText: b,
-        buttonClosedText: u
+        buttonClosedText: _
       }
     ));
   }, z = c(
@@ -97,30 +99,30 @@ const V = ({ fluid: s, children: m }) => {
     e[`notification-panel--${f}`],
     C && e[`notification-panel--${C}`],
     {
-      [e["notification-panel__compact"]]: !!a,
-      [e["notification-panel__compact--basic"]]: a === "basic",
-      [e["notification-panel__compact--outline"]]: a === "outline",
+      [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"]]: _
+      [e["notification-panel--dismissable"]]: u
     },
-    S
-  ), v = g || f === "alert" && "alert" || void 0, T = v ? R({ label: i, id: d }) : void 0;
-  return /* @__PURE__ */ t.createElement(V, { fluid: N }, /* @__PURE__ */ t.createElement(
+    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(
     "div",
     {
       ref: m,
       role: v,
-      "data-testid": x,
-      "data-analyticsid": B.NotificationPanel,
+      "data-testid": y,
+      "data-analyticsid": R.NotificationPanel,
       className: z,
-      ...T
+      ...F
     },
-    /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__icon"] }, y[f]),
-    _ && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement($, { ariaLabel: s.ariaLabelCloseBtn, onClick: E, color: P("black") })),
-    w()
+    /* @__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()
   ));
-}), le = W;
+}), se = q;
 export {
-  le as default
+  se 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';\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  /** 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    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 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__compact--basic']]: compactVariant === 'basic',\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__label-and-content--spacing']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n    });\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <h1 className={labelClasses} id={uuid}>\n            {label}\n          </h1>\n        )}\n        {children && !compactVariant && <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","size","className","labelId","role","testId","uuid","useUuid","variantToIconMap","Icon","InfoSignFill","palette","IconSize","ErrorSignFill","TriangleX","CheckFill","renderContent","contentClasses","labelClasses","childrenClasses","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 { 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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"}

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

@@ -16,6 +16,7 @@ declare const meta: {
         size: "large";
         fluid: false;
         label: string;
+        labelHtmlMarkup: "h1";
         variant: "alert";
         role: undefined;
     };
@@ -33,6 +34,10 @@ declare const meta: {
         label: {
             control: string;
         };
+        labelHtmlMarkup: {
+            control: string;
+            options: import("../Title").TitleTags[];
+        };
         variant: {
             control: string;
             options: string[];
@@ -51,4 +56,5 @@ export declare const AllVariants: Story;
 export declare const Expander: Story;
 export declare const Dismissable: Story;
 export declare const Compact: Story;
+export declare const CompactWithChildren: Story;
 export declare const WithSetWidth: Story;

package/components/NotificationPanel/styles.module.scss

@@ -21,9 +21,8 @@
     }
   }
 
-  &__compact {
+  &--compact {
     width: fit-content;
-    font-weight: 600;
     font-size: $font-size-xs;
     line-height: 1.25rem;
     box-shadow: none;
@@ -33,10 +32,6 @@
       padding-right: getSpacer(s);
     }
 
-    &--basic {
-      font-weight: 400;
-    }
-
     &--outline {
       border: none;
     }
@@ -66,12 +61,12 @@
     background-color: $blueberry50;
   }
 
-  &--info.notification-panel__compact {
+  &--info#{&}--compact {
     box-shadow: none;
     background-color: transparent;
   }
 
-  &--info.notification-panel__compact--basic {
+  &--info#{&}--compact--basic {
     border: none;
   }
 
@@ -80,12 +75,12 @@
     background-color: $banana50;
   }
 
-  &--warn.notification-panel__compact {
+  &--warn#{&}--compact {
     box-shadow: none;
     background-color: transparent;
   }
 
-  &--warn.notification-panel__compact--basic {
+  &--warn#{&}--compact--basic {
     border: none;
   }
 
@@ -94,12 +89,12 @@
     background-color: $cherry50;
   }
 
-  &--alert.notification-panel__compact {
+  &--alert#{&}--compact {
     box-shadow: none;
     background-color: transparent;
   }
 
-  &--alert.notification-panel__compact--basic {
+  &--alert#{&}--compact--basic {
     border: none;
   }
 
@@ -108,12 +103,12 @@
     background-color: $kiwi50;
   }
 
-  &--success.notification-panel__compact {
+  &--success#{&}--compact {
     box-shadow: none;
     background-color: transparent;
   }
 
-  &--success.notification-panel__compact--basic {
+  &--success#{&}--compact--basic {
     border: none;
   }
 
@@ -132,10 +127,6 @@
     }
   }
 
-  &__children.notification-panel__label-and-content--spacing {
-    font-weight: 500;
-  }
-
   &__label,
   &__children {
     font-size: $font-size-xs;
@@ -152,26 +143,33 @@
     font-weight: 700;
     margin: getSpacer(2xs) 0 0 0;
 
-    &__compact {
-      font-weight: 600;
+    &--compact {
       font-size: $font-size-xs;
       line-height: 1.25rem;
     }
 
-    &__compact--basic {
-      font-weight: 400;
+    &--no-content {
+      margin: 0;
     }
-  }
 
-  &__label--no-content {
-    margin: 0;
-    font-weight: 600;
+    &--compact,
+    &--no-content {
+      font-weight: 600;
+    }
+
+    &--outline {
+      font-weight: 500;
+    }
   }
 
   &__children {
     font-weight: 600;
     padding: getSpacer(3xs) 0;
 
+    &--with-label {
+      font-weight: 500;
+    }
+
     &--expander-no-label {
       margin: getSpacer(2xs) 0 0 0;
 
@@ -179,6 +177,10 @@
         padding-top: 0;
       }
     }
+
+    &--outline {
+      font-weight: 500;
+    }
   }
 
   &__icon {

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

@@ -6,18 +6,19 @@ export type Styles = {
   'notification-panel': string;
   'notification-panel__children': string;
   'notification-panel__children--expander-no-label': string;
+  'notification-panel__children--outline': string;
+  'notification-panel__children--with-label': string;
   'notification-panel__close': string;
-  'notification-panel__compact': string;
-  'notification-panel__compact--basic': string;
-  'notification-panel__compact--outline': string;
   'notification-panel__content': string;
   'notification-panel__icon': string;
   'notification-panel__label': string;
-  'notification-panel__label__compact': string;
-  'notification-panel__label__compact--basic': string;
+  'notification-panel__label--compact': string;
   'notification-panel__label--no-content': string;
-  'notification-panel__label-and-content--spacing': string;
+  'notification-panel__label--outline': string;
   'notification-panel--alert': string;
+  'notification-panel--compact': string;
+  'notification-panel--compact--basic': string;
+  'notification-panel--compact--outline': string;
   'notification-panel--dismissable': string;
   'notification-panel--info': string;
   'notification-panel--large': string;

package/package.json

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