@helsenorge/designsystem-react 2.11.1 → 2.11.2

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,16 @@
1
+ ## [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
+
3
+
4
+ ### Features
5
+
6
+ * legger til props til Input ([7951a84](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/7951a84f5af1dc7c432456e3ebf26d4227774cf8)), closes [#222638](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/222638)
7
+ * **designsystem:** aria-required for select ([4415849](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/4415849b74a53565a7af459091a915e0f6d01d90)), closes [#291043](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/291043)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * endrer farge på tekst. Gir bedre kontrast ([e29be2b](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/e29be2b7dc784ea57daabb20d7ce08c8a017708e)), closes [#290655](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/290655)
13
+
1
14
  ## [2.10.1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.10.0&targetVersion=GTv2.10.1) (2023-01-03)
2
15
 
3
16
 
@@ -233,7 +246,7 @@
233
246
 
234
247
  ## 2.0.0-beta.1 (2022-09-15)
235
248
 
236
- ## 2.0.0-beta.0 (2022-09-12)
249
+ ## 2.0.0-beta.0 (2022-09-15)
237
250
 
238
251
 
239
252
  ### Features
@@ -335,8 +348,8 @@
335
348
 
336
349
  ### Bug Fixes
337
350
 
338
- * økt kontrast på understreking av lenker ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
339
351
  * panel har avstand fra tittel til badge ([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes [#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
352
+ * økt kontrast på understreking av lenker ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
340
353
 
341
354
  ## [1.2.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
342
355
 
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,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};
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};
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) 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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"}
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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"}
@@ -6,7 +6,7 @@
6
6
  .checkbox-errors {
7
7
  font-size: $font-size-sm;
8
8
  font-weight: 600;
9
- color: $cherry500;
9
+ color: $cherry600;
10
10
  margin-top: 0;
11
11
  }
12
12
 
@@ -16,7 +16,7 @@
16
16
  &--with-error {
17
17
  padding: getSpacer(s) getSpacer(2xs) getSpacer(m);
18
18
  background-color: $cherry100;
19
- border-left: 0.25rem solid $cherry500;
19
+ border-left: 0.25rem solid $cherry600;
20
20
 
21
21
  @media (min-width: map-get($grid-breakpoints, md)) {
22
22
  padding: getSpacer(s) getSpacer(m) getSpacer(l);
@@ -155,14 +155,14 @@
155
155
  }
156
156
 
157
157
  &--invalid {
158
- color: $cherry500;
158
+ color: $cherry600;
159
159
 
160
160
  :hover > & {
161
161
  background-color: $cherry100;
162
162
  }
163
163
 
164
164
  &.checkbox__icon-wrapper--checked {
165
- color: $cherry500;
165
+ color: $cherry600;
166
166
  }
167
167
 
168
168
  :active > & {
@@ -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;CA+B9B,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;CAgC9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAqEvB,CAAC;AAEH,eAAe,UAAU,CAAC"}
@@ -6,7 +6,7 @@
6
6
  .radio-button-errors {
7
7
  font-size: $font-size-sm;
8
8
  font-weight: 600;
9
- color: $cherry500;
9
+ color: $cherry600;
10
10
  margin-top: 0;
11
11
  }
12
12
 
@@ -18,7 +18,7 @@
18
18
  padding: getSpacer(s) getSpacer(2xs) getSpacer(m);
19
19
  background-color: $cherry100;
20
20
  margin-left: -0.75rem;
21
- border-left: 0.25rem solid $cherry500;
21
+ border-left: 0.25rem solid $cherry600;
22
22
 
23
23
  @media (min-width: map-get($grid-breakpoints, md)) {
24
24
  padding: getSpacer(s) getSpacer(m) getSpacer(l);
@@ -166,14 +166,14 @@
166
166
  }
167
167
 
168
168
  &--invalid {
169
- color: $cherry500;
169
+ color: $cherry600;
170
170
 
171
171
  &:hover {
172
172
  background-color: $cherry100;
173
173
  }
174
174
 
175
175
  &:checked {
176
- color: $cherry500;
176
+ color: $cherry600;
177
177
 
178
178
  &:hover {
179
179
  background-color: $cherry100;
@@ -232,6 +232,6 @@
232
232
  }
233
233
 
234
234
  &--invalid:checked::before {
235
- background-color: $cherry500;
235
+ background-color: $cherry600;
236
236
  }
237
237
  }
@@ -91,7 +91,7 @@
91
91
  outline-color: $blueberry500;
92
92
  }
93
93
  &--invalid {
94
- outline-color: $cherry500;
94
+ outline-color: $cherry600;
95
95
  }
96
96
 
97
97
  :hover > & {
@@ -7,14 +7,6 @@
7
7
  .textarea {
8
8
  @include input-wrapper;
9
9
 
10
- &__error-text {
11
- font-size: $font-size-sm;
12
- line-height: $font-size-sm;
13
- font-weight: 600;
14
- color: $cherry500;
15
- margin-top: 0;
16
- }
17
-
18
10
  &--gutterBottom {
19
11
  margin-bottom: getSpacer(s);
20
12
  }
@@ -40,7 +32,7 @@
40
32
  color: $white;
41
33
  }
42
34
  &--invalid {
43
- color: $cherry500;
35
+ color: $cherry600;
44
36
  font-weight: 600;
45
37
  }
46
38
  }
@@ -13,7 +13,6 @@ export type Styles = {
13
13
  'textarea__counter-wrapper': string;
14
14
  'textarea__counter-wrapper--invalid': string;
15
15
  'textarea__counter-wrapper--on-dark': string;
16
- 'textarea__error-text': string;
17
16
  'textarea__label-wrapper': string;
18
17
  'textarea__label-wrapper--on-dark': string;
19
18
  'textarea--gutterBottom': string;
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.1",
6
+ "version": "2.11.2",
7
7
  "author": "Helsenorge",
8
8
  "license": "MIT",
9
9
  "peerDependencies": {
package/scss/_input.scss CHANGED
@@ -98,12 +98,12 @@
98
98
  }
99
99
  }
100
100
  &--invalid {
101
- border-color: $cherry500;
101
+ border-color: $cherry600;
102
102
 
103
103
  &:hover {
104
104
  background: $cherry100;
105
- border-color: $cherry500;
106
- box-shadow: 0px 0px 0px 2px $cherry500;
105
+ border-color: $cherry600;
106
+ box-shadow: 0px 0px 0px 2px $cherry600;
107
107
  }
108
108
  &:focus-within {
109
109
  background: $white;