@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/lib/ListEditMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListEditMode.js","sources":["../src/components/ListEditMode/ListEditMode.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport Icon, { SvgIcon } from '../Icon';\nimport X from '../Icons/X';\nimport { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}): React.JSX.Element => {\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  return (\n    <button ref={hoverRef} onClick={onClick} type=\"button\" className={classNames(styles['list-edit-mode__icon-button'])}>\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <div className={listClassNames}>\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" />}\n      {children}\n    </div>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n"],"names":[],"mappings":";;;;;;;AA6BO,MAAM,gCAAgC,WAAW,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE3E,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,MAIyB;AACvB,QAAM,EAAE,UAAU,UAAA,IAAc,SAAA;AAEhC,SACE,oBAAC,UAAA,EAAO,KAAK,UAAU,SAAkB,MAAK,UAAS,WAAW,WAAW,OAAO,6BAA6B,CAAC,GAChH,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,MAAM,SAAS;AAAA,MACf,OAAO,UAAU,SAAS,yCAAyC;AAAA,IAAA;AAAA,EAAA,GAEvE;AAEJ;AAEO,MAAM,mBAAmB,CAAC,UAAgD;AAC/E,QAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,aAAa;AAEpE,QAAM,iBAAiB,WAAW,OAAO,sBAAsB,GAAG,SAAS,OAAO,yBAAyB,KAAK,EAAE,GAAG;AAAA,IACnH,CAAC,OAAO,4BAA4B,CAAC,GAAG,YAAY;AAAA,IACpD,CAAC,OAAO,4BAA4B,CAAC,GAAG,YAAY,UAAU,YAAY;AAAA,EAAA,CAC3E;AAED,SACE,qBAAC,OAAA,EAAI,WAAW,gBACb,UAAA;AAAA,IAAA,gCAAa,YAAA,EAAW,MAAM,GAAG,SAAS,UAAU,OAAM,OAAM;AAAA,IAChE;AAAA,EAAA,GACH;AAEJ;AAEA,iBAAiB,cAAc;"}

package/lib/MaxCharacters.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { FormOnColor } from "./constants.js";
+import styles from "./components/MaxCharacters/styles.module.scss";
+const MaxCharacters = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {
+  const progress = length / maxCharacters;
+  const counterTextClass = classNames(styles["max-characters"], {
+    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,
+    [styles[`max-characters--invalid`]]: progress > 1
+  });
+  const ariaLevel = progress > 0.95 ? "polite" : "off";
+  return /* @__PURE__ */ jsx("div", { "aria-live": ariaLevel, "aria-atomic": "true", className: counterTextClass, style: { maxWidth }, children: `${length}/${maxCharacters} ${maxText ? maxText : "tegn"}` });
+};
+export {
+  MaxCharacters as M
+};
+//# sourceMappingURL=MaxCharacters.js.map

package/lib/MaxCharacters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxCharacters.js","sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormOnColor } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"names":[],"mappings":";;;;AAqBA,MAAM,gBAA8C,CAAC,EAAE,eAAe,SAAS,QAAQ,SAAS,eAAe;AAC7G,QAAM,WAAW,SAAS;AAE1B,QAAM,mBAAmB,WAAW,OAAO,gBAAgB,GAAG;AAAA,IAC5D,CAAC,OAAO,yBAAyB,CAAC,GAAG,YAAY,YAAY;AAAA,IAC7D,CAAC,OAAO,yBAAyB,CAAC,GAAG,WAAW;AAAA,EAAA,CACjD;AAED,QAAM,YAAY,WAAW,OAAO,WAAW;AAE/C,SACE,oBAAC,SAAI,aAAW,WAAW,eAAa,QAAQ,WAAW,kBAAkB,OAAO,EAAE,YACnF,UAAA,GAAG,MAAM,IAAI,aAAa,IAAI,UAAU,UAAU,MAAM,IAC3D;AAEJ;"}

