Add expand to NavList

.changeset/many-rivers-deny.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add `NavList.ShowMoreItem` component to support showing more content within a `NavList`.

e2e/components/NavList.test.ts

@@ -142,4 +142,60 @@ test.describe('NavList', () => {
       })
     }
   })
+
+  test.describe('With expand', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--with-expand',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`NavList.With expand.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--with-expand',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('With group expand', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--with-group-expand',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`NavList.With group expand.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--with-group-expand',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })

packages/react/src/NavList/NavList.docs.json

@@ -219,6 +219,22 @@
           "description": "href when the TrailingAction is rendered as a link."
         }
       ]
+    },
+    {
+      "name": "NavList.ShowMoreItem",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "defaultValue": "",
+          "required": true,
+          "description": "Acccessible name for the control."
+        },
+        {
+          "name": "ref",
+          "type": "React.RefObject<HTMLButtonElement>"
+        }
+      ]
     }
   ]
 }

packages/react/src/NavList/NavList.stories.tsx

@@ -328,4 +328,82 @@ export const WithTrailingActionInSubItem = () => {
   )
 }
 
+export const WithExpand: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Pane position="start">
+      <NavList>
+        <NavList.Item href="#" aria-current="page">
+          Item 1
+        </NavList.Item>
+        <NavList.Item href="#">Item 2</NavList.Item>
+        <NavList.Item href="#">Item 3</NavList.Item>
+        <NavList.ShowMoreItem label="Show more">
+          <NavList.Item>Item 4</NavList.Item>
+          <NavList.Item>Item 5</NavList.Item>
+          <NavList.Item>Item 6</NavList.Item>
+          <NavList.Item>Item 7</NavList.Item>
+          <NavList.Item>Item 8</NavList.Item>
+          <NavList.Item>Item 9</NavList.Item>
+        </NavList.ShowMoreItem>
+      </NavList>
+    </PageLayout.Pane>
+    <PageLayout.Content></PageLayout.Content>
+  </PageLayout>
+)
+
+export const ExpandWithPages: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Pane position="start">
+      <NavList>
+        <NavList.Item href="#" aria-current="page">
+          Item 1
+        </NavList.Item>
+        <NavList.Item href="#">Item 2</NavList.Item>
+        <NavList.Item href="#">Item 3</NavList.Item>
+        <NavList.ShowMoreItem pages={2} label="Show more">
+          <NavList.Item>Item 4</NavList.Item>
+          <NavList.Item>Item 5</NavList.Item>
+          <NavList.Item>Item 6</NavList.Item>
+          <NavList.Item>Item 7</NavList.Item>
+          <NavList.Item>Item 8</NavList.Item>
+          <NavList.Item>Item 9</NavList.Item>
+        </NavList.ShowMoreItem>
+      </NavList>
+    </PageLayout.Pane>
+    <PageLayout.Content></PageLayout.Content>
+  </PageLayout>
+)
+
+export const WithGroupExpand = () => (
+  <PageLayout>
+    <PageLayout.Pane position="start">
+      <NavList>
+        <NavList.Group title="Group 1">
+          <NavList.Item aria-current="true" href="#">
+            Item 1A
+          </NavList.Item>
+          <NavList.Item href="#">Item 1B</NavList.Item>
+          <NavList.Item href="#">Item 1C</NavList.Item>
+          <NavList.ShowMoreItem label="More">
+            <NavList.Item>Item 1D</NavList.Item>
+            <NavList.Item>Item 1E</NavList.Item>
+            <NavList.Item>Item 1F</NavList.Item>
+          </NavList.ShowMoreItem>
+        </NavList.Group>
+        <NavList.Group title="Group 2">
+          <NavList.Item href="#">Item 2A</NavList.Item>
+          <NavList.Item href="#">Item 2B</NavList.Item>
+          <NavList.Item href="#">Item 2C</NavList.Item>
+          <NavList.ShowMoreItem label="Show">
+            <NavList.Item>Item 2D</NavList.Item>
+            <NavList.Item>Item 2E</NavList.Item>
+            <NavList.Item>Item 2F</NavList.Item>
+          </NavList.ShowMoreItem>
+        </NavList.Group>
+      </NavList>
+    </PageLayout.Pane>
+    <PageLayout.Content></PageLayout.Content>
+  </PageLayout>
+)
+
 export default meta

packages/react/src/NavList/NavList.test.tsx

@@ -1,4 +1,4 @@
-import {render, fireEvent} from '@testing-library/react'
+import {render, fireEvent, act} from '@testing-library/react'
 import React from 'react'
 import {ThemeProvider} from '..'
 import {NavList} from './NavList'
@@ -381,3 +381,127 @@ describe('NavList.Item with NavList.SubNav', () => {
     })
   })
 })
