Refactor(Popover): move files into folder, add storybook and e2e test…

…s. (#3135)

* Move files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

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

docs/content/Popover.md

@@ -6,7 +6,7 @@ status: Alpha
 source: https://github.com/primer/react/blob/main/src/Popover.tsx
 ---
 
-import data from '../../src/Popover.docs.json'
+import data from '../../src/Popover/Popover.docs.json'
 
 ```js
 import {Popover} from '@primer/react'

e2e/components/Popover.test.ts

@@ -0,0 +1,61 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('Popover', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-popover--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Popover.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-popover--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Playground', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-popover--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Popover.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-popover--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

generated/components.json

@@ -184,60 +184,6 @@
       ],
       "subcomponents": []
     },
-    "popover": {
-      "id": "popover",
-      "name": "Popover",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "as",
-          "type": "string",
-          "defaultValue": "div",
-          "description": "Sets the underlying HTML tag for the component"
-        },
-        {
-          "name": "caret",
-          "type": "| 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top' ",
-          "defaultValue": "'top'",
-          "description": "Controls the position of the caret"
-        },
-        {
-          "name": "open",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "Controls the visibility of the popover."
-        },
-        {
-          "name": "relative",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "Set to true to render the popover using relative positioning. "
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": [
-        {
-          "name": "Popover.Content",
-          "props": [
-            {
-              "name": "as",
-              "type": "string",
-              "defaultValue": "div",
-              "description": "Sets the underlying HTML tag for the component"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject"
-            }
-          ]
-        }
-      ]
-    },
     "styled_octicon": {
       "id": "styled_octicon",
       "name": "StyledOcticon",
@@ -3189,6 +3135,65 @@
       ],
       "subcomponents": []
     },
+    "popover": {
+      "id": "popover",
+      "name": "Popover",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-popover--default",
+          "code": "() => (\n  <Popover relative open={true} caret=\"top\">\n    <Popover.Content\n      sx={{\n        marginTop: 2,\n      }}\n    >\n      <Heading\n        sx={{\n          fontSize: 2,\n        }}\n      >\n        Popover heading\n      </Heading>\n      <Text as=\"p\">Message about popovers</Text>\n      <Button>Got it!</Button>\n    </Popover.Content>\n  </Popover>\n)"
+        }
+      ],
+      "props": [
+        {
+          "name": "as",
+          "type": "string",
+          "defaultValue": "div",
+          "description": "Sets the underlying HTML tag for the component"
+        },
+        {
+          "name": "caret",
+          "type": "| 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top' ",
+          "defaultValue": "'top'",
+          "description": "Controls the position of the caret"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Controls the visibility of the popover."
+        },
+        {
+          "name": "relative",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Set to true to render the popover using relative positioning. "
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": [
+        {
+          "name": "Popover.Content",
+          "props": [
+            {
+              "name": "as",
+              "type": "string",
+              "defaultValue": "div",
+              "description": "Sets the underlying HTML tag for the component"
+            },
+            {
+              "name": "sx",
+              "type": "SystemStyleObject"
+            }
+          ]
+        }
+      ]
+    },
     "portal": {
       "id": "portal",
       "name": "Portal",

script/generate-e2e-tests.js

@@ -794,6 +794,21 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'Popover',
+    {
+      stories: [
+        {
+          id: 'components-popover--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-popover--playground',
+          name: 'Playground',
+        },
+      ],
+    },
+  ],
   [
     'ProgressBar',
     {

src/Popover/Popover.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import {Meta, ComponentStory} from '@storybook/react'
+import Heading from '../Heading'
+import Popover from './Popover'
+import Text from '../Text'
+import {Button} from '../Button'
+
+export default {
+  title: 'Components/Popover',
+  component: Popover,
+} as Meta<typeof Popover>
+
+export const Default = () => (
+  <Popover relative open={true} caret="top">
+    <Popover.Content sx={{marginTop: 2}}>
+      <Heading sx={{fontSize: 2}}>Popover heading</Heading>
+      <Text as="p">Message about popovers</Text>
+      <Button>Got it!</Button>
+    </Popover.Content>
+  </Popover>
+)
+
+export const Playground: ComponentStory<typeof Popover> = args => (
+  <Popover {...args}>
+    <Popover.Content sx={{marginTop: 2}}>
+      <Heading sx={{fontSize: 2}}>Popover heading</Heading>
+      <Text as="p">Message about popovers</Text>
+      <Button>Got it!</Button>
+    </Popover.Content>
+  </Popover>
+)
+
+Playground.args = {
+  caret: 'top',
+  open: true,
+  relative: true,
+}
+
+Playground.argTypes = {
+  caret: {
+    control: {
+      type: 'radio',
+    },
+    options: [
+      'top',
+      'bottom',
+      'left',
+      'right',
+      'bottom-left',
+      'bottom-right',
+      'top-left',
+      'top-right',
+      'left-bottom',
+      'left-top',
+      'right-bottom',
+      'right-top',
+    ],
+  },
+  open: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  relative: {
+    control: {
+      type: 'boolean',
+    },
+  },
+}

src/Popover.tsx → src/Popover/Popover.tsx

@@ -1,8 +1,8 @@
 import classnames from 'classnames'
 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 CaretPosition =
   | 'top'

src/Popover/index.ts

@@ -0,0 +1 @@
+export {default, PopoverProps, PopoverContentProps} from './Popover'