@helsenorge/designsystem-react 3.1.1 → 3.1.3

package/Button.js

@@ -1,2 +1,2 @@
-import e,{useRef as lt,useEffect as it}from"react";import w from"classnames";import{Icon as ct}from"./components/Icons/Icon.js";import{AnalyticsId as T,IconSize as k}from"./constants.js";import{useBreakpoint as ut}from"./hooks/useBreakpoint.js";import{useHover as U}from"./hooks/useHover.js";import{useIcons as mt}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 pt,isProd as ft}from"./utils/environment.js";import ht from"./components/Icons/ArrowRight.js";import t from"./components/Button/styles.module.scss";const gt=(o,n,a,d,s,v)=>v&&a?!s||o?i("neutral",n?500:700):i("white"):a?!s||o?i("neutral",500):`${i("white")}b3`:o&&!s||!o&&s?"white":d==="normal"?i("blueberry",600):i("cherry",500),N=(o,n)=>n&&o?k.Small:o?k.Medium:k.XSmall,wt=(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")},vt=e.forwardRef(function(n,a){const{ariaLabel:d,id:s,children:v,wrapperClassName:V,className:j,arrow:B=!1,concept:E="normal",disabled:b=!1,ellipsis:R=!1,fluid:q=!1,htmlMarkup:C="button",mode:D="onlight",onClick:S,size:X="medium",variant:I="fill",href:G,tabIndex:z,testId:M,target:x,type:J="button",...A}=n,[p,f,F]=mt(e.Children.toArray(v)),{hoverRef:W,isHovered:K}=C==="button"?U(a):U(a),$=lt(null),c=dt($),l=!!(p||f)&&!F,Q=p&&(f||B)&&!l,y=D==="ondark",h=ut()<bt.md,H=E==="destructive"&&!b,Y=I==="outline",u=I==="borderless",Z=gt(I==="fill",u,b,E,y,h),L=B&&!u,m=X==="large"&&!H&&!u,tt={...A},O=w(t["button-wrapper"],{[t["button-wrapper--fluid"]]:q||R},V),et=w(t.button,{[t["button--destructive"]]:H,[t["button--normal"]]:!m,[t["button--large"]]:m,[t["button--outline"]]:Y,[t["button--borderless"]]:u,[t["button--left-icon"]]:p&&!l,[t["button--right-icon"]]:f&&!l,[t["button--both-icons"]]:Q,[t["button--only-icon"]]:l,[t["button--arrow"]]:L,[t["button--on-dark"]]:y},j),ot=w(t.button__text,{[t["button__text--ellipsis"]]:R}),rt=w(t.diagonal,{[t["diagonal--on-dark"]]:y});it(()=>{wt(l,d,!pt()&&!ft())},[]);const _=(r,g,at)=>{const st=r&&r.props&&r.props.color?r.props.color:Z;return r&&Object.keys(r).length>0?e.cloneElement(r,{size:g,color:st,isHovered:K,className:at}):null},nt=()=>{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("div",{className:ot,ref:$},b&&u&&e.createElement("div",{className:rt},e.createElement("div",{style:{transform:`rotate(${r}rad)`,width:g},className:t.diagonal__line})),e.createElement("span",null,l?d:F))},P=()=>e.createElement(e.Fragment,null,e.createElement("div",{className:et},_(p,N(m,h),l?void 0:t["button__left-icon"]),nt(),L?_(e.createElement(ct,{svgIcon:ht}),N(m,h),t.button__arrow):_(f,N(m,h),t["button__right-icon"])));return e.createElement(e.Fragment,null,C==="button"&&e.createElement("button",{id:s,onClick:S,disabled:b,"data-testid":M,"data-analyticsid":T.Button,className:O,ref:W,tabIndex:z,type:J,...tt},P()),C==="a"&&e.createElement("a",{id:s,onClick:S,"data-testid":M,"data-analyticsid":T.Button,className:O,href:G,target:x,rel:x==="_blank"?"noopener noreferrer":n.rel,ref:W,tabIndex:z,...A},P()))}),Ft=vt;export{Ft as B};
+import e,{useRef as lt,useEffect as it}from"react";import w from"classnames";import{Icon as ct}from"./components/Icons/Icon.js";import{AnalyticsId as T,IconSize as v}from"./constants.js";import{useBreakpoint as ut}from"./hooks/useBreakpoint.js";import{useHover as U}from"./hooks/useHover.js";import{useIcons as mt}from"./hooks/useIcons.js";import{useSize as pt}from"./hooks/useSize.js";import{getColor as i}from"./theme/currys/color.js";import{breakpoints as dt}from"./theme/grid.js";import{isTest as bt,isProd as ft}from"./utils/environment.js";import ht from"./components/Icons/ArrowRight.js";import t from"./components/Button/styles.module.scss";const gt=(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),N=(o,n)=>n&&o?v.Small:o?v.Medium:v.XSmall,wt=(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")},Ct=e.forwardRef(function(n,a){const{ariaLabel:p,id:s,children:C,wrapperClassName:V,className:j,arrow:B=!1,concept:R="normal",disabled:d=!1,ellipsis:S=!1,fluid:q=!1,htmlMarkup:I="button",mode:D="onlight",onClick:z,size:X="medium",variant:y="fill",href:G,tabIndex:E,testId:M,target:x,type:J="button",...A}=n,[b,f,F]=mt(e.Children.toArray(C)),{hoverRef:W,isHovered:K}=I==="button"?U(a):U(a),$=lt(null),c=pt($),l=!!(b||f)&&!F,Q=b&&(f||B)&&!l,_=D==="ondark",h=ut()<dt.md,H=R==="destructive"&&!d,Y=y==="outline",u=y==="borderless",Z=gt(y==="fill",u,d,R,_,h),L=B&&!u,m=X==="large"&&!H&&!u,tt={...A},O=w(t["button-wrapper"],{[t["button-wrapper--fluid"]]:q||S},V),et=w(t.button,{[t["button--destructive"]]:H,[t["button--normal"]]:!m,[t["button--large"]]:m,[t["button--outline"]]:Y,[t["button--borderless"]]:u,[t["button--left-icon"]]:b&&!l,[t["button--right-icon"]]:f&&!l,[t["button--both-icons"]]:Q,[t["button--only-icon"]]:l,[t["button--arrow"]]:L,[t["button--on-dark"]]:_},j),ot=w(t.button__text,{[t["button__text--ellipsis"]]:S}),rt=w(t.diagonal,{[t["diagonal--on-dark"]]:_});it(()=>{wt(l,p,!bt()&&!ft())},[]);const k=(r,g,at)=>{const st=r&&r.props&&r.props.color?r.props.color:Z;return r&&Object.keys(r).length>0?e.cloneElement(r,{size:g,color:st,isHovered:K,className:at}):null},nt=()=>{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:ot,ref:$},d&&u&&e.createElement("span",{className:rt},e.createElement("span",{style:{transform:`rotate(${r}rad)`,width:g},className:t.diagonal__line})),e.createElement("span",null,l?p:F))},P=()=>e.createElement("span",{className:et},k(b,N(m,h),l?void 0:t["button__left-icon"]),nt(),L?k(e.createElement(ct,{svgIcon:ht}),N(m,h),t.button__arrow):k(f,N(m,h),t["button__right-icon"]));return e.createElement(e.Fragment,null,I==="button"&&e.createElement("button",{id:s,onClick:z,disabled:d,"data-testid":M,"data-analyticsid":T.Button,className:O,ref:W,tabIndex:E,type:J,...tt},P()),I==="a"&&e.createElement("a",{id:s,onClick:z,"data-testid":M,"data-analyticsid":T.Button,className:O,href:G,target:x,rel:x==="_blank"?"noopener noreferrer":n.rel,ref:W,tabIndex:E,...A},P()))}),Ft=Ct;export{Ft 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 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    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 = () => {\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      <div className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <div className={diagonalClasses}>\n            <div style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} className={buttonStyles['diagonal__line']} />\n          </div>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </div>\n    );\n  };\n\n  const renderbuttonContentWrapper = () => {\n    return (\n      <>\n        <div 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        </div>\n      </>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\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          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","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 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    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          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          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","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,19 @@
+## [3.1.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv3.1.1&targetVersion=GTv3.1.2) (2023-03-31)
+
+### Bug Fixes
+
+- styling av service message
+  ([4fd8e7d](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/4fd8e7dc23a7a6a469befda007cc846ed91640e2)), closes
+  [#292736](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292736)
+
+## [3.1.1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv3.1.0&targetVersion=GTv3.1.1) (2023-03-30)
+
+### Features
+
+- service message
+  ([fdbb1a6](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/fdbb1a6557c092eabc1c18ff2f7fb4515bf1b016)), closes
+  [#292736](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292736)
+
 ## [3.1.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv3.0.2&targetVersion=GTv3.1.0) (2023-03-29)
 
 ## [3.0.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv3.0.1&targetVersion=GTv3.0.2) (2023-03-29)
@@ -681,12 +697,12 @@
 
 ### Bug Fixes
 
-- panel har avstand fra tittel til badge
-  ([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
-  [#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
 - økt kontrast på understreking av lenker
   ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
   [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
+- panel har avstand fra tittel til badge
+  ([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
+  [#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
 
 ## [1.2.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/LinkList.js

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

package/LinkList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkList.js","sources":["../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { PaletteNames } from '../../theme/palette';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkListVariant = 'line' | 'outline' | 'fill';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  bottomBorder?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  topBorder?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'>;\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'neutral',\n    icon,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n\n  const liClasses = cn(LinkListStyles['link-list__list-item'], {\n    [LinkListStyles['link-list__list-item--line']]: variant === 'line',\n    [LinkListStyles['link-list__list-item--outline']]: variant === 'outline',\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles['link-list__anchor--' + color],\n\n    {\n      [LinkListStyles['link-list__anchor--fill']]: variant === 'fill',\n      [LinkListStyles['link-list__anchor--' + size]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' && (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </button>\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const { children, className = '', chevron = false, size = 'medium', color, testId, variant = 'line' } = props;\n  return (\n    <ul ref={ref} className={cn(LinkListStyles['link-list'], className)} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n        if ((child as React.ReactElement<LinkProps>).type === Link) {\n          return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron, variant });\n        }\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","linkRef","testId","target","variant","htmlMarkup","restProps","hoverRef","isHovered","useHover","liClasses","cn","LinkListStyles","linkClasses","AnalyticsId","renderListHeader","ChevronRight","LinkList","child","LinkList$1"],"mappings":"yRAwEA,MAAMA,EAAiBC,EAAM,WAAW,CAACC,EAAkBC,IAAkC,CACrF,KAAA,CACJ,SAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EAAQ,UACR,KAAAC,EACA,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,QAAAC,EACA,OAAAC,EACA,OAAAC,EACA,QAAAC,EACA,WAAAC,EAAa,IACb,GAAGC,CACD,EAAAb,EACE,CAAE,SAAAc,EAAU,UAAAC,CAAU,EAAIC,EAAgDR,CAAO,EAEjFS,EAAYC,EAAGC,EAAe,sBAAsB,EAAG,CAC3D,CAACA,EAAe,4BAA4B,CAAC,EAAGR,IAAY,OAC5D,CAACQ,EAAe,+BAA+B,CAAC,EAAGR,IAAY,SAAA,CAChE,EACKS,EAAcF,EAClBC,EAAe,mBAAmB,EAClCA,EAAe,sBAAwBf,CAAK,EAE5C,CACE,CAACe,EAAe,yBAAyB,CAAC,EAAGR,IAAY,OACzD,CAACQ,EAAe,sBAAwBb,CAAI,CAAC,EAAGA,EAChD,CAACa,EAAe,2BAA2B,CAAC,EAAGP,IAAe,QAChE,EACAT,CAAA,EAGA,OAAAJ,EAAA,cAAC,KAAG,CAAA,UAAWkB,EAAW,IAAAhB,EAAU,cAAaQ,EAAQ,mBAAkBY,EAAY,IACpF,EAAAT,IAAe,KACdb,EAAA,cAAC,IAAA,CACC,UAAWqB,EACX,IAAKN,EACL,IAAKJ,IAAW,SAAW,sBAAwB,OACnD,OAAAA,EACC,GAAGG,CAAA,EAEHS,EAAiBpB,EAAU,OAAQa,EAAWT,EAAMC,EAAUgB,EAAe,OAAWlB,CAAI,CAC/F,EAEDO,IAAe,UACdb,EAAA,cAAC,UAAO,UAAWqB,EAAa,IAAKN,EAAgD,KAAK,SAAU,GAAGD,CACpG,EAAAS,EAAiBpB,EAAU,OAAQa,EAAWT,EAAMC,EAAUgB,EAAe,OAAWlB,CAAI,CAC/F,CAEJ,CAEJ,CAAC,EAEYmB,EAAWzB,EAAM,WAAW,SAA8BC,EAAsBC,EAAkC,CAC7H,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,QAAAI,EAAU,GAAO,KAAAD,EAAO,SAAU,MAAAF,EAAO,OAAAK,EAAQ,QAAAE,EAAU,MAAA,EAAWX,EAEtG,OAAAD,EAAA,cAAC,MAAG,IAAAE,EAAU,UAAWiB,EAAGC,EAAe,WAAW,EAAGhB,CAAS,EAAG,cAAaM,EAAQ,mBAAkBY,EAAY,QACrH,EAAAtB,EAAM,SAAS,IAAIG,EAAWuB,GAA2D,CACnF,GAAAA,EAAwC,OAAS3B,EAC7C,OAAAC,EAAM,aAAa0B,EAAwC,CAAE,MAAArB,EAAO,KAAAE,EAAM,QAAAC,EAAS,QAAAI,EAAS,CAEtG,CAAA,CACH,CAEJ,CAAC,EAEDa,EAAS,KAAO1B,EAChBA,EAAK,YAAc,gBAEnB,MAAA4B,EAAeF"}

package/ListHeader.js

@@ -1,2 +1,2 @@
-import n from"react";import h from"classnames";import{L as A}from"./ListHeaderText.js";import{useBreakpoint as k,Breakpoint as B}from"./hooks/useBreakpoint.js";import{isComponent as u,isComponentWithChildren as b}from"./utils/component.js";import{A as R,a as w}from"./Avatar.js";import{B as X}from"./Badge.js";import{Icon as M}from"./components/Icons/Icon.js";import{IconSize as C}from"./constants.js";import t from"./components/ListHeader/styles.module.scss";const P=(l,f,c,m,o,i)=>{if(u(l,E))return n.cloneElement(l,{chevronIcon:o,icon:i,isHovered:c,size:m});if(l)return n.createElement(E,{titleHtmlMarkup:f,chevronIcon:o,icon:i,isHovered:c,size:m},l)},N=(l,f=!1)=>{var d,v,_,s;let c,m;const o=[],i=[],a=[];n.Children.forEach(l,e=>{e===null||typeof e>"u"||(u(e,R)?c=e:u(e,A)?o.push(e):u(e,X)?m=e:typeof e=="string"?i.push(e):a.push(e))});const g=c!==void 0||o.length>0||m!==void 0&&i.length>0,r=a.length===0||b(a[0])&&typeof((v=(d=a[0])==null?void 0:d.props)==null?void 0:v.children)>"u";if(f||g||r)return{avatarChild:c,listHeaderTextChildren:o,badgeChild:m,stringChildren:i,remainingChildren:a};if(b(a[0]))return N((s=(_=a[0])==null?void 0:_.props)==null?void 0:s.children,!0)},E=n.forwardRef((l,f)=>{const{className:c="",titleHtmlMarkup:m="h2",chevronIcon:o,children:i,icon:a,isHovered:g,size:r,testId:d}=l,v=k(),_=r!=="small"&&!!(o||a),s=typeof i=="string",e=N(i),H=(e==null?void 0:e.avatarChild)||(e==null?void 0:e.listHeaderTextChildren)&&e.listHeaderTextChildren.length>0||(e==null?void 0:e.remainingChildren)&&(e==null?void 0:e.remainingChildren.length)>0,x=h(t["list-header"],{[t["list-header--for-element-content"]]:!s,[t["list-header--top-align-content"]]:H},c),L=h(t["list-header__badge"],{[t["list-header__badge--for-string-content"]]:s,[t["list-header__badge--right"]]:!s,[t["list-header__badge--"+r]]:!s&&r}),S=h(t["list-header__chevron"],{[t["list-header__chevron--for-string-content"]]:s,[t["list-header__chevron--"+r]]:!s&&r}),y=h(t["list-header__content"],{[t["list-header__content--string"]]:s,[t["list-header__content--element"]]:!s,[t["list-header__content--spacing"]]:!(e!=null&&e.avatarChild)&&!a}),I=h(t["list-header__icon"],{[t["list-header__icon--for-string-content"]]:s,[t["list-header__icon--for-element-content"]]:!s,[t["list-header__icon--for-element-content--"+r]]:!s&&r}),T=h(t["list-header__avatar"],{[t["list-header__avatar--for-string-content"]]:s,[t["list-header__avatar--for-element-content"]]:!s,[t["list-header__avatar--for-element-content--"+r]]:!s&&r}),z=m;return n.createElement("div",{"data-testid":d,className:x},_&&a&&n.createElement("span",{className:I},n.cloneElement(a,{size:v===B.xs?C.XSmall:C.Small,isHovered:g})),r!=="small"&&(e==null?void 0:e.avatarChild)&&n.createElement("span",{className:T},n.cloneElement(e.avatarChild,{size:w.xsmall})),n.createElement("div",{className:y},e==null?void 0:e.listHeaderTextChildren,!!(e!=null&&e.stringChildren.length)&&n.createElement(z,{className:t["list-header__title"]},e.stringChildren),e==null?void 0:e.remainingChildren),(e==null?void 0:e.badgeChild)&&n.createElement("span",{className:L},e.badgeChild),_&&o&&n.createElement("span",{className:S},n.createElement(M,{svgIcon:o,isHovered:g,size:C.XSmall})))});E.displayName="ListHeader";export{E as L,N as m,P as r};
+import n from"react";import h from"classnames";import{L as A}from"./ListHeaderText.js";import{useBreakpoint as k,Breakpoint as B}from"./hooks/useBreakpoint.js";import{isComponent as u,isComponentWithChildren as b}from"./utils/component.js";import{A as R,a as p}from"./Avatar.js";import{B as w}from"./Badge.js";import{Icon as X}from"./components/Icons/Icon.js";import{IconSize as C}from"./constants.js";import t from"./components/ListHeader/styles.module.scss";const P=(l,f,c,m,o,i)=>{if(u(l,E))return n.cloneElement(l,{chevronIcon:o,icon:i,isHovered:c,size:m});if(l)return n.createElement(E,{titleHtmlMarkup:f,chevronIcon:o,icon:i,isHovered:c,size:m},l)},N=(l,f=!1)=>{var d,v,_,s;let c,m;const o=[],i=[],a=[];n.Children.forEach(l,e=>{e===null||typeof e>"u"||(u(e,R)?c=e:u(e,A)?o.push(e):u(e,w)?m=e:typeof e=="string"?i.push(e):a.push(e))});const g=c!==void 0||o.length>0||m!==void 0&&i.length>0,r=a.length===0||b(a[0])&&typeof((v=(d=a[0])==null?void 0:d.props)==null?void 0:v.children)>"u";if(f||g||r)return{avatarChild:c,listHeaderTextChildren:o,badgeChild:m,stringChildren:i,remainingChildren:a};if(b(a[0]))return N((s=(_=a[0])==null?void 0:_.props)==null?void 0:s.children,!0)},E=n.forwardRef((l,f)=>{const{className:c="",titleHtmlMarkup:m="h2",chevronIcon:o,children:i,icon:a,isHovered:g,size:r,testId:d}=l,v=k(),_=r!=="small"&&!!(o||a),s=typeof i=="string",e=N(i),H=(e==null?void 0:e.avatarChild)||(e==null?void 0:e.listHeaderTextChildren)&&e.listHeaderTextChildren.length>0||(e==null?void 0:e.remainingChildren)&&(e==null?void 0:e.remainingChildren.length)>0,x=h(t["list-header"],{[t["list-header--for-element-content"]]:!s,[t["list-header--top-align-content"]]:H},c),L=h(t["list-header__badge"],{[t["list-header__badge--for-string-content"]]:s,[t["list-header__badge--right"]]:!s,[t["list-header__badge--"+r]]:!s&&r}),S=h(t["list-header__chevron"],{[t["list-header__chevron--for-string-content"]]:s,[t["list-header__chevron--"+r]]:!s&&r}),y=h(t["list-header__content"],{[t["list-header__content--string"]]:s,[t["list-header__content--element"]]:!s,[t["list-header__content--spacing"]]:!(e!=null&&e.avatarChild)&&!a}),I=h(t["list-header__icon"],{[t["list-header__icon--for-string-content"]]:s,[t["list-header__icon--for-element-content"]]:!s,[t["list-header__icon--for-element-content--"+r]]:!s&&r}),T=h(t["list-header__avatar"],{[t["list-header__avatar--for-string-content"]]:s,[t["list-header__avatar--for-element-content"]]:!s,[t["list-header__avatar--for-element-content--"+r]]:!s&&r}),z=m;return n.createElement("span",{"data-testid":d,className:x},_&&a&&n.createElement("span",{className:I},n.cloneElement(a,{size:v===B.xs?C.XSmall:C.Small,isHovered:g})),r!=="small"&&(e==null?void 0:e.avatarChild)&&n.createElement("span",{className:T},n.cloneElement(e.avatarChild,{size:p.xsmall})),n.createElement("span",{className:y},e==null?void 0:e.listHeaderTextChildren,!!(e!=null&&e.stringChildren.length)&&n.createElement(z,{className:t["list-header__title"]},e.stringChildren),e==null?void 0:e.remainingChildren),(e==null?void 0:e.badgeChild)&&n.createElement("span",{className:L},e.badgeChild),_&&o&&n.createElement("span",{className:S},n.createElement(X,{svgIcon:o,isHovered:g,size:C.XSmall})))});E.displayName="ListHeader";export{E as L,N as m,P as r};
 //# sourceMappingURL=ListHeader.js.map

package/ListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChild?: React.ReactElement<BadgeProps>;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <div data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <div className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </div>\n\n      {mappedChildren?.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </div>\n  );\n});\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","isComponentWithChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":"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"}
+{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChild?: React.ReactElement<BadgeProps>;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n});\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","isComponentWithChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":"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"}

package/Panel.js

@@ -1,2 +1,2 @@
-import t from"react";import r from"classnames";import{AnalyticsId as le,IconSize as w}from"./constants.js";import{useExpand as re}from"./hooks/useExpand.js";import{useUuid as M}from"./hooks/useUuid.js";import{palette as $}from"./theme/palette.js";import{getAriaLabelAttributes as oe}from"./utils/accessibility.js";import{B as se}from"./Badge.js";import{B as z}from"./Button.js";import{Icon as u}from"./components/Icons/Icon.js";import ie from"./components/Icons/AlertSignFill.js";import ce from"./components/Icons/ArrowRight.js";import me from"./components/Icons/Calendar.js";import pe from"./components/Icons/ChevronDown.js";import de from"./components/Icons/ChevronUp.js";import ue from"./components/Icons/Pencil.js";import fe from"./components/Icons/Watch.js";import{T as _e}from"./Title.js";import e from"./components/Panel/styles.module.scss";var ye=(a=>(a.normal="normal",a.new="new",a.error="error",a.draft="draft",a))(ye||{}),be=(a=>(a.fill="fill",a.white="white",a.stroke="stroke",a.line="line",a))(be||{}),Ee=(a=>(a.layout1="layout1",a.layout2="layout2",a.layout3a="layout3a",a.layout3b="layout3b",a.layout3c="layout3c",a))(Ee||{});const ge=({status:a,statusMessage:o})=>{const b=()=>a==="error"?{color:$.cherry500,svgIcon:ie}:{color:$.black,svgIcon:ue},s=r(e["status-message"],{[e["status-message--new"]]:a==="new"});return(a==="error"||a==="draft")&&o?t.createElement("div",{className:s,"data-testid":"display-status"},t.createElement(u,{...b(),size:w.XSmall})," ",t.createElement("span",null,o)):null},ve=({date:a,time:o})=>a||o?t.createElement("div",{className:e["datetime-container"],"data-testid":"datetime"},a&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(u,{svgIcon:me,size:w.XSmall}),t.createElement("span",null,a)),o&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(u,{svgIcon:fe,size:w.XSmall}),t.createElement("span",null,o))):null,he=t.forwardRef(function(o,b){const{children:s,contentA:N,contentB:l,className:D,testId:j,title:E,titleHtmlMarkup:W="h2",url:f,target:X="_self",icon:i,iconRight:I=!1,variant:c="fill",status:m="normal",statusMessage:g,buttonText:k="Se detaljer",buttonTextClose:F="Skjul detaljer",buttonAriaLabelledById:x,buttonAriaLabel:H,layout:n="layout2",containerAsButton:v=!1,date:B,time:A,noTopBorder:U,buttonOnClick:d,buttonHtmlMarkup:L="a",expanded:O=!1,onExpand:S,renderChildrenWhenClosed:q=!1}=o,[p,G]=re(O,S),h=M(),_=M(),T=g&&m==="new",y=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(n),J=r(e["panel-wrapper"],D),K=r(e.panel,{[e["panel--fill"]]:c==="fill",[e["panel--stroke"]]:c==="stroke",[e["panel--white"]]:c==="white",[e["panel--line"]]:c==="line",[e["panel--no-top-border"]]:c==="line"&&U,[e["panel--selected"]]:p,[e["panel--new"]]:m==="new",[e["panel--draft"]]:m==="draft",[e["panel--error"]]:m==="error",[e["panel--status"]]:m&&m!=="normal",[e["panel--with-icon"]]:i,[e["panel--button"]]:v,[e["panel--clickable"]]:s||f||S||d||v}),Q=r({[e.panel__container]:n==="layout2"&&l,[e["panel__container--layout3"]]:y&&l,[e["panel__container--grow"]]:i}),Y=r({[e["panel-content-a"]]:n==="layout2",[e["panel-content-a--layout3a"]]:n==="layout3a",[e["panel-content-a--layout3b"]]:n==="layout3b",[e["panel-content-a--layout3c"]]:n==="layout3c"}),Z=r({[e["panel__content-right--layout1"]]:l&&n==="layout1",[e["panel__content-right--layout2"]]:l&&n==="layout2",[e["panel__content-right--layout3"]]:l&&y,[e["panel__content-right--layout3a"]]:l&&n==="layout3a",[e["panel__content-right--layout3b"]]:l&&n==="layout3b",[e["panel__content-right--layout3c"]]:l&&n==="layout3c"}),P=r(e["panel-content-b"],{[e["panel-content-b--layout1"]]:n==="layout1",[e["panel-content-b--layout3"]]:y}),V=r(e["panel__details-btn"]),ee=r(e["panel-content-a__title"],{[e["panel-content-a__title--badge"]]:T}),te=()=>{const C=oe({label:H,id:x&&`${_} ${x}`||E&&h&&`${_} ${h}`,prefer:"label"}),R={onClick:d||(()=>G(!p)),className:v?e.panel__expand:void 0,variant:"borderless",ellipsis:!0,...C};return s?t.createElement(z,{testId:"expand","aria-expanded":p,...R},t.createElement("span",{id:_},p?F:k),t.createElement(u,{svgIcon:p?de:pe})):t.createElement(z,{testId:"url",htmlMarkup:L,href:f,target:X,...R},t.createElement("span",{id:_},k),t.createElement(u,{svgIcon:ce}))},ae=r(e["panel__btn-container"],{[e["panel__btn-container--layout3"]]:y,[e["panel__btn-container--padding-top"]]:N||l}),ne=()=>{if(!s||!q&&!p)return null;const C=r(e["panel-details"],{[e["panel-details--open"]]:p,[e["panel-details--line"]]:c==="line",[e["panel-details--white"]]:c==="white",[e["panel-details--with-icon"]]:i});return t.createElement("div",{className:C,"data-testid":"panel-details"},t.createElement("div",null,s))};return t.createElement("div",{ref:b,"data-testid":j,className:J,"data-analyticsid":le.Panel},t.createElement("div",{className:K},i&&!I&&t.createElement("div",{className:e.panel__icon},i),t.createElement("div",{className:Q},t.createElement("div",{className:Y},t.createElement(ge,{status:m,statusMessage:g}),E&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(_e,{appearance:"title3",htmlMarkup:W,id:h,className:ee},E),T&&t.createElement("div",{className:e.panel__badge},t.createElement(se,{color:"blueberry",testId:"badge-status"},g))),N),t.createElement("div",{className:Z},l&&t.createElement("div",{className:P},l),(s||f||B||A||d)&&t.createElement("div",{className:ae},t.createElement(ve,{date:B,time:A}),(s||f||d)&&t.createElement("div",{className:V},te())))),i&&I&&t.createElement("div",{className:e["panel__icon--right"]},i)),ne())}),He=he;export{He as P,ye as a,be as b,Ee as c};
+import t from"react";import r from"classnames";import{AnalyticsId as le,IconSize as w}from"./constants.js";import{useExpand as re}from"./hooks/useExpand.js";import{useUuid as M}from"./hooks/useUuid.js";import{palette as $}from"./theme/palette.js";import{getAriaLabelAttributes as oe}from"./utils/accessibility.js";import{B as se}from"./Badge.js";import{B as z}from"./Button.js";import{Icon as u}from"./components/Icons/Icon.js";import ie from"./components/Icons/AlertSignFill.js";import ce from"./components/Icons/ArrowRight.js";import me from"./components/Icons/Calendar.js";import pe from"./components/Icons/ChevronDown.js";import de from"./components/Icons/ChevronUp.js";import ue from"./components/Icons/Pencil.js";import fe from"./components/Icons/Watch.js";import{T as _e}from"./Title.js";import e from"./components/Panel/styles.module.scss";var be=(a=>(a.normal="normal",a.new="new",a.error="error",a.draft="draft",a))(be||{}),ye=(a=>(a.fill="fill",a.white="white",a.stroke="stroke",a.line="line",a))(ye||{}),Ee=(a=>(a.layout1="layout1",a.layout2="layout2",a.layout3a="layout3a",a.layout3b="layout3b",a.layout3c="layout3c",a))(Ee||{});const ge=({status:a,statusMessage:o})=>{const y=()=>a==="error"?{color:$.cherry500,svgIcon:ie}:{color:$.black,svgIcon:ue},s=r(e["status-message"],{[e["status-message--new"]]:a==="new"});return(a==="error"||a==="draft")&&o?t.createElement("div",{className:s,"data-testid":"display-status"},t.createElement(u,{...y(),size:w.XSmall})," ",t.createElement("span",null,o)):null},ve=({date:a,time:o})=>a||o?t.createElement("div",{className:e["datetime-container"],"data-testid":"datetime"},a&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(u,{svgIcon:me,size:w.XSmall}),t.createElement("span",null,a)),o&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(u,{svgIcon:fe,size:w.XSmall}),t.createElement("span",null,o))):null,he=t.forwardRef(function(o,y){const{children:s,contentA:N,contentB:n,className:D,testId:j,title:E,titleHtmlMarkup:W="h2",url:f,target:X="_self",icon:i,iconRight:I=!1,variant:c="fill",status:m="normal",statusMessage:g,buttonText:k="Se detaljer",buttonTextClose:F="Skjul detaljer",buttonAriaLabelledById:x,buttonAriaLabel:H,layout:l="layout2",containerAsButton:v=!1,date:B,time:A,noTopBorder:U,buttonOnClick:d,buttonHtmlMarkup:L="a",expanded:O=!1,onExpand:S,renderChildrenWhenClosed:q=!1}=o,[p,G]=re(O,S),h=M(),_=M(),T=g&&m==="new",b=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(l),J=r(e["panel-wrapper"],D),K=r(e.panel,{[e["panel--fill"]]:c==="fill",[e["panel--stroke"]]:c==="stroke",[e["panel--white"]]:c==="white",[e["panel--line"]]:c==="line",[e["panel--no-top-border"]]:c==="line"&&U,[e["panel--selected"]]:p,[e["panel--new"]]:m==="new",[e["panel--draft"]]:m==="draft",[e["panel--error"]]:m==="error",[e["panel--status"]]:m&&m!=="normal",[e["panel--with-icon"]]:i,[e["panel--button"]]:v,[e["panel--clickable"]]:s||f||S||d||v}),Q=r({[e.panel__container]:l==="layout2"&&n,[e["panel__container--layout3"]]:b&&n,[e["panel__container--grow"]]:i}),Y=r({[e["panel-content-a"]]:l==="layout2",[e["panel-content-a--layout3a"]]:l==="layout3a",[e["panel-content-a--layout3b"]]:l==="layout3b",[e["panel-content-a--layout3c"]]:l==="layout3c"}),Z=r({[e["panel__content-right--layout1"]]:n&&l==="layout1",[e["panel__content-right--layout2"]]:n&&l==="layout2",[e["panel__content-right--layout3"]]:n&&b,[e["panel__content-right--layout3a"]]:n&&l==="layout3a",[e["panel__content-right--layout3b"]]:n&&l==="layout3b",[e["panel__content-right--layout3c"]]:n&&l==="layout3c"}),P=r(e["panel-content-b"],{[e["panel-content-b--layout1"]]:l==="layout1",[e["panel-content-b--layout3"]]:b}),V=r(e["panel__details-btn"]),ee=r(e["panel-content-a__title"],{[e["panel-content-a__title--badge"]]:T}),te=()=>{const C=oe({label:H,id:x&&`${_} ${x}`||E&&h&&`${_} ${h}`,prefer:"label"}),R={onClick:d||(()=>G(!p)),className:v?e.panel__expand:void 0,variant:"borderless",ellipsis:!0,...C};return s?t.createElement(z,{testId:"expand","aria-expanded":p,...R},t.createElement("span",{id:_},p?F:k),t.createElement(u,{svgIcon:p?de:pe})):t.createElement(z,{testId:"url",htmlMarkup:L,href:f,target:X,...R},t.createElement("span",{id:_},k),t.createElement(u,{svgIcon:ce}))},ae=r(e["panel__btn-container"],{[e["panel__btn-container--layout3"]]:b,[e["panel__btn-container--no-content-b"]]:!n,[e["panel__btn-container--padding-top"]]:N||n}),ne=()=>{if(!s||!q&&!p)return null;const C=r(e["panel-details"],{[e["panel-details--open"]]:p,[e["panel-details--line"]]:c==="line",[e["panel-details--white"]]:c==="white",[e["panel-details--with-icon"]]:i});return t.createElement("div",{className:C,"data-testid":"panel-details"},t.createElement("div",null,s))};return t.createElement("div",{ref:y,"data-testid":j,className:J,"data-analyticsid":le.Panel},t.createElement("div",{className:K},i&&!I&&t.createElement("div",{className:e.panel__icon},i),t.createElement("div",{className:Q},t.createElement("div",{className:Y},t.createElement(ge,{status:m,statusMessage:g}),E&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(_e,{appearance:"title3",htmlMarkup:W,id:h,className:ee},E),T&&t.createElement("div",{className:e.panel__badge},t.createElement(se,{color:"blueberry",testId:"badge-status"},g))),N),t.createElement("div",{className:Z},n&&t.createElement("div",{className:P},n),(s||f||B||A||d)&&t.createElement("div",{className:ae},t.createElement(ve,{date:B,time:A}),(s||f||d)&&t.createElement("div",{className:V},te())))),i&&I&&t.createElement("div",{className:e["panel__icon--right"]},i)),ne())}),He=he;export{He as P,be as a,ye as b,Ee as c};
 //# sourceMappingURL=Panel.js.map

package/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n  const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--padding-top']]: contentA || contentB,\n  });\n\n  const renderContent = () => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n                  {title}\n                </Title>\n                {hasBadge && (\n                  <div className={panelStyles.panel__badge}>\n                    <Badge color=\"blueberry\" testId=\"badge-status\">\n                      {statusMessage}\n                    </Badge>\n                  </div>\n                )}\n              </div>\n            )}\n            {contentA}\n          </div>\n          <div className={panelContentRightClass}>\n            {contentB && <div className={panelContentBClass}>{contentB}</div>}\n            {(children || url || date || time || buttonOnClick) && (\n              <div className={btnContainerClass}>\n                {<DateTime date={date} time={time} />}\n                {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n              </div>\n            )}\n          </div>\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","AnalyticsId","Title","Badge","Panel$1"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n  const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--no-content-b']]: !contentB,\n    [panelStyles['panel__btn-container--padding-top']]: contentA || contentB,\n  });\n\n  const renderContent = () => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n                  {title}\n                </Title>\n                {hasBadge && (\n                  <div className={panelStyles.panel__badge}>\n                    <Badge color=\"blueberry\" testId=\"badge-status\">\n                      {statusMessage}\n                    </Badge>\n                  </div>\n                )}\n              </div>\n            )}\n            {contentA}\n          </div>\n          <div className={panelContentRightClass}>\n            {contentB && <div className={panelContentBClass}>{contentB}</div>}\n            {(children || url || date || time || buttonOnClick) && (\n              <div className={btnContainerClass}>\n                {<DateTime date={date} time={time} />}\n                {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n              </div>\n            )}\n          </div>\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","AnalyticsId","Title","Badge","Panel$1"],"mappings":"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"}

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,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,2GAsKV,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,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,2GAkKV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Button/styles.module.scss

