@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -1,164 +0,0 @@
-export default {
-    title: 'Components/Popover',
-    parameters: {
-        actions: {
-            handles: ['isOpenChange'],
-        },
-    },
-};
-export const Simple = ({ isOpen = true, position, display }) => {
-    const attributes = {
-        'is-open': isOpen,
-        position,
-        display,
-    };
-    return `
-    <div style="padding: 100px; display: flex; justify-content: center;">
-      <xpl-popover ${Object.entries(attributes)
-        .map(([key, value]) => `${key}="${value}"`)
-        .join(' ')}>
-        <xpl-button slot="trigger">
-          Toggle Popover
-        </xpl-button>
-        <div>This is the popover content.</div>
-      </xpl-popover>
-    </div>
-  `;
-};
-export const LargerTrigger = ({ isOpen = true, position }) => {
-    const attributes = {
-        'is-open': isOpen,
-        position,
-    };
-    return `
-    <div style="padding: 100px; display: flex; justify-content: center;">
-      <xpl-popover ${Object.entries(attributes)
-        .map(([key, value]) => `${key}="${value}"`)
-        .join(' ')}>
-        <button slot="trigger" style="cursor: pointer; height: 128px; background-color: gray">
-          Toggle Popover
-        </button>
-        <div>This is the popover content.</div>
-      </xpl-popover>
-    </div>
-  `;
-};
-export const LargerContent = ({ isOpen = true, position }) => {
-    const attributes = {
-        'is-open': isOpen,
-        position,
-    };
-    return `
-    <div style="padding: 100px; display: flex; justify-content: center;">
-      <xpl-popover ${Object.entries(attributes)
-        .map(([key, value]) => `${key}="${value}"`)
-        .join(' ')}>
-        <xpl-button slot="trigger">
-          Toggle Popover
-        </xpl-button>
-        <div style="display: flex; flex-direction: column; gap: 1rem;">
-          <span class="xpl-text-title-4">Title</span>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-            tincidunt, nunc at bibendum facilisis, nunc nisl aliquet nunc, eget
-            aliquam nisl nunc eget nunc. Sed tincidunt, nunc at bibendum
-            facilisis, nunc nisl aliquet nunc, eget aliquam nisl nunc eget nunc.
-            </p>
-           <div style="display: flex; gap: 1rem;">
-            <xpl-button size="small" variant="primary">Primary</xpl-button>
-            <xpl-button size="small" variant="secondary">Secondary</xpl-button>
-            </div>
-        </div>
-      </xpl-popover>
-    </div>
-  `;
-};
-[Simple, LargerTrigger, LargerContent].forEach((comp) => {
-    comp.argTypes = {
-        isOpen: {
-            control: 'boolean',
-            description: 'Whether the popover is open initially',
-        },
-        position: {
-            control: {
-                type: 'select',
-            },
-            options: [
-                'top-left',
-                'middle-left',
-                'bottom-left',
-                'top-right',
-                'middle-right',
-                'bottom-right',
-                'top-start',
-                'top-middle',
-                'top-end',
-                'bottom-start',
-                'bottom-middle',
-                'bottom-end',
-            ],
-        },
-        display: {
-            control: {
-                type: 'select',
-            },
-            options: ['arrow', 'menu'],
-            description: 'Display style of the popover',
-        },
-    };
-    comp.args = {
-        isOpen: true,
-        position: 'top-middle',
-        display: 'arrow',
-    };
-    comp.parameters = {
-        layout: 'centered',
-        'web-component': {
-            render: comp(comp.args),
-        },
-        html: {
-            render: (({ isOpen = true, position = 'top-middle', display = 'arrow' }) => `
-            <div class="xpl-popover xpl-popover--${position} ${isOpen ? 'xpl-popover--is-open' : ''}">
-
-                >
-                    <button
-                        onClick={togglePopover}
-                    >
-                        Toggle Popover
-                    </button>
-
-                    <div class="xpl-popover__arrow">
-                        <svg
-                            width="17"
-                            height="14"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                d="M0 5h15l-7.5 7.5L0 5Z"
-                                fill="white"
-                                stroke="none"
-                                class="arrow-fill"
-                            />
-
-                            <path
-                                d="M0 5 L7.5 12.5 L15 5"
-                                fill="none"
-                                stroke="black"
-                                stroke-width="1"
-                                class="arrow-stroke"
-                            />
-                        </svg>
-                    </div>
-
-                    <div class="xpl-popover__content xpl-popover__content--display-${display}">
-                        Content for the popover goes here.
-                    </div>
-                </div>
-                `)(comp.args),
-        },
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=15240-61430&p=f&t=01tbTrRZyfvVafsA-11',
-        },
-    };
-});

