npm - @helsenorge/designsystem-react - Versions diffs - 15.0.0 → 15.2.0 - Mend

@helsenorge/designsystem-react 15.0.0 → 15.2.0

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.

Files changed (53) hide show

package/lib/Button.js CHANGED Viewed

@@ -17,8 +17,8 @@ var getIconColor = (fill, borderless, disabled, concept, ondark, mobile) => {
 	if (fill && !ondark || !fill && ondark) return "white";
 	return concept === "normal" ? getColor("blueberry", 600) : getColor("cherry", 500);
 };
-var getLargeIconSize = (large, mobile) => {
-	if (mobile && large) return IconSize.Small;
+var getIconSize = (large, mobile, isBorderless) => {
+	if (isBorderless && large || mobile && large) return IconSize.Small;
 	if (large) return IconSize.Medium;
 	return IconSize.XSmall;
 };
@@ -39,14 +39,16 @@ var Button = (props) => {
 	const borderlessVariant = variant === "borderless";
 	const iconColor = getIconColor(variant === "fill", borderlessVariant, disabled, concept, onDark, isMobile);
 	const hasArrow = arrow === "icon" && !borderlessVariant;
-	const large = size === "large" && !destructive && !borderlessVariant;
+	const large = size === "large" && !destructive;
+	const largeBorderless = large && borderlessVariant;
 	const hasUURightArrow = arrow === "accessibility-character" && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;
 	const rest = { ...restProps };
 	const buttonWrapperClasses = classNames(buttonStyles["button-wrapper"], { [buttonStyles["button-wrapper--fluid"]]: fluid || ellipsis }, wrapperClassName);
 	const buttonClasses = classNames(buttonStyles.button, {
 		[buttonStyles["button--destructive"]]: destructive,
-		[buttonStyles["button--normal"]]: !large,
-		[buttonStyles["button--large"]]: large,
+		[buttonStyles["button--medium"]]: !large,
+		[buttonStyles["button--large-non-borderless"]]: large && !largeBorderless,
+		[buttonStyles["button--large-borderless"]]: largeBorderless,
 		[buttonStyles["button--outline"]]: outlineVariant,
 		[buttonStyles["button--borderless"]]: borderlessVariant,
 		[buttonStyles["button--left-icon"]]: leftIcon && !onlyIcon,
@@ -82,20 +84,23 @@ var Button = (props) => {
 			}), /* @__PURE__ */ jsx("span", { children: onlyIcon ? ariaLabel : restChildren })]
 		});
 	};
