feat(Anchor): create styles for Sbanken (#2250)

* create theme file for sbanken anchor

* create visual test for sbanken acnhors

* fix anchor font-weight

packages/dnb-eufemia/src/elements/anchor/__tests__/themes/Anchor.sbanken.screenshot.test.ts

@@ -0,0 +1,151 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we don't require any related files
+ */
+
+import {
+  makeScreenshot,
+  setupPageScreenshot,
+} from '../../../../core/jest/jestSetupScreenshots'
+
+describe('Anchor with sbanken theme', () => {
+  setupPageScreenshot({
+    url: '/uilib/elements/anchor?eufemia-theme=sbanken',
+  })
+
+  it('have to match the "default" state', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-default"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match breaking lines', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-newline"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match anchor with skeleton', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-skeleton"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match anchor with icon', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-icon"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match anchor with paragraph', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-paragraph"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match anchor in heading', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-heading"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the "hover" state', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-hover"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the "active" state', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-active"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the "focus" state', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-focus"]',
+      simulate: 'focus', // should be tested first
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the anchor-contrast "default" state', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-contrast"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the anchor-contrast "focus" state', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-contrast"]',
+      simulate: 'focus', // should be tested first
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the anchor-contrast "hover" state', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-contrast"]',
+      simulate: 'hover',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the dnb-anchor--no-underline', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-in-section"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  // "active" simulation is suddenly too unstable – no reason found
+  // it('have to match the anchor-contrast "active" state', async () => {
+  //   const screenshot = await makeScreenshot({
+  //     selector: '[data-visual-test="anchor-contrast"]',
+  //     simulate: 'active',
+  //   })
+  //   expect(screenshot).toMatchImageSnapshot()
+  // })
+})
+
+describe('Anchor target blank with sbanken theme', () => {
+  setupPageScreenshot({
+    url: '/uilib/elements/anchor?eufemia-theme=sbanken',
+  })
+
+  it('have to match blank target anchor in heading', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-heading-blank"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the target blank state', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="anchor-blank"] a',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the target blank with tooltip', async () => {
+    const screenshot = await makeScreenshot({
+      style: {
+        'padding-top': '2rem',
+      },
+      waitBeforeSimulate: 200,
+      selector: '[data-visual-test="anchor-blank"]',
+      simulateSelector: '[data-visual-test="anchor-blank"] a.dnb-anchor',
+      simulate: 'hover',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})

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

@@ -0,0 +1,59 @@
+@use '../anchor-mixins.scss';
+
+.dnb-anchor {
+  // Has to use --sb-font-weight-bold to get correct weighting as --sb-font-weight-medium does nothing at the moment
+  font-weight: var(--sb-font-weight-bold);
+  color: var(--sb-color-gray-dark-3);
+  text-decoration-color: var(--sb-color-green-dark);
+
+  &:hover {
+    color: var(--sb-color-text);
+    background-color: var(--sb-color-green-dark);
+
+    border-radius: 0.5rem;
+  }
+
+  &:active {
+    color: var(--sb-color-text);
+    background-color: var(--sb-color-green);
+
+    border-radius: 0.5rem;
+  }
+
+  &:focus {
+    &:not(:active) {
+      color: var(--sb-color-blue-dark);
+      background-color: var(--sb-color-blue-light-3);
+
+      border-radius: 0.25rem;
+    }
+  }
+}
+
+.dnb-anchor--hover {
+  color: var(--sb-color-text);
+  background-color: var(--sb-color-green-dark);
+
+  border-radius: 0.5rem;
+}
+
+.dnb-anchor--active {
+  color: var(--sb-color-text);
+  background-color: var(--sb-color-green);
+
+  border-radius: 0.5rem;
+}
+
+.dnb-anchor--focus {
+  &:not(:active) {
+    color: var(--sb-color-blue-dark);
+    background-color: var(--sb-color-blue-light-3);
+
+    border-radius: 0.25rem;
+  }
+}
+
+// TODO: add correct contrast styling when designs are in place
+.dnb-anchor--contrast {
+  @include anchor-mixins.useAnchorContrastStyle();
+}

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

@@ -3,21 +3,33 @@
  *
  */
 
-@mixin anchorDefaultStyleCustomisation() {
-  // WIP – should be moved inside an Anchor theme
-  color: var(--color-emerald-green);
-}
+// change some properties
+@mixin propertiesCustomisation() {
+  // WIP: for now we replace all usage of "--font-family-default"
+  --font-family-default: var(--sb-font-family-default);
 
-@mixin anchorHoverStyleCustomisation() {
-  // WIP – should be moved inside an Anchor theme
-  color: var(--color-sea-green);
-  background-color: transparent;
-}
+  // Sbanken has no medium weight, so we overwrite it with bold
+  --font-weight-medium: var(--sb-font-weight-bold);
+
+  // WIP: for now we replace all sizes
+  --font-size-x-small: var(--sb-font-size-x-small);
+  --font-size-small: var(--sb-font-size-small);
+  --font-size-basis: var(--sb-font-size-basis);
+  --font-size-basis--em: var(--sb-font-size-basis--em);
+  --font-size-lead: var(--sb-font-size-lead);
+  --font-size-large: var(--sb-font-size-large);
+  --font-size-x-large: var(--sb-font-size-x-large);
+  --font-size-xx-large: var(--sb-font-size-xx-large);
 
-@mixin anchorActiveStyleCustomisation() {
-  // WIP – should be moved inside an Anchor theme
-  color: var(--color-sea-green);
-  background-color: var(--color-pistachio);
+  // WIP: for now we replace all heights
+  --line-height-x-small: var(--sb-line-height-x-small);
+  --line-height-small: var(--sb-line-height-small);
+  --line-height-basis: var(--sb-line-height-basis);
+  --line-height-basis--em: var(--sb-line-height-basis--em);
+  --line-height-lead: var(--sb-line-height-lead);
+  --line-height-medium: var(--sb-line-height-medium);
+  --line-height-large: var(--sb-line-height-large);
+  --line-height-x-large: var(--sb-line-height-x-large);
 }
 
 // change heading to use MaisonNeueHeadings

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

@@ -14,7 +14,7 @@ $THEME_FALLBACK: 'ui';
  * You may want to update it by running "yarn build" locally.
  */
 
-@import '../../../elements/anchor/style/themes/dnb-anchor-theme-ui.scss';
+@import '../../../elements/anchor/style/themes/dnb-anchor-theme-sbanken.scss';
 @import '../../../elements/blockquote/style/themes/dnb-blockquote-theme-ui.scss';
 @import '../../../elements/code/style/themes/dnb-code-theme-ui.scss';
 @import '../../../elements/hr/style/themes/dnb-hr-theme-ui.scss';