From 7ad35ed86f4af5ba181feb6df7aaeffc102d9c7d Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Wed, 29 Jan 2025 17:25:47 -0500
Subject: [PATCH] Update tests, docs, add ternary

---
 packages/react/src/NavList/NavList.docs.json |  7 ++++
 packages/react/src/NavList/NavList.test.tsx  | 39 ++++++++++++++++++++
 packages/react/src/NavList/NavList.tsx       |  8 ++--
 3 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/NavList/NavList.docs.json b/packages/react/src/NavList/NavList.docs.json
index 0e986580850..2be5c532236 100644
--- a/packages/react/src/NavList/NavList.docs.json
+++ b/packages/react/src/NavList/NavList.docs.json
@@ -230,6 +230,13 @@
           "required": true,
           "description": "Acccessible name for the control."
         },
+        {
+          "name": "pages",
+          "type": "number",
+          "defaultValue": "0",
+          "required": false,
+          "description": "The total number of pages, used to calculate the number of items to show at a given time."
+        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLButtonElement>"
diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx
index bf14d6def3f..1180152efef 100644
--- a/packages/react/src/NavList/NavList.test.tsx
+++ b/packages/react/src/NavList/NavList.test.tsx
@@ -505,3 +505,42 @@ describe('NavList.ShowMoreItem with Group', () => {
     expect(buttonParent.parentElement!.tagName).toEqual('UL')
   })
 })
+
+describe('NavList.ShowMoreItem with pages', () => {
+  function NavListExpandWithPages() {
+    return (
+      <NavList>
+        <NavList.Item href="#">Item 1</NavList.Item>
+        <NavList.Item href="#">Item 2</NavList.Item>
+        <NavList.ShowMoreItem pages={2} label="More">
+          <NavList.Item href="#">Item 3</NavList.Item>
+          <NavList.Item href="#">Item 4</NavList.Item>
+          <NavList.Item href="#">Item 5</NavList.Item>
+          <NavList.Item href="#">Item 6</NavList.Item>
+          <NavList.Item href="#">Item 7</NavList.Item>
+        </NavList.ShowMoreItem>
+      </NavList>
+    )
+  }
+
+  it('renders an expand button', () => {
+    const {queryByRole} = render(<NavListExpandWithPages />)
+
+    expect(queryByRole('button', {name: 'More'})).toBeInTheDocument()
+  })
+
+  it('expands the list when the expand button is clicked', () => {
+    const {queryByRole} = render(<NavListExpandWithPages />)
+    const button = queryByRole('button', {name: 'More'})
+
+    act(() => {
+      button?.click()
+    })
+
+    expect(queryByRole('link', {name: 'Item 3'})).toBeInTheDocument()
+    expect(queryByRole('link', {name: 'Item 4'})).toBeInTheDocument()
+    expect(queryByRole('link', {name: 'Item 5'})).toBeInTheDocument()
+    expect(queryByRole('link', {name: 'Item 6'})).not.toBeInTheDocument()
+    expect(queryByRole('link', {name: 'Item 7'})).not.toBeInTheDocument()
+  })
+})
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
index 4e21c1e686f..44609bdd314 100644
--- a/packages/react/src/NavList/NavList.tsx
+++ b/packages/react/src/NavList/NavList.tsx
@@ -472,7 +472,7 @@ const ShowMoreItem = React.forwardRef<HTMLButtonElement, NavListShowMoreItemProp
             })}
           </ItemWithinGroup.Provider>
         )}
-        {(currentPage < pages || (!pages && !expanded)) && !enabled && (
+        {!enabled && (currentPage < pages || (!pages && !expanded)) ? (
           <Box as="li" sx={{listStyle: 'none'}}>
             <ActionList.Item
               as="button"
@@ -490,8 +490,8 @@ const ShowMoreItem = React.forwardRef<HTMLButtonElement, NavListShowMoreItemProp
               </ActionList.TrailingVisual>
             </ActionList.Item>
           </Box>
-        )}
-        {(currentPage < pages || (!pages && !expanded)) && enabled && (
+        ) : null}
+        {enabled && (currentPage < pages || (!pages && !expanded)) ? (
           <ActionList.Item
             as="button"
             aria-expanded="false"
@@ -507,7 +507,7 @@ const ShowMoreItem = React.forwardRef<HTMLButtonElement, NavListShowMoreItemProp
               <PlusIcon />
             </ActionList.TrailingVisual>
           </ActionList.Item>
-        )}
+        ) : null}
       </>
     )
   },