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

@helsenorge/designsystem-react 15.0.0 → 15.1.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 (25) hide show

package/lib/Button.js +24 -19
package/lib/Button.js.map +1 -1
package/lib/CHANGELOG.md +13 -0
package/lib/Drawer.js +46 -18
package/lib/Drawer.js.map +1 -1
package/lib/components/Button/styles.module.scss +39 -16
package/lib/components/Button/styles.module.scss.d.ts +3 -2
package/lib/components/Drawer/DrawerBackButton.d.ts +10 -0
package/lib/components/Drawer/DrawerBackButton.module.scss +52 -0
package/lib/components/Drawer/DrawerBackButton.module.scss.d.ts +10 -0
package/lib/components/Drawer/styles.module.scss +0 -9
package/lib/components/Expander/styles.module.scss.d.ts +3 -2
package/lib/components/Panel/styles.module.scss.d.ts +3 -2
package/lib/components/Tabs/index.js +5 -0
package/lib/components/Tabs/index.js.map +1 -1
package/lib/resourceHelper.js +32 -2
package/lib/resourceHelper.js.map +1 -1
package/lib/resources/HN.Designsystem.Drawer.se-NO.json.d.ts +7 -0
package/lib/resources/HN.Designsystem.Filter.en-GB.json.d.ts +2 -1
package/lib/resources/HN.Designsystem.Filter.nb-NO.json.d.ts +2 -1
package/lib/resources/HN.Designsystem.Filter.nn-NO.json.d.ts +16 -0
package/lib/resources/HN.Designsystem.Filter.se-NO.json.d.ts +16 -0
package/lib/resources/HN.Designsystem.Tabs.se-NO.json.d.ts +7 -0
package/lib/resources/Resources.d.ts +4 -0
package/package.json +19 -3

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,4 +1,17 @@
+## [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)
 ### Features

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/components/Button/styles.module.scss CHANGED Viewed

@@ -8,24 +8,29 @@
 $dark-mode-disabled-transparrent: #ffffffb3;
 $with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
-  'left-icon' 'normal' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0 spacers.getSpacer(3xs) 0
+  'left-icon' 'medium' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0 spacers.getSpacer(3xs) 0
     spacers.getSpacer(2xs),
-  'right-icon' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(3xs) 0
+  'right-icon' 'medium' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(3xs) 0
     spacers.getSpacer(2xs) 0,
-  'left-icon' 'large' spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l) 0 spacers.getSpacer(2xs) 0
-    spacers.getSpacer(xs),
-  'right-icon' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(s) spacers.getSpacer(2xs) 0
-    spacers.getSpacer(xs) 0,
-  'arrow' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(m) 0
+  'left-icon' 'large-non-borderless' spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l) 0
+    spacers.getSpacer(2xs) 0 spacers.getSpacer(xs),
+  'right-icon' 'large-non-borderless' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(s)
+    spacers.getSpacer(2xs) 0 spacers.getSpacer(xs) 0,
+  'arrow' 'medium' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(m) 0
     spacers.getSpacer(l) 0,
-  'arrow' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(xs) spacers.getSpacer(l) 0
-    spacers.getSpacer(xl) 0,
-  'arrow--both-icons' 'normal' 0 0 0 0 spacers.getSpacer(s) 0 spacers.getSpacer(m) 0,
-  'arrow--both-icons' 'large' 0 0 0 0 spacers.getSpacer(m) 0 spacers.getSpacer(l) 0,
-  'only-icon' 'normal' 0.062rem 0.062rem 0.375rem 0.375rem 0 0 0 0,
-  'only-icon' 'large' 0.312rem 0.312rem spacers.getSpacer(3xs) spacers.getSpacer(3xs) 0 0 0 0,
-  'both-icons' 'normal' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
-  'both-icons' 'large' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0;
+  'arrow' 'large-non-borderless' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(xs) spacers.getSpacer(l)
+    0 spacers.getSpacer(xl) 0,
+  'arrow--both-icons' 'medium' 0 0 0 0 spacers.getSpacer(s) 0 spacers.getSpacer(m) 0,
+  'arrow--both-icons' 'large-non-borderless' 0 0 0 0 spacers.getSpacer(m) 0 spacers.getSpacer(l) 0,
+  'only-icon' 'medium' 0.0625rem 0.0625rem 0.375rem 0.375rem 0 0 0 0,
+  'only-icon' 'large-non-borderless' 0.312rem 0.312rem spacers.getSpacer(3xs) spacers.getSpacer(3xs) 0 0 0 0,
+  'both-icons' 'medium' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
+  'both-icons' 'large-non-borderless' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
+  'left-icon' 'large-borderless' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0
+    spacers.getSpacer(3xs) 0 spacers.getSpacer(3xs),
+  'right-icon' 'large-borderless' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs)
+    spacers.getSpacer(3xs) 0 spacers.getSpacer(3xs) 0,
+  'only-icon' 'large-borderless' 0 0 0.0625rem 0.0625rem 0 0 0 0;
 // Brukes til å aktivere hover styling uten at button hovres
 @mixin outline-borderless-hover {
@@ -44,6 +49,8 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   @if $with-uu-border {
     border: 1px solid var(--color-action-border-ondark-focus);
+  } @else {
+    border: none;
   }
 }
