@xplortech/apollo-core 2.12.0 → 3.1.0

package/dist/collection/components/xpl-button-row/button-row.stories.js

@@ -1,68 +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/Button Row',
-    argTypes: {
-        primary: {
-            type: { name: 'string', required: true },
-        },
-        secondary: {
-            type: { name: 'string', required: false },
-        },
-        tertiary: {
-            type: { name: 'string', required: false },
-        },
-    },
-};
-export const ButtonRow = ({ primary, secondary, tertiary }) => {
-    let attrs = '';
-    if (primary)
-        attrs += ` primary="${primary}"`;
-    if (secondary)
-        attrs += ` secondary="${secondary}"`;
-    if (tertiary)
-        attrs += ` tertiary="${tertiary}"`;
-    return `<xpl-button-row${attrs}></xpl-button-row>`;
-};
-ButtonRow.args = {
-    primary: 'Save',
-    secondary: '',
-    tertiary: '',
-};
-ButtonRow.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: ButtonRow(ButtonRow.args),
-    },
-    html: {
-        render: (({ primary, secondary, tertiary }) => `
-                <div class="xpl-button-row">
-                    <div class="xpl-button-row-inner">${secondary
-            ? `
-                        <button class="xpl-button xpl-button--secondary">
-                            ${secondary}
-                        </button>`
-            : `
-                        <div></div><!-- empty div included for layout only -->`}
-                        <div>${tertiary
-            ? `
-                            <button class="xpl-button xpl-button--subtle">
-                                ${tertiary}
-                            </button>`
-            : ''}
-                            <button class="xpl-button">
-                                ${primary}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            `)(ButtonRow.args),
-    },
-};

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

@@ -1,71 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-const meta = {
-    title: 'Components/Calendar',
-    component: 'xpl-calendar',
-    argTypes: {
-        mode: {
-            control: { type: 'select' },
-            options: ['single', 'range'],
-        },
-        defaultDate: {
-            control: 'text',
-            description: 'Default date (YYYY-MM-DD) or date range in array format',
-        },
-        dateFormat: { control: 'text' },
-        max: { control: 'text', description: 'Maximum date (YYYY-MM-DD)' },
-        min: { control: 'text', description: 'Minimum date (YYYY-MM-DD)' },
-    },
-    parameters: {
-        actions: {
-            handles: ['dateSelected'],
-        },
-    },
-    tags: ['beta', 'vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-};
-export default meta;
-export const Calendar = ({ defaultDate, dateFormat, max, min, mode, }) => `
-    <div style="padding: 30px; width: 300px;">
-        <xpl-calendar
-            date-format="${dateFormat || 'Y-m-d'}"
-            max="${max || ''}"
-            min="${min || ''}"
-            mode="${mode || 'single'}"
-            default-date="${defaultDate || ''}"
-        ></xpl-calendar>
-    </div>
-`;
-Calendar.args = {
-    mode: 'single',
-    defaultDate: '2026-01-15',
-    dateFormat: 'Y-m-d',
-    max: '',
-    min: '',
-};
-Calendar.parameters = {
-    'web-component': {
-        render: Calendar(Calendar.args),
-    },
-    html: {
-        render: (() => `
-            <div class="xpl-calendar">
-                <input
-                    type="text"
-                    id={this._id}
-                    ref={(el) => (this.inputElement = el)}
-                    style={{ display: 'none' }}
-                />
-            </div>
-        `)(),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=21578-117377&p=f&t=aZipOZlFAFwtMW1r-11',
-    },
-};

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

@@ -1,92 +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/Checkbox',
-    argTypes: {
-        label: {
-            type: { name: 'string', required: true },
-        },
-        description: {
-            type: { name: 'string', required: false },
-        },
-        checked: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        disabled: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        indeterminate: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        styled: {
-            control: {
-                type: 'boolean',
-            },
-        },
-    },
-};
-export const Checkbox = ({ label, description, checked, disabled, indeterminate, styled, }) => {
-    let attrs = '';
-    if (description)
-        attrs += ` description="${description}"`;
-    if (checked)
-        attrs += ` checked`;
-    if (disabled)
-        attrs += ` disabled`;
-    if (indeterminate)
-        attrs += ` indeterminate`;
-    if (styled)
-        attrs += ` styled`;
-    return `<xpl-checkbox${attrs}>${label}</xpl-checkbox>`;
-};
-Checkbox.args = {
-    label: 'Checkbox',
-    description: '',
-    checked: false,
-    disabled: false,
-    indeterminate: false,
-    styled: false,
-};
-Checkbox.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Checkbox(Checkbox.args),
-    },
-    html: {
-        render: (({ label, description, checked, disabled, indeterminate, styled, }) => {
-            let attrs = '';
-            if (checked)
-                attrs += ` checked`;
-            if (disabled)
-                attrs += ` disabled`;
-            if (indeterminate)
-                attrs += ` indeterminate`;
-            return `
-                <div class="xpl-checkbox-radio-container${styled ? ' styled' : ''}${disabled ? ' disabled' : ''}">
-                <input class="xpl-checkbox" id="id" type="checkbox" ${attrs}></input>
-                <label class="xpl-label${disabled ? ' xpl-label--disabled' : ''}" for="id">
-                    ${label}${description
-                ? `<small class="xpl-description${disabled ? ' xpl-description--disabled' : ''}">${description}</small>`
-                : ''}</label>
-                </div>
-            `;
-        })(Checkbox.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=3915-91031&p=f&t=aZipOZlFAFwtMW1r-11',
-    },
-};

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

