adds component docs

packages/react/src/UnderlineNav/UnderlineNav.docs.json

@@ -7,7 +7,7 @@
   "importPath": "@primer/react",
   "props": [
     {
-      "name": "afterSelect",
+      "name": "onSelect",
       "type": "(event) => void",
       "defaultValue": "",
       "description": "The handler that gets called when a nav link child is selected"
@@ -48,7 +48,7 @@
         },
         {
           "name": "counter",
-          "type": "number",
+          "type": "number | string",
           "defaultValue": "",
           "description": "The number to display in the counter label."
         },

packages/react/src/drafts/UnderlinePanels/UnderlinePanels.docs.json

@@ -0,0 +1,104 @@
+{
+  "id": "underline_panels",
+  "name": "UnderlinePanels",
+  "status": "draft",
+  "a11yReviewed": false,
+  "stories": [
+    {
+      "id": "drafts-components-underlinepanels--default"
+    },
+    {
+      "id": "'drafts-components-underlinepanels-features--labelled-by-external-element"
+    },
+    {
+      "id": "drafts-components-underlinepanels-features--selected-tab"
+    },
+    {
+      "id": "drafts-components-underlinepanels-features--with-counters"
+    },
+    {
+      "id": "drafts-components-underlinepanels-features--with-counters-in-loading-state"
+    },
+    {
+      "id": "drafts-components-underlinepanels-features--with-icons"
+    },
+    {
+      "id": "drafts-components-underlinepanels-features--with-icons-hidden-on-narrow-screen"
+    }
+  ],
+  "importPath": "@primer/react",
+  "props": [
+    {
+      "name": "aria-label",
+      "type": "string",
+      "defaultValue": "",
+      "description": "Accessible name for the tab list"
+    },
+    {
+      "name": "aria-labelledby",
+      "type": "string",
+      "defaultValue": "",
+      "description": "ID of the element containing the name for the tab list"
+    },
+    {
+      "name": "children",
+      "type": "Array<UnderlinePanels.Tab | UnderlinePanels.Panel>",
+      "defaultValue": "",
+      "required": true,
+      "description": "Tabs (UnderlinePanels.Tab) and panels (UnderlinePanels.Panel) to render"
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "defaultValue": "",
+      "description": "Custom string to use when generating the IDs of tabs and `aria-labelledby` for the panels"
+    },
+    {
+      "name": "loadingCounters",
+      "type": "boolean",
+      "defaultValue": "false",
+      "description": "Loading state for all counters. It displays loading animation for individual counters until all are resolved. It is needed to prevent multiple layout shift."
+    },
+    {
+      "name": "sx",
+      "type": "SystemStyleObject"
+    }
+  ],
+  "subcomponents": [
+    {
+      "name": "UnderlinePanels.Tab",
+      "props": [
+        {
+          "name": "aria-selected",
+          "type": "| boolean | 'true' | 'false'",
+          "defaultValue": "false",
+          "description": "Whether this is the selected tab. For more information about `aria-current`, see [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)."
+        },
+        {
+          "name": "counter",
+          "type": "number | string",
+          "defaultValue": "",
+          "description": "Content of CounterLabel rendered after tab text label"
+        },
+        {
+          "name": "icon",
+          "type": "Component",
+          "defaultValue": "",
+          "description": "Icon rendered before the tab text label"
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ]
+    },
+    {
+      "name": "UnderlinePanels.Tab",
+      "props": [],
+      "passthrough": {
+        "element": "div",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#Attributes"
+      }
+    }
+  ]
+}

packages/react/src/drafts/UnderlinePanels/UnderlinePanels.tsx

@@ -6,7 +6,7 @@
   useRef,
   type FC,
   type PropsWithChildren,
   useLayoutEffect,
 } from 'react'
 import {TabContainerElement} from '@github/tab-container-element'
 import createComponent from '../../utils/custom-element'
@@ -28,17 +28,37 @@
    * Whether this is the selected tab
    */
   'aria-selected'?: boolean
+  /**
+   * Content of CounterLabel rendered after tab text label
+   */
   counter?: number | string
+  /**
+   *  Icon rendered before the tab text label
+   */
   icon?: FC<IconProps>
 } & SxProp
 
 type UnderlineTabbedInterfaceProps = {
+  /**
+   * Tabs (UnderlinePanels.Tab) and panels (UnderlinePanels.Panel) to render
+   */
   children: React.ReactNode
+  /**
+   * Accessible name for the tab list
+   */
   'aria-label'?: React.AriaAttributes['aria-label']
+  /**
+   * ID of the element containing the name for the tab list
+   */
   'aria-labelledby'?: React.AriaAttributes['aria-labelledby']
-  as?: React.ElementType
-  loadingCounters?: boolean
+  /**
+   * Custom string to use when generating the IDs of tabs and `aria-labelledby` for the panels
+   */
   id?: string
+  /**
+   * Loading state for all counters. It displays loading animation for individual counters until all are resolved. It is needed to prevent multiple layout shift.
+   */
+  loadingCounters?: boolean
 } & SxProp
 
 const TabContainerComponent = createComponent(TabContainerElement, 'tab-container')
@@ -93,7 +113,7 @@
     }
 
     setListWidth(listRef.current?.getBoundingClientRect().width ?? 0)
   }, [])
 
   // when the wrapper resizes, check if the icons should be visible
   // by comparing the wrapper width to the list width
@@ -119,8 +139,8 @@
 
     // every tab has its panel
     invariant(
       tabs.current?.length === tabPanels.current?.length,
       `The number of tabs and panels must be equal. Counted ${tabs.current?.length} tabs and ${tabPanels.current?.length} panels.`,
     )
   }