package/dist/collection/components/xpl-progress-bar/progress-bar.stories.js

@@ -1,96 +0,0 @@
-export default {
-    title: 'Components/Progress Bar',
-    argTypes: {
-        label: {
-            type: { name: 'string', required: false },
-            description: 'The label text displayed above the progress bar',
-        },
-        helperText: {
-            type: { name: 'string', required: false },
-            description: 'The helper text displayed below the progress bar (recommended for error state)',
-        },
-        max: {
-            control: { type: 'number' },
-            description: 'The maximum value of the progress (mirrors native <progress> max attribute)',
-        },
-        value: {
-            control: { type: 'range', min: 0, max: 100, step: 1 },
-            description: 'The current value of the progress (mirrors native <progress> value attribute). Not used for indeterminate variant.',
-        },
-        size: {
-            options: ['sm', 'lg'],
-            control: { type: 'select' },
-            description: 'The size of the progress bar height: sm = 4px, lg = 6px',
-        },
-        variant: {
-            options: ['default', 'success', 'error', 'indeterminate'],
-            control: { type: 'select' },
-            description: 'The visual variant of the progress bar',
-        },
-    },
-};
-export const ProgressBar = (args) => {
-    let attrs = '';
-    if (args.label)
-        attrs += ` label="${args.label}"`;
-    if (args.helperText)
-        attrs += ` helper-text="${args.helperText}"`;
-    if (args.max !== 100)
-        attrs += ` max="${args.max}"`;
-    if (args.value !== undefined && args.variant !== 'indeterminate')
-        attrs += ` value="${args.value}"`;
-    if (args.size !== 'lg')
-        attrs += ` size="${args.size}"`;
-    if (args.variant !== 'default')
-        attrs += ` variant="${args.variant}"`;
-    return `
-        <div style="display: flex; flex-direction: column; gap: var(--xpl-space-48); width: 50vw;">
-            <xpl-progress-bar${attrs}></xpl-progress-bar>
-        </div>
-    `;
-};
-ProgressBar.args = {
-    label: 'Uploading file...',
-    helperText: '2.4 MB of 5 MB',
-    max: 100,
-    value: 45,
-    size: 'lg',
-    variant: 'default',
-};
-ProgressBar.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: ProgressBar(ProgressBar.args),
-    },
-    html: {
-        render: (({ label, helperText, max, value, size, variant }) => {
-            const labelHtml = label
-                ? `<div class="xpl-progress-bar__header"><div class="xpl-progress-bar__label">${label}</div></div>`
-                : '';
-            const helperHtml = helperText
-                ? `<div class="xpl-progress-bar__helper">${helperText}</div>`
-                : '';
-            const maxValue = max !== null && max !== void 0 ? max : 100;
-            const currentValue = variant !== 'indeterminate' && value !== undefined ? value : maxValue;
-            const className = `xpl-progress-bar xpl-progress-bar--${size} xpl-progress-bar--${variant}`;
-            const progressHtml = variant === 'indeterminate'
-                ? `<div class="xpl-progress-bar__track xpl-progress-bar__track--indeterminate" role="progressbar" aria-label="${label || 'Progress'}"><div class="xpl-progress-bar__indeterminate"></div></div>`
-                : `<progress class="xpl-progress-bar__progress" value="${currentValue}" max="${maxValue}" aria-label="${label || 'Progress'}"></progress>`;
-            return `
-                <div class="${className}">
-                    <div class="xpl-progress-bar__wrapper">
-                        ${labelHtml}
-                        <div class="xpl-progress-bar__row">
-                            ${progressHtml}
-                        </div>
-                        ${helperHtml}
-                    </div>
-                </div>
-            `;
-        })(ProgressBar.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=12841-9237',
-    },
-};

package/dist/collection/components/xpl-progress-indicator/progress-indicator.stories.js

