@helsenorge/designsystem-react 8.5.0 → 8.5.1

package/components/List/index.js

@@ -1,5 +1,5 @@
-import o from "./List.js";
+import { L as a } from "../../List.js";
 export {
-  o as default
+  a as default
 };
 //# sourceMappingURL=index.js.map

package/components/ListHeader/ListHeaderText/index.js

@@ -1,4 +1,4 @@
-import { ListHeaderText as t } from "./ListHeaderText.js";
+import { L as t } from "../../../ListHeaderText.js";
 export {
   t as ListHeaderText,
   t as default

package/components/ListHeader/index.js

@@ -1,11 +1,11 @@
-import { ListHeader as r } from "./ListHeader.js";
-import { mapChildren as a, renderListHeader as d } from "./ListHeader.js";
-import { ListHeaderText as m } from "./ListHeaderText/ListHeaderText.js";
+import { L as r } from "../../ListHeader.js";
+import { m as s, r as o } from "../../ListHeader.js";
+import { L as m } from "../../ListHeaderText.js";
 export {
   r as ListHeader,
   m as ListHeaderText,
   r as default,
-  a as mapChildren,
-  d as renderListHeader
+  s as mapChildren,
+  o as renderListHeader
 };
 //# sourceMappingURL=index.js.map

package/components/Loader/index.js

@@ -1,7 +1,70 @@
-import o from "./Loader.js";
-import { Overlay as t } from "./Loader.js";
+import { jsx as t, jsxs as S } from "react/jsx-runtime";
+import { useState as C, useRef as j, useEffect as z } from "react";
+import c from "classnames";
+import { ZIndex as D, AnalyticsId as R } from "../../constants.js";
+import { u as A } from "../../uuid.js";
+import e from "./styles.module.scss";
+var B = /* @__PURE__ */ ((r) => (r.screen = "screen", r.parent = "parent", r))(B || {});
+const H = (r) => {
+  const {
+    overlay: l,
+    size: d = "small",
+    className: N = "",
+    labelId: m = A(),
+    testId: x,
+    center: L,
+    inline: n,
+    ariaLabelledById: p,
+    ariaLabel: I = "Laster inn"
+  } = r, a = r.overlay ? "white" : r.color || "neutral", g = () => !(l === "parent" || n), [i, u] = C(g()), _ = d === "small", y = d === "medium", f = d === "large", E = c({
+    [e["loader-wrapper--center"]]: L,
+    [e["loader-wrapper--overlay"]]: l,
+    [e["loader-wrapper--overlay-screen"]]: l === "screen",
+    [e["loader-wrapper--overlay-parent"]]: l === "parent" && i,
+    [e["loader-wrapper--inline"]]: n && i
+  }), k = c(
+    e.loader,
+    {
+      [e["loader--small"]]: _,
+      [e["loader--medium"]]: y,
+      [e["loader--large"]]: f
+    },
+    N
+  ), o = c(e.loader__dot, {
+    [e["loader__dot--small"]]: _,
+    [e["loader__dot--medium"]]: y,
+    [e["loader__dot--large"]]: f,
+    [e["loader__dot--banana"]]: a === "banana",
+    [e["loader__dot--cherry"]]: a === "cherry",
+    [e["loader__dot--kiwi"]]: a === "kiwi",
+    [e["loader__dot--neutral"]]: a === "neutral",
+    [e["loader__dot--plum"]]: a === "plum",
+    [e["loader__dot--black"]]: a === "black",
+    [e["loader__dot--white"]]: a === "white"
+  }), s = j(null);
+  return z(() => {
+    var v, w, b, h;
+    l === "parent" && ((w = (v = s.current) == null ? void 0 : v.parentElement) != null && w.style) && (s.current.parentElement.style.position = "relative", u(!0)), n && ((h = (b = s.current) == null ? void 0 : b.parentElement) != null && h.style) && (s.current.parentElement.style.display = "flex", u(!0));
+  }, []), /* @__PURE__ */ t("div", { className: E, ref: s, style: l === "screen" ? { zIndex: D.OverlayScreen } : {}, children: i && /* @__PURE__ */ S(
+    "div",
+    {
+      "data-testid": x,
+      "data-analyticsid": R.Loader,
+      role: "progressbar",
+      "aria-labelledby": p || m,
+      className: k,
+      children: [
+        /* @__PURE__ */ t("div", { className: o }),
+        /* @__PURE__ */ t("div", { className: o }),
+        /* @__PURE__ */ t("div", { className: o }),
+        /* @__PURE__ */ t("div", { className: o }),
+        !p && /* @__PURE__ */ t("span", { id: m, className: e["loader__hidden-text"], children: I })
+      ]
+    }
+  ) });
+};
 export {
-  t as Overlay,
-  o as default
+  B as Overlay,
+  H as default
 };
 //# sourceMappingURL=index.js.map

package/components/Loader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Loader/Loader.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\n\nimport loaderStyles from './styles.module.scss';\n\nexport type LoaderColors = PaletteNames;\nexport type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n\nexport interface LoaderProps {\n  /** Sets the color of the loader. If overlay is used, the color will always be white.  */\n  color?: LoaderColors;\n  /**\tAdds custom classes to the element. */\n  className?: string;\n  /** Changes the size of the loader. */\n  size?: LoaderSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** id of the label */\n  labelId?: string;\n  /** Centers the loader in a container */\n  center?: boolean;\n  /** Inline the loader so it can be used in a span or paragraph */\n  inline?: boolean;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Individual id for loading icon (aria-labelledby).  */\n  ariaLabelledById?: string;\n  /** String that labels the current loading element  */\n  ariaLabel?: string;\n}\n\nconst Loader: React.FC<LoaderProps> = props => {\n  const {\n    overlay,\n    size = 'small',\n    className = '',\n    labelId = uuid(),\n    testId,\n    center,\n    inline,\n    ariaLabelledById,\n    ariaLabel = 'Laster inn',\n  } = props;\n  const color = props.overlay ? 'white' : props.color || 'neutral';\n\n  const showLoader = (): boolean => {\n    if (overlay === Overlay.parent || inline) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const [display, setDisplay] = useState(showLoader());\n\n  const isSmall = size === 'small';\n  const isMedium = size === 'medium';\n  const isLarge = size === 'large';\n\n  const loaderWrapperClasses = classNames({\n    [loaderStyles['loader-wrapper--center']]: center,\n    [loaderStyles['loader-wrapper--overlay']]: overlay,\n    [loaderStyles['loader-wrapper--overlay-screen']]: overlay === Overlay.screen,\n    [loaderStyles['loader-wrapper--overlay-parent']]: overlay === Overlay.parent && display,\n    [loaderStyles['loader-wrapper--inline']]: inline && display,\n  });\n  const loaderClasses = classNames(\n    loaderStyles.loader,\n    {\n      [loaderStyles['loader--small']]: isSmall,\n      [loaderStyles['loader--medium']]: isMedium,\n      [loaderStyles['loader--large']]: isLarge,\n    },\n    className\n  );\n  const loaderDotClasses = classNames(loaderStyles.loader__dot, {\n    [loaderStyles['loader__dot--small']]: isSmall,\n    [loaderStyles['loader__dot--medium']]: isMedium,\n    [loaderStyles['loader__dot--large']]: isLarge,\n    [loaderStyles['loader__dot--banana']]: color === 'banana',\n    [loaderStyles['loader__dot--cherry']]: color === 'cherry',\n    [loaderStyles['loader__dot--kiwi']]: color === 'kiwi',\n    [loaderStyles['loader__dot--neutral']]: color === 'neutral',\n    [loaderStyles['loader__dot--plum']]: color === 'plum',\n    [loaderStyles['loader__dot--black']]: color === 'black',\n    [loaderStyles['loader__dot--white']]: color === 'white',\n  });\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n      setDisplay(true);\n    }\n\n    if (inline && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.display = 'flex';\n      setDisplay(true);\n    }\n  }, []);\n\n  return (\n    <div className={loaderWrapperClasses} ref={wrapperRef} style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}>\n      {display && (\n        <div\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Loader}\n          role=\"progressbar\"\n          aria-labelledby={ariaLabelledById || labelId}\n          className={loaderClasses}\n        >\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          {!ariaLabelledById && (\n            <span id={labelId} className={loaderStyles['loader__hidden-text']}>\n              {ariaLabel}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Loader;\n"],"names":["Overlay","Loader","props","overlay","size","className","labelId","uuid","testId","center","inline","ariaLabelledById","ariaLabel","color","showLoader","display","setDisplay","useState","isSmall","isMedium","isLarge","loaderWrapperClasses","classNames","loaderStyles","loaderClasses","loaderDotClasses","wrapperRef","useRef","useEffect","_b","_a","_d","_c","ZIndex","jsxs","AnalyticsId","jsx"],"mappings":"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"}