@@ -259,7 +266,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     line-height: 1.5rem;
   }
-  &--large {
+  &--large-non-borderless {
     min-height: 3.5rem;
     padding: 0 spacers.getSpacer(l);
     font-size: 1.3125rem;
@@ -272,6 +279,16 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     }
   }
+  // Medium box sizing with large font-size, used for borderless + large
+  &--large-borderless {
+    font-size: 1.3125rem;
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      font-size: font-settings.$font-size-lg;
+      line-height: 1.5rem;
+    }
+  }
   @each $icon-class, $size-class, $pl, $pr, $pld, $prd, $svgml, $svgmr, $svgmld, $svgmrd in $with-icons {
     &--#{$icon-class}#{&}--#{$size-class} {
       padding-left: $pl;
@@ -320,6 +337,8 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   &--borderless {
     @include outline-borderless-background(transparent, var(--color-action-background-transparent-onlight-hover));
+    border: none;
     :focus > & {
       @include focus-shadow(false);
@@ -408,6 +427,10 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     @include text-color(palette.$cherry600, palette.$cherry700);
   }
+  &--only-icon {
+    justify-content: center;
+  }
   /* stylelint-disable-next-line */
   &--only-icon &__text {
     @include sr-only;

package/lib/components/Button/styles.module.scss.d.ts CHANGED Viewed

@@ -15,9 +15,10 @@ export type Styles = {
   'button--borderless': string;
   'button--both-icons': string;
   'button--destructive': string;
-  'button--large': string;
+  'button--large-borderless': string;
+  'button--large-non-borderless': string;
   'button--left-icon': string;
-  'button--normal': string;
+  'button--medium': string;
   'button--on-dark': string;
   'button--only-icon': string;
   'button--outline': string;

package/lib/components/Drawer/DrawerBackButton.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export interface DrawerBackButtonProps {
+    /** Function is called when user clicks the button */
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Sets the aria-label of the button */
+    ariaLabel?: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+}
+declare const DrawerBackButton: React.FC<DrawerBackButtonProps>;
+export default DrawerBackButton;

package/lib/components/Drawer/DrawerBackButton.module.scss ADDED Viewed

@@ -0,0 +1,52 @@
+@use 'sass:map';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
+$desktop-size: 3rem;
+$mobile-inner-size: 2.375rem;
+$mobile-outer-size: 2.75rem;
+.back-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: $mobile-outer-size;
+  width: $mobile-outer-size;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+  &:focus-visible {
+    outline: none;
+  }
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    height: $desktop-size;
+    width: $desktop-size;
+  }
+  &__inner-container {
+    width: $mobile-inner-size;
+    height: $mobile-inner-size;
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      height: $desktop-size;
+      width: $desktop-size;
+    }
+    :hover > & {
+      background-color: var(--color-action-background-transparent-onlight-hover);
+    }
+    :active > & {
+      background-color: var(--color-action-background-transparent-onlight-active);
+    }
+    :focus-visible > & {
+      outline: 3px solid var(--color-action-border-onlight-focus);
+      border-radius: 0;
+      border: 0;
+    }
+  }
+}

package/lib/components/Drawer/DrawerBackButton.module.scss.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export type Styles = {
+  'back-button': string;
+  'back-button__inner-container': string;
+};
+export type ClassNames = keyof Styles;
+declare const styles: Styles;
+export default styles;

package/lib/components/Drawer/styles.module.scss CHANGED Viewed

@@ -98,15 +98,6 @@
     &__back-button {
       // Moves the button visually to the left but keeps it in the DOM order for screen readers and keyboard navigation
       order: -1;
-      // Temporary fix for the back button, until we decide if we want to implement this more properly
-      width: 48px;
-      height: 48px;
-      svg {
-        width: 48px;
-        height: 48px;
-      }
     }
   }

