@xplortech/apollo-core 2.12.0 → 3.1.0

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

@@ -1,80 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-export default {
-    title: 'Components/Skeleton',
-    component: 'xpl-skeleton',
-    argTypes: {
-        shape: {
-            control: 'select',
-            options: ['rectangle', 'circle', 'square'],
-        },
-        size: {
-            control: 'select',
-            options: [
-                'display',
-                'title-1',
-                'title-2',
-                'title-3',
-                'title-4',
-                'title-5',
-                'body',
-                'custom',
-            ],
-        },
-        width: {
-            control: 'text',
-        },
-        height: {
-            control: 'text',
-        },
-        margin: {
-            control: 'text',
-        },
-    },
-    tags: ['beta', 'vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-};
-export const Simple = ({ shape, size, width, height }) => {
-    const attributes = {
-        shape,
-        size,
-        width,
-        height,
-    };
-    return `
-    <div style="padding: 100px; display: flex; justify-content: center; width: 100%;">
-        <xpl-skeleton  ${Object.entries(attributes)
-        .map(([key, value]) => `${key}="${value}"`)
-        .join(' ')}></xpl-skeleton>
-    </div>
-    `;
-};
-const HtmlSimple = ({ shape, size, width, height, margin }) => `
-    <div class="xpl-skeleton xpl-skeleton--shape-${shape} xpl-skeleton--size-${size}" style="width: ${width}px; height: ${height}px; margin: ${margin}"></div>
-    `;
-Simple.args = {
-    shape: 'rectangle',
-    size: 'h1',
-    width: '300px',
-    height: '120px',
-    margin: '1rem 0',
-};
-Simple.parameters = {
-    layout: 'centered',
-    htmlSnippet: { mode: 'auto' },
-    'web-component': {
-        render: Simple(Simple.args),
-    },
-    html: {
-        render: HtmlSimple(Simple.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=27679-10586&p=f&t=vVY2x58f7oPprNSr-11',
-    },
-};

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

@@ -1,122 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForComponentsRender } from "../../../../src/utils/story-vrt";
-export default {
-    title: 'Components/Slideout',
-    component: 'xpl-slideout',
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({
-            enable: true,
-            failureThreshold: 2,
-            failureThresholdType: 'percent',
-        });
-    },
-    play: async ({ canvasElement }) => {
-        await waitForComponentsRender(canvasElement);
-    },
-    argTypes: {
-        isOpen: {
-            control: 'boolean',
-        },
-        title: {
-            type: { name: 'string', required: true },
-        },
-        subtitle: {
-            type: { name: 'string', required: false },
-        },
-        searchFieldEnabled: {
-            control: 'boolean',
-        },
-        backdropEnabled: {
-            control: 'boolean',
-        },
-        showFooter: {
-            control: 'boolean',
-        },
-        slotCount: {
-            type: { name: 'number', required: true },
-        },
-        slotTitle: {
-            type: { name: 'string', required: false },
-        },
-        slotText: {
-            type: { name: 'string', required: false },
-        },
-        actions: {
-            control: 'select',
-            options: [1, 2, 3],
-        },
-        primaryButtonText: {
-            type: { name: 'string', required: true },
-        },
-        secondaryButtonText: {
-            type: { name: 'string', required: false },
-        },
-        tertiaryButtonText: {
-            type: { name: 'string', required: false },
-        },
-        variant: {
-            control: 'select',
-            options: ['default', 'warning'],
-        },
-    },
-    parameters: {
-        actions: {
-            handles: ['isOpenChange'],
-        },
-    },
-};
-const renderContentArray = (slotCount, slotTitle, slotText) => Array.from({ length: slotCount })
-    .map(() => `
-        <div class="slideout-content-item">
-            <strong>${slotTitle}</strong> ${slotText}
-        </div>
-    `)
-    .join('\n');
-export const Slideout = ({ isOpen, title, subtitle, searchFieldEnabled, backdropEnabled, showFooter, slotCount, slotTitle, slotText, actions, primaryButtonText, secondaryButtonText, tertiaryButtonText, variant, }) => {
-    const renderButtons = () => {
-        const buttons = [];
-        buttons.push(`<xpl-button slot="primary" variant=${variant === 'warning' ? 'warning' : 'primary'}>${primaryButtonText}</xpl-button>`);
-        if (actions >= 2) {
-            buttons.push(`<xpl-button slot="secondary" variant="secondary">${secondaryButtonText}</xpl-button>`);
-        }
-        if (actions === 3) {
-            buttons.push(`<xpl-button slot="tertiary" variant="secondary">${tertiaryButtonText}</xpl-button>`);
-        }
-        return buttons.join('\n');
-    };
-    const renderSearchField = () => searchFieldEnabled ? '<xpl-input slot="search" placeholder="Search"></xpl-input>' : '';
-    const contentArray = renderContentArray(slotCount, slotTitle, slotText);
-    return `
-        <xpl-button id="btn" onclick="this.nextElementSibling.isOpen = !this.nextElementSibling.isOpen">Toggle SlideOut</xpl-button>
-        <xpl-slideout id="slideout" is-open=${isOpen} backdrop=${backdropEnabled} show-footer=${showFooter} variant=${variant}>
-            <div slot="title">${title}</div>
-            <div slot="subtitle">${subtitle}</div>
-            <div slot="search">${renderSearchField()}</div>
-            <div slot="content">${contentArray}</div>
-            ${renderButtons()}
-        </xpl-slideout>
-    `;
-};
-Slideout.args = {
-    isOpen: true,
-    title: 'Slideout Title',
-    subtitle: 'Optional Slideout Subtitle',
-    searchFieldEnabled: true,
-    backdropEnabled: false,
-    showFooter: true,
-    slotCount: 5,
-    slotTitle: 'Slot Content Item',
-    slotText: 'Replace me with your content.',
-    actions: 1,
-    primaryButtonText: 'Button Text',
-    secondaryButtonText: 'Button Text',
-    tertiaryButtonText: 'Button Text',
-    variant: 'default',
-};
-Slideout.parameters = {
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=2627-108585&p=f&t=vVY2x58f7oPprNSr-11',
-    },
-};

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

