[minor] add toniq-progress element

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.1.3",
+    "version": "16.2.0",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

packages/design-system/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.1.3",
+    "version": "16.2.0",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

packages/design-system/src/element-book/all-element-book-entries.ts

@@ -14,6 +14,7 @@ import {toniqIconBookPage} from '../elements/toniq-icon/toniq-icon.element.book'
 import {toniqInputPage} from '../elements/toniq-input/toniq-input.element.book';
 import {toniqLoadingBookPage} from '../elements/toniq-loading/toniq-loading.element.book';
 import {toniqMiddleEllipsisPage} from '../elements/toniq-middle-ellipsis/toniq-middle-ellipsis.element.book';
+import {toniqProgressBookPage} from '../elements/toniq-progress/toniq-progress.element.book';
 import {toniqRadioGroupPage} from '../elements/toniq-radio-group/toniq-radio-group.element.book';
 import {toniqSliderPage} from '../elements/toniq-slider/toniq-slider.element.book';
 import {toniqToggleButtonBookPage} from '../elements/toniq-toggle-button/toniq-toggle-button.element.book';
@@ -54,6 +55,7 @@ const childPages = [
     toniqInputPage,
     toniqLoadingBookPage,
     toniqMiddleEllipsisPage,
+    toniqProgressBookPage,
     toniqRadioGroupPage,
     toniqSliderPage,
     toniqToggleButtonBookPage,

packages/design-system/src/elements/index.ts

@@ -18,6 +18,7 @@ export * from './toniq-input/toniq-input.element';
 export * from './toniq-loading/toniq-loading.element';
 export * from './toniq-middle-ellipsis/toniq-middle-ellipsis.element';
 export * from './toniq-pagination/toniq-pagination.element';
+export * from './toniq-progress/toniq-progress.element';
 export * from './toniq-radio-group/toniq-radio-group.element';
 export * from './toniq-slider/toniq-slider.element';
 export * from './toniq-toggle-button/toniq-toggle-button.element';

packages/design-system/src/elements/toniq-progress/toniq-progress.element.book.ts

@@ -0,0 +1,64 @@
+import {defineBookPage} from 'element-book';
+import {CSSResult, css, html} from 'element-vir';
+import {elementsBookPage} from '../../element-book/book-pages/elements.book';
+import {ToniqProgress} from './toniq-progress.element';
+
+export const toniqProgressBookPage = defineBookPage({
+    title: ToniqProgress.tagName,
+    parent: elementsBookPage,
+    elementExamplesCallback({defineExample}) {
+        const examples: ReadonlyArray<
+            Readonly<
+                {
+                    title: string;
+                    styles?: CSSResult;
+                } & typeof ToniqProgress.inputsType
+            >
+        > = [
+            {
+                title: 'halfway',
+                percent: 50,
+            },
+            {
+                title: 'nothing',
+                percent: 0,
+            },
+            {
+                title: 'complete',
+                percent: 100,
+            },
+            {
+                title: 'custom height',
+                styles: css`
+                ${ToniqProgress} {
+                    height: 32px;
+                }
+                :`,
+                percent: 75,
+            },
+            {
+                title: 'custom width',
+                styles: css`
+                ${ToniqProgress} {
+                    width: 200%;
+                }
+                :`,
+                percent: 75,
+            },
+        ];
+
+        examples.forEach((example) => {
+            defineExample({
+                title: example.title,
+                styles: example.styles,
+                renderCallback() {
+                    return html`
+                        <${ToniqProgress.assign({
+                            percent: example.percent,
+                        })}></${ToniqProgress}>
+                    `;
+                },
+            });
+        });
+    },
+});

packages/design-system/src/elements/toniq-progress/toniq-progress.element.ts

@@ -0,0 +1,61 @@
+import {clamp} from '@augment-vir/common';
+import {css, html, nothing} from 'element-vir';
+import {setCssVarValue} from 'lit-css-vars';
+import {toniqColors} from '../../styles/colors';
+import {defineToniqElement} from '../define-toniq-element';
+
+export const ToniqProgress = defineToniqElement<{
+    /**
+     * From 0-100 inclusive. Any values outside of that range will be clamped. Fractional values are
+     * accepted.
+     */
+    percent: number;
+}>()({
+    tagName: 'toniq-progress',
+    cssVars: {
+        'toniq-progress-width': '0%',
+    },
+    styles: ({cssVars}) => css`
+        :host {
+            position: relative;
+            width: 100%;
+            display: inline-block;
+            background: ${toniqColors.accentSecondary.backgroundColor};
+            height: 8px;
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        .progress {
+            position: absolute;
+            height: inherit;
+            border-radius: inherit;
+            left: 0;
+            top: 0;
+            width: ${cssVars['toniq-progress-width'].value};
+            background: ${toniqColors.pageInteraction.foregroundColor};
+        }
+    `,
+    renderCallback({inputs, cssVars, host}) {
+        const clampedPercent = clamp({
+            value: inputs.percent,
+            max: 100,
+            min: 0,
+        });
+        const progressPercentString = `${clampedPercent}%`;
+        setCssVarValue({
+            forCssVar: cssVars['toniq-progress-width'],
+            onElement: host,
+            toValue: progressPercentString,
+        });
+
+        host.setAttribute('title', `${progressPercentString} finished`);
+
+        if (clampedPercent) {
+            return html`
+                <div class="progress"></div>
+            `;
+        } else {
+            return nothing;
+        }
+    },
+});

packages/native-elements-test/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.1.3",
+    "version": "16.2.0",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

packages/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.1.3",
+    "version": "16.2.0",
     "private": true,
     "scripts": {
         "compile": "virmator compile",