@helsenorge/designsystem-react 2.10.0 → 2.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ ## [2.10.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.9.3&targetVersion=GTv2.10.0) (2023-01-03)
2
+
3
+
4
+ ### Features
5
+
6
+ * nytt komponent linkheader og linkheadertext som brukes i expanderlist og linklist ([5842ffe](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/5842ffe5d547d9f34b61c2409c9aeb957fcb947f)), closes [#289118](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/289118)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * oneliner får ikke unødvendig spacing ([4f1ac33](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/4f1ac33b8405c89f625939454e2600cf9eb2e0a3))
12
+
1
13
  ## [2.9.3](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.9.2&targetVersion=GTv2.9.3) (2022-12-13)
2
14
 
3
15
 
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 k}from"./utils/component.js";const K=(o,_,d,i,l)=>k(o,f)?s.cloneElement(o,{chevronIcon:_,icon:l,isHovered:d,size:i}):o&&s.createElement(f,{chevronIcon:_,icon:l,isHovered:d,size:i},o),v=(o,_=!1)=>{var p,g;let d,i=[],l,c=[],h=[];s.Children.map(o,r=>{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 n=d!==void 0||i.length>0||l!==void 0&&c.length>0;return _||n||h.length===0?{avatarChild:d,listHeaderTextChildren:i,badgeChild:l,stringChildren:c,remainingChildren:h}:v((g=(p=h[0])==null?void 0:p.props)==null?void 0:g.children,!0)},f=s.forwardRef((o,_)=>{const{className:d="",chevronIcon:i,children:l,icon:c,isHovered:h,size:n,testId:p}=o,g=T(),r=n!=="small"&&!!(i||c),t=typeof l=="string",a=v(l),b=a.avatarChild||a.listHeaderTextChildren&&a.listHeaderTextChildren.length>0||a.remainingChildren&&a.remainingChildren.length>0,E=m(e["list-header"],{[e["list-header--for-element-content"]]:!t,[e["list-header--top-align-content"]]:b},d),u=m(e["list-header__badge"],{[e["list-header__badge--for-string-content"]]:t,[e["list-header__badge--right"]]:!t,[e["list-header__badge--"+n]]:!t&&n}),N=m(e["list-header__chevron"],{[e["list-header__chevron--for-string-content"]]:t,[e["list-header__chevron--right"]]:!a.badgeChild,[e["list-header__chevron--"+n]]:!t&&n}),x=m(e["list-header__content"],{[e["list-header__content--string"]]:t,[e["list-header__content--element"]]:!t,[e["list-header__content--spacing"]]:!a.avatarChild&&!c}),H=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--"+n]]:!t&&n}),y=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--"+n]]:!t&&n});return s.createElement("div",{"data-testid":p,className:E},r&&c&&s.createElement("span",{className:H},s.cloneElement(c,{size:g===A.xs?C.XSmall:C.Small,isHovered:h})),n!=="small"&&a.avatarChild&&s.createElement("span",{className:y},a.avatarChild),s.createElement("span",{className:x},a.listHeaderTextChildren,a.stringChildren,a.remainingChildren),a.badgeChild&&s.createElement("span",{className:u},a.badgeChild),r&&i&&s.createElement("span",{className:N},s.createElement(B,{svgIcon:i,isHovered:h,size:C.XSmall})))});export{f as L,v as m,K as r};
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 k}from"./utils/component.js";const K=(o,_,d,l,i)=>k(o,f)?s.cloneElement(o,{chevronIcon:_,icon:i,isHovered:d,size:l}):o&&s.createElement(f,{chevronIcon:_,icon:i,isHovered:d,size:l},o),v=(o,_=!1)=>{var p,g;let d,l=[],i,c=[],h=[];s.Children.map(o,a=>{a!==null&&(a.type===I?d=a:a.type===S?l.push(a):a.type===L?i=a:typeof a=="string"?c.push(a):h.push(a))});const r=d!==void 0||l.length>0||i!==void 0&&c.length>0;return _||r||h.length===0?{avatarChild:d,listHeaderTextChildren:l,badgeChild:i,stringChildren:c,remainingChildren:h}:v((g=(p=h[0])==null?void 0:p.props)==null?void 0:g.children,!0)},f=s.forwardRef((o,_)=>{const{className:d="",chevronIcon:l,children:i,icon:c,isHovered:h,size:r,testId:p}=o,g=T(),a=r!=="small"&&!!(l||c),t=typeof i=="string",n=v(i),b=n.avatarChild||n.listHeaderTextChildren&&n.listHeaderTextChildren.length>0||n.remainingChildren&&n.remainingChildren.length>0,u=m(e["list-header"],{[e["list-header--for-element-content"]]:!t,[e["list-header--top-align-content"]]:b},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--"+r]]:!t&&r}),N=m(e["list-header__chevron"],{[e["list-header__chevron--for-string-content"]]:t,[e["list-header__chevron--right"]]:!n.badgeChild,[e["list-header__chevron--"+r]]:!t&&r}),x=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}),H=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--"+r]]:!t&&r}),y=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--"+r]]:!t&&r});return s.createElement("div",{"data-testid":p,className:u},a&&c&&s.createElement("span",{className:H},s.cloneElement(c,{size:g===A.xs?C.XSmall:C.Small,isHovered:h})),r!=="small"&&n.avatarChild&&s.createElement("span",{className:y},n.avatarChild),s.createElement("span",{className:x},n.listHeaderTextChildren,n.stringChildren,n.remainingChildren),n.badgeChild&&s.createElement("span",{className:E},n.badgeChild),a&&l&&s.createElement("span",{className:N},s.createElement(B,{svgIcon:l,isHovered:h,size:C.XSmall})))});export{f as L,v as m,K 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 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\n return isJsxChild || hasSpecialChildren || remainingChildren.length === 0\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","_b","_a","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';\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) 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\n return isJsxChild || hasSpecialChildren || remainingChildren.length === 0\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","_b","_a","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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"}
@@ -92,7 +92,8 @@
92
92
  color: $blueberry700;
93
93
  }
94
94
 
95
- &:focus {
95
+ &:focus,
96
+ &:focus-visible {
96
97
  outline: getSpacer(4xs) solid $black;
97
98
  }
98
99
 
@@ -118,7 +118,8 @@
118
118
  background-color: $neutral50;
119
119
  }
120
120
  }
121
- &:focus {
121
+ &:focus,
122
+ &:focus-visible {
122
123
  outline: getSpacer(4xs) solid $black;
123
124
  outline-offset: -1px;
124
125
  }
@@ -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;CA8B9B,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;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;CA+B9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAqEvB,CAAC;AAEH,eAAe,UAAU,CAAC"}
@@ -40,7 +40,8 @@
40
40
  &--spacing {
41
41
  margin-left: getSpacer(s);
42
42
  }
43
- :focus > & {
43
+ :focus > &,
44
+ :focus-visible > & {
44
45
  border-color: $black;
45
46
  }
46
47
  }
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.10.0",
6
+ "version": "2.10.1",
7
7
  "author": "Helsenorge",
8
8
  "license": "MIT",
9
9
  "peerDependencies": {