@@ -342,9 +342,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 }
 
 .diagonal {
+  display: block;
   transform: matrix(-1, 0, 0, 1, 0, 0);
 
   &__line {
+    display: block;
     border-bottom: getSpacer(4xs) dashed $neutral500;
     transform-origin: top left;
     position: absolute;

package/components/LinkList/index.js

@@ -1,2 +1,2 @@
-import i from"react";import k from"classnames";import{AnalyticsId as b}from"../../constants.js";import{useHover as w}from"../../hooks/useHover.js";import y from"../Icons/ChevronRight.js";import{r as R}from"../../ListHeader.js";import t from"./styles.module.scss";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../utils/component.js";import"../../Avatar.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../Badge.js";import"../Badge/styles.module.scss";const u=i.forwardRef((L,l)=>{const{children:o,className:a="",color:m="neutral",icon:n,size:r="medium",chevron:s=!1,linkRef:p,testId:c,target:e,variant:d,htmlMarkup:f="a",..._}=L,{hoverRef:h,isHovered:v}=w(p),C=k(t["link-list__list-item"],{[t["link-list__list-item--line"]]:d==="line",[t["link-list__list-item--outline"]]:d==="outline"}),N=k(t["link-list__anchor"],t["link-list__anchor--"+m],{[t["link-list__anchor--fill"]]:d==="fill",[t["link-list__anchor--"+r]]:r,[t["link-list__anchor--button"]]:f==="button"},a);return i.createElement("li",{className:C,ref:l,"data-testid":c,"data-analyticsid":b.Link},f==="a"&&i.createElement("a",{className:N,ref:h,rel:e==="_blank"?"noopener noreferrer":void 0,target:e,..._},R(o,"span",v,r,s?y:void 0,n)),f==="button"&&i.createElement("button",{className:N,ref:h,type:"button",..._},R(o,"span",v,r,s?y:void 0,n)))}),E=i.forwardRef(function(l,o){const{children:a,className:m="",chevron:n=!1,size:r="medium",color:s,testId:p,variant:c="line"}=l;return i.createElement("ul",{ref:o,className:k(t["link-list"],m),"data-testid":p,"data-analyticsid":b.LinkList},i.Children.map(a,e=>{if(e.type===u)return i.cloneElement(e,{color:s,size:r,chevron:n,variant:c})}))});E.Link=u;u.displayName="LinkList.Link";const ot=E;export{E as LinkList,ot as default};
+import{L as i}from"../../LinkList.js";import{a as I}from"../../LinkList.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useHover.js";import"../Icons/ChevronRight.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../ListHeader.js";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../utils/component.js";import"../../Avatar.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../Badge.js";import"../Badge/styles.module.scss";import"./styles.module.scss";export{I as LinkList,i as default};
 //# sourceMappingURL=index.js.map

package/components/LinkList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { PaletteNames } from '../../theme/palette';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkListVariant = 'line' | 'outline' | 'fill';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  bottomBorder?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  topBorder?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'>;\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'neutral',\n    icon,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n\n  const liClasses = cn(LinkListStyles['link-list__list-item'], {\n    [LinkListStyles['link-list__list-item--line']]: variant === 'line',\n    [LinkListStyles['link-list__list-item--outline']]: variant === 'outline',\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles['link-list__anchor--' + color],\n\n    {\n      [LinkListStyles['link-list__anchor--fill']]: variant === 'fill',\n      [LinkListStyles['link-list__anchor--' + size]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' && (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </button>\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const { children, className = '', chevron = false, size = 'medium', color, testId, variant = 'line' } = props;\n  return (\n    <ul ref={ref} className={cn(LinkListStyles['link-list'], className)} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n        if ((child as React.ReactElement<LinkProps>).type === Link) {\n          return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron, variant });\n        }\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","linkRef","testId","target","variant","htmlMarkup","restProps","hoverRef","isHovered","useHover","liClasses","cn","LinkListStyles","linkClasses","AnalyticsId","renderListHeader","ChevronRight","LinkList","child","LinkList$1"],"mappings":"s+BAwEA,MAAMA,EAAiBC,EAAM,WAAW,CAACC,EAAkBC,IAAkC,CACrF,KAAA,CACJ,SAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EAAQ,UACR,KAAAC,EACA,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,QAAAC,EACA,OAAAC,EACA,OAAAC,EACA,QAAAC,EACA,WAAAC,EAAa,IACb,GAAGC,CACD,EAAAb,EACE,CAAE,SAAAc,EAAU,UAAAC,CAAU,EAAIC,EAAgDR,CAAO,EAEjFS,EAAYC,EAAGC,EAAe,sBAAsB,EAAG,CAC3D,CAACA,EAAe,4BAA4B,CAAC,EAAGR,IAAY,OAC5D,CAACQ,EAAe,+BAA+B,CAAC,EAAGR,IAAY,SAAA,CAChE,EACKS,EAAcF,EAClBC,EAAe,mBAAmB,EAClCA,EAAe,sBAAwBf,CAAK,EAE5C,CACE,CAACe,EAAe,yBAAyB,CAAC,EAAGR,IAAY,OACzD,CAACQ,EAAe,sBAAwBb,CAAI,CAAC,EAAGA,EAChD,CAACa,EAAe,2BAA2B,CAAC,EAAGP,IAAe,QAChE,EACAT,CAAA,EAGA,OAAAJ,EAAA,cAAC,KAAG,CAAA,UAAWkB,EAAW,IAAAhB,EAAU,cAAaQ,EAAQ,mBAAkBY,EAAY,IACpF,EAAAT,IAAe,KACdb,EAAA,cAAC,IAAA,CACC,UAAWqB,EACX,IAAKN,EACL,IAAKJ,IAAW,SAAW,sBAAwB,OACnD,OAAAA,EACC,GAAGG,CAAA,EAEHS,EAAiBpB,EAAU,OAAQa,EAAWT,EAAMC,EAAUgB,EAAe,OAAWlB,CAAI,CAC/F,EAEDO,IAAe,UACdb,EAAA,cAAC,UAAO,UAAWqB,EAAa,IAAKN,EAAgD,KAAK,SAAU,GAAGD,CACpG,EAAAS,EAAiBpB,EAAU,OAAQa,EAAWT,EAAMC,EAAUgB,EAAe,OAAWlB,CAAI,CAC/F,CAEJ,CAEJ,CAAC,EAEYmB,EAAWzB,EAAM,WAAW,SAA8BC,EAAsBC,EAAkC,CAC7H,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,QAAAI,EAAU,GAAO,KAAAD,EAAO,SAAU,MAAAF,EAAO,OAAAK,EAAQ,QAAAE,EAAU,MAAA,EAAWX,EAEtG,OAAAD,EAAA,cAAC,MAAG,IAAAE,EAAU,UAAWiB,EAAGC,EAAe,WAAW,EAAGhB,CAAS,EAAG,cAAaM,EAAQ,mBAAkBY,EAAY,QACrH,EAAAtB,EAAM,SAAS,IAAIG,EAAWuB,GAA2D,CACnF,GAAAA,EAAwC,OAAS3B,EAC7C,OAAAC,EAAM,aAAa0B,EAAwC,CAAE,MAAArB,EAAO,KAAAE,EAAM,QAAAC,EAAS,QAAAI,EAAS,CAEtG,CAAA,CACH,CAEJ,CAAC,EAEDa,EAAS,KAAO1B,EAChBA,EAAK,YAAc,gBAEnB,MAAA4B,GAAeF"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAM5D,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAS5D,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,yKAAyK;IACzK,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,4IAA4I;IAC5I,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAiDD,QAAA,MAAM,KAAK,uFAwLT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAM5D,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAS5D,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,yKAAyK;IACzK,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,4IAA4I;IAC5I,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAiDD,QAAA,MAAM,KAAK,uFAyLT,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/components/Panel/styles.module.scss

@@ -138,9 +138,11 @@
     display: flex;
     flex-direction: column;
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
-      align-self: flex-end;
-      flex-direction: row;
+    &--no-content-b {
+      @media (min-width: map.get($grid-breakpoints, lg)) {
+        align-self: flex-end;
+        flex-direction: row;
+      }
     }
 
     &--layout3 {

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

@@ -5,6 +5,7 @@ export type Styles = {
   panel__badge: string;
   'panel__btn-container': string;
   'panel__btn-container--layout3': string;
+  'panel__btn-container--no-content-b': string;
   'panel__btn-container--padding-top': string;
   panel__container: string;
   'panel__container--grow': string;

package/components/PopMenu/index.d.ts

@@ -0,0 +1,4 @@
+import PopMenu from './PopMenu';
+export * from './PopMenu';
+export default PopMenu;
+//# sourceMappingURL=index.d.ts.map

package/components/PopMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PopMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,eAAe,OAAO,CAAC"}

package/components/PopMenu/index.js

@@ -0,0 +1,2 @@
+import t,{useRef as s,useState as S}from"react";import i from"classnames";import{AnalyticsId as h,IconSize as b}from"../../constants.js";import{useBreakpoint as w}from"../../hooks/useBreakpoint.js";import{useHover as v}from"../../hooks/useHover.js";import{useOutsideEvent as _}from"../../hooks/useOutsideEvent.js";import{getColor as g}from"../../theme/currys/color.js";import{breakpoints as z}from"../../theme/grid.js";import{isComponent as A}from"../../utils/component.js";import{C as M}from"../../Close.js";import{Icon as T}from"../Icons/Icon.js";import P from"../Icons/VerticalDots.js";import{L as $}from"../../LinkList.js";import{a as x}from"../../PopOver.js";import e from"./styles.module.scss";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/X.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Close/styles.module.scss";import"../Icons/ChevronRight.js";import"../../ListHeader.js";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../Avatar.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../Badge.js";import"../Badge/styles.module.scss";import"../LinkList/styles.module.scss";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";var D=(o=>(o.onWhite="on-white",o.onGray="on-gray",o.onBlueberry="on-blueberry",o))(D||{});const G=o=>{const r=s(null),a=s(null),l=s(null),[m,p]=S(!1),{children:c,popOverClassName:I,popMenuClassName:C,openButtonTestId:k,closeButtonTestId:B,popOverTestId:N,popMenuVariant:u="on-white",openButtonAriaLabel:y,closeButtonAriaLabel:H}=o,f=i(e["pop-menu-button"],{[e[`pop-menu-button--${u}`]]:u}),d=w()<z.md;_(l,()=>p(!m));const O=()=>{if(A(c,$))return t.createElement(x,{testId:N,className:i(e["pop-menu__pop-over"],I),arrowClassName:e["pop-menu__pop-over-arrow"],controllerRef:r,popOverRef:l},c)},E=()=>{const n=v(a).isHovered,R=d?b.XSmall:b.Small;return t.createElement("button",{ref:a,"data-testid":k,className:f,"aria-label":y||"Se mer",onClick:()=>p(!0),type:"button"},t.createElement(T,{svgIcon:P,className:"test",color:g("black"),size:R,isHovered:n}))},L=()=>{const n=v(r).isHovered;return t.createElement(M,{ariaLabel:H,color:"black",className:f,testId:B,ref:r,onClick:()=>p(!1),small:d,isHovered:n})};return t.createElement("div",{className:i(e["pop-menu-button"],C),"data-analyticsid":h.PopMenu},m?L():E(),m&&O())},Po=G;export{G as PopMenu,D as PopMenuVariant,Po as default};
+//# sourceMappingURL=index.js.map

package/components/PopMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Close from '../Close';\nimport Icon from '../Icons';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const openRef = useRef<HTMLButtonElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n\n  const renderChildren = () => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={closeRef}\n          popOverRef={popOverRef}\n        >\n          {children}\n        </PopOver>\n      );\n    }\n  };\n  const openButton = () => {\n    const openButtonIsHovered = useHover(openRef).isHovered;\n    const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n    return (\n      <button\n        ref={openRef}\n        data-testid={openButtonTestId}\n        className={buttonClasses}\n        aria-label={openButtonAriaLabel || 'Se mer'}\n        onClick={() => setIsOpen(true)}\n        type=\"button\"\n      >\n        <Icon svgIcon={VerticalDots} className=\"test\" color={getColor('black')} size={mobileIconSize} isHovered={openButtonIsHovered} />\n      </button>\n    );\n  };\n  const closeButton = () => {\n    const closeIsHovered = useHover(closeRef).isHovered;\n    return (\n      <Close\n        ariaLabel={closeButtonAriaLabel}\n        color=\"black\"\n        className={buttonClasses}\n        testId={closeButtonTestId}\n        ref={closeRef}\n        onClick={() => setIsOpen(false)}\n        small={mobile}\n        isHovered={closeIsHovered}\n      />\n    );\n  };\n  return (\n    <div className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {!isOpen ? openButton() : closeButton()}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenu","props","closeRef","useRef","openRef","popOverRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","renderChildren","isComponent","LinkList","React","PopOver","openButton","openButtonIsHovered","useHover","mobileIconSize","IconSize","Icon","VerticalDots","getColor","closeButton","closeIsHovered","Close","AnalyticsId","PopMenu$1"],"mappings":"urDAmBY,IAAAA,GAAAA,IACVA,EAAA,QAAU,WACVA,EAAA,OAAS,UACTA,EAAA,YAAc,eAHJA,IAAAA,GAAA,CAAA,CAAA,EA2BC,MAAAC,EAAmCC,GAAwB,CAChE,MAAAC,EAAWC,EAA0B,IAAI,EACzCC,EAAUD,EAA0B,IAAI,EACxCE,EAAaF,EAAuB,IAAI,EACxC,CAACG,EAAQC,CAAS,EAAIC,EAAS,EAAK,EACpC,CACJ,SAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,WACjB,oBAAAC,EACA,qBAAAC,CACE,EAAAhB,EACEiB,EAAgBC,EAAWC,EAAO,iBAAiB,EAAG,CAC1D,CAACA,EAAO,oBAAoBL,GAAgB,CAAC,EAAGA,CAAA,CACjD,EAEKM,EADaC,IACSC,EAAY,GACxCC,EAAgBnB,EAAY,IAAME,EAAU,CAACD,CAAM,CAAC,EAEpD,MAAMmB,EAAiB,IAAM,CACvB,GAAAC,EAA2BjB,EAAUkB,CAAQ,EAE7C,OAAAC,EAAA,cAACC,EAAA,CACC,OAAQf,EACR,UAAWK,EAAWC,EAAO,oBAAoB,EAAGV,CAAgB,EACpE,eAAgBU,EAAO,0BAA0B,EACjD,cAAelB,EACf,WAAAG,CAAA,EAECI,CAAA,CAGP,EAEIqB,EAAa,IAAM,CACjB,MAAAC,EAAsBC,EAAS5B,CAAO,EAAE,UACxC6B,EAAiBZ,EAASa,EAAS,OAASA,EAAS,MAEzD,OAAAN,EAAA,cAAC,SAAA,CACC,IAAKxB,EACL,cAAaQ,EACb,UAAWM,EACX,aAAYF,GAAuB,SACnC,QAAS,IAAMT,EAAU,EAAI,EAC7B,KAAK,QAAA,EAEJqB,EAAA,cAAAO,EAAA,CAAK,QAASC,EAAc,UAAU,OAAO,MAAOC,EAAS,OAAO,EAAG,KAAMJ,EAAgB,UAAWF,EAAqB,CAAA,CAChI,EAGEO,EAAc,IAAM,CAClB,MAAAC,EAAiBP,EAAS9B,CAAQ,EAAE,UAExC,OAAA0B,EAAA,cAACY,EAAA,CACC,UAAWvB,EACX,MAAM,QACN,UAAWC,EACX,OAAQL,EACR,IAAKX,EACL,QAAS,IAAMK,EAAU,EAAK,EAC9B,MAAOc,EACP,UAAWkB,CAAA,CAAA,CACb,EAIF,OAAAX,EAAA,cAAC,OAAI,UAAWT,EAAWC,EAAO,iBAAiB,EAAGT,CAAgB,EAAG,mBAAkB8B,EAAY,SACnGnC,EAAwBgC,IAAfR,IACVxB,GAAUmB,GACb,CAEJ,EAEAiB,GAAe1C"}

package/components/ServiceMessage/ServiceMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceMessage.d.ts","sourceRoot":"","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAWhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAUlD,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAIjE,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AACD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiIjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ServiceMessage.d.ts","sourceRoot":"","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAWhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAUlD,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAIjE,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AACD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkIjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/ServiceMessage/index.js

@@ -1,2 +1,2 @@
-import s,{useState as Q,useRef as f}from"react";import o from"classnames";import{useBreakpoint as V}from"../../hooks/useBreakpoint.js";import{useHover as p}from"../../hooks/useHover.js";import{useUuid as Y}from"../../hooks/useUuid.js";import{getColor as w}from"../../theme/currys/color.js";import{breakpoints as Z}from"../../theme/grid.js";import{palette as t}from"../../theme/palette.js";import{getAriaLabelAttributes as ee}from"../../utils/accessibility.js";import{Icon as a}from"../Icons/Icon.js";import{IconSize as v}from"../../constants.js";import se from"../Icons/CheckFill.js";import re from"../Icons/ChevronDown.js";import oe from"../Icons/ChevronUp.js";import te from"../Icons/ErrorSignFill.js";import ae from"../Icons/Forward.js";import ne from"../Icons/InfoSignFill.js";import ce from"../Icons/TriangleX.js";import S from"../Icons/X.js";import e from"./styles.module.scss";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/index.js";import"../../theme/spacers.js";const me=({label:E,dismissable:C=!0,onDismiss:h,info:g,extraInfo:b,urlTitle:N,url:k,target:z="_self",closeBtnText:d="fjern melding",first:I=!1,expanderOpenFromStart:y=!1,variant:r="alert",testId:x})=>{const n=!!g||!!b,F=n?"button":"span",c=V()<Z.lg?v.XSmall:v.Small,R=Y(),M=r==="alert"?"alert":"region",X=ee({label:E,id:R}),[m,$]=Q(y),A={info:s.createElement(a,{svgIcon:ne,color:t.blueberry700,hoverColor:t.blueberry700,size:c}),warn:s.createElement(a,{svgIcon:te,color:t.banana700,hoverColor:t.banana700,size:c}),alert:s.createElement(a,{svgIcon:ce,color:t.cherry700,hoverColor:t.cherry700,size:c}),success:s.createElement(a,{svgIcon:se,color:t.kiwi900,hoverColor:t.kiwi900,size:c})},T=o(e["service-message__top-row--container"],e["service-message__wrapper--inner"]),j=o(e["service-message__bottom-row__button"],e["service-message__bottom-row__close-button--top"]),B=()=>{const l=p(),{isHovered:u,hoverRef:i}=l,_=f(null),{isHovered:P}=p(_);return s.createElement("span",{className:T,ref:i},s.createElement("span",{className:e["service-message__icon--signal"]},A[r]),s.createElement("h1",{className:e["service-message__label"],id:R},E),n&&s.createElement("span",{className:e["service-message__icon--expander"]},s.createElement(a,{size:c,svgIcon:m?oe:re,isHovered:u})),!n&&C&&s.createElement("button",{ref:_,className:j,"aria-label":d,onClick:h},s.createElement(a,{size:c,svgIcon:S,color:w("blueberry",700),isHovered:P})))},L=()=>{n&&$(!m)},U=o(e["service-message__bottom-row__button"],e["service-message__bottom-row__read-more-btn--spacing"]),H=!!k&&!!N,O=o(e["service-message__bottom-row__button"],e["service-message__bottom-row__close-button"]),W=o(e["service-message__bottom-row"],{[e["service-message__bottom-row--only-close-button"]]:!H}),q=()=>{const l=f(null),{isHovered:u}=p(l),i=f(null),{isHovered:_}=p(i);return s.createElement("div",{className:W},H&&s.createElement("a",{className:U,href:k,ref:l,target:z},N,s.createElement(a,{size:v.XSmall,svgIcon:ae,color:w("blueberry",700),isHovered:u})),C&&s.createElement("button",{ref:i,className:O,"aria-label":d,onClick:h},d,s.createElement(a,{size:v.XSmall,svgIcon:S,color:w("blueberry",700),isHovered:_})))},D=()=>s.createElement("span",{className:e["service-message__content"]},!!g&&s.createElement("span",{className:e["service-message__content__info"]},g),!!b&&s.createElement("span",{className:e["service-message__content__info--smaller"]},b),s.createElement(q,null)),G=o({[e[`service-message__wrapper--${r}`]]:r,[e[`service-message__wrapper--${r}--expanded`]]:m&&r}),J=o(e["service-message__wrapper--inner"],e["service-message__content__wrapper"]),K=o(e["service-message__wrapper"],e["service-message__wrapper__btn"],{[e["service-message__wrapper__btn--width"]]:n,[e[`service-message__wrapper__border--${r}`]]:r,[e["service-message__wrapper__btn--expanded"]]:m,[e["service-message__wrapper__btn--first"]]:I,[e["service-message__wrapper__btn--not-first"]]:!I});return s.createElement("div",{className:G,role:M,...X},s.createElement(F,{className:K,onClick:L,"aria-expanded":n&&m,"data-testid":x},s.createElement(B,null)),s.createElement("div",{className:e["service-message__content--spacing"]},s.createElement("div",{className:J},n&&m&&s.createElement(D,null))))},$e=me;export{$e as default};
+import e,{useState as Q,useRef as u}from"react";import o from"classnames";import{useBreakpoint as V}from"../../hooks/useBreakpoint.js";import{useHover as _}from"../../hooks/useHover.js";import{useUuid as Y}from"../../hooks/useUuid.js";import{getColor as w}from"../../theme/currys/color.js";import{breakpoints as Z}from"../../theme/grid.js";import{palette as t}from"../../theme/palette.js";import{getAriaLabelAttributes as ee}from"../../utils/accessibility.js";import{Icon as a}from"../Icons/Icon.js";import{IconSize as v}from"../../constants.js";import se from"../Icons/CheckFill.js";import re from"../Icons/ChevronDown.js";import oe from"../Icons/ChevronUp.js";import te from"../Icons/ErrorSignFill.js";import ae from"../Icons/Forward.js";import ne from"../Icons/InfoSignFill.js";import ce from"../Icons/TriangleX.js";import S from"../Icons/X.js";import s from"./styles.module.scss";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/index.js";import"../../theme/spacers.js";const me=({label:E,dismissable:C=!0,onDismiss:h,info:g,extraInfo:b,urlTitle:N,url:k,target:z="_self",closeBtnText:d="fjern melding",first:I=!1,expanderOpenFromStart:y=!1,variant:r="alert",testId:x})=>{const n=!!g||!!b,F=n?"button":"span",c=V()<Z.lg?v.XSmall:v.Small,R=Y(),M=r==="alert"?"alert":"region",X=ee({label:E,id:R}),[m,$]=Q(y),A={info:e.createElement(a,{svgIcon:ne,color:t.blueberry700,hoverColor:t.blueberry700,size:c}),warn:e.createElement(a,{svgIcon:te,color:t.banana700,hoverColor:t.banana700,size:c}),alert:e.createElement(a,{svgIcon:ce,color:t.cherry700,hoverColor:t.cherry700,size:c}),success:e.createElement(a,{svgIcon:se,color:t.kiwi900,hoverColor:t.kiwi900,size:c})},T=o(s["service-message__top-row--container"],s["service-message__wrapper--inner"]),j=o(s["service-message__bottom-row__button"],s["service-message__bottom-row__close-button--top"]),B=()=>{const l=_(),{isHovered:f,hoverRef:i}=l,p=u(null),{isHovered:P}=_(p);return e.createElement("span",{className:T,ref:i},e.createElement("span",{className:s["service-message__icon--signal"]},A[r]),e.createElement("h1",{className:s["service-message__label"],id:R},E),n&&e.createElement("span",{className:s["service-message__icon--expander"]},e.createElement(a,{size:c,svgIcon:m?oe:re,isHovered:f})),!n&&C&&e.createElement("button",{ref:p,className:j,"aria-label":d,onClick:h},e.createElement(a,{size:c,svgIcon:S,color:w("blueberry",700),isHovered:P})))},L=()=>{n&&$(!m)},U=o(s["service-message__bottom-row__button"]),H=!!k&&!!N,O=o(s["service-message__bottom-row__button"]),W=o(s["service-message__bottom-row"],{[s["service-message__bottom-row--only-close-button"]]:!H}),q=()=>{const l=u(null),{isHovered:f}=_(l),i=u(null),{isHovered:p}=_(i);return e.createElement("div",{className:W},H&&e.createElement("a",{className:U,href:k,ref:l,target:z},N,e.createElement(a,{size:v.XSmall,svgIcon:ae,color:w("blueberry",700),isHovered:f})),C&&e.createElement("button",{ref:i,className:O,"aria-label":d,onClick:h},d,e.createElement(a,{size:v.XSmall,svgIcon:S,color:w("blueberry",700),isHovered:p})))},D=()=>e.createElement("span",{className:s["service-message__content"]},!!g&&e.createElement("span",{className:s["service-message__content__info"]},g),!!b&&e.createElement("span",{className:s["service-message__content__info--smaller"]},b),e.createElement(q,null)),G=o({[s[`service-message__wrapper--${r}`]]:r,[s[`service-message__wrapper--${r}--expanded`]]:m&&r}),J=o(s["service-message__wrapper--inner"],s["service-message__content__wrapper"]),K=o(s["service-message__wrapper"],s["service-message__wrapper__btn"],{[s["service-message__wrapper__btn--width"]]:n,[s[`service-message__wrapper__border--${r}`]]:r,[s["service-message__wrapper__btn--expanded"]]:m,[s["service-message__wrapper__btn--first"]]:I,[s["service-message__wrapper__btn--not-first"]]:!I});return e.createElement("div",{className:G,role:M,...X},e.createElement(F,{className:K,onClick:L,"aria-expanded":n&&m,"data-testid":x},e.createElement(B,null)),n&&m&&e.createElement("div",{className:s["service-message__content--spacing"]},e.createElement("div",{className:J},e.createElement(D,null))))},$e=me;export{$e as default};
 //# sourceMappingURL=index.js.map

package/components/ServiceMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport Icon, { IconSize } from '../Icons';\nimport CheckFill from '../Icons/CheckFill';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport Forward from '../Icons/Forward';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expended*/\n  info?: string;\n  /** String displayed in service-message when expended, with a smaller font*/\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** First of its type. Used to remove border-top */\n  first?: boolean;\n}\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  first = false,\n  expanderOpenFromStart = false,\n  variant = 'alert',\n  testId,\n}: ServiceMessageProps) => {\n  const hasExpander = !!info || !!extraInfo;\n\n  const CustomTag = hasExpander ? 'button' : 'span';\n  const breakpoint = useBreakpoint();\n  const desktop = breakpoint < breakpoints.lg;\n  const iconSize = desktop ? IconSize.XSmall : IconSize.Small;\n  const uuid = useUuid();\n  const ariaRole = variant === 'alert' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: uuid });\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const variantToIconMap = {\n    info: <Icon svgIcon={InfoSignFill} color={palette.blueberry700} hoverColor={palette.blueberry700} size={iconSize} />,\n    warn: <Icon svgIcon={ErrorSignFill} color={palette.banana700} hoverColor={palette.banana700} size={iconSize} />,\n    alert: <Icon svgIcon={TriangleX} color={palette.cherry700} hoverColor={palette.cherry700} size={iconSize} />,\n    success: <Icon svgIcon={CheckFill} color={palette.kiwi900} hoverColor={palette.kiwi900} size={iconSize} />,\n  };\n  const topTowClasses = classNames(styles['service-message__top-row--container'], styles['service-message__wrapper--inner']);\n  const topTowCloseButtonClasses = classNames(\n    styles['service-message__bottom-row__button'],\n    styles['service-message__bottom-row__close-button--top']\n  );\n  const TopRow = (): JSX.Element => {\n    const hoverRefObject = useHover<HTMLButtonElement>();\n    const { isHovered, hoverRef } = hoverRefObject;\n    const xRef = useRef<HTMLButtonElement>(null);\n    const { isHovered: xRefIsHovered } = useHover(xRef);\n    return (\n      <span className={topTowClasses} ref={hoverRef}>\n        <span className={styles['service-message__icon--signal']}>{variantToIconMap[variant]}</span>\n        <h1 className={styles['service-message__label']} id={uuid}>\n          {label}\n        </h1>\n        {hasExpander && (\n          <span className={styles['service-message__icon--expander']}>\n            <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />\n          </span>\n        )}\n        {!hasExpander && dismissable && (\n          <button ref={xRef} className={topTowCloseButtonClasses} aria-label={closeBtnText} onClick={onDismiss}>\n            <Icon size={iconSize} svgIcon={X} color={getColor('blueberry', 700)} isHovered={xRefIsHovered} />\n          </button>\n        )}\n      </span>\n    );\n  };\n  const tagClicked = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const anchorlinkClasses = classNames(\n    styles['service-message__bottom-row__button'],\n    styles['service-message__bottom-row__read-more-btn--spacing']\n  );\n  const urlField = !!url && !!urlTitle;\n  const closeButtonClasses = classNames(styles['service-message__bottom-row__button'], styles['service-message__bottom-row__close-button']);\n  const bottomRowClasses = classNames(styles['service-message__bottom-row'], {\n    [styles['service-message__bottom-row--only-close-button']]: !urlField,\n  });\n  const ButtonRow = (): JSX.Element => {\n    const readMoreRef = useRef<HTMLAnchorElement>(null);\n    const { isHovered: readMoreHoverRefIsHovered } = useHover(readMoreRef);\n    const xRef = useRef<HTMLButtonElement>(null);\n    const { isHovered: xRefIsHovered } = useHover(xRef);\n    return (\n      <div className={bottomRowClasses}>\n        {urlField && (\n          <a className={anchorlinkClasses} href={url} ref={readMoreRef} target={target}>\n            {urlTitle}\n            <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n          </a>\n        )}\n\n        {dismissable && (\n          <button ref={xRef} className={closeButtonClasses} aria-label={closeBtnText} onClick={onDismiss}>\n            {closeBtnText}\n            <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={xRefIsHovered} />\n          </button>\n        )}\n      </div>\n    );\n  };\n  const Content = (): JSX.Element => {\n    return (\n      <span className={styles['service-message__content']}>\n        {!!info && <span className={styles['service-message__content__info']}>{info}</span>}\n        {!!extraInfo && <span className={styles['service-message__content__info--smaller']}>{extraInfo}</span>}\n        <ButtonRow />\n      </span>\n    );\n  };\n  const backgroundClass = classNames({\n    [styles[`service-message__wrapper--${variant}`]]: variant,\n    [styles[`service-message__wrapper--${variant}--expanded`]]: isExpanded && variant,\n  });\n  const contentWrapperClasses = classNames(styles['service-message__wrapper--inner'], styles['service-message__content__wrapper']);\n  const wrapperClasses = classNames(styles['service-message__wrapper'], styles['service-message__wrapper__btn'], {\n    [styles['service-message__wrapper__btn--width']]: hasExpander,\n    [styles[`service-message__wrapper__border--${variant}`]]: variant,\n    [styles['service-message__wrapper__btn--expanded']]: isExpanded,\n    [styles['service-message__wrapper__btn--first']]: first,\n    [styles['service-message__wrapper__btn--not-first']]: !first,\n  });\n  return (\n    <div className={backgroundClass} role={ariaRole} {...ariaLabelAttributes}>\n      <CustomTag className={wrapperClasses} onClick={tagClicked} aria-expanded={hasExpander && isExpanded} data-testid={testId}>\n        <TopRow />\n      </CustomTag>\n      <div className={styles['service-message__content--spacing']}>\n        <div className={contentWrapperClasses}>{hasExpander && isExpanded && <Content />}</div>\n      </div>\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["ServiceMessage","label","dismissable","onDismiss","info","extraInfo","urlTitle","url","target","closeBtnText","first","expanderOpenFromStart","variant","testId","hasExpander","CustomTag","iconSize","useBreakpoint","breakpoints","IconSize","uuid","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","isExpanded","setIsExpanded","useState","variantToIconMap","React","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill","topTowClasses","classNames","styles","topTowCloseButtonClasses","TopRow","hoverRefObject","useHover","isHovered","hoverRef","xRef","useRef","xRefIsHovered","ChevronUp","ChevronDown","X","getColor","tagClicked","anchorlinkClasses","urlField","closeButtonClasses","bottomRowClasses","ButtonRow","readMoreRef","readMoreHoverRefIsHovered","Forward","Content","backgroundClass","contentWrapperClasses","wrapperClasses","ServiceMessage$1"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport Icon, { IconSize } from '../Icons';\nimport CheckFill from '../Icons/CheckFill';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport Forward from '../Icons/Forward';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expended*/\n  info?: string;\n  /** String displayed in service-message when expended, with a smaller font*/\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** First of its type. Used to remove border-top */\n  first?: boolean;\n}\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  first = false,\n  expanderOpenFromStart = false,\n  variant = 'alert',\n  testId,\n}: ServiceMessageProps) => {\n  const hasExpander = !!info || !!extraInfo;\n\n  const CustomTag = hasExpander ? 'button' : 'span';\n  const breakpoint = useBreakpoint();\n  const desktop = breakpoint < breakpoints.lg;\n  const iconSize = desktop ? IconSize.XSmall : IconSize.Small;\n  const uuid = useUuid();\n  const ariaRole = variant === 'alert' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: uuid });\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const variantToIconMap = {\n    info: <Icon svgIcon={InfoSignFill} color={palette.blueberry700} hoverColor={palette.blueberry700} size={iconSize} />,\n    warn: <Icon svgIcon={ErrorSignFill} color={palette.banana700} hoverColor={palette.banana700} size={iconSize} />,\n    alert: <Icon svgIcon={TriangleX} color={palette.cherry700} hoverColor={palette.cherry700} size={iconSize} />,\n    success: <Icon svgIcon={CheckFill} color={palette.kiwi900} hoverColor={palette.kiwi900} size={iconSize} />,\n  };\n  const topTowClasses = classNames(styles['service-message__top-row--container'], styles['service-message__wrapper--inner']);\n  const topTowCloseButtonClasses = classNames(\n    styles['service-message__bottom-row__button'],\n    styles['service-message__bottom-row__close-button--top']\n  );\n  const TopRow = (): JSX.Element => {\n    const hoverRefObject = useHover<HTMLButtonElement>();\n    const { isHovered, hoverRef } = hoverRefObject;\n    const xRef = useRef<HTMLButtonElement>(null);\n    const { isHovered: xRefIsHovered } = useHover(xRef);\n    return (\n      <span className={topTowClasses} ref={hoverRef}>\n        <span className={styles['service-message__icon--signal']}>{variantToIconMap[variant]}</span>\n        <h1 className={styles['service-message__label']} id={uuid}>\n          {label}\n        </h1>\n        {hasExpander && (\n          <span className={styles['service-message__icon--expander']}>\n            <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />\n          </span>\n        )}\n        {!hasExpander && dismissable && (\n          <button ref={xRef} className={topTowCloseButtonClasses} aria-label={closeBtnText} onClick={onDismiss}>\n            <Icon size={iconSize} svgIcon={X} color={getColor('blueberry', 700)} isHovered={xRefIsHovered} />\n          </button>\n        )}\n      </span>\n    );\n  };\n  const tagClicked = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const anchorlinkClasses = classNames(styles['service-message__bottom-row__button']);\n  const urlField = !!url && !!urlTitle;\n  const closeButtonClasses = classNames(styles['service-message__bottom-row__button']);\n  const bottomRowClasses = classNames(styles['service-message__bottom-row'], {\n    [styles['service-message__bottom-row--only-close-button']]: !urlField,\n  });\n  const ButtonRow = (): JSX.Element => {\n    const readMoreRef = useRef<HTMLAnchorElement>(null);\n    const { isHovered: readMoreHoverRefIsHovered } = useHover(readMoreRef);\n    const xRef = useRef<HTMLButtonElement>(null);\n    const { isHovered: xRefIsHovered } = useHover(xRef);\n    return (\n      <div className={bottomRowClasses}>\n        {urlField && (\n          <a className={anchorlinkClasses} href={url} ref={readMoreRef} target={target}>\n            {urlTitle}\n            <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n          </a>\n        )}\n\n        {dismissable && (\n          <button ref={xRef} className={closeButtonClasses} aria-label={closeBtnText} onClick={onDismiss}>\n            {closeBtnText}\n            <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={xRefIsHovered} />\n          </button>\n        )}\n      </div>\n    );\n  };\n  const Content = (): JSX.Element => {\n    return (\n      <span className={styles['service-message__content']}>\n        {!!info && <span className={styles['service-message__content__info']}>{info}</span>}\n        {!!extraInfo && <span className={styles['service-message__content__info--smaller']}>{extraInfo}</span>}\n        <ButtonRow />\n      </span>\n    );\n  };\n  const backgroundClass = classNames({\n    [styles[`service-message__wrapper--${variant}`]]: variant,\n    [styles[`service-message__wrapper--${variant}--expanded`]]: isExpanded && variant,\n  });\n  const contentWrapperClasses = classNames(styles['service-message__wrapper--inner'], styles['service-message__content__wrapper']);\n  const wrapperClasses = classNames(styles['service-message__wrapper'], styles['service-message__wrapper__btn'], {\n    [styles['service-message__wrapper__btn--width']]: hasExpander,\n    [styles[`service-message__wrapper__border--${variant}`]]: variant,\n    [styles['service-message__wrapper__btn--expanded']]: isExpanded,\n    [styles['service-message__wrapper__btn--first']]: first,\n    [styles['service-message__wrapper__btn--not-first']]: !first,\n  });\n  return (\n    <div className={backgroundClass} role={ariaRole} {...ariaLabelAttributes}>\n      <CustomTag className={wrapperClasses} onClick={tagClicked} aria-expanded={hasExpander && isExpanded} data-testid={testId}>\n        <TopRow />\n      </CustomTag>\n      {hasExpander && isExpanded && (\n        <div className={styles['service-message__content--spacing']}>\n          <div className={contentWrapperClasses}>\n            <Content />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["ServiceMessage","label","dismissable","onDismiss","info","extraInfo","urlTitle","url","target","closeBtnText","first","expanderOpenFromStart","variant","testId","hasExpander","CustomTag","iconSize","useBreakpoint","breakpoints","IconSize","uuid","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","isExpanded","setIsExpanded","useState","variantToIconMap","React","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill","topTowClasses","classNames","styles","topTowCloseButtonClasses","TopRow","hoverRefObject","useHover","isHovered","hoverRef","xRef","useRef","xRefIsHovered","ChevronUp","ChevronDown","X","getColor","tagClicked","anchorlinkClasses","urlField","closeButtonClasses","bottomRowClasses","ButtonRow","readMoreRef","readMoreHoverRefIsHovered","Forward","Content","backgroundClass","contentWrapperClasses","wrapperClasses","ServiceMessage$1"],"mappings":"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"}

package/components/ServiceMessage/styles.module.scss

@@ -187,7 +187,10 @@
     }
 
     &--spacing {
+      margin-top: getSpacer(2xs);
+
       @media (min-width: map-get($grid-breakpoints, lg)) {
+        margin-top: 0;
         padding: 0 getSpacer(l);
       }
     }
@@ -263,9 +266,6 @@
       display: flex;
       align-items: center;
       border: none;
-      white-space: nowrap;
-      overflow: initial;
-      text-overflow: clip;
       width: fit-content;
       color: $blueberry700;
       font-weight: 600;
@@ -273,7 +273,8 @@
       line-height: 1.25rem;
       background-color: transparent;
       text-decoration: none;
-      height: 2.375rem;
+      padding: 0.5rem;
+      margin-left: -0.5rem;
 
       &:hover,
       &:active {
@@ -294,12 +295,6 @@
     }
 
     &__close-button {
-      padding: 0;
-
-      @media (min-width: map-get($grid-max-breakpoints, xs)) {
-        padding: getSpacer(2xs);
-      }
-
       &--top {
         margin-left: auto;
         padding: 0;
@@ -309,11 +304,5 @@
         }
       }
     }
