@helsenorge/designsystem-react 13.5.0 → 14.0.0-beta.0

package/lib/Calendar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Calendar.js","names":["Calendar: React.FC<SvgPathProps>"],"sources":["../src/components/Icons/Calendar.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst Calendar: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path\n      fillRule=\"evenodd\"\n      d=\"M32.86 22.986a.984.984 0 010 1.967.984.984 0 010-1.967zm0 3.03a2.049 2.049 0 002.046-2.047 2.049 2.049 0 00-2.046-2.046 2.049 2.049 0 00-2.046 2.046c0 1.13.918 2.047 2.046 2.047zm6.21-7.864H8.68v-6.194h3.846v1.161a2.243 2.243 0 002.241 2.241 2.243 2.243 0 002.241-2.24v-1.162H30.62v1.161a2.244 2.244 0 002.241 2.241 2.243 2.243 0 002.241-2.24v-1.162h3.97v6.194zM8.678 35.982H39.07v-16.53H8.678v16.53zm5.148-26.273c0-.518.422-.94.941-.94.52 0 .941.422.941.94v3.41a.942.942 0 01-1.882 0V9.71zm18.093 0c0-.518.422-.94.941-.94.52 0 .941.422.941.94v3.41a.942.942 0 01-1.882 0V9.71zm3.182.95v-.95a2.243 2.243 0 00-2.24-2.24 2.244 2.244 0 00-2.242 2.24v.95H17.01v-.95a2.243 2.243 0 00-2.242-2.24 2.243 2.243 0 00-2.24 2.24v.95H7.378V37.28h32.992V10.658h-5.27zm-8.157 16.167a.984.984 0 110 1.969.984.984 0 010-1.969zm0 3.03a2.049 2.049 0 002.047-2.047 2.049 2.049 0 00-2.047-2.046 2.049 2.049 0 00-2.046 2.046c0 1.13.918 2.047 2.046 2.047z\"\n    />\n  );\n\n  const normalHover = (\n    <path\n      fillRule=\"evenodd\"\n      d=\"M33.843 23.97a.984.984 0 01-.983.983.984.984 0 010-1.967c.542 0 .983.441.983.983zm1.063 0a2.049 2.049 0 00-2.046-2.047 2.049 2.049 0 00-2.046 2.046c0 1.13.918 2.047 2.046 2.047a2.049 2.049 0 002.046-2.047zm4.164-5.818H8.68v-6.194h3.846v1.161a2.243 2.243 0 002.241 2.241 2.243 2.243 0 002.241-2.24v-1.162H30.62v1.161a2.244 2.244 0 002.241 2.241 2.243 2.243 0 002.241-2.24v-1.162h3.97v6.194zM8.678 35.982H39.07v-16.53H8.678v16.53zm5.148-26.273c0-.518.422-.94.941-.94.52 0 .941.422.941.94v3.41a.942.942 0 01-1.882 0V9.71zm18.093 0c0-.518.422-.94.941-.94.52 0 .941.422.941.94v3.41a.942.942 0 01-1.882 0V9.71zm3.182.95v-.95a2.243 2.243 0 00-2.24-2.24 2.244 2.244 0 00-2.242 2.24v.95H17.01v-.95a2.243 2.243 0 00-2.242-2.24 2.243 2.243 0 00-2.24 2.24v.95H7.378V37.28h32.992V10.658h-5.27zm-11.173 17.15a.985.985 0 01-1.967 0 .984.984 0 011.967 0zm1.063 0a2.049 2.049 0 00-2.047-2.046 2.049 2.049 0 00-2.046 2.046c0 1.13.918 2.047 2.046 2.047a2.049 2.049 0 002.047-2.047z\"\n    />\n  );\n\n  const xSmall = (\n    <path\n      fillRule=\"evenodd\"\n      d=\"M38.887 16.71H8.6v-6.197h3.862v1.17c0 1.223.994 2.216 2.216 2.216a2.218 2.218 0 002.215-2.215v-1.171h13.582v1.17c0 1.223.994 2.216 2.215 2.216a2.218 2.218 0 002.216-2.215v-1.171h3.982v6.197zM8.6 34.46h30.288V17.974H8.6V34.46zm5.125-26.17a.953.953 0 011.905 0v3.394a.953.953 0 01-1.905 0V8.289zm18.013 0a.953.953 0 011.905 0v3.394a.953.953 0 01-1.905 0V8.289zm3.168.96v-.96a2.218 2.218 0 00-2.216-2.216 2.218 2.218 0 00-2.215 2.215v.96H16.892v-.96a2.218 2.218 0 00-2.215-2.215 2.218 2.218 0 00-2.216 2.215v.96H7.336v26.475h32.815V9.249h-5.246zM27.67 28.292a1.508 1.508 0 100-3.016 1.508 1.508 0 000 3.016z\"\n    />\n  );\n\n  const xSmallHover = (\n    <path\n      fillRule=\"evenodd\"\n      d=\"M38.888 16.71H8.598v-6.197h3.862v1.17a2.216 2.216 0 004.431 0v-1.17h13.583v1.17a2.217 2.217 0 004.431 0v-1.17h3.983v6.197zM8.598 34.46h30.29V17.974H8.598V34.46zm5.125-26.17a.953.953 0 011.905 0v3.394a.953.953 0 01-1.905 0V8.289zm18.014 0a.953.953 0 011.905 0v3.394a.953.953 0 01-1.905 0V8.289zm3.168.96v-.96a2.218 2.218 0 00-2.215-2.216 2.218 2.218 0 00-2.216 2.215v.96H16.89v-.96a2.217 2.217 0 00-2.214-2.215 2.219 2.219 0 00-2.217 2.215v.96H7.335v26.475h32.816V9.249h-5.246zm-7.234 19.043a1.507 1.507 0 000-3.017 1.51 1.51 0 100 3.017zm5.019-4.297a1.509 1.509 0 10-.002-3.018 1.509 1.509 0 00.002 3.018z\"\n    />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default Calendar;\n"],"mappings":";;;AAIA,IAAMA,YAAoC,EAAE,MAAM,gBAAkD;AA6BlG,QAAO,QAAQ;EAAE;EAAM;EAAW,QA3BhC,oBAAC,QAAA;GACC,UAAS;GACT,GAAE;IACF;EAwBsC,aApBxC,oBAAC,QAAA;GACC,UAAS;GACT,GAAE;IACF;EAiBmD,QAbrD,oBAAC,QAAA;GACC,UAAS;GACT,GAAE;IACF;EAU2D,aAN7D,oBAAC,QAAA;GACC,UAAS;GACT,GAAE;IACF;EAGwE,CAAC;;AAG/E,IAAA,mBAAe"}

