Implement NavList.SubNav (#2064)

* wip subnav

* Add active prop to ActionList.Item

* Handle nested current item

* Add simple storybook story

* Update snapshot

* Stub tests

* Use NavList in PageLayout story

* Add test case todo

* Fix sx typescript error

* Add NavList.Item test

* Add subnav tests

* Add support for as="button" to ActionList.Item

* Add nested subnav test

* Update docs

* Use spacing primitive

* Reset marginY for safari

* Document active prop

* Create strong-nails-sip.md

* Update snapshots

Author: colebemis

.changeset/strong-nails-sip.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add support for sub-items in draft implementation of NavList

docs/content/ActionList.mdx

@@ -297,6 +297,12 @@ render(<SelectFields />)
     defaultValue="false"
     description="Indicate whether the item is selected. Only applies to items that can be selected."
   />
+  <PropsTableRow
+    name="active"
+    type="boolean"
+    defaultValue="false"
+    description="Indicate whether the item is active. There should never be more than one active item."
+  />
   <PropsTableRow
     name="disabled"
     type="boolean"
@@ -325,6 +331,12 @@ render(<SelectFields />)
     required
     type="React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual"
   />
+  <PropsTableRow
+    name="active"
+    type="boolean"
+    defaultValue="false"
+    description="Indicate whether the item is active. There should never be more than one active item."
+  />
   <PropsTableBasePropRows
     elementType="a"
     isPolymorphic

docs/content/NavList.mdx

@@ -135,16 +135,16 @@ import {NavList} from '@primer/react/drafts'
 
 ### With sub-items
 
-<Note variant="danger">Not implemented yet</Note>
-
-```jsx
+```jsx live drafts
 <NavList>
   <NavList.Item href="/branches">Branches</NavList.Item>
   <NavList.Item href="/tags">Tags</NavList.Item>
   <NavList.Item>
     Actions
     <NavList.SubNav>
-      <NavList.Item href="/actions">General</NavList.Item>
+      <NavList.Item href="/actions" aria-current="page">
+        General
+      </NavList.Item>
       <NavList.Item href="/actions/runners">Runners</NavList.Item>
     </NavList.SubNav>
   </NavList.Item>
@@ -157,30 +157,6 @@ If a `NavList.Item` contains a `NavList.SubNav`, the `NavList.Item` will render
 
 </Note>
 
-<details>
-  <summary>Rendered HTML</summary>
-
-```html
-<nav>
-  <ul role="list">
-    <li><a href="/branches">Branches</a></li>
-    <li><a href="/tags">Tags</a></li>
-    <li>
-      <button id="generated-id-1" aria-expanded="false" aria-controls="generated-id-2">
-        <span>Actions</span>
-        <span><svg aria-hidden="true">...</svg></span>
-      </button>
-      <ul role="list" id="generated-id-2" aria-labelledby="generated-id-1">
-        <li><a href="/actions">General</a></li>
-        <li><a href="/actions/runners">Runners</a></li>
-      </ul>
-    </li>
-  </ul>
-</nav>
-```
-
-</details>
-
 ### With a divider
 
 ```jsx live drafts