@helsenorge/designsystem-react 2.11.2 → 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.
Files changed (44) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/ListHeader.js +1 -1
  3. package/ListHeader.js.map +1 -1
  4. package/ListHeaderText.js +1 -1
  5. package/ListHeaderText.js.map +1 -1
  6. package/Panel.js +1 -1
  7. package/Panel.js.map +1 -1
  8. package/components/Duolist/Duolist.d.ts.map +1 -1
  9. package/components/Duolist/index.js +1 -1
  10. package/components/Duolist/index.js.map +1 -1
  11. package/components/ExpanderList/ExpanderList.d.ts +3 -0
  12. package/components/ExpanderList/ExpanderList.d.ts.map +1 -1
  13. package/components/ExpanderList/index.js +1 -1
  14. package/components/ExpanderList/index.js.map +1 -1
  15. package/components/LinkList/index.js +1 -1
  16. package/components/LinkList/index.js.map +1 -1
  17. package/components/ListHeader/ListHeader.d.ts +4 -1
  18. package/components/ListHeader/ListHeader.d.ts.map +1 -1
  19. package/components/ListHeader/ListHeaderText/ListHeaderText.d.ts +3 -0
  20. package/components/ListHeader/ListHeaderText/ListHeaderText.d.ts.map +1 -1
  21. package/components/ListHeader/ListHeaderText/componentdata.json +1 -1
  22. package/components/ListHeader/componentdata.json +1 -1
  23. package/components/ListHeader/styles.module.scss +7 -1
  24. package/components/ListHeader/styles.module.scss.d.ts +1 -0
  25. package/components/Logo/Logo.d.ts +1 -2
  26. package/components/Logo/Logo.d.ts.map +1 -1
  27. package/components/Logo/componentdata.json +1 -1
  28. package/components/Logo/index.js.map +1 -1
  29. package/components/Panel/Panel.d.ts.map +1 -1
  30. package/components/Panel/styles.module.scss +1 -0
  31. package/components/RadioButton/styles.module.scss +23 -0
  32. package/components/Slider/styles.module.scss +1 -2
  33. package/components/TagList/TagList.d.ts.map +1 -1
  34. package/components/TagList/index.js +1 -1
  35. package/components/TagList/index.js.map +1 -1
  36. package/components/TagList/styles.module.scss +5 -0
  37. package/components/TagList/styles.module.scss.d.ts +1 -0
  38. package/hooks/useOutsideEvent.js +1 -1
  39. package/hooks/useOutsideEvent.js.map +1 -1
  40. package/package.json +1 -1
  41. package/utils/accessibility.d.ts +1 -0
  42. package/utils/accessibility.d.ts.map +1 -1
  43. package/utils/accessibility.js +1 -1
  44. package/utils/accessibility.js.map +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
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
+
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)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * endrer kontrastfarge ([7aae4c3](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/7aae4c3239afe9187d7515ca2d8bd9e5f9808425)), closes [#290655](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/290655)
14
+ * listheader mapping tar hensyn til undefined recursive children ([429e51b](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/429e51bf7eebbafeef19ca5d76c72957ab9ab402)), closes [#293178](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/293178)
15
+
1
16
  ## [2.11.1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.10.1&targetVersion=GTv2.11.1) (2023-01-06)
2
17
 
3
18
 
package/ListHeader.js CHANGED
@@ -1,2 +1,2 @@
1
- import s from"react";import m from"classnames";import{A as I}from"./Avatar.js";import{B as L}from"./Badge.js";import{L as S}from"./ListHeaderText.js";import e from"./components/ListHeader/styles.module.scss";import{useBreakpoint as T,Breakpoint as A}from"./hooks/useBreakpoint.js";import{Icon as B}from"./components/Icons/Icon.js";import{IconSize as C}from"./constants.js";import{isComponent as R}from"./utils/component.js";const K=(o,p,d,i,l)=>R(o,v)?s.cloneElement(o,{chevronIcon:p,icon:l,isHovered:d,size:i}):o&&s.createElement(v,{chevronIcon:p,icon:l,isHovered:d,size:i},o),u=(o,p=!1)=>{var g,_,t,n;let d,i=[],l,c=[],h=[];s.Children.map(o,r=>{r===null||typeof r>"u"||(r.type===I?d=r:r.type===S?i.push(r):r.type===L?l=r:typeof r=="string"?c.push(r):h.push(r))});const a=d!==void 0||i.length>0||l!==void 0&&c.length>0,f=h.length===0||typeof((_=(g=h[0])==null?void 0:g.props)==null?void 0:_.children)>"u";return p||a||f?{avatarChild:d,listHeaderTextChildren:i,badgeChild:l,stringChildren:c,remainingChildren:h}:u((n=(t=h[0])==null?void 0:t.props)==null?void 0:n.children,!0)},v=s.forwardRef((o,p)=>{const{className:d="",chevronIcon:i,children:l,icon:c,isHovered:h,size:a,testId:f}=o,g=T(),_=a!=="small"&&!!(i||c),t=typeof l=="string",n=u(l),r=n.avatarChild||n.listHeaderTextChildren&&n.listHeaderTextChildren.length>0||n.remainingChildren&&n.remainingChildren.length>0,b=m(e["list-header"],{[e["list-header--for-element-content"]]:!t,[e["list-header--top-align-content"]]:r},d),E=m(e["list-header__badge"],{[e["list-header__badge--for-string-content"]]:t,[e["list-header__badge--right"]]:!t,[e["list-header__badge--"+a]]:!t&&a}),y=m(e["list-header__chevron"],{[e["list-header__chevron--for-string-content"]]:t,[e["list-header__chevron--right"]]:!n.badgeChild,[e["list-header__chevron--"+a]]:!t&&a}),N=m(e["list-header__content"],{[e["list-header__content--string"]]:t,[e["list-header__content--element"]]:!t,[e["list-header__content--spacing"]]:!n.avatarChild&&!c}),x=m(e["list-header__icon"],{[e["list-header__icon--for-string-content"]]:t,[e["list-header__icon--for-element-content"]]:!t,[e["list-header__icon--for-element-content--"+a]]:!t&&a}),H=m(e["list-header__avatar"],{[e["list-header__avatar--for-string-content"]]:t,[e["list-header__avatar--for-element-content"]]:!t,[e["list-header__avatar--for-element-content--"+a]]:!t&&a});return s.createElement("div",{"data-testid":f,className:b},_&&c&&s.createElement("span",{className:x},s.cloneElement(c,{size:g===A.xs?C.XSmall:C.Small,isHovered:h})),a!=="small"&&n.avatarChild&&s.createElement("span",{className:H},n.avatarChild),s.createElement("span",{className:N},n.listHeaderTextChildren,n.stringChildren,n.remainingChildren),n.badgeChild&&s.createElement("span",{className:E},n.badgeChild),_&&i&&s.createElement("span",{className:y},s.createElement(B,{svgIcon:i,isHovered:h,size:C.XSmall})))});export{v as L,u as m,K as r};
1
+ import r from"react";import h from"classnames";import{A as S}from"./Avatar.js";import{B as T}from"./Badge.js";import{L as k}from"./ListHeaderText.js";import t from"./components/ListHeader/styles.module.scss";import{useBreakpoint as A,Breakpoint as B}from"./hooks/useBreakpoint.js";import{Icon as R}from"./components/Icons/Icon.js";import{IconSize as f}from"./constants.js";import{isComponent as z}from"./utils/component.js";const O=(o,p,d,c,s,l)=>z(o,v)?r.cloneElement(o,{chevronIcon:d,icon:l,isHovered:c,size:s}):o&&r.createElement(v,{titleHtmlMarkup:p,chevronIcon:d,icon:l,isHovered:c,size:s},o),u=(o,p=!1)=>{var g,C,m,n;let d,c=[],s,l=[],i=[];r.Children.map(o,e=>{e===null||typeof e>"u"||(e.type===S?d=e:e.type===k?c.push(e):e.type===T?s=e:typeof e=="string"?l.push(e):i.push(e))});const _=d!==void 0||c.length>0||s!==void 0&&l.length>0,a=i.length===0||typeof((C=(g=i[0])==null?void 0:g.props)==null?void 0:C.children)>"u";return p||_||a?{avatarChild:d,listHeaderTextChildren:c,badgeChild:s,stringChildren:l,remainingChildren:i}:u((n=(m=i[0])==null?void 0:m.props)==null?void 0:n.children,!0)},v=r.forwardRef((o,p)=>{const{className:d="",titleHtmlMarkup:c="h2",chevronIcon:s,children:l,icon:i,isHovered:_,size:a,testId:g}=o,C=A(),m=a!=="small"&&!!(s||i),n=typeof l=="string",e=u(l),b=e.avatarChild||e.listHeaderTextChildren&&e.listHeaderTextChildren.length>0||e.remainingChildren&&e.remainingChildren.length>0,E=h(t["list-header"],{[t["list-header--for-element-content"]]:!n,[t["list-header--top-align-content"]]:b},d),N=h(t["list-header__badge"],{[t["list-header__badge--for-string-content"]]:n,[t["list-header__badge--right"]]:!n,[t["list-header__badge--"+a]]:!n&&a}),y=h(t["list-header__chevron"],{[t["list-header__chevron--for-string-content"]]:n,[t["list-header__chevron--right"]]:!e.badgeChild,[t["list-header__chevron--"+a]]:!n&&a}),H=h(t["list-header__content"],{[t["list-header__content--string"]]:n,[t["list-header__content--element"]]:!n,[t["list-header__content--spacing"]]:!e.avatarChild&&!i}),x=h(t["list-header__icon"],{[t["list-header__icon--for-string-content"]]:n,[t["list-header__icon--for-element-content"]]:!n,[t["list-header__icon--for-element-content--"+a]]:!n&&a}),I=h(t["list-header__avatar"],{[t["list-header__avatar--for-string-content"]]:n,[t["list-header__avatar--for-element-content"]]:!n,[t["list-header__avatar--for-element-content--"+a]]:!n&&a}),L=c;return r.createElement("div",{"data-testid":g,className:E},m&&i&&r.createElement("span",{className:x},r.cloneElement(i,{size:C===B.xs?f.XSmall:f.Small,isHovered:_})),a!=="small"&&e.avatarChild&&r.createElement("span",{className:I},e.avatarChild),r.createElement("div",{className:H},e.listHeaderTextChildren,!!e.stringChildren.length&&r.createElement(L,{className:t["list-header__title"]},e.stringChildren),e.remainingChildren),e.badgeChild&&r.createElement("span",{className:N},e.badgeChild),m&&s&&r.createElement("span",{className:y},r.createElement(R,{svgIcon:s,isHovered:_,size:f.XSmall})))});export{v as L,u as m,O as r};
2
2
  //# sourceMappingURL=ListHeader.js.map
package/ListHeader.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport Avatar, { AvatarProps, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\n\nimport styles from './styles.module.scss';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { isComponent } from '../../utils/component';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n Avatar?: AvatarType;\n Badge?: BadgeType;\n ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n element: React.ReactNode,\n chevronIcon: SvgIcon,\n isHovered: boolean,\n size: ListHeaderSize,\n icon?: React.ReactElement\n) => {\n return isComponent<ListHeaderProps>(element, ListHeader)\n ? React.cloneElement(element as React.ReactElement<ListHeaderProps>, {\n chevronIcon: chevronIcon,\n icon: icon,\n isHovered: isHovered,\n size: size,\n })\n : element && (\n <ListHeader chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n {element}\n </ListHeader>\n );\n};\n\nexport interface ListHeaderProps {\n /** Adds custom classes to the ListHeader element. */\n className?: string;\n /** Chevron to render inside of the ListHeader */\n chevronIcon?: SvgIcon;\n /** Children to be rendered inside of ListHeader */\n children: React.ReactNode;\n /** icon to be rendered inside of ListHeader */\n icon?: React.ReactElement;\n /** whether or not the parent is hovered */\n isHovered?: boolean;\n /** Changes size of the ListHeader. */\n size?: ListHeaderSize;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const mapChildren = (\n children: React.ReactNode,\n isJsxChild = false\n): {\n avatarChild?: AvatarProps;\n listHeaderTextChildren: Array<ListHeaderTextProps>;\n badgeChild?: BadgeProps;\n stringChildren: Array<string>;\n remainingChildren: Array<any>;\n} => {\n let avatarChild: AvatarProps | undefined = undefined;\n let listHeaderTextChildren: Array<ListHeaderTextProps> = [];\n let badgeChild: BadgeProps | undefined = undefined;\n let stringChildren: Array<string> = [];\n let remainingChildren: Array<any> = [];\n\n React.Children.map(children, (child: React.ReactNode | React.ReactElement<string>) => {\n if (child === null || typeof child === 'undefined') return;\n if ((child as React.ReactElement<AvatarType>).type === Avatar) {\n avatarChild = child as AvatarProps;\n } else if ((child as React.ReactElement<ListHeaderTextType>).type === ListHeaderText) {\n listHeaderTextChildren.push(child as ListHeaderTextProps);\n } else if ((child as React.ReactElement<BadgeType>).type === Badge) {\n badgeChild = child as BadgeProps;\n } else if (typeof child === 'string') {\n stringChildren.push(child);\n } else {\n remainingChildren.push(child);\n }\n });\n\n // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n const hasSpecialChildren =\n avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n const noRemainingRecursiveChildren = remainingChildren.length === 0 || typeof remainingChildren[0]?.props?.children === 'undefined';\n\n return isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren\n ? { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren }\n : mapChildren(remainingChildren[0]?.props?.children, true);\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n const { className = '', chevronIcon, children, icon, isHovered, size, testId } = props;\n const breakpoint = useBreakpoint();\n const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n const contentIsString = typeof children === 'string';\n const mappedChildren = mapChildren(children);\n const topAlignContent =\n mappedChildren.avatarChild ||\n (mappedChildren.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n (mappedChildren.remainingChildren && mappedChildren.remainingChildren.length > 0);\n\n const listLabelClasses = cn(\n styles['list-header'],\n {\n [styles['list-header--for-element-content']]: !contentIsString,\n [styles['list-header--top-align-content']]: topAlignContent,\n },\n className\n );\n const badgeClasses = cn(styles['list-header__badge'], {\n [styles['list-header__badge--for-string-content']]: contentIsString,\n [styles['list-header__badge--right']]: !contentIsString,\n [styles['list-header__badge--' + size]]: !contentIsString && size,\n });\n const chevronClasses = cn(styles['list-header__chevron'], {\n [styles['list-header__chevron--for-string-content']]: contentIsString,\n [styles['list-header__chevron--right']]: !mappedChildren.badgeChild,\n [styles['list-header__chevron--' + size]]: !contentIsString && size,\n });\n const contentClasses = cn(styles['list-header__content'], {\n [styles['list-header__content--string']]: contentIsString,\n [styles['list-header__content--element']]: !contentIsString,\n [styles['list-header__content--spacing']]: !mappedChildren.avatarChild && !icon,\n });\n const iconClasses = cn(styles['list-header__icon'], {\n [styles['list-header__icon--for-string-content']]: contentIsString,\n [styles['list-header__icon--for-element-content']]: !contentIsString,\n [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n });\n const avatarClasses = cn(styles['list-header__avatar'], {\n [styles['list-header__avatar--for-string-content']]: contentIsString,\n [styles['list-header__avatar--for-element-content']]: !contentIsString,\n [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n });\n\n return (\n <div data-testid={testId} className={listLabelClasses}>\n {showChevronAndIcon && icon && (\n <span className={iconClasses}>\n {React.cloneElement(icon, {\n size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n isHovered,\n })}\n </span>\n )}\n {size !== 'small' && mappedChildren.avatarChild && <span className={avatarClasses}>{mappedChildren.avatarChild}</span>}\n <span className={contentClasses}>\n {mappedChildren.listHeaderTextChildren}\n {mappedChildren.stringChildren}\n {mappedChildren.remainingChildren}\n </span>\n {mappedChildren.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n {showChevronAndIcon && chevronIcon && (\n <span className={chevronClasses}>\n <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n </span>\n )}\n </div>\n );\n});\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","chevronIcon","isHovered","size","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","listHeaderTextChildren","badgeChild","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","Breakpoint","IconSize","Icon"],"mappings":"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"}
1
+ {"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport Avatar, { AvatarProps, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\n\nimport styles from './styles.module.scss';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { isComponent } from '../../utils/component';\nimport { TitleTags } from '../Title';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n Avatar?: AvatarType;\n Badge?: BadgeType;\n ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n element: React.ReactNode,\n titleHtmlMarkup: TitleTags,\n chevronIcon: SvgIcon,\n isHovered: boolean,\n size: ListHeaderSize,\n icon?: React.ReactElement\n) => {\n return isComponent<ListHeaderProps>(element, ListHeader)\n ? React.cloneElement(element as React.ReactElement<ListHeaderProps>, {\n chevronIcon: chevronIcon,\n icon: icon,\n isHovered: isHovered,\n size: size,\n })\n : element && (\n <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n {element}\n </ListHeader>\n );\n};\n\nexport interface ListHeaderProps {\n /** Adds custom classes to the ListHeader element. */\n className?: string;\n /** Chevron to render inside of the ListHeader */\n chevronIcon?: SvgIcon;\n /** Children to be rendered inside of ListHeader */\n children: React.ReactNode;\n /** Changes the underlying element of the title. Default: h2*/\n titleHtmlMarkup?: TitleTags;\n /** icon to be rendered inside of ListHeader */\n icon?: React.ReactElement;\n /** whether or not the parent is hovered */\n isHovered?: boolean;\n /** Changes size of the ListHeader. */\n size?: ListHeaderSize;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const mapChildren = (\n children: React.ReactNode,\n isJsxChild = false\n): {\n avatarChild?: AvatarProps;\n listHeaderTextChildren: Array<ListHeaderTextProps>;\n badgeChild?: BadgeProps;\n stringChildren: Array<string>;\n remainingChildren: Array<any>;\n} => {\n let avatarChild: AvatarProps | undefined = undefined;\n let listHeaderTextChildren: Array<ListHeaderTextProps> = [];\n let badgeChild: BadgeProps | undefined = undefined;\n let stringChildren: Array<string> = [];\n let remainingChildren: Array<any> = [];\n\n React.Children.map(children, (child: React.ReactNode | React.ReactElement<string>) => {\n if (child === null || typeof child === 'undefined') return;\n if ((child as React.ReactElement<AvatarType>).type === Avatar) {\n avatarChild = child as AvatarProps;\n } else if ((child as React.ReactElement<ListHeaderTextType>).type === ListHeaderText) {\n listHeaderTextChildren.push(child as ListHeaderTextProps);\n } else if ((child as React.ReactElement<BadgeType>).type === Badge) {\n badgeChild = child as BadgeProps;\n } else if (typeof child === 'string') {\n stringChildren.push(child);\n } else {\n remainingChildren.push(child);\n }\n });\n\n // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n const hasSpecialChildren =\n avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n const noRemainingRecursiveChildren = remainingChildren.length === 0 || typeof remainingChildren[0]?.props?.children === 'undefined';\n\n return isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren\n ? { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren }\n : mapChildren(remainingChildren[0]?.props?.children, true);\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n const breakpoint = useBreakpoint();\n const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n const contentIsString = typeof children === 'string';\n const mappedChildren = mapChildren(children);\n const topAlignContent =\n mappedChildren.avatarChild ||\n (mappedChildren.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n (mappedChildren.remainingChildren && mappedChildren.remainingChildren.length > 0);\n\n const listLabelClasses = cn(\n styles['list-header'],\n {\n [styles['list-header--for-element-content']]: !contentIsString,\n [styles['list-header--top-align-content']]: topAlignContent,\n },\n className\n );\n const badgeClasses = cn(styles['list-header__badge'], {\n [styles['list-header__badge--for-string-content']]: contentIsString,\n [styles['list-header__badge--right']]: !contentIsString,\n [styles['list-header__badge--' + size]]: !contentIsString && size,\n });\n const chevronClasses = cn(styles['list-header__chevron'], {\n [styles['list-header__chevron--for-string-content']]: contentIsString,\n [styles['list-header__chevron--right']]: !mappedChildren.badgeChild,\n [styles['list-header__chevron--' + size]]: !contentIsString && size,\n });\n const contentClasses = cn(styles['list-header__content'], {\n [styles['list-header__content--string']]: contentIsString,\n [styles['list-header__content--element']]: !contentIsString,\n [styles['list-header__content--spacing']]: !mappedChildren.avatarChild && !icon,\n });\n const iconClasses = cn(styles['list-header__icon'], {\n [styles['list-header__icon--for-string-content']]: contentIsString,\n [styles['list-header__icon--for-element-content']]: !contentIsString,\n [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n });\n const avatarClasses = cn(styles['list-header__avatar'], {\n [styles['list-header__avatar--for-string-content']]: contentIsString,\n [styles['list-header__avatar--for-element-content']]: !contentIsString,\n [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n });\n const CustomTag = titleHtmlMarkup;\n return (\n <div data-testid={testId} className={listLabelClasses}>\n {showChevronAndIcon && icon && (\n <span className={iconClasses}>\n {React.cloneElement(icon, {\n size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n isHovered,\n })}\n </span>\n )}\n {size !== 'small' && mappedChildren.avatarChild && <span className={avatarClasses}>{mappedChildren.avatarChild}</span>}\n <div className={contentClasses}>\n {mappedChildren.listHeaderTextChildren}\n {!!mappedChildren.stringChildren.length && (\n <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n )}\n {mappedChildren.remainingChildren}\n </div>\n\n {mappedChildren.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n {showChevronAndIcon && chevronIcon && (\n <span className={chevronClasses}>\n <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n </span>\n )}\n </div>\n );\n});\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","chevronIcon","isHovered","size","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","listHeaderTextChildren","badgeChild","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","Icon"],"mappings":"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"}
package/ListHeaderText.js CHANGED
@@ -1,2 +1,2 @@
1
- import e from"react";import s from"classnames";import{S as T}from"./StatusDot.js";import t from"./components/ListHeader/styles.module.scss";const v=e.forwardRef((n,E)=>{const{firstText:m,firstTextEmphasised:p=!1,secondText:a=void 0,secondTextEmphasised:l=!1,subText:c=!1,statusDotVariant:r,className:o="",testId:d}=n,i=s(o,t["text-wrapper"],{[t["text-wrapper--sub-level"]]:c}),x=s({[t["text-wrapper__text--emphasised"]]:p}),f=s({[t["text-wrapper__text--emphasised"]]:l});return e.createElement("span",{"data-testid":d,className:i},r!==void 0&&e.createElement("span",null,e.createElement(T,{text:"",variant:r})),e.createElement("span",null,e.createElement("span",{className:x},m),a&&e.createElement("span",{className:f}," ",a)))});export{v as L};
1
+ import e from"react";import s from"classnames";import{S as u}from"./StatusDot.js";import t from"./components/ListHeader/styles.module.scss";const C=e.forwardRef((m,h)=>{const{firstText:l,firstTextEmphasised:n=!1,secondText:a=void 0,secondTextEmphasised:p=!1,subText:c=!1,statusDotVariant:r,className:o="",testId:i,titleHtmlMarkup:d="span"}=m,x=s(o,t["text-wrapper"],{[t["text-wrapper--sub-level"]]:c}),f=s({[t["text-wrapper__text--emphasised"]]:n}),T=s({[t["text-wrapper__text--emphasised"]]:p}),E=d;return e.createElement("div",{"data-testid":i,className:x},r!==void 0&&e.createElement("span",null,e.createElement(u,{text:"",variant:r})),e.createElement(E,{className:t["list-header__title"]},e.createElement("span",{className:f},l),a&&e.createElement("span",{className:T},a)))});export{C as L};
2
2
  //# sourceMappingURL=ListHeaderText.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ListHeaderText.js","sources":["../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\n\nimport styles from '../styles.module.scss';\n\nexport type ListHeaderTextType = React.ForwardRefExoticComponent<ListHeaderTextProps & React.RefAttributes<HTMLLIElement>>;\n\nexport interface ListHeaderTextProps {\n /** The first text in the ListHeaderText Component */\n firstText: string;\n /** Will style the first text as bold */\n firstTextEmphasised?: boolean;\n /** The second text in the ListHeaderText Component */\n secondText?: string;\n /** Will style the second text as bold */\n secondTextEmphasised?: boolean;\n /** Whether or not this ListHeaderText is a sub text */\n subText?: boolean;\n /** Decides the variant for the StatusDot */\n statusDotVariant?: StatusDotVariant;\n /** Adds custom classes to the ListHeaderText component. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const ListHeaderText: ListHeaderTextType = React.forwardRef((props: ListHeaderTextProps, ref: React.Ref<HTMLLIElement>) => {\n const {\n firstText,\n firstTextEmphasised = false,\n secondText = undefined,\n secondTextEmphasised = false,\n subText = false,\n statusDotVariant,\n className = '',\n testId,\n } = props;\n\n const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n [styles['text-wrapper--sub-level']]: subText,\n });\n const firstHeaderTextSegmentClasses = cn({\n [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n });\n const secondHeaderTextSegmentClasses = cn({\n [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n });\n\n return (\n <span data-testid={testId} className={headerTextWrapperClasses}>\n {statusDotVariant !== undefined && (\n <span>\n <StatusDot text={''} variant={statusDotVariant} />\n </span>\n )}\n <span>\n <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n {secondText && <span className={secondHeaderTextSegmentClasses}> {secondText}</span>}\n </span>\n </span>\n );\n});\n\nexport default ListHeaderText;\n"],"names":["ListHeaderText","React","props","ref","firstText","firstTextEmphasised","secondText","secondTextEmphasised","subText","statusDotVariant","className","testId","headerTextWrapperClasses","cn","styles","firstHeaderTextSegmentClasses","secondHeaderTextSegmentClasses","StatusDot"],"mappings":"4IA4BO,MAAMA,EAAqCC,EAAM,WAAW,CAACC,EAA4BC,IAAkC,CAC1H,KAAA,CACJ,UAAAC,EACA,oBAAAC,EAAsB,GACtB,WAAAC,EAAa,OACb,qBAAAC,EAAuB,GACvB,QAAAC,EAAU,GACV,iBAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,CACE,EAAAT,EAEEU,EAA2BC,EAAGH,EAAWI,EAAO,gBAAiB,CACrE,CAACA,EAAO,4BAA6BN,CAAA,CACtC,EACKO,EAAgCF,EAAG,CACvC,CAACC,EAAO,mCAAoCT,CAAA,CAC7C,EACKW,EAAiCH,EAAG,CACxC,CAACC,EAAO,mCAAoCP,CAAA,CAC7C,EAED,OACGN,EAAA,cAAA,OAAA,CAAK,cAAaU,EAAQ,UAAWC,CAAA,EACnCH,IAAqB,QACnBR,EAAA,cAAA,OAAA,KACEA,EAAA,cAAAgB,EAAA,CAAU,KAAM,GAAI,QAASR,CAAA,CAAkB,CAClD,EAEDR,EAAA,cAAA,OAAA,KACEA,EAAA,cAAA,OAAA,CAAK,UAAWc,CAAgC,EAAAX,CAAU,EAC1DE,GAAeL,EAAA,cAAA,OAAA,CAAK,UAAWe,CAAA,EAAgC,IAAEV,CAAW,CAC/E,CACF,CAEJ,CAAC"}
1
+ {"version":3,"file":"ListHeaderText.js","sources":["../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\n\nimport styles from '../styles.module.scss';\nimport { TitleTags } from '../../Title';\n\nexport type ListHeaderTextType = React.ForwardRefExoticComponent<ListHeaderTextProps & React.RefAttributes<HTMLLIElement>>;\n\nexport interface ListHeaderTextProps {\n /** The first text in the ListHeaderText Component */\n firstText: string;\n /** Will style the first text as bold */\n firstTextEmphasised?: boolean;\n /** The second text in the ListHeaderText Component */\n secondText?: string;\n /** Will style the second text as bold */\n secondTextEmphasised?: boolean;\n /** Whether or not this ListHeaderText is a sub text */\n subText?: boolean;\n /** Decides the variant for the StatusDot */\n statusDotVariant?: StatusDotVariant;\n /** Adds custom classes to the ListHeaderText component. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Changes the underlying element of the title. Default: span*/\n titleHtmlMarkup?: TitleTags;\n}\n\nexport const ListHeaderText: ListHeaderTextType = React.forwardRef((props: ListHeaderTextProps, ref: React.Ref<HTMLLIElement>) => {\n const {\n firstText,\n firstTextEmphasised = false,\n secondText = undefined,\n secondTextEmphasised = false,\n subText = false,\n statusDotVariant,\n className = '',\n testId,\n titleHtmlMarkup = 'span',\n } = props;\n\n const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n [styles['text-wrapper--sub-level']]: subText,\n });\n const firstHeaderTextSegmentClasses = cn({\n [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n });\n const secondHeaderTextSegmentClasses = cn({\n [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n });\n const CustomTag = titleHtmlMarkup;\n\n return (\n <div data-testid={testId} className={headerTextWrapperClasses}>\n {statusDotVariant !== undefined && (\n <span>\n <StatusDot text={''} variant={statusDotVariant} />\n </span>\n )}\n <CustomTag className={styles['list-header__title']}>\n <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n </CustomTag>\n </div>\n );\n});\n\nexport default ListHeaderText;\n"],"names":["ListHeaderText","React","props","ref","firstText","firstTextEmphasised","secondText","secondTextEmphasised","subText","statusDotVariant","className","testId","titleHtmlMarkup","headerTextWrapperClasses","cn","styles","firstHeaderTextSegmentClasses","secondHeaderTextSegmentClasses","CustomTag","StatusDot"],"mappings":"4IA+BO,MAAMA,EAAqCC,EAAM,WAAW,CAACC,EAA4BC,IAAkC,CAC1H,KAAA,CACJ,UAAAC,EACA,oBAAAC,EAAsB,GACtB,WAAAC,EAAa,OACb,qBAAAC,EAAuB,GACvB,QAAAC,EAAU,GACV,iBAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,EACA,gBAAAC,EAAkB,MAChB,EAAAV,EAEEW,EAA2BC,EAAGJ,EAAWK,EAAO,gBAAiB,CACrE,CAACA,EAAO,4BAA6BP,CAAA,CACtC,EACKQ,EAAgCF,EAAG,CACvC,CAACC,EAAO,mCAAoCV,CAAA,CAC7C,EACKY,EAAiCH,EAAG,CACxC,CAACC,EAAO,mCAAoCR,CAAA,CAC7C,EACKW,EAAYN,EAElB,OACGX,EAAA,cAAA,MAAA,CAAI,cAAaU,EAAQ,UAAWE,CAAA,EAClCJ,IAAqB,QACnBR,EAAA,cAAA,OAAA,KACEA,EAAA,cAAAkB,EAAA,CAAU,KAAM,GAAI,QAASV,CAAkB,CAAA,CAClD,EAEDR,EAAA,cAAAiB,EAAA,CAAU,UAAWH,EAAO,qBAAA,EAC1Bd,EAAA,cAAA,OAAA,CAAK,UAAWe,CAAgC,EAAAZ,CAAU,EAC1DE,GAAeL,EAAA,cAAA,OAAA,CAAK,UAAWgB,CAAA,EAAiCX,CAAW,CAC9E,CACF,CAEJ,CAAC"}
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,7 @@
1
1
  import React from 'react';
2
2
  import { PaletteNames } from '../../theme/palette';
3
3
  import { ListHeaderType } from '../ListHeader/ListHeader';
4
+ import { TitleTags } from '../Title';
4
5
  export declare type ExpanderListColors = PaletteNames;
5
6
  export interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {
6
7
  ListHeader?: ListHeaderType;
@@ -42,6 +43,8 @@ declare type Modify<T, R> = Omit<T, keyof R> & R;
42
43
  declare type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
43
44
  id?: string;
44
45
  title: JSX.Element | string;
46
+ /** Changes the underlying element of the title. Default: span*/
47
+ titleHtmlMarkup?: TitleTags;
45
48
  children: React.ReactNode;
46
49
  className?: string;
47
50
  color?: ExpanderListColors;
@@ -1 +1 @@
1
- {"version":3,"file":"ExpanderList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAanD,OAAO,EAAE,cAAc,EAAoB,MAAM,0BAA0B,CAAC;AAI5E,oBAAY,kBAAkB,GAAG,YAAY,CAAC;AAC9C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACvH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtI,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,oBAAY,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9D,UAAU,iBAAiB;IACzB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,qGAAqG;IACrG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,aAAK,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAEzC,aAAK,aAAa,GAAG,MAAM,CACzB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC;IACE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjF,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CACF,GACC,IAAI,CAAC,iBAAiB,EAAE,0BAA0B,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC;AAsG7E,eAAO,MAAM,YAAY,sBA+FC,CAAC;AAK3B,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"ExpanderList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAanD,OAAO,EAAE,cAAc,EAAoB,MAAM,0BAA0B,CAAC;AAG5E,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,oBAAY,kBAAkB,GAAG,YAAY,CAAC;AAC9C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACvH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtI,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,oBAAY,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9D,UAAU,iBAAiB;IACzB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,qGAAqG;IACrG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,aAAK,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAEzC,aAAK,aAAa,GAAG,MAAM,CACzB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC;IACE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,gEAAgE;IAChE,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjF,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CACF,GACC,IAAI,CAAC,iBAAiB,EAAE,0BAA0B,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC;AAuG7E,eAAO,MAAM,YAAY,sBA+FC,CAAC;AAK3B,eAAe,YAAY,CAAC"}
@@ -1,2 +1,2 @@
1
- import s,{useState as V,useRef as O,useEffect as k}from"react";import{useHover as J}from"../../hooks/useHover.js";import{usePrevious as Z}from"../../hooks/usePrevious.js";import{isElementInViewport as q}from"../../utils/viewport.js";import g from"classnames";import i from"./styles.module.scss";import{AnalyticsId as U,ZIndex as F}from"../../constants.js";import{useUuid as G}from"../../hooks/useUuid.js";import{useSticky as K}from"../../hooks/useSticky.js";import{mergeRefs as M}from"../../utils/refs.js";import{r as Q}from"../../ListHeader.js";import X from"../Icons/ChevronUp.js";import Y from"../Icons/ChevronDown.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../Avatar.js";import"../Icons/Icon.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../theme/palette.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../StatusDot/styles.module.scss";import"../Icons/Undo.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../../hooks/useBreakpoint.js";import"../ListHeader/styles.module.scss";import"../../utils/component.js";const B=s.forwardRef((l,w)=>{const{id:p,children:L,padding:N=!0,color:f="neutral",className:R="",icon:$,large:y=!1,title:d,expanded:m=!1,sticky:b,testId:W,handleExpanderClick:H,onExpand:u,renderChildrenWhenClosed:c,variant:a="line"}=l,[r,T]=V(m),_=Z(r),h=O(null),E=O(null),{isHovered:I}=J(E),{isOutsideWindow:j,isLeavingWindow:x,offsetHeight:t,contentWidth:e}=K(h,E),n=b&&r&&j,o=typeof d=="object",C=g(R,{[i["expander-list__item--"+a]]:a,[i["expander-list__item--jsx"]]:o}),A=g(i["expander-list-link"],i[`expander-list-link--${f}`],{[i["expander-list-link--fill"]]:a==="fill",[i["expander-list-link--closed"]]:!r,[i["expander-list-link--large"]]:y,[i["expander-list-link--jsx"]]:o,[i["expander-list-link--sticky"]]:n&&!x,[i["expander-list-link--absolute"]]:n&&x});k(()=>{m!==r&&T(m)},[m]),k(()=>{u&&r!==!!_&&u(r)},[r,u]);const z=()=>{if(!c&&!r)return null;const D=g(i["expander-list-link__main-content"],r&&i["expander-list-link__main-content--expanded"],N?i["expander-list-link__main-content--padding"]:"");return s.createElement("div",{className:D},L)};return s.createElement("li",{className:C,ref:M([w,h]),style:{paddingTop:n&&t?`${t}px`:void 0}},s.createElement("button",{type:"button",id:p,onClick:H,"data-testid":W,"data-analyticsid":U.ExpanderListExpander,className:A,ref:E,"aria-expanded":r,style:{zIndex:I||n?F.ExpanderTrigger:void 0,width:n&&e?`${e}px`:void 0}},Q(d,r?X:Y,I,y?"large":"medium",$)),z())}),P=l=>s.isValidElement(l)&&l.type===B,v=s.forwardRef((l,w)=>{const{children:p,childPadding:L=!0,large:N,isOpen:f=!1,renderChildrenWhenClosed:R=!1,color:$,className:y="",accordion:d=!1,topBorder:m=!0,bottomBorder:b=!0,sticky:W=!1,testId:H,variant:u}=l,[c,a]=V(),[r,T]=V(),_=G(),h=s.Children.count(p),E=g(i["expander-list"],y);function I(t,e){a(n=>d?{[e]:!(n!=null&&n[e])}:{...n,[e]:!(n!=null&&n[e])}),T(t.currentTarget)}const j=t=>g(i["expander-list__item"],{[i["expander-list__item--top"]]:t===0&&m,[i["expander-list__item--no-bottom"]]:t===h-1&&!b}),x=t=>`${_}-${t}`;return k(()=>{d&&r&&!q(r)&&r.scrollIntoView()},[d,r]),k(()=>{if(f){const t=x(0);a(e=>d?{[t]:!(e!=null&&e[t])}:{...e,[t]:!(e!=null&&e[t])})}},[f]),k(()=>{var t;if(!f){const e=(t=s.Children.map(p,n=>{if(P(n))return n}))==null?void 0:t.reduce((n,o,C)=>(typeof o.props.expanded<"u"&&(n[x(C)]=o.props.expanded),n),{});a({...c,...e})}},[p]),s.createElement("ul",{className:E,ref:w,"data-testid":H,"data-analyticsid":U.ExpanderList},s.Children.map(p,(t,e)=>{if(P(t)){const n=x(e),o=c==null?void 0:c[n],C=j(e);return s.cloneElement(t,{id:n,key:e,expanded:o,padding:L,color:$,large:N,sticky:W,"aria-expanded":o,className:C,handleExpanderClick:A=>I(A,`${_}-${e}`),renderChildrenWhenClosed:R,variant:u})}return t}))});v.Expander=B;B.displayName="ExpanderList.Expander";export{v as ExpanderList,v as default};
1
+ import o,{useState as V,useRef as O,useEffect as k}from"react";import{useHover as M}from"../../hooks/useHover.js";import{usePrevious as Z}from"../../hooks/usePrevious.js";import{isElementInViewport as q}from"../../utils/viewport.js";import g from"classnames";import i from"./styles.module.scss";import{AnalyticsId as U,ZIndex as F}from"../../constants.js";import{useUuid as G}from"../../hooks/useUuid.js";import{useSticky as K}from"../../hooks/useSticky.js";import{mergeRefs as Q}from"../../utils/refs.js";import{r as X}from"../../ListHeader.js";import Y from"../Icons/ChevronUp.js";import v from"../Icons/ChevronDown.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../Avatar.js";import"../Icons/Icon.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../theme/palette.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../StatusDot/styles.module.scss";import"../Icons/Undo.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../../hooks/useBreakpoint.js";import"../ListHeader/styles.module.scss";import"../../utils/component.js";const B=o.forwardRef((p,w)=>{const{id:m,children:L,padding:N=!0,color:f="neutral",className:R="",icon:$,large:y=!1,title:l,titleHtmlMarkup:b="span",expanded:c=!1,sticky:H,testId:W,handleExpanderClick:T,onExpand:d,renderChildrenWhenClosed:u,variant:a="line"}=p,[r,_]=V(c),j=Z(r),h=O(null),E=O(null),{isHovered:I}=M(E),{isOutsideWindow:C,isLeavingWindow:n,offsetHeight:e,contentWidth:t}=K(h,E),s=H&&r&&C,x=typeof l=="object",A=g(R,{[i["expander-list__item--"+a]]:a,[i["expander-list__item--jsx"]]:x}),z=g(i["expander-list-link"],i[`expander-list-link--${f}`],{[i["expander-list-link--fill"]]:a==="fill",[i["expander-list-link--closed"]]:!r,[i["expander-list-link--large"]]:y,[i["expander-list-link--jsx"]]:x,[i["expander-list-link--sticky"]]:s&&!n,[i["expander-list-link--absolute"]]:s&&n});k(()=>{c!==r&&_(c)},[c]),k(()=>{d&&r!==!!j&&d(r)},[r,d]);const D=()=>{if(!u&&!r)return null;const J=g(i["expander-list-link__main-content"],r&&i["expander-list-link__main-content--expanded"],N?i["expander-list-link__main-content--padding"]:"");return o.createElement("div",{className:J},L)};return o.createElement("li",{className:A,ref:Q([w,h]),style:{paddingTop:s&&e?`${e}px`:void 0}},o.createElement("button",{type:"button",id:m,onClick:T,"data-testid":W,"data-analyticsid":U.ExpanderListExpander,className:z,ref:E,"aria-expanded":r,style:{zIndex:I||s?F.ExpanderTrigger:void 0,width:s&&t?`${t}px`:void 0}},X(l,b,r?Y:v,I,y?"large":"medium",$)),D())}),P=p=>o.isValidElement(p)&&p.type===B,S=o.forwardRef((p,w)=>{const{children:m,childPadding:L=!0,large:N,isOpen:f=!1,renderChildrenWhenClosed:R=!1,color:$,className:y="",accordion:l=!1,topBorder:b=!0,bottomBorder:c=!0,sticky:H=!1,testId:W,variant:T}=p,[d,u]=V(),[a,r]=V(),_=G(),j=o.Children.count(m),h=g(i["expander-list"],y);function E(n,e){u(t=>l?{[e]:!(t!=null&&t[e])}:{...t,[e]:!(t!=null&&t[e])}),r(n.currentTarget)}const I=n=>g(i["expander-list__item"],{[i["expander-list__item--top"]]:n===0&&b,[i["expander-list__item--no-bottom"]]:n===j-1&&!c}),C=n=>`${_}-${n}`;return k(()=>{l&&a&&!q(a)&&a.scrollIntoView()},[l,a]),k(()=>{if(f){const n=C(0);u(e=>l?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[f]),k(()=>{var n;if(!f){const e=(n=o.Children.map(m,t=>{if(P(t))return t}))==null?void 0:n.reduce((t,s,x)=>(typeof s.props.expanded<"u"&&(t[C(x)]=s.props.expanded),t),{});u({...d,...e})}},[m]),o.createElement("ul",{className:h,ref:w,"data-testid":W,"data-analyticsid":U.ExpanderList},o.Children.map(m,(n,e)=>{if(P(n)){const t=C(e),s=d==null?void 0:d[t],x=I(e);return o.cloneElement(n,{id:t,key:e,expanded:s,padding:L,color:$,large:N,sticky:H,"aria-expanded":s,className:x,handleExpanderClick:A=>E(A,`${_}-${e}`),renderChildrenWhenClosed:R,variant:T})}return n}))});S.Expander=B;B.displayName="ExpanderList.Expander";export{S as ExpanderList,S as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { PaletteNames } from '../../theme/palette';\nimport { useHover } from '../../hooks/useHover';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { isElementInViewport } from '../../utils/viewport';\n\nimport classNames from 'classnames';\n\nimport expanderListStyles from './styles.module.scss';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { useSticky } from '../../hooks/useSticky';\n\nimport { mergeRefs } from '../../utils/refs';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ChevronDown from '../Icons/ChevronDown';\n\nexport type ExpanderListColors = PaletteNames;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill';\n\ninterface ExpanderListProps {\n /** Toggles accordion functionality for the expanders. */\n accordion?: boolean;\n /** @deprecated Skal fases ut - Brukes ikke lenger. */\n bottomBorder?: boolean;\n /** Items in the ExpanderList */\n children: React.ReactNode;\n /** Toggles padding of child elements */\n childPadding?: boolean;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the link list background color on hover. */\n color?: ExpanderListColors;\n /** Changes the font size. */\n large?: boolean;\n /** Opens the first item in the list. */\n /** @deprecated Skal fases ut til fordel for å bruke expanded-prop på første ExpanderList.Expander */\n isOpen?: boolean;\n /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n renderChildrenWhenClosed?: boolean;\n /** @deprecated Skal fases ut - Brukes ikke lenger. */\n topBorder?: boolean;\n /** Stick expander trigger to top of screen while scrolling down */\n sticky?: boolean;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets visual priority */\n variant?: ExpanderListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n React.HTMLAttributes<HTMLButtonElement>,\n {\n id?: string;\n title: JSX.Element | string;\n children: React.ReactNode;\n className?: string;\n color?: ExpanderListColors;\n icon?: React.ReactElement;\n padding?: boolean;\n expanded?: boolean;\n large?: boolean;\n testId?: string;\n handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Called when expander is open/closed. */\n onExpand?: (isExpanded: boolean) => void;\n }\n> &\n Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n const {\n id,\n children,\n padding = true,\n color = 'neutral',\n className = '',\n icon,\n large = false,\n title,\n expanded = false,\n sticky,\n testId,\n handleExpanderClick,\n onExpand,\n renderChildrenWhenClosed,\n variant = 'line',\n } = props;\n const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n const previousIsExpanded = usePrevious(isExpanded);\n const expanderRef = useRef<HTMLLIElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = useHover(triggerRef);\n\n const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n const isSticky = sticky && isExpanded && isOutsideWindow;\n const isJsxTitle = typeof title === 'object';\n\n const itemClasses = classNames(className, {\n [expanderListStyles['expander-list__item--' + variant]]: variant,\n [expanderListStyles['expander-list__item--jsx']]: isJsxTitle,\n });\n\n const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n [expanderListStyles['expander-list-link--fill']]: variant === 'fill',\n [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n [expanderListStyles['expander-list-link--large']]: large,\n [expanderListStyles['expander-list-link--jsx']]: isJsxTitle,\n [expanderListStyles['expander-list-link--sticky']]: isSticky && !isLeavingWindow,\n [expanderListStyles['expander-list-link--absolute']]: isSticky && isLeavingWindow,\n });\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 renderContent = () => {\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const mainContentClasses = classNames(\n expanderListStyles['expander-list-link__main-content'],\n isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n );\n\n return <div className={mainContentClasses}>{children}</div>;\n };\n\n return (\n <li\n className={itemClasses}\n ref={mergeRefs([ref, expanderRef])}\n style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n >\n <button\n type=\"button\"\n id={id}\n onClick={handleExpanderClick}\n data-testid={testId}\n data-analyticsid={AnalyticsId.ExpanderListExpander}\n className={expanderClasses}\n ref={triggerRef}\n aria-expanded={isExpanded}\n style={{\n zIndex: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n }}\n >\n {renderListHeader(title, isExpanded ? ChevronUp : ChevronDown, isHovered, large ? 'large' : 'medium', icon)}\n </button>\n {renderContent()}\n </li>\n );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: {} | null | undefined): element is React.ReactElement<ExpanderProps> =>\n React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n const {\n children,\n childPadding = true,\n large,\n isOpen = false,\n renderChildrenWhenClosed = false,\n color,\n className = '',\n accordion = false,\n topBorder = true,\n bottomBorder = true,\n sticky = false,\n testId,\n variant,\n } = props;\n const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n const uuid = useUuid();\n const childCount = React.Children.count(children);\n const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n setLatestExpander(event.currentTarget);\n }\n\n /** Returns the class modifier top when we want to show the top border and no-bottom when we don't want to show the bottom border */\n const getExpanderItemClass = (index: number) => {\n return classNames(expanderListStyles['expander-list__item'], {\n [expanderListStyles['expander-list__item--top']]: index === 0 && topBorder,\n [expanderListStyles['expander-list__item--no-bottom']]: index === childCount - 1 && !bottomBorder,\n });\n };\n\n const getExpanderId = (index: number) => `${uuid}-${index}`;\n\n useEffect(() => {\n if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n latestExpander.scrollIntoView();\n }\n }, [accordion, latestExpander]);\n\n useEffect(() => {\n if (isOpen) {\n const id = getExpanderId(0);\n setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (!isOpen) {\n const newActiveExpander = React.Children.map(children, child => {\n if (isExpanderComponent(child)) {\n return child;\n }\n })?.reduce((acc, child, index) => {\n // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n if (typeof child.props.expanded !== 'undefined') {\n acc[getExpanderId(index)] = child.props.expanded;\n }\n return acc;\n }, {} as ActiveExpander);\n\n setActiveExpander({ ...activeExpander, ...newActiveExpander });\n }\n }, [children]);\n\n return (\n <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n {React.Children.map(children, (child, index) => {\n if (isExpanderComponent(child)) {\n const id = getExpanderId(index);\n const expanded = activeExpander?.[id];\n const expanderItemClass = getExpanderItemClass(index);\n\n return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n id,\n key: index,\n expanded,\n padding: childPadding,\n color,\n large,\n sticky,\n 'aria-expanded': expanded,\n className: expanderItemClass,\n handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n renderChildrenWhenClosed,\n variant,\n });\n }\n return child;\n })}\n </ul>\n );\n}) as ExpanderListCompound;\n\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["Expander","React","props","ref","id","children","padding","color","className","icon","large","title","expanded","sticky","testId","handleExpanderClick","onExpand","renderChildrenWhenClosed","variant","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","isJsxTitle","itemClasses","classNames","expanderListStyles","expanderClasses","useEffect","renderContent","mainContentClasses","mergeRefs","AnalyticsId","ZIndex","renderListHeader","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","isOpen","accordion","topBorder","bottomBorder","activeExpander","setActiveExpander","latestExpander","setLatestExpander","uuid","useUuid","childCount","expanderListClasses","event","prevState","getExpanderItemClass","index","getExpanderId","isElementInViewport","newActiveExpander","_a","child","acc","expanderItemClass"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { PaletteNames } from '../../theme/palette';\nimport { useHover } from '../../hooks/useHover';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { isElementInViewport } from '../../utils/viewport';\n\nimport classNames from 'classnames';\n\nimport expanderListStyles from './styles.module.scss';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { useSticky } from '../../hooks/useSticky';\n\nimport { mergeRefs } from '../../utils/refs';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { TitleTags } from '../Title';\n\nexport type ExpanderListColors = PaletteNames;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill';\n\ninterface ExpanderListProps {\n /** Toggles accordion functionality for the expanders. */\n accordion?: boolean;\n /** @deprecated Skal fases ut - Brukes ikke lenger. */\n bottomBorder?: boolean;\n /** Items in the ExpanderList */\n children: React.ReactNode;\n /** Toggles padding of child elements */\n childPadding?: boolean;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the link list background color on hover. */\n color?: ExpanderListColors;\n /** Changes the font size. */\n large?: boolean;\n /** Opens the first item in the list. */\n /** @deprecated Skal fases ut til fordel for å bruke expanded-prop på første ExpanderList.Expander */\n isOpen?: boolean;\n /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n renderChildrenWhenClosed?: boolean;\n /** @deprecated Skal fases ut - Brukes ikke lenger. */\n topBorder?: boolean;\n /** Stick expander trigger to top of screen while scrolling down */\n sticky?: boolean;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets visual priority */\n variant?: ExpanderListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n React.HTMLAttributes<HTMLButtonElement>,\n {\n id?: string;\n title: JSX.Element | string;\n /** Changes the underlying element of the title. Default: span*/\n titleHtmlMarkup?: TitleTags;\n children: React.ReactNode;\n className?: string;\n color?: ExpanderListColors;\n icon?: React.ReactElement;\n padding?: boolean;\n expanded?: boolean;\n large?: boolean;\n testId?: string;\n handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Called when expander is open/closed. */\n onExpand?: (isExpanded: boolean) => void;\n }\n> &\n Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n const {\n id,\n children,\n padding = true,\n color = 'neutral',\n className = '',\n icon,\n large = false,\n title,\n titleHtmlMarkup = 'span',\n expanded = false,\n sticky,\n testId,\n handleExpanderClick,\n onExpand,\n renderChildrenWhenClosed,\n variant = 'line',\n } = props;\n const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n const previousIsExpanded = usePrevious(isExpanded);\n const expanderRef = useRef<HTMLLIElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = useHover(triggerRef);\n\n const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n const isSticky = sticky && isExpanded && isOutsideWindow;\n const isJsxTitle = typeof title === 'object';\n\n const itemClasses = classNames(className, {\n [expanderListStyles['expander-list__item--' + variant]]: variant,\n [expanderListStyles['expander-list__item--jsx']]: isJsxTitle,\n });\n\n const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n [expanderListStyles['expander-list-link--fill']]: variant === 'fill',\n [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n [expanderListStyles['expander-list-link--large']]: large,\n [expanderListStyles['expander-list-link--jsx']]: isJsxTitle,\n [expanderListStyles['expander-list-link--sticky']]: isSticky && !isLeavingWindow,\n [expanderListStyles['expander-list-link--absolute']]: isSticky && isLeavingWindow,\n });\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 renderContent = () => {\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const mainContentClasses = classNames(\n expanderListStyles['expander-list-link__main-content'],\n isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n );\n\n return <div className={mainContentClasses}>{children}</div>;\n };\n\n return (\n <li\n className={itemClasses}\n ref={mergeRefs([ref, expanderRef])}\n style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n >\n <button\n type=\"button\"\n id={id}\n onClick={handleExpanderClick}\n data-testid={testId}\n data-analyticsid={AnalyticsId.ExpanderListExpander}\n className={expanderClasses}\n ref={triggerRef}\n aria-expanded={isExpanded}\n style={{\n zIndex: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n }}\n >\n {renderListHeader(title, titleHtmlMarkup, isExpanded ? ChevronUp : ChevronDown, isHovered, large ? 'large' : 'medium', icon)}\n </button>\n {renderContent()}\n </li>\n );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: {} | null | undefined): element is React.ReactElement<ExpanderProps> =>\n React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n const {\n children,\n childPadding = true,\n large,\n isOpen = false,\n renderChildrenWhenClosed = false,\n color,\n className = '',\n accordion = false,\n topBorder = true,\n bottomBorder = true,\n sticky = false,\n testId,\n variant,\n } = props;\n const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n const uuid = useUuid();\n const childCount = React.Children.count(children);\n const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n setLatestExpander(event.currentTarget);\n }\n\n /** Returns the class modifier top when we want to show the top border and no-bottom when we don't want to show the bottom border */\n const getExpanderItemClass = (index: number) => {\n return classNames(expanderListStyles['expander-list__item'], {\n [expanderListStyles['expander-list__item--top']]: index === 0 && topBorder,\n [expanderListStyles['expander-list__item--no-bottom']]: index === childCount - 1 && !bottomBorder,\n });\n };\n\n const getExpanderId = (index: number) => `${uuid}-${index}`;\n\n useEffect(() => {\n if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n latestExpander.scrollIntoView();\n }\n }, [accordion, latestExpander]);\n\n useEffect(() => {\n if (isOpen) {\n const id = getExpanderId(0);\n setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (!isOpen) {\n const newActiveExpander = React.Children.map(children, child => {\n if (isExpanderComponent(child)) {\n return child;\n }\n })?.reduce((acc, child, index) => {\n // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n if (typeof child.props.expanded !== 'undefined') {\n acc[getExpanderId(index)] = child.props.expanded;\n }\n return acc;\n }, {} as ActiveExpander);\n\n setActiveExpander({ ...activeExpander, ...newActiveExpander });\n }\n }, [children]);\n\n return (\n <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n {React.Children.map(children, (child, index) => {\n if (isExpanderComponent(child)) {\n const id = getExpanderId(index);\n const expanded = activeExpander?.[id];\n const expanderItemClass = getExpanderItemClass(index);\n\n return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n id,\n key: index,\n expanded,\n padding: childPadding,\n color,\n large,\n sticky,\n 'aria-expanded': expanded,\n className: expanderItemClass,\n handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n renderChildrenWhenClosed,\n variant,\n });\n }\n return child;\n })}\n </ul>\n );\n}) as ExpanderListCompound;\n\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["Expander","React","props","ref","id","children","padding","color","className","icon","large","title","titleHtmlMarkup","expanded","sticky","testId","handleExpanderClick","onExpand","renderChildrenWhenClosed","variant","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","isJsxTitle","itemClasses","classNames","expanderListStyles","expanderClasses","useEffect","renderContent","mainContentClasses","mergeRefs","AnalyticsId","ZIndex","renderListHeader","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","isOpen","accordion","topBorder","bottomBorder","activeExpander","setActiveExpander","latestExpander","setLatestExpander","uuid","useUuid","childCount","expanderListClasses","event","prevState","getExpanderItemClass","index","getExpanderId","isElementInViewport","newActiveExpander","_a","child","acc","expanderItemClass"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import i from"react";import f from"classnames";import{useHover as C}from"../../hooks/useHover.js";import t from"./styles.module.scss";import{AnalyticsId as b}from"../../constants.js";import{r as y}from"../../ListHeader.js";import R from"../Icons/ChevronRight.js";import"../../Avatar.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../theme/palette.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../StatusDot/styles.module.scss";import"../Icons/Undo.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../../hooks/useBreakpoint.js";import"../ListHeader/styles.module.scss";import"../../utils/component.js";const k=i.forwardRef((u,s)=>{const{children:o,className:a="",color:l="neutral",icon:n,size:r="medium",chevron:L=!1,linkRef:m,testId:p,target:e,variant:c,htmlMarkup:d="a",..._}=u,{hoverRef:h,isHovered:v}=C(m),E=f(t["link-list__list-item"],{[t["link-list__list-item--"+c]]:c}),N=f(t["link-list__anchor"],t["link-list__anchor--"+l],{[t["link-list__anchor--fill"]]:c==="fill",[t["link-list__anchor--"+r]]:r,[t["link-list__anchor--button"]]:d==="button"},a);return i.createElement("li",{className:E,ref:s,"data-testid":p,"data-analyticsid":b.Link},d==="a"&&i.createElement("a",{className:N,ref:h,rel:e==="_blank"?"noopener noreferrer":void 0,target:e,..._},y(o,R,v,r,n)),d==="button"&&i.createElement("button",{className:N,ref:h,type:"button",..._},y(o,R,v,r,n)))}),w=i.forwardRef(function(s,o){const{children:a,className:l="",chevron:n=!1,size:r="medium",color:L,testId:m,variant:p="line"}=s;return i.createElement("ul",{ref:o,className:f(t["link-list"],l),"data-testid":m,"data-analyticsid":b.LinkList},i.Children.map(a,e=>{if(e.type===k)return i.cloneElement(e,{color:L,size:r,chevron:n,variant:p})}))});w.Link=k;k.displayName="LinkList.Link";export{w as LinkList,w as default};
1
+ import i from"react";import f from"classnames";import{useHover as C}from"../../hooks/useHover.js";import t from"./styles.module.scss";import{AnalyticsId as b}from"../../constants.js";import{r as y}from"../../ListHeader.js";import R from"../Icons/ChevronRight.js";import"../../Avatar.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../theme/palette.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../StatusDot/styles.module.scss";import"../Icons/Undo.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../../hooks/useBreakpoint.js";import"../ListHeader/styles.module.scss";import"../../utils/component.js";const k=i.forwardRef((u,s)=>{const{children:o,className:a="",color:l="neutral",icon:n,size:r="medium",chevron:L=!1,linkRef:m,testId:p,target:e,variant:c,htmlMarkup:d="a",..._}=u,{hoverRef:h,isHovered:v}=C(m),E=f(t["link-list__list-item"],{[t["link-list__list-item--"+c]]:c}),N=f(t["link-list__anchor"],t["link-list__anchor--"+l],{[t["link-list__anchor--fill"]]:c==="fill",[t["link-list__anchor--"+r]]:r,[t["link-list__anchor--button"]]:d==="button"},a);return i.createElement("li",{className:E,ref:s,"data-testid":p,"data-analyticsid":b.Link},d==="a"&&i.createElement("a",{className:N,ref:h,rel:e==="_blank"?"noopener noreferrer":void 0,target:e,..._},y(o,"span",R,v,r,n)),d==="button"&&i.createElement("button",{className:N,ref:h,type:"button",..._},y(o,"span",R,v,r,n)))}),w=i.forwardRef(function(s,o){const{children:a,className:l="",chevron:n=!1,size:r="medium",color:L,testId:m,variant:p="line"}=s;return i.createElement("ul",{ref:o,className:f(t["link-list"],l),"data-testid":m,"data-analyticsid":b.LinkList},i.Children.map(a,e=>{if(e.type===k)return i.cloneElement(e,{color:L,size:r,chevron:n,variant:p})}))});w.Link=k;k.displayName="LinkList.Link";export{w as LinkList,w as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { PaletteNames } from '../../theme/palette';\nimport { useHover } from '../../hooks/useHover';\n\nimport LinkListStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport ChevronRight from '../Icons/ChevronRight';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkListVariant = 'line' | 'outline' | 'fill';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n ListHeader?: ListHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n Link: LinkType;\n}\n\ninterface LinkListProps {\n /** Items in the LinkList */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the link list background color on hover. */\n color?: LinkListColors;\n /** Toggles chevron icon on or off. */\n chevron?: boolean;\n /** @deprecated Skal fases ut - Brukes ikke lenger. */\n bottomBorder?: boolean;\n /** @deprecated Skal fases ut - Brukes ikke lenger. */\n topBorder?: boolean;\n /** Changes size of the LinkList. */\n size?: LinkListSize;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets visual priority */\n variant?: LinkListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n {\n children: React.ReactNode;\n chevron?: boolean;\n className?: string;\n icon?: React.ReactElement;\n href?: string;\n target?: LinkAnchorTargets;\n /** HTML markup for link. Default: a */\n htmlMarkup?: LinkTags;\n /**\n * Ref for lenke/knapp\n */\n linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n /** Sets the data-testid attribute. */\n testId?: string;\n }\n> &\n Pick<LinkListProps, 'color' | 'size' | 'variant'>;\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n const {\n children,\n className = '',\n color = 'neutral',\n icon,\n size = 'medium',\n chevron = false,\n linkRef,\n testId,\n target,\n variant,\n htmlMarkup = 'a',\n ...restProps\n } = props;\n const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n\n const liClasses = cn(LinkListStyles['link-list__list-item'], {\n [LinkListStyles['link-list__list-item--' + variant]]: variant,\n });\n const linkClasses = cn(\n LinkListStyles['link-list__anchor'],\n LinkListStyles['link-list__anchor--' + color],\n\n {\n [LinkListStyles['link-list__anchor--fill']]: variant === 'fill',\n [LinkListStyles['link-list__anchor--' + size]]: size,\n [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n },\n className\n );\n\n return (\n <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n {htmlMarkup === 'a' && (\n <a\n className={linkClasses}\n ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n target={target}\n {...restProps}\n >\n {renderListHeader(children, ChevronRight, isHovered, size, icon)}\n </a>\n )}\n {htmlMarkup === 'button' && (\n <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n {renderListHeader(children, ChevronRight, isHovered, size, icon)}\n </button>\n )}\n </li>\n );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n const { children, className = '', chevron = false, size = 'medium', color, testId, variant = 'line' } = props;\n return (\n <ul ref={ref} className={cn(LinkListStyles['link-list'], className)} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n if ((child as React.ReactElement<LinkProps>).type === Link) {\n return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron, variant });\n }\n })}\n </ul>\n );\n}) as CompoundComponent;\n\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","linkRef","testId","target","variant","htmlMarkup","restProps","hoverRef","isHovered","useHover","liClasses","cn","LinkListStyles","linkClasses","AnalyticsId","renderListHeader","ChevronRight","LinkList","child"],"mappings":"u8BAuEA,MAAMA,EAAiBC,EAAM,WAAW,CAACC,EAAkBC,IAAkC,CACrF,KAAA,CACJ,SAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EAAQ,UACR,KAAAC,EACA,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,QAAAC,EACA,OAAAC,EACA,OAAAC,EACA,QAAAC,EACA,WAAAC,EAAa,OACVC,CACD,EAAAb,EACE,CAAE,SAAAc,EAAU,UAAAC,CAAU,EAAIC,EAAgDR,CAAO,EAEjFS,EAAYC,EAAGC,EAAe,wBAAyB,CAC3D,CAACA,EAAe,yBAA2BR,IAAWA,CAAA,CACvD,EACKS,EAAcF,EAClBC,EAAe,qBACfA,EAAe,sBAAwBf,GAEvC,CACE,CAACe,EAAe,4BAA6BR,IAAY,OACzD,CAACQ,EAAe,sBAAwBb,IAAQA,EAChD,CAACa,EAAe,8BAA+BP,IAAe,QAChE,EACAT,CAAA,EAGF,OACGJ,EAAA,cAAA,KAAA,CAAG,UAAWkB,EAAW,IAAAhB,EAAU,cAAaQ,EAAQ,mBAAkBY,EAAY,IACpF,EAAAT,IAAe,KACbb,EAAA,cAAA,IAAA,CACC,UAAWqB,EACX,IAAKN,EACL,IAAKJ,IAAW,SAAW,sBAAwB,OACnD,OAAAA,EACC,GAAGG,CAEH,EAAAS,EAAiBpB,EAAUqB,EAAcR,EAAWT,EAAMD,CAAI,CACjE,EAEDO,IAAe,UACbb,EAAA,cAAA,SAAA,CAAO,UAAWqB,EAAa,IAAKN,EAAgD,KAAK,SAAU,GAAGD,CAAA,EACpGS,EAAiBpB,EAAUqB,EAAcR,EAAWT,EAAMD,CAAI,CACjE,CAEJ,CAEJ,CAAC,EAEYmB,EAAWzB,EAAM,WAAW,SAA8BC,EAAsBC,EAAkC,CAC7H,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,QAAAI,EAAU,GAAO,KAAAD,EAAO,SAAU,MAAAF,EAAO,OAAAK,EAAQ,QAAAE,EAAU,MAAA,EAAWX,EACxG,OACGD,EAAA,cAAA,KAAA,CAAG,IAAAE,EAAU,UAAWiB,EAAGC,EAAe,aAAchB,CAAS,EAAG,cAAaM,EAAQ,mBAAkBY,EAAY,QAAA,EACrHtB,EAAM,SAAS,IAAIG,EAAWuB,GAA2D,CACnF,GAAAA,EAAwC,OAAS3B,EAC7C,OAAAC,EAAM,aAAa0B,EAAwC,CAAE,MAAArB,EAAO,KAAAE,EAAM,QAAAC,EAAS,QAAAI,EAAS,CAEtG,CAAA,CACH,CAEJ,CAAC,EAEDa,EAAS,KAAO1B,EAChBA,EAAK,YAAc"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { PaletteNames } from '../../theme/palette';\nimport { useHover } from '../../hooks/useHover';\n\nimport LinkListStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport ChevronRight from '../Icons/ChevronRight';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkListVariant = 'line' | 'outline' | 'fill';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n ListHeader?: ListHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n Link: LinkType;\n}\n\ninterface LinkListProps {\n /** Items in the LinkList */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the link list background color on hover. */\n color?: LinkListColors;\n /** Toggles chevron icon on or off. */\n chevron?: boolean;\n /** @deprecated Skal fases ut - Brukes ikke lenger. */\n bottomBorder?: boolean;\n /** @deprecated Skal fases ut - Brukes ikke lenger. */\n topBorder?: boolean;\n /** Changes size of the LinkList. */\n size?: LinkListSize;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets visual priority */\n variant?: LinkListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n {\n children: React.ReactNode;\n chevron?: boolean;\n className?: string;\n icon?: React.ReactElement;\n href?: string;\n target?: LinkAnchorTargets;\n /** HTML markup for link. Default: a */\n htmlMarkup?: LinkTags;\n /**\n * Ref for lenke/knapp\n */\n linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n /** Sets the data-testid attribute. */\n testId?: string;\n }\n> &\n Pick<LinkListProps, 'color' | 'size' | 'variant'>;\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n const {\n children,\n className = '',\n color = 'neutral',\n icon,\n size = 'medium',\n chevron = false,\n linkRef,\n testId,\n target,\n variant,\n htmlMarkup = 'a',\n ...restProps\n } = props;\n const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n\n const liClasses = cn(LinkListStyles['link-list__list-item'], {\n [LinkListStyles['link-list__list-item--' + variant]]: variant,\n });\n const linkClasses = cn(\n LinkListStyles['link-list__anchor'],\n LinkListStyles['link-list__anchor--' + color],\n\n {\n [LinkListStyles['link-list__anchor--fill']]: variant === 'fill',\n [LinkListStyles['link-list__anchor--' + size]]: size,\n [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n },\n className\n );\n\n return (\n <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n {htmlMarkup === 'a' && (\n <a\n className={linkClasses}\n ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n target={target}\n {...restProps}\n >\n {renderListHeader(children, 'span', ChevronRight, isHovered, size, icon)}\n </a>\n )}\n {htmlMarkup === 'button' && (\n <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n {renderListHeader(children, 'span', ChevronRight, isHovered, size, icon)}\n </button>\n )}\n </li>\n );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n const { children, className = '', chevron = false, size = 'medium', color, testId, variant = 'line' } = props;\n return (\n <ul ref={ref} className={cn(LinkListStyles['link-list'], className)} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n if ((child as React.ReactElement<LinkProps>).type === Link) {\n return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron, variant });\n }\n })}\n </ul>\n );\n}) as CompoundComponent;\n\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","linkRef","testId","target","variant","htmlMarkup","restProps","hoverRef","isHovered","useHover","liClasses","cn","LinkListStyles","linkClasses","AnalyticsId","renderListHeader","ChevronRight","LinkList","child"],"mappings":"u8BAuEA,MAAMA,EAAiBC,EAAM,WAAW,CAACC,EAAkBC,IAAkC,CACrF,KAAA,CACJ,SAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EAAQ,UACR,KAAAC,EACA,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,QAAAC,EACA,OAAAC,EACA,OAAAC,EACA,QAAAC,EACA,WAAAC,EAAa,OACVC,CACD,EAAAb,EACE,CAAE,SAAAc,EAAU,UAAAC,CAAU,EAAIC,EAAgDR,CAAO,EAEjFS,EAAYC,EAAGC,EAAe,wBAAyB,CAC3D,CAACA,EAAe,yBAA2BR,IAAWA,CAAA,CACvD,EACKS,EAAcF,EAClBC,EAAe,qBACfA,EAAe,sBAAwBf,GAEvC,CACE,CAACe,EAAe,4BAA6BR,IAAY,OACzD,CAACQ,EAAe,sBAAwBb,IAAQA,EAChD,CAACa,EAAe,8BAA+BP,IAAe,QAChE,EACAT,CAAA,EAGF,OACGJ,EAAA,cAAA,KAAA,CAAG,UAAWkB,EAAW,IAAAhB,EAAU,cAAaQ,EAAQ,mBAAkBY,EAAY,IACpF,EAAAT,IAAe,KACbb,EAAA,cAAA,IAAA,CACC,UAAWqB,EACX,IAAKN,EACL,IAAKJ,IAAW,SAAW,sBAAwB,OACnD,OAAAA,EACC,GAAGG,CAEH,EAAAS,EAAiBpB,EAAU,OAAQqB,EAAcR,EAAWT,EAAMD,CAAI,CACzE,EAEDO,IAAe,UACbb,EAAA,cAAA,SAAA,CAAO,UAAWqB,EAAa,IAAKN,EAAgD,KAAK,SAAU,GAAGD,CAAA,EACpGS,EAAiBpB,EAAU,OAAQqB,EAAcR,EAAWT,EAAMD,CAAI,CACzE,CAEJ,CAEJ,CAAC,EAEYmB,EAAWzB,EAAM,WAAW,SAA8BC,EAAsBC,EAAkC,CAC7H,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,QAAAI,EAAU,GAAO,KAAAD,EAAO,SAAU,MAAAF,EAAO,OAAAK,EAAQ,QAAAE,EAAU,MAAA,EAAWX,EACxG,OACGD,EAAA,cAAA,KAAA,CAAG,IAAAE,EAAU,UAAWiB,EAAGC,EAAe,aAAchB,CAAS,EAAG,cAAaM,EAAQ,mBAAkBY,EAAY,QAAA,EACrHtB,EAAM,SAAS,IAAIG,EAAWuB,GAA2D,CACnF,GAAAA,EAAwC,OAAS3B,EAC7C,OAAAC,EAAM,aAAa0B,EAAwC,CAAE,MAAArB,EAAO,KAAAE,EAAM,QAAAC,EAAS,QAAAI,EAAS,CAEtG,CAAA,CACH,CAEJ,CAAC,EAEDa,EAAS,KAAO1B,EAChBA,EAAK,YAAc"}
@@ -3,13 +3,14 @@ import { AvatarProps, AvatarType } from '../Avatar';
3
3
  import { BadgeProps, BadgeType } from '../Badge';
4
4
  import { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';
5
5
  import { SvgIcon } from '../Icons';
6
+ import { TitleTags } from '../Title';
6
7
  export declare type ListHeaderSize = 'small' | 'medium' | 'large';
7
8
  export interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {
8
9
  Avatar?: AvatarType;
9
10
  Badge?: BadgeType;
10
11
  ListHeaderText?: ListHeaderTextType;
11
12
  }
12
- export declare const renderListHeader: (element: React.ReactNode, chevronIcon: SvgIcon, isHovered: boolean, size: ListHeaderSize, icon?: React.ReactElement) => false | "" | 0 | JSX.Element | null | undefined;
13
+ export declare const renderListHeader: (element: React.ReactNode, titleHtmlMarkup: TitleTags, chevronIcon: SvgIcon, isHovered: boolean, size: ListHeaderSize, icon?: React.ReactElement) => false | "" | 0 | JSX.Element | null | undefined;
13
14
  export interface ListHeaderProps {
14
15
  /** Adds custom classes to the ListHeader element. */
15
16
  className?: string;
@@ -17,6 +18,8 @@ export interface ListHeaderProps {
17
18
  chevronIcon?: SvgIcon;
18
19
  /** Children to be rendered inside of ListHeader */
19
20
  children: React.ReactNode;
21
+ /** Changes the underlying element of the title. Default: h2*/
22
+ titleHtmlMarkup?: TitleTags;
20
23
  /** icon to be rendered inside of ListHeader */
21
24
  icon?: React.ReactElement;
22
25
  /** whether or not the parent is hovered */
@@ -1 +1 @@
1
- {"version":3,"file":"ListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAuB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAI1G,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAGnD,oBAAY,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,yBAAyB,CAAC,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3H,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,YAClB,MAAM,SAAS,eACX,OAAO,aACT,OAAO,QACZ,cAAc,SACb,MAAM,YAAY,oDAc1B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,aACZ,MAAM,SAAS;;4BAID,MAAM,mBAAmB,CAAC;;oBAElC,MAAM,MAAM,CAAC;uBACV,MAAM,GAAG,CAAC;CAgC9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAqEvB,CAAC;AAEH,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"ListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAuB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAI1G,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,oBAAY,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,yBAAyB,CAAC,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3H,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,YAClB,MAAM,SAAS,mBACP,SAAS,eACb,OAAO,aACT,OAAO,QACZ,cAAc,SACb,MAAM,YAAY,oDAc1B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,aACZ,MAAM,SAAS;;4BAID,MAAM,mBAAmB,CAAC;;oBAElC,MAAM,MAAM,CAAC;uBACV,MAAM,GAAG,CAAC;CAgC9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAwEvB,CAAC;AAEH,eAAe,UAAU,CAAC"}
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { StatusDotVariant } from '../../StatusDot';
3
+ import { TitleTags } from '../../Title';
3
4
  export declare type ListHeaderTextType = React.ForwardRefExoticComponent<ListHeaderTextProps & React.RefAttributes<HTMLLIElement>>;
4
5
  export interface ListHeaderTextProps {
5
6
  /** The first text in the ListHeaderText Component */
@@ -18,6 +19,8 @@ export interface ListHeaderTextProps {
18
19
  className?: string;
19
20
  /** Sets the data-testid attribute. */
20
21
  testId?: string;
22
+ /** Changes the underlying element of the title. Default: span*/
23
+ titleHtmlMarkup?: TitleTags;
21
24
  }
22
25
  export declare const ListHeaderText: ListHeaderTextType;
23
26
  export default ListHeaderText;
@@ -1 +1 @@
1
- {"version":3,"file":"ListHeaderText.d.ts","sourceRoot":"","sources":["../../../../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAI9D,oBAAY,kBAAkB,GAAG,KAAK,CAAC,yBAAyB,CAAC,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAE3H,MAAM,WAAW,mBAAmB;IAClC,qDAAqD;IACrD,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,EAAE,kBAmC3B,CAAC;AAEH,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"ListHeaderText.d.ts","sourceRoot":"","sources":["../../../../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAG9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,oBAAY,kBAAkB,GAAG,KAAK,CAAC,yBAAyB,CAAC,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAE3H,MAAM,WAAW,mBAAmB;IAClC,qDAAqD;IACrD,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,EAAE,kBAqC3B,CAAC;AAEH,eAAe,cAAc,CAAC"}
@@ -1 +1 @@
1
- {"props":{"firstText":{"defaultValue":null,"description":"The first text in the ListHeaderText Component","name":"firstText","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":true,"type":{"name":"string"}},"firstTextEmphasised":{"defaultValue":null,"description":"Will style the first text as bold","name":"firstTextEmphasised","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"boolean"}},"secondText":{"defaultValue":null,"description":"The second text in the ListHeaderText Component","name":"secondText","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"string"}},"secondTextEmphasised":{"defaultValue":null,"description":"Will style the second text as bold","name":"secondTextEmphasised","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"boolean"}},"subText":{"defaultValue":null,"description":"Whether or not this ListHeaderText is a sub text","name":"subText","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"boolean"}},"statusDotVariant":{"defaultValue":null,"description":"Decides the variant for the StatusDot","name":"statusDotVariant","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"enum","raw":"StatusDotVariant","value":[{"value":"\"info\"","description":"","fullComment":"","tags":{}},{"value":"\"warning\"","description":"","fullComment":"","tags":{}},{"value":"\"alert\"","description":"","fullComment":"","tags":{}},{"value":"\"cancelled\"","description":"","fullComment":"","tags":{}},{"value":"\"active\"","description":"","fullComment":"","tags":{}},{"value":"\"transparent\"","description":"","fullComment":"","tags":{}},{"value":"\"recurring\"","description":"","fullComment":"","tags":{}},{"value":"\"group\"","description":"","fullComment":"","tags":{}},{"value":"\"noaccess\"","description":"","fullComment":"","tags":{}}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the ListHeaderText component.","name":"className","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"string"}}}}
1
+ {"props":{"firstText":{"defaultValue":null,"description":"The first text in the ListHeaderText Component","name":"firstText","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":true,"type":{"name":"string"}},"firstTextEmphasised":{"defaultValue":null,"description":"Will style the first text as bold","name":"firstTextEmphasised","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"boolean"}},"secondText":{"defaultValue":null,"description":"The second text in the ListHeaderText Component","name":"secondText","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"string"}},"secondTextEmphasised":{"defaultValue":null,"description":"Will style the second text as bold","name":"secondTextEmphasised","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"boolean"}},"subText":{"defaultValue":null,"description":"Whether or not this ListHeaderText is a sub text","name":"subText","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"boolean"}},"statusDotVariant":{"defaultValue":null,"description":"Decides the variant for the StatusDot","name":"statusDotVariant","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"enum","raw":"StatusDotVariant","value":[{"value":"\"info\"","description":"","fullComment":"","tags":{}},{"value":"\"warning\"","description":"","fullComment":"","tags":{}},{"value":"\"alert\"","description":"","fullComment":"","tags":{}},{"value":"\"cancelled\"","description":"","fullComment":"","tags":{}},{"value":"\"active\"","description":"","fullComment":"","tags":{}},{"value":"\"transparent\"","description":"","fullComment":"","tags":{}},{"value":"\"recurring\"","description":"","fullComment":"","tags":{}},{"value":"\"group\"","description":"","fullComment":"","tags":{}},{"value":"\"noaccess\"","description":"","fullComment":"","tags":{}}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the ListHeaderText component.","name":"className","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"string"}},"titleHtmlMarkup":{"defaultValue":null,"description":"Changes the underlying element of the title. Default: span","name":"titleHtmlMarkup","parent":{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeaderText/ListHeaderText.tsx","name":"ListHeaderTextProps"}],"required":false,"type":{"name":"enum","raw":"TitleTags","value":[{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"span\""}]}}}}
@@ -1 +1 @@
1
- {"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the ListHeader element.","name":"className","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"string"}},"chevronIcon":{"defaultValue":null,"description":"Chevron to render inside of the ListHeader","name":"chevronIcon","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"SvgIcon"}},"children":{"defaultValue":null,"description":"Children to be rendered inside of ListHeader","name":"children","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":true,"type":{"name":"ReactNode"}},"icon":{"defaultValue":null,"description":"icon to be rendered inside of ListHeader","name":"icon","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},"isHovered":{"defaultValue":null,"description":"whether or not the parent is hovered","name":"isHovered","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"boolean"}},"size":{"defaultValue":null,"description":"Changes size of the ListHeader.","name":"size","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"enum","raw":"ListHeaderSize","value":[{"value":"\"small\""},{"value":"\"medium\""},{"value":"\"large\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"string"}}}}
1
+ {"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the ListHeader element.","name":"className","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"string"}},"chevronIcon":{"defaultValue":null,"description":"Chevron to render inside of the ListHeader","name":"chevronIcon","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"SvgIcon"}},"children":{"defaultValue":null,"description":"Children to be rendered inside of ListHeader","name":"children","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":true,"type":{"name":"ReactNode"}},"titleHtmlMarkup":{"defaultValue":null,"description":"Changes the underlying element of the title. Default: h2","name":"titleHtmlMarkup","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"enum","raw":"TitleTags","value":[{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"span\""}]}},"icon":{"defaultValue":null,"description":"icon to be rendered inside of ListHeader","name":"icon","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},"isHovered":{"defaultValue":null,"description":"whether or not the parent is hovered","name":"isHovered","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"boolean"}},"size":{"defaultValue":null,"description":"Changes size of the ListHeader.","name":"size","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"enum","raw":"ListHeaderSize","value":[{"value":"\"small\""},{"value":"\"medium\""},{"value":"\"large\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"},"declarations":[{"fileName":"src/components/ListHeader/ListHeader.tsx","name":"ListHeaderProps"}],"required":false,"type":{"name":"string"}}}}
@@ -19,7 +19,13 @@
19
19
  &--top-align-content {
20
20
  align-items: flex-start;
21
21
  }
22
-
22
+ &__title {
23
+ font-size: inherit;
24
+ font-weight: inherit;
25
+ line-height: inherit;
26
+ padding: 0;
27
+ margin: 0;
28
+ }
23
29
  &__content {
24
30
  border-bottom: 1px solid transparent;
25
31
  display: flex;
@@ -26,6 +26,7 @@ export type Styles = {
26
26
  'list-header__icon--for-element-content--large': string;
27
27
  'list-header__icon--for-element-content--medium': string;
28
28
  'list-header__icon--for-string-content': string;
29
+ 'list-header__title': string;
29
30
  'list-header--for-element-content': string;
30
31
  'list-header--top-align-content': string;
31
32
  statusDot: string;
@@ -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.2",
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"}