@helsenorge/designsystem-react 7.3.1 → 7.5.0

package/components/NotificationPanel/NotificationPanel.js

@@ -1,126 +1,127 @@
 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 { palette as n } from "../../theme/palette.js";
-import { getAriaLabelAttributes as R } from "../../utils/accessibility.js";
-import $ from "../Close/Close.js";
-import { Icon as p } from "../Icon/Icon.js";
+import { DetailButton as B } from "./DetailButton/DetailButton.js";
+import { IconSize as n, AnalyticsId as L } from "../../constants.js";
+import { useUuid as P } from "../../hooks/useUuid.js";
+import { getColor as R } from "../../theme/currys/color.js";
+import { palette as o } from "../../theme/palette.js";
+import { getAriaLabelAttributes as $ } from "../../utils/accessibility.js";
+import V from "../Close/Close.js";
+import { Icon as f } 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 e from "../NotificationPanel/styles.module.scss";
-const V = ({ fluid: s, children: m }) => {
+const W = ({ 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) => {
+}, j = t.forwardRef((s, m) => {
   const {
     children: l,
-    variant: f = "info",
-    dismissable: _ = !1,
+    variant: p = "info",
+    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,
+    fluid: S = !1,
     size: C,
-    className: S,
-    labelId: I,
+    className: I,
+    labelId: x,
     role: g,
-    testId: x
-  } = s, d = L(I), y = {
+    testId: w
+  } = s, d = P(x), y = {
     info: /* @__PURE__ */ t.createElement(
-      p,
+      f,
       {
         svgIcon: O,
-        color: n.blueberry700,
-        hoverColor: n.blueberry700,
-        size: a ? o.XSmall : o.Small
+        color: o.blueberry700,
+        hoverColor: o.blueberry700,
+        size: a ? n.XSmall : n.Small
       }
     ),
     warn: /* @__PURE__ */ t.createElement(
-      p,
+      f,
       {
         svgIcon: M,
-        color: n.banana700,
-        hoverColor: n.banana700,
-        size: a ? o.XSmall : o.Small
+        color: o.banana700,
+        hoverColor: o.banana700,
+        size: a ? n.XSmall : n.Small
       }
     ),
     alert: /* @__PURE__ */ t.createElement(
-      p,
+      f,
       {
         svgIcon: U,
-        color: n.cherry700,
-        hoverColor: n.cherry700,
-        size: a ? o.XSmall : o.Small
+        color: o.cherry700,
+        hoverColor: o.cherry700,
+        size: a ? n.XSmall : n.Small
       }
     ),
     success: /* @__PURE__ */ t.createElement(
-      p,
+      f,
       {
         svgIcon: D,
-        color: n.kiwi900,
-        hoverColor: n.kiwi900,
-        size: a ? o.XSmall : o.Small
+        color: o.kiwi900,
+        hoverColor: o.kiwi900,
+        size: a ? n.XSmall : n.Small
       }
     )
-  }, w = () => {
-    const k = c(e["notification-panel__content"]), F = c(e["notification-panel__label"], {
+  }, z = () => {
+    const h = a === "outline", F = c(e["notification-panel__content"]), X = 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
+      [e["notification-panel__label--compact"]]: !!a,
+      [e["notification-panel__label--outline"]]: h
+    }), A = 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
     });
-    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,
+    return /* @__PURE__ */ t.createElement("div", { className: F, id: i ? void 0 : d }, i && /* @__PURE__ */ t.createElement("h1", { className: X, id: d }, i), l && /* @__PURE__ */ t.createElement("div", { className: A }, l), r && b && _ && !a && /* @__PURE__ */ t.createElement(
+      B,
       {
-        expanderOpenFromStart: h,
+        expanderOpenFromStart: N,
         content: r,
         buttonText: b,
-        buttonClosedText: u
+        buttonClosedText: _
       }
     ));
-  }, z = c(
+  }, T = c(
     e["notification-panel"],
-    e[`notification-panel--${f}`],
+    e[`notification-panel--${p}`],
     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(
+    I
+  ), v = g || p === "alert" && "alert" || void 0, k = v ? $({ label: i, id: d }) : void 0;
+  return /* @__PURE__ */ t.createElement(W, { fluid: S }, /* @__PURE__ */ t.createElement(
     "div",
     {
       ref: m,
       role: v,
-      "data-testid": x,
-      "data-analyticsid": B.NotificationPanel,
-      className: z,
-      ...T
+      "data-testid": w,
+      "data-analyticsid": L.NotificationPanel,
+      className: T,
+      ...k
     },
-    /* @__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"] }, y[p]),
+    u && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement(V, { ariaLabel: s.ariaLabelCloseBtn, onClick: E, color: R("black") })),
+    z()
   ));
-}), le = W;
+}), re = j;
 export {
-  le as default
+  re 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';\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 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\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 && <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","outlineVariant","contentClasses","labelClasses","childrenClasses","DetailButton","notificationPanelClasses","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Close","getColor","NotificationPanel$1"],"mappings":"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"}

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

@@ -51,4 +51,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/components/PopMenu/PopMenu.d.ts

@@ -1,10 +1,16 @@
 import React from 'react';
+import { SvgIcon } from '../Icon';
+import { IconName } from '../Icons/IconNames';
 import { LinkListProps } from '../LinkList';
 export declare enum PopMenuVariant {
     onWhite = "on-white",
     onGray = "on-gray",
     onBlueberry = "on-blueberry"
 }
+export declare enum PopMenuLabelPosition {
+    right = "right",
+    left = "left"
+}
 export interface PopMenuProps {
     /** Content shown inside PopOver. Can only be a LinkList */
     children: React.ReactElement<LinkListProps>;
@@ -24,6 +30,12 @@ export interface PopMenuProps {
     openButtonAriaLabel?: string;
     /** Sets the arial-label attribute for the closeButton. */
     closeButtonAriaLabel?: string;
+    /** Sets the icon on the trigger button. */
+    svgIcon?: SvgIcon | IconName;
+    /** Optional text next to the trigger button. */
+    labelText?: string;
+    /** Placement of the label text relative to the trigger button. */
+    labelTextPosition?: PopMenuLabelPosition;
 }
 export declare const PopMenu: React.FC<PopMenuProps>;
 export default PopMenu;

package/components/PopMenu/PopMenu.js

@@ -1,89 +1,89 @@
-import o, { useRef as a, useState as A } from "react";
-import p from "classnames";
-import { IconSize as k, AnalyticsId as M } from "../../constants.js";
-import { useBreakpoint as P } from "../../hooks/useBreakpoint.js";
-import { useHover as T } from "../../hooks/useHover.js";
-import { useOutsideEvent as $ } from "../../hooks/useOutsideEvent.js";
-import { getColor as x } from "../../theme/currys/color.js";
-import { breakpoints as D } from "../../theme/grid.js";
-import { isComponent as v } from "../../utils/component.js";
-import G from "../Close/Close.js";
-import { Icon as W } from "../Icon/Icon.js";
-import X from "../Icons/VerticalDots.js";
-import I from "../LinkList/LinkList.js";
-import j from "../PopOver/PopOver.js";
-import r from "../PopMenu/styles.module.scss";
-var q = /* @__PURE__ */ ((n) => (n.onWhite = "on-white", n.onGray = "on-gray", n.onBlueberry = "on-blueberry", n))(q || {});
-const F = (n) => {
-  const m = a(null), i = a(null), c = a(null), [s, l] = A(!1), {
-    children: u,
-    popOverClassName: B,
+import e, { useRef as p, useState as G } from "react";
+import u from "classnames";
+import { IconSize as m, AnalyticsId as W } from "../../constants.js";
+import { useBreakpoint as j } from "../../hooks/useBreakpoint.js";
+import { useHover as q } from "../../hooks/useHover.js";
+import { useOutsideEvent as F } from "../../hooks/useOutsideEvent.js";
+import { getColor as E } from "../../theme/currys/color.js";
+import { breakpoints as J } from "../../theme/grid.js";
+import { isComponent as y } from "../../utils/component.js";
+import { Icon as f } from "../Icon/Icon.js";
+import K from "../Icons/VerticalDots.js";
+import Q from "../Icons/X.js";
+import U from "../LazyIcon/LazyIcon.js";
+import h from "../LinkList/LinkList.js";
+import V from "../PopOver/PopOver.js";
+import l from "../PopMenu/styles.module.scss";
+var Y = /* @__PURE__ */ ((o) => (o.onWhite = "on-white", o.onGray = "on-gray", o.onBlueberry = "on-blueberry", o))(Y || {}), Z = /* @__PURE__ */ ((o) => (o.right = "right", o.left = "left", o))(Z || {});
+const ee = (o) => {
+  const d = p(null), v = p(null), B = p(null), b = p(null), [r, c] = G(!1), {
+    children: g,
+    popOverClassName: O,
     popMenuClassName: N,
-    openButtonTestId: y,
-    closeButtonTestId: E,
-    popOverTestId: O,
-    popMenuVariant: f = "on-white",
-    openButtonAriaLabel: h,
-    closeButtonAriaLabel: L
-  } = n, d = p(r["pop-menu-button"], {
-    [r[`pop-menu-button--${f}`]]: f
-  }), b = P() < D.md;
-  $(c, () => l(!s));
-  const { isHovered: R } = T(i), S = b ? k.XSmall : k.Small, _ = (e) => {
-    l(!1), e && e();
-  }, g = () => {
-    if (v(u, I))
-      return /* @__PURE__ */ o.createElement(
-        j,
+    openButtonTestId: z,
+    closeButtonTestId: H,
+    popOverTestId: R,
+    popMenuVariant: C = "on-white",
+    openButtonAriaLabel: S,
+    closeButtonAriaLabel: _,
+    svgIcon: n,
+    labelText: a,
+    labelTextPosition: I = "right"
+    /* right */
+  } = o, L = u(l["pop-menu-button"], {
+    [l[`pop-menu-button--${C}`]]: C
+  }), T = j() < J.md;
+  F(b, () => {
+    c(!1);
+  });
+  const { isHovered: i } = q(d), k = T ? m.XSmall : m.Small, w = (t) => {
+    c(!1), t && t();
+  }, x = () => {
+    if (y(g, h))
+      return /* @__PURE__ */ e.createElement(
+        V,
         {
-          testId: O,
-          className: p(r["pop-menu__pop-over"], B),
-          arrowClassName: r["pop-menu__pop-over-arrow"],
-          controllerRef: m,
-          popOverRef: c
+          testId: R,
+          className: u(l["pop-menu__pop-over"], O),
+          arrowClassName: l["pop-menu__pop-over-arrow"],
+          controllerRef: v,
+          popOverRef: B
         },
-        o.Children.map(
-          u,
-          (e) => o.cloneElement(e, {
-            children: o.Children.map(
-              e.props.children,
-              (t) => v(t, I.Link) ? o.cloneElement(t, {
-                onClick: (z) => _(() => t.props.onClick && t.props.onClick(z))
-              }) : t
+        e.Children.map(
+          g,
+          (t) => e.cloneElement(t, {
+            children: e.Children.map(
+              t.props.children,
+              (s) => y(s, h.Link) ? e.cloneElement(s, {
+                onClick: (D) => w(() => s.props.onClick && s.props.onClick(D))
+              }) : s
             )
           })
         )
       );
-  }, C = (e, t) => {
-    t && t.stopPropagation(), l(e);
-  }, w = /* @__PURE__ */ o.createElement(
+  }, X = (t) => {
+    t && t.stopPropagation(), c(!r);
+  }, A = n && typeof n == "string" ? /* @__PURE__ */ e.createElement(U, { iconName: n, size: m.XSmall, isHovered: i }) : n && /* @__PURE__ */ e.createElement(f, { svgIcon: n, size: m.XSmall, isHovered: i }), M = n ? A : /* @__PURE__ */ e.createElement(f, { svgIcon: n ?? K, color: E("black"), size: k, isHovered: i }), P = /* @__PURE__ */ e.createElement(f, { svgIcon: Q, color: E("black"), size: k, isHovered: i }), $ = /* @__PURE__ */ e.createElement(
     "button",
     {
-      ref: i,
-      "data-testid": y,
-      className: d,
-      "aria-label": h || "Se mer",
-      onClick: (e) => C(!0, e),
+      ref: d,
+      "data-testid": r ? H : z,
+      className: L,
+      "aria-label": r ? _ : S,
+      "aria-expanded": r,
+      onClick: X,
       type: "button"
     },
-    /* @__PURE__ */ o.createElement(W, { svgIcon: X, className: "test", color: x("black"), size: S, isHovered: R })
-  ), H = /* @__PURE__ */ o.createElement(
-    G,
-    {
-      ariaLabel: L,
-      color: "black",
-      className: d,
-      testId: E,
-      ref: m,
-      onClick: (e) => C(!1, e),
-      small: b
-    }
+    a && I == "left" && /* @__PURE__ */ e.createElement("span", null, a),
+    /* @__PURE__ */ e.createElement("div", { ref: v }, r ? P : M),
+    a && I == "right" && /* @__PURE__ */ e.createElement("span", null, a)
   );
-  return /* @__PURE__ */ o.createElement("div", { className: p(r["pop-menu-button"], N), "data-analyticsid": M.PopMenu }, s ? H : w, s && g());
-}, me = F;
+  return /* @__PURE__ */ e.createElement("div", { ref: b, className: u(l["pop-menu-button"], N), "data-analyticsid": W.PopMenu }, $, r && x());
+}, Ce = ee;
 export {
-  F as PopMenu,
-  q as PopMenuVariant,
-  me as default
+  ee as PopMenu,
+  Z as PopMenuLabelPosition,
+  Y as PopMenuVariant,
+  Ce as default
 };
 //# sourceMappingURL=PopMenu.js.map