Skip to content

Commit

Permalink
Implement NavList component (part 1) (#2058)
Browse files Browse the repository at this point in the history 
* Create NavList component

* Implement NavList subcomponents

* Reset font weight of trailing visual

* Export NavList from drafts

* Update NavList docs

* Update NavList.mdx

* Add children to props type

* Add NavList tests

* Create breezy-cooks-destroy.md

* Pass props to underlying nav element

* Show divider between groups

* Update snapshot
  • Loading branch information
@colebemis
colebemis committed May 10, 2022
1 parent d43a825 commit ab30f14
Show file tree
Hide file tree
Showing 8 changed files with 796 additions and 197 deletions.
5 changes: 5 additions & 0 deletions .changeset/breezy-cooks-destroy.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Add draft of `NavList` component
243 changes: 47 additions & 196 deletions docs/content/NavList.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,30 @@
title: NavList
status: Draft
description: Use nav list to render a vertical list of navigation links.
source: https://github.com/primer/react/tree/main/src/NavList
---

<Note variant="warning">Not implemented yet</Note>

To render a horizontal list of navigation links, consider using [UnderlineNav](/UnderlineNav).
```js
import {NavList} from '@primer/react/drafts'
```

## Examples

### Simple

```jsx
```jsx live drafts
<NavList>
<NavList.Item href="/" aria-current="page">
Dashboard
Home
</NavList.Item>
<NavList.Item href="/pulls">Pull requests</NavList.Item>
<NavList.Item href="/issues">Issues</NavList.Item>
<NavList.Item href="/about">About</NavList.Item>
<NavList.Item href="/contact">Contact</NavList.Item>
</NavList>
```

<details>
<summary>Rendered HTML</summary>

```html
<nav>
<ul role="list">
<li><a href="/" aria-current="page">Dashboard</a></li>
<li><a href="/about">Pull requests</a></li>
<li><a href="/contact">Issues</a></li>
</ul>
</nav>
```

</details>

### With leading icons

```jsx
```jsx live drafts
<NavList>
<NavList.Item href="/" aria-current="page">
<NavList.LeadingVisual>
Expand All @@ -62,88 +48,34 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/
</NavList>
```

<details>
<summary>Rendered HTML</summary>

```html
<nav>
<ul role="list">
<li>
<a href="/" aria-current="page">
<span><svg aria-hidden="true">...</svg></span>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="/pulls">
<span><svg aria-hidden="true">...</svg></span>
<span>Pull requests</span>
</a>
</li>
<li>
<a href="/issues">
<span><svg aria-hidden="true">...</svg></span>
<span>Issues</span>
</a>
</li>
</ul>
</nav>
```

</details>

### With other leading visuals

```jsx
```jsx live drafts
<NavList>
<NavList.Item href="/general" aria-current="page">
<NavList.LeadingVisual>#️⃣</NavList.LeadingVisual>
<NavList.LeadingVisual>
<span aria-hidden>#️⃣</span>
</NavList.LeadingVisual>
General
</NavList.Item>
<NavList.Item href="/q-a">
<NavList.LeadingVisual>🙏</NavList.LeadingVisual>
<NavList.LeadingVisual>
<span aria-hidden>🙏</span>
</NavList.LeadingVisual>
Q&A
</NavList.Item>
<NavList.Item href="/show-and-tell">
<NavList.LeadingVisual>🙌</NavList.LeadingVisual>
<NavList.LeadingVisual>
<span aria-hidden>🙌</span>
</NavList.LeadingVisual>
Show and tell
</NavList.Item>
</NavList>
```

<details>
<summary>Rendered HTML</summary>

```html
<nav>
<ul role="list">
<li>
<a href="/" aria-current="page">
<span>#️⃣</span>
<span>General</span>
</a>
</li>
<li>
<a href="/pulls">
<span>🙏</span>
<span>Q&A</span>
</a>
</li>
<li>
<a href="/issues">
<span>🙌</span>
<span>Show and tell</span>
</a>
</li>
</ul>
</nav>
```

</details>

### With trailing visuals

```jsx
```jsx live drafts
<NavList>
<NavList.Item href="/inbox" aria-current="page">
Inbox
Expand All @@ -154,31 +86,13 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/
</NavList>
```

<details>
<summary>Rendered HTML</summary>

```html
<nav>
<ul role="list">
<li>
<a href="/inbox" aria-current="page">
<span>Inbox</span>
<span>1,234</span>
</a>
</li>
<li><a href="/saved">Saved</a></li>
<li><a href="/done">Done</a></li>
</ul>
</nav>
```

</details>

### With a heading

```jsx
```jsx live drafts
<>
<h3 id="workflows-heading">Workflows</h3>
<Heading as="h3" id="workflows-heading" sx={{fontSize: 2}}>
Workflows
</Heading>
<NavList aria-labelledby="workflows-heading">
<NavList.Item href="/" aria-current="page">
All workflows
Expand All @@ -190,26 +104,9 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/
</>
```

<details>
<summary>Rendered HTML</summary>

```html
<h3 id="workflows-heading">Workflows</h3>
<nav aria-labelledby="workflows-heading">
<ul role="list">
<li><a href="/" aria-current="page">All workflows</a></li>
<li><a href="/ci">CI</a></li>
<li><a href="/deploy">Deploy</a></li>
<li><a href="/release">Release</a></li>
</ul>
</nav>
```

</details>

### With aria-label

```jsx
```jsx live drafts
<NavList aria-label="Security">
<NavList.Item href="/" aria-current="page">
Overview
Expand All @@ -219,24 +116,9 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/
</NavList>
```

<details>
<summary>Rendered HTML</summary>

```html
<nav aria-label="Security">
<ul role="list">
<li><a href="/" aria-current="page">Overview</a></li>
<li><a href="/policy">Security policy</a></li>
<li><a href="/advisories">Security advisories</a></li>
</ul>
</nav>
```

</details>

### With groups

```jsx
```jsx live drafts
<NavList>
<NavList.Group title="Overview">
<NavList.Item href="/getting-started" aria-current="page">
Expand All @@ -251,34 +133,10 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/
</NavList>
```

<details>
<summary>Rendered HTML</summary>

```html
<nav>
<ul role="list">
<li>
<div role="presentation" id="generated-id-1">Overview</div>
<ul role="list" aria-labelledby="generated-id-1">
<li><a href="/getting-started" aria-current="page">Getting started</a></li>
</ul>
</li>
<li>
<div role="presentation" id="generated-id-2">Components</div>
<ul role="list" aria-labelledby="generated-id-2">
<li><a href="/Avatar">Avatar</a></li>
<li><a href="/Button">Button</a></li>
<li><a href="/Label">Label</a></li>
</ul>
</li>
</ul>
</nav>
```

</details>

### With sub-items

<Note variant="danger">Not implemented yet</Note>

```jsx
<NavList>
<NavList.Item href="/branches">Branches</NavList.Item>
Expand Down Expand Up @@ -325,9 +183,11 @@ If a `NavList.Item` contains a `NavList.SubNav`, the `NavList.Item` will render

### With a divider

```jsx
```jsx live drafts
<NavList>
<NavList.Item href="/">Dashboard</NavList.Item>
<NavList.Item href="/" aria-current="page">
Dashboard
</NavList.Item>
<NavList.Item href="/pulls">Pull requests</NavList.Item>
<NavList.Item href="/issues">Issues</NavList.Item>
<NavList.Divider />
Expand All @@ -336,26 +196,10 @@ If a `NavList.Item` contains a `NavList.SubNav`, the `NavList.Item` will render
</NavList>
```

<details>
<summary>Rendered HTML</summary>

```html
<nav>
<ul role="list">
<li><a href="/">Dashboard</a></li>
<li><a href="/pulls">Pull requests</a></li>
<li><a href="/issues">Issues</a></li>
<div role="separator"></div>
<li><a href="/marketplace">Marketplace</a></li>
<li><a href="/explore">Explore</a></li>
</ul>
</nav>
```

</details>

### With React Router

<Note variant="danger">Not implemented yet</Note>

```jsx
import {Link, useMatch, useResolvedPath} from 'react-router-dom'
import {NavList} from '@primer/react'
Expand Down Expand Up @@ -383,6 +227,8 @@ function App() {

### With Next.js

<Note variant="danger">Not implemented yet</Note>

```jsx
import {useRouter} from 'next/router'
import Link from 'next/link'
Expand Down Expand Up @@ -416,8 +262,13 @@ function App() {
<PropsTable>
<PropsTableRow name="aria-label" type="string" />
<PropsTableRow name="aria-labelledby" type="string" />
<PropsTableSxRow />
<PropsTableRefRow refType="HTMLElement" />
<PropsTableBasePropRows
elementType="nav"
refType="HTMLElement"
passthroughPropsLink={
<Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#Attributes">MDN</Link>
}
/>
</PropsTable>

### NavList.Item
Expand Down Expand Up @@ -506,10 +357,10 @@ function App() {
<ComponentChecklist
items={{
propsDocumented: true,
noUnnecessaryDeps: false,
adaptsToThemes: false,
adaptsToScreenSizes: false,
fullTestCoverage: false,
noUnnecessaryDeps: true,
adaptsToThemes: true,
adaptsToScreenSizes: true,
fullTestCoverage: true,
usedInProduction: false,
usageExamplesDocumented: true,
hasStorybookStories: false,
Expand Down
3 changes: 2 additions & 1 deletion src/ActionList/Visuals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,8 @@ export const TrailingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
height: '20px', // match height of text row
flexShrink: 0,
color: getVariantStyles(variant, disabled).annotationColor,
marginLeft: 2
marginLeft: 2,
fontWeight: 'initial'
},
sx as SxProp
)}
Expand Down
Loading

0 comments on commit ab30f14

Please sign in to comment.