package/lib/NotificationBadge.js

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import { palette } from "./theme/palette.js";
+import { I as Icon } from "./Icon.js";
+import CheckFill from "./components/Icons/CheckFill.js";
+import ErrorSignFill from "./components/Icons/ErrorSignFill.js";
+import InfoSignFill from "./components/Icons/InfoSignFill.js";
+import TriangleX from "./components/Icons/TriangleX.js";
+const NotificationBadge = (props) => {
+  const { variant, size, className = "", testId, isHovered = false } = props;
+  switch (variant) {
+    case "info":
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          svgIcon: InfoSignFill,
+          color: palette.blueberry700,
+          hoverColor: palette.blueberry700,
+          size,
+          className,
+          testId,
+          isHovered
+        }
+      );
+    case "warn":
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          svgIcon: ErrorSignFill,
+          color: palette.banana800,
+          hoverColor: palette.banana700,
+          size,
+          className,
+          testId,
+          isHovered
+        }
+      );
+    case "error":
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          svgIcon: TriangleX,
+          color: palette.cherry700,
+          hoverColor: palette.cherry700,
+          size,
+          className,
+          testId,
+          isHovered
+        }
+      );
+    case "success":
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          svgIcon: CheckFill,
+          color: palette.kiwi900,
+          hoverColor: palette.kiwi900,
+          size,
+          className,
+          testId,
+          isHovered
+        }
+      );
+  }
+};
+export {
+  NotificationBadge as N
+};
+//# sourceMappingURL=NotificationBadge.js.map

package/lib/NotificationBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBadge.js","sources":["../src/components/Badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nexport type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';\n\nexport interface NotificationBadgeProps {\n  /** Changes the type of the badge */\n  variant: BadgeNotificationVariant;\n  /** Sets the size of the badge */\n  size: IconSize;\n  /** Adds custom classes to the element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets hover state */\n  isHovered?: boolean;\n}\n\nconst NotificationBadge = (props: NotificationBadgeProps): React.JSX.Element => {\n  const { variant, size, className = '', testId, isHovered = false } = props;\n  switch (variant) {\n    case 'info':\n      return (\n        <Icon\n          svgIcon={InfoSignFill}\n          color={palette.blueberry700}\n          hoverColor={palette.blueberry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'warn':\n      return (\n        <Icon\n          svgIcon={ErrorSignFill}\n          color={palette.banana800}\n          hoverColor={palette.banana700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'error':\n      return (\n        <Icon\n          svgIcon={TriangleX}\n          color={palette.cherry700}\n          hoverColor={palette.cherry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'success':\n      return (\n        <Icon\n          svgIcon={CheckFill}\n          color={palette.kiwi900}\n          hoverColor={palette.kiwi900}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n  }\n};\n\nexport default NotificationBadge;\n"],"names":[],"mappings":";;;;;;;AAyBA,MAAM,oBAAoB,CAAC,UAAqD;AAC9E,QAAM,EAAE,SAAS,MAAM,YAAY,IAAI,QAAQ,YAAY,UAAU;AACrE,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,EACF;AAGR;"}

package/lib/Panel.js

