@helsenorge/designsystem-react 13.0.0-beta.4 → 13.0.0-workspaces-beta.1

package/lib/MaxCharacters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxCharacters.js","names":["MaxCharacters: React.FC<MaxCharactersProps>"],"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"],"mappings":";;;;;AAqBA,IAAMA,iBAA+C,EAAE,eAAe,SAAS,QAAQ,SAAS,eAAe;CAC7G,MAAM,WAAW,SAAS;CAE1B,MAAM,mBAAmB,WAAW,OAAO,mBAAmB;GAC3D,OAAO,6BAA6B,YAAY,YAAY;GAC5D,OAAO,6BAA6B,WAAW;EACjD,CAAC;CAEF,MAAM,YAAY,WAAW,MAAO,WAAW;AAE/C,QACE,oBAAC,OAAA;EAAI,aAAW;EAAW,eAAa;EAAQ,WAAW;EAAkB,OAAO,EAAE,UAAU;YAC7F,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,UAAU;GAC/C;;AAIV,IAAA,wBAAe"}

package/lib/Panel.js

@@ -0,0 +1,267 @@
+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 classNames 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 = classNames(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, 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 localHasIcon = false;
+		const newPreContainer = [];
+		const newTitle = [];
+		const newContent = [];
+		const newExpandableContent = [];
+		React.Children.forEach(children, (child) => {
+			if (React.isValidElement(child)) {
+				if (child.type === PreContainer) newPreContainer.push(child);
+				else if (child.type === PanelTitle_default) {
+					newTitle.push(React.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.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 = classNames(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 = classNames(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 = classNames(styles["panel__content"], styles[`panel__content--${layout}`], { [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst });
+	const expanderBorderLayout = classNames({
+		[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: classNames({ [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,
+					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: classNames({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: panelClassnames,
+				"data-testid": testId,
+				ref: panelRef,
+				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: classNames(styles["panel__content__item"], styles["panel__content__item--a"]),
+		children
+	});
+};
+const B = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(styles["panel__content__item"], styles["panel__content__item--b"]),
+		children
+	});
+};
+const C = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(styles["panel__content__item"], styles["panel__content__item--c"]),
+		children
+	});
+};
+const ExpandedContent = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(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

@@ -0,0 +1 @@
+{"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  /** 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"],"mappings":"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"}

package/lib/PanelOld.js

@@ -0,0 +1,322 @@
+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 classNames 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 = classNames(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 = classNames(panelStyles["panel__layout-1"], { [panelStyles["panel__layout-1--with-icon"]]: icon });
+	const iconClasses = classNames(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 = classNames(panelStyles["panel__layout-2"], { [panelStyles["panel__layout-2--with-icon"]]: icon });
+	const iconClasses = classNames(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 = classNames(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 = classNames(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 = classNames(panelStyles["panel-wrapper"], className);
+	const panelClasses = classNames(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 = classNames(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: classNames(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 = classNames(panelStyles["title-container"], { [panelStyles["title-container--no-content-a"]]: !contentA });
+		const titleClasses = classNames(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