@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -1,63 +0,0 @@
-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'],
-};
-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: new Date().toISOString().split('T')[0],
-    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,83 +0,0 @@
-export default {
-    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,138 +0,0 @@
-import { v4 as uuid } from "uuid";
-export default {
-    title: 'Components/Choicelist',
-    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,
-};
-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,55 +0,0 @@
-export default {
-    title: 'Components/Content Area',
-    argTypes: {
-        size: {
-            options: ['wide', 'narrow', 'full'],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-export const ContentArea = ({ size }) => `
-        <xpl-content-area size="${size}">
-            <div>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
-                ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
-                explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
-                sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
-                quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
-                non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
-                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
-                ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
-                velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
-                pariatur?
-            </div>
-        </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">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
-                        ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
-                        explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
-                        sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
-                        quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
-                        non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
-                        Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
-                        ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
-                        velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
-                        pariatur?
-                    </div>
-                </main>
-            `)(ContentArea.args),
-    },
-};

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

@@ -1,48 +0,0 @@
-export default {
-    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,115 +0,0 @@
-import data from "@xplortech/apollo-icons/build/data.json";
-export default {
-    title: 'Data Components/Data Card',
-    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',
-    },
-};

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

@@ -1,36 +0,0 @@
-export default {
-    title: 'Components/Divider',
-    argTypes: {
-        tier: {
-            options: [3, 2, 1, 0],
-            control: {
-                type: 'select',
-            },
-        },
-        text: {
-            type: { name: 'string', required: false },
-        },
-    },
-};
-export const Divider = ({ tier, text }) => {
-    let attrs = '';
-    attrs += ` tier="${tier}"`;
-    return `<xpl-divider${attrs}>${text}</xpl-divider>`;
-};
-Divider.args = {
-    tier: 3,
-    text: 'Lorem Ipsum',
-};
-Divider.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Divider(Divider.args),
-    },
-    html: {
-        render: (({ tier, text }) => `<div class="xpl-divider xpl-divider--${tier.toString()}">${text}</div>`)(Divider.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=16545-7981&p=f&t=aZipOZlFAFwtMW1r-11',
-    },
-};