@xplortech/apollo-core 2.5.0 → 2.6.0

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

@@ -0,0 +1,295 @@
+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: '746ce028bdc07d1a645251aecf524f427d1d695b', 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: 'fec752fe9822b480c2140c9b4520c2fcf71e4077', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: '1ce49bf4735edf985eaf055312cbd0bec8c76e96', icon: this.getIcon(), size: 24 }))), h("div", { key: '9f1b38f386c4151d25ed7ddb4770d39ae915760d', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: 'd1e2301d3174bf9bddec53aec75760c2f18899b8', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: '4d7104cb455bc6f000244c6a66d87fe642488a22', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: 'e3d3dd32d98399be0c1ed702ccc67e65c9d12236', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: '2410dbb9ea6c910e4cb8ace3a40378e10971060d', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: 'db600c5b7e955b466f5928c05dbd9da467317aaa', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: 'fe896518f7f3544a60dd1a125d4139985817c0d2', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: '98453bbd9485027c030f4fdc7af349c0e23aa405', 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',
+        },
     },
 };

package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplBreadcrumbItem {
+export class BreadcrumbItem {
     constructor() {
         this.chevron = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
         <path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
@@ -7,7 +7,7 @@ export class XplBreadcrumbItem {
     `;
     }
     render() {
-        return (h(Host, { key: '0fe6cf2098433d9933fe64337f86e7fd17067745', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: '3f43a1e7569ce739e8097bc5a574c9bad1cebc76', role: "none" }, h("slot", { key: '035487c5c3de89e51227c578b09791e18173470a' })), h("span", { key: '32e76833f80a44c66d136e4f3f3cf7f1be39fdbe', innerHTML: this.chevron })));
+        return (h(Host, { key: 'ea9a888676dc9f7ef3a8ebdb194905d1e4350e2a', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: '3de2d04b006232bcdeca19c8cd300939bdfd160d', role: "none" }, h("slot", { key: 'ce28e3cce466682d576e026978f2f715cc8f2c84' })), h("span", { key: '862d5979885f27e002852d0e933b0003a6a8c9f3', innerHTML: this.chevron })));
     }
     static get is() { return "xpl-breadcrumb-item"; }
 }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
-export class XplBreadcrumbs {
+export class Breadcrumbs {
     render() {
-        return (h(Host, { key: '113bb54d6703b9d1d7dd98adb1d87a53dc56d747' }, h("nav", { key: 'c9903307abfb990b67f042b63463c89213a1de55', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: 'cc49ec0f0356f7d0e3f39ce24294e3ed22728bbe', role: "list" }, h("slot", { key: '910bce9c62ed5d1310559305d3f2b6e21a0f9a0d' })))));
+        return (h(Host, { key: 'b2d3bc77d1cc55f20c15af6b3526c10ee5737d23' }, h("nav", { key: '576a7d126a4df07c275fef5a412b549f5fc7bf45', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '000ab463d675d42a67f3f484fe3d38ac7be1d60e', role: "list" }, h("slot", { key: '5f5895a835a4d572bd5566c1e8a4b9b83373f372' })))));
     }
     static get is() { return "xpl-breadcrumbs"; }
 }

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

@@ -1,122 +1,121 @@
 export default {
     title: 'Components/Button',
     argTypes: {
-        text: {
-            type: { name: 'string', required: false },
-        },
         variant: {
-            options: ['primary', 'secondary', 'subtle'],
-            control: {
-                type: 'select',
-            },
+            options: ['primary', 'secondary', 'tertiary'],
+            control: { type: 'select' },
+            description: `Button style (primary, secondary, tertiary). Subtle is deprecated and is now tertiary.`,
+        },
+        size: {
+            options: ['default', 'xs', 'sm'],
+            control: { type: 'select' },
+            description: 'Button size.',
+        },
+        sentiment: {
+            options: ['neutral', 'negative', 'positive'],
+            control: { type: 'select' },
+            description: 'Semantic intent (color scheme).',
         },
         state: {
-            options: ['neutral', 'success', 'warning'],
-            control: {
-                type: 'select',
-            },
+            table: { disable: true },
+            control: false,
         },
         disabled: {
-            control: {
-                type: 'boolean',
-            },
+            control: { type: 'boolean' },
+            description: 'Disables the button.',
         },
-        size: {
-            options: ['default', 'sm', 'xs'],
-            control: {
-                type: 'select',
-            },
+        isLoading: {
+            control: { type: 'boolean' },
+            description: 'Shows loading spinner and hides content; button is non-interactive.',
         },
         fullWidth: {
-            control: {
-                type: 'boolean',
-            },
+            control: { type: 'boolean' },
+            description: 'Whether the button should be of full width as per parent container.',
+        },
+        type: {
+            options: ['button', 'submit', 'reset'],
+            control: { type: 'select' },
+            description: 'Native button type.',
+        },
+        form: {
+            control: { type: 'text' },
+            description: 'Optional form id to associate (for type="submit"/"reset").',
+        },
+        name: {
+            control: { type: 'text' },
+            description: 'Name attribute for form submission.',
+        },
+        value: {
+            control: { type: 'text' },
+            description: 'Value attribute for form submission.',
         },
         icon: {
-            options: ['none', 'leading', 'trailing'],
-            control: {
-                type: 'select',
-            },
+            control: { type: 'text' },
+            description: 'Icon name from xpl-icon (e.g. coffee, download). Empty = no icon.',
         },
-        link: {
-            control: {
-                type: 'boolean',
-            },
+        iconOnly: {
+            control: { type: 'boolean' },
+            description: 'When true, only the icon is shown (no slot content). Set icon as well.',
+        },
+        iconPosition: {
+            options: ['start', 'end'],
+            control: { type: 'radio' },
+            description: 'Icon position relative to label.',
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Button label (default slot content).',
         },
-        form: { name: 'string', required: false },
     },
 };
-export const Button = ({ variant, size, disabled, fullWidth, state, text, icon, link, form }) => {
-    let attrs = '';
-    if (variant !== 'primary')
-        attrs += ` variant="${variant}"`;
-    if (size !== 'default')
-        attrs += ` size="${size}"`;
-    if (disabled)
-        attrs += ' disabled';
-    if (text === '')
-        attrs += ' icon-only';
-    const iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-coffee"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>`;
-    const innerHtml = (isLink) => {
-        const textBlock = `
-                ${icon === 'leading' ? iconSvg : ''}
-                ${text}
-                ${icon === 'trailing' ? iconSvg : ''}
-            `;
-        return isLink ? `<a href='javascript:;'>${textBlock}</a>` : textBlock;
-    };
-    return `
-        <div style="width: 50vw; text-align: center;">
-            <xpl-button
-                id="123"
-                variant='${variant}'
-                size='${size}'
-                state='${state}'
-                data-test-attribute
-                data-test-attribute-with-value="1"
-                ${attrs}
-                ${link ? 'link' : ''}
-                ${fullWidth ? 'full-width' : ''}
-                ${form ? `form='${form}'` : ''}
-            >
-                ${innerHtml(link)}
-            </xpl-button>
-        </div>
-    `;
-};
-const HtmlButton = ({ variant, size, state, disabled, text, icon, link, fullWidth, form }) => {
-    const iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-coffee"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>`;
-    let className = `xpl-button
-        xpl-button--${size}
-        xpl-button--${state}
-        xpl-button--${variant} `;
-    let attrs = '';
-    if (disabled)
-        attrs += ' disabled';
-    if (fullWidth)
-        className += ' xpl-button--full-width';
-    const innerHtml = (isLink) => {
-        const textBlock = `
-            ${icon === 'leading' ? iconSvg : ''}
-            ${text}
-            ${icon === 'trailing' ? iconSvg : ''}
-        `;
-        return isLink
-            ? `<a href='javascript:;' ${attrs}>${textBlock}</a>`
-            : `<button form="${form}">${textBlock}</button>`;
-    };
-    return `<span class=${className}>${innerHtml(link)}</span>`;
+function buildAttrs(args) {
+    const parts = [];
+    if (args.variant)
+        parts.push(`variant="${args.variant}"`);
+    if (args.size)
+        parts.push(`size="${args.size}"`);
+    if (args.sentiment && args.sentiment !== 'neutral')
+        parts.push(`sentiment="${args.sentiment}"`);
+    if (args.disabled)
+        parts.push('disabled');
+    if (args.isLoading)
+        parts.push('is-loading');
+    if (args.fullWidth)
+        parts.push('full-width');
+    if (args.type)
+        parts.push(`type="${args.type}"`);
+    if (args.form)
+        parts.push(`form="${String(args.form).replace(/"/g, '&quot;')}"`);
+    if (args.name)
+        parts.push(`name="${String(args.name).replace(/"/g, '&quot;')}"`);
+    if (args.value !== undefined && args.value !== '')
+        parts.push(`value="${String(args.value).replace(/"/g, '&quot;')}"`);
+    if (args.iconOnly)
+        parts.push('icon-only');
+    if (args.icon)
+        parts.push(`icon="${String(args.icon).replace(/"/g, '&quot;')}"`);
+    if (args.iconPosition)
+        parts.push(`icon-position="${args.iconPosition}"`);
+    return parts.length ? ` ${parts.join(' ')}` : '';
+}
+export const Button = (args) => {
+    const attrs = buildAttrs(args);
+    const content = args.iconOnly ? '' : args.label === undefined ? 'Button' : String(args.label);
+    const button = `<xpl-button${attrs}>${content}</xpl-button>`;
+    return args.fullWidth ? `<div style="width: 480px;">${button}</div>` : button;
 };
 Button.args = {
-    link: false,
+    label: 'Button',
     variant: 'primary',
     size: 'default',
+    sentiment: 'neutral',
     disabled: false,
-    state: 'neutral',
-    text: 'Get Coffee',
-    icon: 'leading',
-    fullWidth: true,
-    form: '',
+    isLoading: false,
+    fullWidth: false,
+    type: 'button',
+    icon: '',
+    iconOnly: false,
+    iconPosition: 'start',
 };
 Button.parameters = {
     layout: 'centered',
@@ -124,7 +123,12 @@ Button.parameters = {
         render: Button(Button.args),
     },
     html: {
-        render: HtmlButton(Button.args),
+        render: `
+        <div class="xpl-button xpl-button--default xpl-button--primary xpl-button--neutral">
+        <button type="button">
+            Button
+        </button>
+</div>`.trim(),
     },
     design: {
         type: 'figma',