-
-    &__read-more-btn {
-      &--spacing {
-        padding: 0;
-      }
-    }
   }
 }

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

@@ -2,9 +2,7 @@ export type Styles = {
   'service-message': string;
   'service-message__bottom-row': string;
   'service-message__bottom-row__button': string;
-  'service-message__bottom-row__close-button': string;
   'service-message__bottom-row__close-button--top': string;
-  'service-message__bottom-row__read-more-btn--spacing': string;
   'service-message__bottom-row--only-close-button': string;
   'service-message__content': string;
   'service-message__content__info': string;

package/components/StatusDot/styles.module.scss

@@ -43,7 +43,7 @@
     }
 
     &--transparent {
-      border: 1px solid $neutral500;
+      border: 2px solid $neutral600;
     }
 
     &--icon {

package/components/Tile/index.js

@@ -1,2 +1,2 @@
-import e from"react";import f from"classnames";import{AnalyticsId as w,IconSize as C}from"../../constants.js";import{useHover as k}from"../../hooks/useHover.js";import"../Icons/Icon.js";import t from"./styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const v=e.forwardRef((l,a)=>{const{children:o,className:s,htmlMarkup:n="span",highlighted:i,compact:c}=l,r=f(t.tile__title,{[t["tile__title--highlighted"]]:i,[t["tile__title--compact"]]:c},s),m=n;return e.createElement(m,{className:r,ref:a},o)}),E=e.forwardRef((l,a)=>{const{icon:o,title:s,className:n="",description:i,fixed:c=!1,highlighted:r=!1,testId:m,htmlMarkup:p="a",..._}=l,{hoverRef:h,isHovered:b}=k(a),d=!i,N=f(t.tile,{[t["tile--fixed"]]:c,[t["tile--compact"]]:d,[t["tile--highlighted"]]:r,[t["tile--button"]]:p==="button"},n),T=f(t["title-wrapper"],{[t["title-wrapper--compact"]]:d}),u=()=>e.createElement(e.Fragment,null,e.createElement("div",{className:T},e.cloneElement(o,{size:C.Medium,isHovered:b,color:r?"white":"black"}),e.cloneElement(s,{highlighted:r,compact:d})),i?e.createElement("p",{className:t.tile__description},i):null),g={className:N,["data-testid"]:m,["data-analyticsid"]:w.Tile,..._};return e.createElement(e.Fragment,null,p==="a"&&e.createElement("a",{ref:h,rel:l.target==="_blank"?"noopener noreferrer":l.rel,...g},u()),p==="button"&&e.createElement("button",{ref:h,type:"button",...g},u()))});E.Title=v;const S=E;export{E as Tile,S as default};
+import e from"react";import f from"classnames";import{AnalyticsId as w,IconSize as C}from"../../constants.js";import{useHover as k}from"../../hooks/useHover.js";import"../Icons/Icon.js";import t from"./styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const y=e.forwardRef((l,i)=>{const{children:o,className:s,htmlMarkup:n="span",highlighted:r,compact:c}=l,a=f(t.tile__title,{[t["tile__title--highlighted"]]:r,[t["tile__title--compact"]]:c},s),m=n;return e.createElement(m,{className:a,ref:i},o)}),E=e.forwardRef((l,i)=>{const{icon:o,title:s,className:n="",description:r,fixed:c=!1,highlighted:a=!1,testId:m,htmlMarkup:p="a",..._}=l,{hoverRef:h,isHovered:b}=k(i),d=!r,N=f(t.tile,{[t["tile--fixed"]]:c,[t["tile--compact"]]:d,[t["tile--highlighted"]]:a,[t["tile--button"]]:p==="button"},n),T=f(t["title-wrapper"],{[t["title-wrapper--compact"]]:d}),u=()=>e.createElement(e.Fragment,null,e.createElement("span",{className:T},e.cloneElement(o,{size:C.Medium,isHovered:b,color:a?"white":"black"}),e.cloneElement(s,{highlighted:a,compact:d})),r?e.createElement("p",{className:t.tile__description},r):null),g={className:N,["data-testid"]:m,["data-analyticsid"]:w.Tile,..._};return e.createElement(e.Fragment,null,p==="a"&&e.createElement("a",{ref:h,rel:l.target==="_blank"?"noopener noreferrer":l.rel,...g},u()),p==="button"&&e.createElement("button",{ref:h,type:"button",...g},u()))});E.Title=y;const S=E;export{E as Tile,S as default};
 //# sourceMappingURL=index.js.map

package/components/Tile/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { TitleTags } from './../Title/Title';\nimport { AnalyticsId, HTMLAnchorProps } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { IconSize } from '../Icons';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileTags = 'button' | 'a';\n\ninterface TileProps extends HTMLAnchorProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Called when the tile is clicked on. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** HTML markup for tile. Default: a */\n  htmlMarkup?: TileTags;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { children, className, htmlMarkup = 'span', highlighted, compact } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n});\n\nexport const Tile = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, TileProps>((props, ref) => {\n  const { icon, title, className = '', description, fixed = false, highlighted = false, testId, htmlMarkup = 'a', ...restProps } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const compact = !description;\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n      [tileStyles['tile--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  const renderContent = () => (\n    <>\n      <div className={tileTitleWrapperClasses}>\n        {React.cloneElement(icon, { size: IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {description ? <p className={tileStyles.tile__description}>{description}</p> : null}\n    </>\n  );\n\n  const commonProps = {\n    className: tileClasses,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.Tile,\n    ...restProps,\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'a' && (\n        <a\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={props.target === '_blank' ? 'noopener noreferrer' : props.rel}\n          {...commonProps}\n        >\n          {renderContent()}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...commonProps}>\n          {renderContent()}\n        </button>\n      )}\n    </>\n  );\n}) as TileCompound;\n\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["Title","React","props","ref","children","className","htmlMarkup","highlighted","compact","titleClasses","classNames","tileStyles","CustomTag","Tile","icon","title","description","fixed","testId","restProps","hoverRef","isHovered","useHover","tileClasses","tileTitleWrapperClasses","renderContent","IconSize","commonProps","AnalyticsId","Tile$1"],"mappings":"sTA8CA,MAAMA,EAAQC,EAAM,WAA+C,CAACC,EAAOC,IAAQ,CACjF,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,EAAa,OAAQ,YAAAC,EAAa,QAAAC,CAAY,EAAAN,EACrEO,EAAeC,EACnBC,EAAW,YACX,CACE,CAACA,EAAW,0BAA0B,CAAC,EAAGJ,EAC1C,CAACI,EAAW,sBAAsB,CAAC,EAAGH,CACxC,EACAH,CAAA,EAEIO,EAAYN,EAElB,OACGL,EAAA,cAAAW,EAAA,CAAU,UAAWH,EAAc,IAAAN,GACjCC,CACH,CAEJ,CAAC,EAEYS,EAAOZ,EAAM,WAA6D,CAACC,EAAOC,IAAQ,CACrG,KAAM,CAAE,KAAAW,EAAM,MAAAC,EAAO,UAAAV,EAAY,GAAI,YAAAW,EAAa,MAAAC,EAAQ,GAAO,YAAAV,EAAc,GAAO,OAAAW,EAAQ,WAAAZ,EAAa,IAAK,GAAGa,CAAc,EAAAjB,EAC3H,CAAE,SAAAkB,EAAU,UAAAC,CAAA,EAAcC,EAC9BnB,CAAA,EAEIK,EAAU,CAACQ,EACXO,EAAcb,EAClBC,EAAW,KACX,CACE,CAACA,EAAW,aAAa,CAAC,EAAGM,EAC7B,CAACN,EAAW,eAAe,CAAC,EAAGH,EAC/B,CAACG,EAAW,mBAAmB,CAAC,EAAGJ,EACnC,CAACI,EAAW,cAAc,CAAC,EAAGL,IAAe,QAC/C,EACAD,CAAA,EAEImB,EAA0Bd,EAAWC,EAAW,eAAe,EAAG,CACtE,CAACA,EAAW,wBAAwB,CAAC,EAAGH,CAAA,CACzC,EAEKiB,EAAgB,IACpBxB,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,MAAA,CAAI,UAAWuB,CACb,EAAAvB,EAAM,aAAaa,EAAM,CAAE,KAAMY,EAAS,OAAQ,UAAAL,EAAW,MAAOd,EAAc,QAAU,QAAS,EACrGN,EAAM,aAAac,EAAO,CAAE,YAAAR,EAA0B,QAAAC,EAAkB,CAC3E,EACCQ,kBAAe,IAAE,CAAA,UAAWL,EAAW,mBAAoBK,CAAY,EAAO,IACjF,EAGIW,EAAc,CAClB,UAAWJ,EACX,CAAC,aAAa,EAAGL,EACjB,CAAC,kBAAkB,EAAGU,EAAY,KAClC,GAAGT,CAAA,EAIH,OAAAlB,EAAA,cAAAA,EAAA,SAAA,KACGK,IAAe,KACdL,EAAA,cAAC,IAAA,CACC,IAAKmB,EACL,IAAKlB,EAAM,SAAW,SAAW,sBAAwBA,EAAM,IAC9D,GAAGyB,CAAA,EAEHF,EAAc,CAAA,EAGlBnB,IAAe,UACdL,EAAA,cAAC,SAAO,CAAA,IAAKmB,EAAgD,KAAK,SAAU,GAAGO,CAC5E,EAAAF,EAAA,CACH,CAEJ,CAEJ,CAAC,EAEDZ,EAAK,MAAQb,EAEb,MAAA6B,EAAehB"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { TitleTags } from './../Title/Title';\nimport { AnalyticsId, HTMLAnchorProps } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { IconSize } from '../Icons';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileTags = 'button' | 'a';\n\ninterface TileProps extends HTMLAnchorProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Called when the tile is clicked on. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** HTML markup for tile. Default: a */\n  htmlMarkup?: TileTags;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { children, className, htmlMarkup = 'span', highlighted, compact } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n});\n\nexport const Tile = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, TileProps>((props, ref) => {\n  const { icon, title, className = '', description, fixed = false, highlighted = false, testId, htmlMarkup = 'a', ...restProps } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const compact = !description;\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n      [tileStyles['tile--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  const renderContent = () => (\n    <>\n      <span className={tileTitleWrapperClasses}>\n        {React.cloneElement(icon, { size: IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </span>\n      {description ? <p className={tileStyles.tile__description}>{description}</p> : null}\n    </>\n  );\n\n  const commonProps = {\n    className: tileClasses,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.Tile,\n    ...restProps,\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'a' && (\n        <a\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={props.target === '_blank' ? 'noopener noreferrer' : props.rel}\n          {...commonProps}\n        >\n          {renderContent()}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...commonProps}>\n          {renderContent()}\n        </button>\n      )}\n    </>\n  );\n}) as TileCompound;\n\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["Title","React","props","ref","children","className","htmlMarkup","highlighted","compact","titleClasses","classNames","tileStyles","CustomTag","Tile","icon","title","description","fixed","testId","restProps","hoverRef","isHovered","useHover","tileClasses","tileTitleWrapperClasses","renderContent","IconSize","commonProps","AnalyticsId","Tile$1"],"mappings":"sTA8CA,MAAMA,EAAQC,EAAM,WAA+C,CAACC,EAAOC,IAAQ,CACjF,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,EAAa,OAAQ,YAAAC,EAAa,QAAAC,CAAY,EAAAN,EACrEO,EAAeC,EACnBC,EAAW,YACX,CACE,CAACA,EAAW,0BAA0B,CAAC,EAAGJ,EAC1C,CAACI,EAAW,sBAAsB,CAAC,EAAGH,CACxC,EACAH,CAAA,EAEIO,EAAYN,EAElB,OACGL,EAAA,cAAAW,EAAA,CAAU,UAAWH,EAAc,IAAAN,GACjCC,CACH,CAEJ,CAAC,EAEYS,EAAOZ,EAAM,WAA6D,CAACC,EAAOC,IAAQ,CACrG,KAAM,CAAE,KAAAW,EAAM,MAAAC,EAAO,UAAAV,EAAY,GAAI,YAAAW,EAAa,MAAAC,EAAQ,GAAO,YAAAV,EAAc,GAAO,OAAAW,EAAQ,WAAAZ,EAAa,IAAK,GAAGa,CAAc,EAAAjB,EAC3H,CAAE,SAAAkB,EAAU,UAAAC,CAAA,EAAcC,EAC9BnB,CAAA,EAEIK,EAAU,CAACQ,EACXO,EAAcb,EAClBC,EAAW,KACX,CACE,CAACA,EAAW,aAAa,CAAC,EAAGM,EAC7B,CAACN,EAAW,eAAe,CAAC,EAAGH,EAC/B,CAACG,EAAW,mBAAmB,CAAC,EAAGJ,EACnC,CAACI,EAAW,cAAc,CAAC,EAAGL,IAAe,QAC/C,EACAD,CAAA,EAEImB,EAA0Bd,EAAWC,EAAW,eAAe,EAAG,CACtE,CAACA,EAAW,wBAAwB,CAAC,EAAGH,CAAA,CACzC,EAEKiB,EAAgB,IACpBxB,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,OAAA,CAAK,UAAWuB,CACd,EAAAvB,EAAM,aAAaa,EAAM,CAAE,KAAMY,EAAS,OAAQ,UAAAL,EAAW,MAAOd,EAAc,QAAU,QAAS,EACrGN,EAAM,aAAac,EAAO,CAAE,YAAAR,EAA0B,QAAAC,EAAkB,CAC3E,EACCQ,kBAAe,IAAE,CAAA,UAAWL,EAAW,mBAAoBK,CAAY,EAAO,IACjF,EAGIW,EAAc,CAClB,UAAWJ,EACX,CAAC,aAAa,EAAGL,EACjB,CAAC,kBAAkB,EAAGU,EAAY,KAClC,GAAGT,CAAA,EAIH,OAAAlB,EAAA,cAAAA,EAAA,SAAA,KACGK,IAAe,KACdL,EAAA,cAAC,IAAA,CACC,IAAKmB,EACL,IAAKlB,EAAM,SAAW,SAAW,sBAAwBA,EAAM,IAC9D,GAAGyB,CAAA,EAEHF,EAAc,CAAA,EAGlBnB,IAAe,UACdL,EAAA,cAAC,SAAO,CAAA,IAAKmB,EAAgD,KAAK,SAAU,GAAGO,CAC5E,EAAAF,EAAA,CACH,CAEJ,CAEJ,CAAC,EAEDZ,EAAK,MAAQb,EAEb,MAAA6B,EAAehB"}

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "The official design system for Helsenorge built with React.",
   "homepage": "https://helsenorge.design",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {