@helsenorge/designsystem-react 10.0.0-beta.1 → 10.0.0-beta.3

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 10.0.0-beta.2 (2024-12-20)
+
+
+### Features
+
+*  arialabels prop for og fikset disabled dager feil ([e57ba55](https://github.com/helsenorge/designsystem/commit/e57ba55e4a2be478c659ec0515290aebed28674c)), closes [#331806](https://github.com/helsenorge/designsystem/issues/331806)
+* **listheader:**  tillat chevron på linklist size small ([9e93688](https://github.com/helsenorge/designsystem/commit/9e9368842dffb8b26c14dfd914376bc3b002c88c)), closes [#340288](https://github.com/helsenorge/designsystem/issues/340288)
+
+## 10.0.0-beta.1 (2024-12-18)
+
+
+### Bug Fixes
+
+* **emptystate:**  behold bredden på illustrasjon ([058c7f9](https://github.com/helsenorge/designsystem/commit/058c7f94fa84b96ff58944c6e7696cd44af01a07)), closes [#336772](https://github.com/helsenorge/designsystem/issues/336772)
+
 ## 10.0.0-beta.0 (2024-12-17)
 
 

package/Label.js

@@ -54,7 +54,7 @@ const renderLabelAsParent = (label, children, inputId, onColor, labelClassName,
   }) : typeof label === "string" && /* @__PURE__ */ jsx(
     Label,
     {
-      labelTexts: [{ text: label }],
+      labelTexts: [{ text: label, type: "subdued" }],
       htmlFor: inputId,
       onColor,
       htmlMarkup: markup || "label",

package/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['label--sublabel'], {\n          [styles['label--subdued']]: sublabelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {subLabels && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  children?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, onColor: FormOnColor, markup?: LabelTags): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            htmlMarkup: markup || 'label',\n            onColor,\n          })\n        : typeof label === 'string' && <Label labelTexts={[{ text: label, type: 'normal' }]} htmlFor={inputId} onColor={onColor} />}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  onColor: FormOnColor,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  large?: boolean,\n  markup?: LabelTags\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            onColor,\n            children: children,\n            labelClassName: cn(labelClassName, label.props.labelClassName),\n            labelTextClassName: labelTextClassName,\n            htmlMarkup: markup || 'label',\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: large ? undefined : label.props.sublabel,\n            statusDot: large ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label }]}\n              htmlFor={inputId}\n              onColor={onColor}\n              htmlMarkup={markup || 'label'}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        <div className={sublabelWrapperClassName}>\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n"],"names":["cn"],"mappings":"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"}
+{"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['label--sublabel'], {\n          [styles['label--subdued']]: sublabelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {subLabels && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  children?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, onColor: FormOnColor, markup?: LabelTags): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            htmlMarkup: markup || 'label',\n            onColor,\n          })\n        : typeof label === 'string' && <Label labelTexts={[{ text: label, type: 'normal' }]} htmlFor={inputId} onColor={onColor} />}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  onColor: FormOnColor,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  large?: boolean,\n  markup?: LabelTags\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            onColor,\n            children: children,\n            labelClassName: cn(labelClassName, label.props.labelClassName),\n            labelTextClassName: labelTextClassName,\n            htmlMarkup: markup || 'label',\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: large ? undefined : label.props.sublabel,\n            statusDot: large ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label, type: 'subdued' }]}\n              htmlFor={inputId}\n              onColor={onColor}\n              htmlMarkup={markup || 'label'}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        <div className={sublabelWrapperClassName}>\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n"],"names":["cn"],"mappings":"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"}

package/ListHeader.js

@@ -56,7 +56,7 @@ const mapChildren = (children, isJsxChild = false) => {
 const ListHeader = (props) => {
   const { className = "", titleHtmlMarkup = "h2", chevronIcon, children, icon, isHovered, size, testId } = props;
   const breakpoint = useBreakpoint();
-  const showChevronAndIcon = size !== "small" && !!(chevronIcon || icon);
+  const showIcon = size !== "small" && !!icon;
   const contentIsString = typeof children === "string";
   const mappedChildren = mapChildren(children);
   const listLabelClasses = classNames(styles["list-header"], className);
@@ -70,7 +70,7 @@ const ListHeader = (props) => {
   const avatarClasses = classNames(styles["list-header__avatar"], {});
   const CustomTag = titleHtmlMarkup;
   return /* @__PURE__ */ jsxs("span", { "data-testid": testId, className: listLabelClasses, children: [
-    showChevronAndIcon && icon && /* @__PURE__ */ jsx("span", { className: iconClasses, children: React.cloneElement(icon, {
+    showIcon && icon && /* @__PURE__ */ jsx("span", { className: iconClasses, children: React.cloneElement(icon, {
       size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,
       isHovered
     }) }),
@@ -84,7 +84,7 @@ const ListHeader = (props) => {
       const id = uuid();
       return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: badgeChild }, id);
     }) }),
-    showChevronAndIcon && chevronIcon && /* @__PURE__ */ jsx("span", { className: chevronClasses, children: /* @__PURE__ */ jsx(Icon, { svgIcon: chevronIcon, isHovered, size: IconSize.XSmall }) })
+    chevronIcon && /* @__PURE__ */ jsx("span", { className: chevronClasses, children: /* @__PURE__ */ jsx(Icon, { svgIcon: chevronIcon, isHovered, size: IconSize.XSmall }) })
   ] });
 };
 ListHeader.displayName = "ListHeader";

package/ListHeader.js.map

@@ -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 showChevronAndIcon = size !== 'small' && !!(chevronIcon || 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      {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 && (\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      {showChevronAndIcon && 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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"}
+{"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

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "10.0.0-beta.1",
+  "version": "10.0.0-beta.3",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {