@helsenorge/designsystem-react 5.0.0-beta.0 → 5.0.0

package/components/ServiceMessage/styles.module.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import '../../scss/spacers';
 @import '../../scss/palette';
 @import '../../scss/breakpoints';
@@ -5,322 +6,222 @@
 @import '../../scss/grid';
 
 .service-message {
-  font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
+  $servicemessage: &;
 
-  &__outer-wrapper {
-    &--success {
-      background-color: $kiwi50;
-    }
-
-    &--info {
-      background-color: $blueberry50;
-    }
+  border-width: 1px;
+  border-bottom-style: solid;
 
-    &--warn {
-      background-color: $banana50;
-    }
-
-    &--alert {
-      background-color: $cherry50;
-    }
+  &:first-of-type {
+    border-top-style: solid;
   }
 
-  &__wrapper {
-    padding: getSpacer(3xs) getSpacer(xs);
+  &--success {
+    background-color: $kiwi50;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      padding: getSpacer(2xs) getSpacer(l);
+    &:hover {
+      background-color: rgba-to-rgb(rgba($kiwi500, 0.1), $kiwi50);
     }
 
-    &--inner {
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        @include make-container;
-        @include make-container-max-widths;
-      }
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $kiwi900;
     }
+  }
 
-    &--success {
-      background-color: $kiwi50;
+  &--info {
+    background-color: $blueberry50;
 
-      &:hover {
-        background-color: rgb(51 190 132 / 10%);
-      }
-
-      &--expanded {
-        border-bottom: 0.0625rem solid $kiwi900;
-      }
+    &:hover {
+      background-color: rgba-to-rgb(rgba($blueberry500, 0.1), $blueberry50);
     }
 
-    &--info {
-      background-color: $blueberry50;
-
-      &:hover {
-        background-color: rgb(24 128 151 / 10%);
-      }
-
-      &--expanded {
-        border-bottom: 0.0625rem solid $blueberry700;
-      }
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $blueberry700;
     }
+  }
 
-    &--warn {
-      background-color: $banana50;
-
-      &:hover {
-        background-color: rgb(221 171 6 / 10%);
-      }
+  &--warn {
+    background-color: $banana50;
 
-      &--expanded {
-        border-bottom: 0.0625rem solid $banana700;
-      }
+    &:hover {
+      background-color: rgba-to-rgb(rgba($banana500, 0.1), $banana50);
     }
 
-    &--alert {
-      background-color: $cherry50;
-
-      &:hover {
-        background-color: rgb(200 53 33 / 10%);
-      }
-
-      &--expanded {
-        border-bottom: 0.0625rem solid $cherry700;
-      }
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $banana700;
     }
+  }
 
-    &__border {
-      &--success {
-        border: 0.0625rem solid $kiwi900;
-      }
-
-      &--info {
-        border: 0.0625rem solid $blueberry700;
-      }
-
-      &--warn {
-        border: 0.0625rem solid $banana700;
-      }
+  &--alert {
+    background-color: $cherry50;
 
-      &--alert {
-        border: 0.0625rem solid $cherry700;
-      }
+    &:hover {
+      background-color: rgba-to-rgb(rgba($cherry500, 0.1), $cherry50);
     }
 
-    &__btn {
-      background-color: transparent;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      &--width {
-        width: 100%;
-      }
-
-      &--not-first {
-        border-top-color: transparent;
-        border-right-color: transparent;
-        border-left-color: transparent;
-      }
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $cherry700;
+    }
+  }
 
-      &:focus {
-        border: none;
-        outline: 0.125rem solid #000;
-        outline-offset: -2px;
+  &__container {
+    @include make-container;
+    @include make-container-max-widths;
+  }
 
-        // offset colliding border.
-        margin-top: -1px;
-        padding-top: 0.375rem;
-        padding-bottom: 0.3125rem;
+  &__row {
+    @include make-row;
+  }
 
-        @media (min-width: map-get($grid-breakpoints, md)) {
-          padding-top: 0.625rem;
-          padding-bottom: 0.5625rem;
-        }
-      }
+  &__col {
+    @include make-col-ready;
+    @include make-col(12);
+  }
 
-      &--first {
-        border-right-color: transparent;
-        border-left-color: transparent;
+  &__label-container {
+    position: relative;
+    padding-top: getSpacer(3xs);
+    padding-bottom: getSpacer(3xs);
 
-        @media (max-width: map-get($grid-breakpoints, lg)) {
-          border-top-color: transparent;
-        }
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      padding-top: getSpacer(2xs);
+      padding-bottom: getSpacer(2xs);
+    }
 
-        &:focus {
-          padding-top: 0.3125rem;
-          padding-bottom: 0.3125rem;
-          margin-top: 0;
+    &--has-expander:has(:focus-visible) {
+      box-shadow: inset 0 0 0 2px $black;
+    }
+  }
 
-          @media (min-width: map-get($grid-breakpoints, md)) {
-            padding-top: 0.5625rem;
-            padding-bottom: 0.5625rem;
-          }
-        }
-      }
+  &__label {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: getSpacer(2xs);
 
-      &--expanded {
-        border-bottom-color: transparent;
-      }
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      gap: getSpacer(m);
     }
   }
 
-  &__content {
-    display: block;
-    margin: 0 3.75rem;
+  &__title {
+    width: 100%;
+    font-weight: 700;
     font-size: $font-size-xs;
     line-height: 1.25rem;
-    padding: getSpacer(3xs) 0 getSpacer(xs) 0;
 
     @media (min-width: map-get($grid-breakpoints, md)) {
-      margin: 0 getSpacer(4xl);
-    }
-
-    @media (min-width: map-get($grid-breakpoints, lg)) {
-      padding: getSpacer(2xs) 0 getSpacer(s) 0;
-      margin: 0 4.5625rem;
-    }
-
-    &__info {
-      display: block;
-      font-size: $font-size-xs;
-      line-height: 1.25rem;
-
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        padding-top: getSpacer(xs);
-        line-height: 1.625rem;
-        font-size: $font-size-sm;
-      }
-
-      &--smaller {
-        display: block;
-        font-size: 0.875rem;
-        padding-top: getSpacer(2xs);
-        line-height: 1.25rem;
-
-        @media (min-width: map-get($grid-breakpoints, lg)) {
-          padding-top: getSpacer(xs);
-          font-size: $font-size-xs;
-          line-height: $lineheight-size-xs;
-        }
-      }
+      font-size: $font-size-sm;
     }
+  }
 
-    &--spacing {
-      margin-top: getSpacer(2xs);
+  &__toggle {
+    all: unset;
 
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        margin-top: 0;
-        padding: 0 getSpacer(l);
-      }
+    // Triks for at hele labelen skal trigge klikk på knappen
+    &::after {
+      inset: 0;
+      content: '';
+      position: absolute;
     }
   }
 
-  &__icon {
-    &--signal {
-      display: flex;
-      align-items: center;
-      margin-right: getSpacer(2xs);
+  &__content {
+    margin-left: calc(38px + getSpacer(2xs));
+    margin-right: calc(38px + getSpacer(2xs));
+    padding-top: getSpacer(xs);
+    padding-bottom: getSpacer(xs);
 
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-right: getSpacer(m);
-      }
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      margin-left: calc(38px + getSpacer(m));
+      margin-right: calc(38px + getSpacer(m));
     }
 
-    &--expander {
-      margin-left: auto;
-      display: flex;
-      align-items: center;
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      margin-left: calc(48px + getSpacer(m));
+      margin-right: calc(48px + getSpacer(m));
+      padding-top: getSpacer(2xs);
+      padding-bottom: getSpacer(s);
     }
   }
 
-  &__label {
-    text-align: left;
-    font-weight: 700;
+  &__info {
     font-size: $font-size-xs;
     line-height: 1.25rem;
+    margin: 0;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      margin-top: getSpacer(xs);
+      line-height: 1.625rem;
       font-size: $font-size-sm;
     }
-  }
-
-  &__top-row {
-    line-height: $lineheight-size-xs;
-    align-items: center;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      font-size: $font-size-sm;
-      line-height: 1.25rem;
-    }
+    &--extra {
+      font-size: 0.875rem;
+      margin-top: getSpacer(2xs);
 
-    &--container {
-      display: flex;
-      width: 100%;
-      align-items: center;
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        margin-top: getSpacer(xs);
+        font-size: $font-size-xs;
+        line-height: $lineheight-size-xs;
+      }
     }
   }
 
-  &__bottom-row {
+  &__actions {
     display: flex;
     justify-content: space-between;
     flex-flow: column wrap;
-    padding: getSpacer(2xs) 0 0 0;
     gap: getSpacer(2xs);
+    margin-top: getSpacer(2xs);
 
     @media (min-width: map-get($grid-breakpoints, sm)) {
       flex-direction: row;
     }
 
     @media (min-width: map-get($grid-breakpoints, lg)) {
-      padding: getSpacer(s) 0 0 0;
+      margin-top: getSpacer(s);
     }
+  }
 
-    &--only-close-button {
-      @media (min-width: map-get($grid-breakpoints, sm)) {
-        flex-direction: row-reverse;
-      }
+  &__action {
+    display: flex;
+    align-items: center;
+    border: none;
+    width: fit-content;
+    color: $blueberry700;
+    font-weight: 600;
+    font-size: $font-size-xs;
+    line-height: 1.25rem;
+    background-color: transparent;
+    text-decoration: none;
+    padding: 0.5rem;
+    margin-left: -0.5rem;
+    gap: getSpacer(xs);
+
+    &:hover,
+    &:active {
+      background-color: rgb(88 170 187 / 10%);
     }
 
-    &__button {
-      display: flex;
-      align-items: center;
-      border: none;
-      width: fit-content;
-      color: $blueberry700;
-      font-weight: 600;
-      font-size: $font-size-xs;
-      line-height: 1.25rem;
+    &:focus-visible {
+      box-shadow: 0 0 0 2px $black;
       background-color: transparent;
-      text-decoration: none;
-      padding: 0.5rem;
-      margin-left: -0.5rem;
-
-      &:hover,
-      &:active {
-        background-color: rgb(88 170 187 / 10%);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 2px $black;
-        background-color: transparent;
-        border-radius: 0;
-        border: 0;
-        outline: none;
-      }
-
-      svg {
-        margin-left: getSpacer(xs);
-      }
+      border: 0;
+      outline: none;
     }
 
-    &__close-button {
-      &--top {
+    &--close {
+      @media (min-width: map-get($grid-breakpoints, lg)) {
         margin-left: auto;
-        padding: 0;
-
-        svg {
-          margin-left: 0;
-        }
       }
     }
   }
+
+  &__close {
+    z-index: 1;
+  }
 }

package/components/ServiceMessage/styles.module.scss.d.ts

@@ -1,41 +1,24 @@
 export type Styles = {
   'service-message': string;
-  'service-message__bottom-row': string;
-  'service-message__bottom-row__button': string;
-  'service-message__bottom-row__close-button--top': string;
-  'service-message__bottom-row--only-close-button': string;
+  'service-message__action': string;
+  'service-message__action--close': string;
+  'service-message__actions': string;
+  'service-message__close': string;
+  'service-message__col': string;
+  'service-message__container': string;
   'service-message__content': string;
-  'service-message__content__info': string;
-  'service-message__content__info--smaller': string;
-  'service-message__content--spacing': string;
-  'service-message__icon--expander': string;
-  'service-message__icon--signal': string;
+  'service-message__info': string;
+  'service-message__info--extra': string;
   'service-message__label': string;
-  'service-message__outer-wrapper--alert': string;
-  'service-message__outer-wrapper--info': string;
-  'service-message__outer-wrapper--success': string;
-  'service-message__outer-wrapper--warn': string;
-  'service-message__top-row': string;
-  'service-message__top-row--container': string;
-  'service-message__wrapper': string;
-  'service-message__wrapper__border--alert': string;
-  'service-message__wrapper__border--info': string;
-  'service-message__wrapper__border--success': string;
-  'service-message__wrapper__border--warn': string;
-  'service-message__wrapper__btn': string;
-  'service-message__wrapper__btn--expanded': string;
-  'service-message__wrapper__btn--first': string;
-  'service-message__wrapper__btn--not-first': string;
-  'service-message__wrapper__btn--width': string;
-  'service-message__wrapper--alert': string;
-  'service-message__wrapper--alert--expanded': string;
-  'service-message__wrapper--info': string;
-  'service-message__wrapper--info--expanded': string;
-  'service-message__wrapper--inner': string;
-  'service-message__wrapper--success': string;
-  'service-message__wrapper--success--expanded': string;
-  'service-message__wrapper--warn': string;
-  'service-message__wrapper--warn--expanded': string;
+  'service-message__label-container': string;
+  'service-message__label-container--has-expander': string;
+  'service-message__row': string;
+  'service-message__title': string;
+  'service-message__toggle': string;
+  'service-message--alert': string;
+  'service-message--info': string;
+  'service-message--success': string;
+  'service-message--warn': string;
 };
 
 export type ClassNames = keyof Styles;

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  return [value, setSafeValue];\n};\n\ninterface 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  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst MAX_VALUE = 100;\nconst MIN_VALUE = 0;\nconst STEP = 1;\nconst LARGE_STEP = 10;\n\nexport const Slider: React.FC<SliderProps> = ({ title, ariaLabel, labelLeft, labelRight, disabled = false, onChange, testId }) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((MAX_VALUE - MIN_VALUE) / 2, MIN_VALUE, MAX_VALUE);\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 { width: markerWidth } = useSize(markerRef) || { width: 0 };\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    return Math.round(((markerPosition - trackPosition) / trackWidth) * (MAX_VALUE - MIN_VALUE));\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(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 (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\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        setValue(value - STEP);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - LARGE_STEP);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + STEP);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + LARGE_STEP);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(MIN_VALUE);\n        flag = true;\n        break;\n      case 'End':\n        setValue(MAX_VALUE);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\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    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = ((trackWidth - markerWidth) / (MAX_VALUE - MIN_VALUE)) * value;\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  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\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'])} />\n        <div\n          role={disabled ? undefined : 'slider'}\n          ref={markerRef}\n          className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n          style={{\n            left: `${markerXPos}px`,\n          }}\n          onKeyDown={handleKeyDown}\n          aria-valuenow={value}\n          aria-valuemin={MIN_VALUE}\n          aria-valuemax={MAX_VALUE}\n          tabIndex={disabled ? undefined : 0}\n          aria-disabled={disabled}\n          {...ariaLabelAttributes}\n        />\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","newValue","MAX_VALUE","MIN_VALUE","STEP","LARGE_STEP","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","markerWidth","useEffect","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","handlePointerMove","e","handleKeyDown","flag","handleTrackClick","handlePointerDown","markerXPos","ariaLabelAttributes","getAriaLabelAttributes","React","styles","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}
+{"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  return [value, setSafeValue];\n};\n\ninterface 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  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst MAX_VALUE = 100;\nconst MIN_VALUE = 0;\nconst STEP = 1;\nconst LARGE_STEP = 10;\n\nexport const Slider: React.FC<SliderProps> = ({ title, ariaLabel, labelLeft, labelRight, disabled = false, onChange, testId }) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((MAX_VALUE - MIN_VALUE) / 2, MIN_VALUE, MAX_VALUE);\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 { width: markerWidth } = useSize(markerRef) || { width: 0 };\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    return Math.round(((markerPosition - trackPosition) / trackWidth) * (MAX_VALUE - MIN_VALUE));\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(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 (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\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        setValue(value - STEP);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - LARGE_STEP);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + STEP);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + LARGE_STEP);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(MIN_VALUE);\n        flag = true;\n        break;\n      case 'End':\n        setValue(MAX_VALUE);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\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    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = ((trackWidth - markerWidth) / (MAX_VALUE - MIN_VALUE)) * value;\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  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\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'])} />\n        <div\n          role={disabled ? undefined : 'slider'}\n          ref={markerRef}\n          className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n          style={{\n            left: `${markerXPos}px`,\n          }}\n          onKeyDown={handleKeyDown}\n          aria-valuenow={value}\n          aria-valuemin={MIN_VALUE}\n          aria-valuemax={MAX_VALUE}\n          tabIndex={disabled ? undefined : 0}\n          aria-disabled={disabled}\n          {...ariaLabelAttributes}\n        />\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","newValue","MAX_VALUE","MIN_VALUE","STEP","LARGE_STEP","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","markerWidth","useEffect","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","handlePointerMove","e","handleKeyDown","flag","handleTrackClick","handlePointerDown","markerXPos","ariaLabelAttributes","getAriaLabelAttributes","React","styles","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}

package/components/Step/Step.d.ts

@@ -14,6 +14,8 @@ interface StepProps {
     additionalButtons?: React.ReactElement<ButtonProps>[];
     /** Knapp for å avbryte eller fortsette senere. Vises med "borderless" variant. */
     cancelButton?: React.ReactElement<ButtonProps>;
+    /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */
+    stickyButtons?: boolean;
 }
 declare const Step: React.FC<StepProps>;
 export default Step;

package/components/Step/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/Step/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1C,UAAU,SAAS;IACjB,gCAAgC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC7C,uDAAuD;IACvD,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAChD,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IACtD,kFAAkF;IAClF,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiC7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/Step/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1C,UAAU,SAAS;IACjB,gCAAgC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC7C,uDAAuD;IACvD,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAChD,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IACtD,kFAAkF;IAClF,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC/C,uHAAuH;IACvH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAoE7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/Step/componentdata.json

@@ -1 +1 @@
-{"props":{"stepper":{"defaultValue":null,"description":"Stepper viser fremdriften","name":"stepper","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<StepperProps, string | JSXElementConstructor<any>>"}},"children":{"defaultValue":null,"description":"Innhold i steget","name":"children","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"backButton":{"defaultValue":null,"description":"Knapp for å gå tilbake. Vises med \"outline\" variant.","name":"backButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"forwardButton":{"defaultValue":null,"description":"Knapp for å gå videre. Vises med \"fill\" variant.","name":"forwardButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"additionalButtons":{"defaultValue":null,"description":"Ekstra knapper. Valgfritt utseende.","name":"additionalButtons","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>[]"}},"cancelButton":{"defaultValue":null,"description":"Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant.","name":"cancelButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}}}}
+{"props":{"stepper":{"defaultValue":null,"description":"Stepper viser fremdriften","name":"stepper","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<StepperProps, string | JSXElementConstructor<any>>"}},"children":{"defaultValue":null,"description":"Innhold i steget","name":"children","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"backButton":{"defaultValue":null,"description":"Knapp for å gå tilbake. Vises med \"outline\" variant.","name":"backButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"forwardButton":{"defaultValue":null,"description":"Knapp for å gå videre. Vises med \"fill\" variant.","name":"forwardButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"additionalButtons":{"defaultValue":null,"description":"Ekstra knapper. Valgfritt utseende.","name":"additionalButtons","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>[]"}},"cancelButton":{"defaultValue":null,"description":"Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant.","name":"cancelButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"stickyButtons":{"defaultValue":{"value":"false"},"description":"Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false","name":"stickyButtons","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"boolean"}}}}

package/components/Step/index.js

@@ -1,2 +1,2 @@
-import e from"react";import s from"classnames";import t from"./styles.module.scss";const _=({stepper:n,children:p,backButton:a,forwardButton:l,additionalButtons:m,cancelButton:r})=>e.createElement(e.Fragment,null,n&&e.createElement("div",{className:t.step__stepper},n),e.createElement("div",{className:t.step__content},p),e.createElement("div",{className:t.step__navigation},(a||l)&&e.createElement("div",{className:s(t.step__buttons,t["step__buttons--navigation"])},a&&e.cloneElement(a,{variant:"outline",wrapperClassName:s(t["step__button--back"])}),l&&e.cloneElement(l,{variant:"fill",wrapperClassName:s(t["step__button--forward"])})),m&&e.createElement("div",{className:s(t.step__buttons,t["step__buttons--additional"])},m),r&&e.createElement("div",{className:t.step__buttons},e.cloneElement(r,{variant:"borderless"})))),v=_;export{v as default};
+import t,{useRef as d}from"react";import s from"classnames";import{useSticky as h}from"../../hooks/useSticky.js";import e from"./styles.module.scss";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";const y=({stepper:m,children:f,backButton:n,forwardButton:i,additionalButtons:o,cancelButton:l,stickyButtons:a=!1})=>{const p=d(null),c=d(null),{isOutsideWindow:g,offsetHeight:r,contentWidth:_}=h(p,c,"bottom"),N=a&&g,v=n||i||o||l,E=s(!v&&e["step__content--no-navigation"]),b=s(e.step__navigation,!v&&e["step__navigation--hidden"],a&&e["step__navigation--has-sticky-buttons"],N&&e["step__navigation--is-sticky"]);return t.createElement("div",{className:s(a&&e["step--has-sticky-buttons"])},m&&t.createElement("div",{className:e.step__stepper},m),t.createElement("div",{className:E,ref:p,style:{paddingBottom:a&&r?`${r}px`:void 0}},f),t.createElement("div",{className:b,ref:c,style:{width:a&&_?`${_}px`:void 0}},(n||i)&&t.createElement("div",{className:s(e.step__buttons,e["step__buttons--navigation"])},n&&t.cloneElement(n,{variant:"outline",wrapperClassName:s(e["step__button--back"])}),i&&t.cloneElement(i,{variant:"fill",wrapperClassName:s(e["step__button--forward"])})),o&&t.createElement("div",{className:s(e.step__buttons,e["step__buttons--additional"])},o),l&&t.createElement("div",{className:e.step__buttons},t.cloneElement(l,{variant:"borderless"}))))},w=y;export{w as default};
 //# sourceMappingURL=index.js.map