package/components/Logo/index.js

@@ -1,5 +1,44 @@
-import r from "./Logo.js";
+import { jsxs as t, jsx as h } from "react/jsx-runtime";
+import { AnalyticsId as s } from "../../constants.js";
+import { useUuid as z } from "../../hooks/useUuid.js";
+import { getColor as e } from "../../theme/currys/color.js";
+const m = ({ size: l = 300, color: v = "black", byline: r = !1, className: V, testId: i }) => {
+  const c = z();
+  return r ? /* @__PURE__ */ t(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: l,
+      role: "img",
+      "aria-labelledby": c,
+      viewBox: "0 0 87 12",
+      className: V,
+      "data-testid": i,
+      "data-analyticsid": s.Logo,
+      children: [
+        /* @__PURE__ */ h("title", { id: c, children: "Helsenorge" }),
+        /* @__PURE__ */ h("g", { fill: e(v), children: /* @__PURE__ */ h("path", { d: "M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z" }) })
+      ]
+    }
+  ) : /* @__PURE__ */ t(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: l,
+      role: "img",
+      "aria-labelledby": c,
+      viewBox: "0 0 502 220",
+      className: V,
+      "data-testid": i,
+      "data-analyticsid": s.Logo,
+      children: [
+        /* @__PURE__ */ h("title", { id: c, children: "Helsenorge" }),
+        /* @__PURE__ */ h("g", { fill: e(v), children: /* @__PURE__ */ h("path", { d: "M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z" }) })
+      ]
+    }
+  );
+};
 export {
-  r as default
+  m as default
 };
 //# sourceMappingURL=index.js.map

package/components/Logo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\n\ntype LogoColor = 'black' | 'white';\n\nexport interface LogoProps {\n  /** Changes the size of the logo. */\n  size?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tChanges the color of the logo. */\n  color?: LogoColor;\n  /** Changes to the byline variant of the logo. */\n  byline?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Logo: React.FC<LogoProps> = ({ size = 300, color = 'black', byline = false, className, testId }) => {\n  const uuid = useUuid();\n\n  if (byline) {\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        role={'img'}\n        aria-labelledby={uuid}\n        viewBox=\"0 0 87 12\"\n        className={className}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Logo}\n      >\n        <title id={uuid}>{'Helsenorge'}</title>\n        <g fill={getColor(color)}>\n          <path d=\"M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z\" />\n        </g>\n      </svg>\n    );\n  }\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      role={'img'}\n      aria-labelledby={uuid}\n      viewBox=\"0 0 502 220\"\n      className={className}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Logo}\n    >\n      <title id={uuid}>{'Helsenorge'}</title>\n      <g fill={getColor(color)}>\n        <path d=\"M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z\" />\n      </g>\n    </svg>\n  );\n};\n\nexport default Logo;\n"],"names":["Logo","size","color","byline","className","testId","uuid","useUuid","jsxs","AnalyticsId","jsx","getColor"],"mappings":";;;;AAqBM,MAAAA,IAA4B,CAAC,EAAE,MAAAC,IAAO,KAAK,OAAAC,IAAQ,SAAS,QAAAC,IAAS,IAAO,WAAAC,GAAW,QAAAC,QAAa;AACxG,QAAMC,IAAOC;AAEb,SAAIJ,IAEA,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAOP;AAAA,MACP,MAAM;AAAA,MACN,mBAAiBK;AAAA,MACjB,SAAQ;AAAA,MACR,WAAAF;AAAA,MACA,eAAaC;AAAA,MACb,oBAAkBI,EAAY;AAAA,MAE9B,UAAA;AAAA,QAAC,gBAAAC,EAAA,SAAA,EAAM,IAAIJ,GAAO,UAAa,cAAA;AAAA,QAC/B,gBAAAI,EAAC,KAAE,EAAA,MAAMC,EAAST,CAAK,GACrB,UAAC,gBAAAQ,EAAA,QAAA,EAAK,GAAE,wxCAAA,CAAwxC,EAClyC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAMJ,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAOP;AAAA,MACP,MAAM;AAAA,MACN,mBAAiBK;AAAA,MACjB,SAAQ;AAAA,MACR,WAAAF;AAAA,MACA,eAAaC;AAAA,MACb,oBAAkBI,EAAY;AAAA,MAE9B,UAAA;AAAA,QAAC,gBAAAC,EAAA,SAAA,EAAM,IAAIJ,GAAO,UAAa,cAAA;AAAA,QAC/B,gBAAAI,EAAC,KAAE,EAAA,MAAMC,EAAST,CAAK,GACrB,UAAC,gBAAAQ,EAAA,QAAA,EAAK,GAAE,gqDAAA,CAAgqD,EAC1qD,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/components/Modal/index.js

@@ -1,8 +1,165 @@
-import a from "./Modal.js";
-import { ModalSize as d, ModalVariants as e } from "./Modal.js";
+import { jsx as a, jsxs as r } from "react/jsx-runtime";
+import d, { useEffect as L } from "react";
+import n from "classnames";
+import { ZIndex as K, AnalyticsId as O, IconSize as _ } from "../../constants.js";
+import { useFocusTrap as D } from "../../hooks/useFocusTrap.js";
+import { useIsVisible as S } from "../../hooks/useIsVisible.js";
+import { palette as b } from "../../theme/palette.js";
+import { u as V } from "../../uuid.js";
+import { B as T } from "../../Button.js";
+import { C as Z } from "../../Close.js";
+import { I as g } from "../../Icon.js";
+import q from "../Icons/AlertSignFill.js";
+import G from "../Icons/AlertSignStroke.js";
+import J from "../Icons/CheckOutline.js";
+import M from "../Portal/index.js";
+import { T as Q } from "../../Title.js";
+import l from "./styles.module.scss";
+var U = /* @__PURE__ */ ((e) => (e.normal = "normal", e.warning = "warning", e.error = "error", e.success = "success", e.image = "image", e))(U || {}), X = /* @__PURE__ */ ((e) => (e.large = "large", e.medium = "medium", e))(X || {});
+const Y = (e) => e === "error" ? /* @__PURE__ */ a(g, { size: _.Small, svgIcon: q, color: b.cherry500 }) : e === "warning" ? /* @__PURE__ */ a(g, { size: _.Small, svgIcon: G, color: b.black }) : e === "success" ? /* @__PURE__ */ a(g, { size: _.Small, svgIcon: J, color: b.kiwi900 }) : null, p = (e, o) => {
+  const m = Y(e);
+  return m ? /* @__PURE__ */ a("div", { className: l.modal__iconWrapper, children: m }) : o ? /* @__PURE__ */ a("div", { className: l.modal__iconWrapper, children: d.cloneElement(o, {
+    size: _.Small
+  }) }) : null;
+}, be = (e) => {
+  var x, E;
+  const {
+    variant: o = "normal",
+    primaryButtonText: m = "OK",
+    titleId: W = V(),
+    className: R = "",
+    size: c = "large",
+    zIndex: z = K.Modal
+  } = e, y = d.useRef(null), u = d.useRef(null), f = d.useRef(null);
+  D(f, !0);
+  const $ = S(y), C = d.useRef(null), A = S(C), i = u.current && u.current.scrollHeight > u.current.clientHeight;
+  function N(t) {
+    t.key === "Escape" && e.onClose && (t.stopPropagation(), e.onClose());
+  }
+  function I(t) {
+    t.target && h.current === t.target && e.onClose && (t.stopPropagation(), e.onClose());
+  }
+  function P() {
+    document.body.style.overflow = "hidden";
+  }
+  function j() {
+    document.body.style.removeProperty("overflow");
+  }
+  const s = o === "image", h = d.useRef(null), w = e.secondaryButtonText && ((x = e.secondaryButtonText) == null ? void 0 : x.length) > 0 || e.onSuccess, B = e.ariaLabelledBy ? void 0 : e.ariaLabel, v = e.ariaLabelledBy ? e.ariaLabelledBy : e.ariaLabel ? void 0 : W;
+  L(() => {
+    const t = h.current;
+    return P(), !e.disableCloseEvents && t && (t.addEventListener("keydown", N), t.addEventListener("click", I)), () => {
+      j(), !e.disableCloseEvents && t && (t.removeEventListener("keydown", N), t.removeEventListener("click", I));
+    };
+  }, [e.disableCloseEvents]), L(() => {
+    var t;
+    (t = f.current) == null || t.focus();
+  }, []);
+  const F = n(
+    R,
+    l.modal,
+    o && l[`modal--${o}`],
+    c && l[`modal--${c}`],
+    i && !w && l["modal--no-actions"]
+  ), H = n({
+    [l["modal__title--error"]]: o === "error",
+    [l["modal__title--success"]]: o === "success"
+    /* success */
+  }), k = /* @__PURE__ */ a("div", { "data-testid": "dialog-container", children: /* @__PURE__ */ a(
+    "div",
+    {
+      ref: h,
+      className: l["modal-overlay"],
+      "data-testid": e.testId,
+      "data-analyticsid": O.Modal,
+      style: { zIndex: z },
+      children: /* @__PURE__ */ a("div", { className: l.align, children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: F,
+          role: "dialog",
+          "aria-modal": "true",
+          tabIndex: -1,
+          "aria-label": B,
+          "aria-labelledby": v,
+          ref: f,
+          children: [
+            /* @__PURE__ */ a(
+              "div",
+              {
+                className: n(l.modal__shadow, l["modal__shadow--top"], {
+                  [l["modal__shadow--show"]]: !$ && i
+                })
+              }
+            ),
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: n(l.modal__contentWrapper, {
+                  [l["modal__contentWrapper--image"]]: s
+                }),
+                tabIndex: i ? 0 : void 0,
+                role: i ? "region" : void 0,
+                "aria-label": i ? B : void 0,
+                "aria-labelledby": i ? v : void 0,
+                ref: u,
+                children: [
+                  !e.noCloseButton && /* @__PURE__ */ a("div", { className: l.modal__closeWrapper, children: /* @__PURE__ */ a("div", { className: n(l.modal__closeWrapper__close), children: /* @__PURE__ */ a(Z, { onClick: e.onClose, ariaLabel: e.ariaLabelCloseBtn }) }) }),
+                  /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: n(c && l[`modal__contentWrapper__scroll--${c}`], {
+                        [l["modal__contentWrapper__scroll--image"]]: s
+                      }),
+                      children: [
+                        /* @__PURE__ */ a("div", { ref: y }),
+                        /* @__PURE__ */ r("div", { className: l.modal__contentWrapper__title, children: [
+                          p(o, e.icon),
+                          /* @__PURE__ */ a(Q, { id: v, htmlMarkup: "h3", appearance: "title3", className: H, children: e.title }),
+                          e.afterTitleChildren && /* @__PURE__ */ a("div", { className: l.modal__afterTitleChildren, children: e.afterTitleChildren })
+                        ] }),
+                        s && /* @__PURE__ */ r("div", { children: [
+                          /* @__PURE__ */ a("div", { className: l.modal__contentWrapper__imageWrapper, children: e.children }),
+                          /* @__PURE__ */ a("span", { className: l.modal__contentWrapper__imageDescription, children: e.description })
+                        ] }),
+                        !s && e.children && /* @__PURE__ */ a("div", { children: e.children }),
+                        !s && !e.children && /* @__PURE__ */ a("p", { className: l.modal__description, children: e.description }),
+                        /* @__PURE__ */ a("div", { ref: C })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ a(
+              "div",
+              {
+                className: n(l.modal__shadow, l["modal__shadow--bottom"], {
+                  [l["modal__shadow--show"]]: !A && i
+                })
+              }
+            ),
+            w && /* @__PURE__ */ r("div", { className: n(l["modal__call-to-action"], c && l[`modal__call-to-action--${c}`]), children: [
+              e.onSuccess && /* @__PURE__ */ a(T, { onClick: e.onSuccess, children: m }),
+              e.secondaryButtonText && ((E = e.secondaryButtonText) == null ? void 0 : E.length) > 0 && /* @__PURE__ */ a(T, { variant: "borderless", onClick: e.onClose, children: e.secondaryButtonText })
+            ] })
+          ]
+        }
+      ) })
+    }
+  ) });
+  if (e.printable) {
+    const t = "print-modal";
+    return /* @__PURE__ */ r(M, { className: t, testId: "print-modal", children: [
+      /* @__PURE__ */ a("style", { media: "print", children: `body > *:not(.${t}) {display: none;}` }),
+      k
+    ] });
+  }
+  return k;
+};
 export {
-  d as ModalSize,
-  e as ModalVariants,
-  a as default
+  X as ModalSize,
+  U as ModalVariants,
+  be as default
 };
 //# sourceMappingURL=index.js.map

package/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { palette } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.Modal,\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? titleId : undefined;\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div\n            className={dialogClasses}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabIndex={-1}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={dialogRef}\n          >\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              aria-label={contentIsScrollable ? ariaLabel : undefined}\n              aria-labelledby={contentIsScrollable ? ariaLabelledBy : undefined}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(size && styles[`modal__contentWrapper__scroll--${size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelledBy} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","getVariantIcon","variant","jsx","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","React","Modal","props","primaryButtonText","titleId","uuid","className","size","zIndex","ZIndex","topContent","modalContentRef","dialogRef","useFocusTrap","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","jsxs","Close","Title","Button","_b","printModal","Portal"],"mappings":"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"}

package/components/NotificationPanel/index.js

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

package/components/NotificationPanel/index.js.map

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

package/components/Panel/index.js

@@ -1,9 +1,9 @@
-import t from "./Panel.js";
-import { PanelLayout as r, PanelStatus as l, PanelVariant as n } from "./Panel.js";
+import { P as t } from "../../Panel.js";
+import { c as r, a as s, b as l } from "../../Panel.js";
 export {
   r as PanelLayout,
-  l as PanelStatus,
-  n as PanelVariant,
+  s as PanelStatus,
+  l as PanelVariant,
   t as default
 };
 //# sourceMappingURL=index.js.map

package/components/PanelList/index.js

@@ -1,5 +1,18 @@
-import a from "./PanelList.js";
+import { jsx as p } from "react/jsx-runtime";
+import e from "react";
+import c from "classnames";
+import { AnalyticsId as f } from "../../constants.js";
+import { b as o, P } from "../../Panel.js";
+import y from "./styles.module.scss";
+const u = (t) => e.isValidElement(t) && t.type === P, C = e.forwardRef(function(s, i) {
+  const { testId: l, children: m, variant: n = o.fill } = s, d = (a, r) => e.cloneElement(a, {
+    variant: n,
+    noTopBorder: n === o.line && !r,
+    className: c(a.props.className, n !== o.line && y["panel-list__panel"])
+  });
+  return /* @__PURE__ */ p("div", { ref: i, "data-testid": l, "data-analyticsid": f.PanelList, children: e.Children.map(m, (a, r) => u(a) ? d(a, r === 0) : a) });
+});
 export {
-  a as default
+  C as default
 };
 //# sourceMappingURL=index.js.map

package/components/PanelList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["isPanelComponent","element","React","Panel","PanelList","props","ref","testId","children","variant","PanelVariant","renderPanel","panel","firstChild","classNames","styles","jsx","AnalyticsId","child","index"],"mappings":";;;;;;AAkBA,MAAMA,IAAmB,CAACC,MACxBC,EAAM,eAA2BD,CAAO,KAAMA,EAA+B,SAASE,GAElFC,IAAYF,EAAM,WAAW,SAA2BG,GAAuBC,GAAyC;AAC5H,QAAM,EAAE,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,IAAUC,EAAa,KAAS,IAAAL,GAEpDM,IAAc,CAACC,GAAuCC,MAC1DX,EAAM,aAAaU,GAAO;AAAA,IACxB,SAAAH;AAAA,IACA,aAAaA,MAAYC,EAAa,QAAQ,CAACG;AAAA,IAC/C,WAAWC,EAAWF,EAAM,MAAM,WAAWH,MAAYC,EAAa,QAAQK,EAAO,mBAAmB,CAAC;AAAA,EAAA,CAC1G;AAGD,SAAA,gBAAAC,EAAC,OAAI,EAAA,KAAAV,GAAU,eAAaC,GAAQ,oBAAkBU,EAAY,WAC/D,UAAMf,EAAA,SAAS,IAAIM,GAAU,CAACU,GAAOC,MAAWnB,EAAiBkB,CAAK,IAAIP,EAAYO,GAAOC,MAAU,CAAC,IAAID,CAAM,EACrH,CAAA;AAEJ,CAAC;"}