import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
import { RdxProgressRootDirective } from '../src/progress-root.directive';
import * as ProgressDirectiveStories from './progress.stories';

<Meta title="Primitives/Progress" />

# Progress

#### Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

<Canvas sourceState="hidden" of={ProgressDirectiveStories.Default} />

## Features

- ✅ Provides context for assistive technology to read the progress of a task.

## Usage

Get started with importing the directive:

```typescript
import { RdxProgressRootDirective, RdxProgressIndicatorDirective } from '@radix-ng/primitives/progress';
```

## Example

```html
<div class="ProgressRoot" rdxProgressRoot [rdxValue]="progress">
  <div class="ProgressIndicator" rdxProgressIndicator [style.transform]="'translateX(-' + (100 - progress) +'%)'"></div>
</div>
```

## API Reference

### RdxProgressRootDirective

<ArgTypes of={RdxProgressRootDirective} />

<Markdown>
  {`
  | Data Attribute | Value |
  | ----------- | --------- |
  | [data-state]    | "complete" or "indeterminate" or "loading"   |
  | [data-value]    | The current value          |
  | [data-max] |  The max value     |
  `}
</Markdown>

### RdxProgressIndicatorDirective

Used to show the progress visually. It also makes progress accessible to assistive technologies.

<Markdown>
  {`
  | Data Attribute | Value |
  | ----------- | --------- |
  | [data-state]    | "complete" or "indeterminate" or "loading"   |
  | [data-value]    | The current value          |
  | [data-max] |  The max value     |
  `}
</Markdown>

## Accessibility

Adheres to the [`progressbar` role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/meter).
