feat(Anchor): blank target icon styling (#3172)

* Extra styling of launch icon for anchors with blank target no longer
affects other icons
* Icons no longer adds extra underline in Ui theme
* Sbanken theme no longer adds extra styling to the launch icon

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

@@ -6,6 +6,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import E, { ElementProps, ElementIsType } from '../../elements/Element'
+import { useTheme } from '../../shared'
 import Context from '../../shared/Context'
 import {
   makeUniqueId,
@@ -76,6 +77,8 @@ export function AnchorInstance(localProps: AnchorAllProps) {
     ...rest
   } = allProps
 
+  const theme = useTheme()
+  const iconSpacer = theme?.isSbanken ? ' ' : ''
   const attributes = rest as ElementProps
   const internalId = id || 'id' + makeUniqueId()
   const as = (element || 'a') as string
@@ -89,15 +92,33 @@ export function AnchorInstance(localProps: AnchorAllProps) {
 
   // WCAG guide: https://www.w3.org/TR/WCAG20-TECHS/G201.html
   if (showLaunchIcon && !omitClass) {
-    suffix = <IconPrimary icon={launchIcon} />
+    suffix = (
+      <>
+        {iconSpacer}
+        <IconPrimary
+          className="dnb-anchor__launch-icon"
+          icon={launchIcon}
+        />
+      </>
+    )
   }
 
   if (icon) {
     const iconNode = pickIcon(icon) || <IconPrimary icon={icon} />
     if (iconPosition === 'left') {
-      prefix = <>{iconNode} </>
+      prefix = (
+        <>
+          {iconNode}
+          {iconSpacer}
+        </>
+      )
     } else if (iconPosition === 'right') {
-      suffix = <> {iconNode}</>
+      suffix = (
+        <>
+          {iconSpacer}
+          {iconNode}
+        </>
+      )
     }
   }
 
@@ -112,8 +133,7 @@ export function AnchorInstance(localProps: AnchorAllProps) {
               'dnb-anchor',
               prefix && 'dnb-anchor--icon-left',
               suffix && 'dnb-anchor--icon-right',
-              typeof children !== 'string' && 'dnb-anchor--was-node',
-              showLaunchIcon && 'dnb-anchor--launch-icon'
+              typeof children !== 'string' && 'dnb-anchor--was-node'
             ),
           className
         )}

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

@@ -81,25 +81,29 @@ describe('Anchor element', () => {
     ).toContain('dnb-tooltip--active')
   })
 
-  it('has "--launch-icon" class when target is blank', () => {
+  it('has "__launch-icon" class when target is blank', () => {
     render(
       <Anchor href="/url" target="_blank">
         <span>text</span>
       </Anchor>
     )
     expect(
-      document.querySelector('.dnb-anchor--launch-icon')
+      document.querySelector(
+        '.dnb-anchor .dnb-anchor__launch-icon.dnb-icon.dnb-icon--default'
+      )
     ).toBeInTheDocument()
   })
 
-  it('has no "--launch-icon" class when target is blank and href was mailto, tel or sms', () => {
+  it('has no "__launch-icon" class when target is blank and href was mailto, tel or sms', () => {
     const { rerender } = render(
       <Anchor href="/url" target="_blank">
         <span>text</span>
       </Anchor>
     )
     expect(
-      document.querySelector('.dnb-anchor--launch-icon')
+      document.querySelector(
+        '.dnb-anchor .dnb-anchor__launch-icon.dnb-icon.dnb-icon--default'
+      )
     ).toBeInTheDocument()
 
     rerender(

packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap

@@ -264,14 +264,6 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
 .dnb-p :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-lead :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--xx-large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--x-large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--medium :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--basis :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--small :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--x-small :where(:not(.dnb-anchor--no-style)).dnb-anchor {
   font-size: inherit;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon,
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default {
-  font-size: 1.11em;
-}
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon svg path,
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default svg path {
-  stroke-width: 1.2;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
   background-color: transparent;
   transition: none;
@@ -374,14 +366,6 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   .dnb-p :not(.dnb-anchor--no-style).dnb-anchor, .dnb-lead :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--xx-large :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--x-large :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--large :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--medium :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--basis :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--small :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--x-small :not(.dnb-anchor--no-style).dnb-anchor {
     font-size: inherit;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon,
-  :not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default {
-    font-size: 1.11em;
-  }
-  :not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon svg path,
-  :not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default svg path {
-    stroke-width: 1.2;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
     background-color: transparent;
     transition: none;
@@ -790,12 +774,18 @@ exports[`Anchor scss has to match theme css for ui 1`] = `
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
   --anchor-color: var(--color-sea-green);
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon {
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child {
   margin-right: 0.25em;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon {
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child {
   margin-left: 0.25em;
 }
+:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default {
+  font-size: 1.11em;
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path {
+  stroke-width: 1.2;
+}
 
 :not(.dnb-anchor--no-style) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -832,12 +822,18 @@ exports[`Anchor scss has to match theme css for ui 1`] = `
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
     --anchor-color: var(--color-sea-green);
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon {
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child {
     margin-right: 0.25em;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon {
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child {
     margin-left: 0.25em;
   }
+  :not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default {
+    font-size: 1.11em;
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path {
+    stroke-width: 1.2;
+  }
 }
 
 .dnb-anchor--hover {

packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss

@@ -34,17 +34,6 @@
   .dnb-h--x-small & {
     font-size: inherit;
   }
-
-  // Align this icon to look the same as in v10
-  &--launch-icon {
-    .dnb-icon,
-    .dnb-icon.dnb-icon--default {
-      font-size: 1.11em;
-      svg path {
-        stroke-width: 1.2;
-      }
-    }
-  }
 }
 
 // reset methods

packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss

@@ -44,12 +44,20 @@
     @include anchorFocus();
   }
 
-  &--icon-left .dnb-icon {
+  &--icon-left .dnb-icon:first-child {
     margin-right: 0.25em;
   }
-  &--icon-right .dnb-icon {
+  &--icon-right .dnb-icon:last-child {
     margin-left: 0.25em;
   }
+
+  // Align this icon to look the same as in v10
+  &__launch-icon.dnb-icon.dnb-icon--default {
+    font-size: 1.11em;
+    svg path {
+      stroke-width: 1.2;
+    }
+  }
 }
 
 $useClasses: true !default;