Revert "chore(UnderlinePanels): add dev stories and update e2e tests (#…

…5348)"

This reverts commit e2a85e0.

e2e/components/UnderlinePanels.test.ts

@@ -2,74 +2,244 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-const stories: Array<{title: string; id: string}> = [
-  {
-    title: 'Default',
-    id: 'experimental-components-underlinepanels--default',
-  },
-  {
-    title: 'Dev Default',
-    id: 'experimental-components-underlinepanels-dev--default',
-  },
-  {
-    title: 'Labelled By External Element',
-    id: 'experimental-components-underlinepanels-features--labelled-by-external-element',
-  },
-  {
-    title: 'Selected Tab',
-    id: 'experimental-components-underlinepanels-features--selected-tab',
-  },
-  {
-    title: 'With Counters',
-    id: 'experimental-components-underlinepanels-features--with-counters',
-  },
-  {
-    title: 'With Counters In Loading State',
-    id: 'experimental-components-underlinepanels-features--with-counters-in-loading-state',
-  },
-  {
-    title: 'With Icons',
-    id: 'experimental-components-underlinepanels-features--with-icons',
-  },
-  {
-    title: 'With Icons Hidden On Narrow Screen',
-    id: 'experimental-components-underlinepanels-features--with-icons-hidden-on-narrow-screen',
-  },
-]
-
 test.describe('UnderlinePanels', () => {
-  for (const story of stories) {
-    test.describe(story.title, () => {
-      for (const theme of themes) {
-        test.describe(theme, () => {
-          test('@vrt', async ({page}) => {
-            await visit(page, {
-              id: story.id,
-              globals: {
-                colorScheme: theme,
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('Labelled By External Element', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels-features--labelled-by-external-element',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.Labelled By External Element.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels-features--labelled-by-external-element',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
               },
-            })
+            },
+          })
+        })
+      })
+    }
+  })
 
-            expect(await page.screenshot()).toMatchSnapshot(`UnderlinePanels.${story.title}.${theme}.png`)
+  test.describe('Selected Tab', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels-features--selected-tab',
+            globals: {
+              colorScheme: theme,
+            },
           })
 
-          test('@aat', async ({page}) => {
-            await visit(page, {
-              id: story.id,
-              globals: {
-                colorScheme: theme,
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.Selected Tab.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels-features--selected-tab',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
               },
-            })
-            await expect(page).toHaveNoViolations({
-              rules: {
-                'color-contrast': {
-                  enabled: theme !== 'dark_dimmed',
-                },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('With Counters', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels-features--with-counters',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.With Counters.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels-features--with-counters',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('With Counters In Loading State', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels-features--with-counters-in-loading-state',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.With Counters In Loading State.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels-features--with-counters-in-loading-state',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('With Icons', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels-features--with-icons',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.With Icons.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels-features--with-icons',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('With Icons Hidden On Narrow Screen', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels-features--with-icons-hidden-on-narrow-screen',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(
+            `UnderlineNav.With Icons Hidden On Narrow Screen.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-underlinepanels-features--with-icons-hidden-on-narrow-screen',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
               },
-            })
+            },
           })
         })
-      }
-    })
-  }
+      })
+    }
+  })
 })