@helsenorge/designsystem-react 2.11.3 → 2.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [2.11.3](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.11.2&targetVersion=GTv2.11.3) (2023-01-17)
2
+
3
+
4
+ ### Features
5
+
6
+ * legger til header sematikk på expanderlist ([2918461](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/29184614d218b50461c79e41d609d0c4917fd873)), closes [#291046](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/291046)
7
+
1
8
  ## [2.11.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.11.1&targetVersion=GTv2.11.2) (2023-01-12)
2
9
 
3
10
 
@@ -254,7 +261,7 @@
254
261
 
255
262
  ## 2.0.0-beta.1 (2022-09-15)
256
263
 
257
- ## 2.0.0-beta.0 (2022-09-12)
264
+ ## 2.0.0-beta.0 (2022-09-15)
258
265
 
259
266
 
260
267
  ### Features
@@ -356,8 +363,8 @@
356
363
 
357
364
  ### Bug Fixes
358
365
 
359
- * økt kontrast på understreking av lenker ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
360
366
  * panel har avstand fra tittel til badge ([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes [#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
367
+ * økt kontrast på understreking av lenker ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
361
368
 
362
369
  ## [1.2.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
363
370
 
package/Panel.js CHANGED
@@ -1,2 +1,2 @@
1
- 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 me from"./components/Icons/ChevronDown.js";import pe 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 _e from"./components/Icons/Watch.js";import{useBreakpoint as be,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:_e,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:m="fill",status:p="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:_,renderChildrenWhenClosed:Q=!1}=s,[l,T]=se(y),Y=Ee(l),I=W(),b=W(),R=be();z(()=>{y!==l&&T(y)},[y]),z(()=>{_&&l!==!!Y&&_(l)},[l,_]);const E=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(n),Z=o(e["panel-wrapper"],H),P=o(e.panel,{[e["panel--fill"]]:m==="fill",[e["panel--stroke"]]:m==="stroke",[e["panel--white"]]:m==="white",[e["panel--line"]]:m==="line",[e["panel--no-top-border"]]:m==="line"&&J,[e["panel--selected"]]:l,[e["panel--new"]]:p==="new",[e["panel--draft"]]:p==="draft",[e["panel--error"]]:p==="error",[e["panel--status"]]:p&&p!=="normal",[e["panel--with-icon"]]:c,[e["panel--button"]]:C,[e["panel--clickable"]]:i||f||_||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&&`${b} ${S}`||g&&I&&`${b} ${I}`}),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:b},l?q:A),t.createElement(d,{svgIcon:l?pe:me})):t.createElement(D,{testId:"url",htmlMarkup:K,href:f,target:O,...M},t.createElement("span",{id:b},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"]]:m==="line",[e["panel-details--white"]]:m==="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:p,statusMessage:h}),g&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(ie,{appearance:"title3",htmlMarkup:L,id:I},g),h&&p==="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};
1
+ 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};
2
2
  //# sourceMappingURL=Panel.js.map
package/Panel.js.map CHANGED
@@ -1 +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 });\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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"}
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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"}
@@ -1 +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,CAyC1C,CAAC;AAEF,eAAe,OAAO,CAAC"}
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"}
@@ -1,2 +1,2 @@
1
- import t from"react";import l from"classnames";import e from"./styles.module.scss";import{AnalyticsId as g}from"../../constants.js";import{S as h}from"../../Spacer.js";import"../Spacer/styles.module.scss";const x=r=>{const{boldColumn:a="first",description:d,term:o}=r,s=a==="first",n=l(e.duolist__dt,{[e["duolist__dt--bold"]]:s}),i=l(e.duolist__dd,{[e["duolist__dd--bold"]]:!s});return t.createElement(t.Fragment,null,t.createElement("dt",{className:n},o),t.createElement("dd",{className:i},d))},G=r=>{const{boldColumn:a,border:d="no-border",descriptionWidth:o,label:s,variant:n="normal",children:i,className:f,testId:C}=r,m=d==="border",c=n==="line",E=m&&(s||c),N=l(e["duolist-wrapper"],{[e["duolist-wrapper--border"]]:m,[e["duolist-wrapper--extra-padding-top"]]:E},f),_=l(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(h,null)),t.createElement("dl",{style:{gridTemplateColumns:`auto ${y}`},className:_},t.Children.map(i,u=>{var b;const p=u;if(p.type===x)return t.cloneElement(u,{boldColumn:(b=p.props.boldColumn)!=null?b:a})})))};export{G as Duolist,x as DuolistGroup,G as default};
1
+ 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};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +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 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,OAChG,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"}
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"}
@@ -1,6 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { PaletteNames } from '../../theme/palette';
3
- declare type LogoColor = PaletteNames;
2
+ declare type LogoColor = 'black' | 'white';
4
3
  interface LogoProps {
5
4
  /** Changes the size of the logo. */
6
5
  size?: number;
@@ -1 +1 @@
1
- {"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/components/Logo/Logo.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,aAAK,SAAS,GAAG,YAAY,CAAC;AAE9B,UAAU,SAAS;IACjB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyDD,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAG3C;AAED,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/components/Logo/Logo.tsx"],"names":[],"mappings":";AAKA,aAAK,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEnC,UAAU,SAAS;IACjB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyDD,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAG3C;AAED,eAAe,IAAI,CAAC"}
@@ -1 +1 @@
1
- {"props":{"size":{"defaultValue":{"value":"300"},"description":"Changes the size of the logo.","name":"size","parent":{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"},"declarations":[{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"}],"required":false,"type":{"name":"number"}},"className":{"defaultValue":{"value":""},"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"},"declarations":[{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"}],"required":false,"type":{"name":"string"}},"color":{"defaultValue":{"value":"black"},"description":"Changes the color of the logo.","name":"color","parent":{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"},"declarations":[{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"}],"required":false,"type":{"name":"enum","raw":"PaletteNames","value":[{"value":"\"banana\""},{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"kiwi\""},{"value":"\"neutral\""},{"value":"\"plum\""},{"value":"\"black\""},{"value":"\"white\""}]}},"byline":{"defaultValue":null,"description":"Changes to the byline variant of the logo.","name":"byline","parent":{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"},"declarations":[{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"},"declarations":[{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"}],"required":false,"type":{"name":"string"}}}}
1
+ {"props":{"size":{"defaultValue":{"value":"300"},"description":"Changes the size of the logo.","name":"size","parent":{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"},"declarations":[{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"}],"required":false,"type":{"name":"number"}},"className":{"defaultValue":{"value":""},"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"},"declarations":[{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"}],"required":false,"type":{"name":"string"}},"color":{"defaultValue":{"value":"black"},"description":"Changes the color of the logo.","name":"color","parent":{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"},"declarations":[{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"}],"required":false,"type":{"name":"enum","raw":"LogoColor","value":[{"value":"\"black\""},{"value":"\"white\""}]}},"byline":{"defaultValue":null,"description":"Changes to the byline variant of the logo.","name":"byline","parent":{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"},"declarations":[{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"},"declarations":[{"fileName":"src/components/Logo/Logo.tsx","name":"LogoProps"}],"required":false,"type":{"name":"string"}}}}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import React from 'react';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\n\ntype LogoColor = PaletteNames;\n\ninterface LogoProps {\n /** Changes the size of the logo. */\n size?: number;\n /** Adds custom classes to the element. */\n className?: string;\n /**\tChanges the color of the logo. */\n color?: LogoColor;\n /** Changes to the byline variant of the logo. */\n byline?: boolean;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst Original = ({\n size = 300,\n color = 'black',\n className = '',\n testId,\n}: {\n size?: number;\n color?: LogoColor;\n className?: string;\n testId?: string;\n}): JSX.Element => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n role={'img'}\n aria-labelledby=\"logo-title\"\n viewBox=\"0 0 502 220\"\n className={className}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Logo}\n >\n <title id={'logo-title'}>Helsenorge</title>\n <g fill={getColor(color, 500)}>\n <path d=\"M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z\" />\n </g>\n </svg>\n);\n\nconst Byline = ({\n size = 300,\n color = 'black',\n className = '',\n testId,\n}: {\n size?: number;\n color?: LogoColor;\n className?: string;\n testId?: string;\n}): JSX.Element => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n role={'img'}\n aria-labelledby=\"logo-title\"\n viewBox=\"0 0 87 12\"\n className={className}\n data-testid={testId}\n >\n <title id={'logo-title'}>Helsenorge</title>\n <g fill={getColor(color, 500)}>\n <path d=\"M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z\" />\n </g>\n </svg>\n);\n\nfunction Logo(props: LogoProps): JSX.Element {\n const { byline = false, ...restProps } = props;\n return byline ? <Byline {...restProps} /> : <Original {...restProps} />;\n}\n\nexport default Logo;\n"],"names":["Original","size","color","className","testId","React","AnalyticsId","getColor","Byline","Logo","props","byline","restProps"],"mappings":"oPAoBA,MAAMA,EAAW,CAAC,CAChB,KAAAC,EAAO,IACP,MAAAC,EAAQ,QACR,UAAAC,EAAY,GACZ,OAAAC,CACF,IAMGC,EAAA,cAAA,MAAA,CACC,MAAM,6BACN,MAAOJ,EACP,KAAM,MACN,kBAAgB,aAChB,QAAQ,cACR,UAAAE,EACA,cAAaC,EACb,mBAAkBE,EAAY,IAAA,EAE7BD,EAAA,cAAA,QAAA,CAAM,GAAI,YAAA,EAAc,YAAU,EAClCA,EAAA,cAAA,IAAA,CAAE,KAAME,EAASL,EAAO,GAAG,CAAA,EACzBG,EAAA,cAAA,OAAA,CAAK,EAAE,+pDAAA,CAAgqD,CAC1qD,CACF,EAGIG,EAAS,CAAC,CACd,KAAAP,EAAO,IACP,MAAAC,EAAQ,QACR,UAAAC,EAAY,GACZ,OAAAC,CACF,IAMGC,EAAA,cAAA,MAAA,CACC,MAAM,6BACN,MAAOJ,EACP,KAAM,MACN,kBAAgB,aAChB,QAAQ,YACR,UAAAE,EACA,cAAaC,CAAA,EAEZC,EAAA,cAAA,QAAA,CAAM,GAAI,YAAA,EAAc,YAAU,EAClCA,EAAA,cAAA,IAAA,CAAE,KAAME,EAASL,EAAO,GAAG,CAAA,EACzBG,EAAA,cAAA,OAAA,CAAK,EAAE,uxCAAA,CAAwxC,CAClyC,CACF,EAGF,SAASI,EAAKC,EAA+B,CAC3C,KAAM,CAAE,OAAAC,EAAS,MAAUC,CAAA,EAAcF,EACzC,OAAOC,EAAUN,EAAA,cAAAG,EAAA,CAAQ,GAAGI,CAAA,CAAW,EAAMP,EAAA,cAAAL,EAAA,CAAU,GAAGY,CAAA,CAAW,CACvE"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import React from 'react';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\n\ntype LogoColor = 'black' | 'white';\n\ninterface LogoProps {\n /** Changes the size of the logo. */\n size?: number;\n /** Adds custom classes to the element. */\n className?: string;\n /**\tChanges the color of the logo. */\n color?: LogoColor;\n /** Changes to the byline variant of the logo. */\n byline?: boolean;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst Original = ({\n size = 300,\n color = 'black',\n className = '',\n testId,\n}: {\n size?: number;\n color?: LogoColor;\n className?: string;\n testId?: string;\n}): JSX.Element => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n role={'img'}\n aria-labelledby=\"logo-title\"\n viewBox=\"0 0 502 220\"\n className={className}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Logo}\n >\n <title id={'logo-title'}>Helsenorge</title>\n <g fill={getColor(color, 500)}>\n <path d=\"M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z\" />\n </g>\n </svg>\n);\n\nconst Byline = ({\n size = 300,\n color = 'black',\n className = '',\n testId,\n}: {\n size?: number;\n color?: LogoColor;\n className?: string;\n testId?: string;\n}): JSX.Element => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n role={'img'}\n aria-labelledby=\"logo-title\"\n viewBox=\"0 0 87 12\"\n className={className}\n data-testid={testId}\n >\n <title id={'logo-title'}>Helsenorge</title>\n <g fill={getColor(color, 500)}>\n <path d=\"M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z\" />\n </g>\n </svg>\n);\n\nfunction Logo(props: LogoProps): JSX.Element {\n const { byline = false, ...restProps } = props;\n return byline ? <Byline {...restProps} /> : <Original {...restProps} />;\n}\n\nexport default Logo;\n"],"names":["Original","size","color","className","testId","React","AnalyticsId","getColor","Byline","Logo","props","byline","restProps"],"mappings":"oPAoBA,MAAMA,EAAW,CAAC,CAChB,KAAAC,EAAO,IACP,MAAAC,EAAQ,QACR,UAAAC,EAAY,GACZ,OAAAC,CACF,IAMGC,EAAA,cAAA,MAAA,CACC,MAAM,6BACN,MAAOJ,EACP,KAAM,MACN,kBAAgB,aAChB,QAAQ,cACR,UAAAE,EACA,cAAaC,EACb,mBAAkBE,EAAY,IAAA,EAE7BD,EAAA,cAAA,QAAA,CAAM,GAAI,YAAA,EAAc,YAAU,EAClCA,EAAA,cAAA,IAAA,CAAE,KAAME,EAASL,EAAO,GAAG,CAAA,EACzBG,EAAA,cAAA,OAAA,CAAK,EAAE,+pDAAA,CAAgqD,CAC1qD,CACF,EAGIG,EAAS,CAAC,CACd,KAAAP,EAAO,IACP,MAAAC,EAAQ,QACR,UAAAC,EAAY,GACZ,OAAAC,CACF,IAMGC,EAAA,cAAA,MAAA,CACC,MAAM,6BACN,MAAOJ,EACP,KAAM,MACN,kBAAgB,aAChB,QAAQ,YACR,UAAAE,EACA,cAAaC,CAAA,EAEZC,EAAA,cAAA,QAAA,CAAM,GAAI,YAAA,EAAc,YAAU,EAClCA,EAAA,cAAA,IAAA,CAAE,KAAME,EAASL,EAAO,GAAG,CAAA,EACzBG,EAAA,cAAA,OAAA,CAAK,EAAE,uxCAAA,CAAwxC,CAClyC,CACF,EAGF,SAASI,EAAKC,EAA+B,CAC3C,KAAM,CAAE,OAAAC,EAAS,MAAUC,CAAA,EAAcF,EACzC,OAAOC,EAAUN,EAAA,cAAAG,EAAA,CAAQ,GAAGI,CAAA,CAAW,EAAMP,EAAA,cAAAL,EAAA,CAAU,GAAGY,CAAA,CAAW,CACvE"}
@@ -1 +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,uFAkMT,CAAC;AAEH,eAAe,KAAK,CAAC"}
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"}
@@ -143,6 +143,7 @@
143
143
  }
