refactor(AvatarPair): move files to folder, add e2e tests and stories (#2906)

* refactor(AvatarPair): move files to folder and add stories

* Update generated/components.json

* Adjust documentation

* test(vrt): update snapshots

* Fix index

* Remove componentStory

---------

Co-authored-by: josepmartins <josepmartins@users.noreply.github.com>

Author: Josep Martins

.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-colorblind-linux.png

@@ -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'

.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-dimmed-linux.png

@@ -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',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+})

.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-high-contrast-linux.png

@@ -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",

.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-linux.png

@@ -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',
     {

.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-dark-tritanopia-linux.png

@@ -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<typeof AvatarPair>
+
+export const ParentCircle = () => (
+  <AvatarPair>
+    <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar square src="https://avatars.githubusercontent.com/primer" />
+  </AvatarPair>
+)
+
+export const ParentSquare = () => (
+  <AvatarPair>
+    <Avatar square src="https://avatars.githubusercontent.com/primer" />
+    <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+  </AvatarPair>
+)

.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-colorblind-linux.png

@@ -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<typeof AvatarPair>
+
+export const Default = () => (
+  <AvatarPair>
+    <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar src="https://avatars.githubusercontent.com/primer" />
+  </AvatarPair>
+)

.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-high-contrast-linux.png

@@ -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;

.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-linux.png

@@ -0,0 +1 @@
+export {default, AvatarPairProps} from './AvatarPair'

.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Default-light-tritanopia-linux.png

@@ -9,6 +9,7 @@ const ROOT_DIRECTORY = path.resolve(__dirname, '..', '..')
 const allowlist = [
   'ActionList',
   'Avatar',
+  'AvatarPair',
   'Breadcrumbs',
   'BranchName',
   'Button',