feat(Button, Anchor): fix launch icon for _blank button links (#2930)

* The padding around the launch icon is the same as other icons

Button now adds the launch icon itself, instead of relying on anchor's
implementation. It already does that with other icons, so we shouldn't
rely on Anchor's visual implementation for `_blank` links.

packages/dnb-eufemia/src/components/anchor/Anchor.tsx

@@ -84,12 +84,11 @@ export function AnchorInstance(localProps: AnchorAllProps) {
   let suffix: React.ReactNode
 
   const href = allProps.href || allProps.to
-  const showLaunchicon =
-    allProps.target === '_blank' && !/^(mailto|tel|sms)/.test(href)
-  const showTooltip = (tooltip || showLaunchicon) && !allProps.title
+  const showLaunchIcon = opensNewTab(allProps.target, href)
+  const showTooltip = (tooltip || showLaunchIcon) && !allProps.title
 
   // WCAG guide: https://www.w3.org/TR/WCAG20-TECHS/G201.html
-  if (showLaunchicon) {
+  if (showLaunchIcon && !omitClass) {
     suffix = <IconPrimary icon={launchIcon} />
   }
 
@@ -108,12 +107,15 @@ export function AnchorInstance(localProps: AnchorAllProps) {
         as={as}
         id={id}
         className={classnames(
-          omitClass !== true && 'dnb-anchor',
-          className,
-          prefix && 'dnb-anchor--icon-left',
-          suffix && 'dnb-anchor--icon-right',
-          typeof children !== 'string' && 'dnb-anchor--was-node',
-          showLaunchicon && 'dnb-anchor--launch-icon'
+          omitClass !== true &&
+            classnames(
+              'dnb-anchor',
+              prefix && 'dnb-anchor--icon-left',
+              suffix && 'dnb-anchor--icon-right',
+              typeof children !== 'string' && 'dnb-anchor--was-node',
+              showLaunchIcon && 'dnb-anchor--launch-icon'
+            ),
+          className
         )}
         {...attributes}
         innerRef={innerRef}
@@ -202,3 +204,6 @@ export function pickIcon(icon) {
       })
     : null
 }
+
+export const opensNewTab = (target: string, href: string): boolean =>
+  target === '_blank' && !/^(mailto|tel|sms)/.test(href)

packages/dnb-eufemia/src/components/button/Button.js

@@ -28,7 +28,8 @@ import {
 import { pickFormElementProps } from '../../shared/helpers/filterValidProps'
 import IconPrimary from '../icon-primary/IconPrimary'
 import FormStatus from '../form-status/FormStatus'
-import Anchor, { pickIcon } from '../anchor/Anchor'
+import Anchor, { pickIcon, opensNewTab } from '../anchor/Anchor'
+import { launch } from '../../icons'
 import Tooltip from '../tooltip/Tooltip'
 
 export const buttonVariantPropType = {
@@ -181,6 +182,9 @@ export default class Button extends React.PureComponent {
       : 'button'
     if (Element === Anchor) {
       attributes.omitClass = true
+      if (opensNewTab(props.target, props.href) && !icon) {
+        icon = launch
+      }
     }
 
     const classes = classnames(
@@ -202,7 +206,8 @@ export default class Button extends React.PureComponent {
       createSpacingClasses(props),
       class_name,
       className,
-      props.href || props.to ? '' : null // dnb-anchor--no-underline dnb-anchor--no-hover
+      props.href || props.to ? '' : null, // dnb-anchor--no-underline dnb-anchor--no-hover
+      Element === Anchor && 'dnb-anchor--no-style'
     )
 
     const params = {