144
144
 
145
145
  &__details-btn {
146
+ align-self: flex-start;
146
147
  @media (min-width: map-get($grid-breakpoints, lg)) {
147
148
  align-self: flex-end;
148
149
  }
@@ -235,3 +235,26 @@
235
235
  background-color: $cherry600;
236
236
  }
237
237
  }
238
+ /******** RESET *********/
239
+ @mixin reset-radio-button() {
240
+ border: 0;
241
+ clip: rect(0 0 0 0);
242
+ height: 1px;
243
+ margin: -1px;
244
+ overflow: hidden;
245
+ padding: 0;
246
+ position: absolute;
247
+ width: 1px;
248
+
249
+ & + label {
250
+ cursor: pointer;
251
+ display: block;
252
+ font-size: 18px;
253
+ font-weight: 400;
254
+ margin: 0;
255
+ word-break: break-word;
256
+ -webkit-hyphens: auto;
257
+ -ms-hyphens: auto;
258
+ hyphens: auto;
259
+ }
260
+ }
@@ -18,8 +18,7 @@
18
18
  }
19
19
 
20
20
  &__track {
21
- height: 2px;
22
- background-color: $black;
21
+ border-top: 2px solid $black;
23
22
  width: 100%;
24
23
  position: relative;
25
24
  top: 1rem;
@@ -1 +1 @@
1
- {"version":3,"file":"TagList.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/TagList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,iBAAiB;IACzB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAMxC,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"TagList.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/TagList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,iBAAiB;IACzB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAQxC,CAAC;AAEF,eAAe,OAAO,CAAC"}
@@ -1,2 +1,2 @@
1
- import s from"react";import e from"./styles.module.scss";import{AnalyticsId as i}from"../../constants.js";const d=({children:t,testId:a})=>s.createElement("div",{className:e["tag-list"],"data-testid":a,"data-analyticsid":i.TagList},t);export{d as default};
1
+ import t from"react";import a from"./styles.module.scss";import{AnalyticsId as l}from"../../constants.js";const o=({children:e,testId:s})=>t.createElement("ul",{className:a["tag-list"],"data-testid":s,"data-analyticsid":l.TagList},t.Children.map(e,i=>t.createElement("li",{className:a["tag-list__item"]},i)));export{o as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/TagList/TagList.tsx"],"sourcesContent":["import React from 'react';\n\nimport styles from './styles.module.scss';\n\nimport { AnalyticsId } from '../../constants';\n\ninterface TagListPropsProps {\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n return (\n <div className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n {children}\n </div>\n );\n};\n\nexport default TagList;\n"],"names":["TagList","children","testId","React","styles","AnalyticsId"],"mappings":"0GAWA,MAAMA,EAAuC,CAAC,CAAE,SAAAC,EAAU,OAAAC,KAErDC,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,YAAa,cAAaF,EAAQ,mBAAkBG,EAAY,OAAA,EACpFJ,CACH"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/TagList/TagList.tsx"],"sourcesContent":["import React from 'react';\n\nimport styles from './styles.module.scss';\n\nimport { AnalyticsId } from '../../constants';\n\ninterface TagListPropsProps {\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n return (\n <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n {React.Children.map(children, child => (\n <li className={styles['tag-list__item']}>{child}</li>\n ))}\n </ul>\n );\n};\n\nexport default TagList;\n"],"names":["TagList","children","testId","React","styles","AnalyticsId","child"],"mappings":"0GAWA,MAAMA,EAAuC,CAAC,CAAE,SAAAC,EAAU,OAAAC,KAErDC,EAAA,cAAA,KAAA,CAAG,UAAWC,EAAO,YAAa,cAAaF,EAAQ,mBAAkBG,EAAY,OAAA,EACnFF,EAAM,SAAS,IAAIF,KACjBE,EAAA,cAAA,KAAA,CAAG,UAAWC,EAAO,iBAAA,EAAoBE,CAAM,CACjD,CACH"}
@@ -3,8 +3,13 @@
3
3
  @import '../../scss/_palette.scss';
4
4
 
5
5
  .tag-list {
6
+ all: unset;
6
7
  display: inline-flex;
7
8
  align-items: center;
8
9
  flex-wrap: wrap;
9
10
  gap: getSpacer(2xs);
11
+
12
+ &__item {
13
+ all: unset;
14
+ }
10
15
  }
@@ -1,5 +1,6 @@
1
1
  export type Styles = {
2
2
  'tag-list': string;
3
+ 'tag-list__item': string;
3
4
  };
4
5
 
5
6
  export type ClassNames = keyof Styles;
@@ -1,2 +1,2 @@
1
- import{useEffect as c}from"react";const d=(o,n,e=["mousedown"])=>{const r=t=>{var u;(u=o.current)!=null&&u.contains(t.target)||n(t)};c(()=>(e.forEach(t=>document.addEventListener(t,r)),()=>{e.forEach(t=>document.removeEventListener(t,r))}),[o,n,e])};export{d as useOutsideEvent};
1
+ import{useEffect as u}from"react";const d=(t,n,o=["mousedown"])=>{const r=e=>{t.current&&!e.composedPath().includes(t.current)&&n(e)};u(()=>(o.forEach(e=>document.addEventListener(e,r)),()=>{o.forEach(e=>document.removeEventListener(e,r))}),[t,n,o])};export{d as useOutsideEvent};
2
2
  //# sourceMappingURL=useOutsideEvent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useOutsideEvent.js","sources":["../../src/hooks/useOutsideEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype OutsideEvents = keyof PickByValue<HTMLElementEventMap, MouseEvent | FocusEvent>;\n\n/**\n * Custom hook for klikk eller fokus utenfor et gitt element\n * @param ref Sjekker om det klikkes utenfor dette elementet\n * @param handleClick Callback-funksjon ved klikk utenfor elementet\n * @param events Type eventer å lytte på. Default: mousedown\n */\nexport const useOutsideEvent = (\n ref: React.RefObject<HTMLElement>,\n handleClick: (event: HTMLElementEventMap[OutsideEvents]) => void,\n events: OutsideEvents[] = ['mousedown']\n): void => {\n const handleOutsideEvent = (event: HTMLElementEventMap[OutsideEvents]): void => {\n if (!ref.current?.contains(event.target as Node)) {\n handleClick(event);\n }\n };\n\n useEffect(() => {\n events.forEach(eventName => document.addEventListener(eventName, handleOutsideEvent));\n\n return () => {\n events.forEach(eventName => document.removeEventListener(eventName, handleOutsideEvent));\n };\n }, [ref, handleClick, events]);\n};\n"],"names":["useOutsideEvent","ref","handleClick","events","handleOutsideEvent","event","_a","useEffect","eventName"],"mappings":"kCAUO,MAAMA,EAAkB,CAC7BC,EACAC,EACAC,EAA0B,CAAC,WAAW,IAC7B,CACH,MAAAC,EAAsBC,GAAoD,QACzEC,EAAAL,EAAI,UAAJ,MAAAK,EAAa,SAASD,EAAM,SAC/BH,EAAYG,CAAK,CACnB,EAGFE,EAAU,KACRJ,EAAO,QAAqBK,GAAA,SAAS,iBAAiBA,EAAWJ,CAAkB,CAAC,EAE7E,IAAM,CACXD,EAAO,QAAqBK,GAAA,SAAS,oBAAoBA,EAAWJ,CAAkB,CAAC,CAAA,GAExF,CAACH,EAAKC,EAAaC,CAAM,CAAC,CAC/B"}
1
+ {"version":3,"file":"useOutsideEvent.js","sources":["../../src/hooks/useOutsideEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype OutsideEvents = keyof PickByValue<HTMLElementEventMap, MouseEvent | FocusEvent>;\n\n/**\n * Custom hook for klikk eller fokus utenfor et gitt element\n * @param ref Sjekker om det klikkes utenfor dette elementet\n * @param handleClick Callback-funksjon ved klikk utenfor elementet\n * @param events Type eventer å lytte på. Default: mousedown\n */\nexport const useOutsideEvent = (\n ref: React.RefObject<HTMLElement>,\n handleClick: (event: HTMLElementEventMap[OutsideEvents]) => void,\n events: OutsideEvents[] = ['mousedown']\n): void => {\n const handleOutsideEvent = (event: HTMLElementEventMap[OutsideEvents]): void => {\n if (ref.current && !event.composedPath().includes(ref.current)) {\n handleClick(event);\n }\n };\n\n useEffect(() => {\n events.forEach(eventName => document.addEventListener(eventName, handleOutsideEvent));\n\n return () => {\n events.forEach(eventName => document.removeEventListener(eventName, handleOutsideEvent));\n };\n }, [ref, handleClick, events]);\n};\n"],"names":["useOutsideEvent","ref","handleClick","events","handleOutsideEvent","event","useEffect","eventName"],"mappings":"kCAUO,MAAMA,EAAkB,CAC7BC,EACAC,EACAC,EAA0B,CAAC,WAAW,IAC7B,CACH,MAAAC,EAAsBC,GAAoD,CAC1EJ,EAAI,SAAW,CAACI,EAAM,eAAe,SAASJ,EAAI,OAAO,GAC3DC,EAAYG,CAAK,CACnB,EAGFC,EAAU,KACRH,EAAO,QAAqBI,GAAA,SAAS,iBAAiBA,EAAWH,CAAkB,CAAC,EAE7E,IAAM,CACXD,EAAO,QAAqBI,GAAA,SAAS,oBAAoBA,EAAWH,CAAkB,CAAC,CAAA,GAExF,CAACH,EAAKC,EAAaC,CAAM,CAAC,CAC/B"}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "type": "module",
4
4
  "description": "The official design system for Helsenorge built with React.",
5
5
  "homepage": "https://helsenorge.design",
6
- "version": "2.11.3",
6
+ "version": "2.12.0",
7
7
  "author": "Helsenorge",
8
8
  "license": "MIT",
9
9
  "peerDependencies": {
@@ -2,6 +2,7 @@ import { AriaAttributes } from 'react';
2
2
  interface AriaLabelAttributesConfig {
3
3
  label?: string;
4
4
  id?: string;
5
+ prefer?: 'id' | 'label';
5
6
  }
6
7
  export declare type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;
7
8
  export declare const getAriaLabelAttributes: (config: AriaLabelAttributesConfig) => AriaLabelAttributes | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../src/utils/accessibility.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,yBAAyB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,iBAAiB,CAAC,CAAC;AAEzF,eAAO,MAAM,sBAAsB,WAAY,yBAAyB,KAAG,mBAAmB,GAAG,SAahG,CAAC"}
1
+ {"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../src/utils/accessibility.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,yBAAyB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC;CACzB;AAED,oBAAY,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,iBAAiB,CAAC,CAAC;AAEzF,eAAO,MAAM,sBAAsB,WAAY,yBAAyB,KAAG,mBAAmB,GAAG,SAoBhG,CAAC"}
@@ -1,2 +1,2 @@
1
- const t=r=>{const{label:e,id:a}=r;if(a)return{"aria-labelledby":a};if(e)return{"aria-label":e}};export{t as getAriaLabelAttributes};
1
+ const l=a=>{const{label:r,id:e,prefer:i="id"}=a;if(e&&i==="id")return{"aria-labelledby":e};if(r)return{"aria-label":r};if(e)return{"aria-labelledby":e}};export{l as getAriaLabelAttributes};
2
2
  //# sourceMappingURL=accessibility.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"accessibility.js","sources":["../../src/utils/accessibility.ts"],"sourcesContent":["import { AriaAttributes } from 'react';\n\ninterface AriaLabelAttributesConfig {\n label?: string;\n id?: string;\n}\n\nexport type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;\n\nexport const getAriaLabelAttributes = (config: AriaLabelAttributesConfig): AriaLabelAttributes | undefined => {\n const { label, id } = config;\n\n if (id) {\n return {\n 'aria-labelledby': id,\n };\n }\n if (label) {\n return {\n 'aria-label': label,\n };\n }\n};\n"],"names":["getAriaLabelAttributes","config","label","id"],"mappings":"AASa,MAAAA,EAA0BC,GAAuE,CACtG,KAAA,CAAE,MAAAC,EAAO,GAAAC,CAAO,EAAAF,EAEtB,GAAIE,EACK,MAAA,CACL,kBAAmBA,CAAA,EAGvB,GAAID,EACK,MAAA,CACL,aAAcA,CAAA,CAGpB"}
1
+ {"version":3,"file":"accessibility.js","sources":["../../src/utils/accessibility.ts"],"sourcesContent":["import { AriaAttributes } from 'react';\n\ninterface AriaLabelAttributesConfig {\n label?: string;\n id?: string;\n prefer?: 'id' | 'label';\n}\n\nexport type AriaLabelAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;\n\nexport const getAriaLabelAttributes = (config: AriaLabelAttributesConfig): AriaLabelAttributes | undefined => {\n const { label, id, prefer = 'id' } = config;\n\n if (id && prefer === 'id') {\n return {\n 'aria-labelledby': id,\n };\n }\n\n if (label) {\n return {\n 'aria-label': label,\n };\n }\n\n if (id) {\n return {\n 'aria-labelledby': id,\n };\n }\n};\n"],"names":["getAriaLabelAttributes","config","label","id","prefer"],"mappings":"AAUa,MAAAA,EAA0BC,GAAuE,CAC5G,KAAM,CAAE,MAAAC,EAAO,GAAAC,EAAI,OAAAC,EAAS,MAASH,EAEjC,GAAAE,GAAMC,IAAW,KACZ,MAAA,CACL,kBAAmBD,CAAA,EAIvB,GAAID,EACK,MAAA,CACL,aAAcA,CAAA,EAIlB,GAAIC,EACK,MAAA,CACL,kBAAmBA,CAAA,CAGzB"}