+
+describe('NavList.ShowMoreItem', () => {
+  function NavListWithExpand() {
+    return (
+      <NavList>
+        <NavList.Item href="#">Item 1</NavList.Item>
+        <NavList.Item href="#">Item 2</NavList.Item>
+        <NavList.ShowMoreItem label="More">
+          <NavList.Item href="#">Item 3</NavList.Item>
+          <NavList.Item href="#">Item 4</NavList.Item>
+        </NavList.ShowMoreItem>
+      </NavList>
+    )
+  }
+
+  it('renders with button', () => {
+    const {queryByRole} = render(<NavListWithExpand />)
+    const button = queryByRole('button', {name: 'More'})
+    expect(button).toBeInTheDocument()
+  })
+
+  it('renders button as child of <ul>', () => {
+    const {queryByRole} = render(<NavListWithExpand />)
+    const button = queryByRole('button', {name: 'More'})
+    const buttonParent = button!.parentElement as HTMLButtonElement
+
+    expect(buttonParent).toBeInTheDocument()
+    expect(buttonParent.tagName).toEqual('LI')
+    expect(buttonParent.parentElement?.tagName).toEqual('UL')
+  })
+
+  it('hides items inside of NavList.ShowMoreItem by default', () => {
+    const {queryByRole} = render(<NavListWithExpand />)
+
+    expect(queryByRole('link', {name: 'Item 1'})).toBeInTheDocument()
+    expect(queryByRole('link', {name: 'Item 2'})).toBeInTheDocument()
+    expect(queryByRole('link', {name: 'Item 3'})).not.toBeInTheDocument()
+    expect(queryByRole('link', {name: 'Item 4'})).not.toBeInTheDocument()
+  })
+
+  it('shows items inside of NavList.ShowMoreItem when expand button is activated', () => {
+    const {queryByRole} = render(<NavListWithExpand />)
+
+    act(() => {
+      queryByRole('button', {name: 'More'})?.click()
+    })
+
+    expect(queryByRole('link', {name: 'Item 1'})).toBeInTheDocument()
+    expect(queryByRole('link', {name: 'Item 2'})).toBeInTheDocument()
+    expect(queryByRole('link', {name: 'Item 3'})).toBeInTheDocument()
+    expect(queryByRole('link', {name: 'Item 4'})).toBeInTheDocument()
+
+    expect(queryByRole('button', {name: 'More'})).not.toBeInTheDocument()
+  })
+
+  it('removes expand button after it is activated', () => {
+    const {queryByRole} = render(<NavListWithExpand />)
+
+    act(() => {
+      queryByRole('button', {name: 'More'})?.click()
+    })
+
+    expect(queryByRole('button', {name: 'More'})).not.toBeInTheDocument()
+  })
+
+  it('places focus on the first of the newly shown list item', () => {
+    const {queryByRole} = render(<NavListWithExpand />)
+
+    act(() => {
+      queryByRole('button', {name: 'More'})?.click()
+    })
+
+    expect(queryByRole('link', {name: 'Item 3'})).toHaveFocus()
+  })
+})
+
+describe('NavList.ShowMoreItem with Group', () => {
+  function NavListWithExpand() {
+    return (
+      <NavList>
+        <NavList.Group title="Group 1">
+          <NavList.Item aria-current="true" href="#">
+            Item 1A
+          </NavList.Item>
+          <NavList.Item href="#">Item 1B</NavList.Item>
+          <NavList.Item href="#">Item 1C</NavList.Item>
+          <NavList.ShowMoreItem label="More">
+            <NavList.Item>Item 1D</NavList.Item>
+            <NavList.Item>Item 1E</NavList.Item>
+            <NavList.Item>Item 1F</NavList.Item>
+          </NavList.ShowMoreItem>
+        </NavList.Group>
+        <NavList.Group title="Group 2">
+          <NavList.Item href="#">Item 2A</NavList.Item>
+          <NavList.Item href="#">Item 2B</NavList.Item>
+          <NavList.Item href="#">Item 2C</NavList.Item>
+          <NavList.ShowMoreItem label="Show">
+            <NavList.Item>Item 2D</NavList.Item>
+            <NavList.Item>Item 2E</NavList.Item>
+            <NavList.Item>Item 2F</NavList.Item>
+          </NavList.ShowMoreItem>
+        </NavList.Group>
+      </NavList>
+    )
+  }
+
+  it('renders expand buttons for each group', () => {
+    const {queryByRole} = render(<NavListWithExpand />)
+
+    expect(queryByRole('button', {name: 'More'})).toBeInTheDocument()
+    expect(queryByRole('button', {name: 'Show'})).toBeInTheDocument()
+  })
+
+  it('renders expand buttons as within <ul>', () => {
+    const {queryByRole} = render(<NavListWithExpand />)
+
+    const group1Button = queryByRole('button', {name: 'More'})
+    const buttonParent = group1Button?.parentElement as HTMLUListElement
+
+    expect(buttonParent).toBeInTheDocument()
+    expect(buttonParent.tagName).toEqual('LI')
+    expect(buttonParent.parentElement!.tagName).toEqual('UL')
+  })
+})