chore(UnderlinePanels): add dev stories and update e2e tests

e2e/components/UnderlinePanels.test.ts

@@ -2,244 +2,74 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('UnderlinePanels', () => {
-  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',
-              },
-            },
-          })
-        })
-      })
-    }
-  })
-
-  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,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.Selected Tab.${theme}.png`)
-        })
+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('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',
-              },
-            },
-          })
-        })
-      })
-    }
-  })
-
-  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('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('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,
-            },
+            expect(await page.screenshot()).toMatchSnapshot(`UnderlinePanels.${story.title}.${theme}.png`)
           })
 
-          // 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('@aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
               },
-            },
-          })
-        })
-      })
-    }
-  })
-
-  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',
+            })
+            await expect(page).toHaveNoViolations({
+              rules: {
+                'color-contrast': {
+                  enabled: theme !== 'dark_dimmed',
+                },
               },
-            },
+            })
           })
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })

packages/react/src/experimental/UnderlinePanels/UnderlinePanels.dev.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import UnderlinePanels from './UnderlinePanels'
+import type {ComponentProps} from '../../utils/types'
+
+export default {
+  title: 'Experimental/Components/UnderlinePanels/Dev',
+  component: UnderlinePanels,
+} as Meta<ComponentProps<typeof UnderlinePanels>>
+
+export const Default = () => (
+  <UnderlinePanels aria-label="Select a tab">
+    <UnderlinePanels.Tab>Tab 1</UnderlinePanels.Tab>
+    <UnderlinePanels.Tab>Tab 2</UnderlinePanels.Tab>
+    <UnderlinePanels.Tab>Tab 3</UnderlinePanels.Tab>
+    <UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>
+    <UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>
+    <UnderlinePanels.Panel>Panel 3</UnderlinePanels.Panel>
+  </UnderlinePanels>
+)