package/lib/Panel.js

@@ -1,274 +0,0 @@
-import { a as IconSize, s as LanguageLocales } from "./constants2.js";
-import { t as Icon_default } from "./Icon.js";
-import { r as useLanguage } from "./language.js";
-import { t as Button_default } from "./Button.js";
-import { t as ChevronDown_default } from "./ChevronDown.js";
-import { t as ChevronUp_default } from "./ChevronUp.js";
-import { t as Highlighter_default } from "./Highlighter.js";
-import { t as useExpand } from "./useExpand.js";
-import { t as ChevronRight_default } from "./ChevronRight.js";
-import { t as PanelTitle_default } from "./PanelTitle.js";
-import React from "react";
-import cn from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./components/Panel/styles.module.scss";
-var HN_Designsystem_Panel_en_GB_default = {
-	expandButtonOpen: "See details",
-	expandButtonClose: "Hide details"
-};
-var HN_Designsystem_Panel_nb_NO_default = {
-	expandButtonOpen: "Se detaljer",
-	expandButtonClose: "Skjul detaljer"
-};
-const getResources = (language) => {
-	switch (language) {
-		case LanguageLocales.ENGLISH: return HN_Designsystem_Panel_en_GB_default;
-		case LanguageLocales.NORWEGIAN:
-		default: return HN_Designsystem_Panel_nb_NO_default;
-	}
-};
-let PanelLayout = /* @__PURE__ */ function(PanelLayout$1) {
-	PanelLayout$1["vertical"] = "vertical";
-	PanelLayout$1["horizontal"] = "horizontal";
-	PanelLayout$1["combined"] = "combined";
-	PanelLayout$1["bAsRightCol"] = "bAsRightCol";
-	return PanelLayout$1;
-}({});
-let PanelVariant = /* @__PURE__ */ function(PanelVariant$1) {
-	PanelVariant$1["fill"] = "fill";
-	PanelVariant$1["line"] = "line";
-	PanelVariant$1["outline"] = "outline";
-	return PanelVariant$1;
-}({});
-let PanelStacking = /* @__PURE__ */ function(PanelStacking$1) {
-	PanelStacking$1["default"] = "default";
-	PanelStacking$1["bFirst"] = "bFirst";
-	return PanelStacking$1;
-}({});
-let PanelStatus = /* @__PURE__ */ function(PanelStatus$1) {
-	PanelStatus$1["none"] = "none";
-	PanelStatus$1["new"] = "new";
-	PanelStatus$1["error"] = "error";
-	PanelStatus$1["draft"] = "draft";
-	return PanelStatus$1;
-}({});
-var ExpandButton = ({ onClick, isExpanded, resources }) => {
-	const buttonClassName = cn(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
-	return /* @__PURE__ */ jsxs(Button_default, {
-		variant: "borderless",
-		textClassName: styles["expander__button__text"],
-		wrapperClassName: buttonClassName,
-		"aria-expanded": isExpanded,
-		onClick,
-		children: [/* @__PURE__ */ jsx(Icon_default, {
-			svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default,
-			size: IconSize.XSmall
-		}), /* @__PURE__ */ jsx("span", { children: isExpanded ? resources.expandButtonClose : resources.expandButtonOpen })]
-	});
-};
-var PanelRoot = React.forwardRef(function PanelForwardedRef({ layout = PanelLayout.vertical, variant = PanelVariant.fill, color = "neutral", stacking = PanelStacking.default, testId, children, expanded = false, focusable, status = PanelStatus.none, buttonBottomAriaLabel, buttonBottomOnClick, buttonBottomText, className, resources, onExpand, highlightText }, ref) {
-	const [preContainer, setPreContainer] = React.useState([]);
-	const [title, setTitle] = React.useState([]);
-	const [content, setContent] = React.useState([]);
-	const [expandableContent, setExpandableContent] = React.useState([]);
-	const [hasIcon, setHasIcon] = React.useState(false);
-	const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
-	const localRef = React.useRef(null);
-	const panelRef = ref ?? localRef;
-	const expandedContentRef = React.useRef(null);
-	const defaultScroll = 100;
-	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
-	const mergedResources = {
-		...getResources(language),
-		...resources
-	};
-	React.useEffect(() => {
-		let index = 0;
-		let localHasIcon = false;
-		const newPreContainer = [];
-		const newTitle = [];
-		const newContent = [];
-		const newExpandableContent = [];
-		React.Children.forEach(children, (child) => {
-			if (React.isValidElement(child)) {
-				const key = child.key ?? `panel-child-${index++}`;
-				if (child.type === PreContainer) newPreContainer.push(React.cloneElement(child, { key }));
-				else if (child.type === PanelTitle_default) {
-					newTitle.push(React.cloneElement(child, {
-						key,
-						highlightText: child.props.highlightText || highlightText
-					}));
-					if (child.props.icon) localHasIcon = true;
-				} else if (child.type === A || child.type === B || child.type === C) newContent.push(React.cloneElement(child, { key }));
-				else if (child.type === ExpandedContent) newExpandableContent.push(React.cloneElement(child, { key }));
-			}
-		});
-		setPreContainer(newPreContainer);
-		setTitle(newTitle);
-		setContent(newContent);
-		setExpandableContent(newExpandableContent);
-		setHasIcon(localHasIcon);
-	}, [children]);
-	React.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) {
-					if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-					window.scrollBy({
-						top: scrollAmount,
-						behavior: "smooth"
-					});
-				}
-			}
-		}
-	}, [isExpanded]);
-	const colorScheme = variant === PanelVariant.fill ? color : "white";
-	const outerClassnames = cn(className, {
-		[styles["panel__border--outline--outer"]]: variant === PanelVariant.outline,
-		[styles["panel__border--line"]]: variant === PanelVariant.line,
-		[styles["panel__border--fill--neutral"]]: variant === PanelVariant.fill && colorScheme === "neutral",
-		[styles["panel__border--fill--new"]]: variant === PanelVariant.fill && status === PanelStatus.new,
-		[styles["panel__border--fill--status"]]: variant === PanelVariant.fill && status !== PanelStatus.none
-	});
-	const panelClassnames = cn(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
-		[styles["panel--line"]]: variant === PanelVariant.line,
-		[styles["panel--new"]]: status === PanelStatus.new,
-		[styles["panel--draft"]]: status === PanelStatus.draft,
-		[styles["panel--error"]]: status === PanelStatus.error,
-		[styles["panel--icon"]]: hasIcon
-	});
-	const contentContainerLayout = cn(styles["panel__content"], styles[`panel__content--${layout}`], { [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst });
-	const expanderBorderLayout = cn({
-		[styles["panel__expander__border--expanded"]]: isExpanded && status === PanelStatus.none,
-		[styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,
-		[styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === PanelStatus.none && variant === PanelVariant.line
-	});
-	const handleExpandClick = () => {
-		setIsExpanded(!isExpanded);
-	};
-	return expandableContent.length > 0 ? /* @__PURE__ */ jsx("div", {
-		className: outerClassnames,
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
-			children: /* @__PURE__ */ jsx("div", {
-				className: expanderBorderLayout,
-				children: /* @__PURE__ */ jsxs("div", {
-					className: panelClassnames,
-					"data-testid": testId,
-					ref: panelRef,
-					tabIndex: focusable ? -1 : void 0,
-					children: [
-						/* @__PURE__ */ jsxs(Highlighter_default, {
-							searchText: highlightText,
-							children: [preContainer, title]
-						}),
-						/* @__PURE__ */ jsx("div", {
-							className: contentContainerLayout,
-							children: /* @__PURE__ */ jsx(Highlighter_default, {
-								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_default, {
-								searchText: highlightText,
-								children: expandableContent
-							})]
-						})
-					]
-				})
-			})
-		})
-	}) : /* @__PURE__ */ jsx("div", {
-		className: outerClassnames,
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
-			children: /* @__PURE__ */ jsxs("div", {
-				className: panelClassnames,
-				"data-testid": testId,
-				ref: panelRef,
-				tabIndex: focusable ? -1 : void 0,
-				children: [
-					/* @__PURE__ */ jsxs(Highlighter_default, {
-						searchText: highlightText,
-						children: [preContainer, title]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: contentContainerLayout,
-						children: /* @__PURE__ */ jsx(Highlighter_default, {
-							searchText: highlightText,
-							children: content
-						})
-					}),
-					buttonBottomText && buttonBottomOnClick && /* @__PURE__ */ jsx("div", {
-						className: styles["panel__button-bottom"],
-						children: /* @__PURE__ */ jsxs(Button_default, {
-							variant: "borderless",
-							type: "button",
-							size: "medium",
-							onClick: buttonBottomOnClick,
-							"aria-label": buttonBottomAriaLabel,
-							children: [buttonBottomText, /* @__PURE__ */ jsx(Icon_default, {
-								svgIcon: ChevronRight_default,
-								size: IconSize.XSmall
-							})]
-						})
-					})
-				]
-			})
-		})
-	});
-});
-const PreContainer = ({ children }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: styles["panel__pre-container"],
-		children
-	});
-};
-const A = ({ children }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["panel__content__item"], styles["panel__content__item--a"]),
-		children
-	});
-};
-const B = ({ children }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["panel__content__item"], styles["panel__content__item--b"]),
-		children
-	});
-};
-const C = ({ children }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["panel__content__item"], styles["panel__content__item--c"]),
-		children
-	});
-};
-const ExpandedContent = ({ children }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["panel__expander__content"]),
-		children
-	});
-};
-PanelRoot.displayName = "Panel";
-var Panel = PanelRoot;
-Panel.PreContainer = PreContainer;
-Panel.Title = PanelTitle_default;
-Panel.A = A;
-Panel.B = B;
-Panel.C = C;
-Panel.ExpandedContent = ExpandedContent;
-var Panel_default = Panel;
-export { PanelLayout as a, PanelVariant as c, ExpandedContent as i, Panel_default as l, B as n, PanelStacking as o, C as r, PanelStatus as s, A as t, PreContainer as u };
-
-//# sourceMappingURL=Panel.js.map

