refactor(Avatar): move files to folder, add e2e tests and stories (#2904

)

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

* Update generated/components.json

* Adjust source and data in docs

* Add e2e tests

* test(vrt): update snapshots

* Opt the component into storybook tests

* Add e2e test

* test(vrt): update snapshots

---------

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

docs/content/Avatar.mdx

@@ -2,10 +2,10 @@
 title: Avatar
 status: Alpha
 componentId: avatar
-source: https://github.com/primer/react/blob/main/src/Avatar.tsx
+source: https://github.com/primer/react/blob/main/src/Avatar
 ---
 
-import data from '../../src/Avatar.docs.json'
+import data from '../../src/Avatar/Avatar.docs.json'
 
 import {Avatar, Box} from '@primer/react'
 

docs/content/Flash.mdx

@@ -2,7 +2,7 @@
 componentId: flash
 title: Flash
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/Flash.tsx
+source: https://github.com/primer/react/blob/main/src/Flash
 ---
 
 import data from '../../src/Flash/Flash.docs.json'

e2e/components/Avatar.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('Avatar', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatar--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Avatar.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatar--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('Size', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatar-features--size',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Avatar.Size.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatar-features--size',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('Square', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatar-features--square',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Avatar.Square.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-avatar-features--square',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+})

generated/components.json

@@ -87,38 +87,6 @@
         }
       ]
     },
-    "avatar": {
-      "id": "avatar",
-      "name": "Avatar",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "alt",
-          "type": "string",
-          "defaultValue": "''",
-          "description": "Provide alt text when the avatar is used without a name next to it."
-        },
-        {
-          "name": "size",
-          "type": "number",
-          "defaultValue": "20",
-          "description": "The size of the avatar in pixels."
-        },
-        {
-          "name": "square",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "If true, the avatar will be square instead of circular."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": []
-    },
     "avatar_pair": {
       "id": "avatar_pair",
       "name": "AvatarPair",
@@ -2220,6 +2188,38 @@
         }
       ]
     },
+    "avatar": {
+      "id": "avatar",
+      "name": "Avatar",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [],
+      "props": [
+        {
+          "name": "alt",
+          "type": "string",
+          "defaultValue": "''",
+          "description": "Provide alt text when the avatar is used without a name next to it."
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "defaultValue": "20",
+          "description": "The size of the avatar in pixels."
+        },
+        {
+          "name": "square",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "If true, the avatar will be square instead of circular."
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": []
+    },
     "branch_name": {
       "id": "branch_name",
       "name": "BranchName",

script/generate-e2e-tests.js

@@ -71,6 +71,25 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'Avatar',
+    {
+      stories: [
+        {
+          id: 'components-avatar--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-avatar-features--size',
+          name: 'Size',
+        },
+        {
+          id: 'components-avatar-features--square',
+          name: 'Square',
+        },
+      ],
+    },
+  ],
   [
     'BranchName',
     {

src/Avatar/Avatar.features.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {ComponentMeta} from '@storybook/react'
+import Avatar from './Avatar'
+
+export default {
+  title: 'Components/Avatar/Features',
+  component: Avatar,
+} as ComponentMeta<typeof Avatar>
+
+export const Square = () => <Avatar square src="https://avatars.githubusercontent.com/primer" />
+
+export const Size = () => (
+  <div>
+    <Avatar size={4} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={8} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={12} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={16} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={20} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={24} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={28} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={32} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={40} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={48} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={56} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={64} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+  </div>
+)

src/Avatar/Avatar.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import {ComponentMeta, ComponentStory} from '@storybook/react'
+import Avatar from './Avatar'
+
+export default {
+  title: 'Components/Avatar',
+  component: Avatar,
+} as ComponentMeta<typeof Avatar>
+
+export const Default = () => <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+
+export const Playground: ComponentStory<typeof Avatar> = args => (
+  <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" {...args} />
+)
+
+Playground.args = {
+  size: '20',
+}
+
+Playground.argTypes = {
+  alt: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+  ref: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+  forwardedAs: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+  sx: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+  as: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+  theme: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+}

src/Avatar.tsx → src/Avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
+import {get} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
 type StyledAvatarProps = {
   /** Sets the width and height of the avatar. */

src/Avatar/index.ts

@@ -0,0 +1 @@
+export {default, AvatarProps} from './Avatar'

src/__tests__/storybook.test.tsx

@@ -8,6 +8,7 @@ const ROOT_DIRECTORY = path.resolve(__dirname, '..', '..')
 // TODO: Remove this allowlist when all components use the new story format
 const allowlist = [
   'ActionList',
+  'Avatar',
   'Breadcrumbs',
   'BranchName',
   'Button',