@@ -1,118 +0,0 @@
-export default {
-    title: 'Components/Progress Indicator',
-    component: 'xpl-progress-indicator',
-    argTypes: {
-        steps: { control: { type: 'object' } },
-        currentStep: { control: { type: 'number' } },
-        layout: { control: { type: 'select' }, options: ['horizontal', 'vertical'] },
-        showNumbers: { control: { type: 'boolean' } },
-        showLabels: { control: { type: 'boolean' } },
-    },
-    tags: ['beta'],
-};
-const defaultSteps = ['Details', 'Location', 'Instructor', 'Customers'];
-export const ProgressIndicator = ({ steps = defaultSteps, currentStep = 1, layout = 'horizontal', showNumbers = true, showLabels = true, }) => {
-    const id = 'progress-indicator-stepper';
-    const stepsJson = JSON.stringify(steps);
-    let attrs = '';
-    attrs += ` current-step="${currentStep}"`;
-    if (layout !== 'horizontal')
-        attrs += ` layout="${layout}"`;
-    if (!showNumbers)
-        attrs += ` show-numbers="false"`;
-    if (!showLabels)
-        attrs += ` show-labels="false"`;
-    return `
-        <div class="h-96" style="padding: var(--xpl-space-24); width: 100%; height: 300px">
-            <xpl-progress-indicator id="${id}"${attrs}></xpl-progress-indicator>
-
-            <div style="margin-top: var(--xpl-space-32); display: flex; gap: var(--xpl-space-10);">
-                <xpl-button id="${id}-prev" variant="secondary">Previous</xpl-button>
-                <xpl-button id="${id}-next">Next</xpl-button>
-            </div>
-
-            <script>
-                (function() {
-                    const progress = document.getElementById('${id}');
-                    progress.steps = ${stepsJson};
-
-                    const prevBtn = document.getElementById('${id}-prev');
-                    const nextBtn = document.getElementById('${id}-next');
-                    const totalSteps = ${steps.length};
-
-                    let currentStep = ${currentStep};
-
-                    const updateButtons = () => {
-                        prevBtn.disabled = currentStep === 0;
-                        nextBtn.disabled = currentStep === totalSteps;
-                    };
-
-                    updateButtons();
-
-                    prevBtn.onclick = () => {
-                        if (currentStep > 0) {
-                            currentStep--;
-                            progress.currentStep = currentStep;
-                            updateButtons();
-                        }
-                    };
-
-                    nextBtn.onclick = () => {
-                        if (currentStep < totalSteps) {
-                            currentStep++;
-                            progress.currentStep = currentStep;
-                            updateButtons();
-                        }
-                    };
-                })();
-            </script>
-        </div>
-    `;
-};
-ProgressIndicator.args = {
-    steps: defaultSteps,
-    currentStep: 1,
-    layout: 'horizontal',
-    showNumbers: true,
-    showLabels: true,
-};
-ProgressIndicator.parameters = {
-    'web-component': {
-        render: ProgressIndicator(ProgressIndicator.args),
-    },
-    html: {
-        render: `
-        <div style="padding: var(--xpl-space-24);">
-            <div class="xpl-progress-indicator xpl-progress-indicator-horizontal">
-                <div class="xpl-progress-indicator-container">
-                    ${defaultSteps
-            .map((step, index) => `
-                        <div class="xpl-progress-indicator-step ${index === 1
-            ? 'xpl-progress-indicator-step-active'
-            : index < 1
-                ? 'xpl-progress-indicator-step-finished'
-                : ''}">
-                            <div class="xpl-progress-indicator-step-content">
-                                <div class="xpl-progress-indicator-step-circle">${index < 1
-            ? '<xpl-icon icon="check-2" size="20" class="xpl-progress-indicator-step-checkmark"></xpl-icon>'
-            : `<span class="xpl-progress-indicator-step-number">${index + 1}</span>`}</div>
-                                <div class="xpl-progress-indicator-step-text">${step}</div>
-                            </div>
-                        </div>
-                    `)
-            .join('')}
-                </div>
-            </div>
-
-            <div style="margin-top: var(--xpl-space-32); display: flex; gap: var(--xpl-space-10);">
-                <button class="xpl-button xpl-button--secondary">Previous</button>
-                <button class="xpl-button">Next</button>
-            </div>
-        </div>
-        `,
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=12762-3404',
-    },
-};

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

@@ -1,106 +0,0 @@
-export default {
-    title: 'Components/Radio',
-    argTypes: {
-        label: {
-            type: { name: 'string', required: true },
-        },
-        description: {
-            type: { name: 'string', required: false },
-        },
-        checked: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        disabled: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        styled: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        value: {
-            type: { name: 'string', required: false },
-        },
-        name: {
-            type: { name: 'string', required: false },
-        },
-        selectedValue: {
-            type: { name: 'string', required: false },
-            description: 'When set, the radio is checked when `selectedValue` equals its `value`. ' +
-                'Use this to drive radio-group selection from a single source of truth ' +
-                '(e.g. Vue v-model on a shared `selectedValue`).',
-        },
-    },
-    parameters: {
-        actions: {
-            handles: ['radioChange'],
-        },
-    },
-};
-function toKebab(str) {
-    return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-}
-function getRadioAttrs(attrs) {
-    return Object.entries(attrs).reduce((acc, [attr, value]) => {
-        if (attr === 'label')
-            return acc;
-        const name = toKebab(attr);
-        if (typeof value === 'boolean')
-            return value ? `${acc} ${name}` : acc;
-        if (value)
-            return `${acc} ${name}="${value}"`;
-        return acc;
-    }, '');
-}
-export const Radio = (origAttrs) => {
-    const attrs = getRadioAttrs(origAttrs);
-    const demoAttr = attrs.replace(/ value="[^"]*"/, ' value="demo"');
-    const { label } = origAttrs;
-    return `
-        <form>
-            <xpl-radio ${demoAttr}> Demo</xpl-radio>
-            <xpl-radio${attrs}>${label}</xpl-radio>
-        </form>
-    `;
-};
-Radio.args = {
-    label: 'Radio Button',
-    description: '',
-    checked: false,
-    disabled: false,
-    styled: false,
-    value: '',
-    name: 'demo-name',
-    selectedValue: '',
-};
-Radio.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Radio(Radio.args),
-    },
-    html: {
-        render: (({ label, description, checked, disabled, styled }) => {
-            let attrs = '';
-            if (checked)
-                attrs += ` checked`;
-            if (disabled)
-                attrs += ` disabled`;
-            return `<div class="xpl-checkbox-radio-container${styled ? ' styled' : ''}${disabled ? ' disabled' : ''}">
-    <input class="xpl-radio" id="id" type="radio"${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>`;
-        })(Radio.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=3915-91032&p=f&t=vVY2x58f7oPprNSr-11',
-    },
-};

package/dist/collection/components/xpl-secondary-nav/secondary-nav.stories.js

@@ -1,78 +0,0 @@
-export default {
-    title: 'Components/Navigation/Secondary Nav',
-};
-export const SecondaryNav = (_) => `
-        <div class="secondary-nav-storybook-container">
-            <xpl-secondary-nav>
-                <ul>
-                    <xpl-nav-item>
-                        <a href="javascript:;">
-                            Dashboard
-                        </a>
-                    </xpl-nav-item>
-                    <xpl-nav-item>
-                        <a href="javascript:;">
-                            Board
-                        </a>
-                    </xpl-nav-item>
-                    <xpl-nav-item>
-                        <a href="javascript:;">
-                            Dash
-                        </a>
-                    </xpl-nav-item>
-                    <xpl-nav-item>
-                        <a href="javascript:;">
-                            Dboard
-                        </a>
-                    </xpl-nav-item>
-                    <xpl-nav-item>
-                        <a href="javascript:;">
-                            Dashboard Board
-                        </a>
-                    </xpl-nav-item>
-                </ul>
-            </xpl-secondary-nav>
-        </div>`;
-const HtmlSecondaryNav = (_) => `
-        <div class="xpl-secondary-nav">
-            <nav aria-label="Secondary Nav">
-                <ul>
-                    <li class="xpl-nav-item">
-                        <a href="javascript:;">
-                            Dashboard
-                        </a>
-                    </li>
-                    <li class="xpl-nav-item">
-                        <a href="javascript:;">
-                            Board
-                        </a>
-                    </li>
-                    <li class="xpl-nav-item">
-                        <a href="javascript:;">
-                            Dash
-                        </a>
-                    </li>
-                    <li class="xpl-nav-item">
-                        <a href="javascript:;">
-                            Dboard
-                        </a>
-                    </li>
-                    <li class="xpl-nav-item">
-                        <a href="javascript:;">
-                            Dashboard Board
-                        </a>
-                    </li>
-                </ul>
-            </nav>
-        </div>
-    `;
-SecondaryNav.args = {};
-SecondaryNav.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: SecondaryNav(SecondaryNav.args),
-    },
-    html: {
-        render: HtmlSecondaryNav(SecondaryNav.args),
-    },
-};