@helsenorge/designsystem-react 4.3.0 → 4.3.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [4.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.4&targetVersion=GTv4.3.0) (2023-08-23)
+
+### Features
+
+- trigger-komponent ([5c0ded6](https://github.com/helsenorge/designsystem/commit/5c0ded6f8d71bddb780160d2f3124fd89686730e))
+- trigger/hjelpetrigger/infotrigger ([7c66b8b](https://github.com/helsenorge/designsystem/commit/7c66b8b03569cc596e1263b9d1da048654d45d50)),
+  closes [#301136](https://github.com/helsenorge/designsystem/issues/301136)
+
+### Bug Fixes
+
+- lagt til focusable feature i panel
+  ([050d90f](https://github.com/helsenorge/designsystem/commit/050d90f0796718b58dd0e3965721c0df38a684c5)), closes
+  [#305821](https://github.com/helsenorge/designsystem/issues/305821)
+
 ## [4.2.4](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.3&targetVersion=GTv4.2.4) (2023-08-03)
 
 ### Bug Fixes
@@ -797,12 +811,12 @@
 
 ### Bug Fixes
 
-- panel har avstand fra tittel til badge
-  ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
-  [#282359](https://github.com/helsenorge/designsystem/issues/282359)
 - økt kontrast på understreking av lenker
   ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
   [#229049](https://github.com/helsenorge/designsystem/issues/229049)
+- panel har avstand fra tittel til badge
+  ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
+  [#282359](https://github.com/helsenorge/designsystem/issues/282359)
 
 ## [1.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/Panel.js

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

package/Panel.js.map

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

package/components/Checkbox/styles.module.scss

@@ -208,6 +208,13 @@ $checkbox-icon-size: 1.625rem;
     min-width: $checkbox-icon-size;
     box-shadow: 0 0 0 getSpacer(4xs);
 
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: #000 !important;
+      color: #fff !important;
+    }
+
     :hover > & {
       box-shadow: 0 0 0 getSpacer(3xs);
     }
@@ -325,6 +332,12 @@ $checkbox-icon-size: 1.625rem;
     position: relative;
     top: 0.1rem;
     right: 0.05rem;
+
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      fill: #fff;
+    }
   }
 
   &:focus {

package/components/Panel/Panel.d.ts

@@ -25,7 +25,7 @@ export interface PanelProps {
     children?: React.ReactNode;
     /** Title of the panel */
     title?: string;
-    /** Changes the underlying element of the title. Default: h2*/
+    /** Changes the underlying element of the title. Default: h2 */
     titleHtmlMarkup?: TitleTags;
     /** Adds custom classes to the element. */
     className?: string;
@@ -83,7 +83,7 @@ export interface PanelProps {
     /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */
     renderChildrenWhenClosed?: boolean;
     /** Whether panel is focusable or not */
-    focusable: boolean;
+    focusable?: boolean;
 }
 declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLHeadingElement>>;
 export default Panel;

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"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"}

package/components/Panel/componentdata.json

@@ -1 +1 @@
-{"props":{"title":{"defaultValue":null,"description":"Title of the panel","name":"title","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"titleHtmlMarkup":{"defaultValue":null,"description":"Changes the underlying element of the title. Default: h2","name":"titleHtmlMarkup","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"TitleTags","value":[{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"span\""}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"status":{"defaultValue":null,"description":"Displays a status on the left side: defualt normal","name":"status","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"new\" | \"error\" | \"draft\"","value":[{"value":"\"normal\""},{"value":"\"new\""},{"value":"\"error\""},{"value":"\"draft\""}]}},"statusMessage":{"defaultValue":null,"description":"Displayed on top of the panel with a status icon","name":"statusMessage","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Changes the visual representation of the panel.","name":"variant","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"\"fill\" | \"white\" | \"stroke\" | \"line\"","value":[{"value":"\"fill\""},{"value":"\"white\""},{"value":"\"stroke\""},{"value":"\"line\""}]}},"url":{"defaultValue":null,"description":"Url to details, renders as a button with anchor tag","name":"url","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"target":{"defaultValue":null,"description":"target used in the button: default is _self","name":"target","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"AnchorTarget","value":[{"value":"\"_self\""},{"value":"\"_blank\""},{"value":"\"_parent\""},{"value":"\"_top\""}]}},"icon":{"defaultValue":null,"description":"Icon displayed in title","name":"icon","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"iconRight":{"defaultValue":null,"description":"Display icon on right","name":"iconRight","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"contentA":{"defaultValue":null,"description":"Panel section A content","name":"contentA","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"contentB":{"defaultValue":null,"description":"Panel section B content","name":"contentB","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"prioritiseMetaDataInContentB":{"defaultValue":null,"description":"A version of panel that prioritises content-B visually and audibly","name":"prioritiseMetaDataInContentB","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"buttonText":{"defaultValue":null,"description":"Panel button text","name":"buttonText","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"buttonTextClose":{"defaultValue":null,"description":"Panel button close text","name":"buttonTextClose","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"buttonHtmlMarkup":{"defaultValue":null,"description":"HTML markup for panel button. Default: a","name":"buttonHtmlMarkup","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"ButtonTags","value":[{"value":"\"button\""},{"value":"\"a\""}]}},"buttonOnClick":{"defaultValue":null,"description":"Callback when panel button is clicked","name":"buttonOnClick","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"((e?: MouseEvent<HTMLElement, MouseEvent> | FormEvent<{}> | KeyboardEvent<HTMLUListElement> | null) => void)"}},"buttonAriaLabelledById":{"defaultValue":null,"description":"Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set).","name":"buttonAriaLabelledById","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"buttonAriaLabel":{"defaultValue":null,"description":"Panel button aria label","name":"buttonAriaLabel","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"showCloseButtonInExpand":{"defaultValue":null,"description":"@deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0","name":"showCloseButtonInExpand","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"layout":{"defaultValue":null,"description":"Layout (see description)","name":"layout","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"\"layout1\" | \"layout2\" | \"layout3a\" | \"layout3b\" | \"layout3c\"","value":[{"value":"\"layout1\""},{"value":"\"layout2\""},{"value":"\"layout3a\""},{"value":"\"layout3b\""},{"value":"\"layout3c\""}]}},"containerAsButton":{"defaultValue":null,"description":"Clicking anywhere on the container will trigger a click on the panel's button","name":"containerAsButton","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"time":{"defaultValue":null,"description":"Displays time with icon","name":"time","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"date":{"defaultValue":null,"description":"Displays date with icon","name":"date","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"noTopBorder":{"defaultValue":null,"description":"Removes top border when variant is \"line\"","name":"noTopBorder","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"expanded":{"defaultValue":null,"description":"Opens or closes the panel","name":"expanded","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"onExpand":{"defaultValue":null,"description":"Called when panel is open/closed.","name":"onExpand","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"((isExpanded: boolean) => void)"}},"renderChildrenWhenClosed":{"defaultValue":null,"description":"Whether to render children when closed (in which case they are hidden with CSS). Default: false","name":"renderChildrenWhenClosed","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"focusable":{"defaultValue":null,"description":"Whether panel is focusable or not","name":"focusable","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":true,"type":{"name":"boolean"}}}}
+{"props":{"title":{"defaultValue":null,"description":"Title of the panel","name":"title","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"titleHtmlMarkup":{"defaultValue":null,"description":"Changes the underlying element of the title. Default: h2","name":"titleHtmlMarkup","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"TitleTags","value":[{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"span\""}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"status":{"defaultValue":null,"description":"Displays a status on the left side: defualt normal","name":"status","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"new\" | \"error\" | \"draft\"","value":[{"value":"\"normal\""},{"value":"\"new\""},{"value":"\"error\""},{"value":"\"draft\""}]}},"statusMessage":{"defaultValue":null,"description":"Displayed on top of the panel with a status icon","name":"statusMessage","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Changes the visual representation of the panel.","name":"variant","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"\"fill\" | \"white\" | \"stroke\" | \"line\"","value":[{"value":"\"fill\""},{"value":"\"white\""},{"value":"\"stroke\""},{"value":"\"line\""}]}},"url":{"defaultValue":null,"description":"Url to details, renders as a button with anchor tag","name":"url","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"target":{"defaultValue":null,"description":"target used in the button: default is _self","name":"target","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"AnchorTarget","value":[{"value":"\"_self\""},{"value":"\"_blank\""},{"value":"\"_parent\""},{"value":"\"_top\""}]}},"icon":{"defaultValue":null,"description":"Icon displayed in title","name":"icon","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"iconRight":{"defaultValue":null,"description":"Display icon on right","name":"iconRight","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"contentA":{"defaultValue":null,"description":"Panel section A content","name":"contentA","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"contentB":{"defaultValue":null,"description":"Panel section B content","name":"contentB","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"prioritiseMetaDataInContentB":{"defaultValue":null,"description":"A version of panel that prioritises content-B visually and audibly","name":"prioritiseMetaDataInContentB","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"buttonText":{"defaultValue":null,"description":"Panel button text","name":"buttonText","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"buttonTextClose":{"defaultValue":null,"description":"Panel button close text","name":"buttonTextClose","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"buttonHtmlMarkup":{"defaultValue":null,"description":"HTML markup for panel button. Default: a","name":"buttonHtmlMarkup","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"ButtonTags","value":[{"value":"\"button\""},{"value":"\"a\""}]}},"buttonOnClick":{"defaultValue":null,"description":"Callback when panel button is clicked","name":"buttonOnClick","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"((e?: MouseEvent<HTMLElement, MouseEvent> | FormEvent<{}> | KeyboardEvent<HTMLUListElement> | null) => void)"}},"buttonAriaLabelledById":{"defaultValue":null,"description":"Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set).","name":"buttonAriaLabelledById","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"buttonAriaLabel":{"defaultValue":null,"description":"Panel button aria label","name":"buttonAriaLabel","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"showCloseButtonInExpand":{"defaultValue":null,"description":"@deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0","name":"showCloseButtonInExpand","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"layout":{"defaultValue":null,"description":"Layout (see description)","name":"layout","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"\"layout1\" | \"layout2\" | \"layout3a\" | \"layout3b\" | \"layout3c\"","value":[{"value":"\"layout1\""},{"value":"\"layout2\""},{"value":"\"layout3a\""},{"value":"\"layout3b\""},{"value":"\"layout3c\""}]}},"containerAsButton":{"defaultValue":null,"description":"Clicking anywhere on the container will trigger a click on the panel's button","name":"containerAsButton","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"time":{"defaultValue":null,"description":"Displays time with icon","name":"time","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"date":{"defaultValue":null,"description":"Displays date with icon","name":"date","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"noTopBorder":{"defaultValue":null,"description":"Removes top border when variant is \"line\"","name":"noTopBorder","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"expanded":{"defaultValue":null,"description":"Opens or closes the panel","name":"expanded","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"onExpand":{"defaultValue":null,"description":"Called when panel is open/closed.","name":"onExpand","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"((isExpanded: boolean) => void)"}},"renderChildrenWhenClosed":{"defaultValue":null,"description":"Whether to render children when closed (in which case they are hidden with CSS). Default: false","name":"renderChildrenWhenClosed","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"focusable":{"defaultValue":null,"description":"Whether panel is focusable or not","name":"focusable","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}}}}

package/components/Panel/styles.module.scss

@@ -6,6 +6,7 @@
 
 .panel-wrapper {
   width: 100%;
+  outline: none;
 }
 
 @mixin panel-padding {

package/components/RadioButton/styles.module.scss

@@ -324,6 +324,12 @@
     width: 0.875rem;
     height: 0.875rem;
     border-radius: 10rem;
+
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: #fff !important;
+    }
   }
 
   &--on-dark:checked::before {
@@ -405,6 +411,13 @@
       }
     }
   }
+
+  // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    color: #fff !important;
+    background-color: transparent !important;
+  }
 }
 
 .radiobutton-sublabel-wrapper {

package/package.json

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