Adds new component TabPanels

.changeset/eight-olives-play.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Adds new alpha component: TabPanels to match Primer View Components.
+
+TabPanels should be used when semantic tabs are required and the tablist is not a navigation element.

docs/content/drafts/TabPanels.mdx

@@ -0,0 +1,33 @@
+---
+componentId: tab_panels
+title: TabPanels
+status: Draft
+source: https://github.com/primer/react/blob/main/src/TabPanels
+---
+
+import data from '../../../packages/react/src/drafts/TabPanels/TabPanels.docs.json'
+
+```js
+import {TabPanels} from '@primer/react/drafts'
+```
+
+**Attention:** Make sure to properly label your `TabPanels` with an `aria-label` to provide context about the subject of your `TabPanels`.
+
+`TabPanels.Tab` elements are wired up to their `TabPanels.Panel` elements based on the index order that they exist in the document.
+
+## Examples
+
+```jsx live drafts
+<TabPanels aria-label="Select a tab" id="tab-panels" selectedTabIndex={0}>
+  <TabPanels.Tab>Tab 1</TabPanels.Tab>
+  <TabPanels.Tab>Tab 2</TabPanels.Tab>
+  <TabPanels.Tab>Tab 3</TabPanels.Tab>
+  <TabPanels.Panel>Panel 1</TabPanels.Panel>
+  <TabPanels.Panel>Panel 2</TabPanels.Panel>
+  <TabPanels.Panel>Panel 3</TabPanels.Panel>
+</TabPanels>
+```
+
+## Props
+
+<ComponentProps data={data} />

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -172,6 +172,8 @@
       url: /drafts/PageHeader
     - title: SelectPanel v2
       url: /drafts/SelectPanel
+    - title: TabPanels
+      url: /drafts/TabPanels
 - title: Deprecated
   children:
     - title: ActionList (legacy)

e2e/components/TabPanels.test.ts

@@ -0,0 +1,33 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('TabPanels', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-tabpanels--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`TabPanels.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-tabpanels--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})