Merge branch 'main' into token-css-modules-base-and-token

primer · Dec 4, 2024 · 8cd93d7 · 8cd93d7
2 parents fa175a2 + e2a85e0
commit 8cd93d7
Show file tree

Hide file tree

Showing 117 changed files with 599 additions and 344 deletions.
diff --git a/.changeset/empty-crews-impress.md b/.changeset/empty-crews-impress.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert SegmentedControl to use CSS modules behind feature flag
diff --git a/.changeset/large-rats-film.md b/.changeset/large-rats-film.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+docs: fix *.docs.json story ids
diff --git a/...s/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-colorblind-linux.png b/...s/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-colorblind-linux.png
diff --git a/...nents/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-dimmed-linux.png b/...nents/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-dimmed-linux.png
diff --git a/...aseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-high-contrast-linux.png b/...aseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-high-contrast-linux.png
diff --git a/...s/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-linux.png b/...s/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-linux.png
diff --git a/...s/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-tritanopia-linux.png b/...s/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-tritanopia-linux.png
diff --git a/.../BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-colorblind-linux.png b/.../BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-colorblind-linux.png
diff --git a/...seStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-high-contrast-linux.png b/...seStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-high-contrast-linux.png
diff --git a/.../components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-linux.png b/.../components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-linux.png
diff --git a/.../BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-tritanopia-linux.png b/.../BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-tritanopia-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-With-Leading-Visual-dark-colorblind-linux.png b/...rol.test.ts-snapshots/FormControl-With-Leading-Visual-dark-colorblind-linux.png
diff --git a/...Control.test.ts-snapshots/FormControl-With-Leading-Visual-dark-dimmed-linux.png b/...Control.test.ts-snapshots/FormControl-With-Leading-Visual-dark-dimmed-linux.png
diff --git a/....test.ts-snapshots/FormControl-With-Leading-Visual-dark-high-contrast-linux.png b/....test.ts-snapshots/FormControl-With-Leading-Visual-dark-high-contrast-linux.png
diff --git a/...ts/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-linux.png b/...ts/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-With-Leading-Visual-dark-tritanopia-linux.png b/...rol.test.ts-snapshots/FormControl-With-Leading-Visual-dark-tritanopia-linux.png
diff --git a/...ol.test.ts-snapshots/FormControl-With-Leading-Visual-light-colorblind-linux.png b/...ol.test.ts-snapshots/FormControl-With-Leading-Visual-light-colorblind-linux.png
diff --git a/...test.ts-snapshots/FormControl-With-Leading-Visual-light-high-contrast-linux.png b/...test.ts-snapshots/FormControl-With-Leading-Visual-light-high-contrast-linux.png
diff --git a/...s/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-linux.png b/...s/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-linux.png
diff --git a/...ol.test.ts-snapshots/FormControl-With-Leading-Visual-light-tritanopia-linux.png b/...ol.test.ts-snapshots/FormControl-With-Leading-Visual-light-tritanopia-linux.png
diff --git a/...rlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-colorblind-linux.png b/...rlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-colorblind-linux.png
diff --git a/...UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-dimmed-linux.png b/...UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-dimmed-linux.png
diff --git a/...nePanels.test.ts-snapshots/UnderlinePanels-Default-dark-high-contrast-linux.png b/...nePanels.test.ts-snapshots/UnderlinePanels-Default-dark-high-contrast-linux.png
diff --git a/...onents/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-linux.png b/...onents/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-linux.png
diff --git a/...rlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-tritanopia-linux.png b/...rlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-tritanopia-linux.png
diff --git a/...linePanels.test.ts-snapshots/UnderlinePanels-Default-light-colorblind-linux.png b/...linePanels.test.ts-snapshots/UnderlinePanels-Default-light-colorblind-linux.png
diff --git a/...ePanels.test.ts-snapshots/UnderlinePanels-Default-light-high-contrast-linux.png b/...ePanels.test.ts-snapshots/UnderlinePanels-Default-light-high-contrast-linux.png
diff --git a/...nents/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-linux.png b/...nents/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-linux.png
diff --git a/...linePanels.test.ts-snapshots/UnderlinePanels-Default-light-tritanopia-linux.png b/...linePanels.test.ts-snapshots/UnderlinePanels-Default-light-tritanopia-linux.png
diff --git a/...ePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-colorblind-linux.png b/...ePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-colorblind-linux.png
diff --git a/...rlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-dimmed-linux.png b/...rlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-dimmed-linux.png
diff --git a/...nels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-high-contrast-linux.png b/...nels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-high-contrast-linux.png
diff --git a/...ts/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-linux.png b/...ts/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-linux.png
diff --git a/...ePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-tritanopia-linux.png b/...ePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-tritanopia-linux.png
diff --git a/...Panels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-colorblind-linux.png b/...Panels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-colorblind-linux.png
diff --git a/...els.test.ts-snapshots/UnderlinePanels-Dev-Default-light-high-contrast-linux.png b/...els.test.ts-snapshots/UnderlinePanels-Dev-Default-light-high-contrast-linux.png
diff --git a/...s/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-linux.png b/...s/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-linux.png
diff --git a/...Panels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-tritanopia-linux.png b/...Panels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-tritanopia-linux.png
diff --git a/...napshots/UnderlinePanels-Labelled-By-External-Element-dark-colorblind-linux.png b/...napshots/UnderlinePanels-Labelled-By-External-Element-dark-colorblind-linux.png
diff --git a/...ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-dimmed-linux.png b/...ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-dimmed-linux.png
diff --git a/...shots/UnderlinePanels-Labelled-By-External-Element-dark-high-contrast-linux.png b/...shots/UnderlinePanels-Labelled-By-External-Element-dark-high-contrast-linux.png
diff --git a/...s.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-linux.png b/...s.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-linux.png
diff --git a/...napshots/UnderlinePanels-Labelled-By-External-Element-dark-tritanopia-linux.png b/...napshots/UnderlinePanels-Labelled-By-External-Element-dark-tritanopia-linux.png
diff --git a/...apshots/UnderlinePanels-Labelled-By-External-Element-light-colorblind-linux.png b/...apshots/UnderlinePanels-Labelled-By-External-Element-light-colorblind-linux.png
diff --git a/...hots/UnderlinePanels-Labelled-By-External-Element-light-high-contrast-linux.png b/...hots/UnderlinePanels-Labelled-By-External-Element-light-high-contrast-linux.png
diff --git a/....test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-linux.png b/....test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-linux.png
diff --git a/...apshots/UnderlinePanels-Labelled-By-External-Element-light-tritanopia-linux.png b/...apshots/UnderlinePanels-Labelled-By-External-Element-light-tritanopia-linux.png
diff --git a/...Panels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-colorblind-linux.png b/...Panels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-colorblind-linux.png
diff --git a/...linePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-dimmed-linux.png b/...linePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-dimmed-linux.png
diff --git a/...els.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-high-contrast-linux.png b/...els.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-high-contrast-linux.png
diff --git a/...s/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-linux.png b/...s/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-linux.png
diff --git a/...Panels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-tritanopia-linux.png b/...Panels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-tritanopia-linux.png
diff --git a/...anels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-colorblind-linux.png b/...anels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-colorblind-linux.png
diff --git a/...ls.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-high-contrast-linux.png b/...ls.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-high-contrast-linux.png
diff --git a/.../UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-linux.png b/.../UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-linux.png
diff --git a/...anels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-tritanopia-linux.png b/...anels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-tritanopia-linux.png
diff --git a/...pshots/UnderlinePanels-With-Counters-In-Loading-State-dark-colorblind-linux.png b/...pshots/UnderlinePanels-With-Counters-In-Loading-State-dark-colorblind-linux.png
diff --git a/...-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-dimmed-linux.png b/...-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-dimmed-linux.png
diff --git a/...ots/UnderlinePanels-With-Counters-In-Loading-State-dark-high-contrast-linux.png b/...ots/UnderlinePanels-With-Counters-In-Loading-State-dark-high-contrast-linux.png
diff --git a/...test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-linux.png b/...test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-linux.png
diff --git a/...pshots/UnderlinePanels-With-Counters-In-Loading-State-dark-tritanopia-linux.png b/...pshots/UnderlinePanels-With-Counters-In-Loading-State-dark-tritanopia-linux.png
diff --git a/...shots/UnderlinePanels-With-Counters-In-Loading-State-light-colorblind-linux.png b/...shots/UnderlinePanels-With-Counters-In-Loading-State-light-colorblind-linux.png
diff --git a/...ts/UnderlinePanels-With-Counters-In-Loading-State-light-high-contrast-linux.png b/...ts/UnderlinePanels-With-Counters-In-Loading-State-light-high-contrast-linux.png
diff --git a/...est.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-linux.png b/...est.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-linux.png
diff --git a/...shots/UnderlinePanels-With-Counters-In-Loading-State-light-tritanopia-linux.png b/...shots/UnderlinePanels-With-Counters-In-Loading-State-light-tritanopia-linux.png
diff --git a/...anels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-colorblind-linux.png b/...anels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-colorblind-linux.png
diff --git a/...inePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-dimmed-linux.png b/...inePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-dimmed-linux.png
diff --git a/...ls.test.ts-snapshots/UnderlinePanels-With-Counters-dark-high-contrast-linux.png b/...ls.test.ts-snapshots/UnderlinePanels-With-Counters-dark-high-contrast-linux.png
diff --git a/.../UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-linux.png b/.../UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-linux.png
diff --git a/...anels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-tritanopia-linux.png b/...anels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-tritanopia-linux.png
diff --git a/...nels.test.ts-snapshots/UnderlinePanels-With-Counters-light-colorblind-linux.png b/...nels.test.ts-snapshots/UnderlinePanels-With-Counters-light-colorblind-linux.png
diff --git a/...s.test.ts-snapshots/UnderlinePanels-With-Counters-light-high-contrast-linux.png b/...s.test.ts-snapshots/UnderlinePanels-With-Counters-light-high-contrast-linux.png
diff --git a/...UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-linux.png b/...UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-linux.png
diff --git a/...nels.test.ts-snapshots/UnderlinePanels-With-Counters-light-tritanopia-linux.png b/...nels.test.ts-snapshots/UnderlinePanels-With-Counters-light-tritanopia-linux.png
diff --git a/...ts/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-colorblind-linux.png b/...ts/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-colorblind-linux.png
diff --git a/...pshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-dimmed-linux.png b/...pshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-dimmed-linux.png
diff --git a/...UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-high-contrast-linux.png b/...UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-high-contrast-linux.png
diff --git a/....ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-linux.png b/....ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-linux.png
diff --git a/...ts/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-tritanopia-linux.png b/...ts/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-tritanopia-linux.png
diff --git a/...s/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-colorblind-linux.png b/...s/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-colorblind-linux.png
diff --git a/...nderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-high-contrast-linux.png b/...nderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-high-contrast-linux.png
diff --git a/...ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-linux.png b/...ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-linux.png
diff --git a/...s/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-tritanopia-linux.png b/...s/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-tritanopia-linux.png
diff --git a/...nePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-colorblind-linux.png b/...nePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-colorblind-linux.png
diff --git a/...erlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-dimmed-linux.png b/...erlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-dimmed-linux.png
diff --git a/...anels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-high-contrast-linux.png b/...anels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-high-contrast-linux.png
diff --git a/...nts/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-linux.png b/...nts/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-linux.png
diff --git a/...nePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-tritanopia-linux.png b/...nePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-tritanopia-linux.png
diff --git a/...ePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-colorblind-linux.png b/...ePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-colorblind-linux.png
diff --git a/...nels.test.ts-snapshots/UnderlinePanels-With-Icons-light-high-contrast-linux.png b/...nels.test.ts-snapshots/UnderlinePanels-With-Icons-light-high-contrast-linux.png
diff --git a/...ts/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-linux.png b/...ts/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-linux.png
diff --git a/...ePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-tritanopia-linux.png b/...ePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-tritanopia-linux.png
diff --git a/e2e/components/BaseStyles.test.ts b/e2e/components/BaseStyles.test.ts
@@ -0,0 +1,44 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    id: 'behaviors-basestyles-dev--default',
+    title: 'Dev Default',
+  },
+] as const
+
+test.describe('BaseStyles', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `BaseStyles.${story.title}.${theme}.png`,
+            )
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})
diff --git a/e2e/components/UnderlinePanels.test.ts b/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',
+                },
               },
-            },
+            })
           })
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })
diff --git a/packages/react/script/components-json/build.ts b/packages/react/script/components-json/build.ts
@@ -22,6 +22,7 @@ type Component = {
     | '@primer/react/experimental'
     | '@primer/react/drafts'
   stories: Array<{id: string; code?: string}>
+  source?: string
 }
 
 const ajv = new Ajv()
@@ -114,7 +115,10 @@ const components = docsFiles.map(docsFilepath => {
   }
 
   // TODO: Provide default type and description for sx and ref props
-  return docs
+  return {
+    source: `https://github.com/primer/react/tree/main/packages/react/${docsFilepath.substring(0, docsFilepath.lastIndexOf('/'))}`,
+    ...docs,
+  }
 })
 
 const data = {schemaVersion: 2, components: keyBy(components, 'id')}

diff --git a/packages/react/script/components-json/component.schema.json b/packages/react/script/components-json/component.schema.json
@@ -77,6 +77,10 @@
       "type": "string",
       "description": "The path to import the component from. i.e. '@primer/react/experimental'"
     },
+    "source": {
+      "type": "string",
+      "description": "Link to the component source on GitHub"
+    },
 
     "stories": {
       "type": "array",