@xplortech/apollo-core 2.12.0 → 3.0.0

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

@@ -1,156 +0,0 @@
-import { v4 as uuid } from "uuid";
-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/Table',
-    argTypes: {
-        freeze: { control: { type: 'boolean' } },
-        multiselect: { control: { type: 'boolean' } },
-        striped: { control: { type: 'boolean' } },
-        columns: { control: { type: 'object' } },
-        data: { control: { type: 'object' } },
-        footer: { control: { type: 'object' } },
-        isSortable: { control: { type: 'boolean' } },
-        sortableColumns: { control: { type: 'object' } },
-    },
-    parameters: {
-        actions: {
-            handles: ['tableSelect', 'sortChanged'],
-        },
-    },
-};
-const columnsDefault = [
-    'Name',
-    'Total Days Played',
-    'Average Days Played',
-    'Seasons',
-    'Individual Immunity Wins',
-    'Votes Against',
-];
-const dataDefault = [
-    ['Boston Rob Mariano', '152', '30.4', 'S4, S8, S20, S22, S40', '9', '24'],
-    ['Parvati Shallow', '149', '37.25', 'S13, S16, S20', '4', '17'],
-    ['Ozzy Lusth', '128', '32.0', 'S13, S16, S23, S34', '7', '34'],
-    ['Cirie Fields', '121', '30.25', 'S12, S16, S20, S34', '2', '9'],
-    ['Tyson Apostol', '116.5', '29.1', 'S18, S20, S27, S40', '4', '22'],
-];
-const selectedValuesDefault = [
-    'boston-rob-mariano',
-    'parvati-shallow',
-    'ozzy-lusth',
-    'cirie-fields',
-    'tyson-apostol',
-];
-const sortableColumnsDefault = [false, false, false, false, false, false];
-const footerDefault = [['Total', '676.5', '159.75', 'All Seasons', '26', '106']];
-const script = ({ columns, data, footer, id, selectedValues, isSortable, sortableColumns, }) => `
-    (function() {
-        const table = document.getElementById("${id}");
-        table.columns = ${JSON.stringify(columns)};
-        table.data = ${JSON.stringify(data)};
-        ${footer ? `table.footer = ${JSON.stringify(footer)};` : ''}
-        table.selectedValues = ${JSON.stringify(selectedValues)};
-        table.sortableColumns =  ${JSON.stringify(sortableColumns)};
-        table.isSortable = ${isSortable};
-    })();
-`;
-export const Table = ({ columns, data, footer, freeze, multiselect, selectedValues, striped, isSortable, sortableColumns, }) => {
-    const id = uuid();
-    let attrs = '';
-    if (freeze)
-        attrs += ' freeze';
-    if (multiselect)
-        attrs += ' multiselect';
-    if (isSortable)
-        attrs += ' isSortable';
-    if (striped)
-        attrs += ' striped';
-    return `
-        <div style="max-width: 600px;">
-            <xpl-table id="${id}"${attrs}></xpl-table>
-        </div>
-        <script>
-            ${script({ id, columns, data, footer, selectedValues, sortableColumns, isSortable, freeze, multiselect, striped })}
-        </script>
-    `;
-};
-Table.args = {
-    freeze: true,
-    multiselect: false,
-    striped: false,
-    columns: columnsDefault,
-    data: dataDefault,
-    footer: footerDefault,
-    selectedValues: selectedValuesDefault,
-    isSortable: false,
-    sortableColumns: sortableColumnsDefault,
-};
-Table.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: (({ freeze, multiselect, striped }) => {
-            let attrs = '';
-            if (freeze)
-                attrs += ' freeze';
-            if (multiselect)
-                attrs += ' multiselect';
-            if (striped)
-                attrs += ' striped';
-            return [
-                `<xpl-table${attrs}></xpl-table>`,
-                `table.columns = [
-                    "Name", "Total Days Played", ...
-                ];`,
-                `table.data = [
-                    ["Boston Rob Mariano", ...],
-                    ["Parvati Shallow", ...],
-                    ...
-                ];`,
-            ];
-        })(Table.args),
-    },
-    html: {
-        render: (({ freeze, striped }) => {
-            let className = 'xpl-table';
-            if (striped)
-                className += ' xpl-table--striped';
-            if (freeze)
-                className += ' xpl-table--freeze';
-            return [
-                `WARNING: For \`multiselect\` tables, there is JS interactivity that is provided only by the web component. The code shown below does not reflect the additional \`multiselect\` table markup and interactivity.`,
-                `<div class="xpl-table-container">
-                    <table class="${className}">
-                        <thead>
-                            <th>Name</th>
-                            <th>Total Days Played</th>
-                            ...
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>Boston Rob Mariano</td>
-                                <td>152</td>
-                                ...
-                            </tr>
-                            <tr>
-                                <td>Parvati Shallow</td>
-                                <td>149</td>
-                                ...
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>`,
-            ];
-        })(Table.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=20-258&p=f&t=vVY2x58f7oPprNSr-11',
-    },
-};