package/lib/Panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Panel.js","names":["mergedResources: HNDesignsystemPanel","newPreContainer: React.ReactNode[]","newTitle: React.ReactNode[]","newContent: React.ReactNode[]","newExpandableContent: React.ReactNode[]","PreContainer: React.FC<ContentProps>","A: React.FC<ContentProps>","B: React.FC<ContentProps>","C: React.FC<ContentProps>","ExpandedContent: React.FC<ContentProps>"],"sources":["../src/resources/HN.Designsystem.Panel.en-GB.json","../src/resources/HN.Designsystem.Panel.nb-NO.json","../src/components/Panel/resourceHelper.ts","../src/components/Panel/Panel.tsx"],"sourcesContent":["{\n  \"expandButtonOpen\": \"See details\",\n  \"expandButtonClose\": \"Hide details\"\n}\n","{\n  \"expandButtonOpen\": \"Se detaljer\",\n  \"expandButtonClose\": \"Skjul detaljer\"\n}\n","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  /** Whether the panel can be focused */\n  focusable?: 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    focusable,\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 index = 0;\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        const key = child.key ?? `panel-child-${index++}`;\n\n        if (child.type === PreContainer) {\n          newPreContainer.push(React.cloneElement(child, { key }));\n        } else if (child.type === PanelTitle) {\n          newTitle.push(\n            React.cloneElement(child as React.ReactElement<PanelTitleProps>, {\n              key,\n              highlightText: child.props.highlightText || highlightText,\n            })\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(React.cloneElement(child, { key }));\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(React.cloneElement(child, { key }));\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} tabIndex={focusable ? -1 : undefined}>\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} tabIndex={focusable ? -1 : undefined}>\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"],"mappings":"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"}

