@xplortech/apollo-core 2.12.0 → 3.0.0

package/dist/collection/components/xpl-large-card/large-card.stories.js

@@ -1,155 +0,0 @@
-import { expect, waitFor } from "storybook/test";
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-const waitForHydration = async ({ canvasElement }) => {
-    if (document.fonts?.ready) {
-        await document.fonts.ready;
-    }
-    await waitFor(() => {
-        const cards = canvasElement.querySelectorAll('xpl-large-card');
-        expect(cards.length).toBeGreaterThan(0);
-        const customEls = canvasElement.querySelectorAll('xpl-large-card, xpl-icon, xpl-tooltip');
-        customEls.forEach((el) => expect(el.classList.contains('hydrated')).toBe(true));
-    }, { timeout: 15000 });
-};
-export default {
-    title: 'Data Components/Large Card',
-    tags: ['vrt'],
-    beforeEach() {
-        document.body.classList.remove('dark');
-        document.body.classList.add('light');
-        setAutoSnapshotOptions({
-            enable: true,
-            failureThreshold: 2,
-            failureThresholdType: 'percent',
-        });
-    },
-    argTypes: {
-        contentType: {
-            control: 'radio',
-            options: ['props', 'slots'],
-        },
-        name: {
-            control: 'text',
-            required: true,
-            if: { arg: 'contentType', eq: 'props' },
-        },
-        description: {
-            control: 'text',
-            required: false,
-            if: { arg: 'contentType' },
-        },
-        link: {
-            control: 'boolean',
-            if: { arg: 'contentType', eq: 'props' },
-        },
-        title: {
-            control: 'text',
-            if: { arg: 'contentType', eq: 'slots' },
-        },
-        graphContent: {
-            control: 'text',
-            if: { arg: 'contentType' },
-        },
-    },
-};
-export const LargeCard = ({ name, description, link, title, graphContent, }) => `
-    <dl class="xpl-dl xpl-dl--center" style="width: 37.5rem;">
-        <xpl-large-card
-            name="${name}"
-            description="${description}"
-            link="${link}"
-        >
-            <a href="#"></a>
-            ${title ? `<div slot="title">${title}</div>` : ''}
-            ${graphContent
-    ? `<div
-                            slot="graph-content"
-                            style="
-                                width: 100%;
-                                background-color: red;
-                                display: flex;
-                                justify-content: center;
-                                align-items: center;
-                                padding: 1rem 1.5rem;
-                            "
-                        >
-                            ${graphContent}
-                        </div>`
-    : ''}
-        </xpl-large-card>
-    </dl>
-`;
-LargeCard.args = {
-    contentType: 'props',
-    name: 'Title',
-    description: 'This is an optional description for the card',
-    link: true,
-    title: `<div>Sample Card</div>
-    <xpl-tooltip
-        text="Lorem ipsum dolor sit amet, consectfafa afafa fagdsg sgsgsgs fagagfdhgs agsgs sgsgs gsgsgetur adipiscing elit."
-    >
-        <xpl-icon icon="info" size="16"></xpl-icon>
-    </xpl-tooltip>`,
-    graphContent: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`,
-};
-LargeCard.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: LargeCard(LargeCard.args),
-    },
-    html: {
-        render: (({ name, description, link, title, graphContent }) => `
-            <section
-                role="group"
-                class="xpl-large-card ${link ? 'xpl-large-card__link' : ''}"
-                tabindex="0"
-            >
-                <dt class="xpl-large-card__header">
-                    <header>
-                        ${title ? '' : `<span>${name}</span>`}
-                        ${title || ''}
-                        ${link
-            ? `
-                                    <span class="xpl-large-card__header-arrow">
-                                        <xpl-icon
-                                            icon="chevron-right"
-                                            size={16}
-                                        ></xpl-icon>
-                                    </span>
-                                    `
-            : ''}
-                    </header>
-                    ${description
-            ? `
-                                <div class="xpl-large-card__description">
-                                    ${description}
-                                </div>`
-            : ''}
-                </dt>
-                <dd class="xpl-large-card__body">
-                    ${graphContent
-            ? `
-                                <div
-                                    style="
-                                        width: 100%;
-                                        background-color: red;
-                                        display: flex;
-                                        justify-content: center;
-                                        align-items: center;
-                                        padding: 1rem 1.5rem;
-                                    "
-                                >
-                                    ${graphContent}
-                                </div>
-                            `
-            : ''}
-                </dd>
-            </section>
-        `)(LargeCard.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=17661-38565&p=f&t=01tbTrRZyfvVafsA-11',
-    },
-};
-LargeCard.play = waitForHydration;

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

@@ -1,398 +0,0 @@
-import { v4 as uuid } from "uuid";
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-const PLACEHOLDER_AVATAR_SRC = 'https://placebear.com/128/128';
-function slotBasedAvatarMarkup(slotAvatar, name) {
-    if (slotAvatar === 'image') {
-        return `<xpl-avatar name="${name}" src="${PLACEHOLDER_AVATAR_SRC}"></xpl-avatar>`;
-    }
-    if (slotAvatar === 'placeholder') {
-        return `<xpl-avatar name="${name}">ABC</xpl-avatar>`;
-    }
-    return `<xpl-avatar name="${name}"></xpl-avatar>`;
-}
-export default {
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-    title: 'Components/List',
-    parameters: {
-        controls: {
-            sort: 'none',
-        },
-    },
-    argTypes: {
-        type: {
-            name: 'Type',
-            control: { type: 'select' },
-            options: ['Legacy', 'Slot based'],
-            table: { category: '00 — Mode' },
-        },
-        avatar: {
-            options: ['none', 'image', 'placeholder'],
-            control: { type: 'select' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        avatars: {
-            control: { type: 'boolean' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        badges: {
-            control: { type: 'boolean' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        link: {
-            control: { type: 'boolean' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        metadata: {
-            control: { type: 'boolean' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        title: {
-            control: { type: 'text' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        subtext: {
-            control: { type: 'text' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        listLabel: {
-            control: 'text',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Sets `aria-label` on `xpl-list` for screen readers.',
-            table: { category: '02 — Slot: List & row' },
-        },
-        listLabelledBy: {
-            name: 'listLabelledBy (aria-labelledby)',
-            control: 'text',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Space-separated element ids; sets `aria-labelledby` on `xpl-list`.',
-            table: { category: '02 — Slot: List & row' },
-        },
-        showSelectable: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            table: { category: '02 — Slot: List & row' },
-        },
-        showReorderable: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Sets `reorderable` on `xpl-list` (drag handle + keyboard reorder on slot-based rows only).',
-            table: { category: '02 — Slot: List & row' },
-        },
-        showAsLink: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            table: { category: '02 — Slot: List & row' },
-        },
-        showTitle: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            table: { category: '03 — Slot: Title row' },
-        },
-        slotTitle: {
-            control: 'text',
-            if: { arg: 'showTitle', eq: true },
-            table: { category: '03 — Slot: Title row' },
-        },
-        showDivider: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'In-row divider below the title (`showDivider` on each row).',
-            table: { category: '03 — Slot: Title row' },
-        },
-        titleBadgeVariant: {
-            control: { type: 'select' },
-            options: ['none', 'purple', 'green', 'yellow', 'red', 'blue', 'gray', 'orange'],
-            if: { arg: 'type', eq: 'Slot based' },
-            table: { category: '03 — Slot: Title row' },
-        },
-        showMetadata: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            table: { category: '03 — Slot: Title row' },
-        },
-        showAvatar: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            table: { category: '04 — Slot: Avatar' },
-        },
-        slotAvatar: {
-            options: ['image', 'placeholder'],
-            control: { type: 'select' },
-            if: { arg: 'showAvatar', eq: true },
-            table: { category: '04 — Slot: Avatar' },
-        },
-        showDetails: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            table: { category: '05 — Slot: Details & right column' },
-        },
-        slotDetails: {
-            control: 'text',
-            if: { arg: 'showDetails', eq: true },
-            table: { category: '05 — Slot: Details & right column' },
-        },
-        showBadges: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            table: { category: '05 — Slot: Details & right column' },
-        },
-        showActions: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            table: { category: '05 — Slot: Details & right column' },
-        },
-        showExtras: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            table: { category: '06 — Slot: Stacked extras & error' },
-        },
-        showError: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Adds `error-text` slot to every row.',
-            table: { category: '06 — Slot: Stacked extras & error' },
-        },
-        errorBorderOnly: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Second row (`item-2`): `error` without `error-text` (border only).',
-            table: { category: '06 — Slot: Stacked extras & error' },
-        },
-    },
-};
-const script = ({ id, avatar, avatars, badges, metadata, link, title, subtext, }) => `
-    (function() {
-        const list = document.getElementById("${id}");
-        const item = ${JSON.stringify({
-    avatar: avatar === 'image'
-        ? 'https://placebear.com/128/128'
-        : avatar === 'placeholder'
-            ? 'ABC'
-            : null,
-    avatars: avatars
-        ? [
-            'https://placebear.com/128/128',
-            'https://placebear.com/128/128',
-            'https://placebear.com/128/128',
-        ]
-        : null,
-    badges: badges
-        ? [
-            'Badge',
-            {
-                dot: true,
-                text: 'With Dot',
-            },
-            {
-                variant: 'error',
-                text: 'Error',
-            },
-        ]
-        : null,
-    href: link ? '#' : null,
-    metadata: metadata
-        ? [
-            'Metadata',
-            {
-                icon: 'envelope',
-                text: 'Metadata w/ Icon',
-            },
-        ]
-        : null,
-    title,
-    subtext,
-})};
-        list.items = [item, item, item];
-    })();
-`;
-export const List = (props) => {
-    const id = uuid();
-    if (props.type === 'Slot based') {
-        const listLabelAttr = props.listLabel
-            ? ` label="${String(props.listLabel).replace(/"/g, '&quot;')}"`
-            : '';
-        const listLabelledByAttr = props.listLabelledBy
-            ? ` labelled-by="${String(props.listLabelledBy).replace(/"/g, '&quot;')}"`
-            : '';
-        return `
-        <xpl-list id="${id}"${listLabelAttr}${listLabelledByAttr} ${props.showSelectable ? 'selectable' : ''} ${props.showReorderable ? 'reorderable' : ''}>
-            ${[1, 2, 3]
-            .map((i) => `
-                <xpl-list-item item-id="item-${i}"${props.showAsLink ? ` href="#slot-list-item-${i}"` : ''}${props.showDivider ? ' show-divider' : ''}${props.titleBadgeVariant && props.titleBadgeVariant !== 'none'
-            ? ` title-badge-variant="${props.titleBadgeVariant}"`
-            : ''}${props.errorBorderOnly && i === 2 ? ' error' : ''}>
-                    ${props.showAvatar
-            ? `
-                    <div slot="avatar">
-                        ${slotBasedAvatarMarkup(props.slotAvatar, `${props.slotTitle} ${i}`)}
-                    </div>`
-            : ''}
-
-                    ${props.showTitle
-            ? `
-                    <div slot="title">
-                        ${props.slotTitle} ${i}
-                    </div>`
-            : ''}
-
-                    ${props.showMetadata
-            ? `
-                    <div slot="metadata">
-                        <span>Meta ${i}</span>
-                        <xpl-icon icon="envelope"></xpl-icon>
-                    </div>`
-            : ''}
-
-                    ${props.showDetails
-            ? `
-                    <div slot="details">
-                        ${props.slotDetails} ${i}
-                    </div>`
-            : ''}
-
-                    ${props.showBadges
-            ? `
-                    <div slot="badges">
-                        <xpl-badge>Badge</xpl-badge>
-                        <xpl-badge variant="error">Error</xpl-badge>
-                    </div>`
-            : ''}
-
-                    ${props.showActions
-            ? `
-                    <div slot="actions">
-                        <xpl-button type="button" size="sm">Action</xpl-button>
-                    </div>`
-            : ''}
-
-                    ${props.showExtras
-            ? `
-                    <div slot="stacked-extra-1">Extra 1</div>
-                    <div slot="stacked-extra-2">Extra 2</div>
-                    <div slot="stacked-extra-3">Extra 3</div>`
-            : ''}
-
-                    ${props.showError
-            ? `
-                    <div slot="error-text">
-                        Error message
-                    </div>`
-            : ''}
-                </xpl-list-item>`)
-            .join('')}
-        </xpl-list>
-        `;
-    }
-    return `<xpl-list id="${id}"></xpl-list>
-    <script>${script({ id, ...props })}</script>`;
-};
-List.args = {
-    type: 'Slot based',
-    avatar: 'none',
-    avatars: false,
-    badges: false,
-    link: true,
-    metadata: false,
-    title: 'List Item',
-    subtext: '',
-    listLabel: '',
-    listLabelledBy: '',
-    showAvatar: false,
-    showTitle: true,
-    showDivider: false,
-    titleBadgeVariant: 'none',
-    showMetadata: true,
-    showDetails: false,
-    showBadges: false,
-    showActions: true,
-    showExtras: false,
-    showError: false,
-    errorBorderOnly: false,
-    showSelectable: false,
-    showReorderable: false,
-    showAsLink: false,
-    slotTitle: 'User',
-    slotDetails: 'Details',
-};
-const slotBasedExample = `<xpl-list>
-    <xpl-list-item item-id="item-1">
-        <div slot="avatar">
-            <xpl-avatar name="Jane Doe" src="https://example.jpg"></xpl-avatar>
-        </div>
-        <div slot="title">Jane Doe</div>
-        <div slot="metadata">
-            <span>Product Designer</span>
-            <xpl-icon icon="envelope"></xpl-icon>
-        </div>
-        <div slot="details">London</div>
-        <div slot="badges">
-            <xpl-badge variant="success">Active</xpl-badge>
-        </div>
-        <div slot="actions">
-            <xpl-button type="button" size="sm">Edit</xpl-button>
-        </div>
-    </xpl-list-item>
-
-    <xpl-list-item item-id="item-2">
-        <div slot="avatar">
-            <xpl-avatar name="Alex Kim" src="https://example.jpg"></xpl-avatar>
-        </div>
-        <div slot="title">Alex Kim</div>
-        <div slot="metadata">
-            <span>Engineering Lead</span>
-            <xpl-icon icon="envelope"></xpl-icon>
-        </div>
-        <div slot="details">New York</div>
-        <div slot="badges">
-            <xpl-badge variant="warning">Away</xpl-badge>
-        </div>
-        <div slot="actions">
-            <xpl-button type="button" size="sm">Edit</xpl-button>
-        </div>
-    </xpl-list-item>
-
-    <xpl-list-item item-id="item-3" error>
-        <div slot="avatar">
-            <xpl-avatar name="Sam Rivera"></xpl-avatar>
-        </div>
-        <div slot="title">Sam Rivera</div>
-        <div slot="metadata">
-            <span>Marketing</span>
-        </div>
-        <div slot="details">Remote</div>
-        <div slot="badges">
-            <xpl-badge variant="error">Inactive</xpl-badge>
-        </div>
-        <div slot="actions">
-            <xpl-button type="button" size="sm">Edit</xpl-button>
-        </div>
-        <div slot="error-text">Account requires attention</div>
-    </xpl-list-item>
-</xpl-list>`;
-List.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: [slotBasedExample],
-    },
-    html: {
-        render: slotBasedExample,
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=16296-10660&p=f&t=vVY2x58f7oPprNSr-11',
-    },
-};