@dnb/eufemia 10.22.0 → 10.23.0

package/es/components/breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":["React","useEffect","useState","classnames","createSkeletonClass","createSpacingClasses","Section","Button","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","useMedia","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","setCollapse","isLarge","currentVariant","innerSpace","createElement","_extends","style_type","text","icon","icon_position","Fragment","Item","_supportsSpacingProps"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n  SectionSpacing,\n  SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n  convertJsxToString,\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\nimport { useMedia } from '../../shared'\n\nexport type BreadcrumbProps = {\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n   * Default: null\n   */\n  data?: Array<BreadcrumbItemProps>\n\n  /**\n   * The content of the component. Can be used instead of prop \"data\".\n   * Default: null\n   */\n  children?:\n    | React.ReactElement<BreadcrumbItemProps>\n    | Array<React.ReactElement<BreadcrumbItemProps>>\n\n  /**\n   * The variant of the component.\n   * Default: When children and data is not defined, it defaults to \"single\". \"responsive\" if they are defined.\n   */\n  variant?: 'responsive' | 'single' | 'multiple' | 'collapse'\n\n  /**\n   * Handle the click event on 'single'/'collapse'\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Every <nav> on a page needs an unique aria-label text\n   * Default: Page hierarchy\n   */\n  navText?: React.ReactNode\n\n  /**\n   * Add custom 'Back' text for variant 'single'\n   * Default: 'Back' or defined by Context translation\n   */\n  goBackText?: React.ReactNode\n\n  /**\n   * Add custom 'Home' text\n   * Default: 'Home' or defined by Context translation\n   */\n  homeText?: React.ReactNode\n\n  /**\n   * Add custom 'Back to...' text, for variant collapse\n   * Default 'Back to...' or defined by Context translation\n   */\n  backToText?: React.ReactNode\n\n  /**\n   * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n   * Default: null\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: transparent\n   */\n  styleType?: SectionStyleTypes\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: pistachio\n   */\n  collapsedStyleType?: SectionStyleTypes\n\n  /**\n   * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n   * Default: false\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Will disable the height animation\n   * Default: false\n   */\n  noAnimation?: boolean\n}\n\nexport const defaultProps = {\n  skeleton: false,\n  navText: 'Back',\n  goBackText: 'Back',\n  homeText: 'Home',\n  backToText: 'Back to...',\n  isCollapsed: true,\n  styleType: 'transparent',\n  collapsedStyleType: 'info',\n  spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Breadcrumb,\n    context?.Breadcrumb,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    className,\n    skeleton,\n    children: items,\n    variant,\n    onClick,\n    navText, // has a translation in context\n    goBackText, // has a translation in context\n    homeText, // eslint-disable-line\n    backToText, // has a translation in context\n    styleType,\n    collapsedStyleType,\n    isCollapsed: overrideIsCollapsed,\n    spacing,\n    noAnimation,\n    data,\n    href,\n    ...props\n  } = allProps\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  const [isCollapsed, setCollapse] = useState(overrideIsCollapsed)\n\n  const { isLarge } = useMedia()\n\n  let currentVariant = variant\n  if (!variant) {\n    if (items || data) {\n      currentVariant = 'responsive'\n    } else {\n      currentVariant = 'single'\n    }\n  }\n\n  useEffect(() => {\n    setCollapse(overrideIsCollapsed)\n  }, [overrideIsCollapsed])\n\n  // Auto-collapse breadcrumbs if going from small screen to large screen.\n  useEffect(() => {\n    if (isLarge && overrideIsCollapsed !== false) {\n      setCollapse(true)\n    }\n  }, [isLarge])\n\n  validateDOMAttributes(allProps, props)\n\n  const innerSpace = isTrue(spacing) ? 'small' : spacing\n\n  return (\n    <nav\n      aria-label={convertJsxToString(navText)}\n      className={classnames(\n        'dnb-breadcrumb',\n        `dnb-breadcrumb--variant-${currentVariant}`,\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      <Section\n        className=\"dnb-breadcrumb__bar\"\n        style_type={styleType || 'transparent'}\n        innerSpace={innerSpace}\n      >\n        {currentVariant === 'single' ? (\n          <Button\n            text={goBackText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={onClick}\n            href={href}\n          />\n        ) : (\n          <>\n            {currentVariant !== 'multiple' && (\n              <Button\n                className=\"dnb-breadcrumb__toggle\"\n                text={backToText}\n                variant=\"tertiary\"\n                icon=\"chevron_left\"\n                icon_position=\"left\"\n                onClick={\n                  onClick ||\n                  (() => {\n                    setCollapse(!isCollapsed)\n                  })\n                }\n                aria-expanded={!isCollapsed}\n              />\n            )}\n\n            {currentVariant !== 'collapse' && (\n              <BreadcrumbMultiple\n                data={data}\n                items={items}\n                isCollapsed={false}\n                noAnimation={noAnimation}\n              />\n            )}\n          </>\n        )}\n      </Section>\n\n      {(currentVariant === 'collapse' ||\n        currentVariant === 'responsive') && (\n        <Section\n          variant={collapsedStyleType}\n          className=\"dnb-breadcrumb__collapse\"\n        >\n          <BreadcrumbMultiple\n            data={data}\n            items={items}\n            isCollapsed={isCollapsed}\n            noAnimation={noAnimation}\n          />\n        </Section>\n      )}\n    </nav>\n  )\n}\n\nBreadcrumb.Item = BreadcrumbItem\nBreadcrumb._supportsSpacingProps = true\n\nexport { BreadcrumbItem }\nexport default Breadcrumb\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.js","names":["React","useCallback","useEffect","useMemo","useReducer","useRef","classnames","createSkeletonClass","createSpacingClasses","Section","Button","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","useMedia","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","forceUpdate","isCollapsedRef","isLarge","current","onClickHandler","currentVariant","innerSpace","createElement","_extends","style_type","text","icon","icon_position","Fragment","Item","_supportsSpacingProps"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n  SectionSpacing,\n  SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n  convertJsxToString,\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\nimport { useMedia } from '../../shared'\n\nexport type BreadcrumbProps = {\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n   * Default: null\n   */\n  data?: Array<BreadcrumbItemProps>\n\n  /**\n   * The content of the component. Can be used instead of prop \"data\".\n   * Default: null\n   */\n  children?:\n    | React.ReactElement<BreadcrumbItemProps>\n    | Array<React.ReactElement<BreadcrumbItemProps>>\n\n  /**\n   * The variant of the component.\n   * Default: When children and data is not defined, it defaults to \"single\". \"responsive\" if they are defined.\n   */\n  variant?: 'responsive' | 'single' | 'multiple' | 'collapse'\n\n  /**\n   * Handle the click event on 'single'/'collapse'\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Every <nav> on a page needs an unique aria-label text\n   * Default: Page hierarchy\n   */\n  navText?: React.ReactNode\n\n  /**\n   * Add custom 'Back' text for variant 'single'\n   * Default: 'Back' or defined by Context translation\n   */\n  goBackText?: React.ReactNode\n\n  /**\n   * Add custom 'Home' text\n   * Default: 'Home' or defined by Context translation\n   */\n  homeText?: React.ReactNode\n\n  /**\n   * Add custom 'Back to...' text, for variant collapse\n   * Default 'Back to...' or defined by Context translation\n   */\n  backToText?: React.ReactNode\n\n  /**\n   * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n   * Default: null\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: transparent\n   */\n  styleType?: SectionStyleTypes\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: pistachio\n   */\n  collapsedStyleType?: SectionStyleTypes\n\n  /**\n   * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n   * Default: false\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Will disable the height animation\n   * Default: false\n   */\n  noAnimation?: boolean\n}\n\nexport const defaultProps = {\n  skeleton: false,\n  navText: 'Back',\n  goBackText: 'Back',\n  homeText: 'Home',\n  backToText: 'Back to...',\n  isCollapsed: true,\n  styleType: 'transparent',\n  collapsedStyleType: 'info',\n  spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Breadcrumb,\n    context?.Breadcrumb,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    className,\n    skeleton,\n    children: items,\n    variant,\n    onClick,\n    navText, // has a translation in context\n    goBackText, // has a translation in context\n    homeText, // eslint-disable-line\n    backToText, // has a translation in context\n    styleType,\n    collapsedStyleType,\n    isCollapsed: overrideIsCollapsed,\n    spacing,\n    noAnimation,\n    data,\n    href,\n    ...props\n  } = allProps\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const isCollapsedRef = useRef(overrideIsCollapsed)\n\n  const { isLarge } = useMedia()\n\n  useEffect(() => {\n    if (overrideIsCollapsed !== isCollapsedRef.current) {\n      isCollapsedRef.current = overrideIsCollapsed\n      forceUpdate()\n    }\n  }, [overrideIsCollapsed])\n\n  // Auto-collapse breadcrumbs if going from small screen to large screen.\n  useEffect(() => {\n    if (isLarge && overrideIsCollapsed !== false) {\n      isCollapsedRef.current = true\n      forceUpdate()\n    }\n  }, [isLarge, overrideIsCollapsed])\n\n  const onClickHandler = useCallback(() => {\n    isCollapsedRef.current = !isCollapsedRef.current\n    forceUpdate()\n  }, [])\n\n  const currentVariant = useMemo(() => {\n    if (!variant) {\n      if (items || data) {\n        return 'responsive'\n      } else {\n        return 'single'\n      }\n    }\n\n    return variant\n  }, [data, items, variant])\n\n  validateDOMAttributes(allProps, props)\n\n  const innerSpace = isTrue(spacing) ? 'small' : spacing\n\n  return (\n    <nav\n      aria-label={convertJsxToString(navText)}\n      className={classnames(\n        'dnb-breadcrumb',\n        `dnb-breadcrumb--variant-${currentVariant}`,\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      <Section\n        className=\"dnb-breadcrumb__bar\"\n        style_type={styleType || 'transparent'}\n        innerSpace={innerSpace}\n      >\n        {currentVariant === 'single' ? (\n          <Button\n            text={goBackText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={onClick}\n            href={href}\n          />\n        ) : (\n          <>\n            {currentVariant !== 'multiple' && (\n              <Button\n                className=\"dnb-breadcrumb__toggle\"\n                text={backToText}\n                variant=\"tertiary\"\n                icon=\"chevron_left\"\n                icon_position=\"left\"\n                onClick={onClick ?? onClickHandler}\n                aria-expanded={!isCollapsedRef.current}\n              />\n            )}\n\n            {currentVariant !== 'collapse' && (\n              <BreadcrumbMultiple\n                data={data}\n                items={items}\n                isCollapsed={false}\n                noAnimation={noAnimation}\n              />\n            )}\n          </>\n        )}\n      </Section>\n\n      {(currentVariant === 'collapse' ||\n        currentVariant === 'responsive') && (\n        <Section\n          variant={collapsedStyleType}\n          className=\"dnb-breadcrumb__collapse\"\n        >\n          <BreadcrumbMultiple\n            data={data}\n            items={items}\n            isCollapsed={isCollapsedRef.current}\n            noAnimation={noAnimation}\n          />\n        </Section>\n      )}\n    </nav>\n  )\n}\n\nBreadcrumb.Item = BreadcrumbItem\nBreadcrumb._supportsSpacingProps = true\n\nexport { BreadcrumbItem }\nexport default Breadcrumb\n"],"mappings":"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"}

package/es/components/breadcrumb/BreadcrumbItem.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-import { ButtonProps } from '../button/Button';
+import { ButtonProps } from '../Button';
+import { AnchorAllProps } from '../Anchor';
+import type { DataAttributeTypes } from '../../shared/types';
 import type { IconIcon } from '../icon/Icon';
 import type { SkeletonShow } from '../skeleton/Skeleton';
 export type BreadcrumbItemProps = {
@@ -10,7 +12,7 @@ export type BreadcrumbItemProps = {
     text?: React.ReactNode;
     /**
      * Icon displaying on the left side
-     * Default: HomeIcon / chevron_left
+     * Default: HomeIcon / chevron_right
      */
     icon?: IconIcon;
     /**
@@ -22,7 +24,7 @@ export type BreadcrumbItemProps = {
      * Set a custom click event. In this case, you should not define the prop href.
      * Default: null
      */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
     /**
      * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.
      * Default: null
@@ -35,7 +37,7 @@ export type BreadcrumbItemProps = {
     skeleton?: SkeletonShow;
     /** Internal */
     itemNr?: number;
-} & Omit<ButtonProps, 'variant'>;
+} & (AnchorAllProps & Omit<ButtonProps, 'variant'>) & DataAttributeTypes;
 declare const BreadcrumbItem: {
     (localProps: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
     _supportsSpacingProps: boolean;

package/es/components/breadcrumb/BreadcrumbItem.js

@@ -4,11 +4,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton", "itemNr"];
 import React from 'react';
-import Button from '../button/Button';
+import Button from '../Button';
+import Anchor from '../Anchor';
 import IconPrimary from '../icon-primary/IconPrimary';
 import P from '../../elements/P';
 import homeIcon from '../../icons/home';
-import { useTheme, useMediaQuery } from '../../shared';
+import { useMediaQuery } from '../../shared';
 import Context from '../../shared/Context';
 import { extendPropsWithContext, filterProps } from '../../shared/component-helper';
 const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
@@ -20,7 +21,7 @@ const defaultProps = {
   variant: null,
   skeleton: null
 };
-const determineSbankenIcon = (variant, isSmallScreen) => {
+const determineIcon = (variant, isSmallScreen) => {
   switch (variant) {
     case 'home':
       return 'home-icon';
@@ -34,6 +35,7 @@ const determineSbankenIcon = (variant, isSmallScreen) => {
 const BreadcrumbItem = localProps => {
   const context = React.useContext(Context);
   const {
+    theme,
     translation: {
       Breadcrumb: {
         homeText
@@ -51,7 +53,6 @@ const BreadcrumbItem = localProps => {
       itemNr
     } = _extendPropsWithConte,
     props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
-  const theme = useTheme();
   const isSmallScreen = useMediaQuery({
     matchOnSSR: true,
     when: {
@@ -60,15 +61,14 @@ const BreadcrumbItem = localProps => {
   });
   const [currentIcon, setCurrentIcon] = React.useState('chevron_left');
   useLayoutEffect(() => {
-    if (!icon && (theme === null || theme === void 0 ? void 0 : theme.name) === 'sbanken') {
-      const icon = determineSbankenIcon(variant, isSmallScreen);
-      setCurrentIcon(icon);
+    if (!icon) {
+      setCurrentIcon(determineIcon(variant, isSmallScreen));
     } else {
       if (variant !== 'home') {
         setCurrentIcon(icon !== null && icon !== void 0 ? icon : 'chevron_left');
       }
     }
-  }, [icon, isSmallScreen, theme === null || theme === void 0 ? void 0 : theme.name, variant]);
+  }, [icon, isSmallScreen, variant]);
   const currentText = text || variant === 'home' && homeText || '';
   const isInteractive = (href || onClick || props.to) && variant !== 'current';
   const style = {
@@ -79,7 +79,7 @@ const BreadcrumbItem = localProps => {
     className: "dnb-breadcrumb__item",
     "aria-current": variant === 'current' ? 'page' : undefined,
     style: style
-  }, isInteractive ? React.createElement(Button, _extends({
+  }, isInteractive ? (theme === null || theme === void 0 ? void 0 : theme.name) === 'sbanken' ? React.createElement(Button, _extends({
     variant: "tertiary",
     href: href,
     icon: iconToUse,
@@ -87,7 +87,15 @@ const BreadcrumbItem = localProps => {
     on_click: onClick,
     text: currentText,
     skeleton: skeleton
-  }, props)) : React.createElement("span", _extends({
+  }, props)) : React.createElement(React.Fragment, null, variant !== 'home' && React.createElement(IconPrimary, {
+    icon: iconToUse,
+    className: "dnb-breadcrumb__item__span__icon"
+  }), React.createElement(Anchor, _extends({
+    href: href,
+    onClick: onClick,
+    icon: variant === 'home' ? iconToUse : null,
+    skeleton: skeleton
+  }, props), currentText)) : React.createElement("span", _extends({
     className: "dnb-breadcrumb__item__span"
   }, filterProps(props, key => !key.includes('-'))), React.createElement(IconPrimary, {
     icon: iconToUse,

package/es/components/breadcrumb/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","names":["React","Button","IconPrimary","P","homeIcon","useTheme","useMediaQuery","Context","extendPropsWithContext","filterProps","useLayoutEffect","window","useEffect","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","translation","Breadcrumb","homeText","_extendPropsWithConte","itemNr","props","_objectWithoutProperties","_excluded","theme","matchOnSSR","when","max","currentIcon","setCurrentIcon","useState","name","currentText","isInteractive","to","style","String","iconToUse","createElement","className","undefined","_extends","icon_position","on_click","key","includes","space","_supportsSpacingProps"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button, { ButtonProps } from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useTheme, useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  extendPropsWithContext,\n  filterProps,\n} from '../../shared/component-helper'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type BreadcrumbItemProps = {\n  /**\n   * Text displaying the title of the item's corresponding page\n   * Default: If variant='home', default is \"Home\". Otherwise it is required.\n   */\n  text?: React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: HomeIcon / chevron_left\n   */\n  icon?: IconIcon\n\n  /**\n   * Href should be the link to the item's corresponding page.\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Set a custom click event. In this case, you should not define the prop href.\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n   * Default: null\n   */\n  variant?: 'home' | 'previous' | 'current'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /** Internal */\n  itemNr?: number\n} & Omit<ButtonProps, 'variant'>\n\nconst defaultProps = {\n  text: null,\n  href: null,\n  icon: null,\n  onClick: null,\n  variant: null,\n  skeleton: null,\n}\n\nconst determineSbankenIcon: IconIcon = (\n  variant: string,\n  isSmallScreen: boolean\n) => {\n  switch (variant) {\n    case 'home':\n      return 'home-icon'\n    case 'single':\n    case 'collapse':\n      return 'chevron_left'\n    default:\n      return isSmallScreen ? 'chevron_left' : 'chevron_right'\n  }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      Breadcrumb: { homeText },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const {\n    text,\n    href,\n    icon,\n    onClick,\n    variant,\n    skeleton,\n    itemNr,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.BreadcrumbItem\n  )\n\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  const [currentIcon, setCurrentIcon] =\n    React.useState<IconIcon>('chevron_left')\n\n  useLayoutEffect(() => {\n    if (!icon && theme?.name === 'sbanken') {\n      const icon = determineSbankenIcon(variant, isSmallScreen)\n      setCurrentIcon(icon)\n    } else {\n      if (variant !== 'home') {\n        setCurrentIcon(icon ?? 'chevron_left')\n      }\n    }\n  }, [icon, isSmallScreen, theme?.name, variant])\n\n  const currentText = text || (variant === 'home' && homeText) || ''\n  const isInteractive =\n    (href || onClick || props.to) && variant !== 'current'\n  const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n  const iconToUse =\n    variant === 'home' || currentIcon === 'home-icon'\n      ? homeIcon\n      : currentIcon\n\n  return (\n    <li\n      className=\"dnb-breadcrumb__item\"\n      aria-current={variant === 'current' ? 'page' : undefined}\n      style={style}\n    >\n      {isInteractive ? (\n        <Button\n          variant=\"tertiary\"\n          href={href}\n          icon={iconToUse}\n          icon_position=\"left\"\n          on_click={onClick}\n          text={currentText}\n          skeleton={skeleton}\n          {...props}\n        />\n      ) : (\n        <span\n          className=\"dnb-breadcrumb__item__span\"\n          // TODO: Consider deprecating passing down props to span in v11\n          {...filterProps(props, (key) => !key.includes('-'))}\n        >\n          <IconPrimary\n            icon={iconToUse}\n            className=\"dnb-breadcrumb__item__span__icon\"\n          />\n          <P space=\"0\">{currentText}</P>\n        </span>\n      )}\n    </li>\n  )\n}\n\nBreadcrumbItem._supportsSpacingProps = true\n\nexport default BreadcrumbItem\n"],"mappings":"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"}
+{"version":3,"file":"BreadcrumbItem.js","names":["React","Button","Anchor","IconPrimary","P","homeIcon","useMediaQuery","Context","extendPropsWithContext","filterProps","useLayoutEffect","window","useEffect","defaultProps","text","href","icon","onClick","variant","skeleton","determineIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","theme","translation","Breadcrumb","homeText","_extendPropsWithConte","itemNr","props","_objectWithoutProperties","_excluded","matchOnSSR","when","max","currentIcon","setCurrentIcon","useState","currentText","isInteractive","to","style","String","iconToUse","createElement","className","undefined","name","_extends","icon_position","on_click","Fragment","key","includes","space","_supportsSpacingProps"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button, { ButtonProps } from '../Button'\nimport Anchor, { AnchorAllProps } from '../Anchor'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { DataAttributeTypes } from '../../shared/types'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  extendPropsWithContext,\n  filterProps,\n} from '../../shared/component-helper'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type BreadcrumbItemProps = {\n  /**\n   * Text displaying the title of the item's corresponding page\n   * Default: If variant='home', default is \"Home\". Otherwise it is required.\n   */\n  text?: React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: HomeIcon / chevron_right\n   */\n  icon?: IconIcon\n\n  /**\n   * Href should be the link to the item's corresponding page.\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Set a custom click event. In this case, you should not define the prop href.\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>\n\n  /**\n   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n   * Default: null\n   */\n  variant?: 'home' | 'previous' | 'current'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /** Internal */\n  itemNr?: number\n} & (AnchorAllProps & Omit<ButtonProps, 'variant'>) &\n  DataAttributeTypes\n\nconst defaultProps = {\n  text: null,\n  href: null,\n  icon: null,\n  onClick: null,\n  variant: null,\n  skeleton: null,\n}\n\nconst determineIcon: IconIcon = (\n  variant: string,\n  isSmallScreen: boolean\n) => {\n  switch (variant) {\n    case 'home':\n      return 'home-icon'\n    case 'single':\n    case 'collapse':\n      return 'chevron_left'\n    default:\n      return isSmallScreen ? 'chevron_left' : 'chevron_right'\n  }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    theme,\n    translation: {\n      Breadcrumb: { homeText },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const {\n    text,\n    href,\n    icon,\n    onClick,\n    variant,\n    skeleton,\n    itemNr,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.BreadcrumbItem\n  )\n\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  const [currentIcon, setCurrentIcon] =\n    React.useState<IconIcon>('chevron_left')\n\n  useLayoutEffect(() => {\n    if (!icon) {\n      setCurrentIcon(determineIcon(variant, isSmallScreen))\n    } else {\n      if (variant !== 'home') {\n        setCurrentIcon(icon ?? 'chevron_left')\n      }\n    }\n  }, [icon, isSmallScreen, variant])\n\n  const currentText = text || (variant === 'home' && homeText) || ''\n  const isInteractive =\n    (href || onClick || props.to) && variant !== 'current'\n  const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n  const iconToUse =\n    variant === 'home' || currentIcon === 'home-icon'\n      ? homeIcon\n      : currentIcon\n\n  return (\n    <li\n      className=\"dnb-breadcrumb__item\"\n      aria-current={variant === 'current' ? 'page' : undefined}\n      style={style}\n    >\n      {isInteractive ? (\n        theme?.name === 'sbanken' ? (\n          <Button\n            variant=\"tertiary\"\n            href={href}\n            icon={iconToUse}\n            icon_position=\"left\"\n            on_click={onClick}\n            text={currentText}\n            skeleton={skeleton}\n            {...props}\n          />\n        ) : (\n          <>\n            {variant !== 'home' && (\n              <IconPrimary\n                icon={iconToUse}\n                className=\"dnb-breadcrumb__item__span__icon\"\n              />\n            )}\n            <Anchor\n              href={href}\n              onClick={onClick}\n              icon={variant === 'home' ? iconToUse : null}\n              skeleton={skeleton}\n              {...props}\n            >\n              {currentText}\n            </Anchor>\n          </>\n        )\n      ) : (\n        <span\n          className=\"dnb-breadcrumb__item__span\"\n          // TODO: Consider deprecating passing down props to span in v11\n          {...filterProps(props, (key) => !key.includes('-'))}\n        >\n          <IconPrimary\n            icon={iconToUse}\n            className=\"dnb-breadcrumb__item__span__icon\"\n          />\n          <P space=\"0\">{currentText}</P>\n        </span>\n      )}\n    </li>\n  )\n}\n\nBreadcrumbItem._supportsSpacingProps = true\n\nexport default BreadcrumbItem\n"],"mappings":"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"}

package/es/components/breadcrumb/style/dnb-breadcrumb.css

@@ -23,17 +23,41 @@
   list-style: none;
   flex-flow: row wrap;
   align-items: center;
-  gap: 1.5rem;
+  row-gap: 1rem;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
 }
-.dnb-breadcrumb__item__span {
+.dnb-breadcrumb__item {
   display: flex;
   align-items: center;
-  line-height: normal;
   padding: 0.5rem 0;
 }
+.dnb-breadcrumb__item__span {
+  display: flex;
+  align-items: center;
+  line-height: var(--line-height-basis);
+}
 .dnb-breadcrumb__item__span__icon {
   margin-right: 0.5rem;
 }
+.dnb-breadcrumb__item .dnb-anchor {
+  line-height: 1rem;
+  padding: 0.25rem 0;
+  position: relative;
+}
+.dnb-breadcrumb__item .dnb-anchor::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: scale(1.25, 2);
+  border: 0.5rem solid transparent;
+}
+.dnb-breadcrumb__item:first-child .dnb-anchor {
+  border-left: none;
+}
+.dnb-breadcrumb__item:first-child .dnb-anchor .dnb-icon {
+  margin-right: 0.5rem;
+}
 .dnb-breadcrumb__multiple {
   display: flex;
   flex-direction: column;
@@ -66,7 +90,8 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
 .dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section {
   flex-direction: column;
   align-items: flex-start;
+  row-gap: 0;
   margin: 0.5rem 0;
   margin-left: 1.5rem;
-  gap: 0;
+  padding: 0;
 }

package/es/components/breadcrumb/style/dnb-breadcrumb.min.css

@@ -1 +1 @@
-.dnb-breadcrumb{display:flex;flex-direction:column;margin:0;padding:0}.dnb-breadcrumb__bar.dnb-section{display:flex}.dnb-breadcrumb__list.dnb-section{align-items:center;display:flex;flex-flow:row wrap;gap:1.5rem;list-style:none;margin:0;padding:0}.dnb-breadcrumb__item__span{align-items:center;display:flex;line-height:normal;padding:.5rem 0}.dnb-breadcrumb__item__span__icon{margin-right:.5rem}.dnb-breadcrumb__multiple{display:flex;flex-direction:column;transition:height .4s var(--easing-default)}.dnb-breadcrumb__multiple .dnb-breadcrumb__item{transform:translateX(-1rem);transition:transform .4s var(--easing-default) calc(var(--delay)*50ms)}.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item{transform:translateX(0)}html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item{transition:none}@media screen and (max-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__bar .dnb-breadcrumb__multiple{display:none}}@media screen and (min-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__toggle{display:none}}.dnb-breadcrumb__collapse{display:flex;flex-direction:column}.dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section{align-items:flex-start;flex-direction:column;gap:0;margin:.5rem 0 .5rem 1.5rem}
+.dnb-breadcrumb{display:flex;flex-direction:column;margin:0;padding:0}.dnb-breadcrumb__bar.dnb-section{display:flex}.dnb-breadcrumb__list.dnb-section{align-items:center;-moz-column-gap:.5rem;column-gap:.5rem;display:flex;flex-flow:row wrap;list-style:none;margin:0;padding:0;row-gap:1rem}.dnb-breadcrumb__item{align-items:center;display:flex;padding:.5rem 0}.dnb-breadcrumb__item__span{align-items:center;display:flex;line-height:var(--line-height-basis)}.dnb-breadcrumb__item__span__icon{margin-right:.5rem}.dnb-breadcrumb__item .dnb-anchor{line-height:1rem;padding:.25rem 0;position:relative}.dnb-breadcrumb__item .dnb-anchor:after{border:.5rem solid transparent;content:"";inset:0;position:absolute;transform:scale(1.25,2)}.dnb-breadcrumb__item:first-child .dnb-anchor{border-left:none}.dnb-breadcrumb__item:first-child .dnb-anchor .dnb-icon{margin-right:.5rem}.dnb-breadcrumb__multiple{display:flex;flex-direction:column;transition:height .4s var(--easing-default)}.dnb-breadcrumb__multiple .dnb-breadcrumb__item{transform:translateX(-1rem);transition:transform .4s var(--easing-default) calc(var(--delay)*50ms)}.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item{transform:translateX(0)}html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item{transition:none}@media screen and (max-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__bar .dnb-breadcrumb__multiple{display:none}}@media screen and (min-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__toggle{display:none}}.dnb-breadcrumb__collapse{display:flex;flex-direction:column}.dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section{align-items:flex-start;flex-direction:column;margin:.5rem 0 .5rem 1.5rem;padding:0;row-gap:0}

package/es/components/breadcrumb/style/dnb-breadcrumb.scss

@@ -25,21 +25,48 @@
 
     flex-flow: row wrap;
     align-items: center;
-    gap: 1.5rem;
+    row-gap: 1rem; // For when breaking into new lines (Anchor variant)
+    column-gap: 0.5rem;
   }
 
   &__item {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0;
+
     &__span {
       display: flex;
       align-items: center;
-      line-height: normal;
-      padding: 0.5rem 0;
+      line-height: var(--line-height-basis);
 
       // To match the other tertiary buttons
       &__icon {
         margin-right: 0.5rem;
       }
     }
+
+    .dnb-anchor {
+      line-height: 1rem;
+      padding: 0.25rem 0;
+
+      // To make the click area bigger
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        transform: scale(1.25, 2);
+        border: 0.5rem solid transparent;
+      }
+    }
+
+    // Home icon spacing
+    &:first-child .dnb-anchor {
+      border-left: none;
+      .dnb-icon {
+        margin-right: 0.5rem;
+      }
+    }
   }
 
   &__multiple {
@@ -87,9 +114,10 @@
   &__collapse &__list.dnb-section {
     flex-direction: column;
     align-items: flex-start;
+    row-gap: 0;
 
     margin: 0.5rem 0;
     margin-left: 1.5rem;
-    gap: 0;
+    padding: 0;
   }
 }

package/es/components/breadcrumb/style/themes/dnb-breadcrumb-theme-sbanken.css

@@ -9,6 +9,12 @@
   font-weight: var(--font-weight-medium);
   color: var(--sb-color-text);
 }
+.dnb-breadcrumb__item {
+  padding: 0;
+}
+.dnb-breadcrumb__item__span {
+  padding: 0.5rem 0;
+}
 .dnb-breadcrumb__item__span__icon {
   color: var(--sb-color-violet);
 }
@@ -20,4 +26,7 @@
 }
 .dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text .dnb-button__text {
   color: var(--sb-color-text);
+}
+.dnb-breadcrumb__list.dnb-section {
+  row-gap: 0;
 }

package/es/components/breadcrumb/style/themes/dnb-breadcrumb-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-breadcrumb .dnb-button__text{color:var(--sb-color-text);font-weight:var(--font-weight-medium)}.dnb-breadcrumb__item__span__icon{color:var(--sb-color-violet)}.dnb-breadcrumb__item__span .dnb-p{color:var(--sb-color-gray-dark-3)}.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text{font-weight:var(--font-weight-medium)}.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text .dnb-button__text{color:var(--sb-color-text)}
+.dnb-breadcrumb .dnb-button__text{color:var(--sb-color-text);font-weight:var(--font-weight-medium)}.dnb-breadcrumb__item{padding:0}.dnb-breadcrumb__item__span{padding:.5rem 0}.dnb-breadcrumb__item__span__icon{color:var(--sb-color-violet)}.dnb-breadcrumb__item__span .dnb-p{color:var(--sb-color-gray-dark-3)}.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text{font-weight:var(--font-weight-medium)}.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text .dnb-button__text{color:var(--sb-color-text)}.dnb-breadcrumb__list.dnb-section{row-gap:0}

package/es/components/breadcrumb/style/themes/dnb-breadcrumb-theme-sbanken.scss

@@ -13,7 +13,9 @@
     }
   }
   &__item {
+    padding: 0;
     &__span {
+      padding: 0.5rem 0;
       &__icon {
         color: var(--sb-color-violet);
       }
@@ -30,4 +32,9 @@
       }
     }
   }
+
+  // For when breaking into new lines
+  &__list.dnb-section {
+    row-gap: 0;
+  }
 }

package/es/components/button/style/button--tertiary.scss

@@ -6,8 +6,16 @@
     --button-tertiary-focus-left: -0.5rem;
     --button-tertiary-focus-right: -0.5rem;
     --button-tertiary-focus-overflow--icon-top: -0.5rem;
+    --button-tertiary-underline-left: var(
+      --button-tertiary-underline-overflow
+    );
+    --button-tertiary-underline-right: var(
+      --button-tertiary-underline-overflow
+    );
     --button-tertiary-underline-overflow: 0;
-    --button-tertiary-underline-overflow--icon: -0.5rem;
+    --button-tertiary-underline-overflow--icon: calc(
+      (var(--button-icon-gutter) + var(--button-icon-size)) * -1
+    );
     // create underline (::after)
     .dnb-button__text {
       position: relative; // because of the underline
@@ -19,8 +27,8 @@
         [data-visual-test-wrapper] & {
           transition: none;
         }
-        left: var(--button-tertiary-underline-overflow);
-        right: var(--button-tertiary-underline-overflow);
+        left: var(--button-tertiary-underline-left);
+        right: var(--button-tertiary-underline-right);
       }
     }
 
@@ -62,28 +70,14 @@
     }
 
     &.dnb-button--has-text {
-      padding-left: 0;
-      padding-right: 0;
+      --button-padding-left: 0;
+      --button-padding-right: 0;
+      --button-icon-margin-top: calc(
+        (var(--button-height) - var(--button-icon-size)) / 2
+      );
 
       .dnb-button__icon {
         align-self: flex-start; // needed to vertically center icon
-
-        margin-top: calc(var(--button-height) / 2 - 0.5rem);
-        &.dnb-icon--medium {
-          margin-top: calc(var(--button-height) / 2 - 0.75rem);
-        }
-        &.dnb-icon--large {
-          margin-top: calc(var(--button-height) / 2 - 1rem);
-        }
-      }
-      &.dnb-button--size-large .dnb-button__icon {
-        margin-top: calc(var(--button-height--large) / 2 - 0.5rem);
-      }
-      &.dnb-button--size-medium .dnb-button__icon {
-        margin-top: calc(var(--button-height--medium) / 2 - 0.5rem);
-      }
-      &.dnb-button--size-small .dnb-button__icon {
-        margin-top: calc(var(--button-height--small) / 2 - 0.5rem);
       }
     }
 
@@ -99,10 +93,8 @@
       vertical-align: middle;
 
       &.dnb-button--has-text {
-        padding: 0;
-
+        --button-icon-margin-top: 0.5rem;
         .dnb-button__icon {
-          margin-top: 0.5rem;
           align-self: center;
         }
       }
@@ -126,61 +118,24 @@
 
     &.dnb-button--has-icon {
       &.dnb-button--has-text {
+        &.dnb-button--icon-size-medium,
+        &.dnb-button--icon-size-large {
+          --button-tertiary-underline-overflow--icon: var(
+            --button-tertiary-underline-overflow
+          );
+        }
+
         &.dnb-button--icon-position-left {
           --button-tertiary-focus-right: -1rem;
-          .dnb-button__text {
-            padding-left: 1rem;
-
-            // underline
-            &::after {
-              left: var(--button-tertiary-underline-overflow--icon);
-            }
-          }
-          .dnb-button__icon {
-            margin-right: -0.5rem;
-            margin-left: 0;
-          }
-          &.dnb-button--icon-size-medium,
-          &.dnb-button--icon-size-large {
-            .dnb-button__text {
-              padding-left: 0;
-              margin-left: 1rem;
-
-              // underline
-              &::after {
-                left: 0;
-              }
-            }
-          }
+          --button-tertiary-underline-left: var(
+            --button-tertiary-underline-overflow--icon
+          );
         }
         &.dnb-button--icon-position-right {
           --button-tertiary-focus-left: -1rem;
-          /* stylelint-disable */
-          .dnb-button__text {
-            padding-right: 1rem;
-
-            // underline
-            &::after {
-              right: var(--button-tertiary-underline-overflow--icon);
-            }
-          }
-          .dnb-button__icon {
-            margin-left: -0.5rem;
-            margin-right: 0;
-          }
-          /* stylelint-enable */
-          &.dnb-button--icon-size-medium,
-          &.dnb-button--icon-size-large {
-            .dnb-button__text {
-              padding-right: 0;
-              margin-right: 1rem;
-
-              // underlinex
-              &::after {
-                right: 0;
-              }
-            }
-          }
+          --button-tertiary-underline-right: var(
+            --button-tertiary-underline-overflow--icon
+          );
         }
       }