@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 +15 -2
- package/ListHeader.js +1 -1
- package/ListHeader.js.map +1 -1
- package/components/Checkbox/styles.module.scss +4 -4
- package/components/ListHeader/ListHeader.d.ts.map +1 -1
- package/components/RadioButton/styles.module.scss +5 -5
- package/components/Select/styles.module.scss +1 -1
- package/components/Textarea/styles.module.scss +1 -9
- package/components/Textarea/styles.module.scss.d.ts +0 -1
- package/package.json +1 -1
- package/scss/_input.scss +3 -3
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-
|
|
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
|
|
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: $
|
|
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 $
|
|
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: $
|
|
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: $
|
|
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;
|
|
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: $
|
|
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 $
|
|
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: $
|
|
169
|
+
color: $cherry600;
|
|
170
170
|
|
|
171
171
|
&:hover {
|
|
172
172
|
background-color: $cherry100;
|
|
173
173
|
}
|
|
174
174
|
|
|
175
175
|
&:checked {
|
|
176
|
-
color: $
|
|
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: $
|
|
235
|
+
background-color: $cherry600;
|
|
236
236
|
}
|
|
237
237
|
}
|
|
@@ -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: $
|
|
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
package/scss/_input.scss
CHANGED
|
@@ -98,12 +98,12 @@
|
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
&--invalid {
|
|
101
|
-
border-color: $
|
|
101
|
+
border-color: $cherry600;
|
|
102
102
|
|
|
103
103
|
&:hover {
|
|
104
104
|
background: $cherry100;
|
|
105
|
-
border-color: $
|
|
106
|
-
box-shadow: 0px 0px 0px 2px $
|
|
105
|
+
border-color: $cherry600;
|
|
106
|
+
box-shadow: 0px 0px 0px 2px $cherry600;
|
|
107
107
|
}
|
|
108
108
|
&:focus-within {
|
|
109
109
|
background: $white;
|