@helsenorge/designsystem-react 4.3.0 → 5.0.0-beta.0

package/CHANGELOG.md

@@ -1,11 +1,3 @@
-## [4.2.4](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.3&targetVersion=GTv4.2.4) (2023-08-03)
-
-### Bug Fixes
-
-- table med block-visning inne i table med block-visning har synlige kolonneoverskrifter
-  ([7efd8c2](https://github.com/helsenorge/designsystem/commit/7efd8c2d409ac017d3834e812b6cd4b33e523430)), closes
-  [#301989](https://github.com/helsenorge/designsystem/issues/301989)
-
 ## [4.2.3](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.2&targetVersion=GTv4.2.3) (2023-08-03)
 
 ### Bug Fixes
@@ -797,12 +789,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 re,IconSize as w}from"./constants.js";import{useExpand as se}from"./hooks/useExpand.js";import{useUuid as $}from"./hooks/useUuid.js";import{palette as z}from"./theme/palette.js";import{getAriaLabelAttributes as ie}from"./utils/accessibility.js";import{B as ce}from"./Badge.js";import{B as j}from"./Button.js";import{Icon as _}from"./components/Icons/Icon.js";import pe from"./components/Icons/AlertSignFill.js";import me from"./components/Icons/ArrowRight.js";import de from"./components/Icons/Calendar.js";import ue from"./components/Icons/ChevronDown.js";import _e from"./components/Icons/ChevronUp.js";import ye from"./components/Icons/Pencil.js";import fe from"./components/Icons/Watch.js";import{T as be}from"./Title.js";import e from"./components/Panel/styles.module.scss";var Ee=(a=>(a.normal="normal",a.new="new",a.error="error",a.draft="draft",a))(Ee||{}),ge=(a=>(a.fill="fill",a.white="white",a.stroke="stroke",a.line="line",a))(ge||{}),ve=(a=>(a.layout1="layout1",a.layout2="layout2",a.layout3a="layout3a",a.layout3b="layout3b",a.layout3c="layout3c",a))(ve||{});const he=({status:a,statusMessage:r})=>{const E=()=>a==="error"?{color:z.cherry500,svgIcon:pe}:{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},Ce=({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:de,size:w.XSmall}),t.createElement("span",null,a)),r&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(_,{svgIcon:fe,size:w.XSmall}),t.createElement("span",null,r))):null,Ie=t.forwardRef(function(r,E){const{children:s,contentA:N,contentB:l,prioritiseMetaDataInContentB:d,className:W,testId:X,title:g,titleHtmlMarkup:F="h2",url:y,target:H="_self",icon:i,iconRight:B=!1,variant:c="fill",status:p="normal",statusMessage:v,buttonText:k="Se detaljer",buttonTextClose:U="Skjul detaljer",buttonAriaLabelledById:x,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}=r,[m,K]=se(G,D),C=$(),f=$(),S=v&&p==="new",b=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(n),Q=o(e["panel-wrapper"],W),Y=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||y||D||u||h}),Z=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}),P=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}),V=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}),ee=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}),te=o(e["panel__details-btn"]),ae=o(e["panel-content-a__title"],{[e["panel-content-a__title--badge"]]:S}),ne=()=>{const I=ie({label:L,id:x&&`${f} ${x}`||g&&C&&`${f} ${C}`,prefer:"label"}),R={onClick:u||(()=>K(!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:f},m?U:k),t.createElement(_,{svgIcon:m?_e:ue})):t.createElement(j,{testId:"url",htmlMarkup:q,href:y,target:H,...R},t.createElement("span",{id:f},k),t.createElement(_,{svgIcon:me}))},le=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}),oe=()=>{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:V},l&&t.createElement("div",{className:ee},l),(s||y||A||M||u)&&t.createElement("div",{className:le},t.createElement(Ce,{date:A,time:M}),(s||y||u)&&t.createElement("div",{className:te},ne())));return t.createElement("div",{ref:E,"data-testid":X,className:Q,"data-analyticsid":re.Panel},t.createElement("div",{className:Y},i&&!B&&t.createElement("div",{className:e.panel__icon},i),t.createElement("div",{className:Z},d&&T,t.createElement("div",{className:P},t.createElement(he,{status:p,statusMessage:v}),g&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(be,{appearance:"title3",htmlMarkup:F,id:C,className:ae},g),S&&t.createElement("div",{className:e.panel__badge},t.createElement(ce,{color:"blueberry",testId:"badge-status"},v))),N),!d&&T),i&&B&&t.createElement("div",{className:e["panel__icon--right"]},i)),oe())}),Le=Ie;export{Le as P,Ee as a,ge as b,ve 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":"g1BAuBY,IAAAA,IAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,IAAM,MACNA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAJEA,IAAAA,IAAA,CAAA,CAAA,EAOAC,IAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,KAAO,OAJGA,IAAAA,IAAA,CAAA,CAAA,EAOAC,IAAAA,IACVA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,SAAW,WACXA,EAAA,SAAW,WACXA,EAAA,SAAW,WALDA,IAAAA,IAAA,CAAA,CAAA,EAyEZ,MAAMC,GAAsF,CAAC,CAAE,OAAAC,EAAQ,cAAAC,KAAoB,CACzH,MAAMC,EAAa,IACbF,IAAW,QACN,CAAE,MAAOG,EAAQ,UAAW,QAASC,EAAc,EAGrD,CAAE,MAAOD,EAAQ,MAAO,QAASE,EAAO,EAG3CC,EAAqBC,EAAWC,EAAY,gBAAgB,EAAG,CACnE,CAACA,EAAY,qBAAqB,CAAC,EAAGR,IAAW,KAAA,CAClD,EAED,OAAKA,IAAW,SAAqBA,IAAW,UAAsBC,kBAEjE,MAAI,CAAA,UAAWK,EAAoB,cAAY,gBAAA,kBAC5CG,EAAM,CAAA,GAAGP,IAAc,KAAMQ,EAAS,MAAQ,CAAA,EAAG,IAAEC,EAAA,cAAA,OAAA,KAAMV,CAAc,CAC3E,EAIG,IACT,EAEMW,GAAuD,CAAC,CAAE,KAAAC,EAAM,KAAAC,KAChED,GAAQC,EAERH,EAAA,cAAC,OAAI,UAAWH,EAAY,oBAAoB,EAAG,cAAY,YAC5DK,GACCF,EAAA,cAAC,OAAI,UAAWH,EAAY,0BAA0B,CACpD,EAAAG,EAAA,cAACF,GAAK,QAASM,GAAU,KAAML,EAAS,MAAQ,CAAA,kBAC/C,OAAM,KAAAG,CAAK,CACd,EAEDC,mBACE,MAAI,CAAA,UAAWN,EAAY,0BAA0B,CACpD,EAAAG,EAAA,cAACF,GAAK,QAASO,GAAO,KAAMN,EAAS,MAAQ,CAAA,EAC5CC,EAAA,cAAA,OAAA,KAAMG,CAAK,CACd,CAEJ,EAIG,KAGHG,GAAQN,EAAM,WAAW,SAA2BO,EAAmBC,EAA6C,CAClH,KAAA,CACJ,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,6BAAAC,EACA,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,gBAAAC,EAAkB,KAClB,IAAAC,EACA,OAAAC,EAAS,QACT,KAAAC,EACA,UAAAC,EAAY,GACZ,QAAAC,EAAU,OACV,OAAAhC,EAAS,SACT,cAAAC,EACA,WAAAgC,EAAa,cACb,gBAAAC,EAAkB,iBAClB,uBAAAC,EACA,gBAAAC,EACA,OAAAC,EAAS,UACT,kBAAAC,EAAoB,GACpB,KAAAzB,EACA,KAAAC,EACA,YAAAyB,EACA,cAAAC,EACA,iBAAAC,EAAmB,IACnB,SAAAC,EAAW,GACX,SAAAC,EACA,yBAAAC,EAA2B,GAC3B,UAAAC,EAAY,EACV,EAAA3B,EAEE,CAAC4B,EAAYC,CAAa,EAAIC,GAAUN,EAAUC,CAAQ,EAC1DM,EAAUC,IACVC,EAAeD,IACfE,EAAWnD,GAAiBD,IAAW,MACvCqD,EAAU,CAAC,WAAqB,SAAA,EAAY,WAAqB,WAAY,WAAqB,SAAU,CAAA,EAAE,SAAShB,CAAM,EAE7HiB,EAAoB/C,EAAWC,EAAY,eAAe,EAAGgB,CAAS,EAEtE+B,EAAehD,EAAWC,EAAY,MAAO,CACjD,CAACA,EAAY,aAAa,CAAC,EAAGwB,IAAY,OAC1C,CAACxB,EAAY,eAAe,CAAC,EAAGwB,IAAY,SAC5C,CAACxB,EAAY,cAAc,CAAC,EAAGwB,IAAY,QAC3C,CAACxB,EAAY,aAAa,CAAC,EAAGwB,IAAY,OAC1C,CAACxB,EAAY,sBAAsB,CAAC,EAAGwB,IAAY,QAAqBO,EACxE,CAAC/B,EAAY,iBAAiB,CAAC,EAAGsC,EAClC,CAACtC,EAAY,YAAY,CAAC,EAAGR,IAAW,MACxC,CAACQ,EAAY,cAAc,CAAC,EAAGR,IAAW,QAC1C,CAACQ,EAAY,cAAc,CAAC,EAAGR,IAAW,QAC1C,CAACQ,EAAY,eAAe,CAAC,EAAGR,GAAUA,IAAW,SACrD,CAACQ,EAAY,kBAAkB,CAAC,EAAGsB,EACnC,CAACtB,EAAY,eAAe,CAAC,EAAG8B,EAChC,CAAC9B,EAAY,kBAAkB,CAAC,EAAGY,GAAYQ,GAAOe,GAAYH,GAAiBF,CAAA,CACpF,EAEKkB,EAAiBjD,EAAW,CAChC,CAACC,EAAY,gBAAmB,EAAG6B,IAAW,WAAuBf,EACrE,CAACd,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WAAuBf,EAC9E,CAACd,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WAAuBf,EAC9E,CAACd,EAAY,2BAA2B,CAAC,EAAG6C,GAAW/B,EACvD,CAACd,EAAY,wBAAwB,CAAC,EAAGsB,EACzC,CAACtB,EAAY,gDAAgD,CAAC,EAAGe,CAAA,CAClE,EAEKkC,EAAwBlD,EAAW,CACvC,CAACC,EAAY,iBAAiB,CAAC,EAAG6B,IAAW,UAC7C,CAAC7B,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WACvD,CAAC7B,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WACvD,CAAC7B,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WACvD,CAAC7B,EAAY,mDAAmD,CAAC,EAAG,CAACe,CAAA,CACtE,EAEKmC,GAAyBnD,EAAW,CACxC,CAACC,EAAY,+BAA+B,CAAC,EAAGc,GAAYe,IAAW,UACvE,CAAC7B,EAAY,+BAA+B,CAAC,EAAGc,GAAYe,IAAW,UACvE,CAAC7B,EAAY,+BAA+B,CAAC,EAAGc,GAAY+B,EAC5D,CAAC7C,EAAY,gCAAgC,CAAC,EAAGc,GAAYe,IAAW,WACxE,CAAC7B,EAAY,gCAAgC,CAAC,EAAGc,GAAYe,IAAW,WACxE,CAAC7B,EAAY,gCAAgC,CAAC,EAAGc,GAAYe,IAAW,WACxE,CAAC7B,EAAY,oDAAoD,CAAC,EAAGe,CAAA,CACtE,EAEKoC,GAAqBpD,EAAWC,EAAY,iBAAiB,EAAG,CACpE,CAACA,EAAY,0BAA0B,CAAC,EAAG6B,IAAW,UACtD,CAAC7B,EAAY,0BAA0B,CAAC,EAAG6B,IAAW,UACtD,CAAC7B,EAAY,0BAA0B,CAAC,EAAG6C,EAC3C,CAAC7C,EAAY,+CAA+C,CAAC,EAAGe,CAAA,CACjE,EAEKqC,GAAsBrD,EAAWC,EAAY,oBAAoB,CAAC,EAClEqD,GAAetD,EAAWC,EAAY,wBAAwB,EAAG,CAAE,CAACA,EAAY,+BAA+B,CAAC,EAAG4C,CAAA,CAAU,EAE7HU,GAAsB,IAAmB,CAC7C,MAAMC,EAAsBC,GAAuB,CACjD,MAAO5B,EACP,GAAKD,GAA0B,GAAGgB,KAAgBhB,KAA8BT,GAASuB,GAAW,GAAGE,KAAgBF,IACvH,OAAQ,OAAA,CACT,EAEKgB,EAA0D,CAC9D,QAASzB,IAAgC,IAAYO,EAAc,CAACD,CAAU,GAC9E,UAAWR,EAAoB9B,EAAY,cAAmB,OAC9D,QAAS,aACT,SAAU,GACV,GAAGuD,CAAA,EAGL,OAAI3C,EAEAT,EAAA,cAACuD,GAAO,OAAO,SAAS,gBAAepB,EAAa,GAAGmB,CACrD,EAAAtD,EAAA,cAAC,OAAK,CAAA,GAAIwC,GAAeL,EAAaZ,EAAkBD,CAAW,EACnEtB,EAAA,cAACF,GAAK,QAASqC,EAAaqB,GAAYC,EAAA,CAAa,CACvD,EAKFzD,EAAA,cAACuD,GAAO,OAAO,MAAM,WAAYzB,EAAkB,KAAMb,EAAK,OAAAC,EAAiB,GAAGoC,GAC/EtD,EAAA,cAAA,OAAA,CAAK,GAAIwC,CAAe,EAAAlB,CAAW,EACnCtB,EAAA,cAAAF,EAAA,CAAK,QAAS4D,EAAA,CAAY,CAC7B,CAAA,EAIEC,GAAoB/D,EAAWC,EAAY,sBAAsB,EAAG,CACxE,CAACA,EAAY,+BAA+B,CAAC,EAAG6C,EAChD,CAAC7C,EAAY,oCAAoC,CAAC,EAAG,CAACc,EACtD,CAACd,EAAY,mCAAmC,CAAC,EAAGa,GAAYC,CAAA,CACjE,EAEKiD,GAAgB,IAA0B,CAI1C,GAHA,CAACnD,GAGD,CAACwB,GAA4B,CAACE,EACzB,OAAA,KAGT,MAAM0B,EAAsBjE,EAAWC,EAAY,eAAe,EAAG,CACnE,CAACA,EAAY,qBAAqB,CAAC,EAAGsC,EACtC,CAACtC,EAAY,qBAAqB,CAAC,EAAGwB,IAAY,OAClD,CAACxB,EAAY,sBAAsB,CAAC,EAAGwB,IAAY,QACnD,CAACxB,EAAY,0BAA0B,CAAC,EAAGsB,CAAA,CAC5C,EAGC,OAAAnB,EAAA,cAAC,OAAI,UAAW6D,EAAqB,cAAY,eAC/C,EAAA7D,EAAA,cAAC,MAAK,KAAAS,CAAS,CACjB,CAAA,EAIEqD,EACH9D,EAAA,cAAA,MAAA,CAAI,UAAW+C,IACbpC,GAAaX,EAAA,cAAA,MAAA,CAAI,UAAWgD,EAAA,EAAqBrC,CAAS,GACzDF,GAAYQ,GAAOf,GAAQC,GAAQ0B,IACnC7B,EAAA,cAAC,MAAI,CAAA,UAAW2D,IACZ3D,EAAA,cAAAC,GAAA,CAAS,KAAAC,EAAY,KAAAC,CAAY,CAAA,GACjCM,GAAYQ,GAAOY,IAAkB7B,EAAA,cAAC,OAAI,UAAWiD,IAAsBE,IAAsB,CACrG,CAEJ,EAIA,OAAAnD,EAAA,cAAC,MAAA,CAEC,SAA0B,GAC1B,IAAAQ,EACA,cAAaM,EACb,UAAW6B,EACX,mBAAkBoB,GAAY,KAAA,kBAE7B,MAAI,CAAA,UAAWnB,CACb,EAAAzB,GAAQ,CAACC,GAAapB,EAAA,cAAC,MAAI,CAAA,UAAWH,EAAY,WAAc,EAAAsB,CAAK,EACtEnB,EAAA,cAAC,OAAI,UAAW6C,CAAA,EACbjC,GAAgCkD,kBAChC,MAAI,CAAA,UAAWhB,GACd9C,EAAA,cAACZ,IAAW,OAAAC,EAAgB,cAAAC,EAA8B,EACzDyB,mBACE,MAAI,CAAA,UAAWlB,EAAY,kCAAkC,mBAC3DmE,GAAM,CAAA,WAAW,SAAS,WAAYhD,EAAiB,GAAIsB,EAAS,UAAWY,EAAA,EAC7EnC,CACH,EACC0B,GACEzC,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAY,YAAA,kBACzBoE,GAAM,CAAA,MAAM,YAAY,OAAO,gBAC7B3E,CACH,CACF,CAEJ,EAEDoB,CACH,EACC,CAACE,GAAgCkD,CACpC,EACC3C,GAAQC,mBAAc,MAAI,CAAA,UAAWvB,EAAY,oBAAoB,GAAIsB,CAAK,CACjF,EACCyC,GAAc,CAAA,CAGrB,CAAC,EAEDM,GAAe5D"}
+{"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}\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  } = 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  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          {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","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/README.md

@@ -1,19 +1,61 @@
-# Helsenorge Designsystem - Frankenstein
+# `designsystem-react`
+
+<h1>OUTDATED -> should refer to confluence for now</h1>
 
 <a href="https://www.npmjs.com/package/@helsenorge/designsystem-react/v/latest">
     <img src="https://img.shields.io/npm/v/@helsenorge/designsystem-react/latest" />
 </a>
+<a href="https://www.npmjs.com/package/@helsenorge/designsystem-react/v/next">
+    <img src="https://img.shields.io/npm/v/@helsenorge/designsystem-react/next" />
+</a>
+
+## 👋 Introduction
+
+**TODO: Add introduction text**
+
+## 🚀 Quick start
+
+To install and use our React components simply run the following commands in your favorite terminal:
+
+### yarn
+
+```bash
+yarn add @helsenorge/designsystem-react
+```
+
+### npm
+
+```npm
+npm install @helsenorge/designsystem-react
+```
 
-Helsenorge Designsystem, also known as Frankenstein, is a collection of React components that are used on https://www.helsenorge.no/ today.
+### Usage example
 
-The repository also contains a set of hooks and utility functions. We also offer stylesheets for our breakpoints, spacers, typography and
-color palette.
+This is example takes basis in the file `App.tsx/js` from the out-of-the-box project using CRA.
 
-## Questions
+```typescript
+import React from 'react';
+import logo from './logo.svg';
+import './App.css';
 
-Questions about the code or project can be askes at [ROX Slack channel](https://norskhelsenett.slack.com/archives/CS70UT0R0) or as issues on
-GitHub.
+import { CommonButton } from '@helsenorge/designsystem-react';
 
-## Documentation
+const App: React.FC = () => {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
+          Learn React
+        </a>
+      </header>
+      <CommonButton>Hello world!</CommonButton>
+    </div>
+  );
+};
 
-To view all the available components in isolation, please view our storybook page here: https://designsystem-storybook.netlify.app
+export default App;
+```

package/components/HighlightBox/HighlightBox.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PaletteNames } from '../../theme/palette';
 import { SvgIcon } from '../Icons';
-export type HighlightBoxColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral' | 'kiwi' | 'plum'>;
+export type HighlightBoxColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;
 export declare enum HighlightBoxSize {
     medium = "medium",
     large = "large",

package/components/HighlightBox/HighlightBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightBox.d.ts","sourceRoot":"","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAa,EAAE,OAAO,EAAY,MAAM,UAAU,CAAC;AAInD,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;AAEvH,oBAAY,gBAAgB;IAC1B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,gBAAgB,GAAG,OAAO,CACpC,MAAM,qBAAqB,EAC3B,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAC1E,CAAC;AAEF,UAAU,iBAAiB;IACzB,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACrC,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuBD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkF7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"HighlightBox.d.ts","sourceRoot":"","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAa,EAAE,OAAO,EAAY,MAAM,UAAU,CAAC;AAInD,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC,CAAC;AAErG,oBAAY,gBAAgB;IAC1B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,gBAAgB,GAAG,OAAO,CACpC,MAAM,qBAAqB,EAC3B,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAC1E,CAAC;AAEF,UAAU,iBAAiB;IACzB,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACrC,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuBD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkF7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/HighlightBox/componentdata.json

@@ -1 +1 @@
-{"props":{"children":{"defaultValue":null,"description":"What's in the box?","name":"children","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"color":{"defaultValue":null,"description":"Changes the background color. Default: white","name":"color","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"HighlightBoxColors","value":[{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"kiwi\""},{"value":"\"neutral\""},{"value":"\"plum\""},{"value":"\"white\""}]}},"size":{"defaultValue":null,"description":"Changes the size. Default: medium","name":"size","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"\"medium\" | \"large\" | \"fluid\"","value":[{"value":"\"medium\""},{"value":"\"large\""},{"value":"\"fluid\""}]}},"svgIcon":{"defaultValue":null,"description":"Adds an icon to the highlightbox.","name":"svgIcon","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"SvgIcon"}},"htmlMarkup":{"defaultValue":null,"description":"Changes the underlying element. Default: div","name":"htmlMarkup","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"HighlightBoxTags","value":[{"value":"\"object\""},{"value":"\"a\""},{"value":"\"abbr\""},{"value":"\"address\""},{"value":"\"area\""},{"value":"\"article\""},{"value":"\"aside\""},{"value":"\"audio\""},{"value":"\"b\""},{"value":"\"base\""},{"value":"\"bdi\""},{"value":"\"bdo\""},{"value":"\"blockquote\""},{"value":"\"body\""},{"value":"\"br\""},{"value":"\"button\""},{"value":"\"canvas\""},{"value":"\"caption\""},{"value":"\"cite\""},{"value":"\"code\""},{"value":"\"col\""},{"value":"\"colgroup\""},{"value":"\"data\""},{"value":"\"datalist\""},{"value":"\"dd\""},{"value":"\"del\""},{"value":"\"details\""},{"value":"\"dfn\""},{"value":"\"dialog\""},{"value":"\"div\""},{"value":"\"dl\""},{"value":"\"dt\""},{"value":"\"em\""},{"value":"\"embed\""},{"value":"\"fieldset\""},{"value":"\"figcaption\""},{"value":"\"figure\""},{"value":"\"footer\""},{"value":"\"form\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""},{"value":"\"head\""},{"value":"\"header\""},{"value":"\"hgroup\""},{"value":"\"hr\""},{"value":"\"html\""},{"value":"\"i\""},{"value":"\"iframe\""},{"value":"\"img\""},{"value":"\"input\""},{"value":"\"ins\""},{"value":"\"kbd\""},{"value":"\"label\""},{"value":"\"legend\""},{"value":"\"li\""},{"value":"\"link\""},{"value":"\"main\""},{"value":"\"map\""},{"value":"\"mark\""},{"value":"\"menu\""},{"value":"\"meta\""},{"value":"\"meter\""},{"value":"\"nav\""},{"value":"\"noscript\""},{"value":"\"ol\""},{"value":"\"optgroup\""},{"value":"\"option\""},{"value":"\"output\""},{"value":"\"p\""},{"value":"\"picture\""},{"value":"\"pre\""},{"value":"\"progress\""},{"value":"\"q\""},{"value":"\"rp\""},{"value":"\"rt\""},{"value":"\"ruby\""},{"value":"\"s\""},{"value":"\"samp\""},{"value":"\"script\""},{"value":"\"section\""},{"value":"\"select\""},{"value":"\"slot\""},{"value":"\"small\""},{"value":"\"source\""},{"value":"\"span\""},{"value":"\"strong\""},{"value":"\"style\""},{"value":"\"sub\""},{"value":"\"summary\""},{"value":"\"sup\""},{"value":"\"table\""},{"value":"\"tbody\""},{"value":"\"td\""},{"value":"\"template\""},{"value":"\"textarea\""},{"value":"\"tfoot\""},{"value":"\"th\""},{"value":"\"thead\""},{"value":"\"time\""},{"value":"\"title\""},{"value":"\"tr\""},{"value":"\"track\""},{"value":"\"u\""},{"value":"\"ul\""},{"value":"\"var\""},{"value":"\"video\""},{"value":"\"wbr\""}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"children":{"defaultValue":null,"description":"What's in the box?","name":"children","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"color":{"defaultValue":null,"description":"Changes the background color. Default: white","name":"color","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"HighlightBoxColors","value":[{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"neutral\""},{"value":"\"white\""}]}},"size":{"defaultValue":null,"description":"Changes the size. Default: medium","name":"size","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"\"medium\" | \"large\" | \"fluid\"","value":[{"value":"\"medium\""},{"value":"\"large\""},{"value":"\"fluid\""}]}},"svgIcon":{"defaultValue":null,"description":"Adds an icon to the highlightbox.","name":"svgIcon","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"SvgIcon"}},"htmlMarkup":{"defaultValue":null,"description":"Changes the underlying element. Default: div","name":"htmlMarkup","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"HighlightBoxTags","value":[{"value":"\"object\""},{"value":"\"a\""},{"value":"\"abbr\""},{"value":"\"address\""},{"value":"\"area\""},{"value":"\"article\""},{"value":"\"aside\""},{"value":"\"audio\""},{"value":"\"b\""},{"value":"\"base\""},{"value":"\"bdi\""},{"value":"\"bdo\""},{"value":"\"blockquote\""},{"value":"\"body\""},{"value":"\"br\""},{"value":"\"button\""},{"value":"\"canvas\""},{"value":"\"caption\""},{"value":"\"cite\""},{"value":"\"code\""},{"value":"\"col\""},{"value":"\"colgroup\""},{"value":"\"data\""},{"value":"\"datalist\""},{"value":"\"dd\""},{"value":"\"del\""},{"value":"\"details\""},{"value":"\"dfn\""},{"value":"\"dialog\""},{"value":"\"div\""},{"value":"\"dl\""},{"value":"\"dt\""},{"value":"\"em\""},{"value":"\"embed\""},{"value":"\"fieldset\""},{"value":"\"figcaption\""},{"value":"\"figure\""},{"value":"\"footer\""},{"value":"\"form\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""},{"value":"\"head\""},{"value":"\"header\""},{"value":"\"hgroup\""},{"value":"\"hr\""},{"value":"\"html\""},{"value":"\"i\""},{"value":"\"iframe\""},{"value":"\"img\""},{"value":"\"input\""},{"value":"\"ins\""},{"value":"\"kbd\""},{"value":"\"label\""},{"value":"\"legend\""},{"value":"\"li\""},{"value":"\"link\""},{"value":"\"main\""},{"value":"\"map\""},{"value":"\"mark\""},{"value":"\"menu\""},{"value":"\"meta\""},{"value":"\"meter\""},{"value":"\"nav\""},{"value":"\"noscript\""},{"value":"\"ol\""},{"value":"\"optgroup\""},{"value":"\"option\""},{"value":"\"output\""},{"value":"\"p\""},{"value":"\"picture\""},{"value":"\"pre\""},{"value":"\"progress\""},{"value":"\"q\""},{"value":"\"rp\""},{"value":"\"rt\""},{"value":"\"ruby\""},{"value":"\"s\""},{"value":"\"samp\""},{"value":"\"script\""},{"value":"\"section\""},{"value":"\"select\""},{"value":"\"slot\""},{"value":"\"small\""},{"value":"\"source\""},{"value":"\"span\""},{"value":"\"strong\""},{"value":"\"style\""},{"value":"\"sub\""},{"value":"\"summary\""},{"value":"\"sup\""},{"value":"\"table\""},{"value":"\"tbody\""},{"value":"\"td\""},{"value":"\"template\""},{"value":"\"textarea\""},{"value":"\"tfoot\""},{"value":"\"th\""},{"value":"\"thead\""},{"value":"\"time\""},{"value":"\"title\""},{"value":"\"tr\""},{"value":"\"track\""},{"value":"\"u\""},{"value":"\"ul\""},{"value":"\"var\""},{"value":"\"video\""},{"value":"\"wbr\""}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"string"}}}}

