Refactor(LabelGroup): add files to folder, add storybook and e2e test…

…s. (#3131)

* Move files to 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/LabelGroup.mdx

@@ -6,7 +6,7 @@ status: Alpha
 componentId: label_group
 ---
 
-import data from '../../src/LabelGroup.docs.json'
+import data from '../../src/LabelGroup/LabelGroup.docs.json'
 
 ## Example
 

e2e/components/LabelGroup.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('LabelGroup', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-labelgroup--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`LabelGroup.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-labelgroup--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-labelgroup--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`LabelGroup.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-labelgroup--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

generated/components.json

@@ -79,20 +79,6 @@
         }
       ]
     },
-    "label_group": {
-      "id": "label_group",
-      "name": "LabelGroup",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": []
-    },
     "overlay": {
       "id": "overlay",
       "name": "Overlay",
@@ -2357,6 +2343,25 @@
       ],
       "subcomponents": []
     },
+    "label_group": {
+      "id": "label_group",
+      "name": "LabelGroup",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-labelgroup--default",
+          "code": "() => (\n  <LabelGroup>\n    <Label>Default label</Label>\n    <Label variant=\"danger\">\n      Label with background indicating a closed PR state\n    </Label>\n    <Label variant=\"primary\">Default outline label</Label>\n  </LabelGroup>\n)"
+        }
+      ],
+      "props": [
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": []
+    },
     "link": {
       "id": "link",
       "name": "Link",

script/generate-e2e-tests.js

@@ -615,6 +615,21 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'LabelGroup',
+    {
+      stories: [
+        {
+          id: 'components-labelgroup--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-labelgroup--playground',
+          name: 'Playground',
+        },
+      ],
+    },
+  ],
   [
     'Link',
     {

src/LabelGroup/LabelGroup.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import {Meta, ComponentStory} from '@storybook/react'
+import LabelGroup from './LabelGroup'
+import Label from '../Label'
+
+export default {
+  title: 'Components/LabelGroup',
+  component: LabelGroup,
+} as Meta<typeof LabelGroup>
+
+export const Default = () => (
+  <LabelGroup>
+    <Label>Default label</Label>
+    <Label variant="danger">Label with background indicating a closed PR state</Label>
+    <Label variant="primary">Default outline label</Label>
+  </LabelGroup>
+)
+
+export const Playground: ComponentStory<typeof LabelGroup> = args => (
+  <LabelGroup {...args}>
+    <Label>Default label</Label>
+    <Label variant="danger">Label with background indicating a closed PR state</Label>
+    <Label variant="primary">Default outline label</Label>
+  </LabelGroup>
+)
+
+Playground.argTypes = {
+  sx: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+}

src/LabelGroup.tsx → src/LabelGroup/LabelGroup.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'
 
 const LabelGroup = styled.span<SxProp>`
   & * {

src/LabelGroup/index.ts

@@ -0,0 +1 @@
+export {default, LabelGroupProps} from './LabelGroup'