@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/FormLayout.js

@@ -1,38 +1,50 @@
-import { jsx as i } from "react/jsx-runtime";
-import l from "react";
-import s from "classnames";
-import { FormSize as p, AnalyticsId as v } from "./constants.js";
-import r from "./components/FormLayout/styles.module.scss";
-var w = /* @__PURE__ */ ((o) => (o.one = "one", o.two = "two", o.three = "three", o.four = "four", o.five = "five", o))(w || {});
-const N = l.forwardRef((o, m) => {
-  const { maxColumns: e = "one", colMinWidth: c = 300, size: f, className: n, mapHelper: t } = o, d = { "--min-col-width": `${c}px` }, h = s(
-    r["form-layout-container"],
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { FormSize, AnalyticsId } from "./constants.js";
+import formGroupStyles from "./components/FormLayout/styles.module.scss";
+var FormLayoutColumns = /* @__PURE__ */ ((FormLayoutColumns2) => {
+  FormLayoutColumns2["one"] = "one";
+  FormLayoutColumns2["two"] = "two";
+  FormLayoutColumns2["three"] = "three";
+  FormLayoutColumns2["four"] = "four";
+  FormLayoutColumns2["five"] = "five";
+  return FormLayoutColumns2;
+})(FormLayoutColumns || {});
+const FormLayout = React.forwardRef((props, ref) => {
+  const { maxColumns: columns = "one", colMinWidth = 300, size, className, mapHelper } = props;
+  const cssVariable = { "--min-col-width": `${colMinWidth}px` };
+  const formLayoutContainerClasses = classNames(
+    formGroupStyles["form-layout-container"],
     {
-      [r["form-layout-container--large"]]: f === p.large
+      [formGroupStyles["form-layout-container--large"]]: size === FormSize.large
     },
-    n
-  ), u = s(r["form-layout-child"], {
-    [r["form-layout-child--two"]]: e === "two",
-    [r["form-layout-child--three"]]: e === "three",
-    [r["form-layout-child--four"]]: e === "four",
-    [r["form-layout-child--five"]]: e === "five"
+    className
+  );
+  const formLayoutChildClasses = classNames(formGroupStyles["form-layout-child"], {
+    [formGroupStyles["form-layout-child--two"]]: columns === "two",
+    [formGroupStyles["form-layout-child--three"]]: columns === "three",
+    [formGroupStyles["form-layout-child--four"]]: columns === "four",
+    [formGroupStyles["form-layout-child--five"]]: columns === "five"
     /* five */
   });
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-testid": o.testId,
-      "data-analyticsid": v.FormLayout,
-      style: d,
-      className: h,
-      ref: m,
-      children: l.Children.map(o.children, (a, y) => /* @__PURE__ */ i("div", { className: u, children: t ? t(a, y) : a }))
+      "data-testid": props.testId,
+      "data-analyticsid": AnalyticsId.FormLayout,
+      style: cssVariable,
+      className: formLayoutContainerClasses,
+      ref,
+      children: React.Children.map(props.children, (child, index) => {
+        return /* @__PURE__ */ jsx("div", { className: formLayoutChildClasses, children: mapHelper ? mapHelper(child, index) : child });
+      })
     }
   );
 });
-N.displayName = "FormLayout";
+FormLayout.displayName = "FormLayout";
 export {
-  N as F,
-  w as a
+  FormLayout as F,
+  FormLayoutColumns as a
 };
 //# sourceMappingURL=FormLayout.js.map

package/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","sources":["../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormSize } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode, index: number) => React.ReactNode;\n}\n\nexport const FormLayout = React.forwardRef((props: FormLayoutProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--large']]: size === FormSize.large,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div\n      data-testid={props.testId}\n      data-analyticsid={AnalyticsId.FormLayout}\n      style={cssVariable}\n      className={formLayoutContainerClasses}\n      ref={ref}\n    >\n      {React.Children.map(props.children, (child: React.ReactNode, index: number) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child, index) : child}</div>;\n      })}\n    </div>\n  );\n});\n\nFormLayout.displayName = 'FormLayout';\n\nexport default FormLayout;\n"],"names":["FormLayoutColumns","FormLayout","React","props","ref","columns","colMinWidth","size","className","mapHelper","cssVariable","formLayoutContainerClasses","classNames","formGroupStyles","FormSize","formLayoutChildClasses","jsx","AnalyticsId","child","index"],"mappings":";;;;;AAQY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,OAAO,QALGA,IAAAA,KAAA,CAAA,CAAA;AAyBL,MAAMC,IAAaC,EAAM,WAAW,CAACC,GAAwBC,MAA4C;AACxG,QAAA,EAAE,YAAYC,IAAU,OAAuB,aAAAC,IAAc,KAAK,MAAAC,GAAM,WAAAC,GAAW,WAAAC,EAAc,IAAAN,GAEjGO,IAAc,EAAE,mBAAmB,GAAGJ,CAAW,QACjDK,IAA6BC;AAAA,IACjCC,EAAgB,uBAAuB;AAAA,IACvC;AAAA,MACE,CAACA,EAAgB,8BAA8B,CAAC,GAAGN,MAASO,EAAS;AAAA,IACvE;AAAA,IACAN;AAAA,EAAA,GAEIO,IAAyBH,EAAWC,EAAgB,mBAAmB,GAAG;AAAA,IAC9E,CAACA,EAAgB,wBAAwB,CAAC,GAAGR,MAAY;AAAA,IACzD,CAACQ,EAAgB,0BAA0B,CAAC,GAAGR,MAAY;AAAA,IAC3D,CAACQ,EAAgB,yBAAyB,CAAC,GAAGR,MAAY;AAAA,IAC1D,CAACQ,EAAgB,yBAAyB,CAAC,GAAGR,MAAY;AAAA;AAAA,EAAA,CAC3D;AAGC,SAAA,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAab,EAAM;AAAA,MACnB,oBAAkBc,EAAY;AAAA,MAC9B,OAAOP;AAAA,MACP,WAAWC;AAAA,MACX,KAAAP;AAAA,MAEC,YAAM,SAAS,IAAID,EAAM,UAAU,CAACe,GAAwBC,MACpD,gBAAAH,EAAC,SAAI,WAAWD,GAAyB,cAAYN,EAAUS,GAAOC,CAAK,IAAID,EAAM,CAAA,CAC7F;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDjB,EAAW,cAAc;"}
+{"version":3,"file":"FormLayout.js","sources":["../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormSize } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode, index: number) => React.ReactNode;\n}\n\nexport const FormLayout = React.forwardRef((props: FormLayoutProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--large']]: size === FormSize.large,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div\n      data-testid={props.testId}\n      data-analyticsid={AnalyticsId.FormLayout}\n      style={cssVariable}\n      className={formLayoutContainerClasses}\n      ref={ref}\n    >\n      {React.Children.map(props.children, (child: React.ReactNode, index: number) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child, index) : child}</div>;\n      })}\n    </div>\n  );\n});\n\nFormLayout.displayName = 'FormLayout';\n\nexport default FormLayout;\n"],"names":["FormLayoutColumns"],"mappings":";;;;;AAQY,IAAA,sCAAAA,uBAAL;AACLA,qBAAA,KAAM,IAAA;AACNA,qBAAA,KAAM,IAAA;AACNA,qBAAA,OAAQ,IAAA;AACRA,qBAAA,MAAO,IAAA;AACPA,qBAAA,MAAO,IAAA;AALGA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAyBL,MAAM,aAAa,MAAM,WAAW,CAAC,OAAwB,QAA4C;AACxG,QAAA,EAAE,YAAY,UAAU,OAAuB,cAAc,KAAK,MAAM,WAAW,UAAA,IAAc;AAEvG,QAAM,cAAc,EAAE,mBAAmB,GAAG,WAAW,KAAK;AAC5D,QAAM,6BAA6B;AAAA,IACjC,gBAAgB,uBAAuB;AAAA,IACvC;AAAA,MACE,CAAC,gBAAgB,8BAA8B,CAAC,GAAG,SAAS,SAAS;AAAA,IACvE;AAAA,IACA;AAAA,EACF;AACA,QAAM,yBAAyB,WAAW,gBAAgB,mBAAmB,GAAG;AAAA,IAC9E,CAAC,gBAAgB,wBAAwB,CAAC,GAAG,YAAY;AAAA,IACzD,CAAC,gBAAgB,0BAA0B,CAAC,GAAG,YAAY;AAAA,IAC3D,CAAC,gBAAgB,yBAAyB,CAAC,GAAG,YAAY;AAAA,IAC1D,CAAC,gBAAgB,yBAAyB,CAAC,GAAG,YAAY;AAAA;AAAA,EAAA,CAC3D;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa,MAAM;AAAA,MACnB,oBAAkB,YAAY;AAAA,MAC9B,OAAO;AAAA,MACP,WAAW;AAAA,MACX;AAAA,MAEC,gBAAM,SAAS,IAAI,MAAM,UAAU,CAAC,OAAwB,UAAkB;AACtE,eAAA,oBAAC,SAAI,WAAW,wBAAyB,sBAAY,UAAU,OAAO,KAAK,IAAI,MAAM,CAAA;AAAA,MAC7F,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;AAED,WAAW,cAAc;"}

package/HelpBubble.js

@@ -1,68 +1,78 @@
-import { jsx as l, jsxs as c } from "react/jsx-runtime";
-import x from "react";
-import b from "classnames";
-import { AnalyticsId as A } from "./constants.js";
-import { A as j } from "./AnchorLink.js";
-import { C as w } from "./Close.js";
-import { P as I, a as P } from "./PopOver.js";
-import r from "./components/HelpBubble/styles.module.scss";
-const D = I, R = x.forwardRef((p, u) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import { A as AnchorLink } from "./AnchorLink.js";
+import { C as Close } from "./Close.js";
+import { P as PopOverVariant, a as PopOver } from "./PopOver.js";
+import styles from "./components/HelpBubble/styles.module.scss";
+const HelpBubbleVariant = PopOverVariant;
+const HelpBubble = React.forwardRef((props, ref) => {
   const {
-    children: m,
-    className: d = "",
-    noCloseButton: o,
-    linkText: t = "Mer hjelp",
-    linkUrl: n,
-    linkTarget: h,
-    onLinkClick: s,
-    onClose: f,
-    closeAriaLabel: k,
+    children,
+    className = "",
+    noCloseButton,
+    linkText = "Mer hjelp",
+    linkUrl,
+    linkTarget,
+    onLinkClick,
+    onClose,
+    closeAriaLabel,
     // Props passed on to PopOver
-    showBubble: i,
-    helpBubbleId: C,
-    variant: B,
-    controllerRef: _,
-    role: a,
-    testId: N
-  } = p, e = a === "tooltip";
-  if (!i && !e)
+    showBubble,
+    helpBubbleId,
+    variant,
+    controllerRef,
+    role,
+    testId
+  } = props;
+  const isTooltip = role === "tooltip";
+  if (!showBubble && !isTooltip) {
     return null;
-  const v = b(r.helpbubble, d), y = b(r.helpbubble__content, {
-    [r["helpbubble__content--close"]]: !o && !e
-  }), H = () => {
-    if (!e) {
-      if (s && t)
-        return /* @__PURE__ */ l("button", { className: r.helpbubble__link, onClick: s, type: "button", children: t });
-      if (n && t)
-        return /* @__PURE__ */ l(j, { href: n, target: h, children: t });
+  }
+  const helpBubbleClasses = classNames(styles.helpbubble, className);
+  const contentClasses = classNames(styles.helpbubble__content, {
+    [styles["helpbubble__content--close"]]: !noCloseButton && !isTooltip
+  });
+  const renderLink = () => {
+    if (isTooltip) {
+      return;
     }
-  }, L = () => {
-    if (!(o || e))
-      return /* @__PURE__ */ l("div", { className: r.helpbubble__close, children: /* @__PURE__ */ l(w, { small: !0, onClick: f, ariaLabel: k }) });
+    if (onLinkClick && linkText) {
+      return /* @__PURE__ */ jsx("button", { className: styles.helpbubble__link, onClick: onLinkClick, type: "button", children: linkText });
+    } else if (linkUrl && linkText) {
+      return /* @__PURE__ */ jsx(AnchorLink, { href: linkUrl, target: linkTarget, children: linkText });
+    }
+  };
+  const renderCloseButton = () => {
+    if (noCloseButton || isTooltip) {
+      return;
+    }
+    return /* @__PURE__ */ jsx("div", { className: styles.helpbubble__close, children: /* @__PURE__ */ jsx(Close, { small: true, onClick: onClose, ariaLabel: closeAriaLabel }) });
   };
-  return /* @__PURE__ */ l(
-    P,
+  return /* @__PURE__ */ jsx(
+    PopOver,
     {
-      id: C,
-      variant: B,
-      controllerRef: _,
-      role: a,
-      ref: u,
-      show: e && i,
-      testId: N,
-      children: /* @__PURE__ */ c("div", { className: v, "data-analyticsid": A.HelpBubble, children: [
-        L(),
-        /* @__PURE__ */ c("div", { className: y, children: [
-          m,
-          H()
+      id: helpBubbleId,
+      variant,
+      controllerRef,
+      role,
+      ref,
+      show: isTooltip && showBubble,
+      testId,
+      children: /* @__PURE__ */ jsxs("div", { className: helpBubbleClasses, "data-analyticsid": AnalyticsId.HelpBubble, children: [
+        renderCloseButton(),
+        /* @__PURE__ */ jsxs("div", { className: contentClasses, children: [
+          children,
+          renderLink()
         ] })
       ] })
     }
   );
 });
-R.displayName = "HelpBubble";
+HelpBubble.displayName = "HelpBubble";
 export {
-  R as H,
-  D as a
+  HelpBubble as H,
+  HelpBubbleVariant as a
 };
 //# sourceMappingURL=HelpBubble.js.map

package/HelpBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.js","sources":["../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport AnchorLink, { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport PopOver, { PopOverProps, PopOverVariant } from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport const HelpBubbleVariant = PopOverVariant;\n\ntype HelpBubbleRole = 'tooltip';\n\nexport interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble. Close button is never rendered if role=\"tooltip\". */\n  noCloseButton?: boolean;\n  /** Visible text on the link. Link is never rendered if role=\"tooltip\". */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Sets the target type of the link. _blank adds an arrow icon at the end of the link */\n  linkTarget?: AnchorLinkTargets;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Sets role of the HelpBubble element. If set to \"tooltip\",  */\n  role?: HelpBubbleRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble = React.forwardRef<HTMLDivElement | SVGSVGElement, HelpBubbleProps>((props, ref) => {\n  const {\n    children,\n    className = '',\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    linkTarget,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    // Props passed on to PopOver\n    showBubble,\n    helpBubbleId,\n    variant,\n    controllerRef,\n    role,\n    testId,\n  } = props;\n\n  const isTooltip = role === 'tooltip';\n\n  if (!showBubble && !isTooltip) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(styles.helpbubble, className);\n\n  const contentClasses = classNames(styles.helpbubble__content, {\n    [styles['helpbubble__content--close']]: !noCloseButton && !isTooltip,\n  });\n\n  const renderLink = (): JSX.Element | undefined => {\n    // Det er ikke tillatt med interaktive/fokuserbare elementer i role=\"tooltip\"\n    if (isTooltip) {\n      return;\n    }\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return (\n        <AnchorLink href={linkUrl} target={linkTarget}>\n          {linkText}\n        </AnchorLink>\n      );\n    }\n  };\n\n  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton || isTooltip) {\n      return;\n    }\n    return (\n      <div className={styles.helpbubble__close}>\n        <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n      </div>\n    );\n  };\n\n  return (\n    <PopOver\n      id={helpBubbleId}\n      variant={variant}\n      controllerRef={controllerRef}\n      role={role}\n      ref={ref}\n      show={isTooltip && showBubble}\n      testId={testId}\n    >\n      <div className={helpBubbleClasses} data-analyticsid={AnalyticsId.HelpBubble}>\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n      </div>\n    </PopOver>\n  );\n});\n\nHelpBubble.displayName = 'HelpBubble';\n\nexport default HelpBubble;\n"],"names":["HelpBubbleVariant","PopOverVariant","HelpBubble","React","props","ref","children","className","noCloseButton","linkText","linkUrl","linkTarget","onLinkClick","onClose","closeAriaLabel","showBubble","helpBubbleId","variant","controllerRef","role","testId","isTooltip","helpBubbleClasses","classNames","styles","contentClasses","renderLink","jsx","AnchorLink","renderCloseButton","Close","PopOver","AnalyticsId","jsxs"],"mappings":";;;;;;;;AAWO,MAAMA,IAAoBC,GAqC3BC,IAAaC,EAAM,WAA4D,CAACC,GAAOC,MAAQ;AAC7F,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,gBAAAC;AAAA;AAAA,IAEA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC;AAAA,EACE,IAAAhB,GAEEiB,IAAYF,MAAS;AAEvB,MAAA,CAACJ,KAAc,CAACM;AACX,WAAA;AAGT,QAAMC,IAAoBC,EAAWC,EAAO,YAAYjB,CAAS,GAE3DkB,IAAiBF,EAAWC,EAAO,qBAAqB;AAAA,IAC5D,CAACA,EAAO,4BAA4B,CAAC,GAAG,CAAChB,KAAiB,CAACa;AAAA,EAAA,CAC5D,GAEKK,IAAa,MAA+B;AAEhD,QAAI,CAAAL,GAGJ;AAAA,UAAIT,KAAeH;AAEf,eAAA,gBAAAkB,EAAC,YAAO,WAAWH,EAAO,kBAAkB,SAASZ,GAAa,MAAK,UACpE,UACHH,EAAA,CAAA;AAEJ,UAAWC,KAAWD;AACpB,iCACGmB,GAAW,EAAA,MAAMlB,GAAS,QAAQC,GAChC,UACHF,EAAA,CAAA;AAAA;AAAA,EAEJ,GAGIoB,IAAoB,MAA+B;AACvD,QAAI,EAAArB,KAAiBa;AAGrB,aACG,gBAAAM,EAAA,OAAA,EAAI,WAAWH,EAAO,mBACrB,UAAA,gBAAAG,EAACG,GAAM,EAAA,OAAK,IAAC,SAASjB,GAAS,WAAWC,GAAgB,EAC5D,CAAA;AAAA,EAAA;AAKF,SAAA,gBAAAa;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,IAAIf;AAAA,MACJ,SAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC;AAAA,MACA,KAAAd;AAAA,MACA,MAAMgB,KAAaN;AAAA,MACnB,QAAAK;AAAA,MAEA,4BAAC,OAAI,EAAA,WAAWE,GAAmB,oBAAkBU,EAAY,YAC9D,UAAA;AAAA,QAAkBH,EAAA;AAAA,QACnB,gBAAAI,EAAC,OAAI,EAAA,WAAWR,GACb,UAAA;AAAA,UAAAnB;AAAA,UACAoB,EAAW;AAAA,QAAA,GACd;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAEDxB,EAAW,cAAc;"}
+{"version":3,"file":"HelpBubble.js","sources":["../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport AnchorLink, { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport PopOver, { PopOverProps, PopOverVariant } from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport const HelpBubbleVariant = PopOverVariant;\n\ntype HelpBubbleRole = 'tooltip';\n\nexport interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble. Close button is never rendered if role=\"tooltip\". */\n  noCloseButton?: boolean;\n  /** Visible text on the link. Link is never rendered if role=\"tooltip\". */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Sets the target type of the link. _blank adds an arrow icon at the end of the link */\n  linkTarget?: AnchorLinkTargets;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Sets role of the HelpBubble element. If set to \"tooltip\",  */\n  role?: HelpBubbleRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble = React.forwardRef<HTMLDivElement | SVGSVGElement, HelpBubbleProps>((props, ref) => {\n  const {\n    children,\n    className = '',\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    linkTarget,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    // Props passed on to PopOver\n    showBubble,\n    helpBubbleId,\n    variant,\n    controllerRef,\n    role,\n    testId,\n  } = props;\n\n  const isTooltip = role === 'tooltip';\n\n  if (!showBubble && !isTooltip) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(styles.helpbubble, className);\n\n  const contentClasses = classNames(styles.helpbubble__content, {\n    [styles['helpbubble__content--close']]: !noCloseButton && !isTooltip,\n  });\n\n  const renderLink = (): JSX.Element | undefined => {\n    // Det er ikke tillatt med interaktive/fokuserbare elementer i role=\"tooltip\"\n    if (isTooltip) {\n      return;\n    }\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return (\n        <AnchorLink href={linkUrl} target={linkTarget}>\n          {linkText}\n        </AnchorLink>\n      );\n    }\n  };\n\n  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton || isTooltip) {\n      return;\n    }\n    return (\n      <div className={styles.helpbubble__close}>\n        <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n      </div>\n    );\n  };\n\n  return (\n    <PopOver\n      id={helpBubbleId}\n      variant={variant}\n      controllerRef={controllerRef}\n      role={role}\n      ref={ref}\n      show={isTooltip && showBubble}\n      testId={testId}\n    >\n      <div className={helpBubbleClasses} data-analyticsid={AnalyticsId.HelpBubble}>\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n      </div>\n    </PopOver>\n  );\n});\n\nHelpBubble.displayName = 'HelpBubble';\n\nexport default HelpBubble;\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,oBAAoB;AAqCjC,MAAM,aAAa,MAAM,WAA4D,CAAC,OAAO,QAAQ;AAC7F,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,YAAY,SAAS;AAEvB,MAAA,CAAC,cAAc,CAAC,WAAW;AACtB,WAAA;AAAA,EAAA;AAGT,QAAM,oBAAoB,WAAW,OAAO,YAAY,SAAS;AAE3D,QAAA,iBAAiB,WAAW,OAAO,qBAAqB;AAAA,IAC5D,CAAC,OAAO,4BAA4B,CAAC,GAAG,CAAC,iBAAiB,CAAC;AAAA,EAAA,CAC5D;AAED,QAAM,aAAa,MAA+B;AAEhD,QAAI,WAAW;AACb;AAAA,IAAA;AAEF,QAAI,eAAe,UAAU;AAEzB,aAAA,oBAAC,YAAO,WAAW,OAAO,kBAAkB,SAAS,aAAa,MAAK,UACpE,UACH,SAAA,CAAA;AAAA,IAAA,WAEO,WAAW,UAAU;AAC9B,iCACG,YAAW,EAAA,MAAM,SAAS,QAAQ,YAChC,UACH,UAAA;AAAA,IAAA;AAAA,EAGN;AAEA,QAAM,oBAAoB,MAA+B;AACvD,QAAI,iBAAiB,WAAW;AAC9B;AAAA,IAAA;AAEF,WACG,oBAAA,OAAA,EAAI,WAAW,OAAO,mBACrB,UAAA,oBAAC,OAAM,EAAA,OAAK,MAAC,SAAS,SAAS,WAAW,eAAgB,CAAA,GAC5D;AAAA,EAEJ;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,aAAa;AAAA,MACnB;AAAA,MAEA,+BAAC,OAAI,EAAA,WAAW,mBAAmB,oBAAkB,YAAY,YAC9D,UAAA;AAAA,QAAkB,kBAAA;AAAA,QACnB,qBAAC,OAAI,EAAA,WAAW,gBACb,UAAA;AAAA,UAAA;AAAA,UACA,WAAW;AAAA,QAAA,EACd,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;AAED,WAAW,cAAc;"}

package/HighlightPanel.js

@@ -1,71 +1,97 @@
-import { jsx as e, jsxs as g, Fragment as z } from "react/jsx-runtime";
-import l from "classnames";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
 import "./theme/grid.js";
-import { useBreakpoint as H, Breakpoint as M } from "./hooks/useBreakpoint.js";
+import { useBreakpoint, Breakpoint } from "./hooks/useBreakpoint.js";
 import "react";
-import { AnalyticsId as u, IconSize as I } from "./constants.js";
-import { I as x } from "./Icon.js";
-import { L as T } from "./LazyIcon.js";
-import { T as b } from "./Title.js";
-import a from "./components/HighlightPanel/styles.module.scss";
-var j = /* @__PURE__ */ ((t) => (t.medium = "medium", t.large = "large", t.fluid = "fluid", t))(j || {});
-const _ = ({ className: t, size: n, children: s }) => /* @__PURE__ */ e("div", { className: t, "data-testid": "highlightpanel-wrapper", children: /* @__PURE__ */ e("div", { className: a.highlightpanel__row, children: /* @__PURE__ */ e("div", { className: l(a.highlightpanel__col, n === "medium" && a["highlightpanel__col--offset"]), children: s }) }) }), k = (t) => {
-  const { children: n, className: s } = t, i = l(a["highlightpanel__content-wrapper"], s);
-  return /* @__PURE__ */ e("div", { className: i, children: /* @__PURE__ */ e("div", { className: l(a.highlightpanel__row), children: n }) });
-}, G = (t) => {
+import { AnalyticsId, IconSize } from "./constants.js";
+import { I as Icon } from "./Icon.js";
+import { L as LazyIcon } from "./LazyIcon.js";
+import { T as Title } from "./Title.js";
+import styles from "./components/HighlightPanel/styles.module.scss";
+var HighlightPanelSize = /* @__PURE__ */ ((HighlightPanelSize2) => {
+  HighlightPanelSize2["medium"] = "medium";
+  HighlightPanelSize2["large"] = "large";
+  HighlightPanelSize2["fluid"] = "fluid";
+  return HighlightPanelSize2;
+})(HighlightPanelSize || {});
+const Wrapper = ({ className, size, children }) => /* @__PURE__ */ jsx("div", { className, "data-testid": "highlightpanel-wrapper", children: /* @__PURE__ */ jsx("div", { className: styles.highlightpanel__row, children: /* @__PURE__ */ jsx("div", { className: classNames(styles.highlightpanel__col, size === "medium" && styles["highlightpanel__col--offset"]), children }) }) });
+const ContentWrapper = (props) => {
+  const { children, className } = props;
+  const contentWrapperClasses = classNames(styles["highlightpanel__content-wrapper"], className);
+  return /* @__PURE__ */ jsx("div", { className: contentWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: classNames(styles.highlightpanel__row), children }) });
+};
+const HighlightPanel = (props) => {
   const {
-    children: n,
-    color: s = "white",
-    size: i = "medium",
-    testId: c,
-    svgIcon: r,
-    htmlMarkup: w = "div",
-    className: y,
-    contentWrapperClassName: C,
-    title: m,
-    titleHtmlMarkup: W = "h2"
-  } = t, N = H(), h = l(
-    a[`highlightpanel--${s}`],
-    a[`highlightpanel--${i}`],
-    r && a["highlightpanel--has-icon"],
-    { container: i === "medium" || i === "large" },
-    y
-  ), o = () => {
-    if (r) {
-      const f = i === "large" && N && N >= M.md ? I.Medium : I.Small, v = /* @__PURE__ */ e(b, { testId: "titleId", htmlMarkup: W, appearance: "title4", children: m });
-      return /* @__PURE__ */ g(z, { children: [
-        /* @__PURE__ */ g("div", { className: a.highlightpanel__icon, children: [
-          typeof r == "string" ? /* @__PURE__ */ e(T, { iconName: r, size: f }) : /* @__PURE__ */ e(x, { svgIcon: r, size: f }),
-          m && /* @__PURE__ */ e("div", { className: a.mobile, children: v })
+    children,
+    color = "white",
+    size = "medium",
+    testId,
+    svgIcon,
+    htmlMarkup = "div",
+    className,
+    contentWrapperClassName,
+    title,
+    titleHtmlMarkup = "h2"
+  } = props;
+  const breakpoint = useBreakpoint();
+  const containerClassName = classNames(
+    styles[`highlightpanel--${color}`],
+    styles[`highlightpanel--${size}`],
+    svgIcon && styles["highlightpanel--has-icon"],
+    { container: size === "medium" || size === "large" },
+    className
+  );
+  const renderContent = () => {
+    if (svgIcon) {
+      const iconSize = size === "large" && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;
+      const titleElement = /* @__PURE__ */ jsx(Title, { testId: "titleId", htmlMarkup: titleHtmlMarkup, appearance: "title4", children: title });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.highlightpanel__icon, children: [
+          typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon, { iconName: svgIcon, size: iconSize }) : /* @__PURE__ */ jsx(Icon, { svgIcon, size: iconSize }),
+          title && /* @__PURE__ */ jsx("div", { className: styles["mobile"], children: titleElement })
         ] }),
-        /* @__PURE__ */ g("div", { className: a.highlightpanel__content, children: [
-          m && /* @__PURE__ */ e("div", { className: a.desktop, "aria-hidden": "true", children: v }),
-          n
+        /* @__PURE__ */ jsxs("div", { className: styles.highlightpanel__content, children: [
+          title && /* @__PURE__ */ jsx("div", { className: styles["desktop"], "aria-hidden": "true", children: titleElement }),
+          children
         ] })
       ] });
     }
-    return n;
-  }, d = w, p = l(a["highlightpanel__content-wrapper"], C);
-  return i === "medium" ? /* @__PURE__ */ e(_, { className: h, size: i, children: /* @__PURE__ */ e(d, { className: p, "data-testid": c, "data-analyticsid": u.HighlightPanel, children: o() }) }) : i === "large" && r ? /* @__PURE__ */ e(_, { className: h, size: i, children: /* @__PURE__ */ e(k, { className: p, children: /* @__PURE__ */ e(
-    d,
-    {
-      className: l(a.highlightpanel__col, a["highlightpanel__col--large-with-icon"]),
-      "data-testid": c,
-      "data-analyticsid": u.HighlightPanel,
-      children: o()
-    }
-  ) }) }) : i === "large" ? /* @__PURE__ */ e(_, { className: h, size: i, children: /* @__PURE__ */ e(k, { className: p, children: /* @__PURE__ */ e(
-    d,
-    {
-      className: l(a.highlightpanel__col, a["highlightpanel__col--offset"]),
-      "data-testid": c,
-      "data-analyticsid": u.HighlightPanel,
-      children: o()
-    }
-  ) }) }) : i === "fluid" ? /* @__PURE__ */ e(d, { className: h, "data-testid": c, children: o() }) : null;
+    return children;
+  };
+  const CustomTag = htmlMarkup;
+  const contentWrapperClasses = classNames(styles["highlightpanel__content-wrapper"], contentWrapperClassName);
+  if (size === "medium") {
+    return /* @__PURE__ */ jsx(Wrapper, { className: containerClassName, size, children: /* @__PURE__ */ jsx(CustomTag, { className: contentWrapperClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.HighlightPanel, children: renderContent() }) });
+  }
+  if (size === "large" && svgIcon) {
+    return /* @__PURE__ */ jsx(Wrapper, { className: containerClassName, size, children: /* @__PURE__ */ jsx(ContentWrapper, { className: contentWrapperClasses, children: /* @__PURE__ */ jsx(
+      CustomTag,
+      {
+        className: classNames(styles.highlightpanel__col, styles["highlightpanel__col--large-with-icon"]),
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.HighlightPanel,
+        children: renderContent()
+      }
+    ) }) });
+  }
+  if (size === "large") {
+    return /* @__PURE__ */ jsx(Wrapper, { className: containerClassName, size, children: /* @__PURE__ */ jsx(ContentWrapper, { className: contentWrapperClasses, children: /* @__PURE__ */ jsx(
+      CustomTag,
+      {
+        className: classNames(styles.highlightpanel__col, styles["highlightpanel__col--offset"]),
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.HighlightPanel,
+        children: renderContent()
+      }
+    ) }) });
+  }
+  if (size === "fluid") {
+    return /* @__PURE__ */ jsx(CustomTag, { className: containerClassName, "data-testid": testId, children: renderContent() });
+  }
+  return null;
 };
 export {
-  G as H,
-  j as a
+  HighlightPanel as H,
+  HighlightPanelSize as a
 };
 //# sourceMappingURL=HighlightPanel.js.map

package/HighlightPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper. Not used for fluid size. */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\n      );\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize","Wrapper","className","size","children","jsx","styles","classNames","ContentWrapper","props","contentWrapperClasses","HighlightPanel","color","testId","svgIcon","htmlMarkup","contentWrapperClassName","title","titleHtmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","titleElement","Title","jsxs","Fragment","LazyIcon","Icon","CustomTag","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper. Not used for fluid size. */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\n      );\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize"],"mappings":"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"}

package/HorizontalScroll.js

@@ -1,49 +1,59 @@
-import { jsx as i, jsxs as b } from "react/jsx-runtime";
-import { useRef as l } from "react";
-import s from "classnames";
-import { useIsVisible as c } from "./hooks/useIsVisible.js";
-import { useSize as g } from "./hooks/useSize.js";
-import { useStopPropagation as N } from "./hooks/usestopPropagation.js";
-import r from "./components/HorizontalScroll/styles.module.scss";
-const d = "3px", V = ({ children: m, childWidth: h, testId: _, ...t }) => {
-  const o = l(null), a = l(null), e = l(null), f = c(a, 1, { root: o == null ? void 0 : o.current, rootMargin: d }, !0), u = c(e, 1, { root: o == null ? void 0 : o.current, rootMargin: d }, !0), { width: v = 0 } = g(o) || {}, p = h > v, z = s(r.horizontalscroll__viewport, p && r["horizontalscroll__viewport--overflow"]), n = t["aria-label"] || t["aria-labelledby"];
-  return N(o, ["touchstart", "touchmove"]), /* @__PURE__ */ i("div", { className: r.horizontalscroll, "data-testid": _, children: /* @__PURE__ */ b(
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import classNames from "classnames";
+import { useIsVisible } from "./hooks/useIsVisible.js";
+import { useSize } from "./hooks/useSize.js";
+import { useStopPropagation } from "./hooks/usestopPropagation.js";
+import styles from "./components/HorizontalScroll/styles.module.scss";
+const ROOT_MARGIN_OFFSET = "3px";
+const HorizontalScroll = ({ children, childWidth, testId, ...rest }) => {
+  const viewportRef = useRef(null);
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
+  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef == null ? void 0 : viewportRef.current, rootMargin: ROOT_MARGIN_OFFSET }, true);
+  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef == null ? void 0 : viewportRef.current, rootMargin: ROOT_MARGIN_OFFSET }, true);
+  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};
+  const isOverflowing = childWidth > viewPortWidth;
+  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles["horizontalscroll__viewport--overflow"]);
+  const hasAriaAttributes = rest["aria-label"] || rest["aria-labelledby"];
+  useStopPropagation(viewportRef, ["touchstart", "touchmove"]);
+  return /* @__PURE__ */ jsx("div", { className: styles.horizontalscroll, "data-testid": testId, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: z,
-      ref: o,
-      tabIndex: n ? 0 : void 0,
-      role: n ? "region" : void 0,
-      ...t,
+      className: viewportClasses,
+      ref: viewportRef,
+      tabIndex: hasAriaAttributes ? 0 : void 0,
+      role: hasAriaAttributes ? "region" : void 0,
+      ...rest,
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: s(
-              r.horizontalscroll__indicator,
-              r["horizontalscroll__indicator--left"],
-              !f && r["horizontalscroll__indicator--visible"]
+            className: classNames(
+              styles.horizontalscroll__indicator,
+              styles["horizontalscroll__indicator--left"],
+              !leftIsVisible && styles["horizontalscroll__indicator--visible"]
             )
           }
         ),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: s(
-              r.horizontalscroll__indicator,
-              r["horizontalscroll__indicator--right"],
-              !u && r["horizontalscroll__indicator--visible"]
+            className: classNames(
+              styles.horizontalscroll__indicator,
+              styles["horizontalscroll__indicator--right"],
+              !rightIsVisible && styles["horizontalscroll__indicator--visible"]
             )
           }
         ),
-        /* @__PURE__ */ i("div", { ref: a }),
-        m,
-        /* @__PURE__ */ i("div", { ref: e })
+        /* @__PURE__ */ jsx("div", { ref: leftRef }),
+        children,
+        /* @__PURE__ */ jsx("div", { ref: rightRef })
       ]
     }
   ) });
 };
 export {
-  V as H
+  HorizontalScroll as H
 };
 //# sourceMappingURL=HorizontalScroll.js.map