@helsenorge/designsystem-react 5.11.0 → 5.12.0

package/Button.js

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

package/Button.js.map

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

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [5.11.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.10.0&targetVersion=GTv5.11.0) (2023-12-18)
+
+### Bug Fixes
+
+- justeringer på button ([927e486](https://github.com/helsenorge/designsystem/commit/927e486876be4cbe2bb6c9b6d022e032439a2a11)), closes
+  [#308138](https://github.com/helsenorge/designsystem/issues/308138)
+- oppdatert metadata til ikoner ([3b3510b](https://github.com/helsenorge/designsystem/commit/3b3510bb19da59156adb077e15137eb855cb1722)),
+  closes [#316105](https://github.com/helsenorge/designsystem/issues/316105)
+
 ## [5.10.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.9.2&targetVersion=GTv5.10.0) (2023-12-13)
 
 ### Features

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

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

package/components/Button/styles.module.scss

@@ -293,6 +293,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   /* stylelint-disable-next-line */
   &--borderless {
     border-radius: 0;
+
     &:hover {
       box-shadow: none;
     }
@@ -314,6 +315,10 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   &__text {
     color: $white;
     margin: 0 auto 0 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       margin: 0 auto 0 0;
@@ -352,13 +357,16 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
 .diagonal {
   display: block;
-  transform: matrix(-1, 0, 0, 1, 0, 0);
+  transform: matrix(-1, 0, 0, 1, -8, 2);
+  position: absolute;
+  width: 3.7rem;
+  height: 2.25rem;
 
   &__line {
     display: block;
     border-bottom: getSpacer(4xs) dashed $neutral500;
     transform-origin: top left;
-    position: absolute;
+    transform: rotate(37.4deg);
   }
 
   &--on-dark &__line {

package/components/FormGroup/styles.module.scss

@@ -1,7 +1,7 @@
 @import '../../scss/spacers';
 @import '../../scss/breakpoints';
 @import '../../scss/palette';
-@import '../../scss/font-settings';
+@import '../../scss/title';
 
 .form-group-wrapper {
   &__title {
@@ -25,8 +25,8 @@
   }
 
   &__legend {
-    font-size: $font-size-md;
-    font-weight: 600;
+    @include legend;
+
     margin-bottom: getSpacer(m);
     margin-top: 0;
 

package/components/NotificationPanel/NotificationPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,2BAA2B,GAAG,OAAO,GAAG,SAAS,CAAC;AAC9D,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,sBAAsB;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,+BAA+B;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mEAAmE;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,oEAAoE;IACpE,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C,mDAAmD;IACnD,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,sFAAsF;IACtF,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClE,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2JAA2J;IAC3J,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAeD,QAAA,MAAM,iBAAiB,+FA2HrB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"NotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,2BAA2B,GAAG,OAAO,GAAG,SAAS,CAAC;AAC9D,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,sBAAsB;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,+BAA+B;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mEAAmE;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,oEAAoE;IACpE,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C,mDAAmD;IACnD,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,sFAAsF;IACtF,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClE,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2JAA2J;IAC3J,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAeD,QAAA,MAAM,iBAAiB,+FA4HrB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}

package/components/NotificationPanel/index.js

@@ -1,2 +1,2 @@
-import e,{useState as $}from"react";import s from"classnames";import{AnalyticsId as N,IconSize as l}from"../../constants.js";import{useUuid as I}from"../../hooks/useUuid.js";import{getAriaLabelAttributes as S}from"../../utils/accessibility.js";import{B as R}from"../../Button.js";import{Icon as _}from"../Icons/Icon.js";import D from"../Icons/ChevronDown.js";import U from"../Icons/ChevronUp.js";import f from"./DetailButton/styles.module.scss";import{getColor as M}from"../../theme/currys/color.js";import{palette as r}from"../../theme/palette.js";import{C as O}from"../../Close.js";import V from"../Icons/CheckFill.js";import W from"../Icons/ErrorSignFill.js";import j from"../Icons/InfoSignFill.js";import q from"../Icons/TriangleX.js";import t from"./styles.module.scss";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../theme/index.js";import"../../theme/spacers.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";const G=({content:m,buttonText:p,buttonClosedText:o,expanderOpenFromStart:n})=>{const[i,v]=$(n),c=i?p:o,b=I(),u=S({label:c,id:b,prefer:"label"}),E={onClick:()=>v(!i),variant:"borderless",className:s(f["notification-panel__detail"],f["notification-panel__detail-button"]),"aria-expanded":i,...u};return e.createElement("div",{className:f["notification-panel__detail-section"]},e.createElement("div",{className:f["notification-panel__detail-section__button--wrapper"]},e.createElement(R,{testId:"expand","data-analyticsid":N.Expander,...E},c,e.createElement(_,{svgIcon:i?U:D}))),i&&e.createElement("div",{className:s(f["notification-panel__detail-section__content"])},m))},H=({fluid:m,variant:p,children:o})=>{if(m){const n=s(t["fluid-wrapper"],{[t[`fluid-wrapper--${p}`]]:p});return e.createElement("div",{className:n},o)}return o},J=e.forwardRef((m,p)=>{const{children:o,variant:n="info",dismissable:i=!1,onClick:v,expanderChildren:c,expanderButtonText:b,expanderButtonClosedText:u,expanderOpenFromStart:E=!1,compactVariant:a,label:d,fluid:g=!1,size:h,className:w,labelId:y,role:T,testId:B}=m,C=I(y),k={info:e.createElement(_,{svgIcon:j,color:r.blueberry700,hoverColor:r.blueberry700,size:a?l.XSmall:l.Small}),warn:e.createElement(_,{svgIcon:W,color:r.banana700,hoverColor:r.banana700,size:a?l.XSmall:l.Small}),alert:e.createElement(_,{svgIcon:q,color:r.cherry700,hoverColor:r.cherry700,size:a?l.XSmall:l.Small}),success:e.createElement(_,{svgIcon:V,color:r.kiwi900,hoverColor:r.kiwi900,size:a?l.XSmall:l.Small})},z=()=>{const L=s(t["notification-panel__content"]),P=s(t["notification-panel__label"],{[t["notification-panel__label--no-content"]]:!o&&!c,[t["notification-panel__label__compact"]]:!!a,[t["notification-panel__label__compact--basic"]]:a==="basic"}),X=s(t["notification-panel__children"],{[t["notification-panel__label-and-content--spacing"]]:d});return e.createElement("div",{className:L,id:d?void 0:C},d&&e.createElement("h1",{className:P,id:C},d),o&&!a&&e.createElement("div",{className:X},o),c&&b&&u&&!a&&e.createElement(G,{expanderOpenFromStart:E,content:c,buttonText:b,buttonClosedText:u}))},A=s(t["notification-panel"],t[`notification-panel--${n}`],{[t[`notification-panel--${h}`]]:!!h,[t["notification-panel__compact"]]:!!a,[t["notification-panel__compact--basic"]]:a==="basic",[t["notification-panel__compact--outline"]]:a==="outline",[t["notification-panel--has-children"]]:!!o,[t["notification-panel--with-content"]]:c||d&&o,[t["notification-panel--dismissable"]]:i},w),x=T||n==="alert"&&"alert"||void 0,F=x?S({label:d,id:C}):void 0;return e.createElement(H,{fluid:g,variant:n},e.createElement("div",{ref:p,role:x,"data-testid":B,"data-analyticsid":N.NotificationPanel,className:A,...F},e.createElement("span",{className:t["notification-panel__icon"]},k[n]),i&&e.createElement("span",{className:t["notification-panel__close"]},e.createElement(O,{ariaLabel:m.ariaLabelCloseBtn,onClick:v,color:M("black")})),z()))}),kt=J;export{kt as default};
+import t,{useState as $}from"react";import m from"classnames";import{AnalyticsId as N,IconSize as r}from"../../constants.js";import{useUuid as I}from"../../hooks/useUuid.js";import{getAriaLabelAttributes as S}from"../../utils/accessibility.js";import{B as R}from"../../Button.js";import{Icon as _}from"../Icons/Icon.js";import D from"../Icons/ChevronDown.js";import U from"../Icons/ChevronUp.js";import f from"./DetailButton/styles.module.scss";import{getColor as M}from"../../theme/currys/color.js";import{palette as c}from"../../theme/palette.js";import{C as O}from"../../Close.js";import V from"../Icons/CheckFill.js";import W from"../Icons/ErrorSignFill.js";import j from"../Icons/InfoSignFill.js";import q from"../Icons/TriangleX.js";import e from"./styles.module.scss";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../theme/index.js";import"../../theme/spacers.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";const G=({content:p,buttonText:d,buttonClosedText:o,expanderOpenFromStart:n})=>{const[i,v]=$(n),l=i?d:o,b=I(),u=S({label:l,id:b,prefer:"label"}),E={onClick:()=>v(!i),variant:"borderless",className:m(f["notification-panel__detail"],f["notification-panel__detail-button"]),"aria-expanded":i,...u};return t.createElement("div",{className:f["notification-panel__detail-section"]},t.createElement("div",{className:f["notification-panel__detail-section__button--wrapper"]},t.createElement(R,{testId:"expand","data-analyticsid":N.Expander,...E},l,t.createElement(_,{svgIcon:i?U:D}))),i&&t.createElement("div",{className:m(f["notification-panel__detail-section__content"])},p))},H=({fluid:p,variant:d,children:o})=>{if(p){const n=m(e["fluid-wrapper"],{[e[`fluid-wrapper--${d}`]]:d});return t.createElement("div",{className:n},o)}return o},J=t.forwardRef((p,d)=>{const{children:o,variant:n="info",dismissable:i=!1,onClick:v,expanderChildren:l,expanderButtonText:b,expanderButtonClosedText:u,expanderOpenFromStart:E=!1,compactVariant:a,label:s,fluid:g=!1,size:h,className:w,labelId:y,role:T,testId:B}=p,C=I(y),k={info:t.createElement(_,{svgIcon:j,color:c.blueberry700,hoverColor:c.blueberry700,size:a?r.XSmall:r.Small}),warn:t.createElement(_,{svgIcon:W,color:c.banana700,hoverColor:c.banana700,size:a?r.XSmall:r.Small}),alert:t.createElement(_,{svgIcon:q,color:c.cherry700,hoverColor:c.cherry700,size:a?r.XSmall:r.Small}),success:t.createElement(_,{svgIcon:V,color:c.kiwi900,hoverColor:c.kiwi900,size:a?r.XSmall:r.Small})},z=()=>{const L=m(e["notification-panel__content"]),P=m(e["notification-panel__label"],{[e["notification-panel__label--no-content"]]:!o&&!l,[e["notification-panel__label__compact"]]:!!a,[e["notification-panel__label__compact--basic"]]:a==="basic"}),X=m(e["notification-panel__children"],{[e["notification-panel__label-and-content--spacing"]]:s,[e["notification-panel__children--expander-no-label"]]:l&&!s});return t.createElement("div",{className:L,id:s?void 0:C},s&&t.createElement("h1",{className:P,id:C},s),o&&!a&&t.createElement("div",{className:X},o),l&&b&&u&&!a&&t.createElement(G,{expanderOpenFromStart:E,content:l,buttonText:b,buttonClosedText:u}))},A=m(e["notification-panel"],e[`notification-panel--${n}`],{[e[`notification-panel--${h}`]]:!!h,[e["notification-panel__compact"]]:!!a,[e["notification-panel__compact--basic"]]:a==="basic",[e["notification-panel__compact--outline"]]:a==="outline",[e["notification-panel--has-children"]]:!!o,[e["notification-panel--with-content"]]:l||s&&o,[e["notification-panel--dismissable"]]:i},w),x=T||n==="alert"&&"alert"||void 0,F=x?S({label:s,id:C}):void 0;return t.createElement(H,{fluid:g,variant:n},t.createElement("div",{ref:d,role:x,"data-testid":B,"data-analyticsid":N.NotificationPanel,className:A,...F},t.createElement("span",{className:e["notification-panel__icon"]},k[n]),i&&t.createElement("span",{className:e["notification-panel__close"]},t.createElement(O,{ariaLabel:p.ariaLabelCloseBtn,onClick:v,color:M("black")})),z()))}),ke=J;export{ke as default};
 //# sourceMappingURL=index.js.map

package/components/NotificationPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/DetailButton/DetailButton.tsx","../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../../constants';\nimport { useUuid } from '../../../hooks/useUuid';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../../utils/accessibility';\nimport Button, { ButtonProps } from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\ntype Props = {\n  content: React.ReactNode;\n  buttonClosedText: string;\n  buttonText: string;\n  expanderOpenFromStart: boolean;\n};\nexport const DetailButton: React.FC<Props> = ({ content, buttonText, buttonClosedText, expanderOpenFromStart }: Props): JSX.Element => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n  const activeButtonText = isExpanded ? buttonText : buttonClosedText;\n\n  const buttonTextId = useUuid();\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: activeButtonText,\n    id: buttonTextId,\n    prefer: 'label',\n  });\n\n  const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n    onClick: () => setIsExpanded(!isExpanded),\n    variant: 'borderless',\n    className: classNames(styles['notification-panel__detail'], styles['notification-panel__detail-button']),\n    'aria-expanded': isExpanded,\n    ...ariaLabelAttributes,\n  };\n\n  return (\n    <div className={styles['notification-panel__detail-section']}>\n      <div className={styles['notification-panel__detail-section__button--wrapper']}>\n        <Button testId=\"expand\" data-analyticsid={AnalyticsId.Expander} {...commonProps}>\n          {activeButtonText}\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      </div>\n      {isExpanded && <div className={classNames(styles['notification-panel__detail-section__content'])}>{content}</div>}\n    </div>\n  );\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { DetailButton } from './DetailButton/DetailButton';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Close from '../Close';\nimport Icon from '../Icons';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid' | 'variant'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, variant, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper'], { [styles[`fluid-wrapper--${variant}`]]: variant });\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const variantToIconMap = {\n    info: (\n      <Icon\n        svgIcon={InfoSignFill}\n        color={palette.blueberry700}\n        hoverColor={palette.blueberry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    warn: (\n      <Icon\n        svgIcon={ErrorSignFill}\n        color={palette.banana700}\n        hoverColor={palette.banana700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    alert: (\n      <Icon\n        svgIcon={TriangleX}\n        color={palette.cherry700}\n        hoverColor={palette.cherry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    success: (\n      <Icon\n        svgIcon={CheckFill}\n        color={palette.kiwi900}\n        hoverColor={palette.kiwi900}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n  };\n  const renderContent = (): JSX.Element => {\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label__compact']]: !!compactVariant,\n      [styles['notification-panel__label__compact--basic']]: compactVariant === 'basic',\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__label-and-content--spacing']]: label,\n    });\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <h1 className={labelClasses} id={uuid}>\n            {label}\n          </h1>\n        )}\n        {children && !compactVariant && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <DetailButton\n            expanderOpenFromStart={expanderOpenFromStart}\n            content={expanderChildren}\n            buttonText={expanderButtonText}\n            buttonClosedText={expanderButtonClosedText}\n          />\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    {\n      [styles[`notification-panel--${size}`]]: !!size,\n      [styles['notification-panel__compact']]: !!compactVariant,\n      [styles['notification-panel__compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel__compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--has-children']]: !!children,\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'alert' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid} variant={variant}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <span className={styles['notification-panel__icon']}>{variantToIconMap[variant]}</span>\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["DetailButton","content","buttonText","buttonClosedText","expanderOpenFromStart","isExpanded","setIsExpanded","useState","activeButtonText","buttonTextId","useUuid","ariaLabelAttributes","getAriaLabelAttributes","commonProps","classNames","styles","React","Button","AnalyticsId","Icon","ChevronUp","ChevronDown","FluidWrapper","fluid","variant","children","fluidClasses","NotificationPanel","props","ref","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","compactVariant","label","size","className","labelId","role","testId","uuid","variantToIconMap","InfoSignFill","palette","IconSize","ErrorSignFill","TriangleX","CheckFill","renderContent","contentClasses","labelClasses","childrenClasses","notificationPanelClasses","ariaRole","Close","getColor","NotificationPanel$1"],"mappings":"8vCAoBO,MAAMA,EAAgC,CAAC,CAAE,QAAAC,EAAS,WAAAC,EAAY,iBAAAC,EAAkB,sBAAAC,KAAgD,CACrI,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAkBH,CAAqB,EACrEI,EAAmBH,EAAaH,EAAaC,EAE7CM,EAAeC,IAEfC,EAAsBC,EAAuB,CACjD,MAAOJ,EACP,GAAIC,EACJ,OAAQ,OAAA,CACT,EAEKI,EAA0D,CAC9D,QAAS,IAAMP,EAAc,CAACD,CAAU,EACxC,QAAS,aACT,UAAWS,EAAWC,EAAO,4BAA4B,EAAGA,EAAO,mCAAmC,CAAC,EACvG,gBAAiBV,EACjB,GAAGM,CAAA,EAGL,uBACG,MAAI,CAAA,UAAWI,EAAO,oCAAoC,CAAA,kBACxD,MAAI,CAAA,UAAWA,EAAO,qDAAqD,GACzEC,EAAA,cAAAC,EAAA,CAAO,OAAO,SAAS,mBAAkBC,EAAY,SAAW,GAAGL,CACjE,EAAAL,kBACAW,EAAK,CAAA,QAASd,EAAae,EAAYC,CAAA,CAAa,CACvD,CACF,EACChB,GAAeW,EAAA,cAAA,MAAA,CAAI,UAAWF,EAAWC,EAAO,6CAA6C,CAAC,GAAId,CAAQ,CAC7G,CAEJ,ECaMqB,EAAyC,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,SAAAC,KAAe,CAC/E,GAAIF,EAAO,CACT,MAAMG,EAAeZ,EAAWC,EAAO,eAAe,EAAG,CAAE,CAACA,EAAO,kBAAkBS,CAAO,EAAE,CAAC,EAAGA,CAAS,CAAA,EAE3G,OAAQR,EAAA,cAAA,MAAA,CAAI,UAAWU,CAAA,EAAeD,CAAS,CACjD,CACO,OAAAA,CACT,EAEME,EAAoBX,EAAM,WAAmD,CAACY,EAAOC,IAAQ,CAC3F,KAAA,CACJ,SAAAJ,EACA,QAAAD,EAAU,OACV,YAAAM,EAAc,GACd,QAAAC,EACA,iBAAAC,EACA,mBAAAC,EACA,yBAAAC,EACA,sBAAA9B,EAAwB,GACxB,eAAA+B,EACA,MAAAC,EACA,MAAAb,EAAQ,GACR,KAAAc,EACA,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,OAAAC,CACE,EAAAb,EACEc,EAAOhC,EAAQ6B,CAAO,EACtBI,EAAmB,CACvB,KACE3B,EAAA,cAACG,EAAA,CACC,QAASyB,EACT,MAAOC,EAAQ,aACf,WAAYA,EAAQ,aACpB,KAAMV,EAAiBW,EAAS,OAASA,EAAS,KAAA,CACpD,EAEF,KACE9B,EAAA,cAACG,EAAA,CACC,QAAS4B,EACT,MAAOF,EAAQ,UACf,WAAYA,EAAQ,UACpB,KAAMV,EAAiBW,EAAS,OAASA,EAAS,KAAA,CACpD,EAEF,MACE9B,EAAA,cAACG,EAAA,CACC,QAAS6B,EACT,MAAOH,EAAQ,UACf,WAAYA,EAAQ,UACpB,KAAMV,EAAiBW,EAAS,OAASA,EAAS,KAAA,CACpD,EAEF,QACE9B,EAAA,cAACG,EAAA,CACC,QAAS8B,EACT,MAAOJ,EAAQ,QACf,WAAYA,EAAQ,QACpB,KAAMV,EAAiBW,EAAS,OAASA,EAAS,KAAA,CACpD,CAAA,EAGEI,EAAgB,IAAmB,CACvC,MAAMC,EAAiBrC,EAAWC,EAAO,6BAA6B,CAAC,EACjEqC,EAAetC,EAAWC,EAAO,2BAA2B,EAAG,CACnE,CAACA,EAAO,uCAAuC,CAAC,EAAG,CAACU,GAAY,CAACO,EACjE,CAACjB,EAAO,oCAAoC,CAAC,EAAG,CAAC,CAACoB,EAClD,CAACpB,EAAO,2CAA2C,CAAC,EAAGoB,IAAmB,OAAA,CAC3E,EACKkB,EAAkBvC,EAAWC,EAAO,8BAA8B,EAAG,CACzE,CAACA,EAAO,gDAAgD,CAAC,EAAGqB,CAAA,CAC7D,EAED,OACGpB,EAAA,cAAA,MAAA,CAAI,UAAWmC,EAAgB,GAAKf,EAAe,OAAPM,CAC1C,EAAAN,GACEpB,EAAA,cAAA,KAAA,CAAG,UAAWoC,EAAc,GAAIV,GAC9BN,CACH,EAEDX,GAAY,CAACU,mBAAmB,MAAI,CAAA,UAAWkB,GAAkB5B,CAAS,EAC1EO,GAAoBC,GAAsBC,GAA4B,CAACC,GACtEnB,EAAA,cAAChB,EAAA,CACC,sBAAAI,EACA,QAAS4B,EACT,WAAYC,EACZ,iBAAkBC,CAAA,CAAA,CAGxB,CAAA,EAIEoB,EAA2BxC,EAC/BC,EAAO,oBAAoB,EAC3BA,EAAO,uBAAuBS,CAAO,EAAE,EACvC,CACE,CAACT,EAAO,uBAAuBsB,CAAI,EAAE,CAAC,EAAG,CAAC,CAACA,EAC3C,CAACtB,EAAO,6BAA6B,CAAC,EAAG,CAAC,CAACoB,EAC3C,CAACpB,EAAO,oCAAoC,CAAC,EAAGoB,IAAmB,QACnE,CAACpB,EAAO,sCAAsC,CAAC,EAAGoB,IAAmB,UACrE,CAACpB,EAAO,kCAAkC,CAAC,EAAG,CAAC,CAACU,EAChD,CAACV,EAAO,kCAAkC,CAAC,EAAGiB,GAAqBI,GAASX,EAC5E,CAACV,EAAO,iCAAiC,CAAC,EAAGe,CAC/C,EACAQ,CAAA,EAGIiB,EAAWf,GAAShB,IAAY,SAAW,SAAY,OACvDb,EAAsB4C,EAAW3C,EAAuB,CAAE,MAAAwB,EAAO,GAAIM,CAAA,CAAM,EAAI,OAGnF,OAAA1B,EAAA,cAACM,EAAa,CAAA,MAAAC,EAAc,QAAAC,CAC1B,EAAAR,EAAA,cAAC,MAAA,CACC,IAAAa,EACA,KAAM0B,EACN,cAAad,EACb,mBAAkBvB,EAAY,kBAC9B,UAAWoC,EACV,GAAG3C,CAAA,EAEJK,EAAA,cAAC,QAAK,UAAWD,EAAO,0BAA0B,CAAI,EAAA4B,EAAiBnB,CAAO,CAAE,EAC/EM,GACEd,EAAA,cAAA,OAAA,CAAK,UAAWD,EAAO,2BAA2B,CACjD,EAAAC,EAAA,cAACwC,EAAM,CAAA,UAAW5B,EAAM,kBAAmB,QAAAG,EAAkB,MAAO0B,EAAS,OAAO,EAAG,CACzF,EAEDP,EAAc,CAAA,CAEnB,CAEJ,CAAC,EAEDQ,GAAe/B"}
+{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/DetailButton/DetailButton.tsx","../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../../constants';\nimport { useUuid } from '../../../hooks/useUuid';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../../utils/accessibility';\nimport Button, { ButtonProps } from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\ntype Props = {\n  content: React.ReactNode;\n  buttonClosedText: string;\n  buttonText: string;\n  expanderOpenFromStart: boolean;\n};\nexport const DetailButton: React.FC<Props> = ({ content, buttonText, buttonClosedText, expanderOpenFromStart }: Props): JSX.Element => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n  const activeButtonText = isExpanded ? buttonText : buttonClosedText;\n\n  const buttonTextId = useUuid();\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: activeButtonText,\n    id: buttonTextId,\n    prefer: 'label',\n  });\n\n  const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n    onClick: () => setIsExpanded(!isExpanded),\n    variant: 'borderless',\n    className: classNames(styles['notification-panel__detail'], styles['notification-panel__detail-button']),\n    'aria-expanded': isExpanded,\n    ...ariaLabelAttributes,\n  };\n\n  return (\n    <div className={styles['notification-panel__detail-section']}>\n      <div className={styles['notification-panel__detail-section__button--wrapper']}>\n        <Button testId=\"expand\" data-analyticsid={AnalyticsId.Expander} {...commonProps}>\n          {activeButtonText}\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      </div>\n      {isExpanded && <div className={classNames(styles['notification-panel__detail-section__content'])}>{content}</div>}\n    </div>\n  );\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { DetailButton } from './DetailButton/DetailButton';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Close from '../Close';\nimport Icon from '../Icons';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid' | 'variant'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, variant, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper'], { [styles[`fluid-wrapper--${variant}`]]: variant });\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const variantToIconMap = {\n    info: (\n      <Icon\n        svgIcon={InfoSignFill}\n        color={palette.blueberry700}\n        hoverColor={palette.blueberry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    warn: (\n      <Icon\n        svgIcon={ErrorSignFill}\n        color={palette.banana700}\n        hoverColor={palette.banana700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    alert: (\n      <Icon\n        svgIcon={TriangleX}\n        color={palette.cherry700}\n        hoverColor={palette.cherry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    success: (\n      <Icon\n        svgIcon={CheckFill}\n        color={palette.kiwi900}\n        hoverColor={palette.kiwi900}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n  };\n  const renderContent = (): JSX.Element => {\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label__compact']]: !!compactVariant,\n      [styles['notification-panel__label__compact--basic']]: compactVariant === 'basic',\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__label-and-content--spacing']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n    });\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <h1 className={labelClasses} id={uuid}>\n            {label}\n          </h1>\n        )}\n        {children && !compactVariant && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <DetailButton\n            expanderOpenFromStart={expanderOpenFromStart}\n            content={expanderChildren}\n            buttonText={expanderButtonText}\n            buttonClosedText={expanderButtonClosedText}\n          />\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    {\n      [styles[`notification-panel--${size}`]]: !!size,\n      [styles['notification-panel__compact']]: !!compactVariant,\n      [styles['notification-panel__compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel__compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--has-children']]: !!children,\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'alert' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid} variant={variant}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <span className={styles['notification-panel__icon']}>{variantToIconMap[variant]}</span>\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["DetailButton","content","buttonText","buttonClosedText","expanderOpenFromStart","isExpanded","setIsExpanded","useState","activeButtonText","buttonTextId","useUuid","ariaLabelAttributes","getAriaLabelAttributes","commonProps","classNames","styles","React","Button","AnalyticsId","Icon","ChevronUp","ChevronDown","FluidWrapper","fluid","variant","children","fluidClasses","NotificationPanel","props","ref","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","compactVariant","label","size","className","labelId","role","testId","uuid","variantToIconMap","InfoSignFill","palette","IconSize","ErrorSignFill","TriangleX","CheckFill","renderContent","contentClasses","labelClasses","childrenClasses","notificationPanelClasses","ariaRole","Close","getColor","NotificationPanel$1"],"mappings":"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"}

package/components/NotificationPanel/styles.module.scss

@@ -171,6 +171,14 @@
   &__children {
     font-weight: 600;
     padding: getSpacer(3xs) 0;
+
+    &--expander-no-label {
+      margin: getSpacer(2xs) 0 0 0;
+
+      @media (max-width: map.get($grid-breakpoints, lg)) {
+        padding-top: 0;
+      }
+    }
   }
 
   &__icon {

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

@@ -5,6 +5,7 @@ export type Styles = {
   'fluid-wrapper': string;
   'notification-panel': string;
   'notification-panel__children': string;
+  'notification-panel__children--expander-no-label': string;
   'notification-panel__close': string;
   'notification-panel__compact': string;
   'notification-panel__compact--basic': string;

package/package.json

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

package/scss/_font-settings.scss

@@ -1,3 +1,5 @@
+// @todo Slett denne filen, fontstørrelser skal hardkodes i _title.scss (som renames til _font-mixins.scss)
+
 $font-size-xs: 1rem; // 16px
 $font-size-sm: 1.125rem; // 18px
 $font-size-md: 1.25rem; // 20px

package/scss/_title.scss

@@ -3,6 +3,8 @@
 @import './breakpoints';
 @import './font-settings';
 
+// @todo rename denne filen til font-mixins e.l.
+
 @mixin title-feature {
   font-size: 2.375rem;
   line-height: 2.875rem;
@@ -63,3 +65,14 @@
     font-size: $font-size-sm;
   }
 }
+
+@mixin legend {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}

package/scss/typography.module.scss

@@ -51,14 +51,7 @@ import designsystemtypography from './scss/typography.scss'
 }
 
 .legend {
-  font-size: $font-size-md;
-  line-height: 1.625rem;
-  font-weight: 600;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: getSpacer(m);
-    line-height: $lineheight-size-md;
-  }
+  @include legend;
 }
 
 .label {