# Status

> Source: https://design.nanatec.co.ke/components/status/
> The state of a record — a unit, a tenancy, an invoice, a payment — named from the set that record belongs to, in the colour every other set uses for the same meaning. Overdue and in arrears are both danger; paid and approved are both success; a reader learns the colours once.
> Status: beta
> Since: v0.0.36

Give it a `set` and a `value`. The label and tone come from the set, so the
app sends the machine value it already has and never words it twice.

Sets: `unit`, `tenancy`, `invoice`, `payment`, `approval`, `maintenance`,
`reading`. A value no set knows is shown neutral, in sentence case.

## Preview

```html
<nana-status set="invoice" value="overdue"></nana-status>
<nana-status set="unit" value="occupied" variant="dot"></nana-status>
```

## The sets

```html
<div style="display:flex;flex-wrap:wrap;gap:.5rem">
  <nana-status set="unit" value="occupied"></nana-status>
  <nana-status set="unit" value="vacant"></nana-status>
  <nana-status set="unit" value="reserved"></nana-status>
  <nana-status set="unit" value="notice"></nana-status>
  <nana-status set="unit" value="arrears"></nana-status>
  <nana-status set="unit" value="maintenance"></nana-status>
</div>
```

| Set | Values |
|---|---|
| `unit` | `occupied`, `vacant` / `available`, `reserved`, `notice`, `arrears` / `overdue`, `maintenance` |
| `tenancy` | `draft`, `pending`, `active`, `notice`, `ended`, `terminated` |
| `invoice` | `draft`, `issued`, `partial`, `paid`, `overdue`, `void` |
| `payment` | `pending`, `matched`, `unmatched`, `reversed`, `failed` |
| `approval` | `pending`, `approved`, `rejected`, `changes`, `withdrawn` |
| `maintenance` | `open`, `scheduled`, `progress`, `resolved`, `closed` |
| `reading` | `due`, `captured`, `flagged`, `approved` |

## What the colours mean

| Tone | Means |
|---|---|
| Success | Settled, in order — paid, active, approved |
| Info | Under way, nothing wrong — issued, scheduled |
| Warning | Needs attention soon — reserved, part paid, awaiting a decision |
| Danger | Wrong now — overdue, in arrears, failed |
| Accent | The brand's own — an occupied unit |
| Alert | Work under way — maintenance, a repair in progress |
| Change | About to change — notice given |
| Neutral | Not in play — available, draft, void, ended |

The same meaning gets the same colour in every set, which is the point of
having sets: a reader who has learnt that red is "overdue" on an invoice does
not have to learn it again for arrears on a unit.

## In a dense table

`variant="dot"` drops the chip for a marker beside plain text, which reads
better twenty rows deep.

```html
<nana-status set="invoice" value="paid" variant="dot"></nana-status>
```

## Your own sets

Pass further sets as the `sets` property. They are looked in before the
built-in ones, so they can also reword a built-in value.

```js
document.querySelector("nana-status").sets = {
  lease: { signed: { label: "Signed", tone: "success" } },
};
```

## Installation

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

Or copy the source in and own it:

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

## Usage

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

```html
<nana-status set="invoice" value="overdue"></nana-status>
<nana-status set="unit" value="occupied" variant="dot"></nana-status>
```

## API

## Storybook

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