@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -1,128 +1,147 @@
-import { v4 as uuid } from "uuid";
 export default {
     title: 'Components/Avatar',
 };
-const script = ({ id }) => `
-    (function() {
-        const avatar = document.getElementById("${id}");
-        avatar.addEventListener('click', e => e.preventDefault());
-    })();
-`;
-export const Avatar = ({ placeholder, name, size, color, status, link, disabled }) => {
-    const id = uuid();
-    let attrs = '';
-    if (placeholder === '')
-        attrs += ` src="https://placebear.com/128/128"`;
-    if (name !== '')
-        attrs += ` name="${name}"`;
-    if (size !== 'default')
-        attrs += ` size="${size}"`;
-    if (color !== 'secondary')
-        attrs += ` color="${color}"`;
-    if (status !== 'none')
-        attrs += ` status="${status}"`;
-    if (link)
-        attrs += ` href="#"`;
-    if (disabled)
-        attrs += ` disabled`;
-    return `<xpl-avatar id="${id}"${attrs}>${placeholder}</xpl-avatar><script>${script({
-        id,
-    })}</script>`;
+const defaultGroupData = [
+    { name: 'Alex', color: 'green' },
+    { name: 'Jordan', color: 'yellow' },
+    { name: 'Sam', color: 'pink' },
+    { src: 'https://placebear.com/128/128', name: 'D' },
+    { src: 'https://placebear.com/128/128', name: 'E' },
+];
+function statusToBadgeVariant(s) {
+    var _a;
+    const map = {
+        active: 'green',
+        inactive: 'gray',
+        warning: 'red',
+    };
+    return (_a = map[s]) !== null && _a !== void 0 ? _a : s;
+}
+function buildAttrs(args) {
+    var _a;
+    const attrs = [];
+    if (args.variant && args.variant !== 'default') {
+        attrs.push(`variant="${args.variant}"`);
+    }
+    if (args.size) {
+        attrs.push(`size="${args.size}"`);
+    }
+    if (args.color) {
+        attrs.push(`color="${args.color}"`);
+    }
+    if (args.variant === 'group') {
+        const data = JSON.stringify((_a = args.groupData) !== null && _a !== void 0 ? _a : defaultGroupData);
+        attrs.push(`group-data='${data.replace(/'/g, '&#39;')}'`);
+    }
+    else {
+        if (args.src)
+            attrs.push(`src="${args.src}"`);
+        if (args.name)
+            attrs.push(`name="${args.name}"`);
+        if (args.variant === 'with-text' && args.subText) {
+            attrs.push(`sub-text="${args.subText}"`);
+        }
+        if (args.status) {
+            attrs.push(`status="${args.status}"`);
+        }
+        if (args.href)
+            attrs.push('href="https://xplor.com/"');
+        if (args.disabled)
+            attrs.push('disabled');
+    }
+    return attrs.join(' ');
+}
+export const Avatar = (args) => {
+    const attrs = buildAttrs(args);
+    return `<xpl-avatar ${attrs}></xpl-avatar>`;
 };
 Avatar.argTypes = {
-    placeholder: {
-        type: { name: 'string', required: false },
-    },
-    name: {
-        type: { name: 'string', required: false },
+    variant: {
+        options: ['default', 'profile', 'group', 'with-text'],
+        control: { type: 'select' },
     },
     size: {
-        options: ['default', 'md', 'sm'],
-        control: {
-            type: 'select',
-        },
+        options: ['md', 'sm'],
+        control: { type: 'select' },
     },
     color: {
         options: ['green', 'yellow', 'pink', 'primary', 'secondary'],
-        control: {
-            type: 'select',
-        },
+        control: { type: 'select' },
     },
     status: {
-        options: ['none', 'active', 'warning', 'inactive'],
-        control: {
-            type: 'select',
-        },
-    },
-    link: {
-        control: {
-            type: 'boolean',
-        },
-    },
-    disabled: {
-        control: {
-            type: 'boolean',
-        },
+        options: [
+            'purple',
+            'green',
+            'yellow',
+            'orange',
+            'gray',
+            'red',
+            'blue',
+            'active',
+            'warning',
+            'inactive',
+        ],
+        control: { type: 'select' },
+        description: 'Status dot (badge palette). Legacy: active→green, warning→red, inactive→gray (deprecated, removed next major).',
     },
+    src: { control: { type: 'text' } },
+    name: { control: { type: 'text' } },
+    subText: { control: { type: 'text' }, description: 'Secondary text (with-text variant only)' },
+    href: { control: { type: 'boolean' }, description: 'Make avatar a link' },
+    disabled: { control: { type: 'boolean' } },
+    groupData: { control: { type: 'object' }, description: 'Array of items (group variant only)' },
 };
 Avatar.args = {
-    placeholder: '',
-    name: 'Firstname Lastname',
-    size: 'default',
-    color: 'secondary',
-    status: 'none',
-    link: false,
+    variant: 'default',
+    src: 'https://placebear.com/128/128',
+    name: 'Katie Wilson',
+    subText: 'katie01@email.com',
+    size: undefined,
+    color: undefined,
+    status: undefined,
+    href: false,
     disabled: false,
+    groupData: defaultGroupData,
 };
-Avatar.parameters = {
+const commonParameters = {
     layout: 'centered',
-    'web-component': {
-        render: (({ placeholder, name, size, color, status, link, disabled }) => {
-            let attrs = '';
-            if (placeholder === '')
-                attrs += ` src="image.png"`;
-            if (name !== '')
-                attrs += ` name="${name}"`;
-            if (size !== 'default')
-                attrs += ` size="${size}"`;
-            if (color !== 'secondary')
-                attrs += ` color="${color}"`;
-            if (status !== 'none')
-                attrs += ` status="${status}"`;
-            if (link)
-                attrs += ` href="#"`;
-            if (disabled)
-                attrs += ` disabled`;
-            return `<xpl-avatar${attrs}>${placeholder}</xpl-avatar>`;
-        })(Avatar.args),
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6-1394',
     },
-    html: {
-        render: (({ placeholder, name, size, color, status, link, disabled }) => {
-            let className = 'xpl-avatar';
-            if (size)
-                className += ` xpl-avatar--${size}`;
-            if (color)
-                className += ` xpl-avatar--${color}`;
-            let attrs = '';
-            if (link)
-                attrs += ` href="#"`;
-            const tag = link && !disabled ? 'a' : 'div';
-            if (link && disabled) {
-                className += ' xpl-avatar--disabled';
-                attrs = '';
-            }
+};
+Avatar.parameters = Object.assign(Object.assign({}, commonParameters), { 'web-component': {
+        render: Avatar(Avatar.args),
+    }, html: {
+        render: ((args) => {
+            const hasImage = !!args.src;
+            const name = args.name || 'Profile';
+            const placeholder = !hasImage
+                ? args.name
+                    ? (() => {
+                        var _a, _b, _c;
+                        const p = args.name.trim().split(/\s+/).filter(Boolean);
+                        if (p.length === 0)
+                            return '';
+                        if (p.length === 1)
+                            return p[0].slice(0, 3).toUpperCase();
+                        return `${(_a = p[0][0]) !== null && _a !== void 0 ? _a : ''}${p.length > 2 ? ((_b = p[1][0]) !== null && _b !== void 0 ? _b : '') : ''}${(_c = p[p.length - 1][0]) !== null && _c !== void 0 ? _c : ''}`
+                            .slice(0, 3)
+                            .toUpperCase();
+                    })()
+                    : 'KW'
+                : '';
             return `
-                <${tag} class="${className}"${attrs}>
+            <div class="xpl-avatar ${args.color ? `xpl-avatar--${args.color}` : ''} ${args.size ? `xpl-avatar--${args.size}` : ''}">
                 <div>
-                ${!placeholder
-                ? `  <img alt="${name}" src="image.png" />`
-                : `  <div class="xpl-avatar__placeholder">${placeholder}</div>`}${status !== 'none'
-                ? `
-                            <div class="xpl-avatar__dot--${status}"></div>`
+                    ${hasImage
+                ? `<img alt="${name}" src="${args.src}">`
+                : `<div class="xpl-avatar__placeholder" role="img" aria-label="${name}">${placeholder}</div>`}
+                    ${args.status
+                ? `<xpl-badge dot-only bordered variant="${statusToBadgeVariant(args.status)}" aria-hidden="true"></xpl-badge>`
                 : ''}
+                </div>
             </div>
-                </${tag}>
             `;
         })(Avatar.args),
-    },
-};
+    } });

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

@@ -1,16 +1,153 @@
 import { Host, h } from "@stencil/core";
-export class XplAvatar {
+const LEGACY_STATUS_TO_BADGE = {
+    active: 'green',
+    inactive: 'gray',
+    warning: 'red',
+};
+const MAX_GROUP_VISIBLE = 4;
+const MAX_INITIALS = 3;
+function getInitials(name) {
+    var _a, _b, _c;
+    if (!name || !name.trim())
+        return '';
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return '';
+    if (parts.length === 1)
+        return parts[0].slice(0, MAX_INITIALS).toUpperCase();
+    const first = (_a = parts[0][0]) !== null && _a !== void 0 ? _a : '';
+    const last = (_b = parts[parts.length - 1][0]) !== null && _b !== void 0 ? _b : '';
+    const mid = parts.length > 2 ? ((_c = parts[1][0]) !== null && _c !== void 0 ? _c : '') : '';
+    return (first + mid + last).slice(0, MAX_INITIALS).toUpperCase();
+}
+function formatRemainingCount(n) {
+    if (n <= 0)
+        return '';
+    if (n <= 999)
+        return `+${n}`;
+    const rounded = Math.round(n / 500) * 500;
+    const k = rounded / 1000;
+    const label = k % 1 === 0 ? `${k}k` : `${k.toFixed(1)}k`;
+    return `+${label}`;
+}
+export class Avatar {
     constructor() {
+        this.cachedGroupItems = [];
+        this.cachedSlotContent = '';
         this.disabled = false;
     }
+    onGroupDataChange(newValue) {
+        this.cachedGroupItems = Avatar.parseGroupData(newValue);
+    }
+    componentWillLoad() {
+        var _a, _b, _c;
+        this.cachedSlotContent = (_c = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim().slice(0, MAX_INITIALS)) !== null && _c !== void 0 ? _c : '';
+        this.onGroupDataChange(this.groupData);
+    }
+    static parseGroupData(raw) {
+        if (raw == null)
+            return [];
+        if (typeof raw === 'string') {
+            try {
+                const parsed = JSON.parse(raw);
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return Array.isArray(raw) ? raw : [];
+    }
+    get groupItems() {
+        return this.cachedGroupItems;
+    }
+    get statusBadgeVariant() {
+        var _a;
+        const s = this.status;
+        if (s === undefined)
+            return undefined;
+        return ((_a = LEGACY_STATUS_TO_BADGE[s]) !== null && _a !== void 0 ? _a : s);
+    }
+    getPlaceholderText() {
+        if (this.cachedSlotContent.length > 0)
+            return this.cachedSlotContent;
+        return getInitials(this.name);
+    }
+    static getSingleAvatarClasses(size, color, isProfileSize, disabled) {
+        return {
+            'xpl-avatar': true,
+            [`xpl-avatar--${size}`]: !!size,
+            [`xpl-avatar--${color}`]: !!color,
+            'xpl-avatar--profile': !!isProfileSize,
+            'xpl-avatar--disabled': !!disabled,
+        };
+    }
+    getAnchorProps(className) {
+        var _a;
+        return {
+            href: this.href,
+            target: this.target,
+            rel: this.target === '_blank' ? 'noopener noreferrer' : undefined,
+            'aria-label': (_a = this.name) !== null && _a !== void 0 ? _a : 'Profile',
+            class: className,
+        };
+    }
+    static renderAvatarMedia(src, name, placeholderText, ariaLabelFallback, showSlot = true) {
+        if (src) {
+            return h("img", { alt: name !== null && name !== void 0 ? name : '', src: src });
+        }
+        return (h("div", { class: "xpl-avatar__placeholder", role: "img", "aria-label": name !== null && name !== void 0 ? name : ariaLabelFallback }, placeholderText || (showSlot ? h("slot", null) : null)));
+    }
+    renderAvatarMediaWithStatusBadge(wrapperClass) {
+        const placeholderText = this.getPlaceholderText();
+        return (h("div", Object.assign({}, (wrapperClass ? { class: wrapperClass } : {})), Avatar.renderAvatarMedia(this.src, this.name, placeholderText, 'Profile', true), this.statusBadgeVariant && (h("xpl-badge", { dotOnly: true, bordered: true, variant: this.statusBadgeVariant, "aria-hidden": "true" }))));
+    }
+    renderGroupItem(item, index) {
+        const placeholderText = item.name ? getInitials(item.name) : '';
+        return (h("div", { class: {
+                'xpl-avatar-group__item': true,
+                'xpl-avatar': true,
+                [`xpl-avatar--${this.size}`]: !!this.size,
+                [`xpl-avatar--${item.color}`]: !!item.color,
+            } }, h("div", null, Avatar.renderAvatarMedia(item.src, item.name, placeholderText, `Member ${index + 1}`, false))));
+    }
+    renderWithTextContent() {
+        return (h("div", { class: "xpl-avatar__with-text-content" }, h("div", { class: "xpl-avatar__with-text-name" }, this.name), this.subText && h("div", { class: "xpl-avatar__with-text-sub" }, this.subText)));
+    }
     render() {
-        let className = 'xpl-avatar';
-        if (this.size)
-            className += ` xpl-avatar--${this.size}`;
-        if (this.color)
-            className += ` xpl-avatar--${this.color}`;
-        const inner = (h("div", { key: '491c0f4f1ac5c4359f1f0a678e74358c47383412' }, this.src ? (h("img", { alt: this.name, src: this.src })) : (h("div", { class: "xpl-avatar__placeholder" }, h("slot", null))), this.status && h("div", { key: '1eddc940a7126cfdff262a3c1bbe93909663452f', class: `xpl-avatar__dot--${this.status}` })));
-        return (h(Host, { key: '3cde3ed32c5b71deca67701635cac3dfabe8a076' }, this.href && !this.disabled ? (h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (h("div", { class: `${className} xpl-avatar--disabled` }, inner)) : (h("div", { class: className }, inner))));
+        const v = this.variant;
+        if (v === 'group') {
+            const items = this.groupItems;
+            const visible = items.slice(0, MAX_GROUP_VISIBLE);
+            const remaining = items.length - MAX_GROUP_VISIBLE;
+            const showCount = remaining > 0;
+            const countLabel = showCount ? formatRemainingCount(remaining) : '';
+            return (h(Host, null, h("div", { class: {
+                    'xpl-avatar-group': true,
+                    [`xpl-avatar-group--${this.size}`]: !!this.size,
+                }, role: "group", "aria-label": `${items.length} members` }, visible.map((item, i) => (h("div", { key: i, class: "xpl-avatar-group__wrap" }, this.renderGroupItem(item, i)))), showCount && (h("div", { class: {
+                    'xpl-avatar-group__count': true,
+                    [`xpl-avatar-group__count--${this.size}`]: !!this.size,
+                }, "aria-label": `${remaining} more` }, countLabel)))));
+        }
+        if (v === 'with-text') {
+            const avatarBlock = this.renderAvatarMediaWithStatusBadge('xpl-avatar__with-text-avatar');
+            const withTextClasses = {
+                'xpl-avatar': true,
+                'xpl-avatar--with-text': true,
+                [`xpl-avatar--${this.color}`]: !!this.color,
+                'xpl-avatar--disabled': !!this.disabled,
+            };
+            return (h(Host, null, this.href && !this.disabled ? (h("a", Object.assign({}, this.getAnchorProps('xpl-avatar__with-text-link')), h("div", { class: withTextClasses }, avatarBlock, this.renderWithTextContent()))) : (h("div", { class: withTextClasses, "aria-disabled": this.disabled ? 'true' : undefined }, avatarBlock, this.renderWithTextContent()))));
+        }
+        const isProfile = v === 'profile';
+        const singleSize = isProfile && this.size === 'md' ? undefined : this.size;
+        const singleClasses = Avatar.getSingleAvatarClasses(singleSize, this.color, isProfile, this.disabled);
+        const content = this.renderAvatarMediaWithStatusBadge();
+        if (this.href && !this.disabled) {
+            return (h(Host, null, h("a", Object.assign({}, this.getAnchorProps(singleClasses)), content)));
+        }
+        return (h(Host, null, h("div", { class: singleClasses, "aria-disabled": this.disabled ? 'true' : undefined }, content)));
     }
     static get is() { return "xpl-avatar"; }
     static get properties() {
@@ -19,9 +156,15 @@ export class XplAvatar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'green' | 'yellow' | 'pink' | 'primary' | 'secondary'",
+                    "original": "AvatarColor",
                     "resolved": "\"green\" | \"pink\" | \"primary\" | \"secondary\" | \"yellow\"",
-                    "references": {}
+                    "references": {
+                        "AvatarColor": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
+                            "id": "src/components/components/xpl-avatar/xpl-avatar.tsx::AvatarColor"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -54,6 +197,31 @@ export class XplAvatar {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "groupData": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarGroupItem[] | string",
+                    "resolved": "AvatarGroupItem[] | string",
+                    "references": {
+                        "AvatarGroupItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
+                            "id": "src/components/components/xpl-avatar/xpl-avatar.tsx::AvatarGroupItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When `variant` is `group`, data for each face (max 4 visible + overflow count). Each item: { src?, name?, color? }."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-data"
+            },
             "href": {
                 "type": "string",
                 "mutable": false,
@@ -85,7 +253,7 @@ export class XplAvatar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Alt text for the image if there is an image src"
+                    "text": "Alt text for the image; also used for initials when no image and no slot."
                 },
                 "getter": false,
                 "setter": false,
@@ -104,7 +272,7 @@ export class XplAvatar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Size of the avatar"
+                    "text": "Size of the avatar (and of each avatar in a group)."
                 },
                 "getter": false,
                 "setter": false,
@@ -134,20 +302,48 @@ export class XplAvatar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'active' | 'warning' | 'inactive'",
-                    "resolved": "\"active\" | \"inactive\" | \"warning\"",
+                    "original": "AvatarStatus",
+                    "resolved": "\"active\" | \"blue\" | \"gray\" | \"green\" | \"inactive\" | \"orange\" | \"purple\" | \"red\" | \"warning\" | \"yellow\"",
+                    "references": {
+                        "AvatarStatus": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
+                            "id": "src/components/components/xpl-avatar/xpl-avatar.tsx::AvatarStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": ":** `active`, `warning`, and `inactive` still map to `green`, `red`, and `gray` for existing consumers. Prefer palette names; legacy values are scheduled for removal in the next **major** release."
+                        }],
+                    "text": "Shown for the default avatar, `profile`, and `with-text`; not shown when `variant` is `group`.\n**Legacy"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "subText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Color styles for the dot indicator to indicate varied states"
+                    "text": "Secondary text shown when `variant` is `with-text` (e.g. email)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "status"
+                "attribute": "sub-text"
             },
             "target": {
                 "type": "string",
@@ -167,7 +363,45 @@ export class XplAvatar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "target"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarVariant",
+                    "resolved": "\"group\" | \"profile\" | \"with-text\"",
+                    "references": {
+                        "AvatarVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
+                            "id": "src/components/components/xpl-avatar/xpl-avatar.tsx::AvatarVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional layout: `profile` (large profile sizes), `group` (stacked faces + `groupData`; `status` not shown),\n`with-text` (avatar with `name` / `subText` beside it). Omit for the default single avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
             }
         };
     }
+    static get states() {
+        return {
+            "cachedGroupItems": {},
+            "cachedSlotContent": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "groupData",
+                "methodName": "onGroupDataChange"
+            }];
+    }
 }

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

@@ -17,4 +17,8 @@ Backdrop.parameters = {
     html: {
         render: ((_) => `<div class="xpl-backdrop" aria-hidden="true"></div>`)(Backdrop.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=1536-181330&p=f&t=aZipOZlFAFwtMW1r-11',
+    },
 };

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

@@ -1,10 +1,10 @@
 import { Host, h } from "@stencil/core";
-export class XplBackdrop {
+export class Backdrop {
     constructor() {
         this.relative = false;
     }
     render() {
-        return (h(Host, { key: '94479cd370f0304f8ce4d416a7000f851c927da8', class: {
+        return (h(Host, { key: 'ce11926c0ef08f0ae9d77fecfa813f20b6eee229', class: {
                 'xpl-backdrop': true,
                 'xpl-backdrop--fixed': !this.relative,
                 'xpl-backdrop--relative': this.relative,