Update tests, docs, add ternary

primer · Jan 29, 2025 · 7ad35ed · 7ad35ed
1 parent c6593c2
commit 7ad35ed
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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}
       </>
     )
   },