@@ -1,392 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-const escapeHtmlAttribute = (value) => value
-    .replace(/&/g, '&')
-    .replace(/"/g, '"')
-    .replace(/'/g, ''')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-const optionalAttr = (name, value) => value?.trim() ? ` ${name}="${escapeHtmlAttribute(value)}"` : '';
-const renderWebComponent = (args) => {
-    const attrs = [
-        args.actionLayout ? `action-layout="${args.actionLayout}"` : '',
-        args.anchorPosition ? `anchor-position="${args.anchorPosition}"` : '',
-        args.currentStep != null ? `current-step="${args.currentStep}"` : '',
-        args.isDismissible != null ? `is-dismissible="${args.isDismissible}"` : '',
-        args.isOpen != null ? `is-open="${args.isOpen}"` : '',
-        args.primaryActionLabel
-            ? `primary-action-label="${escapeHtmlAttribute(args.primaryActionLabel)}"`
-            : '',
-        args.secondaryActionLabel
-            ? `secondary-action-label="${escapeHtmlAttribute(args.secondaryActionLabel)}"`
-            : '',
-        args.showActions != null ? `show-actions="${args.showActions}"` : '',
-        args.showImage != null ? `show-image="${args.showImage}"` : '',
-        args.showSteps != null ? `show-steps="${args.showSteps}"` : '',
-        args.totalSteps != null ? `total-steps="${args.totalSteps}"` : '',
-        args.heading?.trim() ? `heading="${escapeHtmlAttribute(args.heading)}"` : '',
-        args.body?.trim() ? `body="${escapeHtmlAttribute(args.body)}"` : '',
-        args.target?.trim() ? `target="${escapeHtmlAttribute(args.target)}"` : '',
-    ]
-        .filter(Boolean)
-        .join('\n    ');
-    return `<xpl-spotlight
-    ${attrs}
-></xpl-spotlight>`;
-};
-const renderHtml = (args) => {
-    const anchorPos = args.anchorPosition ?? 'top-left';
-    const actionLayout = args.actionLayout ?? 'default';
-    const showImage = args.showImage !== false;
-    const showActions = args.showActions !== false;
-    const showSteps = args.showSteps !== false;
-    const isDismissible = args.isDismissible !== false;
-    const isSingle = actionLayout === 'single';
-    const currentStep = args.currentStep ?? 1;
-    const totalSteps = args.totalSteps ?? 1;
-    const dismissHtml = isDismissible
-        ? `
-  <div class="xpl-spotlight__dismiss">
-    <button type="button" class="xpl-button xpl-button--secondary xpl-button--sm xpl-button--icon-only" aria-label="Dismiss tour step">
-      <xpl-icon icon="xmark" size="16"></xpl-icon>
-    </button>
-  </div>`
-        : '';
-    const imageHtml = showImage
-        ? `
-    <div class="xpl-spotlight__image-container xpl-spotlight__image-container--empty">
-      <div class="xpl-spotlight__image-placeholder" aria-hidden="true">
-        <xpl-icon icon="photo" size="24"></xpl-icon>
-        <xpl-icon icon="video" size="24"></xpl-icon>
-      </div>
-    </div>`
-        : '';
-    const headingHtml = args.heading?.trim()
-        ? `
-        <span class="xpl-spotlight__title">${escapeHtmlAttribute(args.heading)}</span>`
-        : '';
-    const bodyHtml = args.body?.trim()
-        ? `
-        <p class="xpl-spotlight__body">${escapeHtmlAttribute(args.body)}</p>`
-        : '';
-    const secondaryBtn = !isSingle
-        ? `
-          <button type="button" class="xpl-button xpl-button--secondary xpl-button--default">
-            ${escapeHtmlAttribute(args.secondaryActionLabel ?? 'Back')}
-          </button>`
-        : '';
-    const stepLabel = showSteps && !isSingle
-        ? `
-        <span class="xpl-spotlight__step-text">${currentStep} of ${totalSteps}</span>`
-        : '';
-    const primaryBtn = `
-          <button type="button" class="xpl-button xpl-button--primary xpl-button--default">
-            ${escapeHtmlAttribute(args.primaryActionLabel ?? 'Next')}
-          </button>`;
-    const actionsHtml = showActions
-        ? `
-      <div class="xpl-spotlight__actions xpl-spotlight__actions--${isSingle ? 'single' : 'dual'}${showSteps ? ' xpl-spotlight__actions--with-steps' : ''}">
-        <div class="xpl-spotlight__action-slot xpl-spotlight__action-slot--secondary">${secondaryBtn}
-        </div>${stepLabel}
-        <div class="xpl-spotlight__action-slot xpl-spotlight__action-slot--primary">${primaryBtn}
-        </div>
-      </div>`
-        : '';
-    const ariaLabel = args.heading?.trim() ? '' : ' aria-label="Tour step"';
-    return `<div class="xpl-spotlight xpl-spotlight--${anchorPos}${showActions ? ` xpl-spotlight--action-layout-${actionLayout}` : ''}${!showImage ? ' xpl-spotlight--no-image' : ''} xpl-spotlight--visible"
-     role="dialog" aria-modal="false"${ariaLabel} tabindex="-1">${dismissHtml}
-  <button type="button" class="xpl-spotlight__target" aria-label="Spotlight indicator">
-    <div class="xpl-spotlight__target-outer"></div>
-    <div class="xpl-spotlight__target-inner"></div>
-  </button>
-  <div class="xpl-spotlight__frame">${imageHtml}
-    <div class="xpl-spotlight__content">
-      <div class="xpl-spotlight__header">${headingHtml}${bodyHtml}
-      </div>${actionsHtml}
-    </div>
-  </div>
-</div>`;
-};
-export default {
-    title: 'Components/Spotlight',
-    component: 'xpl-spotlight',
-    argTypes: {
-        showActions: {
-            control: 'boolean',
-            description: 'Whether to show the actions row (primary / secondary and optional step counter).',
-        },
-        actionLayout: {
-            options: ['default', 'dual', 'single'],
-            control: { type: 'select' },
-            description: 'Footer action layout. `default` and `dual` render Back/Next; `single` renders one primary CTA.',
-            if: { arg: 'showActions' },
-        },
-        anchorPosition: {
-            options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
-            control: { type: 'select' },
-            description: 'Which corner of the card the anchor dot appears on.',
-        },
-        body: {
-            control: 'text',
-            description: 'Body copy when the `body` slot has no slotted content. Whitespace-only values are treated as empty.',
-        },
-        currentStep: {
-            control: { type: 'number', min: 1 },
-            description: 'Current step index (1-based). Used with `totalSteps` for the step label.',
-        },
-        heading: {
-            control: 'text',
-            description: 'Heading when the `title` slot has no slotted content. Whitespace-only values are treated as empty.',
-        },
-        isDismissible: {
-            control: 'boolean',
-            description: 'Whether to show the dismiss (close) control.',
-        },
-        isOpen: {
-            control: 'boolean',
-            description: 'Controls whether the spotlight is rendered. When false the host stays in the DOM but the UI is hidden.',
-        },
-        primaryActionLabel: {
-            control: 'text',
-            description: 'Label for the default primary action button.',
-        },
-        secondaryActionLabel: {
-            control: 'text',
-            description: 'Label for the default secondary action button.',
-        },
-        showImage: {
-            control: 'boolean',
-            description: 'When true the media region is shown (slotted content or built-in placeholder). When false the entire media block is hidden.',
-        },
-        showSteps: {
-            control: 'boolean',
-            description: 'Whether to show the step counter and apply step-based disabled state to Back/Next.',
-        },
-        target: {
-            control: 'text',
-            description: 'CSS selector for the element this spotlight anchors to via Floating UI. Invalid selectors fall back to `anchorPosition`.',
-        },
-        totalSteps: {
-            control: { type: 'number', min: 1 },
-            description: 'Total number of steps (1-based upper bound). Used with `currentStep` for the step label.',
-        },
-    },
-};
-export const Spotlight = ({ actionLayout, anchorPosition, body, currentStep, heading, isDismissible, isOpen, primaryActionLabel, secondaryActionLabel, showActions, showImage, showSteps, target, totalSteps, }) => `
-    <div class="p-16">
-        <xpl-spotlight
-            action-layout="${actionLayout}"
-            anchor-position="${anchorPosition}"
-            current-step="${currentStep}"
-            is-dismissible="${isDismissible}"
-            is-open="${isOpen}"
-            primary-action-label="${escapeHtmlAttribute(primaryActionLabel)}"
-            secondary-action-label="${escapeHtmlAttribute(secondaryActionLabel)}"
-            show-actions="${showActions}"
-            show-image="${showImage}"
-            show-steps="${showSteps}"
-            total-steps="${totalSteps}"
-            ${optionalAttr('heading', heading)}
-            ${optionalAttr('body', body)}
-            ${optionalAttr('target', target)}
-        ></xpl-spotlight>
-    </div>
-`;
-Spotlight.args = {
-    showActions: true,
-    actionLayout: 'default',
-    anchorPosition: 'top-left',
-    body: 'Copy about the feature and/or functionality the dot is pointing to.',
-    currentStep: 2,
-    heading: 'Tour Title',
-    isDismissible: true,
-    isOpen: true,
-    primaryActionLabel: 'Next',
-    secondaryActionLabel: 'Back',
-    showImage: true,
-    showSteps: true,
-    target: '',
-    totalSteps: 5,
-};
-Spotlight.tags = ['vrt'];
-Spotlight.beforeEach = () => {
-    setAutoSnapshotOptions({ enable: true });
-};
-Spotlight.play = async ({ canvasElement }) => {
-    await waitForHydration(canvasElement);
-};
-Spotlight.parameters = {
-    layout: 'padded',
-    docs: {
-        description: {
-            story: 'Default spotlight with all controls. Adjust `actionLayout`, `anchorPosition`, step navigation, and visibility props to explore all variants.',
-        },
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=12173-9359&p=f&m=dev',
-    },
-    'web-component': {
-        render: renderWebComponent(Spotlight.args),
-    },
-    html: {
-        render: renderHtml(Spotlight.args),
-    },
-};
-const MEDIA_SLOT_HTML = `<div slot="image" class="w-full h-full">
-                <video
-                    class="w-full h-full object-cover block"
-                    autoplay
-                    loop
-                    muted
-                    playsinline
-                    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
-                ></video>
-            </div>`;
-export const WithMediaSlot = ({ showActions, actionLayout, anchorPosition, body, currentStep, heading, isDismissible, isOpen, primaryActionLabel, secondaryActionLabel, showImage, showSteps, target, totalSteps, }) => `
-    <div class="p-16">
-        <xpl-spotlight
-            action-layout="${actionLayout}"
-            anchor-position="${anchorPosition}"
-            current-step="${currentStep}"
-            is-dismissible="${isDismissible}"
-            is-open="${isOpen}"
-            primary-action-label="${escapeHtmlAttribute(primaryActionLabel)}"
-            secondary-action-label="${escapeHtmlAttribute(secondaryActionLabel)}"
-            show-actions="${showActions}"
-            show-image="${showImage}"
-            show-steps="${showSteps}"
-            total-steps="${totalSteps}"
-            ${optionalAttr('heading', heading)}
-            ${optionalAttr('body', body)}
-            ${optionalAttr('target', target)}
-        >
-            ${MEDIA_SLOT_HTML}
-        </xpl-spotlight>
-    </div>
-`;
-WithMediaSlot.args = {
-    showActions: true,
-    actionLayout: 'default',
-    anchorPosition: 'top-left',
-    body: 'Drag and drop or click to browse — we support images, videos, and PDFs.',
-    currentStep: 1,
-    heading: 'Upload your first file',
-    isDismissible: true,
-    isOpen: true,
-    primaryActionLabel: 'Next',
-    secondaryActionLabel: 'Back',
-    showImage: true,
-    showSteps: true,
-    target: '',
-    totalSteps: 3,
-};
-WithMediaSlot.parameters = {
-    layout: 'padded',
-    docs: {
-        description: {
-            story: 'Spotlight with custom media content via the `image` slot. Any HTML can be slotted — images, videos, illustrations, or animated previews. When the slot is populated the built-in placeholder is automatically replaced.',
-        },
-    },
-    'web-component': {
-        render: `<xpl-spotlight
-    heading="${escapeHtmlAttribute(WithMediaSlot.args.heading)}"
-    body="${escapeHtmlAttribute(WithMediaSlot.args.body)}"
-    current-step="${WithMediaSlot.args.currentStep}"
-    total-steps="${WithMediaSlot.args.totalSteps}"
->
-    ${MEDIA_SLOT_HTML}
-</xpl-spotlight>`,
-    },
-    html: {
-        render: renderHtml({
-            heading: WithMediaSlot.args.heading,
-            body: WithMediaSlot.args.body,
-            currentStep: WithMediaSlot.args.currentStep,
-            totalSteps: WithMediaSlot.args.totalSteps,
-        }),
-    },
-};
-const TARGET_TOGGLE_ID = 'spotlight-target-toggle-btn';
-const TARGET_TOGGLE_SPOTLIGHT_ID = 'spotlight-target-toggle';
-export const TargetClickToggle = ({ actionLayout, anchorPosition, body, currentStep, heading, isDismissible, isOpen, primaryActionLabel, secondaryActionLabel, showActions, showImage, showSteps, totalSteps, }) => `
-    <div style="position: relative; padding: 80px 340px; min-height: 420px;">
-        <xpl-button id="${TARGET_TOGGLE_ID}">Feature settings</xpl-button>
-
-        <xpl-spotlight
-            id="${TARGET_TOGGLE_SPOTLIGHT_ID}"
-            target="#${TARGET_TOGGLE_ID}"
-            action-layout="${actionLayout}"
-            anchor-position="${anchorPosition}"
-            current-step="${currentStep}"
-            is-dismissible="${isDismissible}"
-            is-open="${isOpen}"
-            primary-action-label="${escapeHtmlAttribute(primaryActionLabel)}"
-            secondary-action-label="${escapeHtmlAttribute(secondaryActionLabel)}"
-            show-actions="${showActions}"
-            show-image="${showImage}"
-            show-steps="${showSteps}"
-            total-steps="${totalSteps}"
-            ${optionalAttr('heading', heading)}
-            ${optionalAttr('body', body)}
-        ></xpl-spotlight>
-
-        <script>
-            (function () {
-                var spotlight = document.getElementById('${TARGET_TOGGLE_SPOTLIGHT_ID}');
-                if (!spotlight || spotlight.__targetToggleBound) return;
-                spotlight.__targetToggleBound = true;
-
-                spotlight.addEventListener('targetClick', function () {
-                    var open = spotlight.getAttribute('is-open');
-                    spotlight.setAttribute('is-open', open === 'true' ? 'false' : 'true');
-                });
-
-                spotlight.addEventListener('dismiss', function () {
-                    spotlight.setAttribute('is-open', 'false');
-                });
-
-                spotlight.addEventListener('primaryAction', function () {
-                    spotlight.setAttribute('is-open', 'false');
-                });
-            })();
-        </script>
-    </div>
-`;
-TargetClickToggle.args = {
-    showActions: true,
-    actionLayout: 'single',
-    anchorPosition: 'bottom-right',
-    body: 'Click this button to open feature settings. We just shipped inline editing — try it out!',
-    currentStep: 1,
-    heading: 'New: Quick Settings',
-    isDismissible: true,
-    isOpen: false,
-    primaryActionLabel: 'Got it',
-    secondaryActionLabel: 'Back',
-    showImage: false,
-    showSteps: false,
-    target: `#${TARGET_TOGGLE_ID}`,
-    totalSteps: 1,
-};
-TargetClickToggle.parameters = {
-    layout: 'padded',
-    docs: {
-        description: {
-            story: [
-                'Demonstrates the **target-only** mode and `targetClick` event.',
-                '',
-                'The spotlight starts with `is-open="false"` and `target` pointing to the button.',
-                'Only the pulsing dot indicator is rendered, anchored to the button via Floating UI.',
-                'Clicking the dot emits `targetClick` — the handler toggles `is-open`.',
-                'Dismissing or completing the action closes the card back to dot-only mode.',
-            ].join('\n'),
-        },
-    },
-    'web-component': {
-        render: renderWebComponent(TargetClickToggle.args),
-    },
-    html: {
-        render: renderHtml(TargetClickToggle.args),
-    },
-};