@xplortech/apollo-core 2.4.3 → 2.6.0

package/dist/collection/components/xpl-progress-bar/progress-bar.stories.js

@@ -0,0 +1,96 @@
+export default {
+    title: 'Components/Progress Bar',
+    argTypes: {
+        label: {
+            type: { name: 'string', required: false },
+            description: 'The label text displayed above the progress bar',
+        },
+        helperText: {
+            type: { name: 'string', required: false },
+            description: 'The helper text displayed below the progress bar (recommended for error state)',
+        },
+        max: {
+            control: { type: 'number' },
+            description: 'The maximum value of the progress (mirrors native <progress> max attribute)',
+        },
+        value: {
+            control: { type: 'range', min: 0, max: 100, step: 1 },
+            description: 'The current value of the progress (mirrors native <progress> value attribute). Not used for indeterminate variant.',
+        },
+        size: {
+            options: ['sm', 'lg'],
+            control: { type: 'select' },
+            description: 'The size of the progress bar height: sm = 4px, lg = 6px',
+        },
+        variant: {
+            options: ['default', 'success', 'error', 'indeterminate'],
+            control: { type: 'select' },
+            description: 'The visual variant of the progress bar',
+        },
+    },
+};
+export const ProgressBar = (args) => {
+    let attrs = '';
+    if (args.label)
+        attrs += ` label="${args.label}"`;
+    if (args.helperText)
+        attrs += ` helper-text="${args.helperText}"`;
+    if (args.max !== 100)
+        attrs += ` max="${args.max}"`;
+    if (args.value !== undefined && args.variant !== 'indeterminate')
+        attrs += ` value="${args.value}"`;
+    if (args.size !== 'lg')
+        attrs += ` size="${args.size}"`;
+    if (args.variant !== 'default')
+        attrs += ` variant="${args.variant}"`;
+    return `
+        <div style="display: flex; flex-direction: column; gap: var(--xpl-space-48); width: 50vw;">
+            <xpl-progress-bar${attrs}></xpl-progress-bar>
+        </div>
+    `;
+};
+ProgressBar.args = {
+    label: 'Uploading file...',
+    helperText: '2.4 MB of 5 MB',
+    max: 100,
+    value: 45,
+    size: 'lg',
+    variant: 'default',
+};
+ProgressBar.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: ProgressBar(ProgressBar.args),
+    },
+    html: {
+        render: (({ label, helperText, max, value, size, variant }) => {
+            const labelHtml = label
+                ? `<div class="xpl-progress-bar__header"><div class="xpl-progress-bar__label">${label}</div></div>`
+                : '';
+            const helperHtml = helperText
+                ? `<div class="xpl-progress-bar__helper">${helperText}</div>`
+                : '';
+            const maxValue = max !== null && max !== void 0 ? max : 100;
+            const currentValue = variant !== 'indeterminate' && value !== undefined ? value : maxValue;
+            const className = `xpl-progress-bar xpl-progress-bar--${size} xpl-progress-bar--${variant}`;
+            const progressHtml = variant === 'indeterminate'
+                ? `<div class="xpl-progress-bar__track xpl-progress-bar__track--indeterminate" role="progressbar" aria-label="${label || 'Progress'}"><div class="xpl-progress-bar__indeterminate"></div></div>`
+                : `<progress class="xpl-progress-bar__progress" value="${currentValue}" max="${maxValue}" aria-label="${label || 'Progress'}"></progress>`;
+            return `
+                <div class="${className}">
+                    <div class="xpl-progress-bar__wrapper">
+                        ${labelHtml}
+                        <div class="xpl-progress-bar__row">
+                            ${progressHtml}
+                        </div>
+                        ${helperHtml}
+                    </div>
+                </div>
+            `;
+        })(ProgressBar.args),
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=12841-9237',
+    },
+};

package/dist/collection/components/xpl-progress-bar/xpl-progress-bar.js