@@ -1,162 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { v4 as uuid } from "uuid";
-export default {
-    title: 'Components/Choicelist',
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    argTypes: {
-        multi: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        styled: {
-            control: {
-                type: 'boolean',
-            },
-        },
-    },
-    parameters: {
-        actions: {
-            handles: ['choicelistChange', 'choicelistValueChange'],
-        },
-    },
-};
-const data = [
-    {
-        label: 'Label #1',
-        description: 'Lorem ipsum dolor sit amet',
-        value: 'choice-1',
-    },
-    {
-        label: 'Label #2',
-        description: 'Lorem ipsum dolor sit amet',
-        checked: true,
-        value: 'choice-2',
-    },
-    {
-        label: 'Label #3',
-        description: 'Lorem ipsum dolor sit amet',
-        value: 'choice-3',
-    },
-];
-const script = ({ id, multi, styled }) => `
-    (function() {
-        const choicelist = document.getElementById("${id}");
-        choicelist.choices = ${JSON.stringify(data)};
-        choicelist.multi = ${multi ? 'true' : 'false'};
-        choicelist.styled = ${styled ? 'true' : 'false'};
-    })();
-`;
-export const Choicelist = ({ multi, styled }) => {
-    const id = uuid();
-    return `<xpl-choicelist id="${id}" name="choicelist"></xpl-choicelist><script>${script({
-        id,
-        multi,
-        styled,
-    })}</script>`;
-};
-Choicelist.args = {
-    multi: false,
-    styled: false,
-};
-export const Styled = ({ multi }) => {
-    const id = uuid();
-    return `<xpl-choicelist id="${id}" name="choicelist-styled" heading="Choice list" description="Pick the options that apply."></xpl-choicelist><script>
-        (function () {
-            const choicelist = document.getElementById("${id}");
-            choicelist.choices = ${JSON.stringify(data)};
-            choicelist.multi = ${multi ? 'true' : 'false'};
-            choicelist.styled = true;
-        })();
-    </script>`;
-};
-Styled.args = {
-    multi: true,
-    styled: true,
-};
-Styled.parameters = {
-    layout: 'centered',
-    controls: { include: ['multi'] },
-};
-Choicelist.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: (({ multi, styled }) => {
-            let attrs = '';
-            if (multi)
-                attrs += ' multi';
-            if (styled)
-                attrs += ' styled';
-            return [
-                `
-                <xpl-choicelist${attrs} name="choicelist-name" id="choicelist-id"></xpl-choicelist>
-                <script>
-                    const choicelist = document.querySelector("#choicelist-id");
-                    choicelist.choices = [
-                        {
-                            label: "Label #1",
-                            description: "Lorem ipsum dolor sit amet",
-                            value: "choice-1",
-                        },
-                        {
-                            label: "Label #2",
-                            description: "Lorem ipsum dolor sit amet",
-                            value: "choice-2",
-                        },
-                        ...
-                    ];
-                    choicelist.addEventListener("choicelistChange", (e) => {
-                        console.log("choicelistChange", e.detail);
-                    });
-                    choicelist.addEventListener("choicelistValueChange", (e) => {
-                        console.log("choicelistValueChange", e.detail);
-                    });
-                </script>
-                `,
-            ];
-        })(Choicelist.args),
-    },
-    html: {
-        render: (({ multi, styled }) => {
-            let className = 'xpl-choicelist';
-            if (styled)
-                className += ' xpl-choicelist--styled';
-            const output = [];
-            if (styled)
-                output.push(`WARNING: For \`styled\` choicelists, there is
-JS interactivity that is only provided by the web component
-(specifically highlighting the background of a choice). The
-code shown below does not reflect the additional \`styled\`
-choicelist markup and interactivity.`);
-            output.push(`<ul class="${className}">
-    <li>
-        <div class="xpl-${multi ? 'checkbox' : 'radio'}-container">
-            <input class="xpl-${multi ? 'checkbox' : 'radio'}" id="choice-1" name="choicelist-name" type="${multi ? 'checkbox' : 'radio'}" value="choice-1"></input>
-            <label for="choice-1">
-                Label #1
-                <small>Lorem ipsum dolor sit amet</small>
-            </label>
-        </div>
-    </li>
-    <li>
-        <div class="xpl-${multi ? 'checkbox' : 'radio'}-container">
-            <input class="xpl-${multi ? 'checkbox' : 'radio'}" id="choice-2" name="choicelist-name" type="${multi ? 'checkbox' : 'radio'}" value="choice-2"></input>
-            <label for="choice-2">
-                Label #2
-                <small>Lorem ipsum dolor sit amet</small>
-            </label>
-        </div>
-    </li>
-    ...
-</ul>`);
-            return output;
-        })(Choicelist.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=15501-10918&p=f&t=aZipOZlFAFwtMW1r-11',
-    },
-};

