@xplortech/apollo-core 2.12.0 → 3.0.0

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

@@ -1,157 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-export default {
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-    title: 'Components/Avatar',
-};
-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) {
-    const map = {
-        active: 'green',
-        inactive: 'gray',
-        warning: 'red',
-    };
-    return map[s] ?? s;
-}
-function buildAttrs(args) {
-    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(args.groupData ?? defaultGroupData);
-        attrs.push(`group-data='${data.replace(/'/g, ''')}'`);
-    }
-    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 = {
-    variant: {
-        options: ['default', 'profile', 'group', 'with-text'],
-        control: { type: 'select' },
-    },
-    size: {
-        options: ['md', 'sm'],
-        control: { type: 'select' },
-    },
-    color: {
-        options: ['green', 'yellow', 'pink', 'primary', 'secondary'],
-        control: { type: 'select' },
-    },
-    status: {
-        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 = {
-    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,
-};
-const commonParameters = {
-    layout: 'centered',
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6-1394',
-    },
-};
-Avatar.parameters = {
-    ...commonParameters,
-    'web-component': {
-        render: Avatar(Avatar.args),
-    },
-    html: {
-        render: ((args) => {
-            const hasImage = !!args.src;
-            const name = args.name || 'Profile';
-            const placeholder = !hasImage
-                ? args.name
-                    ? (() => {
-                        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 `${p[0][0] ?? ''}${p.length > 2 ? (p[1][0] ?? '') : ''}${p[p.length - 1][0] ?? ''}`
-                            .slice(0, 3)
-                            .toUpperCase();
-                    })()
-                    : 'KW'
-                : '';
-            return `
-            <div class="xpl-avatar ${args.color ? `xpl-avatar--${args.color}` : ''} ${args.size ? `xpl-avatar--${args.size}` : ''}">
-                <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>
-            `;
-        })(Avatar.args),
-    },
-};

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

@@ -1,38 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-export default {
-    title: 'Components/Backdrop',
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-};
-const content = `
-    <div class="xpl-content-area">
-        <h2>Backdrop</h2>
-        <p>
-            The backdrop adds a translucent scrim over the page to focus attention
-            on an active dialog such as a modal or slide-out panel.
-        </p>
-    </div>
-`;
-export const Backdrop = () => `
-    ${content}
-    <xpl-backdrop></xpl-backdrop>
-`;
-Backdrop.args = {};
-Backdrop.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: ((_) => `
-            ${content}
-            <xpl-backdrop></xpl-backdrop>
-        `)(Backdrop.args),
-    },
-    html: {
-        render: ((_) => `<div class="xpl-backdrop xpl-backdrop--fixed" 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-badge/badge.stories.js

@@ -1,104 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-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 {
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-    title: 'Components/Badge',
-    component: 'xpl-badge',
-    argTypes: {
-        variant: {
-            options: [...VARIANT_OPTIONS],
-            control: { type: 'select' },
-        },
-        size: {
-            options: ['default', 'small'],
-            control: { type: 'select' },
-        },
-        shape: {
-            options: ['rounded', 'boxy'],
-            control: { type: 'select' },
-        },
-        dot: {
-            control: { type: 'boolean' },
-        },
-        dotOnly: {
-            control: { type: 'boolean' },
-        },
-        text: {
-            control: { type: 'text' },
-        },
-        bordered: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-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) => {
-    const attrs = badgeAttrs(args);
-    const text = args.text ?? '';
-    return `
-        <div style="padding: 2rem;">
-            <xpl-badge ${attrs}>${text}</xpl-badge>
-        </div>
-    `;
-};
-Badge.args = {
-    variant: 'purple',
-    size: 'default',
-    shape: 'rounded',
-    text: 'Badge',
-    dot: true,
-    dotOnly: false,
-    bordered: false,
-};
-Badge.parameters = {
-    ...commonParameters,
-    htmlSnippet: { mode: 'auto' },
-    'web-component': {
-        render: (() => {
-            const args = { ...Badge.args };
-            const attrs = badgeAttrs(args);
-            return `<xpl-badge ${attrs}>${args.text ?? ''}</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-banner/banner.stories.js

@@ -1,69 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-const escapeHtmlAttribute = (value) => value
-    .replace(/&/g, '&')
-    .replace(/"/g, '"')
-    .replace(/'/g, ''')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-export default {
-    title: 'Components/Banner',
-    component: 'xpl-banner',
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    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?.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-breadcrumbs/breadcrumbs.stories.js

@@ -1,139 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-export default {
-    title: 'Components/Navigation/Breadcrumbs',
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    argTypes: {
-        items: {
-            options: [1, 2, 3],
-            control: {
-                type: 'select',
-            },
-        },
-        first: {
-            type: { name: 'string', required: false },
-        },
-        second: {
-            type: { name: 'string', required: false },
-        },
-        third: {
-            type: { name: 'string', required: false },
-        },
-    },
-};
-export const Breadcrumbs = ({ first, second, third, items }) => {
-    const slotMap = {
-        0: first,
-        1: second,
-        2: third,
-    };
-    const breadcrumbItems = Array.from({ length: items })
-        .map((_u, i) => `<xpl-breadcrumb-item>
-            ${slotMap[i]}
-        </xpl-breadcrumb-item>`)
-        .join('\n');
-    return `
-        <xpl-breadcrumbs>
-            ${breadcrumbItems}
-        </xpl-breadcrumbs>
-    `;
-};
-Breadcrumbs.args = {
-    first: '<a href="javascript:;">Locations</a>',
-    second: '<a href="javascript:;">Dupont Circle</a>',
-    third: '<a href="javascript:;">Class A</a>',
-    items: 3,
-};
-Breadcrumbs.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: (({ first, second, third, items }) => {
-            const slotMap = {
-                0: first,
-                1: second,
-                2: third,
-            };
-            const breadcrumbItems = Array.from({ length: items })
-                .map((_u, i) => `<xpl-breadcrumb-item>
-                    ${slotMap[i]}
-                </xpl-breadcrumb-item>`)
-                .join('\n');
-            return `
-                <xpl-breadcrumbs>
-                    ${breadcrumbItems}
-                </xpl-breadcrumbs>
-            `;
-        })(Breadcrumbs.args),
-    },
-    html: {
-        render: ((_) => `
-            <nav class="xpl-breadcrumbs" aria-label="Breadcrumb">
-                <ol role="list">
-                    <li class="xpl-breadcrumb-item">
-                        <a href="javascript:;">Locations</a>
-                        <span
-                            ><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></svg
-                        ></span>
-                    </li>
-                    <li class="xpl-breadcrumb-item">
-                        <a href="javascript:;">Dupont Circle</a>
-                        <span
-                            ><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></svg
-                        ></span>
-                    </li>
-                    <li class="xpl-breadcrumb-item" aria-current=page>
-                        <a href="javascript:;">Class A</a>
-                        <span
-                            ><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></svg
-                        ></span>
-                    </li>
-                </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-button/button.stories.js

@@ -1,144 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-export default {
-    title: 'Components/Button',
-    component: 'xpl-button',
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    argTypes: {
-        variant: {
-            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: {
-            table: { disable: true },
-            control: false,
-        },
-        disabled: {
-            control: { type: 'boolean' },
-            description: 'Disables the button.',
-        },
-        isLoading: {
-            control: { type: 'boolean' },
-            description: 'Shows loading spinner and hides content; button is non-interactive.',
-        },
-        fullWidth: {
-            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: {
-            control: { type: 'text' },
-            description: 'Icon name from xpl-icon (e.g. coffee, download). Empty = no icon.',
-        },
-        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).',
-        },
-    },
-};
-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, '"')}"`);
-    if (args.name)
-        parts.push(`name="${String(args.name).replace(/"/g, '"')}"`);
-    if (args.value !== undefined && args.value !== '')
-        parts.push(`value="${String(args.value).replace(/"/g, '"')}"`);
-    if (args.iconOnly)
-        parts.push('icon-only');
-    if (args.icon)
-        parts.push(`icon="${String(args.icon).replace(/"/g, '"')}"`);
-    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 = {
-    label: 'Button',
-    variant: 'primary',
-    size: 'default',
-    sentiment: 'neutral',
-    disabled: false,
-    isLoading: false,
-    fullWidth: false,
-    type: 'button',
-    icon: '',
-    iconOnly: false,
-    iconPosition: 'start',
-};
-Button.parameters = {
-    layout: 'centered',
-    htmlSnippet: { mode: 'auto' },
-    'web-component': {
-        render: Button(Button.args),
-    },
-    html: {
-        render: `
-        <div class="xpl-button xpl-button--default xpl-button--primary xpl-button--neutral">
-        <button type="button">
-            Button
-        </button>
-</div>`.trim(),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=15740-65421',
-    },
-};