@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -1,48 +1,91 @@
+const VARIANT_OPTIONS = [
+    'purple',
+    'green',
+    'yellow',
+    'orange',
+    'gray',
+    'red',
+    'blue',
+    'success',
+    'warning',
+    'inactive',
+    'error',
+];
+const commonParameters = {
+    layout: 'centered',
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6-1395&p=f&t=aZipOZlFAFwtMW1r-11',
+    },
+};
 export default {
     title: 'Components/Badge',
     argTypes: {
         variant: {
-            options: ['default', 'success', 'warning', 'inactive', 'error'],
-            control: {
-                type: 'select',
-            },
+            options: [...VARIANT_OPTIONS],
+            control: { type: 'select' },
+        },
+        size: {
+            options: ['default', 'small'],
+            control: { type: 'select' },
+        },
+        shape: {
+            options: ['rounded', 'boxy'],
+            control: { type: 'select' },
         },
         dot: {
-            control: {
-                type: 'boolean',
-            },
+            control: { type: 'boolean' },
+        },
+        dotOnly: {
+            control: { type: 'boolean' },
         },
         text: {
-            type: { name: 'string', required: false },
+            control: { type: 'text' },
+        },
+        bordered: {
+            control: { type: 'boolean' },
         },
     },
 };
-export const Badge = ({ variant, dot, text }) => {
-    let attrs = '';
-    if (variant !== 'default')
-        attrs += ` variant="${variant}"`;
-    if (dot)
-        attrs += ' dot';
-    return `<xpl-badge${attrs}>${text}</xpl-badge>`;
+function badgeAttrs(args) {
+    const { variant, size, shape, dot, dotOnly, bordered } = args;
+    return [
+        variant !== 'purple' ? `variant="${variant}"` : '',
+        `size="${size}"`,
+        `shape="${shape}"`,
+        dot ? 'dot' : '',
+        dotOnly ? 'dot-only' : '',
+        bordered ? 'bordered' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+export const Badge = (args) => {
+    var _a;
+    const attrs = badgeAttrs(args);
+    const text = (_a = args.text) !== null && _a !== void 0 ? _a : '';
+    return `
+        <div style="padding: 2rem;">
+            <xpl-badge ${attrs}>${text}</xpl-badge>
+        </div>
+    `;
 };
 Badge.args = {
-    variant: 'default',
-    dot: false,
+    variant: 'purple',
+    size: 'default',
+    shape: 'rounded',
     text: 'Badge',
+    dot: true,
+    dotOnly: false,
+    bordered: false,
 };
-Badge.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Badge(Badge.args),
-    },
-    html: {
-        render: (({ dot, variant, text }) => {
-            let className = 'xpl-badge';
-            if (dot)
-                className += ' xpl-badge--dot';
-            if (variant !== 'default')
-                className += ` xpl-badge--${variant}`;
-            return `<div class="${className}">${text}</div>`;
-        })(Badge.args),
-    },
-};
+Badge.parameters = Object.assign(Object.assign({}, commonParameters), { 'web-component': {
+        render: (() => {
+            var _a;
+            const args = Object.assign({}, Badge.args);
+            const attrs = badgeAttrs(args);
+            return `<xpl-badge ${attrs}>${(_a = args.text) !== null && _a !== void 0 ? _a : ''}</xpl-badge>`;
+        })(),
+    }, html: {
+        render: `<div class="xpl-badge xpl-badge--dot xpl-badge--purple xpl-badge--size-default xpl-badge--shape-rounded"><span class="xpl-badge__label">Badge</span></div>`,
+    } });

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

@@ -1,16 +1,57 @@
 import { Host, h } from "@stencil/core";
-export class XplBadge {
+const LEGACY_VARIANT_MAP = {
+    success: 'green',
+    warning: 'yellow',
+    inactive: 'gray',
+    error: 'red',
+};
+export class Badge {
+    constructor() {
+        this.bordered = false;
+        this.dotOnly = false;
+        this.shape = 'rounded';
+        this.size = 'default';
+        this.variant = 'purple';
+    }
+    get resolvedVariant() {
+        var _a;
+        return (_a = LEGACY_VARIANT_MAP[this.variant]) !== null && _a !== void 0 ? _a : this.variant;
+    }
     render() {
-        let className = 'xpl-badge';
-        if (this.dot)
-            className += ' xpl-badge--dot';
-        if (this.variant)
-            className += ` xpl-badge--${this.variant}`;
-        return (h(Host, { key: '7a4da384c01815ea2bd1fed3eeaa96da99758de4' }, h("div", { key: '6f955a5ddde98ff183409ffaf65edc946387a6c7', class: className }, h("slot", { key: 'a3cd6f85cf89c5a287eb464973c664d92fa03f40' }))));
+        const className = {
+            'xpl-badge--dot-only': this.dotOnly,
+            'xpl-badge--dot-only-bordered': this.dotOnly && this.bordered,
+            'xpl-badge': !this.dotOnly,
+            'xpl-badge--dot': !this.dotOnly && !!this.dot,
+            [`xpl-badge--${this.resolvedVariant}`]: true,
+            [`xpl-badge--size-${this.size}`]: !!this.size,
+            [`xpl-badge--shape-${this.shape}`]: !this.dotOnly && !!this.shape,
+        };
+        return (h(Host, { key: '6d8b154300f5a676c58d8633c2b5f7514967f764' }, h("div", { key: 'bef0970eb3185b1afb08ece888b63509e69ff15d', class: className }, h("span", { key: '90e51d0f3d74a99268b9a4944a94b6c0096f1ea9', class: "xpl-badge__label" }, h("slot", { key: '5f13f42adbbcfc0698f25687ba27f4bb0c63d5a8' })))));
     }
     static get is() { return "xpl-badge"; }
     static get properties() {
         return {
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether badge shows a bordered ring"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "false"
+            },
             "dot": {
                 "type": "boolean",
                 "mutable": false,
@@ -23,31 +64,98 @@ export class XplBadge {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether badge shows a dot icon before the text"
+                    "text": "Whether badge shows a dot icon before the text (inside the pill)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "dot"
             },
-            "variant": {
-                "type": "string",
+            "dotOnly": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'success' | 'warning' | 'inactive' | 'error'",
-                    "resolved": "\"error\" | \"inactive\" | \"success\" | \"warning\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Color styles to indicate varied states"
+                    "text": "When true, render a compact badge built around the dot.\n- With no children: just a dot (status/dot badge)\n- With children: a small dot badge with the text/number inside"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dot-only",
+                "defaultValue": "false"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rounded' | 'boxy'",
+                    "resolved": "\"boxy\" | \"rounded\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge shape\nrounded (pill) boxy (rounded corners)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'rounded'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'small'",
+                    "resolved": "\"default\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge size\ndefault | small"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeVariantProp",
+                    "resolved": "\"blue\" | \"error\" | \"gray\" | \"green\" | \"inactive\" | \"orange\" | \"purple\" | \"red\" | \"success\" | \"warning\" | \"yellow\"",
+                    "references": {
+                        "BadgeVariantProp": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-badge/xpl-badge.tsx",
+                            "id": "src/components/components/xpl-badge/xpl-badge.tsx::BadgeVariantProp"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge variant (color).\n\nPreferred values: `purple`, `green`, `yellow`, `orange`, `gray`, `red`, `blue`.\n\nThe legacy semantic names `success`, `warning`, `inactive`, and `error` are still\naccepted and map to `green`, `yellow`, `gray`, and `red` respectively. Prefer the\ncolor names for new code."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "variant"
+                "attribute": "variant",
+                "defaultValue": "'purple'"
             }
         };
     }

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

@@ -0,0 +1,64 @@
+const escapeHtmlAttribute = (value) => value
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+export default {
+    title: 'Components/Banner',
+    component: 'xpl-banner',
+    argTypes: {
+        appearance: {
+            options: ['information', 'positive', 'warning', 'error'],
+            control: { type: 'select' },
+        },
+        heading: { control: 'text' },
+        description: { control: 'text' },
+        truncateDesc: { control: 'boolean' },
+        isDismissible: { control: 'boolean' },
+        isSection: { control: 'boolean' },
+        hasIcon: { control: 'boolean' },
+        actionText: { control: 'text' },
+        secondaryActionText: { control: 'text' },
+    },
+};
+const optionalAttr = (name, value) => (value === null || value === void 0 ? void 0 : value.trim()) ? ` ${name}="${escapeHtmlAttribute(value)}"` : '';
+export const Banner = ({ appearance, heading, description, truncateDesc, isDismissible, isSection, hasIcon, actionText, secondaryActionText, }) => `
+    <xpl-banner
+        appearance="${appearance}"
+        truncate-desc="${truncateDesc}"
+        ${optionalAttr('heading', heading)}
+        ${optionalAttr('description', description)}
+        is-dismissible="${isDismissible}"
+        is-section="${isSection}"
+        has-icon="${hasIcon}"
+        action-text="${actionText}"
+        secondary-action-text="${secondaryActionText}"
+    ></xpl-banner>
+`;
+Banner.args = {
+    appearance: 'information',
+    heading: "This is the banner's main message.",
+    description: 'This is an optional message supporting the main banner message.',
+    truncateDesc: false,
+    isDismissible: true,
+    isSection: false,
+    hasIcon: true,
+    actionText: 'Action',
+    secondaryActionText: '',
+};
+Banner.parameters = {
+    layout: 'padded',
+    docs: {
+        description: {
+            story: 'Use `section` to switch to section-banner layout and `hasIcon` to hide/show the leading icon in that layout. Actions render from `actionText` and `secondaryActionText` using `size="xs"`.',
+        },
+    },
+    'web-component': {
+        render: Banner(Banner.args),
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=19320-19572&p=f&t=bkbLW37fKIUtr4Q8-11',
+    },
+};

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

@@ -0,0 +1,296 @@
+import { Host, h } from "@stencil/core";
+export class Banner {
+    constructor() {
+        this.appearance = 'information';
+        this.hasIcon = true;
+        this.isDismissible = true;
+        this.isSection = false;
+        this.truncateDesc = false;
+    }
+    getIcon() {
+        switch (this.appearance) {
+            case 'positive':
+                return 'circle-check';
+            case 'warning':
+                return 'triangle-warning';
+            case 'error':
+                return 'octagon-warning';
+            default:
+                return 'circle-info';
+        }
+    }
+    getActionButtonState() {
+        if (this.isSection) {
+            if (this.appearance === 'positive') {
+                return 'success';
+            }
+            if (this.appearance === 'error') {
+                return 'warning';
+            }
+            return undefined;
+        }
+        return this.appearance === 'error' ? 'warning' : undefined;
+    }
+    getActionButtonVariant() {
+        if (this.isSection)
+            return 'subtle';
+        return this.appearance === 'error' ? 'primary' : 'subtle';
+    }
+    getAriaLabel() {
+        var _a;
+        if (this.isSection) {
+            return ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim()) || 'Section banner';
+        }
+        return {
+            information: 'Information banner',
+            positive: 'Positive banner',
+            warning: 'Warning banner',
+            error: 'Error banner',
+        }[this.appearance];
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const hasAction = !!((_a = this.actionText) === null || _a === void 0 ? void 0 : _a.trim());
+        const hasSecondaryAction = !!((_b = this.secondaryActionText) === null || _b === void 0 ? void 0 : _b.trim());
+        const actionVariant = this.getActionButtonVariant();
+        const actionState = this.getActionButtonState();
+        const isHeadingPresent = !!((_c = this.heading) === null || _c === void 0 ? void 0 : _c.trim());
+        const isDescPresent = !!((_d = this.description) === null || _d === void 0 ? void 0 : _d.trim());
+        return (h(Host, { key: '01e821a96ff2f4f41050a524ed6ec76e8f8ae71c', class: {
+                'xpl-banner': true,
+                'xpl-banner--section': this.isSection,
+                [`xpl-banner--${this.appearance}`]: true,
+                'xpl-banner--truncate-desc': this.truncateDesc,
+                'xpl-banner--no-icon': this.isSection && !this.hasIcon,
+            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (h("div", { key: 'e0b8fc78558cb0feff957deda21e9a6009a41ebc', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: 'b1ad22088243b609c67275091a6b7ec0f5bfcd2b', icon: this.getIcon(), size: 24 }))), h("div", { key: '9ae85de66f2092d2f689e881ebf5cb28b442a804', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: '5a4a146c870f4c12abe4a5ef1e5d7aa51d8e7507', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: '115e1349f08a077a898556174c7f14c22e43eb8c', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: 'd2ebd4a9f6bf5902958c071a476da8b5b2888c5c', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: '763ce0af40d4a9a5d62f18ee08085a8455819779', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: 'd59e222b9eb5d766953d26609a48366a32499814', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: 'ec7d24375a62f20c7309d7b49d88f6db1eb2a891', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: 'f45280a420a3556100cd0ed48c39124d400becd9', icon: "xmark", size: 24, "aria-hidden": "true" })))));
+    }
+    static get is() { return "xpl-banner"; }
+    static get properties() {
+        return {
+            "actionText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary action label. When provided, an action button is rendered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-text"
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'information' | 'positive' | 'warning' | 'error'",
+                    "resolved": "\"error\" | \"information\" | \"positive\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visual appearance and semantic meaning of the banner.\nThese values map to messaging background/border token sets in `banner.css`.\nBanner icons use `--xpl-icon-default`, except `error` which uses inverse icon/text\ntokens for contrast on dark backgrounds."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "appearance",
+                "defaultValue": "'information'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional supporting message shown after the heading.\nDescription text uses `--xpl-text-default`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "hasIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to render the leading icon in section layout.\nIgnored in bar layout \u2014 bar banners always show the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-icon",
+                "defaultValue": "true"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary banner message shown with stronger title typography."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "isDismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the trailing dismiss control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-dismissible",
+                "defaultValue": "true"
+            },
+            "isSection": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the section-style banner layout when true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-section",
+                "defaultValue": "false"
+            },
+            "secondaryActionText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary action label. When provided, a second action button is rendered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-action-text"
+            },
+            "truncateDesc": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, `description` is constrained to one line with ellipsis so banner height stays stable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "truncate-desc",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "action",
+                "name": "action",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the primary action is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dismiss",
+                "name": "dismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dismiss button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "secondaryAction",
+                "name": "secondaryAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the secondary action is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -126,5 +126,9 @@ Breadcrumbs.parameters = {
                 </ol>
             </nav>
         `)(Breadcrumbs.args),
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=1536-178167&p=f&t=aZipOZlFAFwtMW1r-11',
+        },
     },
 };