@xplortech/apollo-core 2.5.0 → 2.7.0

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: 'dd246c29fcb1afca4007299380a59b47c0a10c9d', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: 'b6df20888b3891241e52f0f2be14f1eedee2cac6', role: "none" }, h("slot", { key: 'f2f64effe0f58bb33bc983abfaa8b2996714e3b4' })), h("span", { key: '31c15dd296e6dab1d207a84179a4803b7366c1a2', 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: 'd4a4ae7bbf7f8eafc8a44b56c66983303e039d7e' }, h("nav", { key: '8e5decbdce778c1768e3412a59663cd37938f361', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '612620c37a84ad022b9da5cdb884410a4df4dd29', role: "list" }, h("slot", { key: 'ae6cfc4f4e65ba7ca755fa7d9eb3751aae8905ff' })))));
     }
     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',