docs: progress bar PTL-1613

docs/001_develop/03_client-capabilities/009_presentation/examples/progress.js

@@ -0,0 +1,25 @@
+import { CodeSection } from "../../../../../examples/ui/documentationBase.js";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import {useRef} from "react";
+
+function setup() {
+	// Setup
+	const isBrowser = useIsBrowser();
+	if (isBrowser) {
+		const RapidImports = require("../../../../../examples/ui/rapidImports");
+		RapidImports.registerComponents();
+	}
+}
+
+export default function ProgressDemo({ children, color }) {
+	setup();
+	return (
+		<CodeSection>
+			<div style={{ color: 'var(--neutral-foreground-rest)', width: '-webkit-fill-available'}}>
+				<div style={{ display: 'flex', flexWrap: 'wrap', width: '100%', flexDirection: 'row', justifyContent: 'space-evenly' }}>
+					<rapid-progress style={{ width: '-webkit-fill-available'}} min="0" max="100" ></rapid-progress>
+				</div>
+			</div>
+		</CodeSection>
+	)
+}

docs/001_develop/03_client-capabilities/009_presentation/progress.mdx

@@ -0,0 +1,166 @@
+---
+title: 'Progress'
+sidebar_label: 'Progress'
+id: client-presentation-progress
+keywords: [presentation, progress]
+tags:
+- presentation
+- progress
+sidebar_position: 9
+---
+
+import ProgressDemo from './examples/progress.js';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Progress
+
+Used to display one of the following:
+
+- the length of time a process will take
+- a visual percentage value (referred to as a **determinate** state)
+- a visual representation of an unspecified wait time (referred to as an **indeterminate** state)
+
+`Progress` components are typically visually represented by a circular or linear animation.
+When the `value` attribute is passed, the state is **determinate**; otherwise, it is **indeterminate**.
+
+Use cases:
+- Progress indicators
+- Metric visualisation
+
+## Example
+
+<ProgressDemo />
+
+<Tabs defaultValue="genesis" values={[{ label: 'Genesis', value: 'genesis', }, { label: 'React', value: 'react', }, { label: 'Angular', value: 'angular', }]}>
+
+  <TabItem value="genesis">
+
+    Declaration
+    ```html
+    <rapid-progress></rapid-progress>
+    ```
+
+    Usage
+    ```typescript
+    @customElement({
+      name: 'my-element',
+      template: html`
+        <rapid-progress></rapid-progress>
+      `,
+    })
+    export class MyElement extends GenesisElement {
+    }
+    ```
+
+  </TabItem>
+  <TabItem value="react">
+
+  Declaration
+  ```html
+    <rapid-progress></rapid-progress>
+  ```
+  Usage
+  ```typescript
+  export function MyComponent() {
+    return (
+      <rapid-progress></rapid-progress>
+    );
+  }
+  ```
+</TabItem>
+  <TabItem value="angular">
+
+  Declaration
+  ```html
+    <rapid-progress></rapid-progress>
+  ```
+
+  Usage
+  ```typescript
+  import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+  @Component({
+    selector: 'my-root',
+    template: `
+        <rapid-progress></rapid-progress>
+        `,
+    standalone: true,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  })
+  export class AppComponent {
+  }
+  ```
+</TabItem>
+</Tabs>
+
+## API
+
+Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.
+
+### Attributes
+
+<table>
+  <thead><tr><th>Name</th><th>Type</th><th>Description</th><th>Example</th></tr></thead>
+  <tbody>
+    <tr>
+      <td>value</td>
+      <td><code>number</code></td>
+      <td>The value of progress to be shown.</td>
+<td>
+
+```typescript
+<rapid-progress value="75">
+```
+
+</td>
+    </tr>
+    <tr>
+      <td>min</td>
+      <td><code>number</code></td>
+      <td>The minimum value of progress.</td>
+<td>
+
+```typescript
+<rapid-progress value="0">
+```
+
+</td>
+    </tr>
+    <tr>
+      <td>max</td>
+      <td><code>number</code></td>
+      <td>The maximum value of progress.</td>
+<td>
+
+```typescript
+<rapid-progress max="100">
+```
+
+</td>
+    </tr>
+  </tbody>
+</table>
+
+
+
+### Properties
+This component doesn't have any properties which are not also controlled via attributes.
+
+### Slots
+| Name | Description |
+|---|---|
+| indeterminate | The content shown when no value is set (no progress is made). |
+| determinate   | The content shown when a value is set (some progress is made). |
+
+### Parts
+| Name | Description |
+|---|---|
+| progress | Available for the determinate progress slot. |
+
+### Events fired
+
+This component doesn't fire any events.
+
+### Events listened to
+
+This component doesn't listen to any events.