feat(Anchor): hide anchor protocol icon (#2749)

Href with protocols `:mailto` `:tel` or :`sms` no longer shows the
`target="_blank"` icon.

packages/dnb-design-system-portal/src/docs/uilib/components/anchor/Examples.tsx

@@ -229,6 +229,32 @@ export const AnchorTargetBlank = () => (
   </Wrapper>
 )
 
+export const AnchorProtocol = () => (
+  <Wrapper>
+    <ComponentBox
+      hideCode
+      scope={{ Example }}
+      data-visual-test="anchor-protocol"
+    >
+      <Example>
+        <Anchor target="_blank" href="mailto:john.doe@email.com">
+          Send a mail to: john.doe@email.com
+        </Anchor>
+      </Example>
+      <Example>
+        <Anchor target="_blank" href="tel:12345678">
+          Make a phone call to: 12345678
+        </Anchor>
+      </Example>
+      <Example>
+        <Anchor target="_blank" href="sms:12345678">
+          Send an SMS to: 12345678
+        </Anchor>
+      </Example>
+    </ComponentBox>
+  </Wrapper>
+)
+
 export const AnchorExampleHeadings = () => (
   <Wrapper>
     <ComponentBox hideCode scope={{ Example }}>

packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx

@@ -8,6 +8,7 @@ import {
   AnchorExampleHelperClasses,
   AnchorExampleIcons,
   AnchorTargetBlank,
+  AnchorProtocol,
   AnchorExampleHeadings,
   AnchorSbankenRegular,
   AnchorSbankenGoto,
@@ -66,6 +67,10 @@ If the link opens a new window it will automatically get an icon to indicate thi
 
 <AnchorTargetBlank />
 
+Unless the href contains `:mailto`, `:tel` or `:sms`.
+
+<AnchorProtocol />
+
 ### Anchor in headings
 
 <AnchorExampleHeadings />

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

@@ -236,6 +236,13 @@ describe.each(['ui', 'sbanken', 'eiendom'])(
       expect(screenshot).toMatchImageSnapshot()
     })
 
+    it('have to match the target blank with href protocol', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-protocol"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
     if (themeName === 'ui') {
       it('have to match the target blank with tooltip', async () => {
         const screenshot = await makeScreenshot({

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

@@ -288,12 +288,20 @@ sup .dnb-anchor, sub .dnb-anchor {
 .dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor {
   text-decoration: none;
 }
-.dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon) {
+.dnb-anchor[target=_blank]:not(:empty,
+.dnb-anchor--no-icon,
+[href^="mailto:"],
+[href^="tel:"],
+[href^="sms:"]) {
   position: relative;
   background-size: 0;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMGEuNzUuNzUgMCAwMDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwMDE1IDB2Ljc1em0tLjc1IDRhLjc1Ljc1IDAgMDAxLjUgMGgtMS41em0xLjUgNGEuNzUuNzUgMCAwMC0xLjUgMGgxLjV6bS0uNzUgNi41VjE2Yy40MSAwIC43NS0uMzQuNzUtLjc1SDE1em0tMTQgMEguMjVjMCAuNDEuMzQuNzUuNzUuNzV2LS43NXpNMSAuNzVWMGEuNzUuNzUgMCAwMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwMDAtMS41djEuNXptMi43MiAzLjcyYS43NS43NSAwIDAwMS4wNiAxLjA2TDkuNDcgNS4yMnpNMTQuMjUuNzV2NGgxLjV2LTRoLTEuNXptMCA4djYuNWgxLjV2LTYuNWgtMS41ek0xNSAxNC41SDFWMTZoMTR2LTEuNXptLTEzLjI1Ljc1Vi43NUguMjV2MTQuNWgxLjV6TTEgMS41aDUuNzVWMEgxdjEuNXptMTAgMGg0VjBoLTR2MS41em0tLjQ3IDQuNzhsNS01TDE0LjQ3LjIybC01IDUgMS4wNiAxLjA2eiIgZmlsbD0iIzAwNzI3MiIgLz48L3N2Zz4=");
 }
-.dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon)::after {
+.dnb-anchor[target=_blank]:not(:empty,
+.dnb-anchor--no-icon,
+[href^="mailto:"],
+[href^="tel:"],
+[href^="sms:"])::after {
   content: "";
   position: relative;
   display: inline-block;
@@ -307,10 +315,18 @@ sup .dnb-anchor, sub .dnb-anchor {
   transition: transform 0.3s ease-out, filter 1s ease-in-out;
   transform-origin: bottom;
 }
-.dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon):active {
+.dnb-anchor[target=_blank]:not(:empty,
+.dnb-anchor--no-icon,
+[href^="mailto:"],
+[href^="tel:"],
+[href^="sms:"]):active {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aAogICAgZD0iTTExIDBhLjc1Ljc1IDAgMDAwIDEuNVYwem00IC43NWguNzVBLjc1Ljc1IDAgMDAxNSAwdi43NXptLS43NSA0YS43NS43NSAwIDAwMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMDAtMS41IDBoMS41em0tLjc1IDYuNVYxNmMuNDEgMCAuNzUtLjM0Ljc1LS43NUgxNXptLTE0IDBILjI1YzAgLjQxLjM0Ljc1Ljc1Ljc1di0uNzV6TTEgLjc1VjBhLjc1Ljc1IDAgMDAtLjc1Ljc1SDF6bTUuNzUuNzVhLjc1Ljc1IDAgMDAwLTEuNXYxLjV6bTIuNzIgMy43MmEuNzUuNzUgMCAwMDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4bDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiCiAgICBmaWxsPSIjYTVlMWQyIgogIC8+Cjwvc3ZnPg==");
 }
-.dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon)::after {
+.dnb-anchor[target=_blank]:not(:empty,
+.dnb-anchor--no-icon,
+[href^="mailto:"],
+[href^="tel:"],
+[href^="sms:"])::after {
   top: 0.125em;
 }
 [data-visual-test-wrapper] .dnb-anchor {
@@ -488,10 +504,18 @@ exports[`Anchor scss has to match theme css for sbanken 1`] = `
   margin-left: 0.125em;
   margin-right: -1.125em;
 }
-.dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon) {
+.dnb-anchor[target=_blank]:not(:empty,
+.dnb-anchor--no-icon,
+[href^="mailto:"],
+[href^="tel:"],
+[href^="sms:"]) {
   padding-right: 0.25em;
 }
-.dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon)::after {
+.dnb-anchor[target=_blank]:not(:empty,
+.dnb-anchor--no-icon,
+[href^="mailto:"],
+[href^="tel:"],
+[href^="sms:"])::after {
   position: initial;
   display: inline-block;
   width: 1.275em;

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

@@ -185,7 +185,13 @@
     @include anchorActiveStyle();
   }
 
-  &[target='_blank']:not(:empty, .dnb-anchor--no-icon) {
+  &[target='_blank']:not(
+      :empty,
+      .dnb-anchor--no-icon,
+      [href^='mailto:'],
+      [href^='tel:'],
+      [href^='sms:']
+    ) {
     @include anchorIconStyle();
 
     &::after {

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

@@ -98,7 +98,13 @@
     }
   }
 
-  &[target='_blank']:not(:empty, .dnb-anchor--no-icon) {
+  &[target='_blank']:not(
+      :empty,
+      .dnb-anchor--no-icon,
+      [href^='mailto:'],
+      [href^='tel:'],
+      [href^='sms:']
+    ) {
     padding-right: 0.25em;
     &::after {
       position: initial;