@helsenorge/designsystem-react 4.3.1 → 4.4.0

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 \"region\". 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  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: uuid });\n\n  const ariaRole = role || (variant === 'alert' && 'alert') || 'region';\n\n  return (\n    <FluidWrapper fluid={fluid} variant={variant}>\n      <section\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      </section>\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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"}
+{"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 \"region\". 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  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: uuid });\n\n  const ariaRole = role || (variant === 'alert' && 'alert') || 'region';\n\n  return (\n    <FluidWrapper fluid={fluid} variant={variant}>\n      <section\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      </section>\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/Panel/index.js

@@ -1,2 +1,2 @@
-import{P as o}from"../../Panel.js";import{c as I,a as J,b as K}from"../../Panel.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useExpand.js";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../utils/accessibility.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/Calendar.js";import"../Icons/ChevronDown.js";import"../Icons/ChevronUp.js";import"../Icons/Pencil.js";import"../Icons/Watch.js";import"../../Title.js";import"../Title/styles.module.scss";import"./styles.module.scss";export{I as PanelLayout,J as PanelStatus,K as PanelVariant,o as default};
+import{P as o}from"../../Panel.js";import{c as J,a as K,b as M}from"../../Panel.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useExpand.js";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../utils/accessibility.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../Button.js";import"../Icons/Icon.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"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/Calendar.js";import"../Icons/ChevronDown.js";import"../Icons/ChevronUp.js";import"../Icons/Pencil.js";import"../Icons/Watch.js";import"../../Title.js";import"../Title/styles.module.scss";import"./styles.module.scss";export{J as PanelLayout,K as PanelStatus,M as PanelVariant,o as default};
 //# sourceMappingURL=index.js.map

package/components/PanelList/index.js

@@ -1,2 +1,2 @@
-import r from"react";import c from"classnames";import{AnalyticsId as f}from"../../constants.js";import{b as p,P}from"../../Panel.js";import a from"./styles.module.scss";import"../../hooks/useExpand.js";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../utils/accessibility.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/Calendar.js";import"../Icons/ChevronDown.js";import"../Icons/ChevronUp.js";import"../Icons/Pencil.js";import"../Icons/Watch.js";import"../../Title.js";import"../Title/styles.module.scss";import"../Panel/styles.module.scss";const y=o=>r.isValidElement(o)&&o.type===P,N=r.forwardRef(function(e,n){const{testId:s,children:l,variant:i=p.fill}=e,d=(t,m)=>r.cloneElement(t,{variant:i,noTopBorder:i===p.line&&!m,className:c(t.props.className,i!==p.line&&a["panel-list__panel"])});return r.createElement("div",{ref:n,"data-testid":s,className:a["panel-list"],"data-analyticsid":f.PanelList},r.Children.map(l,(t,m)=>y(t)?d(t,m===0):t))}),Z=N;export{Z as default};
+import r from"react";import c from"classnames";import{AnalyticsId as f}from"../../constants.js";import{b as p,P}from"../../Panel.js";import a from"./styles.module.scss";import"../../hooks/useExpand.js";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../utils/accessibility.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../Button.js";import"../Icons/Icon.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"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/Calendar.js";import"../Icons/ChevronDown.js";import"../Icons/ChevronUp.js";import"../Icons/Pencil.js";import"../Icons/Watch.js";import"../../Title.js";import"../Title/styles.module.scss";import"../Panel/styles.module.scss";const y=o=>r.isValidElement(o)&&o.type===P,N=r.forwardRef(function(e,n){const{testId:s,children:l,variant:i=p.fill}=e,d=(t,m)=>r.cloneElement(t,{variant:i,noTopBorder:i===p.line&&!m,className:c(t.props.className,i!==p.line&&a["panel-list__panel"])});return r.createElement("div",{ref:n,"data-testid":s,className:a["panel-list"],"data-analyticsid":f.PanelList},r.Children.map(l,(t,m)=>y(t)?d(t,m===0):t))}),tt=N;export{tt as default};
 //# sourceMappingURL=index.js.map

package/components/PanelList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel';\n\nimport styles from './styles.module.scss';\n\ninterface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} className={styles['panel-list']} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["isPanelComponent","element","React","Panel","PanelList","props","ref","testId","children","variant","PanelVariant","renderPanel","panel","firstChild","classNames","styles","AnalyticsId","child","index","PanelList$1"],"mappings":"0mCAkBA,MAAMA,EAAoBC,GACxBC,EAAM,eAA2BD,CAAO,GAAMA,EAA+B,OAASE,EAElFC,EAAYF,EAAM,WAAW,SAA2BG,EAAuBC,EAAyC,CAC5H,KAAM,CAAE,OAAAC,EAAQ,SAAAC,EAAU,QAAAC,EAAUC,EAAa,IAAS,EAAAL,EAEpDM,EAAc,CAACC,EAAuCC,IAC1DX,EAAM,aAAaU,EAAO,CACxB,QAAAH,EACA,YAAaA,IAAYC,EAAa,MAAQ,CAACG,EAC/C,UAAWC,EAAWF,EAAM,MAAM,UAAWH,IAAYC,EAAa,MAAQK,EAAO,mBAAmB,CAAC,CAAA,CAC1G,EAEH,OACGb,EAAA,cAAA,MAAA,CAAI,IAAAI,EAAU,cAAaC,EAAQ,UAAWQ,EAAO,YAAY,EAAG,mBAAkBC,EAAY,SAAA,EAChGd,EAAM,SAAS,IAAIM,EAAU,CAACS,EAAOC,IAAWlB,EAAiBiB,CAAK,EAAIN,EAAYM,EAAOC,IAAU,CAAC,EAAID,CAAM,CACrH,CAEJ,CAAC,EAEDE,EAAef"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel';\n\nimport styles from './styles.module.scss';\n\ninterface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} className={styles['panel-list']} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["isPanelComponent","element","React","Panel","PanelList","props","ref","testId","children","variant","PanelVariant","renderPanel","panel","firstChild","classNames","styles","AnalyticsId","child","index","PanelList$1"],"mappings":"kpCAkBA,MAAMA,EAAoBC,GACxBC,EAAM,eAA2BD,CAAO,GAAMA,EAA+B,OAASE,EAElFC,EAAYF,EAAM,WAAW,SAA2BG,EAAuBC,EAAyC,CAC5H,KAAM,CAAE,OAAAC,EAAQ,SAAAC,EAAU,QAAAC,EAAUC,EAAa,IAAS,EAAAL,EAEpDM,EAAc,CAACC,EAAuCC,IAC1DX,EAAM,aAAaU,EAAO,CACxB,QAAAH,EACA,YAAaA,IAAYC,EAAa,MAAQ,CAACG,EAC/C,UAAWC,EAAWF,EAAM,MAAM,UAAWH,IAAYC,EAAa,MAAQK,EAAO,mBAAmB,CAAC,CAAA,CAC1G,EAEH,OACGb,EAAA,cAAA,MAAA,CAAI,IAAAI,EAAU,cAAaC,EAAQ,UAAWQ,EAAO,YAAY,EAAG,mBAAkBC,EAAY,SAAA,EAChGd,EAAM,SAAS,IAAIM,EAAU,CAACS,EAAOC,IAAWlB,EAAiBiB,CAAK,EAAIN,EAAYM,EAAOC,IAAU,CAAC,EAAID,CAAM,CACrH,CAEJ,CAAC,EAEDE,GAAef"}

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