@@ -0,0 +1,264 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { LanguageLocales, IconSize } from "./constants.js";
+import { useExpand } from "./hooks/useExpand.js";
+import { B as Button } from "./Button.js";
+import { I as Icon } from "./Icon.js";
+import { P as PanelTitle } from "./PanelTitle.js";
+import { useLanguage } from "./utils/language.js";
+import { H as Highlighter } from "./Highlighter.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import ChevronRight from "./components/Icons/ChevronRight.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import styles from "./components/Panel/styles.module.scss";
+const expandButtonOpen$1 = "See details";
+const expandButtonClose$1 = "Hide details";
+const enGB = {
+  expandButtonOpen: expandButtonOpen$1,
+  expandButtonClose: expandButtonClose$1
+};
+const expandButtonOpen = "Se detaljer";
+const expandButtonClose = "Skjul detaljer";
+const nbNO = {
+  expandButtonOpen,
+  expandButtonClose
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.ENGLISH:
+      return enGB;
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
+var PanelLayout = /* @__PURE__ */ ((PanelLayout2) => {
+  PanelLayout2["vertical"] = "vertical";
+  PanelLayout2["horizontal"] = "horizontal";
+  PanelLayout2["combined"] = "combined";
+  PanelLayout2["bAsRightCol"] = "bAsRightCol";
+  return PanelLayout2;
+})(PanelLayout || {});
+var PanelVariant = /* @__PURE__ */ ((PanelVariant2) => {
+  PanelVariant2["fill"] = "fill";
+  PanelVariant2["line"] = "line";
+  PanelVariant2["outline"] = "outline";
+  return PanelVariant2;
+})(PanelVariant || {});
+var PanelStacking = /* @__PURE__ */ ((PanelStacking2) => {
+  PanelStacking2["default"] = "default";
+  PanelStacking2["bFirst"] = "bFirst";
+  return PanelStacking2;
+})(PanelStacking || {});
+var PanelStatus = /* @__PURE__ */ ((PanelStatus2) => {
+  PanelStatus2["none"] = "none";
+  PanelStatus2["new"] = "new";
+  PanelStatus2["error"] = "error";
+  PanelStatus2["draft"] = "draft";
+  return PanelStatus2;
+})(PanelStatus || {});
+const ExpandButton = ({
+  onClick,
+  isExpanded,
+  resources
+}) => {
+  const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "borderless",
+      textClassName: styles["expander__button__text"],
+      wrapperClassName: buttonClassName,
+      "aria-expanded": isExpanded,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { svgIcon: isExpanded ? ChevronUp : ChevronDown, size: IconSize.XSmall }),
+        /* @__PURE__ */ jsx("span", { children: isExpanded ? resources.expandButtonClose : resources.expandButtonOpen })
+      ]
+    }
+  );
+};
+const PanelRoot = React__default.forwardRef(function PanelForwardedRef({
+  layout = "vertical",
+  variant = "fill",
+  color = "neutral",
+  stacking = "default",
+  testId,
+  children,
+  expanded = false,
+  status = "none",
+  buttonBottomAriaLabel,
+  buttonBottomOnClick,
+  buttonBottomText,
+  className,
+  resources,
+  onExpand,
+  highlightText
+}, ref) {
+  const [preContainer, setPreContainer] = React__default.useState([]);
+  const [title, setTitle] = React__default.useState([]);
+  const [content, setContent] = React__default.useState([]);
+  const [expandableContent, setExpandableContent] = React__default.useState([]);
+  const [hasIcon, setHasIcon] = React__default.useState(false);
+  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
+  const localRef = React__default.useRef(null);
+  const panelRef = ref ?? localRef;
+  const expandedContentRef = React__default.useRef(null);
+  const defaultScroll = 100;
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources
+  };
+  React__default.useEffect(() => {
+    let localHasIcon = false;
+    const newPreContainer = [];
+    const newTitle = [];
+    const newContent = [];
+    const newExpandableContent = [];
+    React__default.Children.forEach(children, (child) => {
+      if (React__default.isValidElement(child)) {
+        if (child.type === PreContainer) {
+          newPreContainer.push(child);
+        } else if (child.type === PanelTitle) {
+          newTitle.push(
+            React__default.cloneElement(child, { highlightText: child.props.highlightText || highlightText })
+          );
+          if (child.props.icon) {
+            localHasIcon = true;
+          }
+        } else if (child.type === A || child.type === B || child.type === C) {
+          newContent.push(child);
+        } else if (child.type === ExpandedContent) {
+          newExpandableContent.push(child);
+        }
+      }
+    });
+    setPreContainer(newPreContainer);
+    setTitle(newTitle);
+    setContent(newContent);
+    setExpandableContent(newExpandableContent);
+    setHasIcon(localHasIcon);
+  }, [children]);
+  React__default.useEffect(() => {
+    if (expanded) {
+      return;
+    }
+    if (isExpanded) {
+      if ("current" in panelRef && panelRef.current && expandedContentRef.current) {
+        const panelRect = panelRef.current.getBoundingClientRect();
+        const expandedContentRect = expandedContentRef.current.getBoundingClientRect();
+        const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);
+        if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {
+          const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+          if (prefersReducedMotion) {
+            return;
+          }
+          window.scrollBy({
+            top: scrollAmount,
+            behavior: "smooth"
+          });
+        }
+      }
+    }
+  }, [isExpanded]);
+  const colorScheme = variant === "fill" ? color : "white";
+  const outerClassnames = classNames(className, {
+    [styles["panel__border--outline--outer"]]: variant === "outline",
+    [styles["panel__border--line"]]: variant === "line",
+    [styles["panel__border--fill--neutral"]]: variant === "fill" && colorScheme === "neutral",
+    [styles["panel__border--fill--new"]]: variant === "fill" && status === "new",
+    [styles["panel__border--fill--status"]]: variant === "fill" && status !== "none"
+    /* none */
+  });
+  const panelClassnames = classNames(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
+    [styles["panel--line"]]: variant === "line",
+    [styles["panel--new"]]: status === "new",
+    [styles["panel--draft"]]: status === "draft",
+    [styles["panel--error"]]: status === "error",
+    [styles["panel--icon"]]: hasIcon
+  });
+  const contentContainerLayout = classNames(styles["panel__content"], styles[`panel__content--${layout}`], {
+    [styles[`panel__content--b-first`]]: stacking === "bFirst"
+    /* bFirst */
+  });
+  const expanderBorderLayout = classNames({
+    [styles["panel__expander__border--expanded"]]: isExpanded && status === "none",
+    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === "none",
+    [styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === "none" && variant === "line"
+    /* line */
+  });
+  const handleExpandClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+  return expandableContent.length > 0 ? /* @__PURE__ */ jsx("div", { className: outerClassnames, children: /* @__PURE__ */ jsx("div", { className: classNames({
+    [styles["panel__border--outline--inner"]]: variant === "outline"
+    /* outline */
+  }), children: /* @__PURE__ */ jsx("div", { className: expanderBorderLayout, children: /* @__PURE__ */ jsxs("div", { className: panelClassnames, "data-testid": testId, ref: panelRef, children: [
+    /* @__PURE__ */ jsxs(Highlighter, { searchText: highlightText, children: [
+      preContainer,
+      title
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: contentContainerLayout, children: /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children: content }) }),
+    /* @__PURE__ */ jsx(ExpandButton, { onClick: handleExpandClick, isExpanded, resources: mergedResources }),
+    isExpanded && /* @__PURE__ */ jsxs("div", { ref: expandedContentRef, "data-testid": testId + "-details", children: [
+      /* @__PURE__ */ jsx("div", { className: styles["panel__expander__separator"] }),
+      /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children: expandableContent })
+    ] })
+  ] }) }) }) }) : /* @__PURE__ */ jsx("div", { className: outerClassnames, children: /* @__PURE__ */ jsx("div", { className: classNames({
+    [styles["panel__border--outline--inner"]]: variant === "outline"
+    /* outline */
+  }), children: /* @__PURE__ */ jsxs("div", { className: panelClassnames, "data-testid": testId, ref: panelRef, children: [
+    /* @__PURE__ */ jsxs(Highlighter, { searchText: highlightText, children: [
+      preContainer,
+      title
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: contentContainerLayout, children: /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children: content }) }),
+    buttonBottomText && buttonBottomOnClick && /* @__PURE__ */ jsx("div", { className: styles["panel__button-bottom"], children: /* @__PURE__ */ jsxs(Button, { variant: "borderless", type: "button", size: "medium", onClick: buttonBottomOnClick, "aria-label": buttonBottomAriaLabel, children: [
+      buttonBottomText,
+      /* @__PURE__ */ jsx(Icon, { svgIcon: ChevronRight, size: IconSize.XSmall })
+    ] }) })
+  ] }) }) });
+});
+const PreContainer = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: styles["panel__pre-container"], children });
+};
+const A = ({ children }) => {
+  const styling = classNames(styles["panel__content__item"], styles["panel__content__item--a"]);
+  return /* @__PURE__ */ jsx("div", { className: styling, children });
+};
+const B = ({ children }) => {
+  const styling = classNames(styles["panel__content__item"], styles["panel__content__item--b"]);
+  return /* @__PURE__ */ jsx("div", { className: styling, children });
+};
+const C = ({ children }) => {
+  const styling = classNames(styles["panel__content__item"], styles["panel__content__item--c"]);
+  return /* @__PURE__ */ jsx("div", { className: styling, children });
+};
+const ExpandedContent = ({ children }) => {
+  const styling = classNames(styles["panel__expander__content"]);
+  return /* @__PURE__ */ jsx("div", { className: styling, children });
+};
+PanelRoot.displayName = "Panel";
+const Panel = PanelRoot;
+Panel.PreContainer = PreContainer;
+Panel.Title = PanelTitle;
+Panel.A = A;
+Panel.B = B;
+Panel.C = C;
+Panel.ExpandedContent = ExpandedContent;
+export {
+  A,
+  B,
+  C,
+  ExpandedContent as E,
+  Panel as P,
+  PanelLayout as a,
+  PanelVariant as b,
+  PanelStacking as c,
+  PanelStatus as d,
+  PreContainer as e
+};
+//# sourceMappingURL=Panel.js.map

