@helsenorge/designsystem-react 7.3.1 → 7.4.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [7.3.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.3.0&targetVersion=GTv7.3.1) (2024-04-22)
+
+### Bug Fixes
+
+- arrow får egen klasse for å toggle visibility
+  ([52525a4](https://github.com/helsenorge/designsystem/commit/52525a4d45b6b2e97ac553922fa1ec41032cc778)), closes
+  [#323182](https://github.com/helsenorge/designsystem/issues/323182)
+- wrapperclassname fikser type ([fe42184](https://github.com/helsenorge/designsystem/commit/fe42184cc3bbffbcdc106def06a1a283f70bb32a))
+
 ## [7.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.2.1&targetVersion=GTv7.3.0) (2024-04-22)
 
 ### Features

package/components/Checkbox/Checkbox.js

@@ -4,11 +4,12 @@ import { FormMode as i, FormSize as J, AnalyticsId as K, IconSize as Q } from ".
 import { usePseudoClasses as V } from "../../hooks/usePseudoClasses.js";
 import { useUuid as Y } from "../../hooks/useUuid.js";
 import { getColor as h } from "../../theme/currys/color.js";
-import { isMutableRefObject as Z, mergeRefs as ee } from "../../utils/refs.js";
-import { uuid as ce } from "../../utils/uuid.js";
-import { Icon as re } from "../Icon/Icon.js";
-import oe from "../Icons/Check.js";
-import { getLabelText as ae, renderLabelAsParent as le } from "../Label/Label.js";
+import { getAriaDescribedBy as Z } from "../../utils/accessibility.js";
+import { isMutableRefObject as ee, mergeRefs as ce } from "../../utils/refs.js";
+import { uuid as re } from "../../utils/uuid.js";
+import { Icon as oe } from "../Icon/Icon.js";
+import ae from "../Icons/Check.js";
+import { getLabelText as le, renderLabelAsParent as ne } from "../Label/Label.js";
 import e from "../Checkbox/styles.module.scss";
 const I = l.forwardRef((x, d) => {
   const {
@@ -16,22 +17,22 @@ const I = l.forwardRef((x, d) => {
     checked: k = !1,
     disabled: a,
     label: m,
-    inputId: p = ce(),
+    inputId: p = re(),
     mode: n = i.onwhite,
     name: E = p,
     size: S,
     errorText: s,
     error: g = !!s,
     errorTextId: R,
-    value: T = ae(m),
+    value: T = le(m),
     testId: z,
     required: F,
     onChange: u,
     ...L
-  } = x, [r, w] = X(k), f = Y(R), C = n === i.onwhite, y = n === i.ongrey, v = n === i.onblueberry, o = g || n === i.oninvalid, b = n === i.ondark, c = S === J.large, { refObject: j, isFocused: W } = V(Z(d) ? d : null), A = ee([d, j]), M = t(e["checkbox-wrapper"], {
+  } = x, [r, w] = X(k), f = Y(R), C = n === i.onwhite, y = n === i.ongrey, v = n === i.onblueberry, o = g || n === i.oninvalid, b = n === i.ondark, c = S === J.large, { refObject: A, isFocused: W } = V(ee(d) ? d : null), j = ce([d, A]), B = t(e["checkbox-wrapper"], {
     [e["checkbox-wrapper--with-error"]]: s,
     [e["checkbox-wrapper--large"]]: c
-  }), O = t(e["checkbox-label"], {
+  }), D = t(e["checkbox-label"], {
     [e["checkbox-label--disabled"]]: a,
     [e["checkbox-label--on-dark"]]: b,
     [e["checkbox-label--large"]]: c,
@@ -42,7 +43,7 @@ const I = l.forwardRef((x, d) => {
     [e["checkbox-label__large--on-blueberry"]]: c && v,
     [e["checkbox-label__large--on-invalid"]]: c && o,
     [e["checkbox-label__large--disabled"]]: c && a
-  }), P = t(e.checkbox, N), U = t(e["checkbox__icon-wrapper"], {
+  }), M = t(e.checkbox, N), O = t(e["checkbox__icon-wrapper"], {
     [e["checkbox__icon-wrapper--on-white"]]: C,
     [e["checkbox__icon-wrapper--on-grey"]]: y,
     [e["checkbox__icon-wrapper--on-invalid"]]: o,
@@ -59,51 +60,51 @@ const I = l.forwardRef((x, d) => {
     [e["checkbox__icon-wrapper__large--disabled"]]: a && c && r,
     [e["checkbox__icon-wrapper__large--checked--invalid"]]: c && r && o,
     [e["checkbox__icon-wrapper__large--checked--disabled"]]: a && c && r
-  }), q = t(e["checkbox-label__text"], {
+  }), P = t(e["checkbox-label__text"], {
     [e["checkbox-label__text__large--checked"]]: c && r,
     [e["checkbox-label__text__large--invalid"]]: c && r && o,
     [e["checkbox-label__text--on-dark"]]: b,
     [e["checkbox-label__text--disabled"]]: a
-  }), B = t(e["checkbox-errors"]);
+  }), U = t(e["checkbox-errors"]);
   let _ = h("white");
   (b || c && r) && (_ = h("blueberry", 900)), o && c && r && (_ = h("white")), a && (_ = h("neutral", 400)), $(() => {
     w(k);
   }, [k]);
-  const D = (H) => {
+  const q = (H) => {
     u && u(H), w(!r);
   }, G = () => /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
     "input",
     {
       id: p,
       name: E,
-      className: P,
+      className: M,
       type: "checkbox",
       checked: r,
       disabled: a,
       value: T,
-      ref: A,
-      "aria-describedby": [x["aria-describedby"] || "", f].join(" "),
+      ref: j,
+      "aria-describedby": Z(x, f),
       "aria-invalid": g,
       required: F,
-      onChange: D,
+      onChange: q,
       ...L
     }
-  ), /* @__PURE__ */ l.createElement("span", { className: U }, r && /* @__PURE__ */ l.createElement(re, { color: _, className: e.checkbox__icon, svgIcon: oe, size: Q.XSmall })));
-  return /* @__PURE__ */ l.createElement("div", { "data-testid": z, "data-analyticsid": K.Checkbox, className: M }, s && /* @__PURE__ */ l.createElement("p", { className: B, id: f }, s), le(
+  ), /* @__PURE__ */ l.createElement("span", { className: O }, r && /* @__PURE__ */ l.createElement(oe, { color: _, className: e.checkbox__icon, svgIcon: ae, size: Q.XSmall })));
+  return /* @__PURE__ */ l.createElement("div", { "data-testid": z, "data-analyticsid": K.Checkbox, className: B }, s && /* @__PURE__ */ l.createElement("p", { className: U, id: f }, s), ne(
     m,
     G(),
     p,
     n,
-    O,
-    q,
+    D,
+    P,
     e["checkbox-sublabel-wrapper"],
     c
   ));
 });
 I.displayName = "Checkbox";
-const ge = I;
+const we = I;
 export {
   I as Checkbox,
-  ge as default
+  we as default
 };
 //# sourceMappingURL=Checkbox.js.map

package/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextUuid = useUuid(errorTextId);\n  const onWhite = mode === FormMode.onwhite;\n  const onGrey = mode === FormMode.ongrey;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onInvalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n  const errorStyles = classNames(checkboxStyles['checkbox-errors']);\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 400);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={[props['aria-describedby'] || '', errorTextUuid].join(' ')}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n      {errorText && (\n        <p className={errorStyles} id={errorTextUuid}>\n          {errorText}\n        </p>\n      )}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        checkboxLabelClasses,\n        labelTextClasses,\n        checkboxStyles['checkbox-sublabel-wrapper'],\n        large\n      )}\n    </div>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","onChange","rest","isChecked","setIsChecked","useState","errorTextUuid","useUuid","onWhite","onGrey","onBlueberry","onInvalid","onDark","large","FormSize","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","labelTextClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","getLabelContent","Icon","Check","IconSize","AnalyticsId","renderLabelAsParent","Checkbox$1"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextUuid = useUuid(errorTextId);\n  const onWhite = mode === FormMode.onwhite;\n  const onGrey = mode === FormMode.ongrey;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onInvalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n  const errorStyles = classNames(checkboxStyles['checkbox-errors']);\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 400);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n      {errorText && (\n        <p className={errorStyles} id={errorTextUuid}>\n          {errorText}\n        </p>\n      )}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        checkboxLabelClasses,\n        labelTextClasses,\n        checkboxStyles['checkbox-sublabel-wrapper'],\n        large\n      )}\n    </div>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","onChange","rest","isChecked","setIsChecked","useState","errorTextUuid","useUuid","onWhite","onGrey","onBlueberry","onInvalid","onDark","large","FormSize","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","labelTextClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","getLabelContent","getAriaDescribedBy","Icon","Check","IconSize","AnalyticsId","renderLabelAsParent","Checkbox$1"],"mappings":"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"}

package/components/HighlightBox/styles.module.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
 @import '../../scss/spacers';
 @import '../../scss/breakpoints';
-@import '../../scss/palette';
 @import '../../scss/grid';
 @import '../../scss/screen-reader';
+@import '../../scss/supernova/styles/colors';
 
 @mixin content-wrapper-with-icon-flex {
   display: flex;
@@ -33,7 +33,8 @@
     @each $color in $colors {
       &#{$box}--#{$color} {
         #{$box}__content-wrapper {
-          background-color: map.get($palette-map, #{$color}50);
+          background-color: var(--color-base-background-#{$color});
+          border: 1px solid var(--color-base-border-#{$color});
         }
       }
     }
@@ -41,7 +42,8 @@
     // Hvit har sin egen regel siden den ikke har valører
     &#{$box}--white {
       #{$box}__content-wrapper {
-        background-color: $white;
+        background-color: var(--color-base-background-white);
+        border: 1px solid var(--color-base-border-onlight-subtle);
       }
     }
   }
@@ -52,14 +54,14 @@
     @each $color in $colors {
       &#{$box}--#{$color} {
         @include media-breakpoint-down(xs) {
-          background-color: map.get($palette-map, #{$color}50);
+          background-color: var(--color-base-background-#{$color});
         }
       }
     }
 
     &#{$box}--white {
       @include media-breakpoint-down(xs) {
-        background-color: $white;
+        background-color: var(--color-base-background-white);
       }
     }
     #{$box}__content-wrapper {
@@ -97,11 +99,13 @@
 
     @each $color in $colors {
       &#{$box}--#{$color} {
-        background-color: map.get($palette-map, #{$color}50);
+        background-color: var(--color-base-background-#{$color});
+        border: 1px solid var(--color-base-border-#{$color});
       }
     }
     &#{$box}--white {
-      background-color: $white;
+      background-color: var(--color-base-background-white);
+      border: 1px solid var(--color-base-border-onlight-subtle);
     }
   }
 

package/components/Input/Input.js

@@ -1,17 +1,18 @@
-import r, { useRef as K, useState as D, useEffect as Ce } from "react";
+import r, { useRef as D, useState as K, useEffect as Ce } from "react";
 import v from "classnames";
-import { FormMode as l, FormSize as _e, IconSize as U, AnalyticsId as ve, AVERAGE_CHARACTER_WIDTH_PX as ye } from "../../constants.js";
+import { FormMode as l, FormSize as _e, IconSize as B, AnalyticsId as ve, AVERAGE_CHARACTER_WIDTH_PX as ye } from "../../constants.js";
 import { useBreakpoint as Ee, Breakpoint as ke } from "../../hooks/useBreakpoint.js";
-import { useUuid as B } from "../../hooks/useUuid.js";
+import { useUuid as U } from "../../hooks/useUuid.js";
 import { getColor as F } from "../../theme/currys/color.js";
-import we from "../ErrorWrapper/ErrorWrapper.js";
-import { Icon as Ie } from "../Icon/Icon.js";
-import { renderLabel as Ne } from "../Label/Label.js";
-import Re from "../LazyIcon/LazyIcon.js";
-import We from "../MaxCharacters/MaxCharacters.js";
+import { getAriaDescribedBy as we } from "../../utils/accessibility.js";
+import Ie from "../ErrorWrapper/ErrorWrapper.js";
+import { Icon as Ne } from "../Icon/Icon.js";
+import { renderLabel as Re } from "../Label/Label.js";
+import We from "../LazyIcon/LazyIcon.js";
+import Se from "../MaxCharacters/MaxCharacters.js";
 import t from "../Input/styles.module.scss";
-var Se = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.search = "search", e.tel = "tel", e.url = "url", e.date = "date", e.time = "time", e))(Se || {});
-const ze = (e, s, p) => {
+var ze = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.search = "search", e.tel = "tel", e.url = "url", e.date = "date", e.time = "time", e))(ze || {});
+const Ae = (e, s, p) => {
   const i = s ? "1.5rem" : "2rem", f = s ? `${p}px` : "0px";
   return `calc(${e * ye}px + ${i} + ${f} + 4px)`;
 }, L = r.forwardRef((e, s) => {
@@ -29,10 +30,10 @@ const ze = (e, s, p) => {
     mode: c = l.onwhite,
     size: X,
     baseIncrementValue: y,
-    label: j,
-    error: q,
+    label: q,
+    error: G,
     errorText: E,
-    errorTextId: G,
+    errorTextId: j,
     testId: J,
     disabled: u,
     readOnly: Q,
@@ -47,11 +48,11 @@ const ze = (e, s, p) => {
     maxCharacters: d,
     maxText: ne,
     ...re
-  } = e, ae = Ee(), m = K(null), N = B(H), [R, W] = D(i || ""), [oe, ie] = D(void 0), g = K(!1), S = B(G), z = /^[0-9]$/;
+  } = e, ae = Ee(), m = D(null), N = U(H), [R, W] = K(i || ""), [oe, ie] = K(void 0), g = D(!1), S = U(j), z = /^[0-9]$/;
   Ce(() => {
     W(i || "");
   }, [i]);
-  const ce = c === l.ondark, le = c === l.onblueberry, se = !!d && R.toString().length > d, x = c === l.oninvalid || !!E || !!q || se, C = X === _e.large, ue = P && c !== l.ondark && !x, de = v(t["input-wrapper"], p), me = v(t["input-container"], {
+  const ce = c === l.ondark, le = c === l.onblueberry, se = !!d && R.toString().length > d, x = c === l.oninvalid || !!E || !!G || se, C = X === _e.large, ue = P && c !== l.ondark && !x, de = v(t["input-wrapper"], p), me = v(t["input-container"], {
     [t["input-container--transparent"]]: ue,
     [t["input-container--on-blueberry"]]: le,
     [t["input-container--on-dark"]]: ce,
@@ -62,9 +63,9 @@ const ze = (e, s, p) => {
   }), pe = v(t["input-container__input"], {
     [t["input-container__input--large"]]: C,
     [t["input-container__input--disabled"]]: u
-  }), V = u ? F("neutral", 700) : F("black"), _ = ae === ke.xs || !C ? U.XSmall : U.Small, $ = () => {
+  }), A = u ? F("neutral", 700) : F("black"), _ = ae === ke.xs || !C ? B.XSmall : B.Small, V = () => {
     if (a)
-      return typeof a == "string" ? /* @__PURE__ */ r.createElement(Re, { className: t["input-container__input__icon"], color: V, size: _, iconName: a }) : /* @__PURE__ */ r.createElement(Ie, { className: t["input-container__input__icon"], color: V, size: _, svgIcon: a });
+      return typeof a == "string" ? /* @__PURE__ */ r.createElement(We, { className: t["input-container__input__icon"], color: A, size: _, iconName: a }) : /* @__PURE__ */ r.createElement(Ne, { className: t["input-container__input__icon"], color: A, size: _, svgIcon: a });
   }, fe = (n) => {
     if (m && m.current && a) {
       const o = b ? 0 : 1;
@@ -82,8 +83,8 @@ const ze = (e, s, p) => {
     z.test(n.key) && (g.current = !0), I && I(n);
   }, xe = (n) => {
     z.test(n.key) && (g.current = !1);
-  }, A = k ? ze(k, !!a, _) : void 0;
-  return /* @__PURE__ */ r.createElement(we, { errorText: E, errorTextId: S }, /* @__PURE__ */ r.createElement("div", { "data-testid": J, "data-analyticsid": ve.Input, className: de, ref: O }, Ne(j, N, c), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper"] }, /* @__PURE__ */ r.createElement("div", { onClick: fe, ref: m, className: me, style: { maxWidth: A } }, !b && $(), /* @__PURE__ */ r.createElement(
+  }, $ = k ? Ae(k, !!a, _) : void 0;
+  return /* @__PURE__ */ r.createElement(Ie, { errorText: E, errorTextId: S }, /* @__PURE__ */ r.createElement("div", { "data-testid": J, "data-analyticsid": ve.Input, className: de, ref: O }, Re(q, N, c), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper"] }, /* @__PURE__ */ r.createElement("div", { onClick: fe, ref: m, className: me, style: { maxWidth: $ } }, !b && V(), /* @__PURE__ */ r.createElement(
     "input",
     {
       onChange: he,
@@ -96,7 +97,7 @@ const ze = (e, s, p) => {
       className: pe,
       ref: s,
       "aria-labelledby": e["aria-labelledby"] ?? void 0,
-      "aria-describedby": [e["aria-describedby"] || "", S].join(" "),
+      "aria-describedby": we(e, S),
       "aria-invalid": !!x,
       disabled: u,
       placeholder: f,
@@ -106,12 +107,12 @@ const ze = (e, s, p) => {
       autoFocus: te,
       ...re
     }
-  ), b && $()), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper__right-of-input"] }, Z)), d && /* @__PURE__ */ r.createElement(We, { maxCharacters: d, length: R.toString().length, maxText: ne, mode: c, maxWidth: A }), Y));
+  ), b && V()), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper__right-of-input"] }, Z)), d && /* @__PURE__ */ r.createElement(Se, { maxCharacters: d, length: R.toString().length, maxText: ne, mode: c, maxWidth: $ }), Y));
 });
 L.displayName = "Input";
-const Xe = L;
+const Ge = L;
 export {
-  Se as InputTypes,
-  Xe as default
+  ze as InputTypes,
+  Ge as default
 };
 //# sourceMappingURL=Input.js.map

package/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextUuid = useUuid(errorTextId);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div onClick={handleClick} ref={inputContainerRef} className={inputContainer} style={{ maxWidth }}>\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={[props['aria-describedby'] || '', errorTextUuid].join(' ')}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","size","baseIncrementValue","label","error","errorText","errorTextId","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","errorTextUuid","numRegex","useEffect","onDark","onBlueberry","maxCharactersExceeded","onError","isLarge","FormSize","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","LazyIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextUuid = useUuid(errorTextId);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div onClick={handleClick} ref={inputContainerRef} className={inputContainer} style={{ maxWidth }}>\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","size","baseIncrementValue","label","error","errorText","errorTextId","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","errorTextUuid","numRegex","useEffect","onDark","onBlueberry","maxCharactersExceeded","onError","isLarge","FormSize","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","LazyIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters","Input$1"],"mappings":"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"}

package/components/LinkList/LinkList.js

@@ -1,28 +1,28 @@
 import e from "react";
 import u from "classnames";
-import { AnalyticsId as b } from "../../constants.js";
+import { AnalyticsId as E } from "../../constants.js";
 import { useHover as w } from "../../hooks/useHover.js";
-import y from "../Icons/ChevronRight.js";
-import { renderListHeader as R } from "../ListHeader/ListHeader.js";
+import R from "../Icons/ChevronRight.js";
+import { renderListHeader as b } from "../ListHeader/ListHeader.js";
 import t from "../LinkList/styles.module.scss";
-const p = e.forwardRef((L, l) => {
+const L = e.forwardRef((_, r) => {
   const {
     children: s,
     className: o = "",
     color: c = "neutral",
-    icon: r,
+    icon: a,
     size: i = "medium",
-    chevron: a = !1,
+    chevron: l = !1,
     linkRef: m,
     testId: d,
     target: n,
     variant: f,
     htmlMarkup: k = "a",
-    ..._
-  } = L, { hoverRef: h, isHovered: v } = w(m), C = u({
+    ...h
+  } = _, { hoverRef: v, isHovered: N } = w(m), C = u({
     [t["link-list__list-item--line"]]: f === "line",
     [t["link-list__list-item--outline"]]: f === "outline"
-  }), N = u(
+  }), y = u(
     t["link-list__anchor"],
     t[`link-list__anchor--${c}`],
     {
@@ -32,29 +32,30 @@ const p = e.forwardRef((L, l) => {
     },
     o
   );
-  return /* @__PURE__ */ e.createElement("li", { className: C, ref: l, "data-testid": d, "data-analyticsid": b.Link }, k === "a" && /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("li", { className: C, ref: r, "data-testid": d, "data-analyticsid": E.Link }, k === "a" && /* @__PURE__ */ e.createElement(
     "a",
     {
-      className: N,
-      ref: h,
+      className: y,
+      ref: v,
       rel: n === "_blank" ? "noopener noreferrer" : void 0,
       target: n,
-      ..._
+      ...h
     },
-    R(s, "span", v, i, a ? y : void 0, r)
-  ), k === "button" && /* @__PURE__ */ e.createElement("button", { className: N, ref: h, type: "button", ..._ }, R(s, "span", v, i, a ? y : void 0, r)));
-}), E = e.forwardRef(function(l, s) {
-  const { children: o, className: c = "", chevron: r = !1, size: i = "medium", color: a, testId: m, variant: d = "line" } = l;
-  return /* @__PURE__ */ e.createElement("ul", { ref: s, className: u(t["link-list"], c), "data-testid": m, "data-analyticsid": b.LinkList }, e.Children.map(o, (n) => {
-    if (n.type === p)
-      return e.cloneElement(n, { color: a, size: i, chevron: r, variant: d });
+    b(s, "span", N, i, l ? R : void 0, a)
+  ), k === "button" && /* @__PURE__ */ e.createElement("button", { className: y, ref: v, type: "button", ...h }, b(s, "span", N, i, l ? R : void 0, a)));
+}), p = e.forwardRef(function(r, s) {
+  const { children: o, className: c = "", chevron: a = !1, size: i = "medium", color: l, testId: m, variant: d = "line" } = r;
+  return /* @__PURE__ */ e.createElement("ul", { ref: s, className: u(t["link-list"], c), "data-testid": m, "data-analyticsid": E.LinkList }, e.Children.map(o, (n) => {
+    if (n.type === L)
+      return e.cloneElement(n, { color: l, size: i, chevron: a, variant: d });
   }));
 });
-E.Link = p;
-p.displayName = "LinkList.Link";
-const F = E;
+p.displayName = "LinkList";
+p.Link = L;
+L.displayName = "LinkList.Link";
+const F = p;
 export {
-  E as LinkList,
+  p as LinkList,
   F as default
 };
 //# sourceMappingURL=LinkList.js.map

package/components/LinkList/LinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.js","sources":["../../../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { PaletteNames } from '../../theme/palette';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkListVariant = 'line' | 'outline' | 'fill';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'>;\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'neutral',\n    icon,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n\n  const liClasses = cn({\n    [LinkListStyles['link-list__list-item--line']]: variant === 'line',\n    [LinkListStyles['link-list__list-item--outline']]: variant === 'outline',\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles['link-list__anchor--fill']]: variant === 'fill',\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' && (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </button>\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const { children, className = '', chevron = false, size = 'medium', color, testId, variant = 'line' } = props;\n  return (\n    <ul ref={ref} className={cn(LinkListStyles['link-list'], className)} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n        if ((child as React.ReactElement<LinkProps>).type === Link) {\n          return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron, variant });\n        }\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","linkRef","testId","target","variant","htmlMarkup","restProps","hoverRef","isHovered","useHover","liClasses","cn","LinkListStyles","linkClasses","AnalyticsId","renderListHeader","ChevronRight","LinkList","child","LinkList$1"],"mappings":";;;;;;;AAoEA,MAAMA,IAAiBC,EAAM,WAAW,CAACC,GAAkBC,MAAkC;AACrF,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,GAAGC;AAAA,EACD,IAAAb,GACE,EAAE,UAAAc,GAAU,WAAAC,EAAU,IAAIC,EAAgDR,CAAO,GAEjFS,IAAYC,EAAG;AAAA,IACnB,CAACC,EAAe,4BAA4B,CAAC,GAAGR,MAAY;AAAA,IAC5D,CAACQ,EAAe,+BAA+B,CAAC,GAAGR,MAAY;AAAA,EAAA,CAChE,GACKS,IAAcF;AAAAA,IAClBC,EAAe,mBAAmB;AAAA,IAClCA,EAAe,sBAAsBf,CAAK,EAAE;AAAA,IAC5C;AAAA,MACE,CAACe,EAAe,yBAAyB,CAAC,GAAGR,MAAY;AAAA,MACzD,CAACQ,EAAe,sBAAsBb,CAAI,EAAE,CAAC,GAAGA;AAAA,MAChD,CAACa,EAAe,2BAA2B,CAAC,GAAGP,MAAe;AAAA,IAChE;AAAA,IACAT;AAAA,EAAA;AAGA,SAAAJ,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWkB,GAAW,KAAAhB,GAAU,eAAaQ,GAAQ,oBAAkBY,EAAY,KACpF,GAAAT,MAAe,OACdb,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWqB;AAAA,MACX,KAAKN;AAAA,MACL,KAAKJ,MAAW,WAAW,wBAAwB;AAAA,MACnD,QAAAA;AAAA,MACC,GAAGG;AAAA,IAAA;AAAA,IAEHS,EAAiBpB,GAAU,QAAQa,GAAWT,GAAMC,IAAUgB,IAAe,QAAWlB,CAAI;AAAA,EAC/F,GAEDO,MAAe,YACdb,gBAAAA,EAAA,cAAC,YAAO,WAAWqB,GAAa,KAAKN,GAAgD,MAAK,UAAU,GAAGD,EACpG,GAAAS,EAAiBpB,GAAU,QAAQa,GAAWT,GAAMC,IAAUgB,IAAe,QAAWlB,CAAI,CAC/F,CAEJ;AAEJ,CAAC,GAEYmB,IAAWzB,EAAM,WAAW,SAA8BC,GAAsBC,GAAkC;AAC7H,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,SAAAI,IAAU,IAAO,MAAAD,IAAO,UAAU,OAAAF,GAAO,QAAAK,GAAQ,SAAAE,IAAU,OAAA,IAAWX;AAEtG,SAAAD,gBAAAA,EAAA,cAAC,QAAG,KAAAE,GAAU,WAAWiB,EAAGC,EAAe,WAAW,GAAGhB,CAAS,GAAG,eAAaM,GAAQ,oBAAkBY,EAAY,SACrH,GAAAtB,EAAM,SAAS,IAAIG,GAAU,CAACuB,MAA2D;AACnF,QAAAA,EAAwC,SAAS3B;AAC7C,aAAAC,EAAM,aAAa0B,GAAwC,EAAE,OAAArB,GAAO,MAAAE,GAAM,SAAAC,GAAS,SAAAI,GAAS;AAAA,EAEtG,CAAA,CACH;AAEJ,CAAC;AAEDa,EAAS,OAAO1B;AAChBA,EAAK,cAAc;AAEnB,MAAA4B,IAAeF;"}
+{"version":3,"file":"LinkList.js","sources":["../../../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { PaletteNames } from '../../theme/palette';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkListVariant = 'line' | 'outline' | 'fill';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'>;\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'neutral',\n    icon,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n\n  const liClasses = cn({\n    [LinkListStyles['link-list__list-item--line']]: variant === 'line',\n    [LinkListStyles['link-list__list-item--outline']]: variant === 'outline',\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles['link-list__anchor--fill']]: variant === 'fill',\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' && (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </button>\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const { children, className = '', chevron = false, size = 'medium', color, testId, variant = 'line' } = props;\n  return (\n    <ul ref={ref} className={cn(LinkListStyles['link-list'], className)} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n        if ((child as React.ReactElement<LinkProps>).type === Link) {\n          return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron, variant });\n        }\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","linkRef","testId","target","variant","htmlMarkup","restProps","hoverRef","isHovered","useHover","liClasses","cn","LinkListStyles","linkClasses","AnalyticsId","renderListHeader","ChevronRight","LinkList","child","LinkList$1"],"mappings":";;;;;;;AAoEA,MAAMA,IAAiBC,EAAM,WAAW,CAACC,GAAkBC,MAAkC;AACrF,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,GAAGC;AAAA,EACD,IAAAb,GACE,EAAE,UAAAc,GAAU,WAAAC,EAAU,IAAIC,EAAgDR,CAAO,GAEjFS,IAAYC,EAAG;AAAA,IACnB,CAACC,EAAe,4BAA4B,CAAC,GAAGR,MAAY;AAAA,IAC5D,CAACQ,EAAe,+BAA+B,CAAC,GAAGR,MAAY;AAAA,EAAA,CAChE,GACKS,IAAcF;AAAAA,IAClBC,EAAe,mBAAmB;AAAA,IAClCA,EAAe,sBAAsBf,CAAK,EAAE;AAAA,IAC5C;AAAA,MACE,CAACe,EAAe,yBAAyB,CAAC,GAAGR,MAAY;AAAA,MACzD,CAACQ,EAAe,sBAAsBb,CAAI,EAAE,CAAC,GAAGA;AAAA,MAChD,CAACa,EAAe,2BAA2B,CAAC,GAAGP,MAAe;AAAA,IAChE;AAAA,IACAT;AAAA,EAAA;AAGA,SAAAJ,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWkB,GAAW,KAAAhB,GAAU,eAAaQ,GAAQ,oBAAkBY,EAAY,KACpF,GAAAT,MAAe,OACdb,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWqB;AAAA,MACX,KAAKN;AAAA,MACL,KAAKJ,MAAW,WAAW,wBAAwB;AAAA,MACnD,QAAAA;AAAA,MACC,GAAGG;AAAA,IAAA;AAAA,IAEHS,EAAiBpB,GAAU,QAAQa,GAAWT,GAAMC,IAAUgB,IAAe,QAAWlB,CAAI;AAAA,EAC/F,GAEDO,MAAe,YACdb,gBAAAA,EAAA,cAAC,YAAO,WAAWqB,GAAa,KAAKN,GAAgD,MAAK,UAAU,GAAGD,EACpG,GAAAS,EAAiBpB,GAAU,QAAQa,GAAWT,GAAMC,IAAUgB,IAAe,QAAWlB,CAAI,CAC/F,CAEJ;AAEJ,CAAC,GAEYmB,IAAWzB,EAAM,WAAW,SAA8BC,GAAsBC,GAAkC;AAC7H,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,SAAAI,IAAU,IAAO,MAAAD,IAAO,UAAU,OAAAF,GAAO,QAAAK,GAAQ,SAAAE,IAAU,OAAA,IAAWX;AAEtG,SAAAD,gBAAAA,EAAA,cAAC,QAAG,KAAAE,GAAU,WAAWiB,EAAGC,EAAe,WAAW,GAAGhB,CAAS,GAAG,eAAaM,GAAQ,oBAAkBY,EAAY,SACrH,GAAAtB,EAAM,SAAS,IAAIG,GAAU,CAACuB,MAA2D;AACnF,QAAAA,EAAwC,SAAS3B;AAC7C,aAAAC,EAAM,aAAa0B,GAAwC,EAAE,OAAArB,GAAO,MAAAE,GAAM,SAAAC,GAAS,SAAAI,GAAS;AAAA,EAEtG,CAAA,CACH;AAEJ,CAAC;AAEDa,EAAS,cAAc;AACvBA,EAAS,OAAO1B;AAChBA,EAAK,cAAc;AAEnB,MAAA4B,IAAeF;"}

package/components/PopMenu/PopMenu.d.ts

@@ -1,10 +1,16 @@
 import React from 'react';
+import { SvgIcon } from '../Icon';
+import { IconName } from '../Icons/IconNames';
 import { LinkListProps } from '../LinkList';
 export declare enum PopMenuVariant {
     onWhite = "on-white",
     onGray = "on-gray",
     onBlueberry = "on-blueberry"
 }
+export declare enum PopMenuLabelPosition {
+    right = "right",
+    left = "left"
+}
 export interface PopMenuProps {
     /** Content shown inside PopOver. Can only be a LinkList */
     children: React.ReactElement<LinkListProps>;
@@ -24,6 +30,12 @@ export interface PopMenuProps {
     openButtonAriaLabel?: string;
     /** Sets the arial-label attribute for the closeButton. */
     closeButtonAriaLabel?: string;
+    /** Sets the icon on the trigger button. */
+    svgIcon?: SvgIcon | IconName;
+    /** Optional text next to the trigger button. */
+    labelText?: string;
+    /** Placement of the label text relative to the trigger button. */
+    labelTextPosition?: PopMenuLabelPosition;
 }
 export declare const PopMenu: React.FC<PopMenuProps>;
 export default PopMenu;