package/dist/collection/components/xpl-table-header/table-header.stories.js

@@ -1,134 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-export default {
-    title: 'Components/Dynamic Table/Table Header',
-    component: 'xpl-table-header',
-    argTypes: {
-        firstCellType: {
-            control: 'select',
-            options: ['label', 'checkbox', 'icon'],
-        },
-        firstCellLabel: {
-            control: 'text',
-        },
-        firstCellIcon: {
-            control: 'select',
-            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
-        },
-        firstCellWidth: {
-            control: 'number',
-        },
-        firstCellSortable: { control: 'boolean' },
-        secondCellType: {
-            control: 'select',
-            options: ['label', 'checkbox', 'icon'],
-        },
-        secondCellLabel: {
-            control: 'text',
-        },
-        secondCellIcon: {
-            control: 'select',
-            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
-        },
-        secondCellWidth: {
-            control: 'number',
-        },
-        secondCellSortable: { control: 'boolean' },
-        thirdCellType: {
-            control: 'select',
-            options: ['label', 'checkbox', 'icon'],
-        },
-        thirdCellLabel: {
-            control: 'text',
-        },
-        thirdCellIcon: {
-            control: 'select',
-            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
-        },
-        thirdCellWidth: {
-            control: 'number',
-        },
-        thirdCellSortable: { control: 'boolean' },
-    },
-    tags: ['beta', 'vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-};
-export const TableHeader = ({ firstCellType, firstCellLabel, firstCellIcon, firstCellWidth, firstCellSortable, secondCellType, secondCellLabel, secondCellIcon, secondCellWidth, secondCellSortable, thirdCellType, thirdCellLabel, thirdCellIcon, thirdCellWidth, thirdCellSortable, }) => `
-    <xpl-dynamic-table>
-        <div slot="header">
-            <xpl-table-header>
-                <xpl-table-header-cell
-                    type=${firstCellType}
-                    label="${firstCellLabel}"
-                    icon=${firstCellIcon}
-                    width=${firstCellWidth}
-                    sortable=${firstCellSortable}
-                    ></xpl-table-header-cell>
-                    <xpl-table-header-cell
-                    type=${secondCellType}
-                    label="${secondCellLabel}"
-                    icon=${secondCellIcon}
-                    width=${secondCellWidth}
-                    sortable=${secondCellSortable}
-                    ></xpl-table-header-cell>
-                    <xpl-table-header-cell
-                    type=${thirdCellType}
-                    label="${thirdCellLabel}"
-                    icon=${thirdCellIcon}
-                    width=${thirdCellWidth}
-                    sortable=${thirdCellSortable}
-                >
-                </xpl-table-header-cell>
-            </xpl-table-header>
-      </div>
-    </xpl-dynamic-table>
-
-  `;
-TableHeader.args = {
-    firstCellType: 'label',
-    firstCellLabel: '',
-    firstCellIcon: 'heart',
-    firstCellWidth: 48,
-    firstCellSortable: false,
-    secondCellType: 'icon',
-    secondCellLabel: 'Column Item 2',
-    secondCellIcon: 'heart',
-    secondCellWidth: 48,
-    secondCellSortable: false,
-    thirdCellType: 'label',
-    thirdCellLabel: 'Column Item 3',
-    thirdCellIcon: 'heart',
-    thirdCellWidth: 208,
-    thirdCellSortable: true,
-};
-TableHeader.parameters = {
-    'web-component': {
-        render: TableHeader(TableHeader.args),
-    },
-    html: {
-        render: `
-          <tr class="xpl-table-header table-header">
-            <th class="header-cell">
-              <span></span>
-            </th>
-            <th class="header-cell">
-              <xpl-icon class="header-icon" icon="heart"></xpl-icon>
-            </th>
-            <th class="header-cell">
-              <button class="sortable">
-                <span class="sortable-text">Column Item 3</span>
-                <xpl-icon class="sort-icon" icon="arrow-down"></xpl-icon>
-              </button>
-            </th>
-          </tr>`,
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=14764-42036&p=f&t=xrSF2t7u1Brg2fnZ-11',
-    },
-};

package/dist/collection/components/xpl-table-header-cell/table-header-cell.stories.js

@@ -1,83 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-export default {
-    title: 'Components/Dynamic Table/Table Header Cell',
-    component: 'xpl-table-header-cell',
-    argTypes: {
-        type: {
-            control: 'select',
-            options: ['label', 'checkbox', 'icon'],
-        },
-        label: {
-            control: 'text',
-        },
-        icon: {
-            control: 'select',
-            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
-        },
-        width: {
-            control: 'number',
-        },
-        sortable: { control: 'boolean' },
-    },
-    tags: ['beta', 'vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-};
-export const TableHeaderCell = ({ type, label, icon, width, sortable, }) => `
-    <xpl-table-header-cell
-        type=${type}
-        label="${label}"
-        icon=${icon}
-        width=${width}
-        sortable=${sortable}
-    ></xpl-table-header-cell>
-`;
-TableHeaderCell.args = {
-    type: 'label',
-    label: 'Column Item',
-    icon: 'chevron-down',
-    width: null,
-    sortable: false,
-};
-TableHeaderCell.parameters = {
-    'web-component': {
-        render: TableHeaderCell(TableHeaderCell.args),
-    },
-    html: {
-        render: ({ type, label, icon, width, sortable }) => {
-            const renderContent = () => {
-                switch (type) {
-                    case 'label':
-                        return `<span>${label}</span>`;
-                    case 'checkbox':
-                        return `<input type="checkbox" class="xpl-checkbox">`;
-                    case 'icon':
-                        return `<xpl-icon icon="${icon}"></xpl-icon>`;
-                    default:
-                        return '';
-                }
-            };
-            return `
-                <th class="header-cell" style="width: ${width}px">
-                    ${sortable
-                ? `
-                        <button class="sortable">
-                            ${renderContent()}
-                            <xpl-icon icon="arrow-down"></xpl-icon>
-                        </button>
-                    `
-                : `<div class="non-sortable">renderContent()</div>`}
-                </th>
-            `;
-        },
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=14764-42036&p=f&t=xrSF2t7u1Brg2fnZ-11',
-    },
-};

package/dist/collection/components/xpl-tabs/segment-control.stories.js

@@ -1,40 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-import { renderTabsStoryMarkup, segmentControlDefaultArgs, segmentControlStoryArgTypes, tabsPlainDomSegmentStoryHtml, } from "./tabs.shared";
-export default {
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-    title: 'Components/Segment Control',
-    component: 'xpl-tabs',
-    parameters: {
-        actions: {
-            handles: ['tabChange'],
-        },
-        docs: {
-            description: {
-                component: '**Segment Control** is `xpl-tabs` with `type="segment"`. For underline tabs see **Components/Tabs**.',
-            },
-        },
-    },
-    argTypes: segmentControlStoryArgTypes,
-};
-export const SegmentControl = (args, context) => renderTabsStoryMarkup(args, context ?? {});
-SegmentControl.args = segmentControlDefaultArgs;
-SegmentControl.parameters = {
-    layout: 'padded',
-    'web-component': {
-        render: renderTabsStoryMarkup(segmentControlDefaultArgs),
-    },
-    html: {
-        render: tabsPlainDomSegmentStoryHtml,
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6405-96230',
-    },
-};

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

@@ -1,43 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-import { renderTabsStoryMarkup, tabsPlainDomUnderlineStoryHtml, tabsStoryBaseArgTypes, tabsUnderlineDefaultArgs, } from "./tabs.shared";
-export default {
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-    title: 'Components/Tabs',
-    component: 'xpl-tabs',
-    parameters: {
-        actions: {
-            handles: ['tabChange'],
-        },
-        docs: {
-            description: {
-                component: 'Underline tabs use `xpl-tabs` with `type="tabs"` (default). **Segment Control** is the same component with `type="segment"` — see **Components/Segment Control** in the sidebar.',
-            },
-        },
-    },
-    argTypes: {
-        ...tabsStoryBaseArgTypes,
-        type: { ...tabsStoryBaseArgTypes.type, table: { disable: true } },
-    },
-};
-export const Tabs = (args, context) => renderTabsStoryMarkup(args, context ?? {});
-Tabs.args = tabsUnderlineDefaultArgs;
-Tabs.parameters = {
-    layout: 'padded',
-    'web-component': {
-        render: renderTabsStoryMarkup(tabsUnderlineDefaultArgs),
-    },
-    html: {
-        render: tabsPlainDomUnderlineStoryHtml,
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=1536-178224&p=f&t=vVY2x58f7oPprNSr-11',
-    },
-};

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

@@ -1,159 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-function tagAttrs(args) {
-    const { disabled, dismissible, isDraggable, size, tagId } = args;
-    return [
-        `size="${size}"`,
-        disabled ? 'disabled' : '',
-        dismissible ? '' : 'dismissible="false"',
-        isDraggable ? 'is-draggable' : '',
-        tagId ? `tag-id="${tagId}"` : '',
-    ]
-        .filter(Boolean)
-        .join(' ');
-}
-export default {
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-    title: 'Components/Tag',
-    component: 'xpl-tag',
-    argTypes: {
-        size: {
-            options: ['default', 'sm'],
-            control: { type: 'select' },
-        },
-        disabled: { control: 'boolean' },
-        dismissible: { control: 'boolean' },
-        isDraggable: { control: 'boolean' },
-        slot: { control: 'text' },
-        tagId: { control: 'text' },
-    },
-};
-export const Tag = (args) => {
-    const attrs = tagAttrs(args);
-    const text = args.slot ?? '';
-    return `
-        <div style="padding: var(--xpl-space-32);">
-            <xpl-tag ${attrs}>${text}</xpl-tag>
-        </div>
-
-        <hr style="margin: var(--xpl-space-32) 0; border: none; border-top: var(--xpl-border-small) solid var(--xpl-border-subtle)" />
-
-        <p style="margin: 0 0 var(--xpl-space-12); color: var(--xpl-text-subdued)">Drag tags to reorder them within the container.</p>
-        <div
-            id="drag-playground"
-            style="display: flex; flex-wrap: wrap; gap: var(--xpl-space-8); padding: var(--xpl-space-16); border: var(--xpl-border-large) dashed var(--xpl-border-default); border-radius: var(--xpl-border-radius-default); min-height: var(--xpl-size-300); transition: border-color 0.2s"
-        >
-            <xpl-tag tag-id="tag-design" is-draggable ${attrs}>Design</xpl-tag>
-            <xpl-tag tag-id="tag-develop" is-draggable ${attrs}>Development</xpl-tag>
-            <xpl-tag tag-id="tag-qa" is-draggable ${attrs}>QA</xpl-tag>
-            <xpl-tag tag-id="tag-release" is-draggable ${attrs}>Release</xpl-tag>
-        </div>
-        <script>
-            (function() {
-                const container = document.getElementById('drag-playground');
-                if (!container) return;
-                let draggedElement = null;
-
-                container.addEventListener('dragstart', function(e) {
-                    const tag = e.target instanceof Element ? e.target.closest('xpl-tag') : null;
-                    if (tag) {
-                        draggedElement = tag;
-                        container.style.borderColor = 'var(--xpl-border-accent-information)';
-                    }
-                });
-
-                container.addEventListener('dragend', function() {
-                    draggedElement = null;
-                    container.style.borderColor = '';
-                });
-
-                container.addEventListener('dragover', function(e) {
-                    e.preventDefault();
-                    if (!draggedElement) return;
-                    const afterElement = getDragAfterElement(container, e.clientX);
-                    if (afterElement == null) {
-                        container.appendChild(draggedElement);
-                    } else {
-                        container.insertBefore(draggedElement, afterElement);
-                    }
-                });
-
-                function getDragAfterElement(cont, x) {
-                    const els = [...cont.querySelectorAll('xpl-tag')].filter(el => el !== draggedElement);
-                    return els.reduce((closest, child) => {
-                        const box = child.getBoundingClientRect();
-                        const offset = x - box.left - box.width / 2;
-                        return offset < 0 && offset > closest.offset
-                            ? { offset, element: child }
-                            : closest;
-                    }, { offset: Number.NEGATIVE_INFINITY }).element;
-                }
-            })();
-        </script>
-    `;
-};
-Tag.args = {
-    disabled: false,
-    dismissible: true,
-    isDraggable: false,
-    size: 'default',
-    slot: 'Tag label',
-    tagId: '',
-};
-Tag.parameters = {
-    layout: 'padded',
-    docs: {
-        description: {
-            story: 'Tags represent interactive keywords for labeling and categorization. Use `size` to switch between Default (24px) and Small (20px) variants. Set `dismissible={false}` to hide the close button. Set `disabled` to disable interaction. Try long text in the `slot` control to see truncation at max-width.',
-        },
-    },
-    'web-component': {
-        render: (() => {
-            const args = { ...Tag.args };
-            const attrs = tagAttrs(args);
-            return `<xpl-tag ${attrs}>${args.slot ?? ''}</xpl-tag>`;
-        })(),
-    },
-    html: {
-        render: (() => {
-            const args = { ...Tag.args };
-            const sizeMod = args.size === 'sm' ? 'xpl-tag--sm' : '';
-            const disabledMod = args.disabled ? 'xpl-tag--disabled' : '';
-            const dismissibleMod = args.dismissible ? 'xpl-tag--dismissible' : '';
-            const dragEnabled = args.isDraggable && !args.disabled;
-            const draggableMod = dragEnabled ? 'xpl-tag--draggable' : '';
-            const hostClasses = [
-                'xpl-tag',
-                'xpl-tag-container',
-                sizeMod,
-                disabledMod,
-                dismissibleMod,
-                draggableMod,
-            ]
-                .filter(Boolean)
-                .join(' ');
-            const contentTag = dragEnabled ? 'div' : 'button';
-            const disabledAttr = args.disabled ? ' disabled' : '';
-            const contentAttrs = dragEnabled
-                ? 'role="button" tabindex="0" draggable="true"'
-                : `type="button"${disabledAttr}`;
-            const contentEl = `<${contentTag} class="xpl-tag__content xpl-tag" ${contentAttrs}>${args.slot ?? ''}</${contentTag}>`;
-            const dismissLabelBase = (args.slot ?? '').trim() || 'tag';
-            const dismissAriaLabel = `Dismiss ${dismissLabelBase}`.replace(/"/g, '&quot;');
-            const dismissButton = args.dismissible
-                ? `<button class="xpl-tag__dismiss xpl-tag__close" type="button" aria-label="${dismissAriaLabel}"${disabledAttr}><xpl-icon icon="xmark" size="10"></xpl-icon></button>`
-                : '';
-            return `<div class="${hostClasses}">${contentEl}${dismissButton}</div>`;
-        })(),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=15243-65363',
-    },
-};