package/lib/PanelOld.js

@@ -1,322 +0,0 @@
-import { a as IconSize, n as AnalyticsId } from "./constants2.js";
-import { t as palette } from "./palette.js";
-import { t as Icon_default } from "./Icon.js";
-import { t as Badge_default } from "./Badge.js";
-import { t as ArrowRight_default } from "./ArrowRight.js";
-import { t as Button_default } from "./Button.js";
-import { n as getAriaLabelAttributes } from "./accessibility.js";
-import { t as Title_default } from "./Title2.js";
-import { t as ChevronDown_default } from "./ChevronDown.js";
-import { t as ChevronUp_default } from "./ChevronUp.js";
-import { t as useExpand } from "./useExpand.js";
-import { t as AlertSignFill_default } from "./AlertSignFill.js";
-import { t as Calendar_default } from "./Calendar.js";
-import { t as Pencil_default } from "./Pencil.js";
-import { t as Watch_default } from "./Watch.js";
-import React, { useId } from "react";
-import cn from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import panelStyles from "./components/PanelOld/styles.module.scss";
-let PanelOldStatus = /* @__PURE__ */ function(PanelOldStatus$1) {
-	PanelOldStatus$1["normal"] = "normal";
-	PanelOldStatus$1["new"] = "new";
-	PanelOldStatus$1["error"] = "error";
-	PanelOldStatus$1["draft"] = "draft";
-	return PanelOldStatus$1;
-}({});
-let PanelOldVariant = /* @__PURE__ */ function(PanelOldVariant$1) {
-	PanelOldVariant$1["fill"] = "fill";
-	PanelOldVariant$1["white"] = "white";
-	PanelOldVariant$1["stroke"] = "stroke";
-	PanelOldVariant$1["line"] = "line";
-	return PanelOldVariant$1;
-}({});
-let PanelOldLayout = /* @__PURE__ */ function(PanelOldLayout$1) {
-	PanelOldLayout$1["layout1"] = "layout1";
-	PanelOldLayout$1["layout2"] = "layout2";
-	PanelOldLayout$1["layout3a"] = "layout3a";
-	PanelOldLayout$1["layout3b"] = "layout3b";
-	PanelOldLayout$1["layout3c"] = "layout3c";
-	return PanelOldLayout$1;
-}({});
-var StatusText = ({ status, statusMessage }) => {
-	const statusIcon = () => {
-		if (status === PanelOldStatus.error) return {
-			color: palette.cherry500,
-			svgIcon: AlertSignFill_default
-		};
-		return {
-			color: palette.black,
-			svgIcon: Pencil_default
-		};
-	};
-	const statusMessageClass = cn(panelStyles["status-message"], { [panelStyles["status-message--new"]]: status === PanelOldStatus.new });
-	if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) return /* @__PURE__ */ jsxs("div", {
-		className: statusMessageClass,
-		"data-testid": "display-status",
-		children: [
-			/* @__PURE__ */ jsx(Icon_default, {
-				...statusIcon(),
-				size: IconSize.XSmall
-			}),
-			" ",
-			/* @__PURE__ */ jsx("span", { children: statusMessage })
-		]
-	});
-	return null;
-};
-var PreContainer = ({ children }) => {
-	if (typeof children === "undefined") return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: panelStyles["header-container"],
-		children
-	});
-};
-var DateTime = ({ date, time }) => {
-	if (date || time) return /* @__PURE__ */ jsxs("div", {
-		className: panelStyles["datetime-container"],
-		"data-testid": "datetime",
-		children: [date && /* @__PURE__ */ jsxs("div", {
-			className: panelStyles["datetime-container__icon"],
-			children: [/* @__PURE__ */ jsx(Icon_default, {
-				svgIcon: Calendar_default,
-				size: IconSize.XSmall
-			}), /* @__PURE__ */ jsx("span", { children: date })]
-		}), time && /* @__PURE__ */ jsxs("div", {
-			className: panelStyles["datetime-container__icon"],
-			children: [/* @__PURE__ */ jsx(Icon_default, {
-				svgIcon: Watch_default,
-				size: IconSize.XSmall
-			}), /* @__PURE__ */ jsx("span", { children: time })]
-		})]
-	});
-	return null;
-};
-var PanelLayout1 = ({ contentA, contentB, contentHeader, ctaContainer, icon, status, statusMessage, titleElement }) => {
-	const panelLayoutClasses = cn(panelStyles["panel__layout-1"], { [panelStyles["panel__layout-1--with-icon"]]: icon });
-	const iconClasses = cn(panelStyles.panel__icon, panelStyles["panel__icon--layout-1"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
-	return /* @__PURE__ */ jsxs("div", {
-		className: panelLayoutClasses,
-		children: [
-			/* @__PURE__ */ jsx(StatusText, {
-				status,
-				statusMessage
-			}),
-			/* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
-			icon && /* @__PURE__ */ jsx("div", {
-				className: iconClasses,
-				children: icon
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: panelStyles["panel__layout-1__content-a"],
-				children: [titleElement, contentA]
-			}),
-			contentB && /* @__PURE__ */ jsx("div", { children: contentB }),
-			ctaContainer
-		]
-	});
-};
-var PanelLayout2 = ({ contentA, contentB, contentHeader, ctaContainer, icon, status, statusMessage, titleElement }) => {
-	const panelLayoutClasses = cn(panelStyles["panel__layout-2"], { [panelStyles["panel__layout-2--with-icon"]]: icon });
-	const iconClasses = cn(panelStyles.panel__icon, panelStyles["panel__icon--layout-2"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
-	const lastColumnClass = panelStyles["panel__layout-2__last-column"];
-	return /* @__PURE__ */ jsxs("div", {
-		className: panelLayoutClasses,
-		children: [
-			/* @__PURE__ */ jsx(StatusText, {
-				status,
-				statusMessage
-			}),
-			/* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
-			icon && /* @__PURE__ */ jsx("div", {
-				className: iconClasses,
-				children: icon
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: panelStyles["panel__layout-2__content-a"],
-				children: [titleElement, contentA]
-			}),
-			contentB && /* @__PURE__ */ jsx("div", {
-				className: lastColumnClass,
-				children: contentB
-			}),
-			ctaContainer && /* @__PURE__ */ jsx("div", {
-				className: lastColumnClass,
-				children: ctaContainer
-			})
-		]
-	});
-};
-var PanelLayout3 = ({ contentA, contentB, contentHeader, ctaContainer, icon, layout, status, statusMessage, titleElement }) => {
-	const layoutClasses = cn(panelStyles["panel__layout-3"], {
-		[panelStyles["panel__layout-3--with-icon"]]: icon,
-		[panelStyles["panel__layout-3--a"]]: layout === PanelOldLayout.layout3a,
-		[panelStyles["panel__layout-3--b"]]: layout === PanelOldLayout.layout3b,
-		[panelStyles["panel__layout-3--c"]]: layout === PanelOldLayout.layout3c
-	});
-	const iconClasses = cn(panelStyles.panel__icon, panelStyles["panel__icon--layout-3"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
-	return /* @__PURE__ */ jsxs("div", {
-		className: layoutClasses,
-		children: [
-			/* @__PURE__ */ jsx(StatusText, {
-				status,
-				statusMessage
-			}),
-			/* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
-			icon && /* @__PURE__ */ jsx("div", {
-				className: iconClasses,
-				children: icon
-			}),
-			/* @__PURE__ */ jsxs("div", { children: [titleElement, contentA] }),
-			/* @__PURE__ */ jsxs("div", {
-				className: panelStyles["panel__layout-3__last-column"],
-				children: [contentB && /* @__PURE__ */ jsx("div", {
-					className: panelStyles["panel__layout-3__last-column__content-b"],
-					children: contentB
-				}), ctaContainer]
-			})
-		]
-	});
-};
-var PanelOld_default$1 = React.forwardRef(function PanelForwardedRef(props, ref) {
-	const { buttonAriaLabel, buttonAriaLabelledById, buttonText = "Se detaljer", buttonTextClose = "Skjul detaljer", buttonHtmlMarkup = "a", buttonOnClick, children, className, containerAsButton = false, contentA, contentB, contentHeader, date, expanded = false, focusable = false, icon, layout = PanelOldLayout.layout2, noTopBorder, onExpand, renderChildrenWhenClosed = false, status = PanelOldStatus.normal, statusMessage, target = "_self", testId, time, title, titleHtmlMarkup = "h2", url, variant = PanelOldVariant.fill } = props;
-	const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
-	const titleId = useId();
-	const buttonTextId = useId();
-	const hasBadge = statusMessage && status === PanelOldStatus.new;
-	const noContentB = typeof contentB === "undefined";
-	const layout1 = layout === "layout1" || noContentB;
-	const layout2 = !noContentB && layout === "layout2";
-	const layout3 = !noContentB && (layout === "layout3a" || layout === "layout3b" || layout === "layout3c");
-	const panelWrapperClasses = cn(panelStyles["panel-wrapper"], className);
-	const panelClasses = cn(panelStyles.panel, {
-		[panelStyles["panel--fill"]]: variant === PanelOldVariant.fill,
-		[panelStyles["panel--stroke"]]: variant === PanelOldVariant.stroke,
-		[panelStyles["panel--white"]]: variant === PanelOldVariant.white,
-		[panelStyles["panel--line"]]: variant === PanelOldVariant.line,
-		[panelStyles["panel--no-top-border"]]: variant === PanelOldVariant.line && noTopBorder,
-		[panelStyles["panel--selected"]]: isExpanded,
-		[panelStyles["panel--new"]]: status === PanelOldStatus.new,
-		[panelStyles["panel--draft"]]: status === PanelOldStatus.draft,
-		[panelStyles["panel--error"]]: status === PanelOldStatus.error,
-		[panelStyles["panel--status"]]: status && status !== PanelOldStatus.normal,
-		[panelStyles["panel--with-icon"]]: icon,
-		[panelStyles["panel--button"]]: containerAsButton,
-		[panelStyles["panel--clickable"]]: children || url || onExpand || buttonOnClick || containerAsButton
-	});
-	const renderCTAContainer = () => {
-		const hasButton = children || url || buttonOnClick;
-		const btnContainerClasses = cn(panelStyles["panel__btn-container"], {
-			[panelStyles["panel__btn-container--no-content-b"]]: noContentB,
-			[panelStyles["panel__btn-container--no-button"]]: !hasButton
-		});
-		return (hasButton || date || time) && /* @__PURE__ */ jsxs("div", {
-			className: btnContainerClasses,
-			children: [/* @__PURE__ */ jsx(DateTime, {
-				date,
-				time
-			}), hasButton && /* @__PURE__ */ jsx("div", {
-				className: panelStyles["panel__details-btn"],
-				children: renderDetailsButton()
-			})]
-		});
-	};
-	const renderDetailsButton = () => {
-		const ariaLabelAttributes = getAriaLabelAttributes({
-			label: buttonAriaLabel,
-			id: buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}` || title && titleId && `${buttonTextId} ${titleId}`,
-			prefer: "label"
-		});
-		const commonProps = {
-			onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),
-			className: containerAsButton ? panelStyles["panel__expand"] : void 0,
-			variant: "borderless",
-			ellipsis: true,
-			...ariaLabelAttributes
-		};
-		if (children) return /* @__PURE__ */ jsxs(Button_default, {
-			testId: "expand",
-			"aria-expanded": isExpanded,
-			...commonProps,
-			children: [/* @__PURE__ */ jsx("span", {
-				id: buttonTextId,
-				children: isExpanded ? buttonTextClose : buttonText
-			}), /* @__PURE__ */ jsx(Icon_default, { svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default })]
-		});
-		return /* @__PURE__ */ jsxs(Button_default, {
-			testId: "url",
-			htmlMarkup: buttonHtmlMarkup,
-			href: url,
-			target,
-			...commonProps,
-			children: [/* @__PURE__ */ jsx("span", {
-				id: buttonTextId,
-				children: buttonText
-			}), /* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight_default })]
-		});
-	};
-	const renderContent = () => {
-		if (!children || !renderChildrenWhenClosed && !isExpanded) return null;
-		return /* @__PURE__ */ jsx("div", {
-			className: cn(panelStyles["panel-details"], {
-				[panelStyles["panel-details--open"]]: isExpanded,
-				[panelStyles["panel-details--line"]]: variant === PanelOldVariant.line,
-				[panelStyles["panel-details--white"]]: variant === PanelOldVariant.white
-			}),
-			"data-testid": "panel-details",
-			children: /* @__PURE__ */ jsx("div", { children })
-		});
-	};
-	const renderTitle = () => {
-		const titleContainerClasses = cn(panelStyles["title-container"], { [panelStyles["title-container--no-content-a"]]: !contentA });
-		const titleClasses = cn(panelStyles["title-container__title"], { [panelStyles["title-container__title--badge"]]: hasBadge });
-		return title && /* @__PURE__ */ jsxs("div", {
-			className: titleContainerClasses,
-			children: [/* @__PURE__ */ jsx(Title_default, {
-				appearance: "title3",
-				htmlMarkup: titleHtmlMarkup,
-				id: titleId,
-				className: titleClasses,
-				children: title
-			}), hasBadge && /* @__PURE__ */ jsx("div", {
-				className: panelStyles.panel__badge,
-				children: /* @__PURE__ */ jsx(Badge_default, {
-					color: "blueberry",
-					testId: "badge-status",
-					children: statusMessage
-				})
-			})]
-		});
-	};
-	const layoutProps = {
-		contentA,
-		contentB,
-		contentHeader,
-		ctaContainer: renderCTAContainer(),
-		icon,
-		status,
-		statusMessage,
-		titleElement: renderTitle()
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		tabIndex: focusable ? -1 : void 0,
-		ref,
-		"data-testid": testId,
-		className: panelWrapperClasses,
-		"data-analyticsid": AnalyticsId.PanelOld,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: panelClasses,
-			children: [
-				layout1 && /* @__PURE__ */ jsx(PanelLayout1, { ...layoutProps }),
-				layout2 && /* @__PURE__ */ jsx(PanelLayout2, { ...layoutProps }),
-				layout3 && /* @__PURE__ */ jsx(PanelLayout3, {
-					...layoutProps,
-					layout
-				})
-			]
-		}), renderContent()]
-	});
-});
-export { PanelOldVariant as i, PanelOldLayout as n, PanelOldStatus as r, PanelOld_default$1 as t };
-
-//# sourceMappingURL=PanelOld.js.map