@helsenorge/designsystem-react 6.5.0 → 6.6.2

package/components/ExpanderList/ExpanderList.js

@@ -1,134 +1,137 @@
-import i, { useRef as j, useState as A, useEffect as V } from "react";
-import g from "classnames";
-import { AnalyticsId as U, ZIndex as O } from "../../constants.js";
-import { useExpand as P } from "../../hooks/useExpand.js";
-import { useHover as Z } from "../../hooks/useHover.js";
-import { useSticky as q } from "../../hooks/useSticky.js";
-import { useUuid as B } from "../../hooks/useUuid.js";
-import { mergeRefs as F } from "../../utils/refs.js";
-import { isElementInViewport as G } from "../../utils/viewport.js";
-import K from "../Icons/ChevronDown.js";
-import Q from "../Icons/ChevronUp.js";
-import { renderListHeader as X } from "../ListHeader/ListHeader.js";
+import i, { useRef as z, useState as A, useEffect as V } from "react";
+import C from "classnames";
+import { AnalyticsId as U, ZIndex as P } from "../../constants.js";
+import { useExpand as Z } from "../../hooks/useExpand.js";
+import { useHover as q } from "../../hooks/useHover.js";
+import { useSticky as B } from "../../hooks/useSticky.js";
+import { useUuid as F } from "../../hooks/useUuid.js";
+import { mergeRefs as G } from "../../utils/refs.js";
+import { isElementInViewport as K } from "../../utils/viewport.js";
+import Q from "../Icons/ChevronDown.js";
+import X from "../Icons/ChevronUp.js";
+import { renderListHeader as Y } from "../ListHeader/ListHeader.js";
 import n from "./styles.module.scss";
