Export NavList from the main bundle (#2112)

* Export ActionListDividerProps

* Export NavList from the main bundle

* Add NavList link to the nav

* Create stale-hounds-notice.md

* Add componentId

Author: colebemis

.changeset/stale-hounds-notice.md

@@ -0,0 +1,9 @@
+---
+"@primer/react": minor
+---
+
+[NavList](https://primer.style/NavList) is ready to use. You can now import it from the main bundle:
+
+```js
+import {NavList} from '@primer/react'
+```

docs/content/NavList.mdx

@@ -1,12 +1,14 @@
 ---
 title: NavList
-status: Draft
-description: Use nav list to render a vertical list of navigation links.
+status: Alpha
+componentId: nav_list
+description: Use a nav list to render a vertical list of navigation links.
 source: https://github.com/primer/react/tree/main/src/NavList
+storybook: '/react/storybook/?path=/story/composite-components-navlist--simple'
 ---
 
 ```js
-import {NavList} from '@primer/react/drafts'
+import {NavList} from '@primer/react'
 ```
 
 ## Examples
@@ -333,9 +335,9 @@ function App() {
     adaptsToThemes: true,
     adaptsToScreenSizes: true,
     fullTestCoverage: true,
-    usedInProduction: false,
+    usedInProduction: true,
     usageExamplesDocumented: true,
-    hasStorybookStories: false,
+    hasStorybookStories: true,
     designReviewed: false,
     a11yReviewed: false,
     stableApi: false,

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

@@ -90,6 +90,8 @@
       url: /LabelGroup
     - title: Link
       url: /Link
+    - title: NavList
+      url: /NavList
     - title: Overlay
       url: /Overlay
     - title: Pagehead

src/ActionList/Divider.tsx

@@ -4,11 +4,12 @@ import {get} from '../constants'
 import {Theme} from '../ThemeProvider'
 import {SxProp, merge} from '../sx'
 
+export type ActionListDividerProps = SxProp
+
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-
-export const Divider: React.FC<SxProp> = ({sx = {}}) => {
+export const Divider: React.FC<ActionListDividerProps> = ({sx = {}}) => {
   return (
     <Box
       as="li"

src/ActionList/index.ts

@@ -10,6 +10,7 @@ export type {ActionListProps} from './List'
 export type {ActionListGroupProps} from './Group'
 export type {ActionListItemProps} from './Item'
 export type {ActionListLinkItemProps} from './LinkItem'
+export type {ActionListDividerProps} from './Divider'
 export type {ActionListDescriptionProps} from './Description'
 export type {ActionListLeadingVisualProps, ActionListTrailingVisualProps} from './Visuals'
 

src/NavList/NavList.tsx

@@ -3,7 +3,12 @@ import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/r
 import {useSSRSafeId} from '@react-aria/ssr'
 import React, {isValidElement} from 'react'
 import styled from 'styled-components'
-import {ActionList} from '../ActionList'
+import {
+  ActionList,
+  ActionListDividerProps,
+  ActionListLeadingVisualProps,
+  ActionListTrailingVisualProps
+} from '../ActionList'
 import Box from '../Box'
 import StyledOcticon from '../StyledOcticon'
 import sx, {merge, SxProp} from '../sx'
@@ -154,7 +159,7 @@ function ItemWithSubNav({children, subNav, sx: sxProp = {}}: ItemWithSubNavProps
 // ----------------------------------------------------------------------------
 // NavList.SubNav
 
-type NavListSubNavProps = {
+export type NavListSubNavProps = {
   children: React.ReactNode
 } & SxProp
 
@@ -203,28 +208,34 @@ SubNav.displayName = 'NavList.SubNav'
 // ----------------------------------------------------------------------------
 // NavList.LeadingVisual
 
+export type NavListLeadingVisualProps = ActionListLeadingVisualProps
+
 const LeadingVisual = ActionList.LeadingVisual
 
 LeadingVisual.displayName = 'NavList.LeadingVisual'
 
 // ----------------------------------------------------------------------------
 // NavList.TrailingVisual
 
+export type NavListTrailingVisualProps = ActionListTrailingVisualProps
+
 const TrailingVisual = ActionList.TrailingVisual
 
 TrailingVisual.displayName = 'NavList.TrailingVisual'
 
 // ----------------------------------------------------------------------------
 // NavList.Divider
 
+export type NavListDividerProps = ActionListDividerProps
+
 const Divider = ActionList.Divider
 
 Divider.displayName = 'NavList.Divider'
 
 // ----------------------------------------------------------------------------
 // NavList.Group
 
-type NavListGroupProps = {
+export type NavListGroupProps = {
   children: React.ReactNode
   title?: string
 } & SxProp

src/index.ts

@@ -41,6 +41,7 @@ export type {
   ActionListGroupProps,
   ActionListItemProps,
   ActionListLinkItemProps,
+  ActionListDividerProps,
   ActionListDescriptionProps,
   ActionListLeadingVisualProps,
   ActionListTrailingVisualProps
@@ -95,6 +96,16 @@ export {default as LabelGroup} from './LabelGroup'
 export type {LabelGroupProps} from './LabelGroup'
 export {default as Link} from './Link'
 export type {LinkProps} from './Link'
+export {NavList} from './NavList'
+export type {
+  NavListProps,
+  NavListItemProps,
+  NavListSubNavProps,
+  NavListGroupProps,
+  NavListLeadingVisualProps,
+  NavListTrailingVisualProps,
+  NavListDividerProps
+} from './NavList'
 export {default as Overlay} from './Overlay'
 export type {OverlayProps} from './Overlay'
 export {default as Pagehead} from './Pagehead'