js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix react examples

Browse Source
This commit is contained in:
konnorrogers
2023-09-25 16:07:16 -04:00
parent 67702b8d89
commit fc66179dc0
3 changed files with 230 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
docs/pages/components/nav-group.md
View File

@@ -63,6 +63,81 @@ layout: component
</nav>
```
{% raw %}
```jsx:react
import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
import WaNavGroup from '@shoelace-style/shoelace/dist/react/nav-group';
export default () => {
return (
<nav style={{
border: "var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-surface-outline)",
borderRadius: "var(--wa-panel-corners)",
padding: "var(--wa-space-square-m)"
}}>
<WaNavGroup>
<WaNavItem href="#">
<WaIcon name="search" slot="prefix" />
Search
</WaNavItem>
<WaNavItem href="#">
<WaIcon name="bell" slot="prefix" />
Notifications
</WaNavItem>
<WaNavGroup heading="Workspace" expandable style="margin-top: 1rem;">
<div
slot="summary"
style={{
display: "flex",
align-items: "center",
gap: "8px"
}}
>
<WaIcon name="credit-card" />
Payments
</div>
<WaNavItem href="#" active>
Transactions
</WaNavItem>
<WaNavItem href="#">
Invoices
</WaNavItem>
<WaNavItem href="#">
Disputed Charges
</WaNavItem>
</WaNavGroup>
<WaNavItem href="#">
<WaIcon name="question-circle" slot="prefix" />
Help
</WaNavItem>
</WaNavGroup>
<WaNavGroup heading="Reports" style={{marginTop: "1rem"}}>
<WaNavItem href="#">
Sales
</WaNavItem>
<WaNavItem href="#">
Expenses
</WaNavItem>
<WaNavItem href="#">
Payroll
</WaNavItem>
</WaNavGroup>
</nav>
)
```
{% endraw %}
## Examples
### Nav Group with heading
@@ -83,6 +158,29 @@ layout: component
</wa-nav-group>
```
{% raw %}
```jsx:react
import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
import WaNavGroup from '@shoelace-style/shoelace/dist/react/nav-group';
<WaNavGroup heading="Workspace">
<WaNavItem href="#" active>
Transactions
</WaNavItem>
<WaNavItem href="#">
Invoices
</WaNavItem>
<WaNavItem href="#">
Disputed Charges
</WaNavItem>
</WaNavGroup>
```
{% endraw %}
### Nav group with nested nav items
@@ -104,4 +202,27 @@ to expanding the nav group.
Disputed Charges
</wa-nav-item>
</wa-nav-group>
```
```
{% raw %}
```jsx:react
import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
import WaNavGroup from '@shoelace-style/shoelace/dist/react/nav-group';
<WaNavGroup expandable summary="Payments">
<WaNavItem href="#" active>
Transactions
</WaNavItem>
<WaNavItem href="#">
Invoices
</WaNavItem>
<WaNavItem href="#">
Disputed Charges
</WaNavItem>
</WaNavGroup>
```
{% endraw %}

110
docs/pages/components/nav-item.md
View File

@@ -1,7 +1,8 @@
---
meta:
title: Nav Item
description:
description: |
A nav item is intended to be used in a navigation area such as within a nav element in a sidebar or inside of a drawer. A nav item is meant to drive page level navigations.
layout: component
---
@@ -49,24 +50,110 @@ of a `<wa-nav-group>` for accessibility purposes.
</wa-nav-group>
```
{% raw %}
```jsx:react
import WaNavGroup from '@shoelace-style/shoelace/dist/react/nav-group';
import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
<WaNavGroup>
<WaNavItem href="#">
<WaIcon name="search" slot="prefix" />
Search
</WaNavItem>
<WaNavItem href="#">
<WaIcon name="bell" slot="prefix" />
Notifications
</WaNavItem>
<WaDivider></WaDivider>
<WaNavItem href="#" active>
<WaIcon name="house-door" slot="prefix" />
Home
</WaNavItem>
<WaNavItem href="#">
<WaIcon name="music-note-list" slot="prefix" />
Playlists
</WaNavItem>
<WaNavItem href="#">
<WaIcon name="file-earmark-music" slot="prefix" />
Tracks
</WaNavItem>
<WaNavItem href="#">
<WaIcon name="gear" slot="prefix" />
Settings
</WaNavItem>
<WaNavItem href="#">
<WaIcon name="question-circle" slot="prefix" />
Help
</WaNavItem>
</WaNavGroup>
```
{% endraw %}
## Examples
### Active nav item
Set a `<wa-nav-item>` to active using the `active` boolean attribute. Doing so will
map to `aria-current="page"` under the hood.
```html:preview
<wa-nav-item href="#" active>
Active Nav Item
</wa-nav-item>
```
{% raw %}
```jsx:react
import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
export default () => {
return (
<WaNavItem href="#" active>
Active Nav Item
</WaNavItem>
)
}
```
{% endraw %}
### Icon only
```html:preview
<wa-nav-item href="#">
<wa-icon slot="prefix" name="house-door"></wa-icon>
<wa-icon name="house-door" label="Home"></wa-icon>
</wa-nav-item>
```
{% raw %}
```jsx:react
import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
export default () => {
return (
<WaNavItem href="#">
<WaIcon name="house-door" label="Home" />
</WaNavItem>
)
}
```
{% endraw %}
### Nav items with prefix + suffix
@@ -78,4 +165,21 @@ of a `<wa-nav-group>` for accessibility purposes.
</wa-nav-item>
```
## Stuff
{% raw %}
```jsx:react
import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
export default () => {
return (
<WaNavItem href="#">
<WaIcon slot="prefix" name="link-45deg" />
Nav Item
<WaIcon slot="suffix" name="box-arrow-up-right" />
</WaNavItem>
)
}
```
{% endraw %}

2
src/components/nav-item/nav-item.component.ts
View File

@@ -7,7 +7,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
import { classMap } from 'lit/directives/class-map.js';
/**
* @summary Short summary of the component's intended use.
* @summary A nav item is intended to be used in a navigation area such as within a nav element in a sidebar or inside of a drawer. A nav item is meant to drive page navigations.
* @documentation https://shoelace.style/components/nav-item
* @status experimental
* @since 3.0