Skip to content

Commit

Permalink
Showing 47 changed files with 247 additions and 238 deletions.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -8,11 +8,8 @@ import {
setupPageScreenshot,
} from '../../../core/jest/jestSetupScreenshots'

describe.each([
['ui', '/uilib/components/anchor'],
['sbanken', '/uilib/components/anchor'],
])('Anchor for %s', (themeName, url) => {
setupPageScreenshot({ themeName, url })
describe.each(['ui', 'sbanken'])('Anchor for %s', (themeName) => {
setupPageScreenshot({ themeName, url: '/uilib/components/anchor' })

it('have to match the "default" state', async () => {
const screenshot = await makeScreenshot({
@@ -62,13 +59,19 @@ describe.each([
it('have to match anchor with paragraph', async () => {
const screenshot = await makeScreenshot({
selector: '[data-visual-test="anchor-paragraph"]',
matchConfig: {
failureThreshold: 0.0013,
},
})
expect(screenshot).toMatchImageSnapshot()
})

it('have to match anchor in heading', async () => {
const screenshot = await makeScreenshot({
selector: '[data-visual-test="anchor-heading"]',
matchConfig: {
failureThreshold: 0.0016,
},
})
expect(screenshot).toMatchImageSnapshot()
})
@@ -90,7 +93,7 @@ describe.each([
it('have to match the "focus" state', async () => {
const screenshot = await makeScreenshot({
selector: '[data-visual-test="anchor-focus"]',
simulate: 'focus', // should be tested first
simulate: 'focus',
})
expect(screenshot).toMatchImageSnapshot()
})
@@ -105,7 +108,7 @@ describe.each([
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
simulate: 'focus',
})
expect(screenshot).toMatchImageSnapshot()
})
@@ -126,64 +129,66 @@ describe.each([
})
})

describe.each([
['ui', '/uilib/components/anchor'],
['sbanken', '/uilib/components/anchor'],
])('Anchor target blank for %s', (themeName, url) => {
setupPageScreenshot({ themeName, url })

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()
})
})

describe.each([
['ui', '/uilib/components/anchor'],
['sbanken', '/uilib/components/anchor'],
])('Anchor legacy icon usage for %s', (themeName, url) => {
setupPageScreenshot({ themeName, url })

it('have to match anchor with legacy icon', async () => {
const screenshot = await makeScreenshot({
selector: '[data-visual-test="anchor-legacy-icon"]',
})
expect(screenshot).toMatchImageSnapshot()
})

it('have to match anchor with paragraph legacy icon', async () => {
const screenshot = await makeScreenshot({
selector: '[data-visual-test="anchor-legacy-paragraph"]',
})
expect(screenshot).toMatchImageSnapshot()
})

it('have to match anchor with target blank legacy icon', async () => {
const screenshot = await makeScreenshot({
selector: '[data-visual-test="anchor-legacy-blank-with-icon"]',
})
expect(screenshot).toMatchImageSnapshot()
})
})
describe.each(['ui', 'sbanken'])(
'Anchor target blank for %s',
(themeName) => {
setupPageScreenshot({ themeName, url: '/uilib/components/anchor' })

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()
})

if (themeName === 'ui') {
it('have to match the target blank with tooltip', async () => {
const screenshot = await makeScreenshot({
style: {
'padding-top': '2rem',
},
selector: '[data-visual-test="anchor-blank"]',
simulateSelector:
'[data-visual-test="anchor-blank"] a.dnb-anchor',
simulate: 'hover',
})
expect(screenshot).toMatchImageSnapshot()
})
}
}
)

describe.each(['ui', 'sbanken'])(
'Anchor legacy icon usage for %s',
(themeName) => {
setupPageScreenshot({ themeName, url: '/uilib/components/anchor' })

it('have to match anchor with legacy icon', async () => {
const screenshot = await makeScreenshot({
selector: '[data-visual-test="anchor-legacy-icon"]',
})
expect(screenshot).toMatchImageSnapshot()
})

it('have to match anchor with paragraph legacy icon', async () => {
const screenshot = await makeScreenshot({
selector: '[data-visual-test="anchor-legacy-paragraph"]',
})
expect(screenshot).toMatchImageSnapshot()
})

it('have to match anchor with target blank legacy icon', async () => {
const screenshot = await makeScreenshot({
selector: '[data-visual-test="anchor-legacy-blank-with-icon"]',
})
expect(screenshot).toMatchImageSnapshot()
})
}
)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Diff not rendered.
Original file line number Diff line number Diff line change
@@ -30,7 +30,7 @@ button.dnb-anchor {
}

.dnb-anchor--focus {
@include anchorFocusStyle('mouse');
@include anchorFocusStyle('always');
}

// no use case for that yet
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@
@mixin anchorHover() {
color: var(--sb-color-text);
background-color: var(--sb-color-green-dark);

transition: none;
border-radius: 0.5rem;
}
@@ -30,7 +30,7 @@
}
}

&.dnb-anchor--icon-right {
&.dnb-anchor--icon-right {
margin-right: 0;
.dnb-icon {
margin-right: 0;
@@ -41,7 +41,7 @@

.dnb-anchor {
--anchor-underline-thickness: 0.125rem;

// 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);
@@ -59,7 +59,7 @@
}

&:focus {
@include utilities.whatInput('keyboard'){
@include utilities.whatInput('keyboard') {
@include anchorFocus();
}
}
@@ -75,7 +75,7 @@
}
}

&.dnb-anchor--icon-right {
&.dnb-anchor--icon-right {
padding-right: 0;
margin-right: 1em + $anchor-icon-gutter;

@@ -90,14 +90,14 @@
&:not(.dnb-anchor--icon-left) {
padding-left: 0;
&::before {
content: "\00a0";
content: '\00a0';
}
}

&:not(.dnb-anchor--icon-right):not(.dnb-anchor[target='_blank']) {
padding-right: 0;
&::after {
content: "\00a0";
content: '\00a0';
}
}
}
6 changes: 5 additions & 1 deletion packages/dnb-eufemia/src/style/core/utilities.scss
Original file line number Diff line number Diff line change
@@ -65,8 +65,12 @@
$color: var(--focus-ring-color);
}

@include whatInput($whatinput) {
@if $whatinput == 'always' {
@include fakeBorder($color, var(--focus-ring-width), $inset);
} @else {
@include whatInput($whatinput) {
@include fakeBorder($color, var(--focus-ring-width), $inset);
}
}
}

0 comments on commit 541e889

Please sign in to comment.