diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/Examples.tsx index 103d50a2903..807d2c6c8ff 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/Examples.tsx @@ -225,6 +225,16 @@ export const AnchorTargetBlank = () => ( Blank target with different launch icon + + + Blank target with icon to the left + + ) diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.screenshot.test.ts b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.screenshot.test.ts index 7eb05619069..564280c9911 100644 --- a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.screenshot.test.ts +++ b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.screenshot.test.ts @@ -225,6 +225,13 @@ describe.each(['ui', 'sbanken'])( expect(screenshot).toMatchImageSnapshot() }) + it('have to match blank target with icon left', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="anchor-blank-icon-left"] a', + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match the target blank with href protocol', async () => { const screenshot = await makeScreenshot({ selector: '[data-visual-test="anchor-protocol"]', diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-anchor-in-heading.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-anchor-in-heading.snap.png index a39a4d53725..665a683d33c 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-anchor-in-heading.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-anchor-in-heading.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-dnb-anchor-no-underline.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-dnb-anchor-no-underline.snap.png index 0c5cfafe60e..8a600714e3a 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-dnb-anchor-no-underline.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-dnb-anchor-no-underline.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-legacy-icon.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-legacy-icon.snap.png index ffc2c86c855..d4e7e8ad57c 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-legacy-icon.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-legacy-icon.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-paragraph-legacy-icon.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-paragraph-legacy-icon.snap.png index 0898f3a9634..c9654b87534 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-paragraph-legacy-icon.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-paragraph-legacy-icon.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-target-blank-legacy-icon.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-target-blank-legacy-icon.snap.png index b89f61fe513..96547dc1263 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-target-blank-legacy-icon.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-target-blank-legacy-icon.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-sbanken-have-to-match-blank-target-with-icon-left.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-sbanken-have-to-match-blank-target-with-icon-left.snap.png new file mode 100644 index 00000000000..0c3c62cd6eb Binary files /dev/null and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-sbanken-have-to-match-blank-target-with-icon-left.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-blank-target-anchor-in-heading.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-blank-target-anchor-in-heading.snap.png index d8ed931d9d4..0628753e8c2 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-blank-target-anchor-in-heading.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-blank-target-anchor-in-heading.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-blank-target-with-icon-left.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-blank-target-with-icon-left.snap.png new file mode 100644 index 00000000000..a5daa7861b4 Binary files /dev/null and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-blank-target-with-icon-left.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-the-target-blank-with-href-protocol.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-the-target-blank-with-href-protocol.snap.png index 81c82ab1874..1098c0e4e26 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-the-target-blank-with-href-protocol.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-the-target-blank-with-href-protocol.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-the-target-blank-with-tooltip.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-the-target-blank-with-tooltip.snap.png index 1ad7c5d2a22..91d056acd1b 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-the-target-blank-with-tooltip.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-ui-have-to-match-the-target-blank-with-tooltip.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap b/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap index b23343556a4..5e069c1c03d 100644 --- a/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -564,14 +564,6 @@ exports[`Anchor scss has to match theme css for sbanken 1`] = ` :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon { margin-right: 0; } -:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left { - margin-left: 1.125em; -} -:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon { - font-size: 1em; - margin-right: 0.125em; - margin-left: -1.125em; -} :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right { margin-right: 1.125em; } @@ -580,6 +572,14 @@ exports[`Anchor scss has to match theme css for sbanken 1`] = ` margin-left: 0.125em; margin-right: -1.125em; } +:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left { + margin-left: 1.125em; +} +:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-of-type { + font-size: 1em; + margin-right: 0.125em; + margin-left: -1.125em; +} :where(:not(.dnb-anchor--no-style)).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left)::before { text-decoration-color: var(--sb-color-green-dark); content: " "; @@ -648,14 +648,6 @@ exports[`Anchor scss has to match theme css for sbanken 1`] = ` :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon { margin-right: 0; } - :not(.dnb-anchor--no-style).dnb-anchor--icon-left { - margin-left: 1.125em; - } - :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon { - font-size: 1em; - margin-right: 0.125em; - margin-left: -1.125em; - } :not(.dnb-anchor--no-style).dnb-anchor--icon-right { margin-right: 1.125em; } @@ -664,6 +656,14 @@ exports[`Anchor scss has to match theme css for sbanken 1`] = ` margin-left: 0.125em; margin-right: -1.125em; } + :not(.dnb-anchor--no-style).dnb-anchor--icon-left { + margin-left: 1.125em; + } + :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-of-type { + font-size: 1em; + margin-right: 0.125em; + margin-left: -1.125em; + } :not(.dnb-anchor--no-style).dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--was-node):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--icon-left)::before { text-decoration-color: var(--sb-color-green-dark); content: " "; diff --git a/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss b/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss index 3d4ab3cec89..8cf94b8bc18 100644 --- a/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss +++ b/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss @@ -84,23 +84,23 @@ @include anchorFocus(); } - &--icon-left { - margin-left: 1em + $anchor-icon-gutter; + &--icon-right { + margin-right: 1em + $anchor-icon-gutter; .dnb-icon { font-size: 1em; - margin-right: $anchor-icon-gutter; - margin-left: -1em - $anchor-icon-gutter; + margin-left: $anchor-icon-gutter; + margin-right: -1em - $anchor-icon-gutter; } } - &--icon-right { - margin-right: 1em + $anchor-icon-gutter; + &--icon-left { + margin-left: 1em + $anchor-icon-gutter; - .dnb-icon { + .dnb-icon:first-of-type { font-size: 1em; - margin-left: $anchor-icon-gutter; - margin-right: -1em - $anchor-icon-gutter; + margin-right: $anchor-icon-gutter; + margin-left: -1em - $anchor-icon-gutter; } }