Add NavList story IDs to .docs.json file

e2e/components/NavList.test.ts

@@ -2,150 +2,53 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('NavList', () => {
-  test.describe('With TrailingAction', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-navlist--with-trailing-action',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`NavList.With TrailingAction.${theme}.png`)
-        })
-      })
-    }
-  })
-
-  test.describe('With Title and Heading', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-navlist-dev--with-group-title-and-heading',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`NavList.With Title and Heading.${theme}.png`)
-        })
-      })
-    }
-  })
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-navlist--default',
+  },
+  {
+    title: 'With TrailingAction',
+    id: 'components-navlist-features--with-trailing-action',
+  },
+  {
+    title: 'With Title and Heading',
+    id: 'components-navlist-dev--with-group-title-and-heading',
+  },
+  {
+    title: 'With Group',
+    id: 'components-navlist-features--with-group',
+  },
+  {
+    title: 'With Sub Items',
+    id: 'components-navlist-features--with-sub-items',
+  },
+  {
+    title: 'With expand',
+    id: 'components-navlist-features--with-expand',
+  },
+  {
+    title: 'With group expand',
+    id: 'components-navlist-features--with-group-expand',
+  },
+]
 
-  test.describe('Simple', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-navlist--simple',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`NavList.Simple.${theme}.png`)
-        })
-      })
-    }
-  })
-
-  test.describe('With Group', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-navlist--with-group',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`NavList.With Group.${theme}.png`)
-        })
-      })
-    }
-  })
-
-  test.describe('With Sub Items', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-navlist--with-sub-items',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`NavList.With Sub Items.${theme}.png`)
-        })
-      })
-    }
-  })
-
-  test.describe('With expand', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-navlist--with-expand',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`NavList.With expand.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-navlist--with-expand',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('With group expand', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
+test.describe('NavList', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test(`default @vrt ${theme}`, async ({page}) => {
           await visit(page, {
-            id: 'components-navlist--with-group-expand',
+            id: story.id,
             globals: {
               colorScheme: theme,
             },
           })
 
           // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`NavList.With group expand.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-navlist--with-group-expand',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
+          await expect(page).toHaveScreenshot(`NavList.${story.title}.${theme}.png`)
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })

packages/react/src/NavList/NavList.docs.json

@@ -3,7 +3,25 @@
   "name": "NavList",
   "status": "alpha",
   "a11yReviewed": "2025-01-08",
-  "stories": [],
+  "stories": [
+    {"id": "components-navlist--default"},
+    {"id": "components-navlist-features--expand-with-custom-items"},
+    {"id": "components-navlist-features--expand-with-pages"},
+    {"id": "components-navlist-features--group-with-expand-and-custom-items"},
+    {"id": "components-navlist-features--with-expand"},
+    {"id": "components-navlist-features--with-expand-and-icons"},
+    {"id": "components-navlist-features--with-group"},
+    {"id": "components-navlist-features--with-group-expand"},
+    {"id": "components-navlist-features--with-group-heading-links"},
+    {"id": "components-navlist-features--with-inactive-items"},
+    {"id": "components-navlist-features--with-nested-sub-items"},
+    {"id": "components-navlist-features--with-next-js-link"},
+    {"id": "components-navlist-features--with-react-router-link"},
+    {"id": "components-navlist-features--with-reloads"},
+    {"id": "components-navlist-features--with-sub-items"},
+    {"id": "components-navlist-features--with-trailing-action"},
+    {"id": "components-navlist-features--with-trailing-action-in-sub-item"}
+  ],
   "importPath": "@primer/react",
   "props": [
     {