@helsenorge/designsystem-react 2.12.0 → 2.13.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [2.12.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.11.3&targetVersion=GTv2.12.0) (2023-01-23)
+
+
+### Features
+
+*  gir vertikaler mulighet til å hente reset styling for radio button fra designsystemet ([868df37](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/868df372ab03638f25d2747d829e99248436528e)), closes [#292456](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292456)
+*  panel med buttonAriaLabel bruker det som aria-label selv om title er satt ([23caab9](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/23caab91b8b4ac50df54dc34930618b2fd3583be)), closes [#293470](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/293470) [#293729](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/293729)
+
+
+### Bug Fixes
+
+*  duolist null child kaster ikke feilmelding ([7668bd2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/7668bd26ffc077727fae2e1f1eaf2b371b81af80)), closes [#292617](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292617)
+*  logo kan bare være hvit og svart ([c46dcc1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/c46dcc17e13189973fef4691ab1b75c3442f6ab4)), closes [#293148](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/293148)
+*  panel detail button pil plassert riktig ([21782d8](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/21782d80502afdd9415c1e3ba9eca092f063157e)), closes [#287921](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/287921)
+*  taglist har nå role=list med listitems ([62be09d](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/62be09de17a946e1339f27792878c19c9e72be7f)), closes [#290367](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/290367)
+*  useOutsideEvent fungerer i web components ([ffe9b7f](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/ffe9b7ffc67e04f6b8d7232b0a6829a380d112d6)), closes [#293729](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/293729)
+*  vis slider på utskrift ([aa60206](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/aa60206364af351c33045f22d5a9379276e814bf)), closes [#281560](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/281560)
+
 ## [2.11.3](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.11.2&targetVersion=GTv2.11.3) (2023-01-17)
 
 

package/Panel.js

@@ -1,2 +1,2 @@
-import t,{useState as se,useEffect as z}from"react";import o from"classnames";import e from"./components/Panel/styles.module.scss";import{T as ie}from"./Title.js";import{B as D}from"./Button.js";import{AnalyticsId as ce,IconSize as x}from"./constants.js";import{Icon as d}from"./components/Icons/Icon.js";import pe from"./components/Icons/ChevronDown.js";import me from"./components/Icons/ChevronUp.js";import ue from"./components/Icons/ArrowRight.js";import de from"./components/Icons/AlertSignFill.js";import{palette as $}from"./theme/palette.js";import fe from"./components/Icons/Pencil.js";import ye from"./components/Icons/Calendar.js";import be from"./components/Icons/Watch.js";import{useBreakpoint as _e,Breakpoint as j}from"./hooks/useBreakpoint.js";import{useUuid as W}from"./hooks/useUuid.js";import{usePrevious as Ee}from"./hooks/usePrevious.js";import{getAriaLabelAttributes as ve}from"./utils/accessibility.js";import{B as ge}from"./Badge.js";var he=(a=>(a.normal="normal",a.new="new",a.error="error",a.draft="draft",a))(he||{}),Ce=(a=>(a.fill="fill",a.white="white",a.stroke="stroke",a.line="line",a))(Ce||{}),we=(a=>(a.layout1="layout1",a.layout2="layout2",a.layout3a="layout3a",a.layout3b="layout3b",a.layout3c="layout3c",a))(we||{});const Ne=({status:a,statusMessage:s})=>{const v=()=>a==="error"?{color:$.cherry500,svgIcon:de}:{color:$.black,svgIcon:fe},i=o(e["status-message"],{[e["status-message--new"]]:a==="new"});return(a==="error"||a==="draft")&&s?t.createElement("div",{className:i,"data-testid":"display-status"},t.createElement(d,{...v(),size:x.XSmall})," ",t.createElement("span",null,s)):null},X=({date:a,time:s})=>a||s?t.createElement("div",{className:e["datetime-container"],"data-testid":"datetime"},a&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(d,{svgIcon:ye,size:x.XSmall}),t.createElement("span",null,a)),s&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(d,{svgIcon:be,size:x.XSmall}),t.createElement("span",null,s))):null,qe=t.forwardRef(function(s,v){const{children:i,contentA:F,contentB:r,className:H,testId:U,title:g,titleHtmlMarkup:L="h2",url:f,target:O="_self",icon:c,iconRight:B=!1,variant:p="fill",status:m="normal",statusMessage:h,buttonText:A="Se detaljer",buttonTextClose:q="Skjul detaljer",buttonAriaLabelledById:S,buttonAriaLabel:G,layout:n="layout2",containerAsButton:C=!1,date:w,time:N,noTopBorder:J,buttonOnClick:u,buttonHtmlMarkup:K="a",expanded:y=!1,onExpand:b,renderChildrenWhenClosed:Q=!1}=s,[l,T]=se(y),Y=Ee(l),I=W(),_=W(),R=_e();z(()=>{y!==l&&T(y)},[y]),z(()=>{b&&l!==!!Y&&b(l)},[l,b]);const E=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(n),Z=o(e["panel-wrapper"],H),P=o(e.panel,{[e["panel--fill"]]:p==="fill",[e["panel--stroke"]]:p==="stroke",[e["panel--white"]]:p==="white",[e["panel--line"]]:p==="line",[e["panel--no-top-border"]]:p==="line"&&J,[e["panel--selected"]]:l,[e["panel--new"]]:m==="new",[e["panel--draft"]]:m==="draft",[e["panel--error"]]:m==="error",[e["panel--status"]]:m&&m!=="normal",[e["panel--with-icon"]]:c,[e["panel--button"]]:C,[e["panel--clickable"]]:i||f||b||u||C}),V=o({[e.panel__container]:n==="layout2"&&r,[e["panel__container--layout3"]]:E&&r,[e["panel__container--grow"]]:c}),ee=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"}),te=o({[e["panel__content-right--layout1"]]:r&&n==="layout1",[e["panel__content-right--layout2"]]:r&&n==="layout2",[e["panel__content-right--layout3"]]:r&&E,[e["panel__content-right--layout3a"]]:r&&n==="layout3a",[e["panel__content-right--layout3b"]]:r&&n==="layout3b",[e["panel__content-right--layout3c"]]:r&&n==="layout3c"}),ae=o(e["panel-content-b"],{[e["panel-content-b--layout1"]]:n==="layout1",[e["panel-content-b--layout3"]]:E}),ne=o(e["panel__details-btn"]),le=()=>{const k=ve({label:G,id:S&&`${_} ${S}`||g&&I&&`${_} ${I}`,prefer:"label"}),M={onClick:u||(()=>T(!l)),className:C?e.panel__expand:void 0,variant:"borderless",ellipsis:!0,...k};return i?t.createElement(D,{testId:"expand","aria-expanded":l,...M},t.createElement("span",{id:_},l?q:A),t.createElement(d,{svgIcon:l?me:pe})):t.createElement(D,{testId:"url",htmlMarkup:K,href:f,target:O,...M},t.createElement("span",{id:_},A),t.createElement(d,{svgIcon:ue}))},re=o(e["panel__btn-container"],{[e["panel__btn-container--layout3"]]:E,[e["panel__btn-container--padding-top"]]:r}),oe=()=>{if(!i||!Q&&!l)return null;const k=o(e["panel-details"],{[e["panel-details--open"]]:l,[e["panel-details--line"]]:p==="line",[e["panel-details--white"]]:p==="white",[e["panel-details--with-icon"]]:c});return t.createElement("div",{className:k,"data-testid":"panel-details"},t.createElement("div",null,i))};return t.createElement("div",{ref:v,"data-testid":U,className:Z,"data-analyticsid":ce.Panel},t.createElement("div",{className:P},c&&!B&&t.createElement("div",{className:e.panel__icon},c),t.createElement("div",{className:V},t.createElement("div",{className:ee},t.createElement(Ne,{status:m,statusMessage:h}),g&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(ie,{appearance:"title3",htmlMarkup:L,id:I},g),h&&m==="new"&&t.createElement(ge,{color:"blueberry",testId:"badge-status",className:e.panel__badge},h)),F,R>=j.lg&&t.createElement(X,{date:w,time:N})),t.createElement("div",{className:te},r&&t.createElement("div",{className:ae},r),(i||f||w||N||u)&&t.createElement("div",{className:re},R<j.lg&&t.createElement(X,{date:w,time:N}),(i||f||u)&&t.createElement("div",{className:ne},le())))),c&&B&&t.createElement("div",{className:e["panel__icon--right"]},c)),oe())});export{qe as P,he as a,Ce as b,we as c};
+import t,{useState as ce,useEffect as D}from"react";import o from"classnames";import e from"./components/Panel/styles.module.scss";import{T as pe}from"./Title.js";import{B as $}from"./Button.js";import{AnalyticsId as me,IconSize as B}from"./constants.js";import{Icon as u}from"./components/Icons/Icon.js";import de from"./components/Icons/ChevronDown.js";import ue from"./components/Icons/ChevronUp.js";import fe from"./components/Icons/ArrowRight.js";import _e from"./components/Icons/AlertSignFill.js";import{palette as j}from"./theme/palette.js";import ye from"./components/Icons/Pencil.js";import be from"./components/Icons/Calendar.js";import Ee from"./components/Icons/Watch.js";import{useBreakpoint as ge,Breakpoint as W}from"./hooks/useBreakpoint.js";import{useUuid as X}from"./hooks/useUuid.js";import{usePrevious as ve}from"./hooks/usePrevious.js";import{getAriaLabelAttributes as he}from"./utils/accessibility.js";import{B as Ce}from"./Badge.js";var we=(a=>(a.normal="normal",a.new="new",a.error="error",a.draft="draft",a))(we||{}),Ne=(a=>(a.fill="fill",a.white="white",a.stroke="stroke",a.line="line",a))(Ne||{}),Ie=(a=>(a.layout1="layout1",a.layout2="layout2",a.layout3a="layout3a",a.layout3b="layout3b",a.layout3c="layout3c",a))(Ie||{});const ke=({status:a,statusMessage:s})=>{const g=()=>a==="error"?{color:j.cherry500,svgIcon:_e}:{color:j.black,svgIcon:ye},i=o(e["status-message"],{[e["status-message--new"]]:a==="new"});return(a==="error"||a==="draft")&&s?t.createElement("div",{className:i,"data-testid":"display-status"},t.createElement(u,{...g(),size:B.XSmall})," ",t.createElement("span",null,s)):null},F=({date:a,time:s})=>a||s?t.createElement("div",{className:e["datetime-container"],"data-testid":"datetime"},a&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(u,{svgIcon:be,size:B.XSmall}),t.createElement("span",null,a)),s&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(u,{svgIcon:Ee,size:B.XSmall}),t.createElement("span",null,s))):null,Je=t.forwardRef(function(s,g){const{children:i,contentA:H,contentB:r,className:U,testId:L,title:v,titleHtmlMarkup:O="h2",url:f,target:q="_self",icon:c,iconRight:x=!1,variant:p="fill",status:m="normal",statusMessage:h,buttonText:A="Se detaljer",buttonTextClose:G="Skjul detaljer",buttonAriaLabelledById:S,buttonAriaLabel:J,layout:n="layout2",containerAsButton:C=!1,date:w,time:N,noTopBorder:K,buttonOnClick:d,buttonHtmlMarkup:Q="a",expanded:_=!1,onExpand:y,renderChildrenWhenClosed:Y=!1}=s,[l,T]=ce(_),Z=ve(l),I=X(),b=X(),R=ge(),M=h&&m==="new";D(()=>{_!==l&&T(_)},[_]),D(()=>{y&&l!==!!Z&&y(l)},[l,y]);const E=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(n),P=o(e["panel-wrapper"],U),V=o(e.panel,{[e["panel--fill"]]:p==="fill",[e["panel--stroke"]]:p==="stroke",[e["panel--white"]]:p==="white",[e["panel--line"]]:p==="line",[e["panel--no-top-border"]]:p==="line"&&K,[e["panel--selected"]]:l,[e["panel--new"]]:m==="new",[e["panel--draft"]]:m==="draft",[e["panel--error"]]:m==="error",[e["panel--status"]]:m&&m!=="normal",[e["panel--with-icon"]]:c,[e["panel--button"]]:C,[e["panel--clickable"]]:i||f||y||d||C}),ee=o({[e.panel__container]:n==="layout2"&&r,[e["panel__container--layout3"]]:E&&r,[e["panel__container--grow"]]:c}),te=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"}),ae=o({[e["panel__content-right--layout1"]]:r&&n==="layout1",[e["panel__content-right--layout2"]]:r&&n==="layout2",[e["panel__content-right--layout3"]]:r&&E,[e["panel__content-right--layout3a"]]:r&&n==="layout3a",[e["panel__content-right--layout3b"]]:r&&n==="layout3b",[e["panel__content-right--layout3c"]]:r&&n==="layout3c"}),ne=o(e["panel-content-b"],{[e["panel-content-b--layout1"]]:n==="layout1",[e["panel-content-b--layout3"]]:E}),le=o(e["panel__details-btn"]),re=o(e["panel-content-a__title"],{[e["panel-content-a__title--badge"]]:M}),oe=()=>{const k=he({label:J,id:S&&`${b} ${S}`||v&&I&&`${b} ${I}`,prefer:"label"}),z={onClick:d||(()=>T(!l)),className:C?e.panel__expand:void 0,variant:"borderless",ellipsis:!0,...k};return i?t.createElement($,{testId:"expand","aria-expanded":l,...z},t.createElement("span",{id:b},l?G:A),t.createElement(u,{svgIcon:l?ue:de})):t.createElement($,{testId:"url",htmlMarkup:Q,href:f,target:q,...z},t.createElement("span",{id:b},A),t.createElement(u,{svgIcon:fe}))},se=o(e["panel__btn-container"],{[e["panel__btn-container--layout3"]]:E,[e["panel__btn-container--padding-top"]]:r}),ie=()=>{if(!i||!Y&&!l)return null;const k=o(e["panel-details"],{[e["panel-details--open"]]:l,[e["panel-details--line"]]:p==="line",[e["panel-details--white"]]:p==="white",[e["panel-details--with-icon"]]:c});return t.createElement("div",{className:k,"data-testid":"panel-details"},t.createElement("div",null,i))};return t.createElement("div",{ref:g,"data-testid":L,className:P,"data-analyticsid":me.Panel},t.createElement("div",{className:V},c&&!x&&t.createElement("div",{className:e.panel__icon},c),t.createElement("div",{className:ee},t.createElement("div",{className:te},t.createElement(ke,{status:m,statusMessage:h}),v&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(pe,{appearance:"title3",htmlMarkup:O,id:I,className:re},v),M&&t.createElement("div",{className:e.panel__badge},t.createElement(Ce,{color:"blueberry",testId:"badge-status"},h))),H,R>=W.lg&&t.createElement(F,{date:w,time:N})),t.createElement("div",{className:ae},r&&t.createElement("div",{className:ne},r),(i||f||w||N||d)&&t.createElement("div",{className:se},R<W.lg&&t.createElement(F,{date:w,time:N}),(i||f||d)&&t.createElement("div",{className:le},oe())))),c&&x&&t.createElement("div",{className:e["panel__icon--right"]},c)),ie())});export{Je as P,we as a,Ne as b,Ie 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, { useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport panelStyles from './styles.module.scss';\nimport Title, { TitleTags } from '../Title';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport { AnchorTarget, AnalyticsId } from '../../constants';\n\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ArrowRight from '../Icons/ArrowRight';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport { palette } from '../../theme/palette';\nimport Pencil from '../Icons/Pencil';\nimport Calendar from '../Icons/Calendar';\nimport Watch from '../Icons/Watch';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (!!children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--padding-top']]: contentB,\n  });\n\n  const renderContent = () => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId}>\n                  {title}\n                </Title>\n                {statusMessage && status === PanelStatus.new && (\n                  <Badge color=\"blueberry\" testId=\"badge-status\" className={panelStyles.panel__badge}>\n                    {statusMessage}\n                  </Badge>\n                )}\n              </div>\n            )}\n            {contentA}\n            {breakpoint >= Breakpoint.lg && <DateTime date={date} time={time} />}\n          </div>\n          <div className={panelContentRightClass}>\n            {contentB && <div className={panelContentBClass}>{contentB}</div>}\n            {(children || url || date || time || buttonOnClick) && (\n              <div className={btnContainerClass}>\n                {breakpoint < Breakpoint.lg && <DateTime date={date} time={time} />}\n                {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n              </div>\n            )}\n          </div>\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","React","Icon","IconSize","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","titleId","useUuid","buttonTextId","breakpoint","useBreakpoint","useEffect","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","AnalyticsId","Title","Badge","Breakpoint"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport panelStyles from './styles.module.scss';\nimport Title, { TitleTags } from '../Title';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport { AnchorTarget, AnalyticsId } from '../../constants';\n\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ArrowRight from '../Icons/ArrowRight';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport { palette } from '../../theme/palette';\nimport Pencil from '../Icons/Pencil';\nimport Calendar from '../Icons/Calendar';\nimport Watch from '../Icons/Watch';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const breakpoint = useBreakpoint();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n  const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (!!children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--padding-top']]: contentB,\n  });\n\n  const renderContent = () => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n                  {title}\n                </Title>\n                {hasBadge && (\n                  <div className={panelStyles.panel__badge}>\n                    <Badge color=\"blueberry\" testId=\"badge-status\">\n                      {statusMessage}\n                    </Badge>\n                  </div>\n                )}\n              </div>\n            )}\n            {contentA}\n            {breakpoint >= Breakpoint.lg && <DateTime date={date} time={time} />}\n          </div>\n          <div className={panelContentRightClass}>\n            {contentB && <div className={panelContentBClass}>{contentB}</div>}\n            {(children || url || date || time || buttonOnClick) && (\n              <div className={btnContainerClass}>\n                {breakpoint < Breakpoint.lg && <DateTime date={date} time={time} />}\n                {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n              </div>\n            )}\n          </div>\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","React","Icon","IconSize","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","titleId","useUuid","buttonTextId","breakpoint","useBreakpoint","hasBadge","useEffect","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","AnalyticsId","Title","Badge","Breakpoint"],"mappings":"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"}

package/components/Duolist/Duolist.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { TitleProps } from '../Title';
 export declare type DuolistVariants = 'normal' | 'line';
-export declare type BoldColumn = 'first' | 'second';
+export declare type BoldColumn = 'first' | 'second' | 'none';
 export declare type Border = 'no-border' | 'border';
+export declare type Formats = 'formatted' | 'non-formatted';
 interface DuolistProps {
     /** Determines which column is bold */
     boldColumn?: BoldColumn;
@@ -10,6 +11,10 @@ interface DuolistProps {
     border?: Border;
     /** Label of the Duolist */
     label?: TitleProps;
+    /** Formatted or non-formatted visual variants */
+    format?: Formats;
+    /** Character separator for non-formatted format */
+    separator?: string;
     /** Sets the visual variant of the Duolist. */
     variant?: DuolistVariants;
     /** Sets the content of the Duolist. */
@@ -26,6 +31,10 @@ interface DuolistGroupProps {
     boldColumn?: BoldColumn;
     /** Sets content of the <dd> tag. */
     description: React.ReactNode;
+    /** Formatted or non-formatted visual variants */
+    format?: Formats;
+    /** Character separator for non-formatted format */
+    separator?: string;
     /** Sets content of the <dt> tag. */
     term: React.ReactNode;
 }

package/components/Duolist/Duolist.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Duolist.d.ts","sourceRoot":"","sources":["../../../src/components/Duolist/Duolist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,oBAAY,eAAe,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChD,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC5C,oBAAY,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE5C,UAAU,YAAY;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,UAAU,iBAAiB;IACzB,sCAAsC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,oCAAoC;IACpC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAcpD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0C1C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Duolist.d.ts","sourceRoot":"","sources":["../../../src/components/Duolist/Duolist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,oBAAY,eAAe,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChD,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AACrD,oBAAY,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC5C,oBAAY,OAAO,GAAG,WAAW,GAAG,eAAe,CAAC;AAEpD,UAAU,YAAY;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,UAAU,iBAAiB;IACzB,sCAAsC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,oCAAoC;IACpC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4BpD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAyD1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/components/Duolist/componentdata.json

@@ -1 +1 @@
-{"props":{"boldColumn":{"defaultValue":null,"description":"Determines which column is bold","name":"boldColumn","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":false,"type":{"name":"enum","raw":"BoldColumn","value":[{"value":"\"first\""},{"value":"\"second\""}]}},"description":{"defaultValue":null,"description":"Sets content of the <dd> tag.","name":"description","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":true,"type":{"name":"ReactNode"}},"term":{"defaultValue":null,"description":"Sets content of the <dt> tag.","name":"term","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":true,"type":{"name":"ReactNode"}}}}
+{"props":{"boldColumn":{"defaultValue":null,"description":"Determines which column is bold","name":"boldColumn","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":false,"type":{"name":"enum","raw":"BoldColumn","value":[{"value":"\"first\""},{"value":"\"second\""},{"value":"\"none\""}]}},"description":{"defaultValue":null,"description":"Sets content of the <dd> tag.","name":"description","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":true,"type":{"name":"ReactNode"}},"format":{"defaultValue":null,"description":"Formatted or non-formatted visual variants","name":"format","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":false,"type":{"name":"enum","raw":"Formats","value":[{"value":"\"formatted\""},{"value":"\"non-formatted\""}]}},"separator":{"defaultValue":null,"description":"Character separator for non-formatted format","name":"separator","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":false,"type":{"name":"string"}},"term":{"defaultValue":null,"description":"Sets content of the <dt> tag.","name":"term","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":true,"type":{"name":"ReactNode"}}}}

package/components/Duolist/index.js

@@ -1,2 +1,2 @@
-import t from"react";import r from"classnames";import e from"./styles.module.scss";import{AnalyticsId as g}from"../../constants.js";import{S as x}from"../../Spacer.js";import"../Spacer/styles.module.scss";const S=a=>{const{boldColumn:d="first",description:n,term:o}=a,s=d==="first",i=r(e.duolist__dt,{[e["duolist__dt--bold"]]:s}),m=r(e.duolist__dd,{[e["duolist__dd--bold"]]:!s});return t.createElement(t.Fragment,null,t.createElement("dt",{className:i},o),t.createElement("dd",{className:m},n))},G=a=>{const{boldColumn:d,border:n="no-border",descriptionWidth:o,label:s,variant:i="normal",children:m,className:b,testId:C}=a,u=n==="border",c=i==="line",E=u&&(s||c),N=r(e["duolist-wrapper"],{[e["duolist-wrapper--border"]]:u,[e["duolist-wrapper--extra-padding-top"]]:E},b),_=r(e.duolist,{[e["duolist--line"]]:c}),y=o?o+"%":"minmax(60%, 1fr)";return t.createElement("div",{className:N,"data-testid":C,"data-analyticsid":g.Duolist},s&&t.createElement(t.Fragment,null,s,t.createElement(x,null)),t.createElement("dl",{style:{gridTemplateColumns:`auto ${y}`},className:_},t.Children.map(m,l=>{var f;if(l===null||typeof l>"u")return;const p=l;if(p.type===S)return t.cloneElement(l,{boldColumn:(f=p.props.boldColumn)!=null?f:d})})))};export{G as Duolist,S as DuolistGroup,G as default};
+import t from"react";import c from"classnames";import o from"./styles.module.scss";import{AnalyticsId as S}from"../../constants.js";import{S as B}from"../../Spacer.js";import"../Spacer/styles.module.scss";const D=u=>{const{format:n="formatted",boldColumn:a=n==="non-formatted"?"none":"first",description:d,separator:r=": ",term:l}=u,p=a==="first",f=a==="second",e=n==="non-formatted",_=c(o.duolist__dt,{[o["duolist__dt--bold"]]:p,[o["duolist__dt--non-formatted"]]:e}),C=c(o.duolist__dd,{[o["duolist__dd--bold"]]:f,[o["duolist__dd--non-formatted"]]:e}),s=()=>t.createElement(t.Fragment,null,t.createElement("dt",{"data-separator":e?r:void 0,className:_},l),t.createElement("dd",{className:C},d));return e?t.createElement("div",{className:o["duolist__content-wrapper"]},s()):t.createElement(t.Fragment,null,s())},L=u=>{const{boldColumn:n,border:a="no-border",descriptionWidth:d,label:r,format:l="formatted",separator:p,variant:f="normal",children:e,className:_,testId:C}=u,s=a==="border",b=f==="line",v=s&&(r||b),E=l==="non-formatted",F=c(o["duolist-wrapper"],{[o["duolist-wrapper--border"]]:s,[o["duolist-wrapper--extra-padding-top"]]:v},_),w=c(o.duolist,{[o["duolist--line"]]:b,[o["duolist--non-formatted"]]:E}),x=d?d+"%":"minmax(60%, 1fr)";return t.createElement("div",{className:F,"data-testid":C,"data-analyticsid":S.Duolist},r&&t.createElement(t.Fragment,null,r,t.createElement(B,null)),t.createElement("dl",{style:E?void 0:{gridTemplateColumns:`auto ${x}`},className:w},t.Children.map(e,m=>{var N,y,g;if(m===null||typeof m>"u")return;const i=m;if(i.type===D)return t.cloneElement(m,{boldColumn:(N=i.props.boldColumn)!=null?N:n,format:(y=i.props.format)!=null?y:l,separator:(g=i.props.separator)!=null?g:p})})))};export{L as Duolist,D as DuolistGroup,L as default};
 //# sourceMappingURL=index.js.map

package/components/Duolist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport duolistStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { TitleProps } from '../Title';\nimport Spacer from '../Spacer';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second';\nexport type Border = 'no-border' | 'border';\n\ninterface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: TitleProps;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n}\n\ninterface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { boldColumn = 'first', description, term } = props;\n\n  const firstBold = boldColumn === 'first';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], { [duolistStyles['duolist__dt--bold']]: firstBold });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], { [duolistStyles['duolist__dd--bold']]: !firstBold });\n\n  return (\n    <>\n      <dt className={dtClassNames}>{term}</dt>\n      <dd className={ddClassNames}>{description}</dd>\n    </>\n  );\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const { boldColumn, border = 'no-border', descriptionWidth, label, variant = 'normal', children, className, testId } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n\n  const duolistWrapperClasses = classNames(\n    duolistStyles['duolist-wrapper'],\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n  });\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl style={{ gridTemplateColumns: `auto ${duolistColumnStyle}` }} className={duolistClasses}>\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n"],"names":["DuolistGroup","props","boldColumn","description","term","firstBold","dtClassNames","classNames","duolistStyles","ddClassNames","React","Duolist","border","descriptionWidth","label","variant","children","className","testId","hasBorder","hasLines","extraPaddingTop","duolistWrapperClasses","duolistClasses","duolistColumnStyle","AnalyticsId","Spacer","child","duolistGroup","_a"],"mappings":"6MAwCO,MAAMA,EAAqDC,GAAA,CAChE,KAAM,CAAE,WAAAC,EAAa,QAAS,YAAAC,EAAa,KAAAC,GAASH,EAE9CI,EAAYH,IAAe,QAE3BI,EAAeC,EAAWC,EAAc,YAAgB,CAAE,CAACA,EAAc,sBAAuBH,CAAA,CAAW,EAC3GI,EAAeF,EAAWC,EAAc,YAAgB,CAAE,CAACA,EAAc,sBAAuB,CAACH,CAAW,CAAA,EAElH,uCAEKK,EAAA,cAAA,KAAA,CAAG,UAAWJ,CAAe,EAAAF,CAAK,EAClCM,EAAA,cAAA,KAAA,CAAG,UAAWD,CAAA,EAAeN,CAAY,CAC5C,CAEJ,EAEaQ,EAA2CV,GAAA,CAChD,KAAA,CAAE,WAAAC,EAAY,OAAAU,EAAS,YAAa,iBAAAC,EAAkB,MAAAC,EAAO,QAAAC,EAAU,SAAU,SAAAC,EAAU,UAAAC,EAAW,OAAAC,CAAA,EAAWjB,EAEjHkB,EAAYP,IAAW,SACvBQ,EAAWL,IAAY,OACvBM,EAAkBF,IAAcL,GAASM,GAEzCE,EAAwBf,EAC5BC,EAAc,mBACd,CACE,CAACA,EAAc,4BAA6BW,EAC5C,CAACX,EAAc,uCAAwCa,CACzD,EACAJ,CAAA,EAGIM,EAAiBhB,EAAWC,EAAc,QAAS,CACvD,CAACA,EAAc,kBAAmBY,CAAA,CACnC,EACKI,EAAqBX,EAAmBA,EAAmB,IAAM,mBAEvE,OACGH,EAAA,cAAA,MAAA,CAAI,UAAWY,EAAuB,cAAaJ,EAAQ,mBAAkBO,EAAY,OAAA,EACvFX,GAEIJ,EAAA,cAAAA,EAAA,SAAA,KAAAI,kBACAY,EAAO,IAAA,CACV,EAEDhB,EAAA,cAAA,KAAA,CAAG,MAAO,CAAE,oBAAqB,QAAQc,GAAqB,EAAG,UAAWD,CAAA,EAC1Eb,EAAM,SAAS,IAAIM,EAAWW,GAAmE,OAC5F,GAAAA,IAAU,MAAQ,OAAOA,EAAU,IAAa,OACpD,MAAMC,EAAeD,EACjB,GAAAC,EAAa,OAAS5B,EACjB,OAAAU,EAAM,aAAaiB,EAAgD,CACxE,YAAYE,EAAAD,EAAa,MAAM,aAAnB,KAAAC,EAAiC3B,CAAA,CAC9C,CAEJ,CAAA,CACH,CACF,CAEJ"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport duolistStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { TitleProps } from '../Title';\nimport Spacer from '../Spacer';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\ninterface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: TitleProps;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n}\n\ninterface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n          {term}\n        </dt>\n        <dd className={ddClassNames}>{description}</dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div className={duolistStyles['duolist__content-wrapper']}>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n\n  const duolistWrapperClasses = classNames(\n    duolistStyles['duolist-wrapper'],\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n  });\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl style={!nonFormatted ? { gridTemplateColumns: `auto ${duolistColumnStyle}` } : undefined} className={duolistClasses}>\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n"],"names":["DuolistGroup","props","format","boldColumn","description","separator","term","firstBold","secondBold","nonFormatted","dtClassNames","classNames","duolistStyles","ddClassNames","renderContent","React","Duolist","border","descriptionWidth","label","variant","children","className","testId","hasBorder","hasLines","extraPaddingTop","duolistWrapperClasses","duolistClasses","duolistColumnStyle","AnalyticsId","Spacer","child","duolistGroup","_a","_b","_c"],"mappings":"6MAiDO,MAAMA,EAAqDC,GAAA,CAChE,KAAM,CAAE,OAAAC,EAAS,YAAa,WAAAC,EAAaD,IAAW,gBAAkB,OAAS,QAAS,YAAAE,EAAa,UAAAC,EAAY,KAAM,KAAAC,CAAA,EAASL,EAE5HM,EAAYJ,IAAe,QAC3BK,EAAaL,IAAe,SAC5BM,EAAeP,IAAW,gBAE1BQ,EAAeC,EAAWC,EAAc,YAAgB,CAC5D,CAACA,EAAc,sBAAuBL,EACtC,CAACK,EAAc,+BAAgCH,CAAA,CAChD,EACKI,EAAeF,EAAWC,EAAc,YAAgB,CAC5D,CAACA,EAAc,sBAAuBJ,EACtC,CAACI,EAAc,+BAAgCH,CAAA,CAChD,EAEKK,EAAgB,oCAGfC,EAAA,cAAA,KAAA,CAAG,iBAAgBN,EAAeJ,EAAY,OAAW,UAAWK,CAClE,EAAAJ,CACH,EACCS,EAAA,cAAA,KAAA,CAAG,UAAWF,CAAA,EAAeT,CAAY,CAC5C,EAIJ,OAAOK,EAAgBM,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAc,2BAAA,EAA8BE,EAAc,CAAE,EAASC,EAAA,cAAAA,EAAA,SAAA,KAAGD,GAAgB,CAChI,EAEaE,EAA2Cf,GAAA,CAChD,KAAA,CACJ,WAAAE,EACA,OAAAc,EAAS,YACT,iBAAAC,EACA,MAAAC,EACA,OAAAjB,EAAS,YACT,UAAAG,EACA,QAAAe,EAAU,SACV,SAAAC,EACA,UAAAC,EACA,OAAAC,CACE,EAAAtB,EAEEuB,EAAYP,IAAW,SACvBQ,EAAWL,IAAY,OACvBM,EAAkBF,IAAcL,GAASM,GACzChB,EAAeP,IAAW,gBAE1ByB,EAAwBhB,EAC5BC,EAAc,mBACd,CACE,CAACA,EAAc,4BAA6BY,EAC5C,CAACZ,EAAc,uCAAwCc,CACzD,EACAJ,CAAA,EAGIM,EAAiBjB,EAAWC,EAAc,QAAS,CACvD,CAACA,EAAc,kBAAmBa,EAClC,CAACb,EAAc,2BAA4BH,CAAA,CAC5C,EACKoB,EAAqBX,EAAmBA,EAAmB,IAAM,mBAEvE,OACGH,EAAA,cAAA,MAAA,CAAI,UAAWY,EAAuB,cAAaJ,EAAQ,mBAAkBO,EAAY,OAAA,EACvFX,GAEIJ,EAAA,cAAAA,EAAA,SAAA,KAAAI,kBACAY,EAAO,IAAA,CACV,EAEDhB,EAAA,cAAA,KAAA,CAAG,MAAQN,EAAuE,OAAxD,CAAE,oBAAqB,QAAQoB,GAAyB,EAAW,UAAWD,CAAA,EACtGb,EAAM,SAAS,IAAIM,EAAWW,GAAmE,WAC5F,GAAAA,IAAU,MAAQ,OAAOA,EAAU,IAAa,OACpD,MAAMC,EAAeD,EACjB,GAAAC,EAAa,OAASjC,EACjB,OAAAe,EAAM,aAAaiB,EAAgD,CACxE,YAAYE,EAAAD,EAAa,MAAM,aAAnB,KAAAC,EAAiC/B,EAC7C,QAAQgC,EAAAF,EAAa,MAAM,SAAnB,KAAAE,EAA6BjC,EACrC,WAAWkC,EAAAH,EAAa,MAAM,YAAnB,KAAAG,EAAgC/B,CAAA,CAC5C,CAEJ,CAAA,CACH,CACF,CAEJ"}

package/components/Duolist/styles.module.scss

@@ -23,6 +23,10 @@
     font-size: $font-size-md;
   }
 
+  &__content-wrapper {
+    display: inline-block;
+  }
+
   &__dt,
   &__dd {
     line-height: $lineheight-size-md;
@@ -36,6 +40,10 @@
       font-weight: 600;
       line-height: $lineheight-size-sm;
     }
+
+    &--non-formatted {
+      display: inline;
+    }
   }
 
   &__dt {
@@ -44,6 +52,14 @@
     @media (min-width: map-get($grid-breakpoints, sm)) {
       padding-right: 2.6669rem;
     }
+
+    &--non-formatted {
+      padding-right: 0;
+    }
+    &--non-formatted#{&}::after {
+      content: attr(data-separator);
+      font-weight: 400;
+    }
   }
 
   &__dd {
@@ -61,4 +77,8 @@
       border-bottom: 0.062rem solid $neutral200;
     }
   }
+
+  &--non-formatted {
+    display: unset;
+  }
 }

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

@@ -1,10 +1,14 @@
 export type Styles = {
   duolist: string;
+  'duolist__content-wrapper': string;
   duolist__dd: string;
   'duolist__dd--bold': string;
+  'duolist__dd--non-formatted': string;
   duolist__dt: string;
   'duolist__dt--bold': string;
+  'duolist__dt--non-formatted': string;
   'duolist--line': string;
+  'duolist--non-formatted': string;
   'duolist-wrapper--border': string;
   'duolist-wrapper--extra-padding-top': string;
 };

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

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

package/components/Panel/styles.module.scss

@@ -20,9 +20,6 @@
   @media (min-width: map-get($grid-breakpoints, md)) {
     padding: getSpacer(m) getSpacer(m) getSpacer(l) getSpacer(m);
   }
-  @media (min-width: map-get($grid-breakpoints, lg)) {
-    padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(m);
-  }
 }
 
 @mixin hover-and-focus-effects($background-color, $box-shadow-color) {
@@ -43,7 +40,7 @@
   box-sizing: border-box;
 
   &__container {
-    @media (min-width: map-get($grid-breakpoints, sm)) {
+    @media (min-width: map-get($grid-breakpoints, md)) {
       display: flex;
       flex-direction: row;
       flex: 1;
@@ -69,13 +66,19 @@
 
   &__icon {
     padding-right: getSpacer(s);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding-right: getSpacer(l);
+    }
+
     &--right {
       padding-left: getSpacer(s);
     }
   }
 
   &__badge {
-    margin-left: getSpacer(2xs);
+    display: inline-block;
+    vertical-align: text-bottom;
   }
 
   &__content-left {
@@ -312,11 +315,19 @@
   }
 
   &__title-container {
-    display: flex;
-    align-items: center;
+    display: inline-block;
     padding-bottom: getSpacer(s);
   }
 
+  &__title {
+    vertical-align: top;
+    display: inline;
+
+    &--badge {
+      padding-right: getSpacer(2xs);
+    }
+  }
+
   &--layout3a {
     flex: 0.6;
   }

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

@@ -34,6 +34,8 @@ export type Styles = {
   'panel--white': string;
   'panel--with-icon': string;
   'panel-content-a': string;
+  'panel-content-a__title': string;
+  'panel-content-a__title--badge': string;
   'panel-content-a__title-container': string;
   'panel-content-a--layout3a': string;
   'panel-content-a--layout3b': string;

package/components/Slider/Slider.d.ts

@@ -6,8 +6,8 @@ interface SliderProps {
     labelLeft?: string;
     /** Adds the right hand label to the element. */
     labelRight?: string;
-    /**	Decides the number of steps for each movement of the slider. */
-    step?: number;
+    /**	Sets aria-label of the slider. */
+    ariaLabel?: string;
     /** Disables the slider element. */
     disabled?: boolean;
     /** Function to be called when the value state has changed. */
@@ -15,6 +15,6 @@ interface SliderProps {
     /** Sets the data-testid attribute. */
     testId?: string;
 }
-export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLElement>>;
+export declare const Slider: React.FC<SliderProps>;
 export default Slider;
 //# sourceMappingURL=Slider.d.ts.map

package/components/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAsB3D,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,iFAwIjB,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA2B3D,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAOD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4KxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/Slider/componentdata.json

@@ -1 +1 @@
-{"props":{"title":{"defaultValue":null,"description":"Sets the title of the slider.","name":"title","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"string"}},"labelLeft":{"defaultValue":null,"description":"Adds the left hand label to the element.","name":"labelLeft","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"string"}},"labelRight":{"defaultValue":null,"description":"Adds the right hand label to the element.","name":"labelRight","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"string"}},"step":{"defaultValue":null,"description":"Decides the number of steps for each movement of the slider.","name":"step","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"number"}},"disabled":{"defaultValue":null,"description":"Disables the slider element.","name":"disabled","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"boolean"}},"onChange":{"defaultValue":null,"description":"Function to be called when the value state has changed.","name":"onChange","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"((value: number) => void)"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"title":{"defaultValue":null,"description":"Sets the title of the slider.","name":"title","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"string"}},"labelLeft":{"defaultValue":null,"description":"Adds the left hand label to the element.","name":"labelLeft","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"string"}},"labelRight":{"defaultValue":null,"description":"Adds the right hand label to the element.","name":"labelRight","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"string"}},"ariaLabel":{"defaultValue":null,"description":"Sets aria-label of the slider.","name":"ariaLabel","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"string"}},"disabled":{"defaultValue":{"value":"false"},"description":"Disables the slider element.","name":"disabled","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"boolean"}},"onChange":{"defaultValue":null,"description":"Function to be called when the value state has changed.","name":"onChange","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"((value: number) => void)"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"},"declarations":[{"fileName":"src/components/Slider/Slider.tsx","name":"SliderProps"}],"required":false,"type":{"name":"string"}}}}

package/components/Slider/index.js

@@ -1,2 +1,2 @@
-import l,{useState as S,useRef as I,useEffect as y}from"react";import _ from"classnames";import{T as W}from"../../Title.js";import c from"./styles.module.scss";import{AnalyticsId as j}from"../../constants.js";import{useSize as O}from"../../hooks/useSize.js";import"../Title/styles.module.scss";import"../../utils/debounce.js";const L=e=>(e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),!1),U=e=>q(e)?e.touches[0].pageX:e.pageX,q=e=>e.type==="touchcancel"||e.type==="touchend"||e.type==="touchenter"||e.type==="touchleave"||e.type==="touchmove"||e.type==="touchstart"?e.touches.length!==0:!1,G=(e,t,i,a,s)=>{const r=s-a;return(t-i)/r*e},H=(e,t,i,a,s,r)=>{const n=r-s,f=(t-i)/n,v=Math.round(e/f);return J(v,a,r)},J=(e,t,i)=>{const a=e%t;let s=e-a;const r=Math.floor(i/t)*t;if(e>r){const n=i-r;e>r+n/2&&(s=i)}return Math.round(s)},Q=(e,t,i,a)=>{let s=a+e;return s<0&&(s=0),s>t-i&&(s=t-i),s},Y=(e,t,i,a)=>{const s=t?t.getBoundingClientRect():void 0,r=s?s.left:0,n=r?e-(r+i/2):0;a(n)},Z=(e,t)=>{document.addEventListener("mousemove",e,!1),document.addEventListener("mouseup",t,!1)},ee=(e,t)=>{document.removeEventListener("mousemove",e,!1),document.removeEventListener("mouseup",t,!1)},te=(e,t)=>{document.addEventListener("touchmove",e,!1),document.addEventListener("touchend",t,!1)},oe=(e,t)=>{document.removeEventListener("touchmove",e,!1),document.removeEventListener("touchend",t,!1)},ue=l.forwardRef(function(t,i){const{title:a,labelLeft:s,labelRight:r,disabled:n=!1,step:f=1,onChange:v,testId:$}=t,[p,B]=S(50),[M,k]=S(!1),[T,b]=S(0),[F,x]=S(0),N=i||I(null),g=I(null),{width:h}=O(N)||{width:0},{width:m}=O(g)||{width:0},E=0,P=100,R=o=>{C(o)},z=o=>{A(o)},D=o=>{C(o)},V=o=>{A(o)};y(()=>{b(G(p,h,m,E,P))},[p,h,m]),y(()=>{M&&(Z(R,z),te(D,V))},[M]),y(()=>{!n&&v&&v(p)},[p]);const K=o=>{if(n)return;const d=P-E,u=(h-m)/d;(o.key==="ArrowRight"||o.key==="ArrowDown")&&w(f*u),(o.key==="ArrowLeft"||o.key==="ArrowUp")&&w(-f*u)},X=o=>{var u;if(n)return;const d=U(o);Y(d,g.current,m,w),k(!0),x(d),(u=g.current)==null||u.focus(),L(o)},A=o=>{n||(k(!1),ee(R,z),oe(D,V),L(o))},C=o=>{if(n||!M)return;const u=U(o)-F;w(u),L(o)},w=o=>{if(o===0)return;const d=Q(o,h,m,T);b(d),x(d+o),B(H(d,h,m,f,E,P))};return l.createElement("div",{className:c.slider,"data-testid":$,"data-analyticsid":j.Slider},a&&l.createElement(W,{htmlMarkup:"h3",margin:1.5,appearance:"title3"},a),l.createElement("div",{ref:N,className:_(c["slider__track-wrapper"],n?c["slider__track-wrapper--disabled"]:""),onMouseDown:X,onTouchStart:X,"data-testid":"tracker"},l.createElement("div",{className:_(c.slider__track,n?c["slider__track--disabled"]:"")}),l.createElement("div",{ref:g,className:_(c.slider__trigger,n?c["slider__trigger--disabled"]:""),style:{left:`${T}px`},onKeyDown:K,role:"slider","aria-valuenow":p,"aria-valuemin":E,"aria-valuemax":P,"aria-label":`${a?a+" ":""}${s?s+" ":""}${r?r+" ":""}`,tabIndex:n?-1:0},l.createElement("div",{className:_(c["slider__trigger-inner"],n?c["slider__trigger-inner--disabled"]:"")}))),(s||r)&&l.createElement("span",{className:c.slider__options},l.createElement("p",{className:c.slider__text,"aria-hidden":!0},s),l.createElement("p",{className:c.slider__text,"aria-hidden":!0},r)))});export{ue as Slider,ue as default};
+import s,{useState as U,useRef as M,useEffect as h}from"react";import P from"classnames";import{T as C}from"../../Title.js";import i from"./styles.module.scss";import{AnalyticsId as K}from"../../constants.js";import{useSize as N}from"../../hooks/useSize.js";import{useUuid as g}from"../../hooks/useUuid.js";import{getAriaLabelAttributes as W}from"../../utils/accessibility.js";import"../Title/styles.module.scss";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";const z=(a,k,c)=>{const[u,r]=U(a);return[u,f=>{f>c?r(c):f<k?r(k):r(f)}]},m=100,d=0,V=1,b=10,ae=({title:a,ariaLabel:k,labelLeft:c,labelRight:u,disabled:r=!1,onChange:E,testId:f})=>{const[L,y]=U(!1),[n,o]=z((m-d)/2,d,m),p=g(),w=g(),_=g(),A=M(null),v=M(null),{width:I}=N(A)||{width:0},{width:R}=N(v)||{width:0};h(()=>{const e=()=>{y(!1)};return document.addEventListener("pointerup",e),()=>{document.removeEventListener("pointerup",e)}},[]);const S=e=>{var l,D;const t=(D=(l=A.current)==null?void 0:l.getBoundingClientRect().x)!=null?D:0;return Math.round((e-t)/I*(m-d))};h(()=>{const e=t=>{if(!r&&L){const l=S(t.clientX);o(l)}};return document.addEventListener("pointermove",e),()=>{document.removeEventListener("pointermove",e)}},[L]),h(()=>{!r&&E&&E(n)},[n]);const T=e=>{if(r)return;let t=!1;switch(e.key){case"ArrowLeft":case"ArrowDown":o(n-V),t=!0;break;case"PageDown":o(n-b),t=!0;break;case"ArrowRight":case"ArrowUp":o(n+V),t=!0;break;case"PageUp":o(n+b),t=!0;break;case"Home":o(d),t=!0;break;case"End":o(m),t=!0;break}t&&(e.preventDefault(),e.stopPropagation())},x=e=>{var l;if(r)return;const t=S(e.clientX);o(t),(l=v.current)==null||l.focus()},B=e=>{var t;r||(y(!0),e.preventDefault(),e.stopPropagation(),(t=v.current)==null||t.focus())},X=(I-R)/(m-d)*n,j=W({label:k,id:(()=>{if(a&&c&&u)return[p,w,_].join(" ");if(a&&c)return[p,w].join(" ");if(a&&u)return[p,_].join(" ");if(a)return p})(),prefer:"label"});return s.createElement("div",{className:i.slider,"data-testid":f,"data-analyticsid":K.Slider},a&&s.createElement(C,{htmlMarkup:"h3",margin:1.5,appearance:"title3",id:p},a),s.createElement("div",{ref:A,className:P(i["slider__track-wrapper"],r&&i["slider__track-wrapper--disabled"]),onClick:x,onPointerDown:B},s.createElement("div",{className:P(i.slider__track,r&&i["slider__track--disabled"])}),s.createElement("div",{role:"slider",ref:v,className:P(i.slider__marker,r&&i["slider__marker--disabled"]),style:{left:`${X}px`},onKeyDown:T,"aria-valuenow":n,"aria-valuemin":d,"aria-valuemax":m,tabIndex:r?void 0:0,"aria-disabled":r,...j})),(c||u)&&s.createElement("span",{className:i.slider__options},s.createElement("span",{id:w},c),s.createElement("span",{id:_},u)))};export{ae as Slider,ae as default};
 //# sourceMappingURL=index.js.map

package/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Slider/SliderUtils.tsx","../../../src/components/Slider/Slider.tsx"],"sourcesContent":["/** Stopper MouseEvent eller TouchEvent parameter e som sendes inn fra å nå videre.*/\nexport const stopEvent = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): boolean => {\n  if (e.stopPropagation) e.stopPropagation();\n  if (e.preventDefault) e.preventDefault();\n  return false;\n};\n\n/** Henter ut x posisjon til MouseEvent eller TouchEvent e */\nexport const getMousePosition = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): number => {\n  if (isTouchEvent(e)) {\n    const touch: Touch = (e as TouchEvent).touches[0];\n    return touch.pageX;\n  }\n  return (e as MouseEvent).pageX;\n};\n\n/** Returnerer en boolean på om innsendte event e er en TouchEvent */\nexport const isTouchEvent = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): boolean => {\n  if (\n    e.type === 'touchcancel' ||\n    e.type === 'touchend' ||\n    e.type === 'touchenter' ||\n    e.type === 'touchleave' ||\n    e.type === 'touchmove' ||\n    e.type === 'touchstart'\n  ) {\n    return !((e as TouchEvent).touches.length === 0);\n  }\n  return false;\n};\n\n/** Kalkulerer x posisjonen til slideren basert på value som sendes inn,\n *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,\n *  og min og max verdier som er satt på slider komponentet. */\nexport const calculateSliderPositionBasedOnValue = (\n  value: number,\n  trackerWidth: number,\n  sliderWidth: number,\n  min: number,\n  max: number\n): number => {\n  const size: number = max - min;\n  const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n  return pixelPerSize * value;\n};\n\n/** Kalkulerer verdi basert på sliderPosition som sendes inn,\n *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,\n *  og min og max verdier som er satt på slider komponentet. */\nexport const calculateValueBasedOnSliderPosition = (\n  sliderPosition: number,\n  trackerWidth: number,\n  sliderWidth: number,\n  step: number,\n  min: number,\n  max: number\n): number => {\n  const size: number = max - min;\n  const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n  const newValue: number = Math.round(sliderPosition / pixelPerSize);\n  return alignValue(newValue, step, max);\n};\n\n/** Kalkulerer modifisert value basert på step parameteret,\n * med hensyn til max verdi til slideren.\n * Med en step på 10 vil da value gå fra 0 til 10 til 20 osv. */\nexport const alignValue = (value: number, step: number, max: number): number => {\n  const valModStep: number = value % step;\n  let alignedValue: number = value - valModStep;\n\n  const possibleMaxValueWithCurrentStep: number = Math.floor(max / step) * step;\n  if (value > possibleMaxValueWithCurrentStep) {\n    const diff: number = max - possibleMaxValueWithCurrentStep;\n    if (value > possibleMaxValueWithCurrentStep + diff / 2) {\n      alignedValue = max;\n    }\n  }\n\n  return Math.round(alignedValue);\n};\n\n/** Kalkulerer ny x posisjon til slider basert på innsendt differanse diff,\n *  nåværende sliderXPos, bredden til tracker - TrackerWidth og bredden til\n *  slider - sliderWidth. */\nexport const calculateChangeOfPosition = (diff: number, trackerWidth: number, sliderWidth: number, sliderXPos: number): number => {\n  let newSliderPos: number = sliderXPos + diff;\n  if (newSliderPos < 0) {\n    newSliderPos = 0;\n  }\n  if (newSliderPos > trackerWidth - sliderWidth) {\n    newSliderPos = trackerWidth - sliderWidth;\n  }\n  return newSliderPos;\n};\n\n/** Kalkulerer posisjon til slider basert på xPos, nåværende sliderELement og\n *  bredden til slider - sliderWidth */\nexport const calculateSliderTranslate = (\n  xPos: number,\n  sliderElement: HTMLDivElement | null,\n  sliderWidth: number,\n  cb: (a: number) => void\n) => {\n  const elementViewportPosition = sliderElement ? sliderElement.getBoundingClientRect() : undefined;\n  const sliderPageXPos = elementViewportPosition ? elementViewportPosition.left : 0;\n  const diff: number = sliderPageXPos ? xPos - (sliderPageXPos + sliderWidth / 2) : 0;\n  cb(diff);\n};\n\n/** Legger til mousemove og mouseup event listeners,\n *  basert på moveMouseEvent og mouseUpEvent eventene */\nexport const addMouseListeners = (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void): void => {\n  document.addEventListener('mousemove', moveMouseEvent, false);\n  document.addEventListener('mouseup', mouseUpEvent, false);\n};\n\n/** Fjerner mousemove og mouseup event listeners,\n *  basert på moveMouseEvent og mouseUpEvent eventene */\nexport const removeMouseListeners = (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void): void => {\n  document.removeEventListener('mousemove', moveMouseEvent, false);\n  document.removeEventListener('mouseup', mouseUpEvent, false);\n};\n\n/** Legger til touchmove og touchend event listeners,\n *  basert på moveTouchEvent og touchUpEvent eventene */\nexport const addTouchListeners = (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void): void => {\n  document.addEventListener('touchmove', moveTouchEvent, false);\n  document.addEventListener('touchend', touchUpEvent, false);\n};\n\n/** Fjerner touchmove og touchup event listeners,\n *  basert på moveTouchEvent og touchUpEvent eventene */\nexport const removeTouchListeners = (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void): void => {\n  document.removeEventListener('touchmove', moveTouchEvent, false);\n  document.removeEventListener('touchend', touchUpEvent, false);\n};\n","import React, { useEffect, useState, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport Title from '../Title';\n\nimport {\n  stopEvent,\n  getMousePosition,\n  calculateSliderPositionBasedOnValue,\n  calculateValueBasedOnSliderPosition,\n  calculateChangeOfPosition,\n  calculateSliderTranslate,\n  addMouseListeners,\n  addTouchListeners,\n  removeMouseListeners,\n  removeTouchListeners,\n} from './SliderUtils';\n\nimport SliderStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tDecides the number of steps for each movement of the slider. */\n  step?: number;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider = React.forwardRef(function SliderForwardedRef(props: SliderProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { title, labelLeft, labelRight, disabled = false, step = 1, onChange, testId } = props;\n  const [value, setValue] = useState(50);\n  const [isMouseDown, setIsMouseDown] = useState(false);\n\n  const [sliderXPos, setSliderXPos] = useState(0);\n  const [sliderTemporaryXPos, setSliderTemporaryXPos] = useState(0);\n  const trackerRef = ref ? (ref as React.RefObject<HTMLDivElement>) : useRef<HTMLDivElement>(null);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const { width: trackerWidth } = useSize(trackerRef) || { width: 0 };\n  const { width: sliderWidth } = useSize(sliderRef) || { width: 0 };\n  const min = 0;\n  const max = 100;\n\n  const moveMouseEvent = (evt: MouseEvent) => {\n    onMouseMove(evt);\n  };\n  const mouseUpEvent = (evt: MouseEvent) => {\n    onMouseUp(evt);\n  };\n  const moveTouchEvent = (evt: TouchEvent) => {\n    onMouseMove(evt);\n  };\n  const touchUpEvent = (evt: TouchEvent) => {\n    onMouseUp(evt);\n  };\n\n  useEffect(() => {\n    setSliderXPos(calculateSliderPositionBasedOnValue(value, trackerWidth, sliderWidth, min, max));\n  }, [value, trackerWidth, sliderWidth]);\n\n  useEffect(() => {\n    if (isMouseDown) {\n      addMouseListeners(moveMouseEvent, mouseUpEvent);\n      addTouchListeners(moveTouchEvent, touchUpEvent);\n    }\n  }, [isMouseDown]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const size: number = max - min;\n    const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n    if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {\n      updateSliderPosition(step * pixelPerSize);\n    }\n    if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {\n      updateSliderPosition(-step * pixelPerSize);\n    }\n  };\n\n  const onMouseOrTouchDown = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled) return;\n    const updatedMousePosition: number = getMousePosition(e);\n    calculateSliderTranslate(updatedMousePosition, sliderRef.current, sliderWidth, updateSliderPosition);\n    setIsMouseDown(true);\n    setSliderTemporaryXPos(updatedMousePosition);\n    sliderRef.current?.focus();\n    stopEvent(e);\n  };\n\n  const onMouseUp = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled) return;\n    setIsMouseDown(false);\n    removeMouseListeners(moveMouseEvent, mouseUpEvent);\n    removeTouchListeners(moveTouchEvent, touchUpEvent);\n    stopEvent(e);\n  };\n\n  const onMouseMove = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled || !isMouseDown) return;\n    const updatedMousePosition: number = getMousePosition(e);\n    const diff: number = updatedMousePosition - sliderTemporaryXPos;\n    updateSliderPosition(diff);\n    stopEvent(e);\n  };\n\n  const updateSliderPosition = (diff: number): void => {\n    if (diff === 0) return;\n    const updatedSliderPos: number = calculateChangeOfPosition(diff, trackerWidth, sliderWidth, sliderXPos);\n    setSliderXPos(updatedSliderPos);\n    setSliderTemporaryXPos(updatedSliderPos + diff);\n    setValue(calculateValueBasedOnSliderPosition(updatedSliderPos, trackerWidth, sliderWidth, step, min, max));\n  };\n\n  return (\n    <div className={SliderStyles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'}>\n          {title}\n        </Title>\n      )}\n      <div\n        ref={trackerRef}\n        className={classNames(SliderStyles['slider__track-wrapper'], disabled ? SliderStyles['slider__track-wrapper--disabled'] : '')}\n        onMouseDown={onMouseOrTouchDown}\n        onTouchStart={onMouseOrTouchDown}\n        data-testid={'tracker'}\n      >\n        <div className={classNames(SliderStyles.slider__track, disabled ? SliderStyles['slider__track--disabled'] : '')} />\n        <div\n          ref={sliderRef}\n          className={classNames(SliderStyles.slider__trigger, disabled ? SliderStyles['slider__trigger--disabled'] : '')}\n          style={{\n            left: `${sliderXPos}px`,\n          }}\n          onKeyDown={onKeyDown}\n          role={'slider'}\n          aria-valuenow={value}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-label={`${title ? title + ' ' : ''}${labelLeft ? labelLeft + ' ' : ''}${labelRight ? labelRight + ' ' : ''}`}\n          tabIndex={disabled ? -1 : 0}\n        >\n          <div\n            className={classNames(SliderStyles['slider__trigger-inner'], disabled ? SliderStyles['slider__trigger-inner--disabled'] : '')}\n          />\n        </div>\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={SliderStyles.slider__options}>\n          <p className={SliderStyles.slider__text} aria-hidden={true}>\n            {labelLeft}\n          </p>\n          <p className={SliderStyles.slider__text} aria-hidden={true}>\n            {labelRight}\n          </p>\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default Slider;\n"],"names":["stopEvent","getMousePosition","isTouchEvent","calculateSliderPositionBasedOnValue","value","trackerWidth","sliderWidth","min","max","size","calculateValueBasedOnSliderPosition","sliderPosition","step","pixelPerSize","newValue","alignValue","valModStep","alignedValue","possibleMaxValueWithCurrentStep","diff","calculateChangeOfPosition","sliderXPos","newSliderPos","calculateSliderTranslate","xPos","sliderElement","cb","elementViewportPosition","sliderPageXPos","addMouseListeners","moveMouseEvent","mouseUpEvent","removeMouseListeners","addTouchListeners","moveTouchEvent","touchUpEvent","removeTouchListeners","Slider","React","props","ref","title","labelLeft","labelRight","disabled","onChange","testId","setValue","useState","isMouseDown","setIsMouseDown","setSliderXPos","sliderTemporaryXPos","setSliderTemporaryXPos","trackerRef","useRef","sliderRef","useSize","evt","onMouseMove","onMouseUp","useEffect","onKeyDown","updateSliderPosition","onMouseOrTouchDown","e","updatedMousePosition","_a","updatedSliderPos","SliderStyles","AnalyticsId","Title","classNames"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  return [value, setSafeValue];\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst MAX_VALUE = 100;\nconst MIN_VALUE = 0;\nconst STEP = 1;\nconst LARGE_STEP = 10;\n\nexport const Slider: React.FC<SliderProps> = ({ title, ariaLabel, labelLeft, labelRight, disabled = false, onChange, testId }) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((MAX_VALUE - MIN_VALUE) / 2, MIN_VALUE, MAX_VALUE);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const { width: markerWidth } = useSize(markerRef) || { width: 0 };\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    return Math.round(((markerPosition - trackPosition) / trackWidth) * (MAX_VALUE - MIN_VALUE));\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - STEP);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - LARGE_STEP);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + STEP);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + LARGE_STEP);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(MIN_VALUE);\n        flag = true;\n        break;\n      case 'End':\n        setValue(MAX_VALUE);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = ((trackWidth - markerWidth) / (MAX_VALUE - MIN_VALUE)) * value;\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div\n        ref={trackRef}\n        className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n        onClick={handleTrackClick}\n        onPointerDown={handlePointerDown}\n      >\n        <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])} />\n        <div\n          role={'slider'}\n          ref={markerRef}\n          className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n          style={{\n            left: `${markerXPos}px`,\n          }}\n          onKeyDown={handleKeyDown}\n          aria-valuenow={value}\n          aria-valuemin={MIN_VALUE}\n          aria-valuemax={MAX_VALUE}\n          tabIndex={disabled ? undefined : 0}\n          aria-disabled={disabled}\n          {...ariaLabelAttributes}\n        />\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","newValue","MAX_VALUE","MIN_VALUE","STEP","LARGE_STEP","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","markerWidth","useEffect","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_b","_a","handlePointerMove","e","handleKeyDown","flag","handleTrackClick","handlePointerDown","markerXPos","ariaLabelAttributes","getAriaLabelAttributes","React","styles","AnalyticsId","Title","classNames"],"mappings":"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"}

package/components/Slider/styles.module.scss

@@ -24,11 +24,11 @@
     top: 1rem;
 
     &--disabled {
-      background-color: $neutral600;
+      border-color: $neutral600;
     }
   }
 
-  &__trigger {
+  &__marker {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -43,34 +43,36 @@
     outline: none;
     cursor: pointer;
 
-    &--disabled {
-      border-color: $neutral500;
-      cursor: default;
-    }
     &:focus-within {
       box-shadow: 0px 0px 0px 0.1rem $black;
     }
-  }
 
-  &__trigger-inner {
-    width: 1.25rem;
-    height: 1.25rem;
-    border: 0.1rem solid $black;
-    border-radius: 1rem;
-    background-color: $blueberry600;
+    &::after {
+      content: '';
+      width: 1.25rem;
+      height: 1.25rem;
+      border: 0.1rem solid $black;
+      border-radius: 1rem;
+      background-color: $blueberry600;
 
-    :hover > &,
-    :focus > & {
-      background-color: $blueberry700;
+      :hover > &,
+      :focus > & {
+        background-color: $blueberry700;
+      }
     }
 
     &--disabled {
       border-color: $neutral500;
-      background-color: $neutral200;
+      cursor: default;
 
-      :hover > &,
-      :focus > & {
+      &::after {
+        border-color: $neutral500;
         background-color: $neutral200;
+
+        :hover > &,
+        :focus > & {
+          background-color: $neutral200;
+        }
       }
     }
   }
@@ -80,8 +82,4 @@
     justify-content: space-between;
     width: 100%;
   }
-
-  &__text {
-    margin: 0;
-  }
 }

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

@@ -1,15 +1,12 @@
 export type Styles = {
   slider: string;
+  slider__marker: string;
+  'slider__marker--disabled': string;
   slider__options: string;
-  slider__text: string;
   slider__track: string;
   'slider__track--disabled': string;
   'slider__track-wrapper': string;
   'slider__track-wrapper--disabled': string;
-  slider__trigger: string;
-  'slider__trigger--disabled': string;
-  'slider__trigger-inner': string;
-  'slider__trigger-inner--disabled': string;
 };
 
 export type ClassNames = keyof Styles;

package/package.json

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

package/components/Slider/SliderUtils.d.ts

@@ -1,38 +0,0 @@
-/** Stopper MouseEvent eller TouchEvent parameter e som sendes inn fra å nå videre.*/
-export declare const stopEvent: (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>) => boolean;
-/** Henter ut x posisjon til MouseEvent eller TouchEvent e */
-export declare const getMousePosition: (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>) => number;
-/** Returnerer en boolean på om innsendte event e er en TouchEvent */
-export declare const isTouchEvent: (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>) => boolean;
-/** Kalkulerer x posisjonen til slideren basert på value som sendes inn,
- *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,
- *  og min og max verdier som er satt på slider komponentet. */
-export declare const calculateSliderPositionBasedOnValue: (value: number, trackerWidth: number, sliderWidth: number, min: number, max: number) => number;
-/** Kalkulerer verdi basert på sliderPosition som sendes inn,
- *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,
- *  og min og max verdier som er satt på slider komponentet. */
-export declare const calculateValueBasedOnSliderPosition: (sliderPosition: number, trackerWidth: number, sliderWidth: number, step: number, min: number, max: number) => number;
-/** Kalkulerer modifisert value basert på step parameteret,
- * med hensyn til max verdi til slideren.
- * Med en step på 10 vil da value gå fra 0 til 10 til 20 osv. */
-export declare const alignValue: (value: number, step: number, max: number) => number;
-/** Kalkulerer ny x posisjon til slider basert på innsendt differanse diff,
- *  nåværende sliderXPos, bredden til tracker - TrackerWidth og bredden til
- *  slider - sliderWidth. */
-export declare const calculateChangeOfPosition: (diff: number, trackerWidth: number, sliderWidth: number, sliderXPos: number) => number;
-/** Kalkulerer posisjon til slider basert på xPos, nåværende sliderELement og
- *  bredden til slider - sliderWidth */
-export declare const calculateSliderTranslate: (xPos: number, sliderElement: HTMLDivElement | null, sliderWidth: number, cb: (a: number) => void) => void;
-/** Legger til mousemove og mouseup event listeners,
- *  basert på moveMouseEvent og mouseUpEvent eventene */
-export declare const addMouseListeners: (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void) => void;
-/** Fjerner mousemove og mouseup event listeners,
- *  basert på moveMouseEvent og mouseUpEvent eventene */
-export declare const removeMouseListeners: (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void) => void;
-/** Legger til touchmove og touchend event listeners,
- *  basert på moveTouchEvent og touchUpEvent eventene */
-export declare const addTouchListeners: (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void) => void;
-/** Fjerner touchmove og touchup event listeners,
- *  basert på moveTouchEvent og touchUpEvent eventene */
-export declare const removeTouchListeners: (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void) => void;
-//# sourceMappingURL=SliderUtils.d.ts.map

package/components/Slider/SliderUtils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SliderUtils.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/SliderUtils.tsx"],"names":[],"mappings":"AAAA,qFAAqF;AACrF,eAAO,MAAM,SAAS,MAAO,UAAU,GAAG,gBAAgB,CAAC,EAAE,CAAC,GAAG,UAAU,GAAG,gBAAgB,CAAC,EAAE,CAAC,KAAG,OAIpG,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,gBAAgB,MAAO,UAAU,GAAG,gBAAgB,CAAC,EAAE,CAAC,GAAG,UAAU,GAAG,gBAAgB,CAAC,EAAE,CAAC,KAAG,MAM3G,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,YAAY,MAAO,UAAU,GAAG,gBAAgB,CAAC,EAAE,CAAC,GAAG,UAAU,GAAG,gBAAgB,CAAC,EAAE,CAAC,KAAG,OAYvG,CAAC;AAEF;;+DAE+D;AAC/D,eAAO,MAAM,mCAAmC,UACvC,MAAM,gBACC,MAAM,eACP,MAAM,OACd,MAAM,OACN,MAAM,KACV,MAIF,CAAC;AAEF;;+DAE+D;AAC/D,eAAO,MAAM,mCAAmC,mBAC9B,MAAM,gBACR,MAAM,eACP,MAAM,QACb,MAAM,OACP,MAAM,OACN,MAAM,KACV,MAKF,CAAC;AAEF;;gEAEgE;AAChE,eAAO,MAAM,UAAU,UAAW,MAAM,QAAQ,MAAM,OAAO,MAAM,KAAG,MAarE,CAAC;AAEF;;4BAE4B;AAC5B,eAAO,MAAM,yBAAyB,SAAU,MAAM,gBAAgB,MAAM,eAAe,MAAM,cAAc,MAAM,KAAG,MASvH,CAAC;AAEF;uCACuC;AACvC,eAAO,MAAM,wBAAwB,SAC7B,MAAM,iBACG,cAAc,GAAG,IAAI,eACvB,MAAM,UACX,MAAM,KAAK,IAAI,SAMxB,CAAC;AAEF;wDACwD;AACxD,eAAO,MAAM,iBAAiB,yBAA0B,UAAU,KAAK,IAAI,sBAAsB,UAAU,KAAK,IAAI,KAAG,IAGtH,CAAC;AAEF;wDACwD;AACxD,eAAO,MAAM,oBAAoB,yBAA0B,UAAU,KAAK,IAAI,sBAAsB,UAAU,KAAK,IAAI,KAAG,IAGzH,CAAC;AAEF;wDACwD;AACxD,eAAO,MAAM,iBAAiB,yBAA0B,UAAU,KAAK,IAAI,sBAAsB,UAAU,KAAK,IAAI,KAAG,IAGtH,CAAC;AAEF;wDACwD;AACxD,eAAO,MAAM,oBAAoB,yBAA0B,UAAU,KAAK,IAAI,sBAAsB,UAAU,KAAK,IAAI,KAAG,IAGzH,CAAC"}