@helsenorge/designsystem-react 11.0.0-beta.3 → 11.0.0-beta.4

package/Panel.js

@@ -0,0 +1,207 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { B as Button } from "./Button.js";
+import { I as Icon } from "./Icon.js";
+import { IconSize } from "./constants.js";
+import { P as PanelTitle } from "./PanelTitle.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";
+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 }) => {
+  const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "borderless",
+      textClassName: styles["expander__button__text"],
+      className: buttonClassName,
+      "aria-expanded": isExpanded,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { svgIcon: isExpanded ? ChevronUp : ChevronDown, size: IconSize.XSmall }),
+        /* @__PURE__ */ jsx("span", { children: isExpanded ? "Skjul detaljer" : "Se detaljer" })
+      ]
+    }
+  );
+};
+const Panel = ({
+  layout = "vertical",
+  variant = "fill",
+  color = "neutral",
+  stacking = "default",
+  testId,
+  children,
+  status = "none",
+  buttonBottomOnClick,
+  buttonBottomText,
+  className
+}) => {
+  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] = React__default.useState(false);
+  const panelRef = React__default.useRef(null);
+  const expandedContentRef = React__default.useRef(null);
+  const defaultScroll = 100;
+  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(child);
+          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 (isExpanded) {
+      if (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"
+  });
+  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 */
+  });
+  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: [
+    preContainer,
+    title,
+    /* @__PURE__ */ jsx("div", { className: contentContainerLayout, children: content }),
+    /* @__PURE__ */ jsx(ExpandButton, { onClick: () => setIsExpanded(!isExpanded), isExpanded }),
+    isExpanded && /* @__PURE__ */ jsxs("div", { ref: expandedContentRef, children: [
+      /* @__PURE__ */ jsx("div", { className: styles["panel__expander__separator"] }),
+      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: [
+    preContainer,
+    title,
+    /* @__PURE__ */ jsx("div", { className: contentContainerLayout, children: content }),
+    buttonBottomText && buttonBottomOnClick && /* @__PURE__ */ jsx("div", { className: styles["panel__button-bottom"], children: /* @__PURE__ */ jsxs(Button, { variant: "borderless", type: "button", size: "medium", onClick: buttonBottomOnClick, 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 });
+};
+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/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport PanelTitle, { PanelTitleProps } from './PanelTitle';\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  /** 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  /** 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  /** 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}\n\nconst ExpandButton = ({ onClick, isExpanded }: { onClick: () => void; isExpanded: boolean | undefined }): 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      className={buttonClassName}\n      aria-expanded={isExpanded}\n      onClick={onClick}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {/* @todo: språk på knapp */}\n      <span>{isExpanded ? 'Skjul detaljer' : 'Se detaljer'}</span>\n    </Button>\n  );\n};\n\nconst Panel: React.FC<PanelProps> & {\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} = ({\n  layout = PanelLayout.vertical,\n  variant = PanelVariant.fill,\n  color = 'neutral',\n  stacking = PanelStacking.default,\n  testId,\n  children,\n  status = PanelStatus.none,\n  buttonBottomOnClick,\n  buttonBottomText,\n  className,\n}: PanelProps) => {\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] = React.useState(false);\n  const panelRef = React.useRef<HTMLDivElement>(null);\n  const expandedContentRef = React.useRef<HTMLDivElement>(null);\n  const defaultScroll = 100;\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(child);\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    // Scroller oppover når expanded content åpnes\n    if (isExpanded) {\n      if (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  });\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  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            {preContainer}\n            {title}\n            <div className={contentContainerLayout}>{content}</div>\n            <ExpandButton onClick={() => setIsExpanded(!isExpanded)} isExpanded={isExpanded} />\n            {isExpanded && (\n              <div ref={expandedContentRef}>\n                <div className={styles['panel__expander__separator']} />\n                {expandableContent}\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          {preContainer}\n          {title}\n          <div className={contentContainerLayout}>{content}</div>\n          {buttonBottomText && buttonBottomOnClick && (\n            <div className={styles['panel__button-bottom']}>\n              <Button variant=\"borderless\" type=\"button\" size=\"medium\" onClick={buttonBottomOnClick}>\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\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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"}

package/PanelTitle.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { T as Title } from "./Title.js";
+import styles from "./components/Panel/PanelTitle/styles.module.scss";
+const PanelTitle = (props) => {
+  const { testId, icon, badge, title, titleMarkup = "h3" } = props;
+  return /* @__PURE__ */ jsxs("div", { className: classNames(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }), "data-testid": testId, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: styles["paneltitle__icon"], children: icon }),
+    title && /* @__PURE__ */ jsxs("div", { className: styles["paneltitle__title"], children: [
+      /* @__PURE__ */ jsx(Title, { appearance: "title3", htmlMarkup: titleMarkup, children: title }),
+      badge && /* @__PURE__ */ jsx("div", { className: styles["paneltitle__badge"], children: badge })
+    ] })
+  ] });
+};
+export {
+  PanelTitle as P
+};
+//# sourceMappingURL=PanelTitle.js.map

