@xplortech/apollo-core 2.12.0 → 3.1.0

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

@@ -1,112 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForComponentsRender } from "../../../../src/utils/story-vrt";
-export default {
-    title: 'Components/Toast',
-    component: 'xpl-toast',
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({
-            enable: true,
-            failureThreshold: 1,
-            failureThresholdType: 'percent',
-        });
-    },
-    play: async ({ canvasElement }) => {
-        await waitForComponentsRender(canvasElement);
-    },
-    argTypes: {
-        variant: {
-            options: ['neutral', 'warning', 'success'],
-            control: {
-                type: 'select',
-            },
-        },
-        showIcon: { control: 'boolean' },
-        showAction: { control: 'boolean' },
-        dismissible: { control: 'boolean' },
-        toastTitle: { control: 'text', required: true },
-        caption: { control: 'text', required: false },
-        timeout: { control: 'number', required: false },
-    },
-};
-export const Toast = ({ variant, showIcon, dismissible, toastTitle, caption, showAction, timeout, }) => `
-    <p style="color: var(--xpl-color-red-600); font-family: var(--xpl-font-family-default);">
-        Use the "Remount Component" button to reload the toast
-    </p>
-    <xpl-toast
-        variant="${variant}"
-        show-icon="${showIcon}"
-        caption="${caption}"
-        dismissible="${dismissible}"
-        timeout="${timeout ?? 8000}"
-    >
-        <p slot="title">${toastTitle}</p>
-        ${showAction
-    ? `<xpl-button slot="action" size="sm" variant="${variant}">Test Action</xpl-button>`
-    : ''}
-    </xpl-toast>
-`;
-Toast.args = {
-    variant: 'neutral',
-    showIcon: true,
-    showAction: false,
-    dismissible: true,
-    toastTitle: 'This is a toast',
-    caption: 'This is the caption',
-    timeout: 0,
-};
-Toast.parameters = {
-    'web-component': {
-        render: Toast(Toast.args),
-    },
-    html: {
-        render: ((args) => {
-            const { variant, showIcon, dismissible, toastTitle, caption, showAction } = args;
-            const getIcon = () => {
-                switch (variant) {
-                    case 'warning':
-                        return '<xpl-icon icon="octagon-warning" size="24" />';
-                    case 'success':
-                        return '<xpl-icon icon="circle-check" size="24" />';
-                    default:
-                        return '<xpl-icon icon="message-writing" size="24" />';
-                }
-            };
-            return `
-                <div class="xpl-toast xpl-toast--${variant}">
-                    <div class="xpl-toast__left">
-                        ${showIcon
-                ? `<div class="xpl-toast__icon xpl-toast__icon--${variant}">${getIcon()}</div>`
-                : ''}
-                        <div class="xpl-toast__notification">
-                            <p class="xpl-toast__title">${toastTitle}</p>
-                            ${caption
-                ? `<p class="xpl-toast__caption">${caption.substring(0, 85)}</p>`
-                : ''}
-                        </div>
-                    </div>
-                    <div class="xpl-toast__action">
-                        ${showAction
-                ? `<xpl-button size="sm" variant="${variant}">Test Action</xpl-button>`
-                : ''}
-                    </div>
-                    ${dismissible
-                ? `<div class="xpl-toast__close">
-                        <xpl-button
-                            variant="tertiary"
-                            size="sm"
-                            icon-only
-                            icon="xmark"
-                            aria-label="Dismiss notification"
-                        ></xpl-button>
-                    </div>`
-                : ''}
-                </div>
-            `;
-        })(Toast.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=13039-31141&p=f&t=vVY2x58f7oPprNSr-11',
-    },
-};

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

@@ -1,95 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-export default {
-    title: 'Components/Toggle',
-    component: 'xpl-toggle',
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    argTypes: {
-        checked: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        variant: {
-            options: ['default', 'small'],
-            control: {
-                type: 'select',
-            },
-        },
-        heading: {
-            type: { name: 'string', required: true },
-        },
-        label: {
-            type: { name: 'string', required: true },
-        },
-        description: {
-            type: { name: 'string', required: false },
-        },
-        disabled: {
-            control: {
-                type: 'boolean',
-            },
-        },
-    },
-};
-export const Toggle = ({ checked, description, disabled, label, heading, variant, }) => {
-    let attrs = '';
-    if (checked)
-        attrs += ` checked`;
-    if (description)
-        attrs += ` description="${description}"`;
-    if (heading)
-        attrs += ` heading="${heading}"`;
-    if (label)
-        attrs += ` label="${label}"`;
-    if (variant === 'small')
-        attrs += ' variant="small"';
-    if (disabled)
-        attrs += ` disabled`;
-    return `<xpl-toggle${attrs}></xpl-toggle>`;
-};
-Toggle.args = {
-    checked: false,
-    heading: 'Toggle Heading',
-    label: 'Label',
-    variant: 'default',
-    description: 'Lorem ipsum dolor sit amet',
-    disabled: false,
-};
-Toggle.parameters = {
-    layout: 'centered',
-    htmlSnippet: { mode: 'auto' },
-    'web-component': {
-        render: Toggle(Toggle.args),
-    },
-    html: {
-        render: (({ checked, description, disabled, heading, label, variant }) => {
-            let attrs = '';
-            if (disabled)
-                attrs += ` disabled`;
-            if (checked)
-                attrs += ` checked`;
-            let className = 'xpl-toggle';
-            if (variant === 'small')
-                className += ' xpl-toggle--small';
-            return `<div class="xpl-toggle-container">${heading || description
-                ? `
-    <label for="id">
-        ${heading}${description
-                    ? `
-        <small>${description}</small>`
-                    : ''}
-    </label>`
-                : ''}
-    <input class="${className}" id="id" type="checkbox"${attrs}></input>
-    <label for="id">${label}</label>
-</div>`;
-        })(Toggle.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=3915-91030&p=f&t=vVY2x58f7oPprNSr-11',
-    },
-};

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

@@ -1,39 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-export default {
-    title: 'Components/Toolbar',
-    component: 'xpl-toolbar',
-    tags: ['beta', 'vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-    argTypes: {
-        selectedItemCount: {
-            control: { type: 'number' },
-        },
-    },
-};
-export const Toolbar = ({ selectedItemCount }) => `
-    <xpl-toolbar selected-item-count="${selectedItemCount}">
-        <xpl-button slot="actions-left" variant="tertiary" size="sm" icon="trash">Delete</xpl-button>
-        <xpl-button slot="actions-left" variant="tertiary" size="sm" icon="export">Export</xpl-button>
-        <xpl-button slot="actions-right" variant="tertiary" size="sm" icon-only icon="xmark">Clear</xpl-button>
-    </xpl-toolbar>
-`;
-Toolbar.args = {
-    selectedItemCount: 3,
-};
-Toolbar.parameters = {
-    layout: 'fullscreen',
-    docs: {
-        description: {
-            story: 'The toolbar is an always-dark selection bar. It is hidden until `selectedItemCount` is greater than 0, and renders bulk actions in the `actions-left` and `actions-right` slots.',
-        },
-    },
-    'web-component': {
-        render: Toolbar(Toolbar.args),
-    },
-};

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

@@ -1,67 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-const meta = {
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-    title: 'Components/Tooltip',
-    component: 'xpl-tooltip',
-    argTypes: {
-        text: { control: 'text' },
-        hideArrow: { control: 'boolean' },
-        position: {
-            control: { type: 'select' },
-            options: [
-                'top-middle',
-                'right',
-                'bottom-middle',
-                'left',
-                'top-left',
-                'top-right',
-                'bottom-left',
-                'bottom-right',
-            ],
-        },
-    },
-};
-export default meta;
-export const Tooltip = ({ text, position, hideArrow }) => `
-    <div style="padding: 100px; display: flex; justify-content: center;">
-        <xpl-tooltip text="${text}" position="${position}" hide-arrow="${hideArrow}">
-            <xpl-button>Hover me</xpl-button>
-        </xpl-tooltip>
-    </div>
-`;
-Tooltip.args = {
-    text: 'This is a tooltip',
-    position: 'top-middle',
-    hideArrow: false,
-};
-Tooltip.parameters = {
-    'web-component': {
-        render: Tooltip(Tooltip.args),
-    },
-    html: {
-        render: (({ text, position }) => `
-            <div class="xpl-tooltip-container">
-                <div class="xpl-tooltip xpl-tooltip--${position}">
-                    ${text}
-                    <div class="xpl-tooltip-arrow">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="13">
-                            <path d="M0.5 5h15l-7.5 7.5L0.5 5Z" fill="white" stroke="none" class="xpl-tooltip-arrow__fill" />
-                            <path d="M0.5 5 L8 12.5 L15.5 5" fill="none" stroke="black" stroke-width="1" class="xpl-tooltip-arrow__stroke" />
-                        </svg>
-                    </div>
-                </div>
-            </div>
-        `)(Tooltip.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6440-96808&p=f&t=vVY2x58f7oPprNSr-11',
-    },
-};