@@ -1 +1 @@
-{"version":3,"file":"PopMenu.d.ts","sourceRoot":"","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAchD,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKtD,oBAAY,cAAc;IACxB,OAAO,aAAa;IACpB,MAAM,YAAY;IAClB,WAAW,iBAAiB;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5C,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yDAAyD;IACzD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA2E1C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"PopMenu.d.ts","sourceRoot":"","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAchD,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKtD,oBAAY,cAAc;IACxB,OAAO,aAAa;IACpB,MAAM,YAAY;IAClB,WAAW,iBAAiB;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5C,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yDAAyD;IACzD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAwE1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/components/PopMenu/index.js

@@ -1,2 +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};
+import t,{useRef as p,useState as S}from"react";import i from"classnames";import{IconSize as b,AnalyticsId as h}from"../../constants.js";import{useBreakpoint as w}from"../../hooks/useBreakpoint.js";import{useHover as H}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"../../hooks/usePseudoClasses.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/refs.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"../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 n=p(null),s=p(null),a=p(null),[r,m]=S(!1),{children:l,popOverClassName:d,popMenuClassName:v,openButtonTestId:I,closeButtonTestId:C,popOverTestId:k,popMenuVariant:c="on-white",openButtonAriaLabel:B,closeButtonAriaLabel:N}=o,u=i(e["pop-menu-button"],{[e[`pop-menu-button--${c}`]]:c}),f=w()<z.md;_(a,()=>m(!r));const{isHovered:y}=H(s),O=f?b.XSmall:b.Small,E=()=>{if(A(l,$))return t.createElement(x,{testId:k,className:i(e["pop-menu__pop-over"],d),arrowClassName:e["pop-menu__pop-over-arrow"],controllerRef:n,popOverRef:a},l)},L=t.createElement("button",{ref:s,"data-testid":I,className:u,"aria-label":B||"Se mer",onClick:()=>m(!0),type:"button"},t.createElement(T,{svgIcon:P,className:"test",color:g("black"),size:O,isHovered:y})),R=t.createElement(M,{ariaLabel:N,color:"black",className:u,testId:C,ref:n,onClick:()=>m(!1),small:f});return t.createElement("div",{className:i(e["pop-menu-button"],v),"data-analyticsid":h.PopMenu},r?R:L,r&&E())},$o=G;export{G as PopMenu,D as PopMenuVariant,$o as default};
 //# sourceMappingURL=index.js.map

