@helsenorge/designsystem-react 9.0.0-beta.0 → 9.0.0-beta.1

package/Slider.js

@@ -0,0 +1,218 @@
+import { jsxs as w, jsx as s } from "react/jsx-runtime";
+import oe, { useState as V, useRef as de, useEffect as p } from "react";
+import U from "classnames";
+import { AnalyticsId as ce } from "./constants.js";
+import { usePseudoClasses as ue } from "./hooks/usePseudoClasses.js";
+import { useSize as me } from "./hooks/useSize.js";
+import { useUuid as C } from "./hooks/useUuid.js";
+import { getAriaLabelAttributes as fe } from "./utils/accessibility.js";
+import { isMutableRefObject as pe, mergeRefs as he } from "./utils/refs.js";
+import { E as ve } from "./ErrorWrapper.js";
+import { T as _e } from "./Title.js";
+import r from "./components/Slider/styles.module.scss";
+const be = (h, f, i) => {
+  const [R, v] = V(h), _ = (b) => {
+    b > i ? v(i) : b < f ? v(f) : v(b);
+  };
+  return p(() => {
+    _(h);
+  }, [f, i]), [R, _];
+}, ge = oe.forwardRef((h, f) => {
+  const {
+    title: i,
+    ariaLabel: R,
+    error: v,
+    errorText: _,
+    errorTextId: b,
+    errorWrapperClassName: F,
+    labelLeft: j,
+    labelRight: P,
+    disabled: d = !1,
+    onChange: A,
+    steps: n,
+    step: g = 1,
+    minValue: a = 0,
+    maxValue: c = n ? n.length - 1 : 100,
+    selected: L = !0,
+    testId: H,
+    value: m,
+    ...q
+  } = h, [B, X] = V(!1), [k, $] = V(typeof m > "u" ? L : !0), [l, u] = be(
+    typeof m > "u" ? (c - a) / 2 + a : m,
+    a,
+    c
+  ), G = C(b), y = C(), I = C(), x = C(), M = de(null), { refObject: E, isFocused: J } = ue(pe(f) ? f : null), Q = he([f, E]), { width: O } = me(M) || { width: 0 }, W = c / 10, Y = !!_ || !!v;
+  p(() => {
+    const t = () => {
+      X(!1);
+    };
+    return document.addEventListener("pointerup", t), () => {
+      document.removeEventListener("pointerup", t);
+    };
+  }, []);
+  const z = (t) => {
+    var K;
+    const e = ((K = M.current) == null ? void 0 : K.getBoundingClientRect().x) ?? 0, o = (t - e) / O, S = c - a;
+    let N = o * S + a;
+    return N = Math.round(N / g) * g, N = Math.max(a, Math.min(c, N)), N;
+  };
+  p(() => {
+    const t = (e) => {
+      if (!d && B) {
+        const o = z(e.clientX);
+        u(o);
+      }
+    };
+    return document.addEventListener("pointermove", t), () => {
+      document.removeEventListener("pointermove", t);
+    };
+  }, [B]), p(() => {
+    m !== l && typeof m < "u" && (D(), u(m));
+  }, [m]), p(() => {
+    typeof m > "u" && L !== k && $(L);
+  }, [L]);
+  const D = () => {
+    k === !1 && $(!0);
+  }, Z = (t) => {
+    if (d) return;
+    let e = !1;
+    switch (t.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        u(l - g), e = !0;
+        break;
+      case "PageDown":
+        u(l - W), e = !0;
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        u(l + g), e = !0;
+        break;
+      case "PageUp":
+        u(l + W), e = !0;
+        break;
+      case "Home":
+        u(a), e = !0;
+        break;
+      case "End":
+        u(c), e = !0;
+        break;
+    }
+    e && (D(), t.preventDefault(), t.stopPropagation());
+  }, ee = (t) => {
+    var o;
+    if (d) return;
+    const e = z(t.clientX);
+    u(e), (o = E.current) == null || o.focus();
+  }, te = (t) => {
+    var e;
+    d || (X(!0), D(), t.preventDefault(), t.stopPropagation(), (e = E.current) == null || e.focus());
+  }, re = c !== a ? O / (c - a) * (l - a) : 0, ne = () => {
+    const t = n ? Math.round((l - a) / g) : null;
+    if (n && t !== null && t >= 0 && t < n.length) {
+      const e = n[t], o = e.emojiUniCode, S = typeof e.label < "u" ? e.label.toString() : void 0;
+      return o && S ? `${o} ${S}` : o || S;
+    }
+  }, ae = fe({
+    label: R,
+    id: (() => {
+      if (i && j && P)
+        return [y, I, x].join(" ");
+      if (i && j)
+        return [y, I].join(" ");
+      if (i && P)
+        return [y, x].join(" ");
+      if (i)
+        return y;
+    })(),
+    prefer: "label"
+  }), T = (t, e) => ({ left: `${t / (e - 1) * 100}%` });
+  p(() => {
+    k && A && A({
+      target: {
+        name: h.name,
+        value: l
+      }
+    });
+  }, [l, k]);
+  const se = () => /* @__PURE__ */ s("div", { className: r["slider__emoji-container"], children: n == null ? void 0 : n.map((t, e) => t.emojiUniCode && /* @__PURE__ */ s(
+    "div",
+    {
+      "aria-hidden": !0,
+      className: r.slider__emoji,
+      style: T(e, n.length),
+      children: t.emojiUniCode
+    },
+    "emoji" + e
+  )) }), ie = () => n == null ? void 0 : n.map((t, e) => /* @__PURE__ */ s("div", { className: r.slider__track__step, style: T(e, n.length) }, "step" + e)), le = () => /* @__PURE__ */ s("div", { className: r["slider__value-container"], children: n == null ? void 0 : n.map((t, e) => typeof t.label < "u" && /* @__PURE__ */ s(
+    "div",
+    {
+      "aria-hidden": !0,
+      className: r.slider__value,
+      style: T(e, n.length),
+      children: t.label
+    },
+    "label" + e
+  )) });
+  return /* @__PURE__ */ w(ve, { className: F, errorText: _, errorTextId: G, children: [
+    /* @__PURE__ */ s(
+      "input",
+      {
+        "aria-valuetext": ne(),
+        className: r["sr-only-slider"],
+        disabled: d,
+        min: a,
+        max: c,
+        onChange: A,
+        onKeyDown: Z,
+        value: l,
+        ref: Q,
+        type: "range",
+        ...q,
+        ...ae
+      }
+    ),
+    /* @__PURE__ */ w("div", { className: r.slider, "data-testid": H, "data-analyticsid": ce.Slider, children: [
+      i && /* @__PURE__ */ s(_e, { className: r.slider__title, htmlMarkup: "h3", margin: 0, appearance: "title3", id: y, children: i }),
+      /* @__PURE__ */ w("div", { className: r["slider__content-container"], children: [
+        se(),
+        /* @__PURE__ */ w(
+          "div",
+          {
+            ref: M,
+            className: U(r["slider__track-wrapper"], d && r["slider__track-wrapper--disabled"]),
+            onClick: ee,
+            onPointerDown: te,
+            children: [
+              /* @__PURE__ */ s("div", { className: U(r.slider__track, d && r["slider__track--disabled"]), children: ie() }),
+              /* @__PURE__ */ s(
+                "div",
+                {
+                  className: U(r.slider__marker, {
+                    [r["slider__marker--disabled"]]: d,
+                    [r["slider__marker--selected"]]: k,
+                    [r["slider__marker--invalid"]]: Y,
+                    [r["slider__marker--focused"]]: !d && J
+                  }),
+                  style: {
+                    left: `${re}px`
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        le()
+      ] }),
+      (j || P) && /* @__PURE__ */ w("span", { className: r.slider__options, children: [
+        /* @__PURE__ */ s("span", { id: I, children: j }),
+        /* @__PURE__ */ s("span", { id: x, children: P })
+      ] })
+    ] })
+  ] });
+});
+ge.displayName = "Slider";
+export {
+  ge as S
+};
+//# sourceMappingURL=Slider.js.map

package/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps\n  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'onChange' | 'onBlur'> {\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  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    labelLeft,\n    labelRight,\n    disabled = false,\n    onChange,\n    steps,\n    step = 1,\n    minValue = 0,\n    maxValue = steps ? steps.length - 1 : 100,\n    selected = true,\n    testId,\n    value,\n    ...rest\n  } = props;\n\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const errorTextUuid = useUuid(errorTextId);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return (): void => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    refObject.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    refObject.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\n      <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n        {title && (\n          <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['slider__content-container']}>\n          {renderEmojies()}\n          {/* Slider streken er klikkbar med mus/touch */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onClick={handleTrackClick}\n            onPointerDown={handlePointerDown}\n          >\n            <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n            <div\n              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\n            />\n          </div>\n          {renderStepLabels()}\n        </div>\n        {(labelLeft || labelRight) && (\n          <span className={styles.slider__options}>\n            <span id={labelLeftId}>{labelLeft}</span>\n            <span id={labelRightId}>{labelRight}</span>\n          </span>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","React","props","ref","title","ariaLabel","error","errorText","errorTextId","errorWrapperClassName","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","rest","isMoving","setIsMoving","selectedState","setSelectedState","valueState","setValueState","errorTextUuid","useUuid","titleId","labelLeftId","labelRightId","trackRef","useRef","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","trackWidth","useSize","largeStep","invalid","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPositionStyling","index","stepsLength","renderEmojies","jsx","styles","renderSteps","_step","renderStepLabels","ErrorWrapper","jsxs","AnalyticsId","Title","classNames"],"mappings":"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"}

package/components/ExpanderList/styles.module.scss

@@ -131,6 +131,11 @@
   width: 100%;
   outline: none;
 
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
+  }
+
   &--open {
     font-weight: 600;
   }

package/components/Input/Input.d.ts

@@ -3,7 +3,7 @@ import { FormOnColor, FormSize } from '../../constants';
 import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
 import { SvgIcon } from '../Icon';
 import { IconName } from '../Icons/IconNames';
-export interface InputProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required' | 'value' | 'min' | 'max' | 'aria-describedby' | 'aria-labelledby' | 'onBlur' | 'onClick' | 'onChange' | 'onFocus' | 'onKeyDown' | 'autoFocus'> {
+export interface InputProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required' | 'value' | 'min' | 'max' | 'aria-describedby' | 'aria-labelledby' | 'onBlur' | 'onClick' | 'onChange' | 'onFocus' | 'onKeyDown' | 'autoFocus' | 'inputMode'> {
     /** The number at which the input field starts when you increment or decrement it */
     baseIncrementValue?: number;
     /** Adds custom classes to the element. */

package/components/Label/Label.d.ts

@@ -5,6 +5,7 @@ export type LabelText = {
     text: string;
     type?: 'semibold' | 'normal';
 };
+export type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span' | 'label' | 'p';
 export interface LabelProps {
     /** Component shown after label - discourage use of this */
     afterLabelChildren?: React.ReactNode;
@@ -18,6 +19,8 @@ export interface LabelProps {
     className?: string;
     /** Id that is put on the "for" attribute of the label */
     htmlFor?: string;
+    /** Changes the underlying element of the label */
+    htmlMarkup?: LabelTags;
     /** Id som plasseres på <label/> */
     labelId?: string;
     /** Array of main label strings. Can be of type semibold or normal */
@@ -34,7 +37,7 @@ export interface LabelProps {
     testId?: string;
 }
 export declare const getLabelText: (label: React.ReactNode) => string;
-export declare const renderLabel: (label: React.ReactNode, inputId: string, onColor: FormOnColor) => React.ReactNode;
-export declare const renderLabelAsParent: (label: React.ReactNode, children: React.ReactNode, inputId: string, onColor: FormOnColor, labelClassName?: string, labelTextClassName?: string, sublabelWrapperClassName?: string, large?: boolean) => React.ReactNode;
+export declare const renderLabel: (label: React.ReactNode, inputId: string, onColor: FormOnColor, markup?: LabelTags) => React.ReactNode;
+export declare const renderLabelAsParent: (label: React.ReactNode, children: React.ReactNode, inputId: string, onColor: FormOnColor, labelClassName?: string, labelTextClassName?: string, sublabelWrapperClassName?: string, large?: boolean, markup?: LabelTags) => React.ReactNode;
 declare const Label: FunctionComponent<LabelProps>;
 export default Label;

package/components/Slider/Slider.d.ts

@@ -1,9 +1,16 @@
 import React from 'react';
+import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
 export type SliderStep = {
     label?: number | string;
     emojiUniCode?: string;
 };
-export interface SliderProps {
+export interface SliderProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'onChange' | 'onBlur'> {
+    /** Activates Error style for the input */
+    error?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
     /**	Sets the title of the slider. */
     title?: string;
     /** Adds the left hand label to the element. */
@@ -18,8 +25,6 @@ export interface SliderProps {
     minValue?: number;
     /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */
     maxValue?: number;
-    /** Function to be called when the value state has changed. */
-    onChange?: (value: number) => void;
     /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */
     selected?: boolean;
     /** Sets the steps data for the slider */
@@ -31,5 +36,5 @@ export interface SliderProps {
     /** Sets the value of the slider */
     value?: number;
 }
-export declare const Slider: React.FC<SliderProps>;
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
 export default Slider;

package/components/Slider/index.js

@@ -1,192 +1,6 @@
-import { jsxs as b, jsx as d } from "react/jsx-runtime";
-import { useState as E, useRef as K, useEffect as _ } from "react";
-import D from "classnames";
-import { AnalyticsId as x } from "../../constants.js";
-import { useSize as V } from "../../hooks/useSize.js";
-import { useUuid as L } from "../../hooks/useUuid.js";
-import { getAriaLabelAttributes as ee } from "../../utils/accessibility.js";
-import { T as re } from "../../Title.js";
-import n from "./styles.module.scss";
-const te = (s, v, f) => {
-  const [h, o] = E(s), p = (t) => {
-    t > f ? o(f) : t < v ? o(v) : o(t);
-  };
-  return _(() => {
-    p(s);
-  }, [v, f]), [h, p];
-}, he = ({
-  title: s,
-  ariaLabel: v,
-  labelLeft: f,
-  labelRight: h,
-  disabled: o = !1,
-  onChange: p,
-  steps: t,
-  step: k = 1,
-  minValue: i = 0,
-  maxValue: l = t ? t.length - 1 : 100,
-  selected: N = !0,
-  testId: H,
-  value: m
-}) => {
-  const [U, B] = E(!1), [g, R] = E(typeof m > "u" ? N : !0), [a, u] = te(
-    typeof m > "u" ? (l - i) / 2 + i : m,
-    i,
-    l
-  ), y = L(), j = L(), P = L(), A = K(null), I = K(null), { width: T } = V(A) || { width: 0 }, X = l / 10;
-  _(() => {
-    const r = () => {
-      B(!1);
-    };
-    return document.addEventListener("pointerup", r), () => {
-      document.removeEventListener("pointerup", r);
-    };
-  }, []);
-  const $ = (r) => {
-    var z;
-    const e = ((z = A.current) == null ? void 0 : z.getBoundingClientRect().x) ?? 0, c = (r - e) / T, S = l - i;
-    let w = c * S + i;
-    return w = Math.round(w / k) * k, w = Math.max(i, Math.min(l, w)), w;
-  };
-  _(() => {
-    const r = (e) => {
-      if (!o && U) {
-        const c = $(e.clientX);
-        u(c);
-      }
-    };
-    return document.addEventListener("pointermove", r), () => {
-      document.removeEventListener("pointermove", r);
-    };
-  }, [U]), _(() => {
-    m !== a && typeof m < "u" && (M(), u(m));
-  }, [m]), _(() => {
-    !o && g && p && p(a);
-  }, [a, g]), _(() => {
-    typeof m > "u" && N !== g && R(N);
-  }, [N]);
-  const M = () => {
-    g === !1 && R(!0);
-  }, O = (r) => {
-    if (o) return;
-    let e = !1;
-    switch (r.key) {
-      case "ArrowLeft":
-      case "ArrowDown":
-        u(a - k), e = !0;
-        break;
-      case "PageDown":
-        u(a - X), e = !0;
-        break;
-      case "ArrowRight":
-      case "ArrowUp":
-        u(a + k), e = !0;
-        break;
-      case "PageUp":
-        u(a + X), e = !0;
-        break;
-      case "Home":
-        u(i), e = !0;
-        break;
-      case "End":
-        u(l), e = !0;
-        break;
-    }
-    e && (M(), r.preventDefault(), r.stopPropagation());
-  }, W = (r) => {
-    var c;
-    if (o) return;
-    const e = $(r.clientX);
-    u(e), (c = I.current) == null || c.focus();
-  }, q = (r) => {
-    var e;
-    o || (B(!0), M(), r.preventDefault(), r.stopPropagation(), (e = I.current) == null || e.focus());
-  }, F = l !== i ? T / (l - i) * (a - i) : 0, G = () => {
-    const r = t ? Math.round((a - i) / k) : null;
-    if (t && r !== null && r >= 0 && r < t.length) {
-      const e = t[r], c = e.emojiUniCode, S = typeof e.label < "u" ? e.label.toString() : void 0;
-      return c && S ? `${c} ${S}` : c || S;
-    }
-  }, J = ee({
-    label: v,
-    id: (() => {
-      if (s && f && h)
-        return [y, j, P].join(" ");
-      if (s && f)
-        return [y, j].join(" ");
-      if (s && h)
-        return [y, P].join(" ");
-      if (s)
-        return y;
-    })(),
-    prefer: "label"
-  }), C = (r, e) => ({ left: `${r / (e - 1) * 100}%` }), Q = () => /* @__PURE__ */ d("div", { className: n["slider__emoji-container"], children: t == null ? void 0 : t.map((r, e) => r.emojiUniCode && /* @__PURE__ */ d(
-    "div",
-    {
-      "aria-hidden": !0,
-      className: n.slider__emoji,
-      style: C(e, t.length),
-      children: r.emojiUniCode
-    },
-    "emoji" + e
-  )) }), Y = () => t == null ? void 0 : t.map((r, e) => /* @__PURE__ */ d("div", { className: n.slider__track__step, style: C(e, t.length) }, "step" + e)), Z = () => /* @__PURE__ */ d("div", { className: n["slider__value-container"], children: t == null ? void 0 : t.map((r, e) => typeof r.label < "u" && /* @__PURE__ */ d(
-    "div",
-    {
-      "aria-hidden": !0,
-      className: n.slider__value,
-      style: C(e, t.length),
-      children: r.label
-    },
-    "label" + e
-  )) });
-  return /* @__PURE__ */ b("div", { className: n.slider, "data-testid": H, "data-analyticsid": x.Slider, children: [
-    s && /* @__PURE__ */ d(re, { className: n.slider__title, htmlMarkup: "h3", margin: 0, appearance: "title3", id: y, children: s }),
-    /* @__PURE__ */ b("div", { className: n["slider__content-container"], children: [
-      Q(),
-      /* @__PURE__ */ b(
-        "div",
-        {
-          ref: A,
-          className: D(n["slider__track-wrapper"], o && n["slider__track-wrapper--disabled"]),
-          onClick: W,
-          onPointerDown: q,
-          children: [
-            /* @__PURE__ */ d("div", { className: D(n.slider__track, o && n["slider__track--disabled"]), children: Y() }),
-            /* @__PURE__ */ d(
-              "div",
-              {
-                role: o ? void 0 : "slider",
-                ref: I,
-                className: D(n.slider__marker, {
-                  [n["slider__marker--disabled"]]: o,
-                  [n["slider__marker--selected"]]: g
-                }),
-                style: {
-                  left: `${F}px`
-                },
-                onKeyDown: O,
-                "aria-valuenow": a,
-                "aria-valuetext": G(),
-                "aria-valuemin": i,
-                "aria-valuemax": l,
-                tabIndex: o ? void 0 : 0,
-                "aria-disabled": o,
-                ...J
-              }
-            )
-          ]
-        }
-      ),
-      Z()
-    ] }),
-    (f || h) && /* @__PURE__ */ b("span", { className: n.slider__options, children: [
-      /* @__PURE__ */ d("span", { id: j, children: f }),
-      /* @__PURE__ */ d("span", { id: P, children: h })
-    ] })
-  ] });
-};
+import { S as a } from "../../Slider.js";
 export {
-  he as Slider,
-  he as default
+  a as Slider,
+  a as default
 };
 //# sourceMappingURL=index.js.map

package/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  selected = true,\n  testId,\n  value,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (!disabled && selectedState && onChange) {\n      onChange(valueState);\n    }\n  }, [valueState, selectedState]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, {\n              [styles['slider__marker--disabled']]: disabled,\n              [styles['slider__marker--selected']]: selectedState,\n            })}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={valueState}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","isMoving","setIsMoving","selectedState","setSelectedState","valueState","setValueState","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPositionStyling","index","stepsLength","renderEmojies","jsx","styles","renderSteps","_step","renderStepLabels","jsxs","AnalyticsId","Title","classNames"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Slider/styles.module.scss

@@ -1,16 +1,21 @@
 @import '../../scss/spacers';
 @import '../../scss/breakpoints';
 @import '../../scss/palette';
+@import '../../scss/screen-reader';
+@import '../../scss/supernova/styles/colors';
 
 $track-height-offset: 1rem;
 $mark-size: getSpacer(l);
 
+.sr-only-slider {
+  @include sr-only;
+}
+
 .slider {
   display: flex;
   flex-direction: column;
   row-gap: getSpacer(s);
   width: 100%;
-  padding: getSpacer(m) 0;
   position: relative;
   outline: none !important;
 
@@ -87,10 +92,16 @@ $mark-size: getSpacer(l);
     outline: none;
     cursor: pointer;
 
-    &:focus-within {
+    &--focused {
       outline: 0.15rem solid $black;
     }
 
+    &--focused#{&}--selected {
+      &::after {
+        background-color: $blueberry700;
+      }
+    }
+
     &--selected {
       &::after {
         content: '';
@@ -100,13 +111,16 @@ $mark-size: getSpacer(l);
         border-radius: 10rem;
         background-color: $blueberry600;
 
-        :hover > &,
-        :focus > & {
+        :hover > & {
           background-color: $blueberry700;
         }
       }
     }
 
+    &--invalid {
+      border-color: var(--color-notification-border-error);
+    }
+
     &--disabled {
       border-color: $neutral500;
       cursor: default;
@@ -115,8 +129,7 @@ $mark-size: getSpacer(l);
         border-color: $neutral500;
         background-color: $neutral200;
 
-        :hover > &,
-        :focus > & {
+        :hover > & {
           background-color: $neutral200;
         }
       }