package/PanelTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTitle.js","sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Title from '../../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelTitleProps {\n  /** Badge displayed in title */\n  badge?: React.ReactNode;\n  /** Icon displayed in title. Only IconSize Small is supported */\n  icon?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title text */\n  title: string;\n  /** Title HTML markup */\n  titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\n\nconst PanelTitle: React.FC<PanelTitleProps> = (props: PanelTitleProps) => {\n  const { testId, icon, badge, title, titleMarkup = 'h3' } = props;\n  return (\n    <div className={classNames(styles['paneltitle'], { [styles['paneltitle--has-icon']]: icon })} data-testid={testId}>\n      {icon && <div className={styles['paneltitle__icon']}>{icon}</div>}\n      {title && (\n        <div className={styles['paneltitle__title']}>\n          <Title appearance=\"title3\" htmlMarkup={titleMarkup}>\n            {title}\n          </Title>\n          {badge && <div className={styles['paneltitle__badge']}>{badge}</div>}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PanelTitle;\n"],"names":[],"mappings":";;;;AAqBM,MAAA,aAAwC,CAAC,UAA2B;AACxE,QAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,SAAS;AAC3D,8BACG,OAAI,EAAA,WAAW,WAAW,OAAO,YAAY,GAAG,EAAE,CAAC,OAAO,sBAAsB,CAAC,GAAG,MAAM,GAAG,eAAa,QACxG,UAAA;AAAA,IAAA,4BAAS,OAAI,EAAA,WAAW,OAAO,kBAAkB,GAAI,UAAK,MAAA;AAAA,IAC1D,SACE,qBAAA,OAAA,EAAI,WAAW,OAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,oBAAC,OAAM,EAAA,YAAW,UAAS,YAAY,aACpC,UACH,OAAA;AAAA,MACC,SAAU,oBAAA,OAAA,EAAI,WAAW,OAAO,mBAAmB,GAAI,UAAM,MAAA,CAAA;AAAA,IAAA,EAChE,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/StatusDot.js

@@ -81,7 +81,9 @@ const StatusDotIcon = ({ onColor, variant = "info" }) => {
 const StatusDot = (props) => {
   const { id, onColor = StatusDotOnColor.onwhite, variant = "info", text, className, testId } = props;
   const statusDotClasses = classNames(styles["statusdot"], className);
-  const labelClasses = classNames(onColor === StatusDotOnColor.ondark && styles["statusdot__label--on-dark"]);
+  const labelClasses = classNames(styles["statusdot__label"], {
+    [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark
+  });
   return /* @__PURE__ */ jsxs("span", { id, className: statusDotClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.StatusDot, children: [
     /* @__PURE__ */ jsx("span", { className: styles["statusdot__dot"], "data-testid": testId + "-dot", children: /* @__PURE__ */ jsx(StatusDotIcon, { onColor, variant }) }),
     /* @__PURE__ */ jsx("span", { className: labelClasses, children: text })

package/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'Group'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'Change'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'Login'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(onColor === StatusDotOnColor.ondark && styles['statusdot__label--on-dark']);\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotOnColor","StatusDotVariant"],"mappings":"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"}
+{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'Group'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'Change'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'Login'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotOnColor","StatusDotVariant"],"mappings":"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"}

package/components/ExpanderList/index.js

@@ -3,7 +3,7 @@ import React__default, { useState, useEffect, useRef } from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "../../constants.js";
 import { useExpand } from "../../hooks/useExpand.js";
-import { useHover } from "../../hooks/useHover.js";
+import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
 import { useUuid } from "../../hooks/useUuid.js";
 import { mergeRefs } from "../../utils/refs.js";
 import { isElementInViewport } from "../../utils/viewport.js";
@@ -28,12 +28,12 @@ const Expander = React__default.forwardRef((props, ref) => {
     onExpand,
     renderChildrenWhenClosed,
     variant = "line",
-    zIndex
+    zIndex = 0
   } = props;
   const [isExpanded] = useExpand(expanded, onExpand);
   const expanderRef = useRef(null);
   const triggerRef = useRef(null);
-  const { isHovered } = useHover(triggerRef);
+  const { isHovered, isFocused } = usePseudoClasses(triggerRef);
   const isFill = variant === "fill";
   const isFillNegative = variant === "fill-negative";
   const isOutline = variant === "outline";
@@ -82,9 +82,16 @@ const Expander = React__default.forwardRef((props, ref) => {
         ref: triggerRef,
         "aria-expanded": isExpanded,
         style: {
-          zIndex: zIndex ?? void 0
+          zIndex: isFocused ? zIndex + 1 : zIndex
         },
-        children: renderListHeader(title, titleHtmlMarkup, isHovered, large ? "large" : "medium", isExpanded ? ChevronUp : ChevronDown, icon)
+        children: renderListHeader(
+          title,
+          titleHtmlMarkup,
+          isHovered || isFocused,
+          large ? "large" : "medium",
+          isExpanded ? ChevronUp : ChevronDown,
+          icon
+        )
       }
     ),
     renderContent()

package/components/ExpanderList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the colors of the list. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: JSX.Element | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n    /** Overrides the default z-index of the expander header */\n    zIndex?: number;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n    zIndex,\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const itemClasses = classNames(className, expanderListStyles['expander-list__item'], {\n    [expanderListStyles[`expander-list__item--fill`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,\n    [expanderListStyles['expander-list__item--outline']]: isOutline,\n    [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,\n    [expanderListStyles['expander-list__item--line']]: isLine,\n    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n    [expanderListStyles['expander-list-link--outline']]: isOutline,\n    [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,\n    [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,\n    [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(\n      expanderListStyles['expander-list-link__main-content'],\n      isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n      padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n    );\n\n    return <div className={mainContentClasses}>{children}</div>;\n  };\n\n  return (\n    <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n      <button\n        type=\"button\"\n        id={id}\n        onClick={handleExpanderClick}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderListExpander}\n        className={expanderClasses}\n        ref={triggerRef}\n        aria-expanded={isExpanded}\n        style={{\n          zIndex: zIndex ?? undefined,\n        }}\n      >\n        {renderListHeader(title, titleHtmlMarkup, isHovered, large ? 'large' : 'medium', isExpanded ? ChevronUp : ChevronDown, icon)}\n      </button>\n      {renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: {} | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    renderChildrenWhenClosed = false,\n    color,\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const uuid = useUuid();\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  const getExpanderId = (index: number): string => `${uuid}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  useEffect(() => {\n    const newActiveExpander = React.Children.map(children, child => {\n      if (isExpanderComponent(child)) {\n        return child;\n      }\n    })?.reduce((acc, child, index) => {\n      // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n      if (typeof child.props.expanded !== 'undefined') {\n        acc[getExpanderId(index)] = child.props.expanded;\n      }\n      return acc;\n    }, {} as ActiveExpander);\n\n    setActiveExpander({ ...activeExpander, ...newActiveExpander });\n  }, [children]);\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n\n          return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n            id,\n            key: index,\n            expanded,\n            padding: childPadding,\n            color,\n            large,\n            'aria-expanded': expanded,\n            className: expanderListStyles['expander-list__item'],\n            handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n            renderChildrenWhenClosed,\n            variant,\n            zIndex: zIndex,\n          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AA8EA,MAAM,WAAyBA,eAAM,WAAyC,CAAC,OAAO,QAAQ;AACtF,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,kBAAkB;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EAAA,IACE;AACJ,QAAM,CAAC,UAAU,IAAI,UAAU,UAAU,QAAQ;AAC3C,QAAA,cAAc,OAAsB,IAAI;AACxC,QAAA,aAAa,OAA0B,IAAI;AACjD,QAAM,EAAE,UAAA,IAAc,SAAS,UAAU;AAEzC,QAAM,SAAS,YAAY;AAC3B,QAAM,iBAAiB,YAAY;AACnC,QAAM,YAAY,YAAY;AAC9B,QAAM,SAAS,YAAY;AAE3B,QAAM,cAAc,WAAW,WAAW,mBAAmB,qBAAqB,GAAG;AAAA,IACnF,CAAC,mBAAmB,2BAA2B,CAAC,GAAG;AAAA,IACnD,CAAC,mBAAmB,8BAA8B,KAAK,EAAE,CAAC,GAAG;AAAA,IAC7D,CAAC,mBAAmB,oCAAoC,CAAC,GAAG;AAAA,IAC5D,CAAC,mBAAmB,8BAA8B,CAAC,GAAG;AAAA,IACtD,CAAC,mBAAmB,iCAAiC,KAAK,EAAE,CAAC,GAAG;AAAA,IAChE,CAAC,mBAAmB,2BAA2B,CAAC,GAAG;AAAA,IACnD,CAAC,mBAAmB,8BAA8B,KAAK,EAAE,CAAC,GAAG;AAAA,EAAA,CAC9D;AAEK,QAAA,kBAAkB,WAAW,mBAAmB,oBAAoB,GAAG,mBAAmB,uBAAuB,KAAK,EAAE,GAAG;AAAA,IAC/H,CAAC,mBAAmB,0BAA0B,CAAC,GAAG;AAAA,IAClD,CAAC,mBAAmB,6BAA6B,KAAK,EAAE,CAAC,GAAG;AAAA,IAC5D,CAAC,mBAAmB,mCAAmC,CAAC,GAAG;AAAA,IAC3D,CAAC,mBAAmB,6BAA6B,CAAC,GAAG;AAAA,IACrD,CAAC,mBAAmB,gCAAgC,KAAK,EAAE,CAAC,GAAG;AAAA,IAC/D,CAAC,mBAAmB,6BAA6B,KAAK,EAAE,CAAC,GAAG;AAAA,IAC5D,CAAC,mBAAmB,4BAA4B,CAAC,GAAG,CAAC;AAAA,IACrD,CAAC,mBAAmB,0BAA0B,CAAC,GAAG;AAAA,IAClD,CAAC,mBAAmB,2BAA2B,CAAC,GAAG;AAAA,EAAA,CACpD;AAED,QAAM,gBAAgB,MAAuB;AACvC,QAAA,CAAC,4BAA4B,CAAC,YAAY;AACrC,aAAA;AAAA,IAAA;AAGT,UAAM,qBAAqB;AAAA,MACzB,mBAAmB,kCAAkC;AAAA,MACrD,cAAc,mBAAmB,4CAA4C;AAAA,MAC7E,UAAU,mBAAmB,2CAA2C,IAAI;AAAA,IAC9E;AAEA,WAAQ,oBAAA,OAAA,EAAI,WAAW,oBAAqB,SAAS,CAAA;AAAA,EACvD;AAGE,SAAA,qBAAC,MAAG,EAAA,WAAW,aAAa,KAAK,UAAU,CAAC,KAAK,WAAW,CAAC,GAC3D,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,SAAS;AAAA,QACT,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX,KAAK;AAAA,QACL,iBAAe;AAAA,QACf,OAAO;AAAA,UACL,QAAQ,UAAU;AAAA,QACpB;AAAA,QAEC,UAAA,iBAAiB,OAAO,iBAAiB,WAAW,QAAQ,UAAU,UAAU,aAAa,YAAY,aAAa,IAAI;AAAA,MAAA;AAAA,IAC7H;AAAA,IACC,cAAc;AAAA,EAAA,GACjB;AAEJ,CAAC;AAID,MAAM,sBAAsB,CAAC,YAC3BA,eAAM,eAA8B,OAAO,KAAM,QAA+B,SAAS;AAEpF,MAAM,eAAeA,eAAM,WAAW,CAAC,OAA0B,QAAqC;AACrG,QAAA;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,2BAA2B;AAAA,IAC3B;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAyB;AACrE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAsB;AAClE,QAAM,OAAO,QAAQ;AACrB,QAAM,sBAAsB,WAAW,mBAAmB,eAAe,GAAG,SAAS;AAE5E,WAAA,oBAAoB,OAAkD,IAAkB;AAC7E,sBAAA,CAAA,cAAc,YAAY,EAAE,CAAC,EAAE,GAAG,EAAC,uCAAY,KAAE,IAAM,EAAE,GAAG,WAAW,CAAC,EAAE,GAAG,EAAC,uCAAY,MAAM;AAClH,sBAAkB,MAAM,aAAa;AAAA,EAAA;AAGvC,QAAM,gBAAgB,CAAC,UAA0B,GAAG,IAAI,IAAI,KAAK;AAEjE,YAAU,MAAM;AACd,QAAI,aAAa,kBAAkB,CAAC,oBAAoB,cAAc,GAAG;AACvE,qBAAe,eAAe;AAAA,IAAA;AAAA,EAChC,GACC,CAAC,WAAW,cAAc,CAAC;AAE9B,YAAU,MAAM;;AACd,UAAM,qBAAoBA,oBAAM,SAAS,IAAI,UAAU,CAAS,UAAA;AAC1D,UAAA,oBAAoB,KAAK,GAAG;AACvB,eAAA;AAAA,MAAA;AAAA,IAEV,CAAA,MAJyBA,mBAItB,OAAO,CAAC,KAAK,OAAO,UAAU;AAEhC,UAAI,OAAO,MAAM,MAAM,aAAa,aAAa;AAC/C,YAAI,cAAc,KAAK,CAAC,IAAI,MAAM,MAAM;AAAA,MAAA;AAEnC,aAAA;AAAA,IACT,GAAG;AAEH,sBAAkB,EAAE,GAAG,gBAAgB,GAAG,mBAAmB;AAAA,EAAA,GAC5D,CAAC,QAAQ,CAAC;AAEb,6BACG,MAAG,EAAA,WAAW,qBAAqB,KAAU,eAAa,QAAQ,oBAAkB,YAAY,cAC9F,yBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC1C,QAAA,oBAAoB,KAAK,GAAG;AACxB,YAAA,KAAK,cAAc,KAAK;AACxB,YAAA,WAAW,iDAAiB;AAE3B,aAAAA,eAAM,aAAa,OAA4C;AAAA,QACpE;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,iBAAiB;AAAA,QACjB,WAAW,mBAAmB,qBAAqB;AAAA,QACnD,qBAAqB,CAAC,UAAyC,oBAAoB,OAAO,GAAG,IAAI,IAAI,KAAK,EAAE;AAAA,QAC5G;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAEI,WAAA;AAAA,EACR,CAAA,GACH;AAEJ,CAAC;AAED,aAAa,cAAc;AAC3B,aAAa,WAAW;AACxB,SAAS,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the colors of the list. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: JSX.Element | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n    /** Overrides the default z-index of the expander header */\n    zIndex?: number;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n    zIndex = 0,\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered, isFocused } = usePseudoClasses(triggerRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const itemClasses = classNames(className, expanderListStyles['expander-list__item'], {\n    [expanderListStyles[`expander-list__item--fill`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,\n    [expanderListStyles['expander-list__item--outline']]: isOutline,\n    [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,\n    [expanderListStyles['expander-list__item--line']]: isLine,\n    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n    [expanderListStyles['expander-list-link--outline']]: isOutline,\n    [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,\n    [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,\n    [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(\n      expanderListStyles['expander-list-link__main-content'],\n      isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n      padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n    );\n\n    return <div className={mainContentClasses}>{children}</div>;\n  };\n\n  return (\n    <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n      <button\n        type=\"button\"\n        id={id}\n        onClick={handleExpanderClick}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderListExpander}\n        className={expanderClasses}\n        ref={triggerRef}\n        aria-expanded={isExpanded}\n        style={{\n          zIndex: isFocused ? zIndex + 1 : zIndex,\n        }}\n      >\n        {renderListHeader(\n          title,\n          titleHtmlMarkup,\n          isHovered || isFocused,\n          large ? 'large' : 'medium',\n          isExpanded ? ChevronUp : ChevronDown,\n          icon\n        )}\n      </button>\n      {renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: unknown | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    renderChildrenWhenClosed = false,\n    color,\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const uuid = useUuid();\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  const getExpanderId = (index: number): string => `${uuid}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  useEffect(() => {\n    const newActiveExpander = React.Children.map(children, child => {\n      if (isExpanderComponent(child)) {\n        return child;\n      }\n    })?.reduce((acc, child, index) => {\n      // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n      if (typeof child.props.expanded !== 'undefined') {\n        acc[getExpanderId(index)] = child.props.expanded;\n      }\n      return acc;\n    }, {} as ActiveExpander);\n\n    setActiveExpander({ ...activeExpander, ...newActiveExpander });\n  }, [children]);\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n\n          return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n            id,\n            key: index,\n            expanded,\n            padding: childPadding,\n            color,\n            large,\n            'aria-expanded': expanded,\n            className: expanderListStyles['expander-list__item'],\n            handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n            renderChildrenWhenClosed,\n            variant,\n            zIndex: zIndex,\n          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["React"],"mappings":"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"}

package/components/Panel/Panel.d.ts

@@ -0,0 +1,65 @@
+import { default as React } from 'react';
+import { PaletteNames } from '../../theme/palette';
+import { PanelTitleProps } from './PanelTitle';
+export declare enum PanelLayout {
+    vertical = "vertical",
+    horizontal = "horizontal",
+    combined = "combined",
+    bAsRightCol = "bAsRightCol"
+}
+export type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;
+export declare enum PanelVariant {
+    fill = "fill",
+    line = "line",
+    outline = "outline"
+}
+export declare enum PanelStacking {
+    default = "default",
+    bFirst = "bFirst"
+}
+export declare enum PanelStatus {
+    none = "none",
+    new = "new",
+    error = "error",
+    draft = "draft"
+}
+export interface PanelProps {
+    /** Sets the text on the bottom call to action button */
+    buttonBottomText?: string;
+    /** Sets the action on the bottom call to action button */
+    buttonBottomOnClick?: () => void;
+    /** Sets the layout and order of the content boxes */
+    layout?: PanelLayout;
+    /** Sets the visual variant of panel */
+    variant?: PanelVariant;
+    /** Sets the color for panel if it has variant fill */
+    color?: PanelColors;
+    /** Sets classes on the outermost container of the panel */
+    className?: string;
+    /** Sets the stacking order of the content boxes */
+    stacking?: PanelStacking;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Children elements to be rendered inside the panel */
+    children?: React.ReactNode;
+    /** Displays a status on the left side: default normal */
+    status?: PanelStatus;
+}
+declare const Panel: React.FC<PanelProps> & {
+    PreContainer: React.FC<ContentProps>;
+    Title: React.FC<PanelTitleProps>;
+    A: React.FC<ContentProps>;
+    B: React.FC<ContentProps>;
+    C: React.FC<ContentProps>;
+    ExpandedContent: React.FC<ContentProps>;
+};
+export interface ContentProps {
+    /** Children elements to be rendered inside the content box */
+    children?: React.ReactNode;
+}
+export declare const PreContainer: React.FC<ContentProps>;
+export declare const A: React.FC<ContentProps>;
+export declare const B: React.FC<ContentProps>;
+export declare const C: React.FC<ContentProps>;
+export declare const ExpandedContent: React.FC<ContentProps>;
+export default Panel;

package/components/Panel/Panel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Panel/PanelExamples.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export declare const MedisinskFødselsregister: React.FC;
+export declare const TimeAvtale: React.FC;
+export declare const PasientReiser: React.FC;
+export declare const Helsekontakter: React.FC;
+export declare const Dokumentliste: React.FC;
+export declare const DokumentlisteDeling: React.FC;

package/components/Panel/PanelTitle/PanelTitle.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export interface PanelTitleProps {
+    /** Badge displayed in title */
+    badge?: React.ReactNode;
+    /** Icon displayed in title. Only IconSize Small is supported */
+    icon?: React.ReactNode;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Title text */
+    title: string;
+    /** Title HTML markup */
+    titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+declare const PanelTitle: React.FC<PanelTitleProps>;
+export default PanelTitle;

package/components/Panel/PanelTitle/index.d.ts

@@ -0,0 +1,3 @@
+import { default as PanelTitle } from './PanelTitle';
+export * from './PanelTitle';
+export default PanelTitle;

package/components/Panel/PanelTitle/index.js

@@ -0,0 +1,5 @@
+import { P as PanelTitle } from "../../../PanelTitle.js";
+export {
+  PanelTitle as default
+};
+//# sourceMappingURL=index.js.map

package/components/Panel/PanelTitle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Panel/PanelTitle/styles.module.scss

@@ -0,0 +1,43 @@
+@use 'sass:map';
+@use '../../../scss/spacers' as spacers;
+@use '../../../scss/breakpoints' as breakpoints;
+
+.paneltitle {
+  display: grid;
+  width: 100%;
+  gap: spacers.getSpacer(2xs);
+  grid-template-areas: 'title';
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    gap: spacers.getSpacer(2xs) spacers.getSpacer(s);
+  }
+
+  &--has-icon {
+    margin-left: -3.5rem;
+    grid-template-columns: 3rem 1fr;
+    grid-template-areas: 'icon title';
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-left: -4rem;
+    }
+  }
+
+  &__icon {
+    grid-area: icon;
+    justify-self: center;
+    height: 48px;
+  }
+
+  &__title {
+    grid-area: title;
+    display: flex;
+    flex-flow: row;
+    gap: spacers.getSpacer(s);
+    margin-top: 8px;
+    height: fit-content;
+  }
+
+  &__badge {
+    display: inline;
+  }
+}

package/components/Panel/PanelTitle/styles.module.scss.d.ts

@@ -0,0 +1,13 @@
+export type Styles = {
+  paneltitle: string;
+  paneltitle__badge: string;
+  paneltitle__icon: string;
+  paneltitle__title: string;
+  'paneltitle--has-icon': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Panel/Paneldocs.d.ts

@@ -0,0 +1 @@
+export declare const PanelDocs: () => React.JSX.Element;

package/components/Panel/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Panel } from './Panel';
+export * from './Panel';
+export default Panel;

package/components/Panel/index.js

@@ -0,0 +1,15 @@
+import { P as Panel } from "../../Panel.js";
+import { A, B, C, E, a, c, d, b, e } from "../../Panel.js";
+export {
+  A,
+  B,
+  C,
+  E as ExpandedContent,
+  a as PanelLayout,
+  c as PanelStacking,
+  d as PanelStatus,
+  b as PanelVariant,
+  e as PreContainer,
+  Panel as default
+};
+//# sourceMappingURL=index.js.map

package/components/Panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}