package/components/PopMenu/index.js.map

@@ -1 +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"}
+{"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  const { isHovered: openButtonIsHovered } = useHover(openRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\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\n  const openButton = (\n    <button\n      ref={openRef}\n      data-testid={openButtonTestId}\n      className={buttonClasses}\n      aria-label={openButtonAriaLabel || 'Se mer'}\n      onClick={(): void => 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    <Close\n      ariaLabel={closeButtonAriaLabel}\n      color=\"black\"\n      className={buttonClasses}\n      testId={closeButtonTestId}\n      ref={closeRef}\n      onClick={(): void => setIsOpen(false)}\n      small={mobile}\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","openButtonIsHovered","useHover","mobileIconSize","IconSize","renderChildren","isComponent","LinkList","React","PopOver","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":"+tDAmBY,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,EACpD,KAAM,CAAE,UAAWmB,CAAoB,EAAIC,EAAStB,CAAO,EACrDuB,EAAiBN,EAASO,EAAS,OAASA,EAAS,MAErDC,EAAiB,IAAM,CACvB,GAAAC,EAA2BrB,EAAUsB,CAAQ,EAE7C,OAAAC,EAAA,cAACC,EAAA,CACC,OAAQnB,EACR,UAAWK,EAAWC,EAAO,oBAAoB,EAAGV,CAAgB,EACpE,eAAgBU,EAAO,0BAA0B,EACjD,cAAelB,EACf,WAAAG,CAAA,EAECI,CAAA,CAGP,EAGIyB,EACJF,EAAA,cAAC,SAAA,CACC,IAAK5B,EACL,cAAaQ,EACb,UAAWM,EACX,aAAYF,GAAuB,SACnC,QAAS,IAAYT,EAAU,EAAI,EACnC,KAAK,QAAA,EAEJyB,EAAA,cAAAG,EAAA,CAAK,QAASC,EAAc,UAAU,OAAO,MAAOC,EAAS,OAAO,EAAG,KAAMV,EAAgB,UAAWF,EAAqB,CAAA,EAI5Ha,EACJN,EAAA,cAACO,EAAA,CACC,UAAWtB,EACX,MAAM,QACN,UAAWC,EACX,OAAQL,EACR,IAAKX,EACL,QAAS,IAAYK,EAAU,EAAK,EACpC,MAAOc,CAAA,CAAA,EAIX,uBACG,MAAI,CAAA,UAAWF,EAAWC,EAAO,iBAAiB,EAAGT,CAAgB,EAAG,mBAAkB6B,EAAY,SACnGlC,EAAsBgC,EAAbJ,EACV5B,GAAUuB,GACb,CAEJ,EAEAY,GAAezC"}

