@helsenorge/designsystem-react 5.4.1 → 6.0.0-beta.10

package/components/ExpanderList/ExpanderList.js

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

package/components/ExpanderList/ExpanderList.js.map

@@ -0,0 +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  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  bottomBorder?: 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  /** Opens the first item in the list. */\n  /** @deprecated Skal fases ut til fordel for å bruke expanded-prop på første ExpanderList.Expander */\n  isOpen?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  topBorder?: 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    isOpen = false,\n    renderChildrenWhenClosed = false,\n    color,\n    className = '',\n    accordion = false,\n    topBorder = true,\n    bottomBorder = true,\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 childCount = React.Children.count(children);\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  /** Returns the class modifier top when we want to show the top border and no-bottom when we don't want to show the bottom border */\n  const getExpanderItemClass = (index: number) => {\n    return classNames(expanderListStyles['expander-list__item'], {\n      [expanderListStyles['expander-list__item--top']]: index === 0 && topBorder,\n      [expanderListStyles['expander-list__item--no-bottom']]: index === childCount - 1 && !bottomBorder,\n    });\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    if (isOpen) {\n      const id = getExpanderId(0);\n      setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) {\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    }\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          const expanderItemClass = getExpanderItemClass(index);\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: expanderItemClass,\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","isOpen","accordion","topBorder","bottomBorder","activeExpander","setActiveExpander","useState","latestExpander","setLatestExpander","uuid","useUuid","childCount","expanderListClasses","event","prevState","getExpanderItemClass","index","getExpanderId","useEffect","isElementInViewport","newActiveExpander","_a","child","acc","expanderItemClass","ExpanderList$1"],"mappings":"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"}

package/components/ExpanderList/index.js

@@ -1,2 +1,7 @@
-import r,{useRef as O,useState as U,useEffect as A}from"react";import k from"classnames";import{AnalyticsId as D,ZIndex as M}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 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{r as Y}from"../../ListHeader.js";import i from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Icon.js";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../utils/component.js";import"../../Avatar.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../Badge.js";import"../Badge/styles.module.scss";const V=r.forwardRef((l,h)=>{const{id:p,children:L,padding:I=!0,color:x="neutral",className:N="",icon:w,large:g=!1,title:a,titleHtmlMarkup:$="span",expanded:R=!1,sticky:b,testId:H,handleExpanderClick:W,onExpand:m,renderChildrenWhenClosed:f,variant:s="line"}=l,[o]=P(R,m),u=O(null),E=O(null),{isHovered:y}=Z(E),{isOutsideWindow:T,isLeavingWindow:_,offsetHeight:c,contentWidth:n}=q(u,E),e=b&&o&&T,t=typeof a=="object",d=k(N,{[i["expander-list__item--"+s]]:s,[i["expander-list__item--jsx"]]:t}),C=k(i["expander-list-link"],i[`expander-list-link--${x}`],{[i["expander-list-link--fill"]]:s==="fill",[i["expander-list-link--closed"]]:!o,[i["expander-list-link--large"]]:g,[i["expander-list-link--jsx"]]:t,[i["expander-list-link--sticky"]]:e&&!_,[i["expander-list-link--absolute"]]:e&&_}),j=()=>{if(!f&&!o)return null;const J=k(i["expander-list-link__main-content"],o&&i["expander-list-link__main-content--expanded"],I?i["expander-list-link__main-content--padding"]:"");return r.createElement("div",{className:J},L)};return r.createElement("li",{className:d,ref:G([h,u]),style:{paddingTop:e&&c?`${c}px`:void 0}},r.createElement("button",{type:"button",id:p,onClick:W,"data-testid":H,"data-analyticsid":D.ExpanderListExpander,className:C,ref:E,"aria-expanded":o,style:{zIndex:y||e?M.ExpanderTrigger:void 0,width:e&&n?`${n}px`:void 0}},Y(a,$,y,g?"large":"medium",o?X:Q,w)),j())}),z=l=>r.isValidElement(l)&&l.type===V,B=r.forwardRef((l,h)=>{const{children:p,childPadding:L=!0,large:I,isOpen:x=!1,renderChildrenWhenClosed:N=!1,color:w,className:g="",accordion:a=!1,topBorder:$=!0,bottomBorder:R=!0,sticky:b=!1,testId:H,variant:W}=l,[m,f]=U(),[s,o]=U(),u=F(),E=r.Children.count(p),y=k(i["expander-list"],g);function T(n,e){f(t=>a?{[e]:!(t!=null&&t[e])}:{...t,[e]:!(t!=null&&t[e])}),o(n.currentTarget)}const _=n=>k(i["expander-list__item"],{[i["expander-list__item--top"]]:n===0&&$,[i["expander-list__item--no-bottom"]]:n===E-1&&!R}),c=n=>`${u}-${n}`;return A(()=>{a&&s&&!K(s)&&s.scrollIntoView()},[a,s]),A(()=>{if(x){const n=c(0);f(e=>a?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[x]),A(()=>{var n;if(!x){const e=(n=r.Children.map(p,t=>{if(z(t))return t}))==null?void 0:n.reduce((t,d,C)=>(typeof d.props.expanded<"u"&&(t[c(C)]=d.props.expanded),t),{});f({...m,...e})}},[p]),r.createElement("ul",{className:y,ref:h,"data-testid":H,"data-analyticsid":D.ExpanderList},r.Children.map(p,(n,e)=>{if(z(n)){const t=c(e),d=m==null?void 0:m[t],C=_(e);return r.cloneElement(n,{id:t,key:e,expanded:d,padding:L,color:w,large:I,sticky:b,"aria-expanded":d,className:C,handleExpanderClick:j=>T(j,`${u}-${e}`),renderChildrenWhenClosed:N,variant:W})}return n}))});B.displayName="ExpanderList";B.Expander=V;V.displayName="ExpanderList.Expander";const Ue=B;export{B as ExpanderList,Ue as default};
+import t from "./ExpanderList.js";
+import { ExpanderList as p } from "./ExpanderList.js";
+export {
+  p as ExpanderList,
+  t as default
+};
 //# sourceMappingURL=index.js.map

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, 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  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  bottomBorder?: 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  /** Opens the first item in the list. */\n  /** @deprecated Skal fases ut til fordel for å bruke expanded-prop på første ExpanderList.Expander */\n  isOpen?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  topBorder?: 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    isOpen = false,\n    renderChildrenWhenClosed = false,\n    color,\n    className = '',\n    accordion = false,\n    topBorder = true,\n    bottomBorder = true,\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 childCount = React.Children.count(children);\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  /** Returns the class modifier top when we want to show the top border and no-bottom when we don't want to show the bottom border */\n  const getExpanderItemClass = (index: number) => {\n    return classNames(expanderListStyles['expander-list__item'], {\n      [expanderListStyles['expander-list__item--top']]: index === 0 && topBorder,\n      [expanderListStyles['expander-list__item--no-bottom']]: index === childCount - 1 && !bottomBorder,\n    });\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    if (isOpen) {\n      const id = getExpanderId(0);\n      setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) {\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    }\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          const expanderItemClass = getExpanderItemClass(index);\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: expanderItemClass,\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","isOpen","accordion","topBorder","bottomBorder","activeExpander","setActiveExpander","useState","latestExpander","setLatestExpander","uuid","useUuid","childCount","expanderListClasses","event","prevState","getExpanderItemClass","index","getExpanderId","useEffect","isElementInViewport","newActiveExpander","_a","child","acc","expanderItemClass","ExpanderList$1"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/FormExample/FormExample.d.ts

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

package/components/FormExample/FormExample.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormExample.d.ts","sourceRoot":"","sources":["../../../src/components/FormExample/FormExample.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAc9C,UAAU,gBAAgB;IACxB,WAAW,EAAE,mBAAmB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;CACpC;AAED,oBAAY,mBAAmB;IAC7B,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,WA+OrD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormExample.d.ts","sourceRoot":"","sources":["../../../src/components/FormExample/FormExample.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAe3C,UAAU,gBAAgB;IACxB,WAAW,EAAE,mBAAmB,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;CAC9B;AAED,oBAAY,mBAAmB;IAC7B,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,WA2OrD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/FormExample/FormExample.js

@@ -0,0 +1,249 @@
+import e from "react";
+import { useForm as R } from "react-hook-form";
+import { isTest as H } from "../../utils/environment.js";
+import $ from "../Button/Button.js";
+import a from "../Checkbox/Checkbox.js";
+import c from "../FormGroup/FormGroup.js";
+import B, { FormLayoutColumns as F } from "../FormLayout/FormLayout.js";
+import y from "../Icons/Hospital.js";
+import D from "../Input/Input.js";
+import i from "../Label/Label.js";
+import x from "../RadioButton/RadioButton.js";
+import z from "../Select/Select.js";
+import G from "../Spacer/Spacer.js";
+import I from "../Textarea/Textarea.js";
+import V from "../Validation/Validation.js";
+var j = /* @__PURE__ */ ((r) => (r.formgroup = "formgroup", r.checkbox = "checkbox", r.radiobutton = "radiobutton", r.textarea = "textarea", r.input = "input", r.select = "select", r))(j || {});
+const A = (r) => {
+  const {
+    exampleType: s = "formgroup"
+    /* formgroup */
+  } = r, {
+    register: l,
+    handleSubmit: O,
+    formState: { errors: t }
+  } = R(), u = /* @__PURE__ */ new Date();
+  u.setHours(0), u.setMinutes(0), u.setSeconds(0);
+  const m = /* @__PURE__ */ new Date();
+  m.setDate(u.getDate() - 5), m.setHours(6), m.setMinutes(10), m.setSeconds(0);
+  const d = /* @__PURE__ */ new Date();
+  d.setDate(u.getDate() + 5), d.setHours(22), d.setMinutes(0), d.setSeconds(0);
+  const b = "field1", g = "field2", f = "field3", E = "field4", k = "field5", v = "field6", C = t.field1 || t.field2 || t.field3 || t.field4 || t.field5 || t.field6 || t.field7 || t.field8 || t.field9, o = "Du må velge et alternativ", q = "Du må velge to alternativ", h = "Det kan ikke legges inn mer enn 40 tegn", T = "Du må skrive noe her", w = 'Du må velge "Option 2"';
+  `${m.toLocaleDateString("nb")}${d.toLocaleDateString("nb")}`, `${m.toLocaleTimeString("nb", {
+    hour: "2-digit",
+    minute: "2-digit"
+  })}${d.toLocaleTimeString("nb", {
+    hour: "2-digit",
+    minute: "2-digit"
+  })}`;
+  const p = (n) => n.length >= 2 || q, S = (n) => n.toString() === "Option 2" || w, L = () => {
+    if (s === "formgroup") {
+      const n = [
+        /* @__PURE__ */ e.createElement(
+          a,
+          {
+            key: 0,
+            inputId: "checkbox1",
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 1" }] }),
+            ...l(b, { required: o })
+          }
+        ),
+        /* @__PURE__ */ e.createElement(
+          a,
+          {
+            key: 1,
+            inputId: "checkbox2",
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 2" }] }),
+            ...l(b, { required: o })
+          }
+        ),
+        /* @__PURE__ */ e.createElement(
+          a,
+          {
+            key: 2,
+            inputId: "checkbox3",
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 3" }] }),
+            ...l(b, { required: o })
+          }
+        )
+      ];
+      return [
+        /* @__PURE__ */ e.createElement(
+          c,
+          {
+            key: 0,
+            title: "Gruppe tittel",
+            legend: "Velg minst en",
+            error: t.field1 ? t.field1.message : void 0,
+            size: r.size
+          },
+          /* @__PURE__ */ e.createElement(B, { maxColumns: F.two }, n.map((M) => M))
+        ),
+        /* @__PURE__ */ e.createElement(c, { key: 1, legend: "Velg minst to", error: t.field2 ? t.field2.message : void 0, size: r.size }, /* @__PURE__ */ e.createElement(
+          a,
+          {
+            inputId: "checkbox4",
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 4" }] }),
+            ...l(g, { validate: p })
+          }
+        ), /* @__PURE__ */ e.createElement(
+          a,
+          {
+            inputId: "checkbox5",
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 5" }] }),
+            ...l(g, { validate: p })
+          }
+        ), /* @__PURE__ */ e.createElement(
+          a,
+          {
+            inputId: "checkbox6",
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 6" }] }),
+            ...l(g, { validate: p })
+          }
+        )),
+        /* @__PURE__ */ e.createElement(c, { key: 2, legend: "Velg en", error: t.field3 ? t.field3.message : void 0, size: r.size }, /* @__PURE__ */ e.createElement(
+          x,
+          {
+            inputId: "radiobutton1",
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Radiobutton 1" }] }),
+            ...l(f, { required: o })
+          }
+        ), /* @__PURE__ */ e.createElement(
+          x,
+          {
+            inputId: "radiobutton2",
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Radiobutton 2" }] }),
+            ...l(f, { required: o })
+          }
+        ), /* @__PURE__ */ e.createElement(
+          x,
+          {
+            inputId: "radiobutton3",
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Radiobutton 3" }] }),
+            ...l(f, { required: o })
+          }
+        )),
+        /* @__PURE__ */ e.createElement(c, { key: 3, error: t.field4 ? t.field4.message : void 0 }, /* @__PURE__ */ e.createElement(
+          I,
+          {
+            defaultValue: `Dette er en test 
+
+ Hello 
+
+ test 
+
+ test test`,
+            grow: !0,
+            maxCharacters: 40,
+            minRows: 5,
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv din historie her", type: "semibold" }] }),
+            textareaId: "textarea1",
+            ...l(E, { maxLength: { value: 40, message: h } })
+          }
+        )),
+        /* @__PURE__ */ e.createElement(c, { key: 4, size: r.size, error: t.field5 ? t.field5.message : void 0 }, /* @__PURE__ */ e.createElement(
+          D,
+          {
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv inn din tekst", type: "semibold" }] }),
+            placeholder: "Skriv noe!",
+            icon: y,
+            ...l(k, { required: T })
+          }
+        )),
+        /* @__PURE__ */ e.createElement(c, { key: 5, size: r.size, error: t.field6 ? t.field6.message : void 0 }, /* @__PURE__ */ e.createElement(
+          z,
+          {
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv inn din tekst", type: "semibold" }] }),
+            ...l(v, { validate: S })
+          },
+          /* @__PURE__ */ e.createElement("option", { value: "Option 1" }, "Option 1"),
+          /* @__PURE__ */ e.createElement("option", { value: "Option 2" }, "Option 2"),
+          /* @__PURE__ */ e.createElement("option", { value: "Option 3" }, "Option 3")
+        ))
+      ];
+    } else {
+      if (s === "checkbox")
+        return /* @__PURE__ */ e.createElement(
+          a,
+          {
+            inputId: "checkbox1",
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 1" }] }),
+            errorText: t.field1 ? t.field1.message : void 0,
+            size: r.size,
+            ...l(b, { required: o })
+          }
+        );
+      if (s === "radiobutton")
+        return /* @__PURE__ */ e.createElement(
+          x,
+          {
+            inputId: "radiobutton1",
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Radiobutton 1" }] }),
+            errorText: t.field3 ? t.field3.message : void 0,
+            size: r.size,
+            ...l(f, { required: o })
+          }
+        );
+      if (s === "textarea")
+        return /* @__PURE__ */ e.createElement(
+          I,
+          {
+            defaultValue: `Dette er min historie 
+
+ Hello 
+
+ test`,
+            grow: !0,
+            maxCharacters: 40,
+            minRows: 5,
+            errorText: t.field4 ? t.field4.message : void 0,
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv din historie her", type: "semibold" }] }),
+            textareaId: "textarea1",
+            ...l(E, { maxLength: { value: 40, message: h } })
+          }
+        );
+      if (s === "input")
+        return /* @__PURE__ */ e.createElement(
+          D,
+          {
+            inputId: "input1",
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv inn din tekst", type: "semibold" }] }),
+            placeholder: "Skriv noe!",
+            errorText: t.field5 ? t.field5.message : void 0,
+            icon: y,
+            ...l(k, { required: T })
+          }
+        );
+      if (s === "select")
+        return /* @__PURE__ */ e.createElement(
+          z,
+          {
+            errorText: t.field6 ? t.field6.message : void 0,
+            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv inn din tekst", type: "semibold" }] }),
+            ...l(v, { validate: S })
+          },
+          /* @__PURE__ */ e.createElement("option", { value: "Option 1" }, "Option 1"),
+          /* @__PURE__ */ e.createElement("option", { value: "Option 2" }, "Option 2"),
+          /* @__PURE__ */ e.createElement("option", { value: "Option 3" }, "Option 3")
+        );
+    }
+  };
+  return /* @__PURE__ */ e.createElement(
+    "form",
+    {
+      noValidate: !0,
+      onSubmit: O((n) => {
+        !H() && console.log(n);
+      })
+    },
+    /* @__PURE__ */ e.createElement(V, { size: r.size, errorSummary: C ? "Sjekk at alt er riktig utfylt" : void 0 }, L()),
+    /* @__PURE__ */ e.createElement(G, null),
+    /* @__PURE__ */ e.createElement($, { type: "submit" }, "Send inn")
+  );
+}, ie = A;
+export {
+  A as FormExample,
+  j as FormExampleVariants,
+  ie as default
+};
+//# sourceMappingURL=FormExample.js.map

package/components/FormExample/FormExample.js.map

@@ -0,0 +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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"}