@@ -0,0 +1,158 @@
+import { Host, h } from "@stencil/core";
+export class ProgressBar {
+    constructor() {
+        this.max = 100;
+        this.size = 'lg';
+        this.value = 0;
+        this.variant = 'default';
+    }
+    get clampedValue() {
+        return Math.max(0, Math.min(this.max, this.value));
+    }
+    get isComplete() {
+        return this.value >= this.max && this.variant === 'default';
+    }
+    get isError() {
+        return this.variant === 'error';
+    }
+    get isSuccess() {
+        return this.variant === 'success' || this.isComplete;
+    }
+    get showStatusIcon() {
+        return this.isSuccess || this.isError;
+    }
+    get isIndeterminate() {
+        return this.variant === 'indeterminate';
+    }
+    render() {
+        return (h(Host, { key: 'e07eee1ea1614d68190290be2ad16df663337215', class: {
+                'xpl-progress-bar': true,
+                [`xpl-progress-bar--${this.size}`]: true,
+                [`xpl-progress-bar--${this.variant}`]: true,
+                'xpl-progress-bar--complete': this.isComplete,
+            } }, h("div", { key: 'e46025a05d42e0c275444f1057c8ee9827ce4d15', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: 'afc59b2fb32d9ac60afda9a40544121da045b237', class: "xpl-progress-bar__header" }, this.label && h("div", { key: '39d7add736c856c43bdecb61d083cf537e4da454', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: '4e54b04a314136cdae066f7b48a8449b20a8daff', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: '6950cefcd5e90be2362201ae830bae73293b275a', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, h("div", { class: "xpl-progress-bar__indeterminate" }))) : (h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (h("div", { key: 'e56af1b27ff6201a1eaa5cca7160c963a0fca529', class: "xpl-progress-bar__helper" }, this.helperText)))));
+    }
+    static get is() { return "xpl-progress-bar"; }
+    static get properties() {
+        return {
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The helper text displayed below the progress bar (recommended for error state)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text displayed above the progress bar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum value of the progress (mirrors native <progress> max attribute)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'lg'",
+                    "resolved": "\"lg\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the progress bar height: sm = 4px, lg = 6px"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value of the progress (mirrors native <progress> value attribute)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'success' | 'error' | 'indeterminate'",
+                    "resolved": "\"default\" | \"error\" | \"indeterminate\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual variant of the progress bar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

package/dist/collection/components/xpl-radio/radio.stories.js

@@ -88,4 +88,8 @@ Radio.parameters = {
 </div>`;
         })(Radio.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=3915-91032&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };

package/dist/collection/components/xpl-radio/xpl-radio.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { v4 as uuid } from "uuid";
-export class XplRadio {
+export class Radio {
     constructor() {
         this.id = uuid();
         this.onChange = (event) => {
@@ -14,14 +14,14 @@ export class XplRadio {
         };
     }
     render() {
-        return (h(Host, { key: 'cc375ac47add5a4fddc8744186d1600431cb998d', class: {
+        return (h(Host, { key: 'c5b11522a1b9b21adf40318ff7f74f2ff76aa3c2', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: 'ccc9a14ec86cf5d455558298f367dd1eb2835399', class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: '5c0661fded4424d6b758ef55953cfde8da1f2af5', class: {
+            } }, h("input", { key: '950a769704369e2084834876242cb44d1609a166', class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: '09f34b6e4a60d2c63e94734599b46f2ce1fc9a90', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: '9e203d6010f049c74294f543c75b091c129a323d' }), this.description && (h("small", { key: '15447fa65dff82fda1cb7981bbf3160b7f526c53', class: {
+            }, htmlFor: this.id }, h("slot", { key: '2552eb83722cdf2e4b9d1a691fe2712d16e0fb84' }), this.description && (h("small", { key: '3bc230b6c18922aee661033b1ea5a1bc72384aac', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));

package/dist/collection/components/xpl-secondary-nav/xpl-secondary-nav.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
-export class XplSecondaryNav {
+export class SecondaryNav {
     render() {
-        return (h(Host, { key: '86273edf300aa07f9d95d602eba079a3e5585d63', class: "xpl-secondary-nav" }, h("nav", { key: '1756c028fe605e00683b6fa07e7235a6e18c1f68', "aria-label": "Secondary Nav" }, h("slot", { key: '74d5e209c31456877c40267d16d4020faac7ca33' }))));
+        return (h(Host, { key: '3b015722c6fb8cf3cafb0c85054fab81a8362209', class: "xpl-secondary-nav" }, h("nav", { key: 'ffc4e57cc2ebdf792196477ff01d6b1f03da567f', "aria-label": "Secondary Nav" }, h("slot", { key: 'b15b8bcadf7faa41f155e11dcd9f2e11231efbc4' }))));
     }
     static get is() { return "xpl-secondary-nav"; }
 }

package/dist/collection/components/xpl-select/select.stories.js

@@ -196,6 +196,10 @@ Select.parameters = {
         render: ((_) => {
         })(Select.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6-1396&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };
 export const SelectWValues = ({ label, description, disabled, error, errorMessage, mode, truncate, customDisplayValue, customDisplayValueContent, selectedValues, selectIcon, preventDefaultTriggerDropdown, }) => {
     const scriptSelectedValues = mode === 'multi' ? selectedValues.split(',') : selectedValues;

package/dist/collection/components/xpl-select/xpl-select.js

@@ -12,7 +12,7 @@ function getDisplayValue(choice) {
 function flattenChoices(choices) {
     return choices.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
 }
-export class XplSelect {
+export class Select {
     constructor() {
         this.choices = [];
         this.selectIcon = 'chevron-down';
@@ -222,21 +222,21 @@ export class XplSelect {
             this.truncate &&
             !this.customDisplayValue;
         const truncatedText = `+ ${Math.abs(this.choicesState.filter((a) => a.isSelected).length - this.visibleChoices)} more`;
-        return (h(Host, { key: 'dd41611f279bfdf8ca7bf3673ff0e4421c9adbd5', class: {
+        return (h(Host, { key: '5c6008a31abe121ac946c9c5fc23721d28df86eb', class: {
                 'xpl-select': true,
                 'xpl-select--disabled': this.disabled,
                 'xpl-select--no-truncate': !this.truncate,
                 [(_c = this.classNames) !== null && _c !== void 0 ? _c : '']: !!this.classNames,
             }, onKeyDown: this.handleTabKeyDown, ref: (el) => {
                 this.container = el;
-            } }, this.renderLabel(), h("div", { key: '8579aece1497e108177fab248d7dd0bcd4baadf3', class: {
+            } }, this.renderLabel(), h("div", { key: 'f2de31e5b84fe2fdffa1e2b35ec611a4842a8323', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': ((_d = this.error) === null || _d === void 0 ? void 0 : _d.length) >= 0,
-            } }, h("div", { key: '7a2f274cffcbb2c97acd96244290494568fdbbc9', class: "xpl-input-wrapper" }, h("button", { key: '332b3c6a714bb6f30a20f42e129b2f1ef78dda2d', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
+            } }, h("div", { key: '8a2192b28d75c56261f7a104ad02c76d49fb8787', class: "xpl-input-wrapper" }, h("button", { key: 'bb881153cd7cdbf4e43c40a96dfba8d95ca94aa6', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
                 e.preventDefault();
                 this.handleDropdownTrigger();
-            }, type: "button" }, h("div", { key: 'ecb836e8d199e36d455f477fd9be38103b6e2ac6', class: {
+            }, type: "button" }, h("div", { key: '1518f2ef57c7eeaa0fedc1832222a0345c4c46ab', class: {
                 'xpl-select-value': true,
                 'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
                 'has-value': this.value.length > 0,
@@ -256,7 +256,7 @@ export class XplSelect {
                 return this.renderSelectedTags();
             }
             return this.placeholder;
-        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: '46d0759da7e730e00d6eb4839ba2eda1e711dd59', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: '4ac71c53ae935940c5de9d4c65034b0bf312da79', ref: (el) => {
+        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: 'f37a879df93e5078a4b1a4950291a3bf65d81f43', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: '920d7d4e1916613b0056e6da80e055e7cf94fba6', ref: (el) => {
                 this.dropdown = el;
             }, isOpen: this.dropdownOpenState, options: this.choicesState, selectedValues: this.selectedValues, mode: this.mode, triggerId: this.id, update: (_e, { component }) => {
                 const { options } = component;
@@ -265,7 +265,7 @@ export class XplSelect {
                 }
             }, onIsOpenChange: (e) => {
                 this.dropdownOpenState = e.detail;
-            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true })), this.renderError()), h("input", { key: 'd80e5ab1219e98130e4c38264a711839d4d9668f', type: "hidden", name: this.name, value: this.value })));
+            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true })), this.renderError()), h("input", { key: '0137e17e78152e2ebc600156896df9a4c691f18a', type: "hidden", name: this.name, value: this.value })));
     }
     static get is() { return "xpl-select"; }
     static get properties() {
@@ -299,21 +299,15 @@ export class XplSelect {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IconName",
-                    "resolved": "\"ai\" | \"alarm-clock\" | \"alert-circle\" | \"alert-hex\" | \"alert-triangle\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-right\" | \"award\" | \"bell\" | \"bell-slash\" | \"bookmark\" | \"bookmark-slash\" | \"briefcase\" | \"calendar\" | \"calendar-month\" | \"calendar-week\" | \"camera\" | \"cash-register\" | \"check\" | \"check-circle\" | \"check-circle-fill\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"chevrons-down\" | \"chevrons-left\" | \"chevrons-right\" | \"chevrons-up\" | \"circle-slash\" | \"clipboard\" | \"clock\" | \"code-square\" | \"comment\" | \"comment-alt\" | \"comment-check\" | \"comment-closed\" | \"comment-discussion\" | \"comment-minus\" | \"comment-plus\" | \"comment-x\" | \"compass\" | \"credit-card\" | \"dash\" | \"dollar-bill\" | \"dollar-sign\" | \"download\" | \"drag\" | \"dumbbells\" | \"duplicate\" | \"edit\" | \"expand\" | \"eye\" | \"eye-closed\" | \"eye-droper\" | \"file\" | \"flag\" | \"folder\" | \"gear\" | \"gift\" | \"globe\" | \"graph\" | \"graph-bar\" | \"grid\" | \"heart\" | \"home\" | \"image\" | \"info\" | \"kebab-horizontal\" | \"kebab-vertical\" | \"key\" | \"law\" | \"layers\" | \"left-align\" | \"light-bulb\" | \"line\" | \"link\" | \"link-external\" | \"list-ordered\" | \"list-unordered\" | \"loader\" | \"location\" | \"lock\" | \"mail\" | \"mail-check\" | \"mail-closed\" | \"mail-minus\" | \"mail-plus\" | \"mail-x\" | \"map\" | \"megaphone\" | \"minus-circle\" | \"moon\" | \"navigation\" | \"organization\" | \"package\" | \"paperclip\" | \"pencil\" | \"people\" | \"percent\" | \"person\" | \"person-add\" | \"person-circle\" | \"phone\" | \"phone-minus\" | \"phone-pause\" | \"phone-plus\" | \"phone-slash\" | \"phone-x\" | \"pie-chart\" | \"pin\" | \"pin-circle\" | \"pin-circle-filled\" | \"pin-filled\" | \"play\" | \"plus\" | \"plus-circle\" | \"printer\" | \"question\" | \"refresh-cw\" | \"repeat\" | \"right-align\" | \"rocket\" | \"rotate-ccw\" | \"rotate-cw\" | \"save\" | \"search\" | \"share\" | \"shopping-bag\" | \"shopping-cart\" | \"sign-in\" | \"sign-out\" | \"signature\" | \"sliders-h\" | \"sliders-v\" | \"sort\" | \"star\" | \"star-fill\" | \"star-half-fill\" | \"sun\" | \"tag\" | \"three-bars\" | \"time-reverse\" | \"tools\" | \"trashcan\" | \"triangle-down\" | \"triangle-left\" | \"triangle-right\" | \"triangle-up\" | \"trophy\" | \"unlock\" | \"upload\" | \"video-camera\" | \"x\" | \"x-circle\" | \"x-circle-fill\" | \"zoom-in\" | \"zoom-out\"",
-                    "references": {
-                        "IconName": {
-                            "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-select/xpl-select.tsx",
-                            "id": "src/components/components/xpl-select/xpl-select.tsx::IconName"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The icon to display in the select trigger button."
+                    "text": "The icon to display in the select trigger button.\n\nSee [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names."
                 },
                 "getter": false,
                 "setter": false,