@helsenorge/designsystem-react 10.0.0 → 10.0.2

package/Button.js

@@ -116,7 +116,7 @@ const Button = React.forwardRef(function ButtonForwardedRef(props, ref) {
     return iconElement ? React.cloneElement(iconElement, {
       size: iconSize,
       color: (iconElement == null ? void 0 : iconElement.props.color) && !disabled ? iconElement.props.color : iconColor,
-      isHovered: !disabled && isHovered,
+      isHovered: iconElement.props.isHovered === void 0 ? !disabled && isHovered : iconElement.props.isHovered,
       className: iconClassName
     }) : null;
   };

package/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the text */\n  textClassName?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(\n    buttonStyles['button__text'],\n    {\n      [buttonStyles['button__text--ellipsis']]: ellipsis,\n      [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n    },\n    textClassName\n  );\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: !disabled && isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n      {hasUURightArrow && (\n        <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n          {'  →'}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the text */\n  textClassName?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(\n    buttonStyles['button__text'],\n    {\n      [buttonStyles['button__text--ellipsis']]: ellipsis,\n      [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n    },\n    textClassName\n  );\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n      {hasUURightArrow && (\n        <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n          {'  →'}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":[],"mappings":"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"}

package/CHANGELOG.md

@@ -1,3 +1,99 @@
+## [10.0.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.0.0&targetVersion=GTv10.0.1) (2025-01-28)
+
+### Bug Fixes
+
+- feil letterspacing for title5 ([f1391bd](https://github.com/helsenorge/designsystem/commit/f1391bd18a30b8b2da737c6687e55b61b752a1fa)),
+  closes [#342902](https://github.com/helsenorge/designsystem/issues/342902)
+
+## [10.0.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv9.7.0&targetVersion=GTv10.0.0) (2025-01-27)
+
+### Bug Fixes
+
+- stylelint ([ebaa482](https://github.com/helsenorge/designsystem/commit/ebaa48251f10436b772a818ce735b544ce8749b7))
+
+## 10.0.0-beta.5 (2025-01-22)
+
+### Features
+
+- **badge:** endre oppbygning av komponenten"
+  ([89dd434](https://github.com/helsenorge/designsystem/commit/89dd4342e9aa0bc1d9d9da8fe5699fd04adfb206)), closes
+  [#339274](https://github.com/helsenorge/designsystem/issues/339274) [#339274](https://github.com/helsenorge/designsystem/issues/339274)
+- **emptystate:** støtte for både tittel og brødtekst
+  ([676d1c3](https://github.com/helsenorge/designsystem/commit/676d1c362d1341d48ffd598402f1032a7d615362)), closes
+  [#342140](https://github.com/helsenorge/designsystem/issues/342140)
+
+## 10.0.0-beta.4 (2025-01-10)
+
+### Features
+
+- **datepicker:** arialabels er nå et object av strings
+  ([63bbd43](https://github.com/helsenorge/designsystem/commit/63bbd4362be32744bff0add8f37a9fb07c8fc8f5)), closes
+  [#331806](https://github.com/helsenorge/designsystem/issues/331806)
+
+### Bug Fixes
+
+- import på riktig format ([8d2a26c](https://github.com/helsenorge/designsystem/commit/8d2a26cda5d370f8b5eb7acd61c3439d902b6998)), closes
+  [#339137](https://github.com/helsenorge/designsystem/issues/339137) [#339137](https://github.com/helsenorge/designsystem/issues/339137)
+
+## 10.0.0-beta.3 (2024-12-20)
+
+### Bug Fixes
+
+- label renderasparent rendrer nå subdued igjen når det passeres inn ren string
+  ([7851865](https://github.com/helsenorge/designsystem/commit/7851865ac788f7f2390a8093f049b40f020c650b))
+
+## 10.0.0-beta.2 (2024-12-20)
+
+### Features
+
+- arialabels prop for og fikset disabled dager feil
+  ([e57ba55](https://github.com/helsenorge/designsystem/commit/e57ba55e4a2be478c659ec0515290aebed28674c)), closes
+  [#331806](https://github.com/helsenorge/designsystem/issues/331806)
+- **listheader:** tillat chevron på linklist size small
+  ([9e93688](https://github.com/helsenorge/designsystem/commit/9e9368842dffb8b26c14dfd914376bc3b002c88c)), closes
+  [#340288](https://github.com/helsenorge/designsystem/issues/340288)
+
+## 10.0.0-beta.1 (2024-12-18)
+
+### Bug Fixes
+
+- **emptystate:** behold bredden på illustrasjon
+  ([058c7f9](https://github.com/helsenorge/designsystem/commit/058c7f94fa84b96ff58944c6e7696cd44af01a07)), closes
+  [#336772](https://github.com/helsenorge/designsystem/issues/336772)
+
+## 10.0.0-beta.0 (2024-12-17)
+
+### Features
+
+- endret fonts ([6324729](https://github.com/helsenorge/designsystem/commit/632472942c9d83a33f5e508e3b9205193b72eeae)), closes
+  [#332727](https://github.com/helsenorge/designsystem/issues/332727)
+- oppdatert pakkeversjon og startet migrering
+  ([2a5f592](https://github.com/helsenorge/designsystem/commit/2a5f592b4f30e718a001e6a4a5b891087c85da0a))
+- oppdatert pakkeversjon og startet migrering"
+  ([09b7c27](https://github.com/helsenorge/designsystem/commit/09b7c2725d5c20d8a352349f3b673b17d717d130))
+- **avatar:** endre variant normal til square
+  ([8453374](https://github.com/helsenorge/designsystem/commit/8453374c0c64c8bedc005c346286f8d370c7d546)), closes
+  [#337118](https://github.com/helsenorge/designsystem/issues/337118)
+- **avatar:** nye navn for props ([37c8e0b](https://github.com/helsenorge/designsystem/commit/37c8e0be9a0186ccb24dbacafef858c4f2742a06)),
+  closes [#335338](https://github.com/helsenorge/designsystem/issues/335338)
+- **badge:** endre oppbygning av komponenten
+  ([12248cb](https://github.com/helsenorge/designsystem/commit/12248cb243322d8e83fe536b51f34ef231dadad8)), closes
+  [#339274](https://github.com/helsenorge/designsystem/issues/339274)
+- **datepicker:** date-fns peer-dependency satt til v4
+  ([a53ba94](https://github.com/helsenorge/designsystem/commit/a53ba94d6c720b87c3dbf466b2e6b25acc00082b)), closes
+  [#339137](https://github.com/helsenorge/designsystem/issues/339137)
+- **datepicker:** tar i bruk major 9 av reactdaypicker
+  ([778b49e](https://github.com/helsenorge/designsystem/commit/778b49e3feb8deebd3ae32a3d3de54cda93e2a20)), closes
+  [#331806](https://github.com/helsenorge/designsystem/issues/331806)
+- **emptystate:** nytt design med ny illustrasjon og flere varianter
+  ([e14a49f](https://github.com/helsenorge/designsystem/commit/e14a49fe26a30bd06e87e5ecf35a3bf6e5539b08)), closes
+  [#336772](https://github.com/helsenorge/designsystem/issues/336772)
+- **linklist:** nytt design ([43de477](https://github.com/helsenorge/designsystem/commit/43de477a3280d9ecf9aee997bc763fb82d269864)), closes
+  [#336491](https://github.com/helsenorge/designsystem/issues/336491)
+- **tabs:** touchbehavior prop er fjernet
+  ([994aded](https://github.com/helsenorge/designsystem/commit/994adeda6085664d26bf4e90ea111ef0fa6a9d78)), closes
+  [#328640](https://github.com/helsenorge/designsystem/issues/328640)
+
 ## [9.7.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv9.6.0&targetVersion=GTv9.7.0) (2025-01-24)
 
 ### Features

package/components/ListHeader/styles.module.scss

@@ -19,6 +19,8 @@
     font-size: inherit;
     font-weight: inherit;
     line-height: inherit;
+    padding: 0;
+    margin: 0;
   }
 
   &__content {

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "10.0.0",
+  "version": "10.0.2",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/scss/_font-mixins.scss

@@ -67,7 +67,6 @@
   @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.125rem;
     line-height: 1.563rem;
-    letter-spacing: 0.3375rem;
   }
 }