-	const renderbuttonContentWrapper = () => /* @__PURE__ */ jsxs("span", {
-		className: buttonClasses,
-		children: [
-			renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles["button__left-icon"] : void 0),
-			renderButtonContent(),
-			hasArrow ? renderIcon(/* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight }), getLargeIconSize(large, isMobile), classNames(buttonStyles["button__arrow"], { [buttonStyles["button__arrow--both-icons"]]: bothIcons })) : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles["button__right-icon"]),
-			hasUURightArrow && /* @__PURE__ */ jsx("span", {
-				style: { color: iconColor },
-				className: buttonStyles["button__right-unicode-arrow"],
-				"aria-hidden": true,
-				children: "  →"
-			})
-		]
-	});
+	const renderbuttonContentWrapper = () => {
+		const iconSize = getIconSize(large, isMobile, borderlessVariant);
+		return /* @__PURE__ */ jsxs("span", {
+			className: buttonClasses,
+			children: [
+				renderIcon(leftIcon, iconSize, !onlyIcon ? buttonStyles["button__left-icon"] : void 0),
+				renderButtonContent(),
+				hasArrow ? renderIcon(/* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight }), iconSize, classNames(buttonStyles["button__arrow"], { [buttonStyles["button__arrow--both-icons"]]: bothIcons })) : renderIcon(rightIcon, iconSize, buttonStyles["button__right-icon"]),
+				hasUURightArrow && /* @__PURE__ */ jsx("span", {
+					style: { color: iconColor },
+					className: buttonStyles["button__right-unicode-arrow"],
+					"aria-hidden": true,
+					children: "  →"
+				})
+			]
+		});
+	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [htmlMarkup === "button" && /* @__PURE__ */ jsx("button", {
 		id,
 		onBlur,

package/lib/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"sourcesContent":["import React, { type AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { type HTMLButtonProps, type HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { type BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' \| 'destructive';\nexport type ButtonVariant = 'fill' \| 'outline' \| 'borderless';\nexport type ButtonSize = 'medium' \| 'large';\nexport type ButtonOnColor = 'onlight' \| 'ondark';\nexport type ButtonTags = 'button' \| 'a';\nexport type ButtonArrows = 'icon' \| 'accessibility-character';\nexport type ButtonTextPosition = 'left' \| 'centered';\n\nexport interface ButtonProps extends Omit<HTMLButtonProps, 'onClick' \| 'type'>, Omit<HTMLAnchorProps, 'onClick'>, AriaAttributes {\n /** Sets the aria-label of the button, use when the button only includes an icon /\n ariaLabel?: string;\n /* Gives a unique id to the button /\n id?: string;\n /* Sets the content of the button. /\n children: React.ReactNode;\n /* Adds custom classes to the wrapper element. /\n wrapperClassName?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Enables an arrow icon to the right inside the button (Not available in borderless variant) /\n arrow?: ButtonArrows;\n /* Changes the intent of the button. Mostly changes the color profile. /\n concept?: ButtonConcept;\n /* Disables text wrapping and enables ellipsis. /\n ellipsis?: boolean;\n /* Makes the button scale to full width of its parent element. /\n fluid?: boolean;\n /* Changes the underlying element of the button. /\n htmlMarkup?: ButtonTags;\n /* Changes the button colors for different backgrounds. /\n onColor?: ButtonOnColor;\n /* Function that is called when the Button loses focus /\n onBlur?: () => void;\n /* Function that is called when clicked /\n onClick?: (\n e?: React.MouseEvent<HTMLElement, MouseEvent> \| React.FormEvent<unknown> \| React.KeyboardEvent<HTMLUListElement> \| null\n ) => void;\n /* Changes the button colors for different backgrounds. (Large not available in borderless variant) /\n size?: ButtonSize;\n /* Changes the visual representation of the button. /\n variant?: ButtonVariant;\n /* Specifies the focus order relative to the other buttons or controls on the page /\n tabIndex?: number;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Adds custom classes to the text /\n textClassName?: string;\n /* Sets the position of the text in the button - only applies when button is fluid /\n textPosition?: ButtonTextPosition;\n /* Button type. Default: button /\n type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n /* Ref that is passed to the component /\n ref?: React.RefObject<HTMLButtonElement \| HTMLAnchorElement \| null>;\n}\n\nconst getIconColor = (\n fill: boolean,\n borderless: boolean,\n disabled: boolean,\n concept: ButtonConcept,\n ondark: boolean,\n mobile: boolean\n): string => {\n if (mobile && disabled) {\n return !ondark \|\| fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n }\n if (disabled) {\n return !ondark \|\| fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n }\n if ((fill && !ondark) \|\| (!fill && ondark)) {\n return 'white';\n }\n\n return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n if (mobile && large) return IconSize.Small;\n if (large) return IconSize.Medium;\n return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string \| undefined, devEnv: boolean): void => {\n if (devEnv && onlyIcon && (ariaLabel === undefined \|\| ariaLabel === '')) {\n throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n }\n};\n\nconst Button: React.FC<ButtonProps> = props => {\n const {\n ariaLabel,\n id,\n children,\n wrapperClassName,\n className,\n arrow,\n concept = 'normal',\n disabled = false,\n ellipsis = false,\n fluid = false,\n htmlMarkup = 'button',\n onColor = 'onlight',\n onBlur,\n onClick,\n size = 'medium',\n variant = 'fill',\n href,\n tabIndex,\n testId,\n target,\n type = 'button',\n textClassName,\n textPosition = 'left',\n ref,\n ...restProps\n } = props;\n const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement \| HTMLAnchorElement \| null>(ref);\n const buttonContentRef = useRef<HTMLDivElement>(null);\n const onlyIcon = !!(leftIcon \|\| rightIcon) && !restChildren;\n const bothIcons = leftIcon && (rightIcon \|\| arrow) && !onlyIcon;\n const onDark = onColor === 'ondark';\n const isMobile = useIsMobileBreakpoint();\n const destructive = concept === 'destructive' && !disabled;\n const outlineVariant = variant === 'outline';\n const borderlessVariant = variant === 'borderless';\n const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n const hasArrow = arrow === 'icon' && !borderlessVariant;\n const large = size === 'large' && !destructive && !borderlessVariant;\n const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n const rest = { ...restProps };\n\n const buttonWrapperClasses = classNames(\n buttonStyles['button-wrapper'],\n { [buttonStyles['button-wrapper--fluid']]: fluid \|\| ellipsis },\n wrapperClassName\n );\n const buttonClasses = classNames(\n buttonStyles.button,\n {\n [buttonStyles['button--destructive']]: destructive,\n [buttonStyles['button--normal']]: !large,\n [buttonStyles['button--large']]: large,\n [buttonStyles['button--outline']]: outlineVariant,\n [buttonStyles['button--borderless']]: borderlessVariant,\n [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n [buttonStyles['button--both-icons']]: bothIcons,\n [buttonStyles['button--only-icon']]: onlyIcon,\n [buttonStyles['button--arrow']]: hasArrow,\n [buttonStyles['button--on-dark']]: onDark,\n },\n className\n );\n const buttonTextClasses = classNames(\n buttonStyles['button__text'],\n {\n [buttonStyles['button__text--ellipsis']]: ellipsis,\n [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n },\n textClassName\n );\n const diagonalClasses = classNames(buttonStyles['diagonal'], {\n [buttonStyles['diagonal--on-dark']]: onDark,\n });\n\n useEffect(() => {\n checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n }, []);\n\n const renderIcon = (iconElement: BaseIconElement \| null, iconSize: number, iconClassName?: string): BaseIconElement \| null => {\n return iconElement\n ? React.cloneElement(iconElement, {\n size: iconSize,\n color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n className: iconClassName,\n })\n : null;\n };\n\n const renderButtonContent = (): React.ReactNode => {\n return (\n <span className={buttonTextClasses} ref={buttonContentRef}>\n {disabled && borderlessVariant && (\n <span className={diagonalClasses}>\n <span className={buttonStyles['diagonal__line']} />\n </span>\n )}\n <span>{onlyIcon ? ariaLabel : restChildren}</span>\n </span>\n );\n };\n\n const renderbuttonContentWrapper = (): React.ReactNode => (\n <span className={buttonClasses}>\n {renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n {renderButtonContent()}\n {hasArrow\n ? renderIcon(\n <Icon svgIcon={ArrowRight} />,\n getLargeIconSize(large, isMobile),\n classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n )\n : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles['button__right-icon'])}\n {hasUURightArrow && (\n <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n {' →'}\n </span>\n )}\n </span>\n );\n\n return (\n <>\n {htmlMarkup === 'button' && (\n <button\n id={id}\n onBlur={onBlur}\n onClick={onClick}\n disabled={disabled}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Button}\n className={buttonWrapperClasses}\n ref={refObject as React.RefObject<HTMLButtonElement>}\n tabIndex={tabIndex}\n type={type}\n {...rest}\n >\n {renderbuttonContentWrapper()}\n </button>\n )}\n {htmlMarkup === 'a' && (\n <a\n id={id}\n onBlur={onBlur}\n onClick={onClick}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Button}\n className={buttonWrapperClasses}\n href={href}\n target={target}\n rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n ref={refObject as React.RefObject<HTMLAnchorElement>}\n tabIndex={tabIndex}\n {...restProps}\n >\n {renderbuttonContentWrapper()}\n </a>\n )}\n </>\n );\n};\n\nexport default Button;\n","import Button from './Button';\nexport from './Button';\nexport default Button;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"sourcesContent":["import React, { type AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { type HTMLButtonProps, type HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { type BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' \| 'destructive';\nexport type ButtonVariant = 'fill' \| 'outline' \| 'borderless';\nexport type ButtonSize = 'medium' \| 'large';\nexport type ButtonOnColor = 'onlight' \| 'ondark';\nexport type ButtonTags = 'button' \| 'a';\nexport type ButtonArrows = 'icon' \| 'accessibility-character';\nexport type ButtonTextPosition = 'left' \| 'centered';\n\nexport interface ButtonProps extends Omit<HTMLButtonProps, 'onClick' \| 'type'>, Omit<HTMLAnchorProps, 'onClick'>, AriaAttributes {\n /** Sets the aria-label of the button, use when the button only includes an icon /\n ariaLabel?: string;\n /* Gives a unique id to the button /\n id?: string;\n /* Sets the content of the button. /\n children: React.ReactNode;\n /* Adds custom classes to the wrapper element. /\n wrapperClassName?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Enables an arrow icon to the right inside the button (Not available in borderless variant) /\n arrow?: ButtonArrows;\n /* Changes the intent of the button. Mostly changes the color profile. /\n concept?: ButtonConcept;\n /* Disables text wrapping and enables ellipsis. /\n ellipsis?: boolean;\n /* Makes the button scale to full width of its parent element. /\n fluid?: boolean;\n /* Changes the underlying element of the button. /\n htmlMarkup?: ButtonTags;\n /* Changes the button colors for different backgrounds. /\n onColor?: ButtonOnColor;\n /* Function that is called when the Button loses focus /\n onBlur?: () => void;\n /* Function that is called when clicked /\n onClick?: (\n e?: React.MouseEvent<HTMLElement, MouseEvent> \| React.FormEvent<unknown> \| React.KeyboardEvent<HTMLUListElement> \| null\n ) => void;\n /* Changes the button colors for different backgrounds. (Large not available in borderless variant) /\n size?: ButtonSize;\n /* Changes the visual representation of the button. /\n variant?: ButtonVariant;\n /* Specifies the focus order relative to the other buttons or controls on the page /\n tabIndex?: number;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Adds custom classes to the text /\n textClassName?: string;\n /* Sets the position of the text in the button - only applies when button is fluid /\n textPosition?: ButtonTextPosition;\n /* Button type. Default: button /\n type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n /* Ref that is passed to the component /\n ref?: React.RefObject<HTMLButtonElement \| HTMLAnchorElement \| null>;\n}\n\nconst getIconColor = (\n fill: boolean,\n borderless: boolean,\n disabled: boolean,\n concept: ButtonConcept,\n ondark: boolean,\n mobile: boolean\n): string => {\n if (mobile && disabled) {\n return !ondark \|\| fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n }\n if (disabled) {\n return !ondark \|\| fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n }\n if ((fill && !ondark) \|\| (!fill && ondark)) {\n return 'white';\n }\n\n return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getIconSize = (large: boolean, mobile: boolean, isBorderless: boolean): IconSize => {\n if ((isBorderless && large) \|\| (mobile && large)) {\n return IconSize.Small;\n }\n\n if (large) {\n return IconSize.Medium;\n }\n\n return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string \| undefined, devEnv: boolean): void => {\n if (devEnv && onlyIcon && (ariaLabel === undefined \|\| ariaLabel === '')) {\n throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n }\n};\n\nconst Button: React.FC<ButtonProps> = props => {\n const {\n ariaLabel,\n id,\n children,\n wrapperClassName,\n className,\n arrow,\n concept = 'normal',\n disabled = false,\n ellipsis = false,\n fluid = false,\n htmlMarkup = 'button',\n onColor = 'onlight',\n onBlur,\n onClick,\n size = 'medium',\n variant = 'fill',\n href,\n tabIndex,\n testId,\n target,\n type = 'button',\n textClassName,\n textPosition = 'left',\n ref,\n ...restProps\n } = props;\n const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement \| HTMLAnchorElement \| null>(ref);\n const buttonContentRef = useRef<HTMLDivElement>(null);\n const onlyIcon = !!(leftIcon \|\| rightIcon) && !restChildren;\n const bothIcons = leftIcon && (rightIcon \|\| arrow) && !onlyIcon;\n const onDark = onColor === 'ondark';\n const isMobile = useIsMobileBreakpoint();\n const destructive = concept === 'destructive' && !disabled;\n const outlineVariant = variant === 'outline';\n const borderlessVariant = variant === 'borderless';\n const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n const hasArrow = arrow === 'icon' && !borderlessVariant;\n const large = size === 'large' && !destructive;\n const largeBorderless = large && borderlessVariant;\n const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n const rest = { ...restProps };\n\n const buttonWrapperClasses = classNames(\n buttonStyles['button-wrapper'],\n { [buttonStyles['button-wrapper--fluid']]: fluid \|\| ellipsis },\n wrapperClassName\n );\n const buttonClasses = classNames(\n buttonStyles.button,\n {\n [buttonStyles['button--destructive']]: destructive,\n [buttonStyles['button--medium']]: !large,\n [buttonStyles['button--large-non-borderless']]: large && !largeBorderless,\n [buttonStyles['button--large-borderless']]: largeBorderless,\n [buttonStyles['button--outline']]: outlineVariant,\n [buttonStyles['button--borderless']]: borderlessVariant,\n [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n [buttonStyles['button--both-icons']]: bothIcons,\n [buttonStyles['button--only-icon']]: onlyIcon,\n [buttonStyles['button--arrow']]: hasArrow,\n [buttonStyles['button--on-dark']]: onDark,\n },\n className\n );\n const buttonTextClasses = classNames(\n buttonStyles['button__text'],\n {\n [buttonStyles['button__text--ellipsis']]: ellipsis,\n [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n },\n textClassName\n );\n const diagonalClasses = classNames(buttonStyles['diagonal'], {\n [buttonStyles['diagonal--on-dark']]: onDark,\n });\n\n useEffect(() => {\n checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n }, []);\n\n const renderIcon = (iconElement: BaseIconElement \| null, iconSize: number, iconClassName?: string): BaseIconElement \| null => {\n return iconElement\n ? React.cloneElement(iconElement, {\n size: iconSize,\n color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n className: iconClassName,\n })\n : null;\n };\n\n const renderButtonContent = (): React.ReactNode => {\n return (\n <span className={buttonTextClasses} ref={buttonContentRef}>\n {disabled && borderlessVariant && (\n <span className={diagonalClasses}>\n <span className={buttonStyles['diagonal__line']} />\n </span>\n )}\n <span>{onlyIcon ? ariaLabel : restChildren}</span>\n </span>\n );\n };\n\n const renderbuttonContentWrapper = (): React.ReactNode => {\n const iconSize = getIconSize(large, isMobile, borderlessVariant);\n\n return (\n <span className={buttonClasses}>\n {renderIcon(leftIcon, iconSize, !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n {renderButtonContent()}\n {hasArrow\n ? renderIcon(\n <Icon svgIcon={ArrowRight} />,\n iconSize,\n classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n )\n : renderIcon(rightIcon, iconSize, buttonStyles['button__right-icon'])}\n {hasUURightArrow && (\n <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n {' →'}\n </span>\n )}\n </span>\n );\n };\n\n return (\n <>\n {htmlMarkup === 'button' && (\n <button\n id={id}\n onBlur={onBlur}\n onClick={onClick}\n disabled={disabled}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Button}\n className={buttonWrapperClasses}\n ref={refObject as React.RefObject<HTMLButtonElement>}\n tabIndex={tabIndex}\n type={type}\n {...rest}\n >\n {renderbuttonContentWrapper()}\n </button>\n )}\n {htmlMarkup === 'a' && (\n <a\n id={id}\n onBlur={onBlur}\n onClick={onClick}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Button}\n className={buttonWrapperClasses}\n href={href}\n target={target}\n rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n ref={refObject as React.RefObject<HTMLAnchorElement>}\n tabIndex={tabIndex}\n {...restProps}\n >\n {renderbuttonContentWrapper()}\n </a>\n )}\n </>\n );\n};\n\nexport default Button;\n","import Button from './Button';\nexport from './Button';\nexport default Button;\n"],"mappings":"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"}

package/lib/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,28 @@
+## [15.2.0](https://github.com/helsenorge/designsystem/compare/v15.1.0...v15.2.0) (2026-06-25)
+### Features
+*  nytt komponent visualcontentgroupwithimage ([deafe38](https://github.com/helsenorge/designsystem/commit/deafe3823a48dca3e2256cfd8d82bb701fdc5060)), closes [#376758](https://github.com/helsenorge/designsystem/issues/376758)
+* **expander:**  ny prop emphasised ([7ae7d9e](https://github.com/helsenorge/designsystem/commit/7ae7d9e4bea2253f555b6b6fb6c5a597e9e0c3eb)), closes [#380269](https://github.com/helsenorge/designsystem/issues/380269)
+* **filter:**  forbedre skjermleseroppførsel for aktive filter ([33de604](https://github.com/helsenorge/designsystem/commit/33de6047677cdc43018694e17e339e5202b0e53b)), closes [#375582](https://github.com/helsenorge/designsystem/issues/375582)
+* **infoteaser:**  title er optional ([b178185](https://github.com/helsenorge/designsystem/commit/b178185f6ad42ecb8bdadc532fe8fdff431c6486)), closes [#380754](https://github.com/helsenorge/designsystem/issues/380754)
+### Bug Fixes
+* **datepicker:**  soft error forsvinner ikke ved popup valg ([5380c60](https://github.com/helsenorge/designsystem/commit/5380c60e6f6f75dcf798e14c128ddb458d51c8f4)), closes [#380884](https://github.com/helsenorge/designsystem/issues/380884)
+## [15.1.0](https://github.com/helsenorge/designsystem/compare/v15.0.0...v15.1.0) (2026-06-16)
+### Features
+*  legg til flere språk for default tekster for filter og datepicker ([e23c5d9](https://github.com/helsenorge/designsystem/commit/e23c5d913bc4f1deaad21ebe7744ff82ed47a8f2)), closes [#376074](https://github.com/helsenorge/designsystem/issues/376074)
+* **button:**  borderless variant kan ha size large ([dc68e4f](https://github.com/helsenorge/designsystem/commit/dc68e4f18a773aca05ac399a3eea140d3b93c720)), closes [#377363](https://github.com/helsenorge/designsystem/issues/377363)
+* **daterangeselector:**  value og onchange forenklet for letter bruk med filter ([a31ce8a](https://github.com/helsenorge/designsystem/commit/a31ce8a2229577a59eadd3179f6831c48d7f9c50)), closes [#378862](https://github.com/helsenorge/designsystem/issues/378862)
+* **drawer:**  lag egen komponent for tilbakeknapp som er lik close ([89966d7](https://github.com/helsenorge/designsystem/commit/89966d745d1e7b4836c9767ae9ed2b255a3b6650)), closes [#379768](https://github.com/helsenorge/designsystem/issues/379768)
+### Bug Fixes
+*  scss partials blir ikke eksportert med vite 8 ([9b9cdc4](https://github.com/helsenorge/designsystem/commit/9b9cdc49ba3f2ba38deef25fdc18cfea1a6ce1f8)), closes [#380701](https://github.com/helsenorge/designsystem/issues/380701)
 ## [15.0.0](https://github.com/helsenorge/designsystem/compare/v14.11.1...v15.0.0) (2026-06-04)

package/lib/Drawer.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { t as uuid } from "./uuid.js";
 import { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { t as Icon_default } from "./Icon.js";
 import { useLanguage } from "./hooks/useLanguage.js";
 import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
@@ -12,13 +13,14 @@ import { useOutsideEvent } from "./hooks/useOutsideEvent.js";
 import { t as Close_default } from "./Close.js";
 import { useReturnFocusOnUnmount } from "./hooks/useReturnFocusOnUnmount.js";
 import { disableBodyScroll, enableBodyScroll } from "./utils/scroll.js";
-import ChevronLeft from "./components/Icons/ChevronLeft.js";
 import Title_default from "./components/Title/index.js";
+import ChevronLeft from "./components/Icons/ChevronLeft.js";
 import classNames from "classnames";
 import React, { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, useAnimate, usePresence } from "motion/react";
-import styles from "./components/Drawer/styles.module.scss";
+import styles from "./components/Drawer/DrawerBackButton.module.scss";
+import styles$1 from "./components/Drawer/styles.module.scss";
 var HN_Designsystem_Drawer_en_GB_default = {
 	ariaLabelCloseBtn: "Close",
 	ariaLabelBackButton: "Go back"
@@ -31,17 +33,45 @@ var HN_Designsystem_Drawer_nn_NO_default = {
 	ariaLabelCloseBtn: "Lukk",
 	ariaLabelBackButton: "Gå tilbake"
 };
+var HN_Designsystem_Drawer_se_NO_default = {
+	ariaLabelCloseBtn: "Gidde",
+	ariaLabelBackButton: "Mana ruovttoluotta"
+};
 //#endregion
 //#region src/components/Drawer/resourceHelper.ts
 var getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_Drawer_en_GB_default;
 		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_Drawer_nn_NO_default;
+		case LanguageLocales.SAMI_NORTHERN: return HN_Designsystem_Drawer_se_NO_default;
 		case LanguageLocales.NORWEGIAN:
 		default: return HN_Designsystem_Drawer_nb_NO_default;
 	}
 };
 //#endregion
+//#region src/components/Drawer/DrawerBackButton.tsx
+var DrawerBackButton = (props) => {
+	const { ariaLabel = "Tilbake", onClick, className } = props;
+	const { refObject, isHovered } = usePseudoClasses();
+	const iconSize = useIsMobileBreakpoint() ? 38 : 48;
+	return /* @__PURE__ */ jsx("button", {
+		ref: refObject,
+		className: classNames(styles["back-button"], className),
+		"aria-label": ariaLabel,
+		onClick,
+		type: "button",
+		children: /* @__PURE__ */ jsx("span", {
+			className: classNames(styles["back-button__inner-container"]),
+			children: /* @__PURE__ */ jsx(Icon_default, {
+				svgIcon: ChevronLeft,
+				color: "var(--color-action-graphics-onlight",
+				size: iconSize,
+				isHovered
+			})
+		})
+	});
+};
+//#endregion
 //#region src/components/Drawer/Drawer.tsx
 var Drawer = (props) => {
 	const { isOpen, ...rest } = props;
@@ -78,7 +108,7 @@ var InnerDrawer = (props) => {
 		...resources
 	};
 	const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;
-	const headerStyling = classNames(styles.drawer__header, headerClasses);
+	const headerStyling = classNames(styles$1.drawer__header, headerClasses);
 	const hasFooterContent = typeof footerContent !== "undefined" && footerContent || onPrimaryAction || onSecondaryAction;
 	useFocusTrap(containerRef, true);
 	useReturnFocusOnUnmount(containerRef);
@@ -159,23 +189,23 @@ var InnerDrawer = (props) => {
 		titleRef.current?.focus();
 	}, [title]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: styles.drawer,
+		className: styles$1.drawer,
 		ref: scope,
 		style: { zIndex },
 		"data-analyticsid": AnalyticsId.Drawer,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: styles.drawer__overlay,
+			className: styles$1.drawer__overlay,
 			ref: overlayRef,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ jsxs("div", {
-			className: classNames(styles.drawer__container, { [styles["drawer__container--right"]]: desktopDirection === "right" }),
+			className: classNames(styles$1.drawer__container, { [styles$1["drawer__container--right"]]: desktopDirection === "right" }),
 			ref: containerRef,
 			role: "dialog",
 			"aria-modal": "true",
 			tabIndex: -1,
 			...ariaLabelAttributes,
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: styles.drawer__container__inner,
+				className: styles$1.drawer__container__inner,
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: headerStyling,
@@ -183,37 +213,35 @@ var InnerDrawer = (props) => {
 						children: [
 							/* @__PURE__ */ jsx(Title_default, {
 								id: ariaLabelAttributes?.["aria-labelledby"],
-								className: styles["drawer__header__title"],
+								className: styles$1["drawer__header__title"],
 								htmlMarkup: titleHtmlMarkup,
 								appearance: "title3",
 								ref: titleRef,
 								tabIndex: -1,
 								children: title
 							}),
-							withBackButton && onRequestBack !== void 0 && /* @__PURE__ */ jsx(Button_default, {
+							withBackButton && onRequestBack !== void 0 && /* @__PURE__ */ jsx(DrawerBackButton, {
 								ariaLabel: mergedResources.ariaLabelBackButton,
 								onClick: onRequestBack,
-								variant: "borderless",
-								wrapperClassName: styles["drawer__header__back-button"],
-								children: /* @__PURE__ */ jsx(Icon_default, { svgIcon: ChevronLeft })
+								className: styles$1["drawer__header__back-button"]
 							}),
 							!noCloseButton && onRequestClose != void 0 && /* @__PURE__ */ jsx(Close_default, {
 								ariaLabel: mergedResources.ariaLabelCloseBtn,
 								color: closeColor,
 								onClick: onRequestClose,
-								className: styles["drawer__header__close-button"]
+								className: styles$1["drawer__header__close-button"]
 							})
 						]
 					}),
 					/* @__PURE__ */ jsx("div", {
-						className: classNames(styles["drawer__content__shadow"], styles["drawer__content__shadow--top"]),
+						className: classNames(styles$1["drawer__content__shadow"], styles$1["drawer__content__shadow--top"]),
 						style: {
 							opacity: !topContentVisible && contentIsScrollable ? 1 : 0,
 							top: headerHeight
 						}
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: classNames(styles.drawer__content, contentClassName),
+						className: classNames(styles$1.drawer__content, contentClassName),
 						tabIndex: contentIsScrollable ? 0 : void 0,
 						role: contentIsScrollable ? "region" : void 0,
 						...contentIsScrollable ? ariaLabelAttributes : {},
@@ -221,7 +249,7 @@ var InnerDrawer = (props) => {
 						children: [
 							/* @__PURE__ */ jsx("div", { ref: topContent }),
 							/* @__PURE__ */ jsx("div", {
-								className: styles["drawer__content__children"],
+								className: styles$1["drawer__content__children"],
 								children
 							}),
 							/* @__PURE__ */ jsx("div", {
@@ -231,7 +259,7 @@ var InnerDrawer = (props) => {
 						]
 					}),
 					/* @__PURE__ */ jsx("div", {
-						className: classNames(styles["drawer__content__shadow"], styles["drawer__content__shadow--bottom"]),
+						className: classNames(styles$1["drawer__content__shadow"], styles$1["drawer__content__shadow--bottom"]),
 						style: {
 							opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,
 							bottom: hasFooterContent ? footerHeight : 0
@@ -239,7 +267,7 @@ var InnerDrawer = (props) => {
 					})
 				]
 			}), hasFooterContent && /* @__PURE__ */ jsx("div", {
-				className: styles.drawer__footer,
+				className: styles$1.drawer__footer,
 				ref: footerRef,
 				children: footerContent ? footerContent : /* @__PURE__ */ jsxs(Fragment, { children: [onPrimaryAction && /* @__PURE__ */ jsx(Button_default, {
 					onClick: () => handleCTA(onPrimaryAction),

package/lib/Drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","names":[],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/resources/HN.Designsystem.Drawer.nn-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n \"ariaLabelCloseBtn\": \"Close\",\n \"ariaLabelBackButton\": \"Go back\"\n}\n","{\n \"ariaLabelBackButton\": \"Gå tilbake\",\n \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","{\n \"ariaLabelCloseBtn\": \"Lukk\",\n \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Drawer.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN_NYNORSK:\n return nnNO;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' \| 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n /** Opens and closes the drawer /\n isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n /* Sets the aria-label of the drawer /\n ariaLabel?: string;\n /* Sets the aria-labelledby of the drawer /\n ariaLabelledBy?: string;\n /* Sets the style of the Drawer Close button. Meant for use by HelpDrawer /\n closeColor?: 'blueberry' \| 'plum';\n /* Direction of the drawer on desktop. Default: left /\n desktopDirection?: DesktopDirections;\n /* Sets the style of the Drawer header /\n headerClasses?: string;\n /* Title to display in the header of the drawer /\n title: string;\n /* id of the drawer title /\n titleId?: string;\n /* Changes the underlying element of the title. Default: h3 /\n titleHtmlMarkup?: TitleTags;\n /* Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers /\n onRequestClose?: () => void;\n /* Optional footer content that can be rendered instead of default CTA(s) /\n footerContent?: React.ReactNode;\n /* Main content of the drawer /\n children?: React.ReactNode;\n /* Hides the close button /\n noCloseButton?: boolean;\n /* Primary CTA callback /\n onPrimaryAction?: () => void;\n /* Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) /\n primaryActionText?: string;\n /* Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) /\n secondaryActionText?: string;\n /* Secondary CTA callback /\n onSecondaryAction?: () => void;\n /* Customize the z-index of the drawer /\n zIndex?: number;\n /* Resources for component /\n resources?: Partial<HNDesignsystemDrawer>;\n /* Sets mobile styling and animation from outer level Drawer /\n isMobile?: boolean;\n /* Shows a back button to the left of title /\n withBackButton?: boolean;\n /* Callback for the back button /\n onRequestBack?: () => void;\n /* Sets classname for content part in Drawer /\n contentClassName?: string;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n const { isOpen, ...rest } = props;\n const isMobile = useIsMobileBreakpoint();\n\n return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n const {\n ariaLabel,\n ariaLabelledBy,\n children,\n closeColor = 'blueberry',\n desktopDirection = 'left',\n footerContent,\n headerClasses,\n noCloseButton = false,\n onPrimaryAction,\n onRequestClose,\n onSecondaryAction,\n primaryActionText,\n secondaryActionText,\n title,\n titleHtmlMarkup = 'h3',\n titleId = uuid(),\n zIndex = ZIndex.OverlayScreen,\n resources,\n isMobile,\n withBackButton,\n onRequestBack,\n contentClassName,\n } = props;\n\n const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n const overlayRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n // topContent and bottomContent are used to detect scroll position for shadow effects\n const topContent = useRef<HTMLDivElement>(null);\n const bottomContent = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const footerRef = useRef<HTMLDivElement>(null);\n const titleRef = useRef<HTMLHeadingElement>(null);\n const [scope, animate] = useAnimate();\n const [isPresent, safeToRemove] = usePresence();\n const [headerHeight, setHeaderHeight] = React.useState(0);\n const [footerHeight, setFooterHeight] = React.useState(0);\n const topContentVisible = useIsVisible(topContent);\n const bottomContentVisible = useIsVisible(bottomContent, 0);\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemDrawer = {\n ...defaultResources,\n ...resources,\n };\n\n // eslint-disable-next-line react-hooks/refs\n const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n const headerStyling = classNames(styles.drawer__header, headerClasses);\n const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) \|\| onPrimaryAction \|\| onSecondaryAction;\n\n useFocusTrap(containerRef, true);\n useReturnFocusOnUnmount(containerRef);\n useOutsideEvent(containerRef, () => {\n if (onRequestClose) onRequestClose();\n });\n useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n // Close animasjon, vi kaller `onClose()` til slutt\n const closeDrawer = (): void => {\n if (!overlayRef.current \|\| !containerRef.current) return;\n\n animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n if (isMobile) {\n animate(\n containerRef.current,\n { y: '100%' },\n {\n duration: 0.3,\n ease: 'easeInOut',\n onComplete: () => {\n if (safeToRemove) safeToRemove();\n },\n }\n );\n } else {\n animate(\n containerRef.current,\n { x: desktopDirection === 'left' ? '-100%' : '100%' },\n {\n duration: 0.3,\n ease: 'easeInOut',\n onComplete: () => {\n if (safeToRemove) safeToRemove();\n },\n }\n );\n }\n };\n\n useEffect(() => {\n containerRef.current?.focus();\n disableBodyScroll();\n\n return (): void => {\n enableBodyScroll();\n };\n }, []);\n\n // Measure header and footer heights\n useEffect(() => {\n const updateHeights = (): void => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current.offsetHeight);\n }\n if (footerRef.current) {\n setFooterHeight(footerRef.current.offsetHeight);\n }\n };\n\n updateHeights();\n\n // Update heights when content changes\n const resizeObserver = new ResizeObserver(updateHeights);\n if (headerRef.current) {\n resizeObserver.observe(headerRef.current);\n }\n if (footerRef.current) {\n resizeObserver.observe(footerRef.current);\n }\n\n return (): void => {\n resizeObserver.disconnect();\n };\n }, [hasFooterContent]);\n\n // Open animation.\n useEffect(() => {\n if (!overlayRef.current \|\| !containerRef.current) return;\n\n if (!isPresent) {\n closeDrawer();\n return;\n }\n\n if (isMobile) {\n animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n } else {\n animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n }\n\n animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n }, [isPresent]);\n\n const handleCTA = (callback?: () => void): void => {\n if (callback) {\n callback();\n }\n };\n\n useEffect(() => {\n titleRef.current?.focus();\n }, [title]);\n\n return (\n <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n <div\n className={classNames(styles.drawer__container, {\n [styles['drawer__container--right']]: desktopDirection === 'right',\n })}\n ref={containerRef}\n role=\"dialog\"\n aria-modal=\"true\"\n tabIndex={-1}\n {...ariaLabelAttributes}\n >\n <div className={styles.drawer__container__inner}>\n <div className={headerStyling} ref={headerRef}>\n <Title\n id={ariaLabelAttributes?.['aria-labelledby']}\n className={styles['drawer__header__title']}\n htmlMarkup={titleHtmlMarkup}\n appearance=\"title3\"\n ref={titleRef}\n tabIndex={-1}\n >\n {title}\n </Title>\n {withBackButton && onRequestBack !== undefined && (\n <Button\n ariaLabel={mergedResources.ariaLabelBackButton}\n onClick={onRequestBack}\n variant=\"borderless\"\n wrapperClassName={styles['drawer__header__back-button']}\n >\n <Icon svgIcon={ChevronLeft} />\n </Button>\n )}\n {!noCloseButton && onRequestClose != undefined && (\n <Close\n ariaLabel={mergedResources.ariaLabelCloseBtn}\n color={closeColor}\n onClick={onRequestClose}\n className={styles['drawer__header__close-button']}\n />\n )}\n </div>\n <div\n className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n style={{\n opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n top: headerHeight,\n }}\n />\n <div\n className={classNames(styles.drawer__content, contentClassName)}\n tabIndex={contentIsScrollable ? 0 : undefined}\n role={contentIsScrollable ? 'region' : undefined}\n {...(contentIsScrollable ? ariaLabelAttributes : {})}\n ref={contentRef}\n >\n <div ref={topContent} />\n <div className={styles['drawer__content__children']}>{children}</div>\n <div ref={bottomContent} style={{ height: '1px' }} />\n </div>\n <div\n className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n style={{\n opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n bottom: hasFooterContent ? footerHeight : 0,\n }}\n />\n </div>\n {hasFooterContent && (\n <div className={styles.drawer__footer} ref={footerRef}>\n {footerContent ? (\n footerContent\n ) : (\n <>\n {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n {onSecondaryAction && (\n <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n {secondaryActionText}\n </Button>\n )}\n </>\n )}\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Drawer.js","names":[],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/resources/HN.Designsystem.Drawer.nn-NO.json","../src/resources/HN.Designsystem.Drawer.se-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/DrawerBackButton.tsx","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n \"ariaLabelCloseBtn\": \"Close\",\n \"ariaLabelBackButton\": \"Go back\"\n}\n","{\n \"ariaLabelBackButton\": \"Gå tilbake\",\n \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","{\n \"ariaLabelCloseBtn\": \"Lukk\",\n \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","{\n \"ariaLabelCloseBtn\": \"Gidde\",\n \"ariaLabelBackButton\": \"Mana ruovttoluotta\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Drawer.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.Drawer.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN_NYNORSK:\n return nnNO;\n case LanguageLocales.SAMI_NORTHERN:\n return seNO;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\n\nimport styles from './DrawerBackButton.module.scss';\n\nexport interface DrawerBackButtonProps {\n /** Function is called when user clicks the button /\n onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Sets the aria-label of the button /\n ariaLabel?: string;\n /* Adds custom classes to the element. /\n className?: string;\n}\n\nconst DrawerBackButton: React.FC<DrawerBackButtonProps> = props => {\n const { ariaLabel = 'Tilbake', onClick, className } = props;\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n return (\n <button ref={refObject} className={classNames(styles['back-button'], className)} aria-label={ariaLabel} onClick={onClick} type=\"button\">\n <span className={classNames(styles['back-button__inner-container'])}>\n <Icon svgIcon={ChevronLeft} color={'var(--color-action-graphics-onlight'} size={iconSize} isHovered={isHovered} />\n </span>\n </button>\n );\n};\n\nexport default DrawerBackButton;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title from '../Title';\nimport DrawerBackButton from './DrawerBackButton';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' \| 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n /* Opens and closes the drawer /\n isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n /* Sets the aria-label of the drawer /\n ariaLabel?: string;\n /* Sets the aria-labelledby of the drawer /\n ariaLabelledBy?: string;\n /* Sets the style of the Drawer Close button. Meant for use by HelpDrawer /\n closeColor?: 'blueberry' \| 'plum';\n /* Direction of the drawer on desktop. Default: left /\n desktopDirection?: DesktopDirections;\n /* Sets the style of the Drawer header /\n headerClasses?: string;\n /* Title to display in the header of the drawer /\n title: string;\n /* id of the drawer title /\n titleId?: string;\n /* Changes the underlying element of the title. Default: h3 /\n titleHtmlMarkup?: TitleTags;\n /* Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers /\n onRequestClose?: () => void;\n /* Optional footer content that can be rendered instead of default CTA(s) /\n footerContent?: React.ReactNode;\n /* Main content of the drawer /\n children?: React.ReactNode;\n /* Hides the close button /\n noCloseButton?: boolean;\n /* Primary CTA callback /\n onPrimaryAction?: () => void;\n /* Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) /\n primaryActionText?: string;\n /* Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) /\n secondaryActionText?: string;\n /* Secondary CTA callback /\n onSecondaryAction?: () => void;\n /* Customize the z-index of the drawer /\n zIndex?: number;\n /* Resources for component /\n resources?: Partial<HNDesignsystemDrawer>;\n /* Sets mobile styling and animation from outer level Drawer /\n isMobile?: boolean;\n /* Shows a back button to the left of title /\n withBackButton?: boolean;\n /* Callback for the back button /\n onRequestBack?: () => void;\n /* Sets classname for content part in Drawer /\n contentClassName?: string;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n const { isOpen, ...rest } = props;\n const isMobile = useIsMobileBreakpoint();\n\n return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n const {\n ariaLabel,\n ariaLabelledBy,\n children,\n closeColor = 'blueberry',\n desktopDirection = 'left',\n footerContent,\n headerClasses,\n noCloseButton = false,\n onPrimaryAction,\n onRequestClose,\n onSecondaryAction,\n primaryActionText,\n secondaryActionText,\n title,\n titleHtmlMarkup = 'h3',\n titleId = uuid(),\n zIndex = ZIndex.OverlayScreen,\n resources,\n isMobile,\n withBackButton,\n onRequestBack,\n contentClassName,\n } = props;\n\n const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n const overlayRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n // topContent and bottomContent are used to detect scroll position for shadow effects\n const topContent = useRef<HTMLDivElement>(null);\n const bottomContent = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const footerRef = useRef<HTMLDivElement>(null);\n const titleRef = useRef<HTMLHeadingElement>(null);\n const [scope, animate] = useAnimate();\n const [isPresent, safeToRemove] = usePresence();\n const [headerHeight, setHeaderHeight] = React.useState(0);\n const [footerHeight, setFooterHeight] = React.useState(0);\n const topContentVisible = useIsVisible(topContent);\n const bottomContentVisible = useIsVisible(bottomContent, 0);\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemDrawer = {\n ...defaultResources,\n ...resources,\n };\n\n // eslint-disable-next-line react-hooks/refs\n const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n const headerStyling = classNames(styles.drawer__header, headerClasses);\n const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) \|\| onPrimaryAction \|\| onSecondaryAction;\n\n useFocusTrap(containerRef, true);\n useReturnFocusOnUnmount(containerRef);\n useOutsideEvent(containerRef, () => {\n if (onRequestClose) onRequestClose();\n });\n useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n // Close animasjon, vi kaller `onClose()` til slutt\n const closeDrawer = (): void => {\n if (!overlayRef.current \|\| !containerRef.current) return;\n\n animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n if (isMobile) {\n animate(\n containerRef.current,\n { y: '100%' },\n {\n duration: 0.3,\n ease: 'easeInOut',\n onComplete: () => {\n if (safeToRemove) safeToRemove();\n },\n }\n );\n } else {\n animate(\n containerRef.current,\n { x: desktopDirection === 'left' ? '-100%' : '100%' },\n {\n duration: 0.3,\n ease: 'easeInOut',\n onComplete: () => {\n if (safeToRemove) safeToRemove();\n },\n }\n );\n }\n };\n\n useEffect(() => {\n containerRef.current?.focus();\n disableBodyScroll();\n\n return (): void => {\n enableBodyScroll();\n };\n }, []);\n\n // Measure header and footer heights\n useEffect(() => {\n const updateHeights = (): void => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current.offsetHeight);\n }\n if (footerRef.current) {\n setFooterHeight(footerRef.current.offsetHeight);\n }\n };\n\n updateHeights();\n\n // Update heights when content changes\n const resizeObserver = new ResizeObserver(updateHeights);\n if (headerRef.current) {\n resizeObserver.observe(headerRef.current);\n }\n if (footerRef.current) {\n resizeObserver.observe(footerRef.current);\n }\n\n return (): void => {\n resizeObserver.disconnect();\n };\n }, [hasFooterContent]);\n\n // Open animation.\n useEffect(() => {\n if (!overlayRef.current \|\| !containerRef.current) return;\n\n if (!isPresent) {\n closeDrawer();\n return;\n }\n\n if (isMobile) {\n animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n } else {\n animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n }\n\n animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n }, [isPresent]);\n\n const handleCTA = (callback?: () => void): void => {\n if (callback) {\n callback();\n }\n };\n\n useEffect(() => {\n titleRef.current?.focus();\n }, [title]);\n\n return (\n <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n <div\n className={classNames(styles.drawer__container, {\n [styles['drawer__container--right']]: desktopDirection === 'right',\n })}\n ref={containerRef}\n role=\"dialog\"\n aria-modal=\"true\"\n tabIndex={-1}\n {...ariaLabelAttributes}\n >\n <div className={styles.drawer__container__inner}>\n <div className={headerStyling} ref={headerRef}>\n <Title\n id={ariaLabelAttributes?.['aria-labelledby']}\n className={styles['drawer__header__title']}\n htmlMarkup={titleHtmlMarkup}\n appearance=\"title3\"\n ref={titleRef}\n tabIndex={-1}\n >\n {title}\n </Title>\n {withBackButton && onRequestBack !== undefined && (\n <DrawerBackButton\n ariaLabel={mergedResources.ariaLabelBackButton}\n onClick={onRequestBack}\n className={styles['drawer__header__back-button']}\n />\n )}\n {!noCloseButton && onRequestClose != undefined && (\n <Close\n ariaLabel={mergedResources.ariaLabelCloseBtn}\n color={closeColor}\n onClick={onRequestClose}\n className={styles['drawer__header__close-button']}\n />\n )}\n </div>\n <div\n className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n style={{\n opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n top: headerHeight,\n }}\n />\n <div\n className={classNames(styles.drawer__content, contentClassName)}\n tabIndex={contentIsScrollable ? 0 : undefined}\n role={contentIsScrollable ? 'region' : undefined}\n {...(contentIsScrollable ? ariaLabelAttributes : {})}\n ref={contentRef}\n >\n <div ref={topContent} />\n <div className={styles['drawer__content__children']}>{children}</div>\n <div ref={bottomContent} style={{ height: '1px' }} />\n </div>\n <div\n className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n style={{\n opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n bottom: hasFooterContent ? footerHeight : 0,\n }}\n />\n </div>\n {hasFooterContent && (\n <div className={styles.drawer__footer} ref={footerRef}>\n {footerContent ? (\n footerContent\n ) : (\n <>\n {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n {onSecondaryAction && (\n <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n {secondaryActionText}\n </Button>\n )}\n </>\n )}\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}

package/lib/Expander.js CHANGED Viewed

@@ -20,7 +20,7 @@ var ExpanderSize = /* @__PURE__ */ function(ExpanderSize) {
 //#endregion
 //#region src/components/Expander/Expander.tsx
 var Expander = (props) => {
-	const { buttonId, title, children, size = ExpanderSize.small, color, contentClassNames, svgIcon: icon, expanded = false, noNestedLine = false, sticky = false, testId, onExpand, renderChildrenWhenClosed = false, zIndex } = props;
+	const { buttonId, title, children, size = ExpanderSize.small, color, contentClassNames, svgIcon: icon, expanded = false, noNestedLine = false, emphasized = false, sticky = false, testId, onExpand, renderChildrenWhenClosed = false, zIndex } = props;
 	const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
 	const expanderRef = useRef(null);
 	const triggerRef = useRef(null);
@@ -74,7 +74,7 @@ var Expander = (props) => {
 			width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : void 0,
 			height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : void 0
 		},
-		className: classNames({ [styles["expander__button-container--sticky"]]: isSticky }),
+		className: classNames(styles["expander__button-container"], { [styles["expander__button-container--sticky"]]: isSticky }),
 		children: /* @__PURE__ */ jsxs(Button_default, {
 			id: buttonId,
 			variant: "borderless",
@@ -93,9 +93,9 @@ var Expander = (props) => {
 	});
 	const renderContent = () => {
 		if (!renderChildrenWhenClosed && !isExpanded) return null;
-		const contentClassName = classNames(styles["expander__content"], styles[`expander__content--${size}`], size === ExpanderSize.large && styles[`expander__content--${color || "neutral"}`], size === ExpanderSize.large && icon && styles["expander__content--icon"], isExpanded && styles["expander__content--expanded"], size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line--inner"], { [styles["expander__content--sticky"]]: isSticky }, contentClassNames);
+		const contentClassName = classNames(styles["expander__content"], styles[`expander__content--${size}`], size === ExpanderSize.large && styles[`expander__content--${color || "neutral"}`], size === ExpanderSize.large && icon && styles["expander__content--icon"], isExpanded && styles["expander__content--expanded"], size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line--inner"], emphasized && styles["expander__content--emphasized"], { [styles["expander__content--sticky"]]: isSticky }, contentClassNames);
 		return /* @__PURE__ */ jsx("div", {
-			className: classNames(size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line--outer"]),
+			className: classNames(size === ExpanderSize.small && !emphasized && !noNestedLine && styles["expander__content--nested-line--outer"]),
 			children: /* @__PURE__ */ jsx("div", {
 				className: contentClassName,
 				children

package/lib/Expander.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Expander.js","names":[],"sources":["../src/components/Expander/constants.ts","../src/components/Expander/Expander.tsx","../src/components/Expander/index.ts"],"sourcesContent":["export enum ExpanderSize {\n small = 'small',\n large = 'large',\n}\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { ExpanderSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' \| 'blueberry' \| 'cherry' \| 'kiwi' \| 'neutral' \| 'plum' \| 'white'>;\n\nexport interface ExpanderProps {\n buttonId?: string;\n /** Sets the trigger title /\n title: string;\n /* Sets the expanded content /\n children?: React.ReactNode;\n /* Sets classnames on the content area /\n contentClassNames?: string;\n /* Sets the size of the expander. Default: ExpanderSize.small /\n size?: ExpanderSize;\n /* Sets the background of the expander. Requires size=ExpanderSize.large. /\n color?: ExpanderColors;\n /* Adds an icon to the expander trigger. Requires size=ExpanderSize.large. /\n svgIcon?: SvgIcon \| IconName;\n /* Opens or closes the expander /\n expanded?: boolean;\n /* Removes border to the left of the content. Requires size=ExpanderSize.small. /\n noNestedLine?: boolean;\n /* Stick expander trigger to top of screen while scrolling down /\n sticky?: boolean;\n /* Called when expander is open/closed. /\n onExpand?: (isExpanded: boolean) => void;\n /* Whether to render children when closed (in which case they are hidden with CSS). Default: false /\n renderChildrenWhenClosed?: boolean;\n /* Sets the data-testid attribute on the expander button. /\n testId?: string;\n /* Overrides the default z-index of the expander header /\n zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n const {\n buttonId,\n title,\n children,\n size = ExpanderSize.small,\n color,\n contentClassNames,\n svgIcon: icon,\n expanded = false,\n noNestedLine = false,\n sticky = false,\n testId,\n onExpand,\n renderChildrenWhenClosed = false,\n zIndex,\n } = props;\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n const expanderRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses(triggerRef);\n const contentSize = useSize(expanderRef);\n const triggerSize = useSize(triggerRef);\n\n const isSticky = sticky && isExpanded;\n\n const renderChevron = (align: 'left' \| 'right'): React.ReactNode => (\n <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n </span>\n );\n\n const triggerClassName = classNames(\n styles['expander__trigger'],\n size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n size === ExpanderSize.large && styles[`expander__trigger--${color \|\| 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n isExpanded && styles['expander__trigger--expanded'],\n isSticky && styles['expander__trigger--sticky']\n );\n\n const renderTrigger = (): React.ReactNode => (\n <button\n id={buttonId}\n type=\"button\"\n className={triggerClassName}\n style={{\n zIndex: isHovered \|\| isSticky ? zIndex : undefined,\n width: isSticky && contentSize?.width ? `${contentSize.width}px` : undefined,\n }}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n {size === ExpanderSize.small && renderChevron('left')}\n {icon && (\n <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n {typeof icon === 'string' ? (\n <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n )}\n </span>\n )}\n {title}\n {size === ExpanderSize.large && renderChevron('right')}\n </button>\n );\n\n const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n const renderButton = (): React.ReactNode => (\n <div\n style={{\n width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n }}\n className={classNames({\n [styles['expander__button-container--sticky']]: isSticky,\n })}\n >\n <Button\n id={buttonId}\n variant=\"borderless\"\n textClassName={styles['expander__button__text']}\n className={buttonClassName}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n testId={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n {title}\n </Button>\n </div>\n );\n\n const renderContent = (): React.ReactNode => {\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const contentClassName = classNames(\n styles['expander__content'],\n styles[`expander__content--${size}`],\n size === ExpanderSize.large && styles[`expander__content--${color \|\| 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__content--icon'],\n isExpanded && styles['expander__content--expanded'],\n size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--inner'],\n { [styles['expander__content--sticky']]: isSticky },\n contentClassNames\n );\n const leftBorderClassName = classNames(size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--outer']);\n\n return (\n <div className={leftBorderClassName}>\n <div className={contentClassName}>{children}</div>\n </div>\n );\n };\n\n return (\n <div className={styles['expander']} ref={expanderRef}>\n {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n {renderContent()}\n </div>\n );\n};\n\nexport default Expander;\n","import Expander from './Expander';\nexport { ExpanderSize } from './constants';\nexport from './Expander';\nexport default Expander;\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAY,eAAL,yBAAA,cAAA;CACL,aAAA,WAAA;CACA,aAAA,WAAA;;AACF,EAAA,CAAA,CAAA;;;~~ACkDA~~,IAAM,YAAoC,UAAS;CACjD,MAAM,EACJ,UACA,OACA,UACA,OAAO,aAAa,OACpB,OACA,mBACA,SAAS,MACT,WAAW,OACX,eAAe,OACf,SAAS,OACT,QACA,UACA,2BAA2B,OAC3B,WACE;CACJ,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,QAAQ;CAChE,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,aAAa,OAA0B,IAAI;CACjD,MAAM,EAAE,cAAc,iBAAiB,UAAU;CACjD,MAAM,cAAc,QAAQ,WAAW;CACvC,MAAM,cAAc,QAAQ,UAAU;CAEtC,MAAM,WAAW,UAAU;CAE3B,MAAM,iBAAiB,UACrB,oBAAC,QAAD;EAAM,WAAW,WAAW,OAAO,mBAAmB,OAAO,mBAAmB,QAAQ;YACtF,oBAAC,cAAD;GAAM,SAAS,aAAa,YAAY;GAAa,MAAM,SAAS;GAAmB;EAAY,CAAA;CAC/F,CAAA;CAGR,MAAM,mBAAmB,WACvB,OAAO,sBACP,SAAS,aAAa,SAAS,OAAO,sBAAsB,SAC5D,SAAS,aAAa,SAAS,OAAO,sBAAsB,SAAS,cACrE,SAAS,aAAa,SAAS,QAAQ,OAAO,4BAC9C,cAAc,OAAO,gCACrB,YAAY,OAAO,4BACrB;CAEA,MAAM,sBACJ,qBAAC,UAAD;EACE,IAAI;EACJ,MAAK;EACL,WAAW;EACX,OAAO;GACL,QAAQ,aAAa,WAAW,SAAS,KAAA;GACzC,OAAO,YAAY,aAAa,QAAQ,GAAG,YAAY,MAAM,MAAM,KAAA;EACrE;EACA,iBAAe;EACf,KAAK;EACL,eAAqB,cAAc,CAAC,UAAU;EAC9C,eAAa;EACb,oBAAkB,YAAY;YAZhC;GAcG,SAAS,aAAa,SAAS,cAAc,MAAM;GACnD,QACC,oBAAC,QAAD;IAAM,WAAW,WAAW,OAAO,mBAAmB,OAAO,uBAAuB;cACjF,OAAO,SAAS,WACf,oBAAC,kBAAD;KAAU,UAAU;KAAM,MAAM,SAAS;KAAmB;IAAY,CAAA,IAExE,oBAAC,cAAD;KAAM,SAAS;KAAM,MAAM,SAAS;KAAmB;IAAY,CAAA;GAEjE,CAAA;GAEP;GACA,SAAS,aAAa,SAAS,cAAc,OAAO;EAC/C;;CAGV,MAAM,kBAAkB,WAAW,OAAO,qBAAqB,cAAc,OAAO,6BAA6B;CAEjH,MAAM,qBACJ,oBAAC,OAAD;EACE,OAAO;GACL,OAAO,YAAY,aAAa,QAAQ,GAAG,aAAa,MAAM,MAAM,KAAA;GACpE,QAAQ,YAAY,aAAa,SAAS,GAAG,aAAa,OAAO,MAAM,KAAA;EACzE;EACA,WAAW,WAAW,~~GACnB~~,OAAO,wCAAwC,SAClD,CAAC;YAED,qBAAC,gBAAD;GACE,IAAI;GACJ,SAAQ;GACR,eAAe,OAAO;GACtB,WAAW;GACX,iBAAe;GACf,KAAK;GACL,eAAqB,cAAc,CAAC,UAAU;GACtC;GACR,oBAAkB,YAAY;aAThC,CAWE,oBAAC,cAAD;IAAM,SAAS,aAAa,YAAY;IAAa,MAAM,SAAS;GAAS,CAAA,GAC5E,KACK;;CACL,CAAA;CAGP,MAAM,sBAAuC;EAC3C,IAAI,CAAC,4BAA4B,CAAC,YAChC,OAAO;EAGT,MAAM,mBAAmB,WACvB,OAAO,sBACP,OAAO,sBAAsB,SAC7B,SAAS,aAAa,SAAS,OAAO,sBAAsB,SAAS,cACrE,SAAS,aAAa,SAAS,QAAQ,OAAO,4BAC9C,cAAc,OAAO,gCACrB,SAAS,aAAa,SAAS,CAAC,gBAAgB,OAAO,0CACvD,GAAG,OAAO,+BAA+B,SAAS,GAClD,iBACF;~~EAGA~~,OACE,oBAAC,OAAD;GAAK,~~WAHqB~~,~~WAAW~~,SAAS,aAAa,SAAS,CAAC,gBAAgB,OAAO,~~wCAG5E~~;aACd,oBAAC,OAAD;IAAK,WAAW;IAAmB;GAAc,CAAA;EAC9C,CAAA;CAET;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAa,KAAK;YAAzC,CACG,SAAS,aAAa,QAAQ,cAAc,IAAI,aAAa,GAC7D,cAAc,CACZ;;AAET;;;~~ACpLA~~,IAAA,mBAAe"}
1	+ {"version":3,"file":"Expander.js","names":[],"sources":["../src/components/Expander/constants.ts","../src/components/Expander/Expander.tsx","../src/components/Expander/index.ts"],"sourcesContent":["export enum ExpanderSize {\n small = 'small',\n large = 'large',\n}\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { ExpanderSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' \| 'blueberry' \| 'cherry' \| 'kiwi' \| 'neutral' \| 'plum' \| 'white'>;\n\nexport interface ExpanderProps {\n buttonId?: string;\n /** Sets the trigger title /\n title: string;\n /* Sets the expanded content /\n children?: React.ReactNode;\n /* Sets classnames on the content area /\n contentClassNames?: string;\n /* Sets the size of the expander. Default: ExpanderSize.small /\n size?: ExpanderSize;\n /* Sets the background of the expander. Requires size=ExpanderSize.large. /\n color?: ExpanderColors;\n /* Adds an icon to the expander trigger. Requires size=ExpanderSize.large. /\n svgIcon?: SvgIcon \| IconName;\n /* Opens or closes the expander /\n expanded?: boolean;\n /* Removes border to the left of the content. Requires size=ExpanderSize.small. /\n noNestedLine?: boolean;\n /* Emphasizes the content section. Intended for size=ExpanderSize.small. /\n emphasized?: boolean;\n /* Stick expander trigger to top of screen while scrolling down /\n sticky?: boolean;\n /* Called when expander is open/closed. /\n onExpand?: (isExpanded: boolean) => void;\n /* Whether to render children when closed (in which case they are hidden with CSS). Default: false /\n renderChildrenWhenClosed?: boolean;\n /* Sets the data-testid attribute on the expander button. /\n testId?: string;\n /* Overrides the default z-index of the expander header /\n zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n const {\n buttonId,\n title,\n children,\n size = ExpanderSize.small,\n color,\n contentClassNames,\n svgIcon: icon,\n expanded = false,\n noNestedLine = false,\n emphasized = false,\n sticky = false,\n testId,\n onExpand,\n renderChildrenWhenClosed = false,\n zIndex,\n } = props;\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n const expanderRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses(triggerRef);\n const contentSize = useSize(expanderRef);\n const triggerSize = useSize(triggerRef);\n\n const isSticky = sticky && isExpanded;\n\n const renderChevron = (align: 'left' \| 'right'): React.ReactNode => (\n <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n </span>\n );\n\n const triggerClassName = classNames(\n styles['expander__trigger'],\n size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n size === ExpanderSize.large && styles[`expander__trigger--${color \|\| 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n isExpanded && styles['expander__trigger--expanded'],\n isSticky && styles['expander__trigger--sticky']\n );\n\n const renderTrigger = (): React.ReactNode => (\n <button\n id={buttonId}\n type=\"button\"\n className={triggerClassName}\n style={{\n zIndex: isHovered \|\| isSticky ? zIndex : undefined,\n width: isSticky && contentSize?.width ? `${contentSize.width}px` : undefined,\n }}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n {size === ExpanderSize.small && renderChevron('left')}\n {icon && (\n <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n {typeof icon === 'string' ? (\n <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n )}\n </span>\n )}\n {title}\n {size === ExpanderSize.large && renderChevron('right')}\n </button>\n );\n\n const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n const renderButton = (): React.ReactNode => (\n <div\n style={{\n width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n }}\n className={classNames(styles['expander__button-container'], {\n [styles['expander__button-container--sticky']]: isSticky,\n })}\n >\n <Button\n id={buttonId}\n variant=\"borderless\"\n textClassName={styles['expander__button__text']}\n className={buttonClassName}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n testId={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n {title}\n </Button>\n </div>\n );\n\n const renderContent = (): React.ReactNode => {\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const contentClassName = classNames(\n styles['expander__content'],\n styles[`expander__content--${size}`],\n size === ExpanderSize.large && styles[`expander__content--${color \|\| 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__content--icon'],\n isExpanded && styles['expander__content--expanded'],\n size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--inner'],\n emphasized && styles['expander__content--emphasized'],\n { [styles['expander__content--sticky']]: isSticky },\n contentClassNames\n );\n const leftBorderClassName = classNames(\n size === ExpanderSize.small && !emphasized && !noNestedLine && styles['expander__content--nested-line--outer']\n );\n\n return (\n <div className={leftBorderClassName}>\n <div className={contentClassName}>{children}</div>\n </div>\n );\n };\n\n return (\n <div className={styles['expander']} ref={expanderRef}>\n {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n {renderContent()}\n </div>\n );\n};\n\nexport default Expander;\n","import Expander from './Expander';\nexport { ExpanderSize } from './constants';\nexport from './Expander';\nexport default Expander;\n"],"mappings":"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"}

package/lib/FilterButtonAndChipsWrapper.js CHANGED Viewed

@@ -1,12 +1,24 @@
+import { LanguageLocales } from "./constants.js";
+import { useLanguage } from "./hooks/useLanguage.js";
+import { t as getResources } from "./resourceHelper.js";
 import classNames from "classnames";
-import { jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterButtonAndChipsWrapper/styles.module.scss";
 //#region src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx
-var FilterButtonAndChipsWrapper = ({ filterButtonComponent, filterChips, testId }) => {
+var FilterButtonAndChipsWrapper = ({ filterButtonComponent, filterChips, testId, resources }) => {
+	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+	const mergedResources = {
+		...getResources(language),
+		...resources
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: classNames(styles["filter-chip-bar"]),
 		"data-testid": testId,
-		children: [filterButtonComponent, filterChips]
+		children: [filterButtonComponent, /* @__PURE__ */ jsx("ul", {
+			"aria-label": mergedResources.activeFiltersListLabel,
+			className: styles["filter-chip-bar__list"],
+			children: filterChips.map((activefilter, index) => /* @__PURE__ */ jsx("li", { children: activefilter }, index))
+		})]
 	});
 };
 //#endregion

package/lib/FilterButtonAndChipsWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButtonAndChipsWrapper.js","names":[],"sources":["../src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx","../src/components/Filter/FilterButtonAndChipsWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonAndChipsWrapperProps {\n /** FilterButton content area /\n filterButtonComponent: React.ReactNode;\n /* Content area for rendering filter chips /\n filterChips: React.ReactNode[];\n /* test id that is placed on the wrapper /\n testId?: string;\n}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({ filterButtonComponent, filterChips, testId }) => {\n return (\n <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n {filterButtonComponent}\n {filterChips}\n </div>\n );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":"~~;;;;AAeA~~,IAAM,+BAA2E,EAAE,~~uBAAuB~~,aAAa,~~aAAa~~;~~CAClI~~,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,kBAAkB;EAAG,eAAa;YAApE,CACG,~~uBACA~~,~~WACE~~;;AAET;;;~~ACpBA~~,IAAA,sCAAe"}
1	+ {"version":3,"file":"FilterButtonAndChipsWrapper.js","names":[],"sources":["../src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx","../src/components/Filter/FilterButtonAndChipsWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonAndChipsWrapperProps {\n /** FilterButton content area /\n filterButtonComponent: React.ReactNode;\n /* Content area for rendering filter chips /\n filterChips: React.ReactNode[];\n /* test id that is placed on the wrapper /\n testId?: string;\n /* Resources for the component /\n resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({\n filterButtonComponent,\n filterChips,\n testId,\n resources,\n}) => {\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources = {\n ...defaultResources,\n ...resources,\n };\n return (\n <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n {filterButtonComponent}\n <ul aria-label={mergedResources.activeFiltersListLabel} className={styles['filter-chip-bar__list']}>\n {filterChips.map((activefilter, index) => (\n <li key={index}>{activefilter}</li>\n ))}\n </ul>\n </div>\n );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;;;;;AAuBA,IAAM,+BAA2E,EAC/E,uBACA,aACA,QACA,gBACI;CACJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CACA,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,kBAAkB;EAAG,eAAa;YAApE,CACG,uBACD,oBAAC,MAAD;GAAI,cAAY,gBAAgB;GAAwB,WAAW,OAAO;aACvE,YAAY,KAAK,cAAc,UAC9B,oBAAC,MAAD,EAAA,UAAiB,aAAiB,GAAzB,KAAyB,CACnC;EACC,CAAA,CACD;;AAET;;;AC5CA,IAAA,sCAAe"}

package/lib/FilterLinkList.js CHANGED Viewed

@@ -24,9 +24,10 @@ var Link = (props) => {
 			...restProps,
 			children: [/* @__PURE__ */ jsx("div", {
 				className: styles["link-list__button__content"],
-				children: title ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: title }), chips && chips.length > 0 && /* @__PURE__ */ jsx("div", {
+				children: title ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: title }), chips && chips.length > 0 && /* @__PURE__ */ jsx("ul", {
 					className: styles["link-list__chip-list"],
-					children: chips.map((chip) => /* @__PURE__ */ jsx("span", {
+					"aria-label": props.chipsGroupAriaLabel,
+					children: chips.map((chip) => /* @__PURE__ */ jsx("li", {
 						className: styles["link-list__chip"],
 						children: chip
 					}, chip))