-const H = i.forwardRef((d, y) => {
+const W = i.forwardRef((d, g) => {
   const {
-    id: m,
-    children: _,
-    padding: h = !0,
-    color: L = "neutral",
-    className: N = "",
-    icon: w,
+    id: x,
+    children: y,
+    padding: _ = !0,
+    color: h = "neutral",
+    className: L = "",
+    icon: I,
     large: l = !1,
     title: E,
-    titleHtmlMarkup: I = "span",
-    expanded: $ = !1,
-    sticky: o,
-    testId: k,
-    handleExpanderClick: p,
-    onExpand: R,
-    renderChildrenWhenClosed: C,
-    variant: x = "line"
-  } = d, [r] = P($, R), f = j(null), s = j(null), { isHovered: t } = Z(s), { isOutsideWindow: e, isLeavingWindow: a, offsetHeight: c, contentWidth: b } = q(f, s), u = o && r && e, T = typeof E == "object", z = g(N, {
-    [n["expander-list__item--" + x]]: x,
-    [n["expander-list__item--jsx"]]: T
-  }), D = g(n["expander-list-link"], n[`expander-list-link--${L}`], {
-    [n["expander-list-link--fill"]]: x === "fill",
+    titleHtmlMarkup: N = "span",
+    expanded: w = !1,
+    sticky: $,
+    testId: o,
+    handleExpanderClick: k,
+    onExpand: p,
+    renderChildrenWhenClosed: R,
+    variant: c = "line",
+    zIndex: H
+  } = d, [r] = Z(w, p), f = z(null), s = z(null), { isHovered: t } = q(s), { isOutsideWindow: e, isLeavingWindow: a, offsetHeight: m, contentWidth: T } = B(f, s), u = $ && r && e, j = typeof E == "object", D = C(L, {
+    [n["expander-list__item--" + c]]: c,
+    [n["expander-list__item--jsx"]]: j
+  }), J = C(n["expander-list-link"], n[`expander-list-link--${h}`], {
+    [n["expander-list-link--fill"]]: c === "fill",
     [n["expander-list-link--closed"]]: !r,
     [n["expander-list-link--large"]]: l,
-    [n["expander-list-link--jsx"]]: T,
+    [n["expander-list-link--jsx"]]: j,
     [n["expander-list-link--sticky"]]: u && !a,
     [n["expander-list-link--absolute"]]: u && a
-  }), J = () => {
-    if (!C && !r)
+  }), M = () => {
+    if (!R && !r)
       return null;
-    const M = g(
+    const O = C(
       n["expander-list-link__main-content"],
       r && n["expander-list-link__main-content--expanded"],
-      h ? n["expander-list-link__main-content--padding"] : ""
+      _ ? n["expander-list-link__main-content--padding"] : ""
     );
-    return /* @__PURE__ */ i.createElement("div", { className: M }, _);
+    return /* @__PURE__ */ i.createElement("div", { className: O }, y);
   };
   return /* @__PURE__ */ i.createElement(
     "li",
     {
-      className: z,
-      ref: F([y, f]),
-      style: { paddingTop: u && c ? `${c}px` : void 0 }
+      className: D,
+      ref: G([g, f]),
+      style: { paddingTop: u && m ? `${m}px` : void 0 }
     },
     /* @__PURE__ */ i.createElement(
       "button",
       {
         type: "button",
-        id: m,
-        onClick: p,
-        "data-testid": k,
+        id: x,
+        onClick: k,
+        "data-testid": o,
         "data-analyticsid": U.ExpanderListExpander,
-        className: D,
+        className: J,
         ref: s,
         "aria-expanded": r,
         style: {
-          zIndex: t || u ? O.ExpanderTrigger : void 0,
-          width: u && b ? `${b}px` : void 0
+          zIndex: t || u ? H : void 0,
+          width: u && T ? `${T}px` : void 0
         }
       },
-      X(E, I, t, l ? "large" : "medium", r ? Q : K, w)
+      Y(E, N, t, l ? "large" : "medium", r ? X : Q, I)
     ),
-    J()
+    M()
   );
-}), v = (d) => i.isValidElement(d) && d.type === H, W = i.forwardRef((d, y) => {
+}), v = (d) => i.isValidElement(d) && d.type === W, b = i.forwardRef((d, g) => {
   const {
-    children: m,
-    childPadding: _ = !0,
-    large: h,
-    renderChildrenWhenClosed: L = !1,
-    color: N,
-    className: w = "",
+    children: x,
+    childPadding: y = !0,
+    large: _,
+    renderChildrenWhenClosed: h = !1,
+    color: L,
+    className: I = "",
     accordion: l = !1,
     sticky: E = !1,
-    testId: I,
-    variant: $
-  } = d, [o, k] = A(), [p, R] = A(), C = B(), x = g(n["expander-list"], w);
+    testId: N,
+    variant: w,
+    zIndex: $ = P.ExpanderTrigger
+  } = d, [o, k] = A(), [p, R] = A(), c = F(), H = C(n["expander-list"], I);
   function r(s, t) {
     k((e) => l ? { [t]: !(e != null && e[t]) } : { ...e, [t]: !(e != null && e[t]) }), R(s.currentTarget);
   }
-  const f = (s) => `${C}-${s}`;
+  const f = (s) => `${c}-${s}`;
   return V(() => {
-    l && p && !G(p) && p.scrollIntoView();
+    l && p && !K(p) && p.scrollIntoView();
   }, [l, p]), V(() => {
     var t;
-    const s = (t = i.Children.map(m, (e) => {
+    const s = (t = i.Children.map(x, (e) => {
       if (v(e))
         return e;
-    })) == null ? void 0 : t.reduce((e, a, c) => (typeof a.props.expanded < "u" && (e[f(c)] = a.props.expanded), e), {});
+    })) == null ? void 0 : t.reduce((e, a, m) => (typeof a.props.expanded < "u" && (e[f(m)] = a.props.expanded), e), {});
     k({ ...o, ...s });
-  }, [m]), /* @__PURE__ */ i.createElement("ul", { className: x, ref: y, "data-testid": I, "data-analyticsid": U.ExpanderList }, i.Children.map(m, (s, t) => {
+  }, [x]), /* @__PURE__ */ i.createElement("ul", { className: H, ref: g, "data-testid": N, "data-analyticsid": U.ExpanderList }, i.Children.map(x, (s, t) => {
     if (v(s)) {
       const e = f(t), a = o == null ? void 0 : o[e];
       return i.cloneElement(s, {
         id: e,
         key: t,
         expanded: a,
-        padding: _,
-        color: N,
-        large: h,
+        padding: y,
+        color: L,
+        large: _,
         sticky: E,
         "aria-expanded": a,
         className: n["expander-list__item"],
-        handleExpanderClick: (c) => r(c, `${C}-${t}`),
-        renderChildrenWhenClosed: L,
-        variant: $
+        handleExpanderClick: (m) => r(m, `${c}-${t}`),
+        renderChildrenWhenClosed: h,
+        variant: w,
+        zIndex: $
       });
     }
     return s;
   }));
 });
-W.displayName = "ExpanderList";
-W.Expander = H;
-H.displayName = "ExpanderList.Expander";
-const ce = W;
+b.displayName = "ExpanderList";
+b.Expander = W;
+W.displayName = "ExpanderList.Expander";
+const me = b;
 export {
-  W as ExpanderList,
-  ce as default
+  b as ExpanderList,
+  me as default
 };
 //# sourceMappingURL=ExpanderList.js.map

package/components/ExpanderList/ExpanderList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderList.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\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 = PaletteNames;\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';\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 link list background color on hover. */\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  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\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  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky' | '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    sticky,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\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 { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n  const isJsxTitle = typeof title === 'object';\n\n  const itemClasses = classNames(className, {\n    [expanderListStyles['expander-list__item--' + variant]]: variant,\n    [expanderListStyles['expander-list__item--jsx']]: isJsxTitle,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles['expander-list-link--fill']]: variant === 'fill',\n    [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n    [expanderListStyles['expander-list-link--jsx']]: isJsxTitle,\n    [expanderListStyles['expander-list-link--sticky']]: isSticky && !isLeavingWindow,\n    [expanderListStyles['expander-list-link--absolute']]: isSticky && isLeavingWindow,\n  });\n\n  const renderContent = () => {\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\n      className={itemClasses}\n      ref={mergeRefs([ref, expanderRef])}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\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: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n          width: isSticky && contentWidth ? `${contentWidth}px` : 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    sticky = false,\n    testId,\n    variant,\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) => `${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            sticky,\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          });\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":["Expander","React","props","ref","id","children","padding","color","className","icon","large","title","titleHtmlMarkup","expanded","sticky","testId","handleExpanderClick","onExpand","renderChildrenWhenClosed","variant","isExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","isJsxTitle","itemClasses","classNames","expanderListStyles","expanderClasses","renderContent","mainContentClasses","mergeRefs","AnalyticsId","ZIndex","renderListHeader","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","accordion","activeExpander","setActiveExpander","useState","latestExpander","setLatestExpander","uuid","useUuid","expanderListClasses","event","prevState","getExpanderId","index","useEffect","isElementInViewport","newActiveExpander","child","acc","ExpanderList$1"],"mappings":"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"}
+{"version":3,"file":"ExpanderList.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\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 = PaletteNames;\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';\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 link list background color on hover. */\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  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: 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' | 'sticky' | '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    sticky,\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 { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n  const isJsxTitle = typeof title === 'object';\n\n  const itemClasses = classNames(className, {\n    [expanderListStyles['expander-list__item--' + variant]]: variant,\n    [expanderListStyles['expander-list__item--jsx']]: isJsxTitle,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles['expander-list-link--fill']]: variant === 'fill',\n    [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n    [expanderListStyles['expander-list-link--jsx']]: isJsxTitle,\n    [expanderListStyles['expander-list-link--sticky']]: isSticky && !isLeavingWindow,\n    [expanderListStyles['expander-list-link--absolute']]: isSticky && isLeavingWindow,\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\n      className={itemClasses}\n      ref={mergeRefs([ref, expanderRef])}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\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: isHovered || isSticky ? zIndex : undefined,\n          width: isSticky && contentWidth ? `${contentWidth}px` : 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    sticky = false,\n    testId,\n    variant,\n    zIndex = ZIndex.ExpanderTrigger,\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            sticky,\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":["Expander","React","props","ref","id","children","padding","color","className","icon","large","title","titleHtmlMarkup","expanded","sticky","testId","handleExpanderClick","onExpand","renderChildrenWhenClosed","variant","zIndex","isExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","isJsxTitle","itemClasses","classNames","expanderListStyles","expanderClasses","renderContent","mainContentClasses","mergeRefs","AnalyticsId","renderListHeader","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","accordion","ZIndex","activeExpander","setActiveExpander","useState","latestExpander","setLatestExpander","uuid","useUuid","expanderListClasses","event","prevState","getExpanderId","index","useEffect","isElementInViewport","newActiveExpander","child","acc","ExpanderList$1"],"mappings":"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"}

package/components/ExpanderList/ExpanderList.stories.d.ts

@@ -0,0 +1,58 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("./ExpanderList").ExpanderListCompound;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        renderChildrenWhenClosed: false;
+        accordion: false;
+        childPadding: true;
+        color: "blueberry";
+        sticky: false;
+        large: false;
+    };
+    argTypes: {
+        renderChildrenWhenClosed: {
+            control: string;
+        };
+        accordion: {
+            control: string;
+        };
+        childPadding: {
+            control: string;
+        };
+        color: {
+            control: string;
+            options: import("../../theme/palette").PaletteNames[];
+        };
+        sticky: {
+            control: string;
+        };
+        large: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const VariantLine: Story;
+export declare const VariantOutline: Story;
+export declare const VariantFill: Story;
+export declare const WithListHeaderComp: Story;
+export declare const WithAvatarAndBadge: Story;
+export declare const MultipleOpenExpanders: Story;
+export declare const WithIcon: Story;
+export declare const WithLinkList: Story;
+export declare const AsAccordion: Story;
+export declare const WithCallback: Story;
+export declare const InteractiveChildren: Story;
+export declare const JsxTitle: Story;
+//# sourceMappingURL=ExpanderList.stories.d.ts.map

package/components/FormExample/FormExample.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FormSize } from '../../constants';
-interface FormExampleProps {
+export interface FormExampleProps {
     exampleType: FormExampleVariants;
     size?: keyof typeof FormSize;
 }

package/components/FormExample/FormExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormExample.js","sources":["../../../src/components/FormExample/FormExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useForm } from 'react-hook-form';\n\nimport { FormSize } from '../../constants';\nimport { isTest } from '../../utils/environment';\nimport Button from '../Button';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport FormLayout, { FormLayoutColumns } from '../FormLayout';\nimport Hospital from '../Icons/Hospital';\nimport Input from '../Input';\nimport Label from '../Label';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Spacer from '../Spacer';\nimport Textarea from '../Textarea';\nimport Validation from '../Validation';\n\ninterface FormExampleProps {\n  exampleType: FormExampleVariants;\n  size?: keyof typeof FormSize;\n}\n\nexport enum FormExampleVariants {\n  formgroup = 'formgroup',\n  checkbox = 'checkbox',\n  radiobutton = 'radiobutton',\n  textarea = 'textarea',\n  input = 'input',\n  select = 'select',\n}\n\nexport const FormExample = (props: FormExampleProps): JSX.Element => {\n  const { exampleType = FormExampleVariants.formgroup } = props;\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm();\n\n  const defaultDate = new Date();\n  defaultDate.setHours(0);\n  defaultDate.setMinutes(0);\n  defaultDate.setSeconds(0);\n  const minDate = new Date();\n  minDate.setDate(defaultDate.getDate() - 5);\n  minDate.setHours(6);\n  minDate.setMinutes(10);\n  minDate.setSeconds(0);\n  const maxDate = new Date();\n  maxDate.setDate(defaultDate.getDate() + 5);\n  maxDate.setHours(22);\n  maxDate.setMinutes(0);\n  maxDate.setSeconds(0);\n\n  const field1 = 'field1';\n  const field2 = 'field2';\n  const field3 = 'field3';\n  const field4 = 'field4';\n  const field5 = 'field5';\n  const field6 = 'field6';\n  const allErrors =\n    errors.field1 ||\n    errors.field2 ||\n    errors.field3 ||\n    errors.field4 ||\n    errors.field5 ||\n    errors.field6 ||\n    errors.field7 ||\n    errors.field8 ||\n    errors.field9;\n  const errorMessage = 'Du må velge et alternativ';\n  const errorMessage2 = 'Du må velge to alternativ';\n  const errorMessage3 = 'Det kan ikke legges inn mer enn 40 tegn';\n  const errorMessage4 = 'Du må skrive noe her';\n  const errorMessage5 = 'Du må velge \"Option 2\"';\n  const errorMessage6 = `Du må velge dato mellom ${minDate.toLocaleDateString('nb')} og ${maxDate.toLocaleDateString('nb')}`;\n  const errorMessage7 = `Du må skrive inn tidspunkt mellom ${minDate.toLocaleTimeString('nb', {\n    hour: '2-digit',\n    minute: '2-digit',\n  })} og ${maxDate.toLocaleTimeString('nb', {\n    hour: '2-digit',\n    minute: '2-digit',\n  })}`;\n\n  const requireTwo = (value: Array<string>): true | string => {\n    return value.length >= 2 || errorMessage2;\n  };\n  const requireSelect = (value: Array<string>): true | string => {\n    return value.toString() === 'Option 2' || errorMessage5;\n  };\n\n  const getFormExample = () => {\n    if (exampleType === FormExampleVariants.formgroup) {\n      const allCheckBoxes = [\n        <Checkbox\n          key={0}\n          inputId=\"checkbox1\"\n          label={<Label labelTexts={[{ text: 'Checkbox 1' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n        <Checkbox\n          key={1}\n          inputId=\"checkbox2\"\n          label={<Label labelTexts={[{ text: 'Checkbox 2' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n        <Checkbox\n          key={2}\n          inputId=\"checkbox3\"\n          label={<Label labelTexts={[{ text: 'Checkbox 3' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n      ];\n\n      return [\n        <FormGroup\n          key={0}\n          title={'Gruppe tittel'}\n          legend={'Velg minst en'}\n          error={errors.field1 ? (errors.field1.message as string) : undefined}\n          size={props.size}\n        >\n          <FormLayout maxColumns={FormLayoutColumns.two}>\n            {allCheckBoxes.map(check => {\n              return check;\n            })}\n          </FormLayout>\n        </FormGroup>,\n        <FormGroup key={1} legend={'Velg minst to'} error={errors.field2 ? (errors.field2.message as string) : undefined} size={props.size}>\n          <Checkbox\n            inputId=\"checkbox4\"\n            label={<Label labelTexts={[{ text: 'Checkbox 4' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n          <Checkbox\n            inputId=\"checkbox5\"\n            label={<Label labelTexts={[{ text: 'Checkbox 5' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n          <Checkbox\n            inputId=\"checkbox6\"\n            label={<Label labelTexts={[{ text: 'Checkbox 6' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n        </FormGroup>,\n        <FormGroup key={2} legend={'Velg en'} error={errors.field3 ? (errors.field3.message as string) : undefined} size={props.size}>\n          <RadioButton\n            inputId=\"radiobutton1\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 1' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n          <RadioButton\n            inputId=\"radiobutton2\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 2' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n          <RadioButton\n            inputId=\"radiobutton3\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 3' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n        </FormGroup>,\n        <FormGroup key={3} error={errors.field4 ? (errors.field4.message as string) : undefined}>\n          <Textarea\n            defaultValue={`Dette er en test \\n\\n Hello \\n\\n test \\n\\n test test`}\n            grow\n            maxCharacters={40}\n            minRows={5}\n            label={<Label labelTexts={[{ text: 'Skriv din historie her', type: 'semibold' }]} />}\n            textareaId=\"textarea1\"\n            {...register(field4, { maxLength: { value: 40, message: errorMessage3 } })}\n          />\n        </FormGroup>,\n        <FormGroup key={4} size={props.size} error={errors.field5 ? (errors.field5.message as string) : undefined}>\n          <Input\n            label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n            placeholder={'Skriv noe!'}\n            icon={Hospital}\n            {...register(field5, { required: errorMessage4 })}\n          />\n        </FormGroup>,\n        <FormGroup key={5} size={props.size} error={errors.field6 ? (errors.field6.message as string) : undefined}>\n          <Select\n            label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n            {...register(field6, { validate: requireSelect })}\n          >\n            <option value={'Option 1'}>{'Option 1'}</option>\n            <option value={'Option 2'}>{'Option 2'}</option>\n            <option value={'Option 3'}>{'Option 3'}</option>\n          </Select>\n        </FormGroup>,\n      ];\n    } else if (exampleType === FormExampleVariants.checkbox) {\n      return (\n        <Checkbox\n          inputId=\"checkbox1\"\n          label={<Label labelTexts={[{ text: 'Checkbox 1' }]} />}\n          errorText={errors.field1 ? (errors.field1.message as string) : undefined}\n          size={props.size}\n          {...register(field1, { required: errorMessage })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.radiobutton) {\n      return (\n        <RadioButton\n          inputId=\"radiobutton1\"\n          label={<Label labelTexts={[{ text: 'Radiobutton 1' }]} />}\n          errorText={errors.field3 ? (errors.field3.message as string) : undefined}\n          size={props.size}\n          {...register(field3, { required: errorMessage })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.textarea) {\n      return (\n        <Textarea\n          defaultValue={`Dette er min historie \\n\\n Hello \\n\\n test`}\n          grow\n          maxCharacters={40}\n          minRows={5}\n          errorText={errors.field4 ? (errors.field4.message as string) : undefined}\n          label={<Label labelTexts={[{ text: 'Skriv din historie her', type: 'semibold' }]} />}\n          textareaId=\"textarea1\"\n          {...register(field4, { maxLength: { value: 40, message: errorMessage3 } })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.input) {\n      return (\n        <Input\n          inputId={'input1'}\n          label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n          placeholder={'Skriv noe!'}\n          errorText={errors.field5 ? (errors.field5.message as string) : undefined}\n          icon={Hospital}\n          {...register(field5, { required: errorMessage4 })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.select) {\n      return (\n        <Select\n          errorText={errors.field6 ? (errors.field6.message as string) : undefined}\n          label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n          {...register(field6, { validate: requireSelect })}\n        >\n          <option value={'Option 1'}>{'Option 1'}</option>\n          <option value={'Option 2'}>{'Option 2'}</option>\n          <option value={'Option 3'}>{'Option 3'}</option>\n        </Select>\n      );\n    }\n  };\n\n  return (\n    <form\n      noValidate\n      onSubmit={handleSubmit(data => {\n        // eslint-disable-next-line no-console\n        !isTest() && console.log(data);\n      })}\n    >\n      <Validation size={props.size} errorSummary={allErrors ? 'Sjekk at alt er riktig utfylt' : undefined}>\n        {getFormExample()}\n      </Validation>\n      <Spacer />\n      <Button type=\"submit\">{'Send inn'}</Button>\n    </form>\n  );\n};\n\nexport default FormExample;\n"],"names":["FormExampleVariants","FormExample","props","exampleType","register","handleSubmit","errors","useForm","defaultDate","minDate","maxDate","field1","field2","field3","field4","field5","field6","allErrors","errorMessage","errorMessage2","errorMessage3","errorMessage4","errorMessage5","requireTwo","value","requireSelect","getFormExample","allCheckBoxes","React","Checkbox","Label","FormGroup","FormLayout","FormLayoutColumns","check","RadioButton","Textarea","Input","Hospital","Select","data","isTest","Validation","Spacer","Button","FormExample$1"],"mappings":"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"}
+{"version":3,"file":"FormExample.js","sources":["../../../src/components/FormExample/FormExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useForm } from 'react-hook-form';\n\nimport { FormSize } from '../../constants';\nimport { isTest } from '../../utils/environment';\nimport Button from '../Button';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport FormLayout, { FormLayoutColumns } from '../FormLayout';\nimport Hospital from '../Icons/Hospital';\nimport Input from '../Input';\nimport Label from '../Label';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Spacer from '../Spacer';\nimport Textarea from '../Textarea';\nimport Validation from '../Validation';\n\nexport interface FormExampleProps {\n  exampleType: FormExampleVariants;\n  size?: keyof typeof FormSize;\n}\n\nexport enum FormExampleVariants {\n  formgroup = 'formgroup',\n  checkbox = 'checkbox',\n  radiobutton = 'radiobutton',\n  textarea = 'textarea',\n  input = 'input',\n  select = 'select',\n}\n\nexport const FormExample = (props: FormExampleProps): JSX.Element => {\n  const { exampleType = FormExampleVariants.formgroup } = props;\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm();\n\n  const defaultDate = new Date();\n  defaultDate.setHours(0);\n  defaultDate.setMinutes(0);\n  defaultDate.setSeconds(0);\n  const minDate = new Date();\n  minDate.setDate(defaultDate.getDate() - 5);\n  minDate.setHours(6);\n  minDate.setMinutes(10);\n  minDate.setSeconds(0);\n  const maxDate = new Date();\n  maxDate.setDate(defaultDate.getDate() + 5);\n  maxDate.setHours(22);\n  maxDate.setMinutes(0);\n  maxDate.setSeconds(0);\n\n  const field1 = 'field1';\n  const field2 = 'field2';\n  const field3 = 'field3';\n  const field4 = 'field4';\n  const field5 = 'field5';\n  const field6 = 'field6';\n  const allErrors =\n    errors.field1 ||\n    errors.field2 ||\n    errors.field3 ||\n    errors.field4 ||\n    errors.field5 ||\n    errors.field6 ||\n    errors.field7 ||\n    errors.field8 ||\n    errors.field9;\n  const errorMessage = 'Du må velge et alternativ';\n  const errorMessage2 = 'Du må velge to alternativ';\n  const errorMessage3 = 'Det kan ikke legges inn mer enn 40 tegn';\n  const errorMessage4 = 'Du må skrive noe her';\n  const errorMessage5 = 'Du må velge \"Option 2\"';\n  const errorMessage6 = `Du må velge dato mellom ${minDate.toLocaleDateString('nb')} og ${maxDate.toLocaleDateString('nb')}`;\n  const errorMessage7 = `Du må skrive inn tidspunkt mellom ${minDate.toLocaleTimeString('nb', {\n    hour: '2-digit',\n    minute: '2-digit',\n  })} og ${maxDate.toLocaleTimeString('nb', {\n    hour: '2-digit',\n    minute: '2-digit',\n  })}`;\n\n  const requireTwo = (value: Array<string>): true | string => {\n    return value.length >= 2 || errorMessage2;\n  };\n  const requireSelect = (value: Array<string>): true | string => {\n    return value.toString() === 'Option 2' || errorMessage5;\n  };\n\n  const getFormExample = () => {\n    if (exampleType === FormExampleVariants.formgroup) {\n      const allCheckBoxes = [\n        <Checkbox\n          key={0}\n          inputId=\"checkbox1\"\n          label={<Label labelTexts={[{ text: 'Checkbox 1' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n        <Checkbox\n          key={1}\n          inputId=\"checkbox2\"\n          label={<Label labelTexts={[{ text: 'Checkbox 2' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n        <Checkbox\n          key={2}\n          inputId=\"checkbox3\"\n          label={<Label labelTexts={[{ text: 'Checkbox 3' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n      ];\n\n      return [\n        <FormGroup\n          key={0}\n          title={'Gruppe tittel'}\n          legend={'Velg minst en'}\n          error={errors.field1 ? (errors.field1.message as string) : undefined}\n          size={props.size}\n        >\n          <FormLayout maxColumns={FormLayoutColumns.two}>\n            {allCheckBoxes.map(check => {\n              return check;\n            })}\n          </FormLayout>\n        </FormGroup>,\n        <FormGroup key={1} legend={'Velg minst to'} error={errors.field2 ? (errors.field2.message as string) : undefined} size={props.size}>\n          <Checkbox\n            inputId=\"checkbox4\"\n            label={<Label labelTexts={[{ text: 'Checkbox 4' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n          <Checkbox\n            inputId=\"checkbox5\"\n            label={<Label labelTexts={[{ text: 'Checkbox 5' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n          <Checkbox\n            inputId=\"checkbox6\"\n            label={<Label labelTexts={[{ text: 'Checkbox 6' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n        </FormGroup>,\n        <FormGroup key={2} legend={'Velg en'} error={errors.field3 ? (errors.field3.message as string) : undefined} size={props.size}>\n          <RadioButton\n            inputId=\"radiobutton1\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 1' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n          <RadioButton\n            inputId=\"radiobutton2\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 2' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n          <RadioButton\n            inputId=\"radiobutton3\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 3' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n        </FormGroup>,\n        <FormGroup key={3} error={errors.field4 ? (errors.field4.message as string) : undefined}>\n          <Textarea\n            defaultValue={`Dette er en test \\n\\n Hello \\n\\n test \\n\\n test test`}\n            grow\n            maxCharacters={40}\n            minRows={5}\n            label={<Label labelTexts={[{ text: 'Skriv din historie her', type: 'semibold' }]} />}\n            textareaId=\"textarea1\"\n            {...register(field4, { maxLength: { value: 40, message: errorMessage3 } })}\n          />\n        </FormGroup>,\n        <FormGroup key={4} size={props.size} error={errors.field5 ? (errors.field5.message as string) : undefined}>\n          <Input\n            label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n            placeholder={'Skriv noe!'}\n            icon={Hospital}\n            {...register(field5, { required: errorMessage4 })}\n          />\n        </FormGroup>,\n        <FormGroup key={5} size={props.size} error={errors.field6 ? (errors.field6.message as string) : undefined}>\n          <Select\n            label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n            {...register(field6, { validate: requireSelect })}\n          >\n            <option value={'Option 1'}>{'Option 1'}</option>\n            <option value={'Option 2'}>{'Option 2'}</option>\n            <option value={'Option 3'}>{'Option 3'}</option>\n          </Select>\n        </FormGroup>,\n      ];\n    } else if (exampleType === FormExampleVariants.checkbox) {\n      return (\n        <Checkbox\n          inputId=\"checkbox1\"\n          label={<Label labelTexts={[{ text: 'Checkbox 1' }]} />}\n          errorText={errors.field1 ? (errors.field1.message as string) : undefined}\n          size={props.size}\n          {...register(field1, { required: errorMessage })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.radiobutton) {\n      return (\n        <RadioButton\n          inputId=\"radiobutton1\"\n          label={<Label labelTexts={[{ text: 'Radiobutton 1' }]} />}\n          errorText={errors.field3 ? (errors.field3.message as string) : undefined}\n          size={props.size}\n          {...register(field3, { required: errorMessage })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.textarea) {\n      return (\n        <Textarea\n          defaultValue={`Dette er min historie \\n\\n Hello \\n\\n test`}\n          grow\n          maxCharacters={40}\n          minRows={5}\n          errorText={errors.field4 ? (errors.field4.message as string) : undefined}\n          label={<Label labelTexts={[{ text: 'Skriv din historie her', type: 'semibold' }]} />}\n          textareaId=\"textarea1\"\n          {...register(field4, { maxLength: { value: 40, message: errorMessage3 } })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.input) {\n      return (\n        <Input\n          inputId={'input1'}\n          label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n          placeholder={'Skriv noe!'}\n          errorText={errors.field5 ? (errors.field5.message as string) : undefined}\n          icon={Hospital}\n          {...register(field5, { required: errorMessage4 })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.select) {\n      return (\n        <Select\n          errorText={errors.field6 ? (errors.field6.message as string) : undefined}\n          label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n          {...register(field6, { validate: requireSelect })}\n        >\n          <option value={'Option 1'}>{'Option 1'}</option>\n          <option value={'Option 2'}>{'Option 2'}</option>\n          <option value={'Option 3'}>{'Option 3'}</option>\n        </Select>\n      );\n    }\n  };\n\n  return (\n    <form\n      noValidate\n      onSubmit={handleSubmit(data => {\n        // eslint-disable-next-line no-console\n        !isTest() && console.log(data);\n      })}\n    >\n      <Validation size={props.size} errorSummary={allErrors ? 'Sjekk at alt er riktig utfylt' : undefined}>\n        {getFormExample()}\n      </Validation>\n      <Spacer />\n      <Button type=\"submit\">{'Send inn'}</Button>\n    </form>\n  );\n};\n\nexport default FormExample;\n"],"names":["FormExampleVariants","FormExample","props","exampleType","register","handleSubmit","errors","useForm","defaultDate","minDate","maxDate","field1","field2","field3","field4","field5","field6","allErrors","errorMessage","errorMessage2","errorMessage3","errorMessage4","errorMessage5","requireTwo","value","requireSelect","getFormExample","allCheckBoxes","React","Checkbox","Label","FormGroup","FormLayout","FormLayoutColumns","check","RadioButton","Textarea","Input","Hospital","Select","data","isTest","Validation","Spacer","Button","FormExample$1"],"mappings":"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"}

package/components/FormGroup/FormGroup.stories.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { FormMode, FormSize } from '../../constants';
+import './formGroup.stories.scss';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./FormGroup").FormGroupProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        title: string;
+        legend: string;
+        mode: FormMode.onwhite;
+        size: FormSize.medium;
+        name: string;
+    };
+    argTypes: {
+        title: {
+            control: string;
+        };
+        legend: {
+            control: string;
+        };
+        mode: {
+            control: string;
+            options: typeof FormMode;
+        };
+        size: {
+            control: string;
+            options: typeof FormSize;
+        };
+        name: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CheckboxChildren: Story;
+export declare const RadioButtonChildren: Story;
+export declare const InputChildren: Story;
+export declare const DivTagTrue: Story;
+export declare const CustomErrorWrapperClass: Story;
+//# sourceMappingURL=FormGroup.stories.d.ts.map

package/components/FormLayout/FormLayout.stories.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { FormLayoutColumns } from './FormLayout';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./FormLayout").FormLayoutProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        maxColumns: FormLayoutColumns.three;
+        colMinWidth: number;
+    };
+    argTypes: {
+        maxColumns: {
+            control: string;
+            options: typeof FormLayoutColumns;
+        };
+        colMinWidth: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CheckboxChildren: Story;
+export declare const RadioButtonChildren: Story;
+//# sourceMappingURL=FormLayout.stories.d.ts.map

package/components/HelpBubble/HelpBubble.stories.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./HelpBubble").HelpBubbleProps & React.RefAttributes<HTMLDivElement | SVGSVGElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        controllerRef: undefined;
+        children: string;
+        showBubble: true;
+        variant: import("../PopOver").PopOverVariant.positionautomatic;
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+        showBubble: {
+            control: string;
+        };
+        variant: {
+            control: string;
+            options: typeof import("../PopOver").PopOverVariant;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Link: Story;
+export declare const Toggle: Story;
+export declare const OnText: Story;
+export declare const AsTooltip: Story;
+export declare const WithHelpQuestion: Story;
+export declare const HorizontalScroll: Story;
+export declare const CenteredOverflow: Story;
+//# sourceMappingURL=HelpBubble.stories.d.ts.map

package/components/HelpPanel/HelpPanel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { HighlightBoxSize } from '../HighlightBox';
-interface HelpPanelProps {
+export interface HelpPanelProps {
     /** What's in the box? */
     children: React.ReactNode;
     /** Changes the size. Default: medium */

package/components/HelpPanel/HelpPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpPanel.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightBox, { HighlightBoxSize } from '../HighlightBox';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\ninterface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  const helpPanelClassName = classNames(styles['help-panel'], className);\n\n  return (\n    <HighlightBox\n      className={helpPanelClassName}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightBox>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","helpPanelClassName","classNames","styles","React","HighlightBox","HandWaving","HelpPanel$1"],"mappings":";;;;;AAsBA,MAAMA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAAY;AAC5F,QAAMC,IAAqBC,EAAWC,EAAO,YAAY,GAAGP,CAAS;AAGnE,SAAAQ,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,yBAAyBE,EAAO,YAAY;AAAA,MAC5C,QAAAN;AAAA,MACA,MAAAC;AAAA,MACA,SAASQ;AAAA,MACT,OAAAN;AAAA,IAAA;AAAA,IAECD;AAAA,EAAA;AAGP,GAEAQ,IAAeZ;"}
+{"version":3,"file":"HelpPanel.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightBox, { HighlightBoxSize } from '../HighlightBox';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  const helpPanelClassName = classNames(styles['help-panel'], className);\n\n  return (\n    <HighlightBox\n      className={helpPanelClassName}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightBox>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","helpPanelClassName","classNames","styles","React","HighlightBox","HandWaving","HelpPanel$1"],"mappings":";;;;;AAsBA,MAAMA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAAY;AAC5F,QAAMC,IAAqBC,EAAWC,EAAO,YAAY,GAAGP,CAAS;AAGnE,SAAAQ,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,yBAAyBE,EAAO,YAAY;AAAA,MAC5C,QAAAN;AAAA,MACA,MAAAC;AAAA,MACA,SAASQ;AAAA,MACT,OAAAN;AAAA,IAAA;AAAA,IAECD;AAAA,EAAA;AAGP,GAEAQ,IAAeZ;"}

package/components/HelpPanel/HelpPanel.stories.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./HelpPanel").HelpPanelProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        size: "medium";
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+        size: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutTitle: Story;
+//# sourceMappingURL=HelpPanel.stories.d.ts.map

package/components/HelpQuestion/HelpQuestion.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {
+export interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {
     /**
      * Help question contents
      */