# Checklist

> Source: https://design.nanatec.co.ke/components/checklist/
> A section of rules and whether each holds — loan eligibility, a tenancy application, a move-out inspection. Each row is a `nana-check-item`: the outcome, the rule, and what was found. `summary` adds a line over the list that says how it came out as a whole.
> Status: beta
> Since: v0.0.37

Write the rows as `nana-check-item` children when a detail needs markup of
its own, or pass them as `items` when they come straight from data.

## Preview

```html
<nana-checklist label="Loan eligibility" summary>
  <nana-check-item status="pass" label="Approved membership">Membership approved</nana-check-item>
  <nana-check-item status="fail" label="Contributions up to date" note="15,280.00 overdue">
    You are 15,280 behind on your contributions. Clear it before borrowing.
  </nana-check-item>
  <nana-check-item status="pass" label="Amount within your borrowing limit">200,000.00 of 3,130,260.00 limit</nana-check-item>
</nana-checklist>
```

## Rows from data

When the checks come from an API, pass them as `items` instead of writing
children. Each is `{ label, status, detail?, note? }`.

```js
document.querySelector("nana-checklist").items = [
  { label: "Approved membership", status: "pass", detail: "Membership approved" },
  { label: "Contributions up to date", status: "fail", detail: "You are 15,280 behind.", note: "15,280.00 overdue" },
];
```

Write children when a row needs markup of its own — an amount drawn by
[Money](/components/money/), a link, or a button in the row's `action` slot.

```html
<nana-checklist label="Move-out inspection" summary style="max-width:30rem">
  <nana-check-item status="pass" label="Keys returned">3 of 3 keys</nana-check-item>
  <nana-check-item status="warn" label="Walls and paintwork">Scuffs in the hallway, within fair wear</nana-check-item>
  <nana-check-item status="fail" label="Final water bill settled" note="KES 2,340.00 outstanding">
    Reading taken 30 Sep.
    <nana-button slot="action" size="sm" variant="primary">Deduct from deposit</nana-button>
  </nana-check-item>
  <nana-check-item status="pending" label="Deposit refund approved">Waiting on the owner</nana-check-item>
</nana-checklist>
```

## Outcomes

| Status | Icon | Reads to a screen reader as |
|---|---|---|
| `pass` | Green check | Passed |
| `fail` | Red cross, and the rule turns red | Failed |
| `warn` | Amber warning | Needs attention |
| `pending` | Grey clock | Not checked yet |
| `info` | Blue info | For information |

`summary` adds a line over the list: one failure fails the list, a check still
to run holds it open, and warnings let it pass with a note. Information rows
are left out of the count. The summary follows the rows as they change.

## Installation

```bash
npm install @nana-tec/ui-components
```

Or copy the source in and own it:

```bash
npx @nana-tec/ui add checklist
```

## Usage

```js
import "@nana-tec/ui-components/checklist";
```

```html
<nana-checklist label="Loan eligibility" summary>
  <nana-check-item status="pass" label="Approved membership">Membership approved</nana-check-item>
  <nana-check-item status="fail" label="Contributions up to date" note="15,280.00 overdue">
    You are 15,280 behind on your contributions. Clear it before borrowing.
  </nana-check-item>
  <nana-check-item status="pass" label="Amount within your borrowing limit">200,000.00 of 3,130,260.00 limit</nana-check-item>
</nana-checklist>
```

## API

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-checklist--docs