package/dist/collection/components/xpl-content-area/content-area.stories.js

@@ -1,44 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-const body = `
-    <div>
-        <p>The main content of the page renders here.</p>
-        <p>It sits on the page surface using the default text colour.</p>
-    </div>
-`;
-export default {
-    title: 'Components/Content Area',
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    argTypes: {
-        size: {
-            options: ['wide', 'narrow', 'full'],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-export const ContentArea = ({ size }) => `
-        <xpl-content-area size="${size}">
-            ${body}
-        </xpl-content-area>
-    `;
-ContentArea.args = {
-    size: 'wide',
-};
-ContentArea.parameters = {
-    'web-component': {
-        render: ContentArea(ContentArea.args),
-    },
-    html: {
-        render: (({ size }) => `
-                <main class="xpl-content-area-wrapper xpl-content-area-wrapper__${size}">
-                    <div class="xpl-content-area">
-                        ${body}
-                    </div>
-                </main>
-            `)(ContentArea.args),
-    },
-};

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

@@ -1,57 +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: 'Data Components/Dashboard',
-    argTypes: {
-        cardQuantity: {
-            control: {
-                type: 'number',
-                min: 1,
-                max: 6,
-                step: 1,
-            },
-        },
-    },
-};
-export const Dashboard = ({ cardQuantity }) => {
-    const dashboardCard = `
-                <xpl-data-card
-                    name="New Users"
-                    stat="123"
-                    variant="primary"
-                    icon="graph"
-                    link
-                >
-                    <a href="#"></a>
-                </xpl-data-card>
-    `;
-    const dashboardCards = Array.from({ length: cardQuantity })
-        .map((_i) => dashboardCard)
-        .join('\n');
-    return `
-        <div class="dashboard-container">
-            <xpl-dashboard>
-                ${dashboardCards}
-            </xpl-dashboard>
-        </div>
-    `;
-};
-Dashboard.args = {
-    cardQuantity: 2,
-};
-Dashboard.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Dashboard(Dashboard.args),
-    },
-    html: {
-        render: ((_) => `<div class="xpl-dashboard"></div>`)(Dashboard.args),
-    },
-};

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

