# ListItemHsi

> Slug: `list-item-hsi` · Category: Display

## When to use
- A row in a Home Internet (HSI) account flow — devices, gateways, paired phones, or connected equipment.
- You need a row that combines an account-style leading decoration with either an action icon or a live WiFi status icon.

## When NOT to use
- Generic navigation rows -> `ListItemNavigation`.
- Generic icon-only trailing rows outside HSI context -> `ListItemTrailingIcon`.
- Filter / selection rows -> `ListItemFilter`.

## Variants & decision tree
- Static action icon (info, settings, edit) -> pass `trailingIcon`.
- Live WiFi-status icon paired with required navigation -> pass `trailingWifiIcon` plus `navigationUrl` (both required for this variant).

## States
- `inverse` — dark-background styling.
- `focused` — force-focus visual for design review.

## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| **`label`** | `string` | — | Primary text (device name). |
| `labelId` | `string` | auto | Unique ID for the label. |
| `body` | `OptionalCopy[]` | — | Up to two body lines (e.g., MAC, status). |
| `status` | `StatusLabelProps` | — | Inline status pill. |
| `leadingDecorationType` | `'device' \| 'app' \| 'avatar' \| 'icon'` | — | Leading visual type. |
| `leadingImage` / `leadingIcon` / `leadingDecorationA11yLabel` | — | — | Leading decoration. |
| `trailingIcon` | `ReactNode` | — | Static trailing icon (variant A). |
| `trailingWifiIcon` | `ReactNode` | — | WiFi-status icon (variant B, requires `navigationUrl`). |
| `trailingIconA11yLabel` | `string` | — | Accessible name for the trailing icon. |
| `navigationUrl` | `string` | — | URL — required when `trailingWifiIcon` is set. |
| `dividerPosition` | `'top' \| 'bottom' \| 'none'` | `'bottom'` | Divider placement. |
| `inverse` / `focused` / `className` | — | — | Standard. |

## Usage examples
```tsx
import { List, ListItemHsi } from 'arrow-react-bootstrap';

<List>
  <ListItemHsi
    label="Living Room Gateway"
    leadingDecorationType="device"
    leadingImage="/images/gateway.png"
    leadingDecorationA11yLabel="5G Gateway"
    trailingWifiIcon={<svg viewBox="0 0 24 24"><path d="…" /></svg>}
    trailingIconA11yLabel="WiFi: 4 of 5 bars"
    navigationUrl="/devices/gateway"
  />
</List>
```

## Composition
- Render inside `<List>`. Often nested in a `BillCard`'s `lists` slot or a HSI dashboard panel.

## Accessibility
- Always pass `trailingIconA11yLabel` — WiFi icons convey state and are not decorative.
- The wifi-status variant becomes a link; do not wrap the row in another anchor.

## Do / Don't
- Do: use this row only inside HSI / device-management flows; the slot for a wifi indicator is intentional.
- Do: keep status content (signal strength, online/offline) in the `status` or trailing icon — not the label.
- Don't: pass both `trailingIcon` and `trailingWifiIcon` — the union type forbids it.
- Don't: omit `navigationUrl` when using the WiFi variant.