package/components/ServiceMessage/ServiceMessage.d.ts

@@ -4,9 +4,9 @@ import { NotificationPanelVariants } from '../NotificationPanel';
 export interface ServiceMessageProps {
     /** Sets a label for the notification panel. */
     label: string;
-    /** String displayed in service-message when expended*/
+    /** String displayed in service-message when expanded */
     info?: string;
-    /** String displayed in service-message when expended, with a smaller font*/
+    /** String displayed in service-message when expanded, with a smaller font */
     extraInfo?: string;
     /** function that runs on dismiss */
     onDismiss?: () => void;
@@ -26,7 +26,10 @@ export interface ServiceMessageProps {
     variant?: NotificationPanelVariants;
     /** Sets the data-testid attribute. */
     testId?: string;
-    /** First of its type. Used to remove border-top */
+    /**
+     * First of its type. Used to remove border-top
+     * @deprecated Har ingen effekt på komponenten
+     */
     first?: boolean;
 }
 declare const ServiceMessage: React.FC<ServiceMessageProps>;

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,CAuIjD,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;AAWlD,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAsHjE,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,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;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2DjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/ServiceMessage/componentdata.json

@@ -1 +1 @@
-{"props":{"label":{"defaultValue":null,"description":"Sets a label for the notification panel.","name":"label","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":true,"type":{"name":"string"}},"info":{"defaultValue":null,"description":"String displayed in service-message when expended","name":"info","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"extraInfo":{"defaultValue":null,"description":"String displayed in service-message when expended, with a smaller font","name":"extraInfo","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"onDismiss":{"defaultValue":null,"description":"function that runs on dismiss","name":"onDismiss","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"(() => void)"}},"dismissable":{"defaultValue":{"value":"true"},"description":"Allows for dismiss to be an option, also for ServiceMessage with only label as content","name":"dismissable","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"boolean"}},"expanderOpenFromStart":{"defaultValue":{"value":"false"},"description":"Makes expander be open from start.","name":"expanderOpenFromStart","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"boolean"}},"urlTitle":{"defaultValue":null,"description":"Name that describes a url-link for the user","name":"urlTitle","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"url":{"defaultValue":null,"description":"Url for further information","name":"url","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"target":{"defaultValue":{"value":"_self"},"description":"Sets target for the anchorlink to the url","name":"target","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"enum","raw":"AnchorLinkTargets","value":[{"value":"\"_self\""},{"value":"\"_blank\""},{"value":"\"_parent\""}]}},"closeBtnText":{"defaultValue":{"value":"fjern melding"},"description":"Text on close-button in service messages.","name":"closeBtnText","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":{"value":"alert"},"description":"Changes the visual representation.","name":"variant","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"enum","raw":"NotificationPanelVariants","value":[{"value":"\"info\""},{"value":"\"warn\""},{"value":"\"alert\""},{"value":"\"success\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"first":{"defaultValue":{"value":"false"},"description":"First of its type. Used to remove border-top","name":"first","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"boolean"}}}}
+{"props":{"label":{"defaultValue":null,"description":"Sets a label for the notification panel.","name":"label","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":true,"type":{"name":"string"}},"info":{"defaultValue":null,"description":"String displayed in service-message when expanded","name":"info","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"extraInfo":{"defaultValue":null,"description":"String displayed in service-message when expanded, with a smaller font","name":"extraInfo","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"onDismiss":{"defaultValue":null,"description":"function that runs on dismiss","name":"onDismiss","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"(() => void)"}},"dismissable":{"defaultValue":{"value":"true"},"description":"Allows for dismiss to be an option, also for ServiceMessage with only label as content","name":"dismissable","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"boolean"}},"expanderOpenFromStart":{"defaultValue":{"value":"false"},"description":"Makes expander be open from start.","name":"expanderOpenFromStart","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"boolean"}},"urlTitle":{"defaultValue":null,"description":"Name that describes a url-link for the user","name":"urlTitle","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"url":{"defaultValue":null,"description":"Url for further information","name":"url","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"target":{"defaultValue":{"value":"_self"},"description":"Sets target for the anchorlink to the url","name":"target","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"enum","raw":"AnchorLinkTargets","value":[{"value":"\"_self\""},{"value":"\"_blank\""},{"value":"\"_parent\""}]}},"closeBtnText":{"defaultValue":{"value":"fjern melding"},"description":"Text on close-button in service messages.","name":"closeBtnText","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":{"value":"alert"},"description":"Changes the visual representation.","name":"variant","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"enum","raw":"NotificationPanelVariants","value":[{"value":"\"info\""},{"value":"\"warn\""},{"value":"\"alert\""},{"value":"\"success\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"string"}},"first":{"defaultValue":null,"description":"First of its type. Used to remove border-top\n@deprecated Har ingen effekt på komponenten","name":"first","parent":{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"},"declarations":[{"fileName":"src/components/ServiceMessage/ServiceMessage.tsx","name":"ServiceMessageProps"}],"required":false,"type":{"name":"boolean"}}}}