package/lib/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../src/components/Panel/resourceHelper.ts","../src/components/Panel/Panel.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Panel.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Panel.nb-NO.json';\nimport { HNDesignsystemPanel } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemPanel => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { LanguageLocales } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport PanelTitle, { PanelTitleProps } from './PanelTitle';\nimport { getResources } from './resourceHelper';\nimport { HNDesignsystemPanel } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\nexport enum PanelLayout {\n  vertical = 'vertical',\n  horizontal = 'horizontal',\n  combined = 'combined',\n  bAsRightCol = 'bAsRightCol',\n}\n\nexport type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;\n\nexport enum PanelVariant {\n  fill = 'fill',\n  line = 'line',\n  outline = 'outline',\n}\n\nexport enum PanelStacking {\n  default = 'default',\n  bFirst = 'bFirst',\n}\n\nexport enum PanelStatus {\n  none = 'none',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport interface PanelProps {\n  /** Aria label on call to action button */\n  buttonBottomAriaLabel?: string;\n  /** Sets the text on the bottom call to action button */\n  buttonBottomText?: string;\n  /** Sets the action on the bottom call to action button */\n  buttonBottomOnClick?: () => void;\n  /** Expands or collapses the panel. Only applicable when ExpandedContent is used */\n  expanded?: boolean;\n  /** Sets the layout and order of the content boxes */\n  layout?: PanelLayout;\n  /** Sets the visual variant of panel */\n  variant?: PanelVariant;\n  /** Sets the color for panel if it has variant fill */\n  color?: PanelColors;\n  /** Sets classes on the outermost container of the panel */\n  className?: string;\n  /** Action called when toggling expansion of ExpandedContent */\n  onExpand?: (isExpanded?: boolean) => void;\n  /** Sets the stacking order of the content boxes */\n  stacking?: PanelStacking;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Children elements to be rendered inside the panel */\n  children?: React.ReactNode;\n  /** Displays a status on the left side: default normal */\n  status?: PanelStatus;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemPanel>;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst ExpandButton = ({\n  onClick,\n  isExpanded,\n  resources,\n}: {\n  onClick: () => void;\n  isExpanded: boolean | undefined;\n  resources: Partial<HNDesignsystemPanel>;\n}): React.JSX.Element => {\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  return (\n    <Button\n      variant=\"borderless\"\n      textClassName={styles['expander__button__text']}\n      wrapperClassName={buttonClassName}\n      aria-expanded={isExpanded}\n      onClick={onClick}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      <span>{isExpanded ? resources.expandButtonClose : resources.expandButtonOpen}</span>\n    </Button>\n  );\n};\nconst PanelRoot = React.forwardRef(function PanelForwardedRef(\n  {\n    layout = PanelLayout.vertical,\n    variant = PanelVariant.fill,\n    color = 'neutral',\n    stacking = PanelStacking.default,\n    testId,\n    children,\n    expanded = false,\n    status = PanelStatus.none,\n    buttonBottomAriaLabel,\n    buttonBottomOnClick,\n    buttonBottomText,\n    className,\n    resources,\n    onExpand,\n    highlightText,\n  }: PanelProps,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  const [preContainer, setPreContainer] = React.useState<React.ReactNode[]>([]);\n  const [title, setTitle] = React.useState<React.ReactNode[]>([]);\n  const [content, setContent] = React.useState<React.ReactNode[]>([]);\n  const [expandableContent, setExpandableContent] = React.useState<React.ReactNode[]>([]);\n  const [hasIcon, setHasIcon] = React.useState(false);\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const localRef = React.useRef<HTMLDivElement>(null);\n  const panelRef = ref ?? localRef;\n  const expandedContentRef = React.useRef<HTMLDivElement>(null);\n  const defaultScroll = 100;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemPanel = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  React.useEffect(() => {\n    let localHasIcon = false;\n    const newPreContainer: React.ReactNode[] = [];\n    const newTitle: React.ReactNode[] = [];\n    const newContent: React.ReactNode[] = [];\n    const newExpandableContent: React.ReactNode[] = [];\n\n    React.Children.forEach(children, child => {\n      if (React.isValidElement(child)) {\n        if (child.type === PreContainer) {\n          newPreContainer.push(child);\n        } else if (child.type === PanelTitle) {\n          newTitle.push(\n            React.cloneElement(child as React.ReactElement<PanelTitleProps>, { highlightText: child.props.highlightText || highlightText })\n          );\n          if (child.props.icon) {\n            localHasIcon = true;\n          }\n        } else if (child.type === A || child.type === B || child.type === C) {\n          newContent.push(child);\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(child);\n        }\n      }\n    });\n\n    setPreContainer(newPreContainer);\n    setTitle(newTitle);\n    setContent(newContent);\n    setExpandableContent(newExpandableContent);\n    setHasIcon(localHasIcon);\n  }, [children]);\n\n  React.useEffect(() => {\n    if (expanded) {\n      // Hvis panel åpnes controlled skal ikke scroll skje\n      return;\n    }\n    // Scroller oppover når expanded content åpnes uncontrolled\n    if (isExpanded) {\n      if ('current' in panelRef && panelRef.current && expandedContentRef.current) {\n        const panelRect = panelRef.current.getBoundingClientRect();\n        const expandedContentRect = expandedContentRef.current.getBoundingClientRect();\n\n        const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);\n\n        // Scroller kun oppover, og kun dersom expandedContent havner utenfor skjermen når åpnet\n        if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {\n          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          if (prefersReducedMotion) {\n            return;\n          }\n          window.scrollBy({\n            top: scrollAmount,\n            behavior: 'smooth',\n          });\n        }\n      }\n    }\n  }, [isExpanded]);\n\n  const colorScheme = variant === PanelVariant.fill ? color : 'white';\n\n  const outerClassnames = classNames(className, {\n    [styles['panel__border--outline--outer']]: variant === PanelVariant.outline,\n    [styles['panel__border--line']]: variant === PanelVariant.line,\n    [styles['panel__border--fill--neutral']]: variant === PanelVariant.fill && colorScheme === 'neutral',\n    [styles['panel__border--fill--new']]: variant === PanelVariant.fill && status === PanelStatus.new,\n    [styles['panel__border--fill--status']]: variant === PanelVariant.fill && status !== PanelStatus.none,\n  });\n  const panelClassnames = classNames(styles['panel'], styles[`panel--${colorScheme}`], styles['panel--status'], {\n    [styles['panel--line']]: variant === PanelVariant.line,\n    [styles['panel--new']]: status === PanelStatus.new,\n    [styles['panel--draft']]: status === PanelStatus.draft,\n    [styles['panel--error']]: status === PanelStatus.error,\n    [styles['panel--icon']]: hasIcon,\n  });\n  const contentContainerLayout = classNames(styles['panel__content'], styles[`panel__content--${layout}`], {\n    [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst,\n  });\n  const expanderBorderLayout = classNames({\n    [styles['panel__expander__border--expanded']]: isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === PanelStatus.none && variant === PanelVariant.line,\n  });\n\n  const handleExpandClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  return expandableContent.length > 0 ? (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={expanderBorderLayout}>\n          <div className={panelClassnames} data-testid={testId} ref={panelRef}>\n            <Highlighter searchText={highlightText}>\n              {preContainer}\n              {title}\n            </Highlighter>\n            <div className={contentContainerLayout}>\n              <Highlighter searchText={highlightText}>{content}</Highlighter>\n            </div>\n            <ExpandButton onClick={handleExpandClick} isExpanded={isExpanded} resources={mergedResources} />\n            {isExpanded && (\n              <div ref={expandedContentRef} data-testid={testId + '-details'}>\n                <div className={styles['panel__expander__separator']} />\n                <Highlighter searchText={highlightText}>{expandableContent}</Highlighter>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={panelClassnames} data-testid={testId} ref={panelRef}>\n          <Highlighter searchText={highlightText}>\n            {preContainer}\n            {title}\n          </Highlighter>\n          <div className={contentContainerLayout}>\n            <Highlighter searchText={highlightText}>{content}</Highlighter>\n          </div>\n          {buttonBottomText && buttonBottomOnClick && (\n            <div className={styles['panel__button-bottom']}>\n              <Button variant=\"borderless\" type=\"button\" size=\"medium\" onClick={buttonBottomOnClick} aria-label={buttonBottomAriaLabel}>\n                {buttonBottomText}\n                <Icon svgIcon={ChevronRight} size={IconSize.XSmall} />\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport interface ContentProps {\n  /** Children elements to be rendered inside the content box */\n  children?: React.ReactNode;\n}\n\nexport const PreContainer: React.FC<ContentProps> = ({ children }) => {\n  return <div className={styles['panel__pre-container']}>{children}</div>;\n};\n\nexport const A: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--a']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const B: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--b']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const C: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--c']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const ExpandedContent: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__expander__content']);\n  return <div className={styling}>{children}</div>;\n};\n\ntype PanelComponent = typeof PanelRoot & {\n  PreContainer: React.FC<ContentProps>;\n  Title: React.FC<PanelTitleProps>;\n  A: React.FC<ContentProps>;\n  B: React.FC<ContentProps>;\n  C: React.FC<ContentProps>;\n  ExpandedContent: React.FC<ContentProps>;\n};\nPanelRoot.displayName = 'Panel';\nconst Panel = PanelRoot as PanelComponent;\nPanel.PreContainer = PreContainer;\nPanel.Title = PanelTitle;\nPanel.A = A;\nPanel.B = B;\nPanel.C = C;\nPanel.ExpandedContent = ExpandedContent;\n\nexport default Panel;\n"],"names":["PanelLayout","PanelVariant","PanelStacking","PanelStatus","React"],"mappings":"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"}