package/components/HighlightBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icons';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightBoxColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral' | 'kiwi' | 'plum'>;\n\nexport enum HighlightBoxSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightBoxTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont'\n>;\n\ninterface HighlightBoxProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightBoxColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds an icon to the highlightbox. */\n  svgIcon?: SvgIcon;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightBoxTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface WrapperProps {\n  className: string;\n  size?: keyof typeof HighlightBoxSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightbox-wrapper'}>\n    <div className={styles.highlightbox__row}>\n      <div className={classNames(styles.highlightbox__col, size === HighlightBoxSize.medium && styles['highlightbox__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\nconst ContentWrapper: React.FC = ({ children }) => (\n  <div className={styles['highlightbox__content-wrapper']}>\n    <div className={classNames(styles.highlightbox__row)}>{children}</div>\n  </div>\n);\n\nconst HighlightBox: React.FC<HighlightBoxProps> = props => {\n  const { children, color = 'white', size = HighlightBoxSize.medium, testId, svgIcon, htmlMarkup = 'div', className } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles['highlightbox'],\n    styles[`highlightbox--${color}`],\n    styles[`highlightbox--${size}`],\n    svgIcon && styles['highlightbox--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightBoxSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n      return (\n        <>\n          <div className={styles.highlightbox__icon}>\n            <Icon svgIcon={svgIcon} size={iconSize} />\n          </div>\n          <div className={styles.highlightbox__content}>{children}</div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  if (size === HighlightBoxSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={styles['highlightbox__content-wrapper']} data-testid={testId} data-analyticsid={AnalyticsId.HighlightBox}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightBox;\n"],"names":["HighlightBoxSize","Wrapper","className","size","children","React","styles","classNames","ContentWrapper","HighlightBox","props","color","testId","svgIcon","htmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","Icon","CustomTag","AnalyticsId","HighlightBox$1"],"mappings":"2XAaY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAHEA,IAAAA,GAAA,CAAA,CAAA,EAiCZ,MAAMC,EAAkC,CAAC,CAAE,UAAAC,EAAW,KAAAC,EAAM,SAAAC,CAC1D,IAAAC,EAAA,cAAC,MAAI,CAAA,UAAAH,EAAsB,cAAa,sBAAA,kBACrC,MAAI,CAAA,UAAWI,EAAO,iBAAA,EACpBD,EAAA,cAAA,MAAA,CAAI,UAAWE,EAAWD,EAAO,kBAAmBH,IAAS,UAA2BG,EAAO,2BAA2B,CAAC,GACzHF,CACH,CACF,CACF,EAGII,EAA2B,CAAC,CAAE,SAAAJ,KAClCC,EAAA,cAAC,OAAI,UAAWC,EAAO,+BAA+B,CACpD,EAAAD,EAAA,cAAC,OAAI,UAAWE,EAAWD,EAAO,iBAAiB,CAAA,EAAIF,CAAS,CAClE,EAGIK,EAAqDC,GAAA,CACnD,KAAA,CAAE,SAAAN,EAAU,MAAAO,EAAQ,QAAS,KAAAR,EAAO,SAAyB,OAAAS,EAAQ,QAAAC,EAAS,WAAAC,EAAa,MAAO,UAAAZ,CAAA,EAAcQ,EAChHK,EAAaC,IAEbC,EAAqBV,EACzBD,EAAO,aACPA,EAAO,iBAAiBK,GAAO,EAC/BL,EAAO,iBAAiBH,GAAM,EAC9BU,GAAWP,EAAO,wBAAwB,EAC1C,CAAE,UAAWH,IAAS,UAAYA,IAAS,OAAQ,EACnDD,CAAA,EAGIgB,EAAgB,IAAM,CAC1B,GAAIL,EAAS,CACL,MAAAM,EAAWhB,IAAS,SAA0BY,GAAcA,GAAcK,EAAW,GAAKC,EAAS,OAASA,EAAS,MAC3H,uCAEKhB,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,kBAAA,kBACpBgB,EAAK,CAAA,QAAAT,EAAkB,KAAMM,CAAU,CAAA,CAC1C,EACCd,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,qBAAA,EAAwBF,CAAS,CAC1D,EAIG,OAAAA,CAAA,EAGHmB,EAAYT,EAElB,OAAIX,IAAS,yBAERF,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,GACtCE,EAAA,cAACkB,GAAU,UAAWjB,EAAO,+BAA+B,EAAG,cAAaM,EAAQ,mBAAkBY,EAAY,YAC/G,EAAAN,EACH,CAAA,CACF,EAIAf,IAAS,SAA0BU,kBAElCZ,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,CAAA,kBACrCK,EACC,KAAAH,EAAA,cAACkB,EAAA,CACC,UAAWhB,EAAWD,EAAO,kBAAmBA,EAAO,oCAAoC,CAAC,EAC5F,cAAaM,EACb,mBAAkBY,EAAY,YAAA,EAE7BN,EAAc,CAEnB,CAAA,CACF,EAIAf,IAAS,wBAERF,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,CAAA,kBACrCK,EACC,KAAAH,EAAA,cAACkB,EAAA,CACC,UAAWhB,EAAWD,EAAO,kBAAmBA,EAAO,2BAA2B,CAAC,EACnF,cAAaM,EACb,mBAAkBY,EAAY,YAAA,EAE7BN,EAAc,CAEnB,CAAA,CACF,EAIAf,IAAS,wBAERoB,EAAU,CAAA,UAAWN,EAAoB,cAAaL,CAAA,EACpDM,GACH,EAIG,IACT,EAEAO,EAAehB"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icons';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightBoxColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightBoxSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightBoxTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont'\n>;\n\ninterface HighlightBoxProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightBoxColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds an icon to the highlightbox. */\n  svgIcon?: SvgIcon;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightBoxTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface WrapperProps {\n  className: string;\n  size?: keyof typeof HighlightBoxSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightbox-wrapper'}>\n    <div className={styles.highlightbox__row}>\n      <div className={classNames(styles.highlightbox__col, size === HighlightBoxSize.medium && styles['highlightbox__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\nconst ContentWrapper: React.FC = ({ children }) => (\n  <div className={styles['highlightbox__content-wrapper']}>\n    <div className={classNames(styles.highlightbox__row)}>{children}</div>\n  </div>\n);\n\nconst HighlightBox: React.FC<HighlightBoxProps> = props => {\n  const { children, color = 'white', size = HighlightBoxSize.medium, testId, svgIcon, htmlMarkup = 'div', className } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles['highlightbox'],\n    styles[`highlightbox--${color}`],\n    styles[`highlightbox--${size}`],\n    svgIcon && styles['highlightbox--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightBoxSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n      return (\n        <>\n          <div className={styles.highlightbox__icon}>\n            <Icon svgIcon={svgIcon} size={iconSize} />\n          </div>\n          <div className={styles.highlightbox__content}>{children}</div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  if (size === HighlightBoxSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={styles['highlightbox__content-wrapper']} data-testid={testId} data-analyticsid={AnalyticsId.HighlightBox}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightBox;\n"],"names":["HighlightBoxSize","Wrapper","className","size","children","React","styles","classNames","ContentWrapper","HighlightBox","props","color","testId","svgIcon","htmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","Icon","CustomTag","AnalyticsId","HighlightBox$1"],"mappings":"2XAaY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAHEA,IAAAA,GAAA,CAAA,CAAA,EAiCZ,MAAMC,EAAkC,CAAC,CAAE,UAAAC,EAAW,KAAAC,EAAM,SAAAC,CAC1D,IAAAC,EAAA,cAAC,MAAI,CAAA,UAAAH,EAAsB,cAAa,sBAAA,kBACrC,MAAI,CAAA,UAAWI,EAAO,iBAAA,EACpBD,EAAA,cAAA,MAAA,CAAI,UAAWE,EAAWD,EAAO,kBAAmBH,IAAS,UAA2BG,EAAO,2BAA2B,CAAC,GACzHF,CACH,CACF,CACF,EAGII,EAA2B,CAAC,CAAE,SAAAJ,KAClCC,EAAA,cAAC,OAAI,UAAWC,EAAO,+BAA+B,CACpD,EAAAD,EAAA,cAAC,OAAI,UAAWE,EAAWD,EAAO,iBAAiB,CAAA,EAAIF,CAAS,CAClE,EAGIK,EAAqDC,GAAA,CACnD,KAAA,CAAE,SAAAN,EAAU,MAAAO,EAAQ,QAAS,KAAAR,EAAO,SAAyB,OAAAS,EAAQ,QAAAC,EAAS,WAAAC,EAAa,MAAO,UAAAZ,CAAA,EAAcQ,EAChHK,EAAaC,IAEbC,EAAqBV,EACzBD,EAAO,aACPA,EAAO,iBAAiBK,GAAO,EAC/BL,EAAO,iBAAiBH,GAAM,EAC9BU,GAAWP,EAAO,wBAAwB,EAC1C,CAAE,UAAWH,IAAS,UAAYA,IAAS,OAAQ,EACnDD,CAAA,EAGIgB,EAAgB,IAAM,CAC1B,GAAIL,EAAS,CACL,MAAAM,EAAWhB,IAAS,SAA0BY,GAAcA,GAAcK,EAAW,GAAKC,EAAS,OAASA,EAAS,MAC3H,uCAEKhB,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,kBAAA,kBACpBgB,EAAK,CAAA,QAAAT,EAAkB,KAAMM,CAAU,CAAA,CAC1C,EACCd,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,qBAAA,EAAwBF,CAAS,CAC1D,EAIG,OAAAA,CAAA,EAGHmB,EAAYT,EAElB,OAAIX,IAAS,yBAERF,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,GACtCE,EAAA,cAACkB,GAAU,UAAWjB,EAAO,+BAA+B,EAAG,cAAaM,EAAQ,mBAAkBY,EAAY,YAC/G,EAAAN,EACH,CAAA,CACF,EAIAf,IAAS,SAA0BU,kBAElCZ,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,CAAA,kBACrCK,EACC,KAAAH,EAAA,cAACkB,EAAA,CACC,UAAWhB,EAAWD,EAAO,kBAAmBA,EAAO,oCAAoC,CAAC,EAC5F,cAAaM,EACb,mBAAkBY,EAAY,YAAA,EAE7BN,EAAc,CAEnB,CAAA,CACF,EAIAf,IAAS,wBAERF,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,CAAA,kBACrCK,EACC,KAAAH,EAAA,cAACkB,EAAA,CACC,UAAWhB,EAAWD,EAAO,kBAAmBA,EAAO,2BAA2B,CAAC,EACnF,cAAaM,EACb,mBAAkBY,EAAY,YAAA,EAE7BN,EAAc,CAEnB,CAAA,CACF,EAIAf,IAAS,wBAERoB,EAAU,CAAA,UAAWN,EAAoB,cAAaL,CAAA,EACpDM,GACH,EAIG,IACT,EAEAO,EAAehB"}

package/components/HighlightBox/styles.module.scss

@@ -23,7 +23,7 @@
 
 .highlightbox {
   $box: &;
-  $colors: 'blueberry', 'cherry', 'neutral', 'kiwi', 'plum';
+  $colors: 'neutral', 'blueberry', 'cherry';
 
   // Medium og large har bakgrunnsfarge på den indre wrapperen
   // slik at bakgrunnsfargen ikke går helt ut i kantene
@@ -61,6 +61,15 @@
         background-color: $white;
       }
     }
+    #{$box}__content-wrapper {
+      padding-top: getSpacer(m);
+      padding-bottom: getSpacer(l);
+
+      @media (min-width: map.get($grid-breakpoints, lg)) {
+        padding-top: getSpacer(l);
+        padding-bottom: getSpacer(xl);
+      }
+    }
   }
 
   &--medium {
@@ -77,18 +86,6 @@
     }
   }
 
-  &--large {
-    #{$box}__content-wrapper {
-      padding-top: getSpacer(m);
-      padding-bottom: getSpacer(l);
-
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-top: getSpacer(l);
-        padding-bottom: getSpacer(xl);
-      }
-    }
-  }
-
   // fluid skal ha bakgrunnsfarge på den ytre containeren
   &--fluid {
     padding: getSpacer(m) getSpacer(s) getSpacer(l) getSpacer(s);

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

@@ -10,11 +10,9 @@ export type Styles = {
   'highlightbox--cherry': string;
   'highlightbox--fluid': string;
   'highlightbox--has-icon': string;
-  'highlightbox--kiwi': string;
   'highlightbox--large': string;
   'highlightbox--medium': string;
   'highlightbox--neutral': string;
-  'highlightbox--plum': string;
   'highlightbox--white': string;
 };