@helsenorge/designsystem-react 10.0.0-beta.1 → 10.0.0-beta.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 +7 -0
- package/ListHeader.js +3 -3
- package/ListHeader.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## 10.0.0-beta.1 (2024-12-18)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **emptystate:** behold bredden på illustrasjon ([058c7f9](https://github.com/helsenorge/designsystem/commit/058c7f94fa84b96ff58944c6e7696cd44af01a07)), closes [#336772](https://github.com/helsenorge/designsystem/issues/336772)
|
|
7
|
+
|
|
1
8
|
## 10.0.0-beta.0 (2024-12-17)
|
|
2
9
|
|
|
3
10
|
|
package/ListHeader.js
CHANGED
|
@@ -56,7 +56,7 @@ const mapChildren = (children, isJsxChild = false) => {
|
|
|
56
56
|
const ListHeader = (props) => {
|
|
57
57
|
const { className = "", titleHtmlMarkup = "h2", chevronIcon, children, icon, isHovered, size, testId } = props;
|
|
58
58
|
const breakpoint = useBreakpoint();
|
|
59
|
-
const
|
|
59
|
+
const showIcon = size !== "small" && !!icon;
|
|
60
60
|
const contentIsString = typeof children === "string";
|
|
61
61
|
const mappedChildren = mapChildren(children);
|
|
62
62
|
const listLabelClasses = classNames(styles["list-header"], className);
|
|
@@ -70,7 +70,7 @@ const ListHeader = (props) => {
|
|
|
70
70
|
const avatarClasses = classNames(styles["list-header__avatar"], {});
|
|
71
71
|
const CustomTag = titleHtmlMarkup;
|
|
72
72
|
return /* @__PURE__ */ jsxs("span", { "data-testid": testId, className: listLabelClasses, children: [
|
|
73
|
-
|
|
73
|
+
showIcon && icon && /* @__PURE__ */ jsx("span", { className: iconClasses, children: React.cloneElement(icon, {
|
|
74
74
|
size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,
|
|
75
75
|
isHovered
|
|
76
76
|
}) }),
|
|
@@ -84,7 +84,7 @@ const ListHeader = (props) => {
|
|
|
84
84
|
const id = uuid();
|
|
85
85
|
return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: badgeChild }, id);
|
|
86
86
|
}) }),
|
|
87
|
-
|
|
87
|
+
chevronIcon && /* @__PURE__ */ jsx("span", { className: chevronClasses, children: /* @__PURE__ */ jsx(Icon, { svgIcon: chevronIcon, isHovered, size: IconSize.XSmall }) })
|
|
88
88
|
] });
|
|
89
89
|
};
|
|
90
90
|
ListHeader.displayName = "ListHeader";
|
package/ListHeader.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport uuid from '../../utils/uuid';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.FC<ListHeaderProps> {\n Avatar?: AvatarType;\n Badge?: BadgeType;\n ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n element: React.ReactNode,\n titleHtmlMarkup: TitleTags,\n isHovered: boolean,\n size: ListHeaderSize,\n chevronIcon?: SvgIcon,\n icon?: React.ReactElement\n): JSX.Element | undefined => {\n if (isComponent<ListHeaderProps>(element, ListHeader)) {\n return React.cloneElement(element, {\n chevronIcon,\n icon,\n isHovered,\n size,\n });\n }\n if (element) {\n return (\n <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n {element}\n </ListHeader>\n );\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\ninterface ListHeaderChildren {\n avatarChild?: React.ReactElement<AvatarProps>;\n listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n badgeChildren?: React.ReactElement<BadgeProps>[];\n elementChild?: React.ReactElement;\n stringChildren: string[];\n remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n let avatarChild: React.ReactElement<AvatarProps> | undefined;\n const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n const stringChildren: string[] = [];\n const remainingChildren: React.ReactNode[] = [];\n\n React.Children.forEach(children, child => {\n if (child === null || typeof child === 'undefined') return;\n if (isComponent<AvatarProps>(child, Avatar)) {\n avatarChild = child;\n } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n listHeaderTextChildren.push(child);\n } else if (isComponent<BadgeProps>(child, Badge)) {\n badgeChildren.push(child);\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 || (badgeChildren !== undefined && stringChildren.length > 0);\n const noRemainingRecursiveChildren =\n remainingChildren.length === 0 ||\n (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n return { avatarChild, listHeaderTextChildren, badgeChildren, stringChildren, remainingChildren };\n }\n\n if (isComponentWithChildren(remainingChildren[0])) {\n return mapChildren(remainingChildren[0]?.props?.children, true);\n }\n};\n\nexport const ListHeader: ListHeaderType = props => {\n const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n const breakpoint = useBreakpoint();\n const
|
|
1
|
+
{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport uuid from '../../utils/uuid';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.FC<ListHeaderProps> {\n Avatar?: AvatarType;\n Badge?: BadgeType;\n ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n element: React.ReactNode,\n titleHtmlMarkup: TitleTags,\n isHovered: boolean,\n size: ListHeaderSize,\n chevronIcon?: SvgIcon,\n icon?: React.ReactElement\n): JSX.Element | undefined => {\n if (isComponent<ListHeaderProps>(element, ListHeader)) {\n return React.cloneElement(element, {\n chevronIcon,\n icon,\n isHovered,\n size,\n });\n }\n if (element) {\n return (\n <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n {element}\n </ListHeader>\n );\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\ninterface ListHeaderChildren {\n avatarChild?: React.ReactElement<AvatarProps>;\n listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n badgeChildren?: React.ReactElement<BadgeProps>[];\n elementChild?: React.ReactElement;\n stringChildren: string[];\n remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n let avatarChild: React.ReactElement<AvatarProps> | undefined;\n const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n const stringChildren: string[] = [];\n const remainingChildren: React.ReactNode[] = [];\n\n React.Children.forEach(children, child => {\n if (child === null || typeof child === 'undefined') return;\n if (isComponent<AvatarProps>(child, Avatar)) {\n avatarChild = child;\n } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n listHeaderTextChildren.push(child);\n } else if (isComponent<BadgeProps>(child, Badge)) {\n badgeChildren.push(child);\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 || (badgeChildren !== undefined && stringChildren.length > 0);\n const noRemainingRecursiveChildren =\n remainingChildren.length === 0 ||\n (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n return { avatarChild, listHeaderTextChildren, badgeChildren, stringChildren, remainingChildren };\n }\n\n if (isComponentWithChildren(remainingChildren[0])) {\n return mapChildren(remainingChildren[0]?.props?.children, true);\n }\n};\n\nexport const ListHeader: ListHeaderType = props => {\n const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n const breakpoint = useBreakpoint();\n const showIcon = size !== 'small' && !!icon;\n const contentIsString = typeof children === 'string';\n const mappedChildren = mapChildren(children);\n\n const listLabelClasses = cn(styles['list-header'], className);\n const badgeContainerClasses = cn(styles['list-header__badge-container']);\n const badgeClasses = cn(styles['list-header__badge']);\n const chevronClasses = cn(styles['list-header__chevron']);\n const contentClasses = cn(styles['list-header__content'], {\n [styles['list-header__content--element']]: !contentIsString,\n });\n const iconClasses = cn(styles['list-header__icon'], {});\n const avatarClasses = cn(styles['list-header__avatar'], {});\n const CustomTag = titleHtmlMarkup;\n return (\n <span data-testid={testId} className={listLabelClasses}>\n {showIcon && 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 && (\n <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n )}\n <span className={contentClasses}>\n {mappedChildren?.listHeaderTextChildren}\n {!!mappedChildren?.stringChildren.length && (\n <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n )}\n {mappedChildren?.remainingChildren}\n </span>\n\n <span className={badgeContainerClasses}>\n {mappedChildren?.badgeChildren &&\n mappedChildren.badgeChildren.map(badgeChild => {\n const id = uuid();\n return (\n <span key={id} className={badgeClasses}>\n {badgeChild}\n </span>\n );\n })}\n </span>\n {chevronIcon && (\n <span className={chevronClasses}>\n <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n </span>\n )}\n </span>\n );\n};\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["cn"],"mappings":"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"}
|
package/package.json
CHANGED