From dc88a700074a1e7f6e6e0bcaa816d0adf1c41aa0 Mon Sep 17 00:00:00 2001 From: Gareth Spencer <25119104+Gareth-Spencer-Genesis@users.noreply.github.com> Date: Thu, 28 Nov 2024 09:41:39 +0000 Subject: [PATCH 1/2] docs: progress bar PTL-1613 --- .../009_presentation/examples/progress.js | 25 +++ .../009_presentation/progress.mdx | 166 ++++++++++++++++++ 2 files changed, 191 insertions(+) create mode 100644 docs/001_develop/03_client-capabilities/009_presentation/examples/progress.js create mode 100644 docs/001_develop/03_client-capabilities/009_presentation/progress.mdx diff --git a/docs/001_develop/03_client-capabilities/009_presentation/examples/progress.js b/docs/001_develop/03_client-capabilities/009_presentation/examples/progress.js new file mode 100644 index 000000000..55c46b5a7 --- /dev/null +++ b/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 ( + +
+
+ +
+
+ + ) +} diff --git a/docs/001_develop/03_client-capabilities/009_presentation/progress.mdx b/docs/001_develop/03_client-capabilities/009_presentation/progress.mdx new file mode 100644 index 000000000..0c5fe1871 --- /dev/null +++ b/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 + + + + + + + + Declaration + ```html + + ``` + + Usage + ```typescript + @customElement({ + name: 'my-element', + template: html` + + `, + }) + export class MyElement extends GenesisElement { + } + ``` + + + + + Declaration + ```html + + ``` + Usage + ```typescript + export function MyComponent() { + return ( + + ); + } + ``` + + + + Declaration + ```html + + ``` + + Usage + ```typescript + import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + @Component({ + selector: 'my-root', + template: ` + + `, + standalone: true, + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + export class AppComponent { + } + ``` + + + +## API + +Property and attribute binding examples for Genesis Component syntax. Closing tag omitted. + +### Attributes + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescriptionExample
valuenumberThe value of progress to be shown. + +```typescript + +``` + +
minnumberThe minimum value of progress. + +```typescript + +``` + +
maxnumberThe maximum value of progress. + +```typescript + +``` + +
+ + + +### 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. From c95ee6c772c1256070d3c975977204a084818e9f Mon Sep 17 00:00:00 2001 From: Gareth Spencer <25119104+Gareth-Spencer-Genesis@users.noreply.github.com> Date: Thu, 28 Nov 2024 10:10:57 +0000 Subject: [PATCH 2/2] docs: progress bar PTL-1613 --- .../03_client-capabilities/009_presentation/progress.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/001_develop/03_client-capabilities/009_presentation/progress.mdx b/docs/001_develop/03_client-capabilities/009_presentation/progress.mdx index 0c5fe1871..623230bcd 100644 --- a/docs/001_develop/03_client-capabilities/009_presentation/progress.mdx +++ b/docs/001_develop/03_client-capabilities/009_presentation/progress.mdx @@ -19,7 +19,7 @@ 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) +- a visual representation of an unspecified wait time (referred to as an **indeterminate** state). Can be thought of as a loading animation. `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**.