diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-colorblind-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-colorblind-linux.png new file mode 100644 index 00000000000..c834f9372d1 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-dimmed-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-dimmed-linux.png new file mode 100644 index 00000000000..4528fafc172 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-high-contrast-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-high-contrast-linux.png new file mode 100644 index 00000000000..57e12037343 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-linux.png new file mode 100644 index 00000000000..c834f9372d1 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-tritanopia-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-tritanopia-linux.png new file mode 100644 index 00000000000..c834f9372d1 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-light-colorblind-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-light-colorblind-linux.png new file mode 100644 index 00000000000..be7b68e833e Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-light-high-contrast-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-light-high-contrast-linux.png new file mode 100644 index 00000000000..7c761956ae9 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-light-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-light-linux.png new file mode 100644 index 00000000000..be7b68e833e Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-light-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-light-tritanopia-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-light-tritanopia-linux.png new file mode 100644 index 00000000000..be7b68e833e Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Dev-Inline-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-focus-linux.png new file mode 100644 index 00000000000..dff3b9bbe41 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-hover-linux.png new file mode 100644 index 00000000000..26755224d60 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-linux.png index 4328f738930..26755224d60 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-focus-linux.png new file mode 100644 index 00000000000..95a85814720 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-hover-linux.png new file mode 100644 index 00000000000..86313b57196 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-linux.png index 8b144a30127..86313b57196 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-focus-linux.png new file mode 100644 index 00000000000..dff3b9bbe41 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-focus-linux.png new file mode 100644 index 00000000000..5b53fbc4643 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-hover-linux.png new file mode 100644 index 00000000000..f8b34fba75b Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-linux.png index 826e904b693..f8b34fba75b 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-hover-linux.png new file mode 100644 index 00000000000..26755224d60 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-linux.png index 4328f738930..26755224d60 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-focus-linux.png new file mode 100644 index 00000000000..dff3b9bbe41 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-hover-linux.png new file mode 100644 index 00000000000..26755224d60 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-linux.png index 4328f738930..26755224d60 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-focus-linux.png new file mode 100644 index 00000000000..7068d5fab0d Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-hover-linux.png new file mode 100644 index 00000000000..7be9e079122 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-linux.png index bc86c4f604b..7be9e079122 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-focus-linux.png new file mode 100644 index 00000000000..7068d5fab0d Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-focus-linux.png new file mode 100644 index 00000000000..4e781e43e62 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-hover-linux.png new file mode 100644 index 00000000000..fa5f8cbcf68 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-linux.png index f6e998b8d32..fa5f8cbcf68 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-hover-linux.png new file mode 100644 index 00000000000..7be9e079122 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-linux.png index 7bb2f6efae2..7be9e079122 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-focus-linux.png new file mode 100644 index 00000000000..7068d5fab0d Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-hover-linux.png new file mode 100644 index 00000000000..7be9e079122 Binary files /dev/null and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-linux.png index bc86c4f604b..7be9e079122 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Inline-light-tritanopia-linux.png differ diff --git a/e2e/components/Link.test.ts b/e2e/components/Link.test.ts index 099286a4368..692444882f2 100644 --- a/e2e/components/Link.test.ts +++ b/e2e/components/Link.test.ts @@ -2,132 +2,63 @@ import {test, expect} from '@playwright/test' import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' -test.describe('Link', () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-link--default', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Link.Default.${theme}.png`) - - // Hover state - await page.getByRole('link').hover() - expect(await page.screenshot()).toMatchSnapshot(`Link.Default.${theme}.hover.png`) +const stories = [ + { + title: 'Default', + id: 'components-link--default', + }, + { + title: 'Inline', + id: 'components-link-features--inline', + }, + { + title: 'Muted', + id: 'components-link-features--muted', + }, + { + title: 'Underline', + id: 'components-link-features--underline', + }, +] as const - // Focus state - await page.keyboard.press('Tab') - expect(await page.screenshot()).toMatchSnapshot(`Link.Default.${theme}.focus.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-link--default', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', +test.describe('Link', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, }, - }, - }) - }) - }) - } - }) - - test.describe('Muted', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-link-features--muted', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Link.Muted.${theme}.png`) - - // Hover state - await page.getByRole('link').hover() - expect(await page.screenshot()).toMatchSnapshot(`Link.Muted.${theme}.hover.png`) + }) - // Focus state - await page.keyboard.press('Tab') - expect(await page.screenshot()).toMatchSnapshot(`Link.Muted.${theme}.focus.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.png`) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-link-features--muted', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) + // Hover state + await page.getByRole('link').hover() + expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.hover.png`) - test.describe('Underline', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-link-features--underline', - globals: { - colorScheme: theme, - }, + // Focus state + await page.keyboard.press('Tab') + expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.focus.png`) }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Link.Underline.${theme}.png`) - - // Hover state - await page.getByRole('link').hover() - expect(await page.screenshot()).toMatchSnapshot(`Link.Underline.${theme}.hover.png`) - - // Focus state - await page.keyboard.press('Tab') - expect(await page.screenshot()).toMatchSnapshot(`Link.Underline.${theme}.focus.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-link-features--underline', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', + test('axe @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, }, - }, + }) + await expect(page).toHaveNoViolations() }) }) - }) - } - }) + } + }) + } test.describe('Dev: Inline', () => { for (const theme of themes) { @@ -141,7 +72,7 @@ test.describe('Link', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`Link.Inline.${theme}.png`) + expect(await page.screenshot()).toMatchSnapshot(`Link.Dev Inline.${theme}.png`) }) test('axe @aat', async ({page}) => { @@ -151,13 +82,7 @@ test.describe('Link', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } diff --git a/package-lock.json b/package-lock.json index 44f9e461428..1d353e01dd9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -292,7 +292,7 @@ "name": "example-app-router", "version": "0.0.0", "dependencies": { - "@primer/react": "36.27.0", + "@primer/react": "37.0.0-rc.0", "next": "^14.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -311,7 +311,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "36.27.0", + "@primer/react": "37.0.0-rc.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.11.0", @@ -329,7 +329,7 @@ "name": "example-consumer-test", "version": "0.0.0", "dependencies": { - "@primer/react": "*", + "@primer/react": "37.0.0-rc.0", "@types/react": "^18.2.14", "@types/react-dom": "^18.2.19", "@types/styled-components": "^5.1.11", @@ -355,7 +355,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "19.x", - "@primer/react": "36.27.0", + "@primer/react": "37.0.0-rc.0", "next": "^14.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -60996,7 +60996,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "36.27.0", + "version": "37.0.0-rc.0", "license": "MIT", "dependencies": { "@github/combobox-nav": "^2.1.5",