refactor(AvatarStack): move files to folder, add e2e tests and stories (

#2907)

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

* Add generated e2e tests

* Adjust data and source in docs

* Update generated/components.json

* test(vrt): update snapshots

* Update generated/components.json

---------

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

docs/content/AvatarStack.mdx

@@ -3,10 +3,10 @@ componentId: avatar_stack
 title: AvatarStack
 status: Alpha
 description: Use an avatar stack to display two or more avatars in an inline stack.
-source: https://github.com/primer/react/blob/main/src/AvatarStack.tsx
+source: https://github.com/primer/react/blob/main/src/AvatarStack
 ---
 
-import data from '../../src/AvatarStack.docs.json'
+import data from '../../src/AvatarStack/AvatarStack.docs.json'
 
 import {AvatarStack} from '@primer/react'
 

e2e/components/AvatarStack.test.ts

@@ -0,0 +1,141 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('AvatarStack', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatarstack--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatarstack--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('Playground', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatarstack--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatarstack--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('Align Left', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatarstack-features--align-left',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Align Left.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatarstack-features--align-left',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('Align Right', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatarstack-features--align-right',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Align Right.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatarstack-features--align-right',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+})

generated/components.json

@@ -87,26 +87,6 @@
         }
       ]
     },
-    "avatar_stack": {
-      "id": "avatar_stack",
-      "name": "AvatarStack",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "alignRight",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "Align the avatars to the right"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": []
-    },
     "box": {
       "id": "box",
       "name": "Box",
@@ -2220,6 +2200,26 @@
       ],
       "subcomponents": []
     },
+    "avatar_stack": {
+      "id": "avatar_stack",
+      "name": "AvatarStack",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [],
+      "props": [
+        {
+          "name": "alignRight",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Align the avatars to the right"
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": []
+    },
     "branch_name": {
       "id": "branch_name",
       "name": "BranchName",

script/generate-e2e-tests.js

@@ -90,6 +90,29 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'AvatarStack',
+    {
+      stories: [
+        {
+          id: 'components-avatarstack--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-avatarstack--playground',
+          name: 'Playground',
+        },
+        {
+          id: 'components-avatarstack-features--align-left',
+          name: 'Align Left',
+        },
+        {
+          id: 'components-avatarstack-features--align-right',
+          name: 'Align Right',
+        },
+      ],
+    },
+  ],
   [
     'AvatarPair',
     {

src/AvatarStack/AvatarStack.features.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {ComponentMeta} from '@storybook/react'
+import AvatarStack from './AvatarStack'
+import Avatar from '../Avatar'
+
+export default {
+  title: 'Components/AvatarStack/Features',
+  component: AvatarStack,
+} as ComponentMeta<typeof AvatarStack>
+
+export const AlignLeft = () => (
+  <AvatarStack>
+    <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+    <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+    <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+    <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+  </AvatarStack>
+)
+
+export const AlignRight = () => (
+  <AvatarStack alignRight>
+    <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+    <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+    <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+    <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+  </AvatarStack>
+)

src/AvatarStack/AvatarStack.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {ComponentMeta, ComponentStory} from '@storybook/react'
+import AvatarStack from './AvatarStack'
+import Avatar from '../Avatar'
+
+export default {
+  title: 'Components/AvatarStack',
+  component: AvatarStack,
+} as ComponentMeta<typeof AvatarStack>
+
+export const Default = () => (
+  <AvatarStack>
+    <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+    <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+    <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+    <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+  </AvatarStack>
+)
+
+export const Playground: ComponentStory<typeof Avatar> = args => (
+  <AvatarStack {...args}>
+    <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+    <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+    <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+    <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+  </AvatarStack>
+)
+
+Playground.argTypes = {
+  sx: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+}

src/AvatarStack.tsx → src/AvatarStack/AvatarStack.tsx

@@ -1,9 +1,9 @@
 import classnames from 'classnames'
 import React from 'react'
 import styled from 'styled-components'
-import {get} from './constants'
-import Box from './Box'
-import sx, {SxProp} from './sx'
+import {get} from '../constants'
+import Box from '../Box'
+import sx, {SxProp} from '../sx'
 
 type StyledAvatarStackWrapperProps = {
   count?: number

src/AvatarStack/index.ts

@@ -0,0 +1 @@
+export {default, AvatarStackProps} from './AvatarStack'

src/__tests__/storybook.test.tsx

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