@@ -1,170 +0,0 @@
-import { expect, waitFor } from "storybook/test";
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import data from "@xplortech/apollo-icons/build/data.json";
-const waitForHydration = async ({ canvasElement }) => {
-    if (document.fonts?.ready) {
-        await document.fonts.ready;
-    }
-    await waitFor(() => {
-        const cards = canvasElement.querySelectorAll('xpl-data-card');
-        expect(cards.length).toBeGreaterThan(0);
-        const customEls = canvasElement.querySelectorAll('xpl-data-card, xpl-icon, xpl-tooltip');
-        customEls.forEach((el) => expect(el.classList.contains('hydrated')).toBe(true));
-    }, { timeout: 15000 });
-};
-export default {
-    title: 'Data Components/Data Card',
-    tags: ['vrt'],
-    beforeEach() {
-        document.body.classList.remove('dark');
-        document.body.classList.add('light');
-        setAutoSnapshotOptions({
-            enable: true,
-            failureThreshold: 2,
-            failureThresholdType: 'percent',
-        });
-    },
-    argTypes: {
-        name: {
-            type: { name: 'string', required: true },
-        },
-        stat: {
-            type: { name: 'string', required: true },
-        },
-        shortStat: {
-            type: { name: 'string' },
-        },
-        leadingIconVariant: {
-            options: ['primary', 'secondary'],
-            control: {
-                type: 'select',
-            },
-        },
-        link: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        leadingIcon: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        icon: {
-            options: Object.keys(data),
-            control: {
-                type: 'select',
-            },
-        },
-        smallStat: {
-            type: { name: 'string' },
-        },
-        smallStatIcon: {
-            options: Object.keys(data),
-            control: {
-                type: 'select',
-            },
-        },
-        detail: {
-            type: { name: 'string' },
-        },
-        variant: {
-            type: { name: 'string' },
-        },
-        tooltipTextStat: {
-            type: { name: 'string' },
-        },
-        tooltipTextSmallStat: {
-            type: { name: 'string' },
-        },
-    },
-};
-export const DataCard = ({ name, stat, leadingIconVariant, leadingIcon, smallStat, detail, link, shortStat, smallStatIcon, icon, variant, tooltipTextStat, tooltipTextSmallStat, }) => `
-        <dl class="xpl-dl">
-            <xpl-data-card
-                    stat=${stat}
-                    variant=${leadingIconVariant}
-                    leading-icon=${leadingIcon}
-                    icon=${icon}
-                    small-stat=${smallStat}
-                    detail=${detail}
-                    link=${link}
-                    short-stat=${shortStat}
-                    small-stat-icon=${smallStatIcon}
-                    variant=${variant}
-                    tooltip-text-small-stat=${tooltipTextStat}
-                    tooltip-text-stat=${tooltipTextSmallStat}
-                >
-                    <a href="#"></a>
-                    <span slot="title">${name}</span>
-                    <div
-                        slot="graph-content"
-                        style="
-                            border-radius: 0px;
-                            border: 1px dashed  #6923f4;
-                            background: #f4f2ff;
-                            width: 100%;
-                        "
-                    >
-
-                    </div>
-                </xpl-data-card>
-        </dl>
-    `;
-DataCard.args = {
-    name: 'Title',
-    stat: '$12,000,000.00',
-    leadingIconVariant: 'primary',
-    leadingIcon: true,
-    smallStat: '00.00',
-    detail: 'Detail',
-    link: true,
-    shortStat: '$1.2M',
-    smallStatIcon: 'arrow-up-right',
-    icon: 'graph',
-    variant: 'positive',
-    tooltipTextStat: '$837,494 this period. $807,100 last period.',
-    tooltipTextSmallStat: '$123,444.00"',
-};
-DataCard.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: DataCard(DataCard.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=8793-114043&p=f&t=01tbTrRZyfvVafsA-11',
-    },
-};
-DataCard.play = waitForHydration;
-export const IconVariants = () => `
-    <dl class="xpl-dl" style="display: flex; gap: 1rem;">
-        <xpl-data-card stat="$12,000,000.00" variant="primary" leading-icon="true" icon="graph">
-            <span slot="title">Primary icon</span>
-        </xpl-data-card>
-        <xpl-data-card stat="$12,000,000.00" variant="secondary" leading-icon="true" icon="graph">
-            <span slot="title">Secondary icon</span>
-        </xpl-data-card>
-    </dl>
-`;
-IconVariants.parameters = {
-    layout: 'centered',
-};
-IconVariants.play = waitForHydration;
-export const StatSentiments = () => `
-    <dl class="xpl-dl" style="display: flex; gap: 1rem;">
-        <xpl-data-card stat="$12,000,000.00" small-stat="12.5%" small-stat-variant="positive" detail="vs last period">
-            <span slot="title">Positive</span>
-        </xpl-data-card>
-        <xpl-data-card stat="$12,000,000.00" small-stat="8.3%" small-stat-variant="negative" detail="vs last period">
-            <span slot="title">Negative</span>
-        </xpl-data-card>
-        <xpl-data-card stat="$12,000,000.00" small-stat="0.1%" small-stat-variant="neutral" detail="vs last period">
-            <span slot="title">Neutral</span>
-        </xpl-data-card>
-    </dl>
-`;
-StatSentiments.parameters = {
-    layout: 'centered',
-};
-StatSentiments.play = waitForHydration;