package/components/ServiceMessage/index.js

@@ -1,2 +1,2 @@
-import e,{useState as V,useRef as f}from"react";import o from"classnames";import{useBreakpoint as Y}from"../../hooks/useBreakpoint.js";import{useHover as _}from"../../hooks/useHover.js";import{useUuid as Z}from"../../hooks/useUuid.js";import{getColor as w}from"../../theme/currys/color.js";import{breakpoints as ee}from"../../theme/grid.js";import{palette as t}from"../../theme/palette.js";import{getAriaLabelAttributes as se}from"../../utils/accessibility.js";import{Icon as a}from"../Icons/Icon.js";import{IconSize as v}from"../../constants.js";import re from"../Icons/CheckFill.js";import oe from"../Icons/ChevronDown.js";import te from"../Icons/ChevronUp.js";import ae from"../Icons/ErrorSignFill.js";import ne from"../Icons/Forward.js";import ce from"../Icons/InfoSignFill.js";import me 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 le=({label:E,dismissable:C=!0,onDismiss:N,info:g,extraInfo:d,urlTitle:h,url:k,target:z="_self",closeBtnText:b="fjern melding",first:I=!1,expanderOpenFromStart:y=!1,variant:r="alert",testId:x})=>{const n=!!g||!!d,F=n?"button":"span",c=Y()<ee.lg?v.XSmall:v.Small,R=Z(),M=r==="alert"?"alert":"region",X=se({label:E,id:R}),[m,$]=V(y),A={info:e.createElement(a,{svgIcon:ce,color:t.blueberry700,hoverColor:t.blueberry700,size:c}),warn:e.createElement(a,{svgIcon:ae,color:t.banana700,hoverColor:t.banana700,size:c}),alert:e.createElement(a,{svgIcon:me,color:t.cherry700,hoverColor:t.cherry700,size:c}),success:e.createElement(a,{svgIcon:re,color:t.kiwi900,hoverColor:t.kiwi900,size:c})},B=o(s["service-message__top-row--container"],s["service-message__wrapper--inner"]),T=o(s["service-message__bottom-row__button"],s["service-message__bottom-row__close-button--top"]),j=()=>{const l=_(),{isHovered:u,hoverRef:i}=l,p=f(null),{isHovered:Q}=_(p);return e.createElement("span",{className:B,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?te:oe,isHovered:u})),!n&&C&&e.createElement("button",{ref:p,className:T,"aria-label":b,onClick:N},e.createElement(a,{size:c,svgIcon:S,color:w("blueberry",700),isHovered:Q})))},L=()=>{n&&$(!m)},U=o(s["service-message__bottom-row__button"]),H=!!k&&!!h,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=f(null),{isHovered:u}=_(l),i=f(null),{isHovered:p}=_(i);return e.createElement("div",{className:W},H&&e.createElement("a",{className:U,href:k,ref:l,target:z},h,e.createElement(a,{size:v.XSmall,svgIcon:ne,color:w("blueberry",700),isHovered:u})),C&&e.createElement("button",{ref:i,className:O,"aria-label":b,onClick:N},b,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),!!d&&e.createElement("span",{className:s["service-message__content__info--smaller"]},d),e.createElement(q,null)),G=o({[s[`service-message__outer-wrapper--${r}`]]:r}),J=o({[s[`service-message__wrapper--${r}`]]:r,[s[`service-message__wrapper--${r}--expanded`]]:m&&r}),K=o(s["service-message__wrapper--inner"],s["service-message__content__wrapper"]),P=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},e.createElement("div",{className:J,role:M,...X},e.createElement(F,{className:P,onClick:L,"aria-expanded":n&&m,"data-testid":x},e.createElement(j,null)),n&&m&&e.createElement("div",{className:s["service-message__content--spacing"]},e.createElement("div",{className:K},e.createElement(D,null)))))},Ae=le;export{Ae as default};
+import e,{useState as R}from"react";import u from"classnames";import{useBreakpoint as w}from"../../hooks/useBreakpoint.js";import{useHover as h}from"../../hooks/useHover.js";import{useUuid as y}from"../../hooks/useUuid.js";import{getColor as I}from"../../theme/currys/color.js";import{breakpoints as M}from"../../theme/grid.js";import{palette as c}from"../../theme/palette.js";import{getAriaLabelAttributes as X}from"../../utils/accessibility.js";import{C as F}from"../../Close.js";import{Icon as n}from"../Icons/Icon.js";import{IconSize as N}from"../../constants.js";import L from"../Icons/CheckFill.js";import A from"../Icons/ChevronDown.js";import U from"../Icons/ChevronUp.js";import $ from"../Icons/ErrorSignFill.js";import j from"../Icons/Forward.js";import B from"../Icons/InfoSignFill.js";import q from"../Icons/TriangleX.js";import D from"../Icons/X.js";import r from"./styles.module.scss";import"../../hooks/usePseudoClasses.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../../utils/refs.js";import"../Close/styles.module.scss";const G=({label:m,variant:t,id:i,hasExpander:s,isExpanded:l,dismissable:_,onExpand:v,onDismiss:p,closeBtnText:g})=>{const f=w(),{isHovered:a,hoverRef:d}=h(),o=f<M.lg?N.XSmall:N.Small,C={info:e.createElement(n,{svgIcon:B,color:c.blueberry700,hoverColor:c.blueberry700,size:o,isHovered:a}),warn:e.createElement(n,{svgIcon:$,color:c.banana700,hoverColor:c.banana700,size:o,isHovered:a}),alert:e.createElement(n,{svgIcon:q,color:c.cherry700,hoverColor:c.cherry700,size:o,isHovered:a}),success:e.createElement(n,{svgIcon:L,color:c.kiwi900,hoverColor:c.kiwi900,size:o,isHovered:a})},b=s?"button":"span",E=u(r["service-message__label-container"],r[`service-message__label-container--${t}`],s&&r["service-message__label-container--has-expander"]);return e.createElement("div",{className:E,ref:d},e.createElement("div",{className:r["service-message__container"]},e.createElement("div",{className:r["service-message__row"]},e.createElement("div",{className:r["service-message__col"]},e.createElement("div",{className:r["service-message__label"]},C[t],e.createElement("h1",{className:r["service-message__title"],id:i},e.createElement(b,{className:r["service-message__toggle"],onClick:s?v:void 0,"aria-expanded":s?l:void 0},m)),s&&e.createElement(n,{size:o,svgIcon:l?U:A,isHovered:a}),!s&&_&&e.createElement(F,{onClick:p,ariaLabel:g,className:r["service-message__close"]}))))))},J=({info:m,extraInfo:t,urlTitle:i,url:s,target:l,dismissable:_,closeBtnText:v,onDismiss:p})=>{const{hoverRef:g,isHovered:f}=h(),{hoverRef:a,isHovered:d}=h(),o=s&&i;return e.createElement("div",{className:r["service-message__container"]},e.createElement("div",{className:r["service-message__row"]},e.createElement("div",{className:r["service-message__col"]},e.createElement("div",{className:r["service-message__content"]},m&&e.createElement("p",{className:r["service-message__info"]},m),t&&e.createElement("p",{className:u(r["service-message__info"],r["service-message__info--extra"])},t),e.createElement("div",{className:r["service-message__actions"]},o&&e.createElement("a",{className:r["service-message__action"],href:s,ref:g,target:l},i,e.createElement(n,{size:N.XSmall,svgIcon:j,color:I("blueberry",700),isHovered:f})),_&&e.createElement("button",{ref:a,className:u(r["service-message__action"],r["service-message__action--close"]),"aria-label":v,onClick:p},v,e.createElement(n,{size:N.XSmall,svgIcon:D,color:I("blueberry",700),isHovered:d})))))))},K=({label:m,dismissable:t=!0,onDismiss:i,info:s,extraInfo:l,urlTitle:_,url:v,target:p="_self",closeBtnText:g="fjern melding",expanderOpenFromStart:f=!1,variant:a="alert",testId:d})=>{const[o,C]=R(f),b=y(),E=!!s||!!l,S=a==="alert"?"alert":"region",k=X({label:m,id:b}),z=()=>{E&&C(!o)},H=u(r["service-message"],r[`service-message--${a}`],o&&r["service-message--expanded"]);return e.createElement("div",{className:H,role:S,...k,"data-testid":d},e.createElement(G,{label:m,variant:a,id:b,hasExpander:E,isExpanded:o,dismissable:t,onExpand:z,onDismiss:i,closeBtnText:g}),E&&o&&e.createElement(J,{info:s,extraInfo:l,urlTitle:_,url:v,target:p,dismissable:t,onDismiss:i,closeBtnText:g}))},ue=K;export{ue 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(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 outerBackgroundClass = classNames({\n    [styles[`service-message__outer-wrapper--${variant}`]]: variant,\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={outerBackgroundClass}>\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    </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","outerBackgroundClass","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 Close from '../Close';\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\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const variantToIconMap = {\n    info: (\n      <Icon svgIcon={InfoSignFill} color={palette.blueberry700} hoverColor={palette.blueberry700} size={iconSize} isHovered={isHovered} />\n    ),\n    warn: <Icon svgIcon={ErrorSignFill} color={palette.banana700} hoverColor={palette.banana700} size={iconSize} isHovered={isHovered} />,\n    alert: <Icon svgIcon={TriangleX} color={palette.cherry700} hoverColor={palette.cherry700} size={iconSize} isHovered={isHovered} />,\n    success: <Icon svgIcon={CheckFill} color={palette.kiwi900} hoverColor={palette.kiwi900} size={iconSize} isHovered={isHovered} />,\n  };\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    styles[`service-message__label-container--${variant}`],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={hoverRef}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              {variantToIconMap[variant]}\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover<HTMLAnchorElement>();\n  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} 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\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, 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  /**\n   * First of its type. Used to remove border-top\n   * @deprecated Har ingen effekt på komponenten\n   */\n  first?: boolean;\n}\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  expanderOpenFromStart = false,\n  variant = 'alert',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useUuid();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'alert' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(\n    styles['service-message'],\n    styles[`service-message--${variant}`],\n    isExpanded && styles[`service-message--expanded`]\n  );\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["Label","label","variant","id","hasExpander","isExpanded","dismissable","onExpand","onDismiss","closeBtnText","breakpoint","useBreakpoint","isHovered","hoverRef","useHover","iconSize","breakpoints","IconSize","variantToIconMap","React","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill","CustomTag","labelContainerClasses","classNames","styles","ChevronUp","ChevronDown","Close","Content","info","extraInfo","urlTitle","url","target","readMoreRef","readMoreHoverRefIsHovered","closeButtonRef","closeButtonIsHovered","hasUrl","Forward","getColor","X","ServiceMessage","expanderOpenFromStart","testId","setIsExpanded","useState","labelId","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","handleClick","classes","ServiceMessage$1"],"mappings":"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"}