@helsenorge/designsystem-react 5.10.0 → 5.11.0

package/Button.js

@@ -1,2 +1,2 @@
-import e,{useRef as it,useEffect as ct}from"react";import w from"classnames";import{Icon as ut}from"./components/Icons/Icon.js";import{AnalyticsId as U,IconSize as v}from"./constants.js";import{useBreakpoint as mt}from"./hooks/useBreakpoint.js";import{useHover as V}from"./hooks/useHover.js";import{useIcons as pt}from"./hooks/useIcons.js";import{useSize as dt}from"./hooks/useSize.js";import{getColor as i}from"./theme/currys/color.js";import{breakpoints as bt}from"./theme/grid.js";import{isTest as ft,isProd as ht}from"./utils/environment.js";import gt from"./components/Icons/ArrowRight.js";import t from"./components/Button/styles.module.scss";const wt=(o,n,a,p,s,C)=>C&&a?!s||o?i("neutral",n?500:700):i("white"):a?!s||o?i("neutral",500):`${i("white")}b3`:o&&!s||!o&&s?"white":p==="normal"?i("blueberry",600):i("cherry",500),B=(o,n)=>n&&o?v.Small:o?v.Medium:v.XSmall,Ct=(o,n,a)=>{if(a&&o&&(n===void 0||n===""))throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav")},It=e.forwardRef(function(n,a){const{ariaLabel:p,id:s,children:C,wrapperClassName:j,className:q,arrow:N=!1,concept:R="normal",disabled:d=!1,ellipsis:S=!1,fluid:D=!1,htmlMarkup:I="button",mode:X="onlight",onBlur:z,onClick:E,size:G="medium",variant:_="fill",href:J,tabIndex:M,testId:x,target:A,type:K="button",...F}=n,[b,f,W]=pt(e.Children.toArray(C)),{hoverRef:$,isHovered:Q}=I==="button"?V(a):V(a),H=it(null),c=dt(H),l=!!(b||f)&&!W,Y=b&&(f||N)&&!l,y=X==="ondark",h=mt()<bt.md,L=R==="destructive"&&!d,Z=_==="outline",u=_==="borderless",tt=wt(_==="fill",u,d,R,y,h),O=N&&!u,m=G==="large"&&!L&&!u,et={...F},P=w(t["button-wrapper"],{[t["button-wrapper--fluid"]]:D||S},j),ot=w(t.button,{[t["button--destructive"]]:L,[t["button--normal"]]:!m,[t["button--large"]]:m,[t["button--outline"]]:Z,[t["button--borderless"]]:u,[t["button--left-icon"]]:b&&!l,[t["button--right-icon"]]:f&&!l,[t["button--both-icons"]]:Y,[t["button--only-icon"]]:l,[t["button--arrow"]]:O,[t["button--on-dark"]]:y},q),rt=w(t.button__text,{[t["button__text--ellipsis"]]:S}),nt=w(t.diagonal,{[t["diagonal--on-dark"]]:y});ct(()=>{Ct(l,p,!ft()&&!ht())},[]);const k=(r,g,st)=>{const lt=r&&r.props&&r.props.color?r.props.color:tt;return r&&Object.keys(r).length>0?e.cloneElement(r,{size:g,color:lt,isHovered:Q,className:st}):null},at=()=>{let r,g;return c&&(r=Math.atan2(c.height,c.width),g=Math.sqrt(Math.pow(c.width,2)+Math.pow(c.height,2))),e.createElement("span",{className:rt,ref:H},d&&u&&e.createElement("span",{className:nt},e.createElement("span",{style:{transform:`rotate(${r}rad)`,width:g},className:t.diagonal__line})),e.createElement("span",null,l?p:W))},T=()=>e.createElement("span",{className:ot},k(b,B(m,h),l?void 0:t["button__left-icon"]),at(),O?k(e.createElement(ut,{svgIcon:gt}),B(m,h),t.button__arrow):k(f,B(m,h),t["button__right-icon"]));return e.createElement(e.Fragment,null,I==="button"&&e.createElement("button",{id:s,onBlur:z,onClick:E,disabled:d,"data-testid":x,"data-analyticsid":U.Button,className:P,ref:$,tabIndex:M,type:K,...et},T()),I==="a"&&e.createElement("a",{id:s,onBlur:z,onClick:E,"data-testid":x,"data-analyticsid":U.Button,className:P,href:J,target:A,rel:A==="_blank"?"noopener noreferrer":n.rel,ref:$,tabIndex:M,...F},T()))}),Wt=It;export{Wt as B};
+import o,{useRef as it,useEffect as ct}from"react";import p from"classnames";import{Icon as ut}from"./components/Icons/Icon.js";import{AnalyticsId as V,IconSize as v}from"./constants.js";import{useBreakpoint as mt}from"./hooks/useBreakpoint.js";import{useHover as j}from"./hooks/useHover.js";import{useIcons as pt}from"./hooks/useIcons.js";import{useSize as bt}from"./hooks/useSize.js";import{getColor as i}from"./theme/currys/color.js";import{breakpoints as dt}from"./theme/grid.js";import{isTest as ft,isProd as ht}from"./utils/environment.js";import gt from"./components/Icons/ArrowRight.js";import t from"./components/Button/styles.module.scss";const wt=(e,n,a,b,s,_)=>_&&a?!s||e?i("neutral",n?500:700):i("white"):a?!s||e?i("neutral",500):`${i("white")}b3`:e&&!s||!e&&s?"white":b==="normal"?i("blueberry",600):i("cherry",500),B=(e,n)=>n&&e?v.Small:e?v.Medium:v.XSmall,_t=(e,n,a)=>{if(a&&e&&(n===void 0||n===""))throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav")},Ct=o.forwardRef(function(n,a){const{ariaLabel:b,id:s,children:_,wrapperClassName:q,className:D,arrow:N=!1,concept:R="normal",disabled:d=!1,ellipsis:S=!1,fluid:X=!1,htmlMarkup:C="button",mode:G="onlight",onBlur:z,onClick:E,size:J="medium",variant:I="fill",href:K,tabIndex:M,testId:x,target:A,type:Q="button",...F}=n,[f,h,W]=pt(o.Children.toArray(_)),{hoverRef:$,isHovered:Y}=C==="button"?j(a):j(a),H=it(null),c=bt(H),l=!!(f||h)&&!W,L=f&&(h||N)&&!l,y=G==="ondark",g=mt()<dt.md,O=R==="destructive"&&!d,Z=I==="outline",u=I==="borderless",tt=wt(I==="fill",u,d,R,y,g),P=N&&!u,m=J==="large"&&!O&&!u,ot={...F},T=p(t["button-wrapper"],{[t["button-wrapper--fluid"]]:X||S},q),et=p(t.button,{[t["button--destructive"]]:O,[t["button--normal"]]:!m,[t["button--large"]]:m,[t["button--outline"]]:Z,[t["button--borderless"]]:u,[t["button--left-icon"]]:f&&!l,[t["button--right-icon"]]:h&&!l,[t["button--both-icons"]]:L,[t["button--only-icon"]]:l,[t["button--arrow"]]:P,[t["button--on-dark"]]:y},D),rt=p(t.button__text,{[t["button__text--ellipsis"]]:S}),nt=p(t.diagonal,{[t["diagonal--on-dark"]]:y});ct(()=>{_t(l,b,!ft()&&!ht())},[]);const k=(r,w,st)=>{const lt=r&&r.props&&r.props.color?r.props.color:tt;return r&&Object.keys(r).length>0?o.cloneElement(r,{size:w,color:lt,isHovered:Y,className:st}):null},at=()=>{let r,w;return c&&(r=Math.atan2(c.height,c.width),w=Math.sqrt(Math.pow(c.width,2)+Math.pow(c.height,2))),o.createElement("span",{className:rt,ref:H},d&&u&&o.createElement("span",{className:nt},o.createElement("span",{style:{transform:`rotate(${r}rad)`,width:w},className:t.diagonal__line})),o.createElement("span",null,l?b:W))},U=()=>o.createElement("span",{className:et},k(f,B(m,g),l?void 0:t["button__left-icon"]),at(),P?k(o.createElement(ut,{svgIcon:gt}),B(m,g),p(t.button__arrow,{[t["button__arrow--both-icons"]]:L})):k(h,B(m,g),t["button__right-icon"]));return o.createElement(o.Fragment,null,C==="button"&&o.createElement("button",{id:s,onBlur:z,onClick:E,disabled:d,"data-testid":x,"data-analyticsid":V.Button,className:T,ref:$,tabIndex:M,type:Q,...ot},U()),C==="a"&&o.createElement("a",{id:s,onBlur:z,onClick:E,"data-testid":x,"data-analyticsid":V.Button,className:T,href:K,target:A,rel:A==="_blank"?"noopener noreferrer":n.rel,ref:$,tabIndex:M,...F},U()))}),Wt=Ct;export{Wt as B};
 //# sourceMappingURL=Button.js.map

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, { IconProps, IconSize } from './../Icons/';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useIcons } from '../../hooks/useIcons';\nimport { useSize } from '../../hooks/useSize';\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 ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\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?: boolean;\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  mode?: ButtonMode;\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  /** 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) => {\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 = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\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 buttonContentSize = useSize(buttonContentRef);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === '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 && !borderlessVariant;\n  const large = size === 'large' && !destructive && !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(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\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 = (\n    iconElement: React.ReactElement<IconProps> | {} | undefined | null,\n    iconSize: number,\n    iconClassName?: string\n  ): React.ReactElement<IconProps> | React.Component<IconProps> | null => {\n    const color =\n      iconElement && (iconElement as React.ReactElement<IconProps>).props && (iconElement as React.ReactElement<IconProps>).props.color\n        ? (iconElement as React.ReactElement<IconProps>).props.color\n        : iconColor;\n    return iconElement && Object.keys(iconElement).length > 0\n      ? React.cloneElement(iconElement as React.ReactElement<IconProps>, { size: iconSize, color, isHovered, className: iconClassName })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    let angle;\n    let diagonalWidth;\n    if (buttonContentSize) {\n      angle = Math.atan2(buttonContentSize.height, buttonContentSize.width);\n      diagonalWidth = Math.sqrt(Math.pow(buttonContentSize.width, 2) + Math.pow(buttonContentSize.height, 2));\n    }\n\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} 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(<Icon svgIcon={ArrowRight} />, getLargeIconSize(large, mobile), buttonStyles['button__arrow'])\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\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":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","buttonContentSize","useSize","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","color","renderButtonContent","angle","diagonalWidth","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"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, { IconProps, IconSize } from './../Icons/';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useIcons } from '../../hooks/useIcons';\nimport { useSize } from '../../hooks/useSize';\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 ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\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?: boolean;\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  mode?: ButtonMode;\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  /** 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) => {\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 = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\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 buttonContentSize = useSize(buttonContentRef);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === '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 && !borderlessVariant;\n  const large = size === 'large' && !destructive && !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(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\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 = (\n    iconElement: React.ReactElement<IconProps> | {} | undefined | null,\n    iconSize: number,\n    iconClassName?: string\n  ): React.ReactElement<IconProps> | React.Component<IconProps> | null => {\n    const color =\n      iconElement && (iconElement as React.ReactElement<IconProps>).props && (iconElement as React.ReactElement<IconProps>).props.color\n        ? (iconElement as React.ReactElement<IconProps>).props.color\n        : iconColor;\n    return iconElement && Object.keys(iconElement).length > 0\n      ? React.cloneElement(iconElement as React.ReactElement<IconProps>, { size: iconSize, color, isHovered, className: iconClassName })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    let angle;\n    let diagonalWidth;\n    if (buttonContentSize) {\n      angle = Math.atan2(buttonContentSize.height, buttonContentSize.width);\n      diagonalWidth = Math.sqrt(Math.pow(buttonContentSize.width, 2) + Math.pow(buttonContentSize.height, 2));\n    }\n\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} 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    </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":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","buttonContentSize","useSize","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","color","renderButtonContent","angle","diagonalWidth","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"mappings":"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"}

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [5.10.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.9.2&targetVersion=GTv5.10.0) (2023-12-13)
+
+### Features
+
+- button onblur lagt til ([e30e815](https://github.com/helsenorge/designsystem/commit/e30e8152dcac4341af0879e6b5379b6c992701b2)), closes
+  [#315943](https://github.com/helsenorge/designsystem/issues/315943)
+
+### Bug Fixes
+
+- input og textarea har ikke defaultValue som default
+  ([2f0a39d](https://github.com/helsenorge/designsystem/commit/2f0a39da5a85558488fdb14280888ceb1a3f49ec)), closes
+  [#309847](https://github.com/helsenorge/designsystem/issues/309847)
+
 ## [5.9.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.9.1&targetVersion=GTv5.9.2) (2023-12-12)
 
 ### Bug Fixes

package/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAKjE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAe,MAAM,iBAAiB,CAAC;AAYhF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC;AAC9D,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAC;AAExC,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe,EAAE,cAAc;IACnF,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iGAAiG;IACjG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oDAAoD;IACpD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACvI,uGAAuG;IACvG,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9D;AAkCD,QAAA,MAAM,MAAM,2GAqKV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAKjE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAe,MAAM,iBAAiB,CAAC;AAYhF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC;AAC9D,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAC;AAExC,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe,EAAE,cAAc;IACnF,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iGAAiG;IACjG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oDAAoD;IACpD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACvI,uGAAuG;IACvG,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9D;AAkCD,QAAA,MAAM,MAAM,2GAyKV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Button/styles.module.scss

@@ -7,19 +7,19 @@
 
 $dark-mode-disabled-transparrent: #ffffffb3;
 $with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
-  'left-icon' 'normal' getSpacer(4xs) getSpacer(xs) getSpacer(xs) getSpacer(m) 0 getSpacer(3xs) 0 getSpacer(2xs),
-  'right-icon' 'normal' getSpacer(xs) getSpacer(4xs) getSpacer(m) getSpacer(xs) getSpacer(3xs) 0 getSpacer(2xs) 0,
+  'left-icon' 'normal' getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(m) 0 getSpacer(3xs) 0 getSpacer(2xs),
+  'right-icon' 'normal' getSpacer(s) getSpacer(xs) getSpacer(m) getSpacer(xs) getSpacer(3xs) 0 getSpacer(2xs) 0,
   'left-icon' 'large' getSpacer(xs) getSpacer(m) getSpacer(s) getSpacer(l) 0 getSpacer(2xs) 0 getSpacer(xs),
   'right-icon' 'large' getSpacer(m) getSpacer(xs) getSpacer(l) getSpacer(s) getSpacer(2xs) 0 getSpacer(xs) 0,
-  'arrow' 'normal' getSpacer(xs) getSpacer(4xs) getSpacer(m) getSpacer(xs) getSpacer(m) 0 getSpacer(l) 0,
-  'arrow' 'large' getSpacer(m) getSpacer(xs) getSpacer(l) getSpacer(s) getSpacer(l) 0 getSpacer(xl) 0,
+  'arrow' 'normal' getSpacer(s) getSpacer(xs) getSpacer(m) getSpacer(xs) getSpacer(m) 0 getSpacer(l) 0,
+  'arrow' 'large' getSpacer(m) getSpacer(xs) getSpacer(l) getSpacer(xs) getSpacer(l) 0 getSpacer(xl) 0,
+  'arrow--both-icons' 'normal' 0 0 0 0 getSpacer(s) 0 getSpacer(m) 0, 'arrow--both-icons' 'large' 0 0 0 0 getSpacer(m) 0 getSpacer(l) 0,
   'only-icon' 'normal' 0.062rem 0.062rem 0.375rem 0.375rem 0 0 0 0,
   'only-icon' 'large' 0.312rem 0.312rem getSpacer(3xs) getSpacer(3xs) 0 0 0 0,
-  'both-icons' 'normal' getSpacer(4xs) getSpacer(4xs) getSpacer(xs) getSpacer(xs) 0 0 0 0,
-  'both-icons' 'large' getSpacer(xs) getSpacer(xs) getSpacer(s) getSpacer(s) 0 0 0 0;
+  'both-icons' 'normal' getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(xs) 0 0 0 0,
+  'both-icons' 'large' getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(xs) 0 0 0 0;
 
 @mixin focus-shadow {
-  outline: none;
   box-shadow: 0 0 0 getSpacer(3xs) $black;
 }
 
@@ -44,10 +44,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   outline-offset: getSpacer(4xs) * -1;
 
   &:hover {
-    color: $ouline-color;
-    outline: getSpacer(4xs) solid $hover-outline-color;
-    outline-offset: 0;
-    box-shadow: 0 0 0 getSpacer(3xs) $ouline-color;
+    box-shadow: none;
   }
 
   :disabled > & {
@@ -171,13 +168,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   background-color: transparent;
   outline: none;
   border: 0;
-  padding: getSpacer(2xs) 0;
-  margin: getSpacer(2xs) * -1 0;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    padding: 0;
-    margin: 0;
-  }
+  padding: 0;
 
   &--fluid {
     width: 100%;
@@ -199,13 +190,14 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   font-size: $font-size-sm;
   font-weight: 600;
   font-family: inherit;
-  line-height: 1.25rem;
+  line-height: 1.375rem;
   align-items: center;
   width: 100%;
-  min-height: 2.5rem;
+  min-height: 2.75rem;
   box-sizing: border-box;
   outline: none;
   border: 0;
+  border-radius: 0.5rem;
   letter-spacing: unset;
 
   &:hover {
@@ -228,14 +220,19 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     min-height: 3.125rem;
     padding: 0 getSpacer(l);
     font-size: $font-size-md;
+    line-height: 1.5rem;
   }
 
   &--large {
-    min-height: 3.625rem;
+    min-height: 3.5rem;
     padding: 0 getSpacer(l);
+    font-size: 1.3125rem;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       min-height: 4.5rem;
+      padding: 0 getSpacer(xl);
+      font-size: $font-size-lg;
+      line-height: 1.5rem;
     }
   }
 
@@ -274,7 +271,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   &--outline,
   &--borderless {
-    @include outline-borderless($blueberry50);
+    @include outline-borderless(rgba(18, 111, 135, 0.1));
   }
   &--outline#{&}--destructive,
   &--borderless#{&}--destructive {
@@ -295,6 +292,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   /* stylelint-disable-next-line */
   &--borderless {
+    border-radius: 0;
     &:hover {
       box-shadow: none;
     }

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

@@ -1,6 +1,7 @@
 export type Styles = {
   button: string;
   button__arrow: string;
+  'button__arrow--both-icons': string;
   'button__both-icons': string;
   'button__left-icon': string;
   'button__only-icon': string;
@@ -8,6 +9,7 @@ export type Styles = {
   button__text: string;
   'button__text--ellipsis': string;
   'button--arrow': string;
+  'button--arrow--both-icons': string;
   'button--borderless': string;
   'button--both-icons': string;
   'button--destructive': string;

package/components/Icons/AdditionalIconInformation.js

@@ -286,13 +286,14 @@ export default {
   healthcareperson: { alternativeName: 'Helseperson', categories: 'Generisk, Personer' },
   grouptwins: { alternativeName: 'Gruppe Tvillinger', categories: 'Generisk, Personer' },
   sun: { alternativeName: 'Sol', categories: 'Generisk' },
-  ear: { alternativeName: 'Øre', categories: 'Generisk' },
-  earhearingaid: { alternativeName: 'Øre Høreapparat', categories: 'Generisk' },
-  earvolume: { alternativeName: 'Øre Volum', categories: 'Generisk' },
-  eardeaf: { alternativeName: 'Øre Døv', categories: 'Generisk' },
-  braille: { alternativeName: 'Blindeskrift', categories: 'Generisk' },
-  screenreader: { alternativeName: 'Skjermleser', categories: 'Generisk' },
-  hearingprotection: { alternativeName: 'Hørselsvern', categories: 'Generisk' },
+  ear: { alternativeName: 'Øre', categories: 'Generisk, Syn og hørsel' },
+  earhearingaid: { alternativeName: 'Øre Høreapparat', categories: 'Generisk, Syn og hørsel' },
+  earvolume: { alternativeName: 'Øre Volum', categories: 'Generisk, Syn og hørsel' },
+  eardeaf: { alternativeName: 'Øre Døv', categories: 'Generisk, Syn og hørsel' },
+  braille: { alternativeName: 'Blindeskrift', categories: 'Generisk, Syn og hørsel' },
+  screenreader: { alternativeName: 'Skjermleser', categories: 'Generisk, Syn og hørsel' },
+  hearingprotection: { alternativeName: 'Hørselsvern', categories: 'Generisk, Syn og hørsel' },
   htmlfile: { alternativeName: 'HTML-fil', categories: 'Filtyper' },
   emergencycall: { alternativeName: 'Nødsamtale', categories: 'Generisk' },
+  glasses: { alternativeName: 'Briller', categories: 'Generisk, Syn og hørsel' },
 };

package/components/RadioButton/styles.module.scss

@@ -238,7 +238,7 @@
     color: $neutral200;
 
     &:hover {
-      background-color: $inverted-hover;
+      background-color: $inverted-hover-old;
       box-shadow: 0 0 0 getSpacer(3xs);
     }
 
@@ -255,7 +255,7 @@
       color: $blueberry200;
 
       &:hover {
-        background-color: $inverted-hover;
+        background-color: $inverted-hover-old;
       }
 
       &:focus {

package/package.json

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

package/scss/_palette.scss

@@ -61,7 +61,8 @@ $plum600: #6a2abf;
 $plum700: #5b22a6;
 $plum800: #4c1b8c;
 $plum900: #3c1471;
-$inverted-hover: #ffffff0d;
+$inverted-hover-old: #ffffff0d;
+$inverted-hover: #ffffff1a;
 $transparent-grey: rgb(102 102 102 / 75%);
 $palette-map: (
   'banana50': $banana50,