diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..9b73bd813a6 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..8965f196e13 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..86abd706ce1 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-linux.png new file mode 100644 index 00000000000..9b73bd813a6 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..9b73bd813a6 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..30a233cd4f1 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..b23bad431fd Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-linux.png new file mode 100644 index 00000000000..30a233cd4f1 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..30a233cd4f1 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-colorblind-linux.png new file mode 100644 index 00000000000..884aa8bbad7 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-dimmed-linux.png new file mode 100644 index 00000000000..c56baf847a2 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-high-contrast-linux.png new file mode 100644 index 00000000000..1e4c94be789 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-linux.png new file mode 100644 index 00000000000..884aa8bbad7 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-tritanopia-linux.png new file mode 100644 index 00000000000..884aa8bbad7 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-light-colorblind-linux.png new file mode 100644 index 00000000000..8d41de3fe33 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-light-high-contrast-linux.png new file mode 100644 index 00000000000..e096d5eea4c Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-light-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-light-linux.png new file mode 100644 index 00000000000..8d41de3fe33 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-light-tritanopia-linux.png new file mode 100644 index 00000000000..8d41de3fe33 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Circle-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-colorblind-linux.png new file mode 100644 index 00000000000..619b8811477 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-dimmed-linux.png new file mode 100644 index 00000000000..3d8dbfce602 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-high-contrast-linux.png new file mode 100644 index 00000000000..df2504f7743 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-linux.png new file mode 100644 index 00000000000..619b8811477 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-tritanopia-linux.png new file mode 100644 index 00000000000..619b8811477 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-colorblind-linux.png new file mode 100644 index 00000000000..95eefe14f3f Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-high-contrast-linux.png new file mode 100644 index 00000000000..40b47ce0d57 Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-linux.png new file mode 100644 index 00000000000..95eefe14f3f Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-tritanopia-linux.png new file mode 100644 index 00000000000..95eefe14f3f Binary files /dev/null and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-tritanopia-linux.png differ diff --git a/docs/content/AvatarPair.mdx b/docs/content/AvatarPair.mdx index 3c42e2e9d91..0863e0b37c9 100644 --- a/docs/content/AvatarPair.mdx +++ b/docs/content/AvatarPair.mdx @@ -2,10 +2,10 @@ componentId: avatar_pair title: AvatarPair status: Alpha -source: https://github.com/primer/react/blob/main/src/AvatarPair.tsx +source: https://github.com/primer/react/blob/main/src/AvatarPair --- -import data from '../../src/AvatarPair.docs.json' +import data from '../../src/AvatarPair/AvatarPair.docs.json' ```js import {AvatarPair} from '@primer/react' diff --git a/e2e/components/AvatarPair.test.ts b/e2e/components/AvatarPair.test.ts new file mode 100644 index 00000000000..d55159279d6 --- /dev/null +++ b/e2e/components/AvatarPair.test.ts @@ -0,0 +1,107 @@ +import {test, expect} from '@playwright/test' +import {visit} from '../test-helpers/storybook' +import {themes} from '../test-helpers/themes' + +test.describe('AvatarPair', () => { + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarpair--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarPair.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarpair--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Parent Circle', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarpair-features--parent-circle', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarPair.Parent Circle.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarpair-features--parent-circle', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Parent Square', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarpair-features--parent-square', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarPair.Parent Square.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarpair-features--parent-square', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) +}) diff --git a/generated/components.json b/generated/components.json index 8602fa9fa87..8ce68a2c9f1 100644 --- a/generated/components.json +++ b/generated/components.json @@ -87,26 +87,6 @@ } ] }, - "avatar_pair": { - "id": "avatar_pair", - "name": "AvatarPair", - "status": "alpha", - "a11yReviewed": false, - "stories": [], - "props": [ - { - "name": "children", - "type": "Avatar[]", - "defaultValue": "", - "description": "" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ], - "subcomponents": [] - }, "avatar_stack": { "id": "avatar_stack", "name": "AvatarStack", @@ -2220,6 +2200,26 @@ ], "subcomponents": [] }, + "avatar_pair": { + "id": "avatar_pair", + "name": "AvatarPair", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "children", + "type": "Avatar[]", + "defaultValue": "", + "description": "" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, "branch_name": { "id": "branch_name", "name": "BranchName", diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index d7422ed000d..399ceecce5a 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -90,6 +90,25 @@ const components = new Map([ ], }, ], + [ + 'AvatarPair', + { + stories: [ + { + id: 'components-avatarpair--default', + name: 'Default', + }, + { + id: 'components-avatarpair-features--parent-circle', + name: 'Parent Circle', + }, + { + id: 'components-avatarpair-features--parent-square', + name: 'Parent Square', + }, + ], + }, + ], [ 'BranchName', { diff --git a/src/AvatarPair.docs.json b/src/AvatarPair/AvatarPair.docs.json similarity index 100% rename from src/AvatarPair.docs.json rename to src/AvatarPair/AvatarPair.docs.json diff --git a/src/AvatarPair/AvatarPair.features.stories.tsx b/src/AvatarPair/AvatarPair.features.stories.tsx new file mode 100644 index 00000000000..60368e7496c --- /dev/null +++ b/src/AvatarPair/AvatarPair.features.stories.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import {ComponentMeta} from '@storybook/react' +import AvatarPair from './AvatarPair' +import Avatar from '../Avatar' + +export default { + title: 'Components/AvatarPair/Features', + component: AvatarPair, +} as ComponentMeta + +export const ParentCircle = () => ( + + + + +) + +export const ParentSquare = () => ( + + + + +) diff --git a/src/AvatarPair/AvatarPair.stories.tsx b/src/AvatarPair/AvatarPair.stories.tsx new file mode 100644 index 00000000000..899320b4c3c --- /dev/null +++ b/src/AvatarPair/AvatarPair.stories.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import {ComponentMeta} from '@storybook/react' +import AvatarPair from './AvatarPair' +import Avatar from '../Avatar' + +export default { + title: 'Components/AvatarPair', + component: AvatarPair, +} as ComponentMeta + +export const Default = () => ( + + + + +) diff --git a/src/AvatarPair.tsx b/src/AvatarPair/AvatarPair.tsx similarity index 87% rename from src/AvatarPair.tsx rename to src/AvatarPair/AvatarPair.tsx index d9971d8cbd5..b9aa132148a 100644 --- a/src/AvatarPair.tsx +++ b/src/AvatarPair/AvatarPair.tsx @@ -1,8 +1,8 @@ import React from 'react' import styled from 'styled-components' -import Avatar, {AvatarProps} from './Avatar' -import {get} from './constants' -import Box, {BoxProps} from './Box' +import Avatar, {AvatarProps} from '../Avatar' +import {get} from '../constants' +import Box, {BoxProps} from '../Box' const ChildAvatar = styled(Avatar)` position: absolute; diff --git a/src/AvatarPair/index.ts b/src/AvatarPair/index.ts new file mode 100644 index 00000000000..c76e82e6f83 --- /dev/null +++ b/src/AvatarPair/index.ts @@ -0,0 +1 @@ +export {default, AvatarPairProps} from './AvatarPair' diff --git a/src/__tests__/storybook.test.tsx b/src/__tests__/storybook.test.tsx index 0e900c00f8c..840e86820c9 100644 --- a/src/__tests__/storybook.test.tsx +++ b/src/__tests__/storybook.test.tsx @@ -9,6 +9,7 @@ const ROOT_DIRECTORY = path.resolve(__dirname, '..', '..') const allowlist = [ 'ActionList', 'Avatar', + 'AvatarPair', 'Breadcrumbs', 'BranchName', 'Button',