package/lib/components/Expander/styles.module.scss.d.ts CHANGED Viewed

@@ -15,9 +15,10 @@ export type Styles = {
   'button--borderless': string;
   'button--both-icons': string;
   'button--destructive': string;
-  'button--large': string;
+  'button--large-borderless': string;
+  'button--large-non-borderless': string;
   'button--left-icon': string;
-  'button--normal': string;
+  'button--medium': string;
   'button--on-dark': string;
   'button--only-icon': string;
   'button--outline': string;

package/lib/components/Panel/styles.module.scss.d.ts CHANGED Viewed

@@ -15,9 +15,10 @@ export type Styles = {
   'button--borderless': string;
   'button--both-icons': string;
   'button--destructive': string;
-  'button--large': string;
+  'button--large-borderless': string;
+  'button--large-non-borderless': string;
   'button--left-icon': string;
-  'button--normal': string;
+  'button--medium': string;
   'button--on-dark': string;
   'button--only-icon': string;
   'button--outline': string;

package/lib/components/Tabs/index.js CHANGED Viewed

@@ -15,11 +15,16 @@ var HN_Designsystem_Tabs_nb_NO_default = {
 	ariaLabelRightButton: "Scroll til høyre",
 	ariaLabelLeftButton: "Scroll til venstre"
 };
+var HN_Designsystem_Tabs_se_NO_default = {
+	ariaLabelRightButton: "Sirdde olgeš guvlui",
+	ariaLabelLeftButton: "Sirdde gurut guvlui"
+};
 //#endregion
 //#region src/components/Tabs/resourceHelper.ts
 var getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_Tabs_en_GB_default;
+		case LanguageLocales.SAMI_NORTHERN: return HN_Designsystem_Tabs_se_NO_default;
 		case LanguageLocales.NORWEGIAN:
 		default: return HN_Designsystem_Tabs_nb_NO_default;
 	}

package/lib/components/Tabs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../src/resources/HN.Designsystem.Tabs.en-GB.json","../../../src/resources/HN.Designsystem.Tabs.nb-NO.json","../../../src/components/Tabs/resourceHelper.ts","../../../src/components/Tabs/Tabs.tsx","../../../src/components/Tabs/index.ts"],"sourcesContent":["{\n \"ariaLabelRightButton\": \"Scroll right\",\n \"ariaLabelLeftButton\": \"Scroll left\"\n}\n","{\n \"ariaLabelRightButton\": \"Scroll til høyre\",\n \"ariaLabelLeftButton\": \"Scroll til venstre\"\n}\n","import type { HNDesignsystemTabs } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTabs => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemTabs } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport designsystemlayout from '../../scss/layout.module.scss';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' \| 'neutral' \| 'white'>;\nexport type TabsOnColor = 'onblueberry' \| 'onneutral' \| 'onwhite';\n\nexport interface TabsProps {\n children?: React.ReactNode;\n /** Controlled state for Tabs component /\n activeTab?: number;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the color of the tabs. Default: white /\n color?: TabsColors;\n /* Sets wether the component should use the container-breakout class. Default: true /\n containerBreakout?: boolean;\n /* Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite /\n onColor?: TabsOnColor;\n /* Whether the tab list should be sticky /\n sticky?: boolean;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Resources for component /\n resources?: Partial<HNDesignsystemTabs>;\n /* Overrides the default z-index of the tabs header /\n zIndex?: number;\n}\n\nexport const TabsRoot: React.FC<TabsProps> = ({\n activeTab,\n children,\n className,\n color = 'white',\n containerBreakout = true,\n onColor = 'onwhite',\n sticky = true,\n testId,\n resources,\n zIndex,\n}) => {\n const isControlled = activeTab !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(0);\n const tabsRef = useRef<HTMLDivElement>(null);\n const tabPanelRef = useRef<HTMLDivElement>(null);\n const tabListRef = useRef<HTMLDivElement>(null);\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemTabs = {\n ...defaultResources,\n ...resources,\n };\n\n let onColorUsed: TabsOnColor = 'onwhite';\n if (color === 'white') {\n onColorUsed = onColor;\n }\n\n const onValueChange = (newValue: number): void => {\n if (!isControlled) {\n setUncontrolledValue(newValue);\n }\n };\n\n const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n return (\n <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n <div\n ref={tabListRef}\n className={classNames(styles['tab-list-wrapper'], {\n [styles['tab-list-wrapper--sticky']]: sticky,\n })}\n style={{\n zIndex: zIndex,\n }}\n >\n <TabList\n onTabListClick={(index: number) => onValueChange(index)}\n selectedTab={activeTabIndex}\n color={color}\n onColor={onColorUsed}\n ariaLabelLeftButton={mergedResources.ariaLabelLeftButton}\n ariaLabelRightButton={mergedResources.ariaLabelRightButton}\n >\n {children}\n </TabList>\n <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n </div>\n <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n {React.Children.toArray(children)[activeTabIndex]}\n </TabPanel>\n </div>\n </div>\n );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabsRoot.displayName = 'Tabs';\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n","import Tabs from './Tabs';\nexport from './Tabs';\nexport default Tabs;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;AEMA~~,IAAa,gBAAgB,aAAkD;CAC7E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;~~AC6BA~~,IAAa,YAAiC,EAC5C,WACA,UACA,WACA,QAAQ,SACR,oBAAoB,MACpB,UAAU,WACV,SAAS,MACT,QACA,WACA,aACI;CACJ,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,CAAC;CAC5D,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAsC;EAC1C,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,IAAI,cAA2B;CAC/B,IAAI,UAAU,SACZ,cAAc;CAGhB,MAAM,iBAAiB,aAA2B;EAChD,IAAI,CAAC,cACH,qBAAqB,QAAQ;CAEjC;CAEA,MAAM,iBAAiB,eAAe,YAAY;CAElD,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,qBAAqB;EAAG,eAAa;YAAnH,CACE,qBAAC,OAAD;GACE,KAAK;GACL,WAAW,WAAW,OAAO,qBAAqB,GAC/C,OAAO,8BAA8B,OACxC,CAAC;GACD,OAAO,EACG,OACV;aAPF,CASE,oBAAC,iBAAD;IACE,iBAAiB,UAAkB,cAAc,KAAK;IACtD,aAAa;IACN;IACP,SAAS;IACT,qBAAqB,gBAAgB;IACrC,sBAAsB,gBAAgB;IAErC;GACM,CAAA,GACT,oBAAC,OAAD,EAAK,WAAW,WAAW,OAAO,kBAAkB,OAAO,kBAAkB,QAAQ,EAAQ,CAAA,CAC1F;MACL,oBAAC,OAAD;GAAK,KAAK;GAAS,OAAO,EAAE,WAAW,QAAQ;aAC7C,oBAAC,kBAAD;IAAU,KAAK;IAAoB;IAAO,SAAS,kBAAkB;cAClE,MAAM,SAAS,QAAQ,QAAQ,EAAE;GAC1B,CAAA;EACP,CAAA,CACF;;AAET;AAKA,IAAM,OAAO;AACb,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;;;ACtHvB,IAAA,eAAe"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/resources/HN.Designsystem.Tabs.en-GB.json","../../../src/resources/HN.Designsystem.Tabs.nb-NO.json","../../../src/resources/HN.Designsystem.Tabs.se-NO.json","../../../src/components/Tabs/resourceHelper.ts","../../../src/components/Tabs/Tabs.tsx","../../../src/components/Tabs/index.ts"],"sourcesContent":["{\n \"ariaLabelRightButton\": \"Scroll right\",\n \"ariaLabelLeftButton\": \"Scroll left\"\n}\n","{\n \"ariaLabelRightButton\": \"Scroll til høyre\",\n \"ariaLabelLeftButton\": \"Scroll til venstre\"\n}\n","{\n \"ariaLabelRightButton\": \"Sirdde olgeš guvlui\",\n \"ariaLabelLeftButton\": \"Sirdde gurut guvlui\"\n}\n","import type { HNDesignsystemTabs } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\nimport seNO from '../../resources/HN.Designsystem.Tabs.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTabs => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.SAMI_NORTHERN:\n return seNO;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemTabs } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport designsystemlayout from '../../scss/layout.module.scss';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' \| 'neutral' \| 'white'>;\nexport type TabsOnColor = 'onblueberry' \| 'onneutral' \| 'onwhite';\n\nexport interface TabsProps {\n children?: React.ReactNode;\n /** Controlled state for Tabs component /\n activeTab?: number;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the color of the tabs. Default: white /\n color?: TabsColors;\n /* Sets wether the component should use the container-breakout class. Default: true /\n containerBreakout?: boolean;\n /* Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite /\n onColor?: TabsOnColor;\n /* Whether the tab list should be sticky /\n sticky?: boolean;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Resources for component /\n resources?: Partial<HNDesignsystemTabs>;\n /* Overrides the default z-index of the tabs header /\n zIndex?: number;\n}\n\nexport const TabsRoot: React.FC<TabsProps> = ({\n activeTab,\n children,\n className,\n color = 'white',\n containerBreakout = true,\n onColor = 'onwhite',\n sticky = true,\n testId,\n resources,\n zIndex,\n}) => {\n const isControlled = activeTab !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(0);\n const tabsRef = useRef<HTMLDivElement>(null);\n const tabPanelRef = useRef<HTMLDivElement>(null);\n const tabListRef = useRef<HTMLDivElement>(null);\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemTabs = {\n ...defaultResources,\n ...resources,\n };\n\n let onColorUsed: TabsOnColor = 'onwhite';\n if (color === 'white') {\n onColorUsed = onColor;\n }\n\n const onValueChange = (newValue: number): void => {\n if (!isControlled) {\n setUncontrolledValue(newValue);\n }\n };\n\n const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n return (\n <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n <div\n ref={tabListRef}\n className={classNames(styles['tab-list-wrapper'], {\n [styles['tab-list-wrapper--sticky']]: sticky,\n })}\n style={{\n zIndex: zIndex,\n }}\n >\n <TabList\n onTabListClick={(index: number) => onValueChange(index)}\n selectedTab={activeTabIndex}\n color={color}\n onColor={onColorUsed}\n ariaLabelLeftButton={mergedResources.ariaLabelLeftButton}\n ariaLabelRightButton={mergedResources.ariaLabelRightButton}\n >\n {children}\n </TabList>\n <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n </div>\n <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n {React.Children.toArray(children)[activeTabIndex]}\n </TabPanel>\n </div>\n </div>\n );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabsRoot.displayName = 'Tabs';\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n","import Tabs from './Tabs';\nexport from './Tabs';\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AGOA,IAAa,gBAAgB,aAAkD;CAC7E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB,eACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;AC0BA,IAAa,YAAiC,EAC5C,WACA,UACA,WACA,QAAQ,SACR,oBAAoB,MACpB,UAAU,WACV,SAAS,MACT,QACA,WACA,aACI;CACJ,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,CAAC;CAC5D,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAsC;EAC1C,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,IAAI,cAA2B;CAC/B,IAAI,UAAU,SACZ,cAAc;CAGhB,MAAM,iBAAiB,aAA2B;EAChD,IAAI,CAAC,cACH,qBAAqB,QAAQ;CAEjC;CAEA,MAAM,iBAAiB,eAAe,YAAY;CAElD,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,qBAAqB;EAAG,eAAa;YAAnH,CACE,qBAAC,OAAD;GACE,KAAK;GACL,WAAW,WAAW,OAAO,qBAAqB,GAC/C,OAAO,8BAA8B,OACxC,CAAC;GACD,OAAO,EACG,OACV;aAPF,CASE,oBAAC,iBAAD;IACE,iBAAiB,UAAkB,cAAc,KAAK;IACtD,aAAa;IACN;IACP,SAAS;IACT,qBAAqB,gBAAgB;IACrC,sBAAsB,gBAAgB;IAErC;GACM,CAAA,GACT,oBAAC,OAAD,EAAK,WAAW,WAAW,OAAO,kBAAkB,OAAO,kBAAkB,QAAQ,EAAQ,CAAA,CAC1F;MACL,oBAAC,OAAD;GAAK,KAAK;GAAS,OAAO,EAAE,WAAW,QAAQ;aAC7C,oBAAC,kBAAD;IAAU,KAAK;IAAoB;IAAO,SAAS,kBAAkB;cAClE,MAAM,SAAS,QAAQ,QAAQ,EAAE;GAC1B,CAAA;EACP,CAAA,CACF;;AAET;AAKA,IAAM,OAAO;AACb,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;;;ACtHvB,IAAA,eAAe"}

package/lib/resourceHelper.js CHANGED Viewed

@@ -9,7 +9,8 @@ var HN_Designsystem_Filter_en_GB_default = {
 	searchClearButtonAriaLabel: "Reset",
 	searchButtonAriaLabel: "Search",
 	loadingText: "Loading results",
-	resultsText: "{0} results"
+	resultsText: "{0} results",
+	activeFiltersListLabel: "Aktive filter"
 };
 var HN_Designsystem_Filter_nb_NO_default = {
 	filterButtonText: "Finn ...",
@@ -21,13 +22,42 @@ var HN_Designsystem_Filter_nb_NO_default = {
 	searchClearButtonAriaLabel: "Nullstill",
 	searchButtonAriaLabel: "Søk",
 	loadingText: "Henter treff",
-	resultsText: "{0} treff"
+	resultsText: "{0} treff",
+	activeFiltersListLabel: "Aktive filter"
+};
+var HN_Designsystem_Filter_nn_NO_default = {
+	filterButtonText: "Finn ...",
+	sortLabel: "Sortering",
+	resetButtonText: "Nullstill",
+	showButtonText: "Vis treff",
+	filterOverviewTitle: "Finn ...",
+	searchPlaceholder: "Søk i lista",
+	searchClearButtonAriaLabel: "Nullstill",
+	searchButtonAriaLabel: "Søk",
+	loadingText: "Hentar treff",
+	resultsText: "{0} treff",
+	activeFiltersListLabel: "Aktive filter"
+};
+var HN_Designsystem_Filter_se_NO_default = {
+	filterButtonText: "Oza ...",
+	sortLabel: "Sirren",
+	resetButtonText: "Bija ruovttuluotta",
+	showButtonText: "Čájet deaivan",
+	filterOverviewTitle: "Oza ...",
+	searchPlaceholder: "Oza listtus",
+	searchClearButtonAriaLabel: "Bija ruovttuluotta",
+	searchButtonAriaLabel: "Oza",
+	loadingText: "Viežžá",
+	resultsText: "{0} deaivan",
+	activeFiltersListLabel: "Aktive filter"
 };
 //#endregion
 //#region src/components/Filter/resourceHelper.ts
 var getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_Filter_en_GB_default;
+		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_Filter_nn_NO_default;
+		case LanguageLocales.SAMI_NORTHERN: return HN_Designsystem_Filter_se_NO_default;
 		case LanguageLocales.NORWEGIAN:
 		default: return HN_Designsystem_Filter_nb_NO_default;
 	}

package/lib/resourceHelper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"resourceHelper.js","names":[],"sources":["../src/resources/HN.Designsystem.Filter.en-GB.json","../src/resources/HN.Designsystem.Filter.nb-NO.json","../src/components/Filter/resourceHelper.ts"],"sourcesContent":["{\n \"filterButtonText\": \"Find ...\",\n \"sortLabel\": \"Sorting\",\n \"resetButtonText\": \"Reset\",\n \"showButtonText\": \"Show results\",\n \"filterOverviewTitle\": \"Find ...\",\n \"searchPlaceholder\": \"Search the list\",\n \"searchClearButtonAriaLabel\": \"Reset\",\n \"searchButtonAriaLabel\": \"Search\",\n \"loadingText\": \"Loading results\",\n \"resultsText\": \"{0} results\"\n}\n","{\n \"filterButtonText\": \"Finn ...\",\n \"sortLabel\": \"Sortering\",\n \"resetButtonText\": \"Nullstill\",\n \"showButtonText\": \"Vis treff\",\n \"filterOverviewTitle\": \"Finn ...\",\n \"searchPlaceholder\": \"Søk i listen\",\n \"searchClearButtonAriaLabel\": \"Nullstill\",\n \"searchButtonAriaLabel\": \"Søk\",\n \"loadingText\": \"Henter treff\",\n \"resultsText\": \"{0} treff\"\n}\n","import type { HNDesignsystemFilter } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Filter.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Filter.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFilter => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;AEMA~~,IAAa,gBAAgB,aAAoD;CAC/E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF"}
1	+ {"version":3,"file":"resourceHelper.js","names":[],"sources":["../src/resources/HN.Designsystem.Filter.en-GB.json","../src/resources/HN.Designsystem.Filter.nb-NO.json","../src/resources/HN.Designsystem.Filter.nn-NO.json","../src/resources/HN.Designsystem.Filter.se-NO.json","../src/components/Filter/resourceHelper.ts"],"sourcesContent":["{\n \"filterButtonText\": \"Find ...\",\n \"sortLabel\": \"Sorting\",\n \"resetButtonText\": \"Reset\",\n \"showButtonText\": \"Show results\",\n \"filterOverviewTitle\": \"Find ...\",\n \"searchPlaceholder\": \"Search the list\",\n \"searchClearButtonAriaLabel\": \"Reset\",\n \"searchButtonAriaLabel\": \"Search\",\n \"loadingText\": \"Loading results\",\n \"resultsText\": \"{0} results\",\n \"activeFiltersListLabel\": \"Aktive filter\"\n}\n","{\n \"filterButtonText\": \"Finn ...\",\n \"sortLabel\": \"Sortering\",\n \"resetButtonText\": \"Nullstill\",\n \"showButtonText\": \"Vis treff\",\n \"filterOverviewTitle\": \"Finn ...\",\n \"searchPlaceholder\": \"Søk i listen\",\n \"searchClearButtonAriaLabel\": \"Nullstill\",\n \"searchButtonAriaLabel\": \"Søk\",\n \"loadingText\": \"Henter treff\",\n \"resultsText\": \"{0} treff\",\n \"activeFiltersListLabel\": \"Aktive filter\"\n}\n","{\n \"filterButtonText\": \"Finn ...\",\n \"sortLabel\": \"Sortering\",\n \"resetButtonText\": \"Nullstill\",\n \"showButtonText\": \"Vis treff\",\n \"filterOverviewTitle\": \"Finn ...\",\n \"searchPlaceholder\": \"Søk i lista\",\n \"searchClearButtonAriaLabel\": \"Nullstill\",\n \"searchButtonAriaLabel\": \"Søk\",\n \"loadingText\": \"Hentar treff\",\n \"resultsText\": \"{0} treff\",\n \"activeFiltersListLabel\": \"Aktive filter\"\n}\n","{\n \"filterButtonText\": \"Oza ...\",\n \"sortLabel\": \"Sirren\",\n \"resetButtonText\": \"Bija ruovttuluotta\",\n \"showButtonText\": \"Čájet deaivan\",\n \"filterOverviewTitle\": \"Oza ...\",\n \"searchPlaceholder\": \"Oza listtus\",\n \"searchClearButtonAriaLabel\": \"Bija ruovttuluotta\",\n \"searchButtonAriaLabel\": \"Oza\",\n \"loadingText\": \"Viežžá\",\n \"resultsText\": \"{0} deaivan\",\n \"activeFiltersListLabel\": \"Aktive filter\"\n}\n","import type { HNDesignsystemFilter } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Filter.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Filter.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Filter.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.Filter.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFilter => {\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AIQA,IAAa,gBAAgB,aAAoD;CAC/E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB,mBACnB,OAAO;EACT,KAAK,gBAAgB,eACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF"}

package/lib/resources/HN.Designsystem.Drawer.se-NO.json.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+declare const _default: {
+  "ariaLabelCloseBtn": "Gidde",
+  "ariaLabelBackButton": "Mana ruovttoluotta"
+}
+;
+export default _default;

package/lib/resources/HN.Designsystem.Filter.en-GB.json.d.ts CHANGED Viewed

@@ -8,7 +8,8 @@ declare const _default: {
   "searchClearButtonAriaLabel": "Reset",
   "searchButtonAriaLabel": "Search",
   "loadingText": "Loading results",
-  "resultsText": "{0} results"
+  "resultsText": "{0} results",
+  "activeFiltersListLabel": "Aktive filter"
 }
 ;

package/lib/resources/HN.Designsystem.Filter.nb-NO.json.d.ts CHANGED Viewed

@@ -8,7 +8,8 @@ declare const _default: {
   "searchClearButtonAriaLabel": "Nullstill",
   "searchButtonAriaLabel": "Søk",
   "loadingText": "Henter treff",
-  "resultsText": "{0} treff"
+  "resultsText": "{0} treff",
+  "activeFiltersListLabel": "Aktive filter"
 }
 ;

package/lib/resources/HN.Designsystem.Filter.nn-NO.json.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+declare const _default: {
+  "filterButtonText": "Finn ...",
+  "sortLabel": "Sortering",
+  "resetButtonText": "Nullstill",
+  "showButtonText": "Vis treff",
+  "filterOverviewTitle": "Finn ...",
+  "searchPlaceholder": "Søk i lista",
+  "searchClearButtonAriaLabel": "Nullstill",
+  "searchButtonAriaLabel": "Søk",
+  "loadingText": "Hentar treff",
+  "resultsText": "{0} treff",
+  "activeFiltersListLabel": "Aktive filter"
+}
+;
+export default _default;

package/lib/resources/HN.Designsystem.Filter.se-NO.json.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+declare const _default: {
+  "filterButtonText": "Oza ...",
+  "sortLabel": "Sirren",
+  "resetButtonText": "Bija ruovttuluotta",
+  "showButtonText": "Čájet deaivan",
+  "filterOverviewTitle": "Oza ...",
+  "searchPlaceholder": "Oza listtus",
+  "searchClearButtonAriaLabel": "Bija ruovttuluotta",
+  "searchButtonAriaLabel": "Oza",
+  "loadingText": "Viežžá",
+  "resultsText": "{0} deaivan",
+  "activeFiltersListLabel": "Aktive filter"
+}
+;
+export default _default;

package/lib/resources/HN.Designsystem.Tabs.se-NO.json.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+declare const _default: {
+  "ariaLabelRightButton": "Sirdde olgeš guvlui",
+  "ariaLabelLeftButton": "Sirdde gurut guvlui"
+}
+;
+export default _default;

package/lib/resources/Resources.d.ts CHANGED Viewed

@@ -187,6 +187,10 @@ export type HNDesignsystemFilter = {
    * {0} treff
    */
   resultsText: string;
+  /**
+   * Aktive filter
+   */
+  activeFiltersListLabel: string;
 };
 export type HNDesignsystemChip = {

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "15.0.0",
+  "version": "15.1.0",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",
@@ -834,11 +834,26 @@
       "import": "./lib/components/VisualRadioGroup/index.js",
       "require": "./lib/components/VisualRadioGroup/index.js",
       "default": "./lib/components/VisualRadioGroup/index.js"
-    }
+    },
+    "./scss/body": "./scss/_body.scss",
+    "./scss/breakpoints": "./scss/_breakpoints.scss",
+    "./scss/font-mixins": "./scss/_font-mixins.scss",
+    "./scss/font-settings": "./scss/_font-settings.scss",
+    "./scss/fonts": "./scss/_fonts.scss",
+    "./scss/grid": "./scss/_grid.scss",
+    "./scss/icon": "./scss/_icon.scss",
+    "./scss/input": "./scss/_input.scss",
+    "./scss/palette": "./scss/_palette.scss",
+    "./scss/print": "./scss/_print.scss",
+    "./scss/radio-reset": "./scss/_radio-reset.scss",
+    "./scss/reset": "./scss/_reset.scss",
+    "./scss/screen-reader": "./scss/_screen-reader.scss",
+    "./scss/spacers": "./scss/_spacers.scss",
+    "./scss/visual-form": "./scss/_visual-form.scss"
   },
   "scripts": {
     "start": "storybook dev -p 3000",
-    "prebuild": "npm-run-all link-scss clean generate:iconnames generate:illustrationnames generate:cssdefinitions",
+    "prebuild": "npm-run-all link-scss clean generate:iconnames generate:illustrationnames generate:cssdefinitions generate:scssexports",
     "build": "vite build",
     "postbuild": "node ../build-tools/lib/copy.js --root ../../CHANGELOG.md --include \"src/scss/**/*\" \"src/fonts/**/*\" \"src/components/**/*.module.scss*\" && npm run link-scss",
     "link-scss": "node __scripts__/link-root-scss.mjs",
@@ -851,6 +866,7 @@
     "generate:iconnames": "node __scripts__/generateIconNames.mjs",
     "generate:illustrationnames": "node __scripts__/generateIllustrationNames.mjs",
     "generate:cssdefinitions": "typed-scss-modules \"src/**/*.module.scss\" --nameFormat none --exportType default --includePaths node_modules ../../node_modules",
+    "generate:scssexports": "node __scripts__/gen-scss-exports.mjs",
     "eslint": "eslint \"src/**/*.{ts,tsx}\"",
     "eslint:fix": "npm run eslint -- --fix",
     "stylelint": "stylelint \"src/**/*.{css,scss}\"",