@xplortech/apollo-core 2.5.0 → 2.6.0

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

@@ -0,0 +1,519 @@
+const escapeHtmlAttribute = (value) => value
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+const defaultItems = [
+    { label: 'Dashboard', icon: 'house-4', selected: true },
+    { label: 'Product', icon: 'bag-shopping-2' },
+    { label: 'Reports', icon: 'chart-line', link: true, href: '#reports' },
+    { label: 'Disabled Item', icon: 'lock', disabled: true },
+    { label: 'Hidden Item', icon: 'eye', hidden: true },
+    {
+        label: 'Settings',
+        hasChildren: true,
+        expanded: true,
+        children: [{ label: 'Location' }, { label: 'Schedule', selected: true }],
+    },
+    {
+        label: 'Integrations',
+        hasChildren: true,
+        children: [{ label: 'Webhooks' }, { label: 'API Keys' }],
+    },
+    {
+        label: 'Archived',
+        hasChildren: true,
+        disabled: true,
+        children: [{ label: 'Old Reports' }],
+    },
+];
+const defaultFooterItems = [
+    { label: 'Support', icon: 'headset' },
+    { label: 'Logout', icon: 'open-rect-arrow-out' },
+];
+const defaultNavConfig = {
+    navLabel: 'Main navigation',
+    items: defaultItems,
+    footerItems: defaultFooterItems,
+};
+const renderNavItem = (item) => {
+    var _a, _b;
+    const attrs = [
+        item.label ? `label="${escapeHtmlAttribute(item.label)}"` : '',
+        item.icon && !item.hasChildren ? `icon="${escapeHtmlAttribute(item.icon)}"` : '',
+        item.selected ? 'selected' : '',
+        item.disabled ? 'disabled' : '',
+        item.hidden ? 'hidden' : '',
+        item.expanded ? 'expanded' : '',
+        item.hasChildren ? 'has-children' : '',
+        item.link ? 'link' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    if (item.link && item.href) {
+        return `
+    <xpl-side-nav-item ${attrs}>
+        <a href="${escapeHtmlAttribute(item.href)}">
+            ${item.icon ? `<xpl-icon icon="${escapeHtmlAttribute(item.icon)}" size="16"></xpl-icon>` : ''}
+            ${escapeHtmlAttribute(item.label)}
+        </a>
+    </xpl-side-nav-item>`;
+    }
+    const childrenHtml = (_b = (_a = item.children) === null || _a === void 0 ? void 0 : _a.map(renderNavItem).join('')) !== null && _b !== void 0 ? _b : '';
+    return `
+    <xpl-side-nav-item ${attrs}>${childrenHtml}
+    </xpl-side-nav-item>`;
+};
+const renderHtmlNavItem = (item, depth = 0) => {
+    var _a, _b;
+    const indent = '  '.repeat(depth);
+    const linkClass = [
+        'xpl-side-nav-item__link',
+        item.selected ? 'selected' : '',
+        item.expanded ? 'expanded' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    if (item.link) {
+        return `${indent}<div class="xpl-side-nav-item">
+${indent}  <a href="${item.href || '#'}" class="${linkClass}"${item.selected ? ' aria-current="page"' : ''}${item.disabled ? ' aria-disabled="true" tabindex="-1"' : ''}>
+${indent}    <span class="xpl-side-nav-item__icon">${item.icon || ''}</span>
+${indent}    <span class="xpl-side-nav-item__label">${item.label}</span>
+${indent}  </a>
+${indent}</div>`;
+    }
+    const hasChildren = item.hasChildren || (item.children && item.children.length > 0);
+    const childrenHtml = (_b = (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child) => renderHtmlNavItem(child, depth + 2)).join('\n')) !== null && _b !== void 0 ? _b : '';
+    return `${indent}<div class="xpl-side-nav-item">
+${indent}  <button type="button" class="${linkClass}"${item.selected ? ' aria-current="page"' : ''}${hasChildren ? ` aria-expanded="${item.expanded ? 'true' : 'false'}"` : ''}${item.disabled ? ' disabled' : ''}>
+${indent}    ${hasChildren ? '<span class="xpl-side-nav-item__arrow"><!-- chevron --></span>' : `<span class="xpl-side-nav-item__icon">${item.icon || ''}</span>`}
+${indent}    <span class="xpl-side-nav-item__label">${item.label}</span>
+${indent}  </button>${hasChildren && !item.link
+        ? `
+${indent}  <div class="xpl-side-nav-item__children ${item.expanded ? 'expanded' : ''}">
+${indent}    <div class="xpl-side-nav-item__children-inner">
+${childrenHtml ? `\n${childrenHtml}\n${indent}    ` : ''}</div>
+${indent}  </div>`
+        : ''}
+${indent}</div>`;
+};
+export default {
+    title: 'Components/Navigation/Side Navigation',
+    component: 'xpl-side-nav',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+const renderHtmlSideNav = (config) => {
+    const { navLabel, items, footerItems } = config;
+    const itemsHtml = items.map((item) => renderHtmlNavItem(item, 4)).join('\n');
+    const footerHtml = footerItems.map((item) => renderHtmlNavItem(item, 4)).join('\n');
+    return `<div class="xpl-side-nav">
+  <div class="xpl-side-nav__wrapper">
+    <nav class="xpl-side-nav__content" aria-label="${escapeHtmlAttribute(navLabel)}">
+      <div class="xpl-side-nav__section">
+${itemsHtml}
+      </div>
+      <div class="xpl-side-nav__footer">
+${footerHtml}
+      </div>
+    </nav>
+  </div>
+</div>`;
+};
+const SideNavigationWebComponent = (config) => {
+    const { navLabel, items, footerItems } = config;
+    const itemsHtml = items.map(renderNavItem).join('');
+    const footerHtml = footerItems.map(renderNavItem).join('');
+    return `<xpl-side-nav label="${escapeHtmlAttribute(navLabel)}"><div slot="section">${itemsHtml}</div><div slot="nav-footer">${footerHtml}</div></xpl-side-nav>`;
+};
+export const SideNavigation = ({ navConfig }) => {
+    const { navLabel, items, footerItems } = navConfig;
+    const itemsHtml = items.map(renderNavItem).join('');
+    const footerHtml = footerItems.map(renderNavItem).join('');
+    return `
+<style>
+    .side-nav-demo-wrapper {
+        height: 600px;
+        display: flex;
+        background-color: var(--xpl-background-surface-subtle);
+        border: var(--xpl-border-small) solid var(--xpl-border-default);
+    }
+    .side-nav-demo-main {
+        flex: 1;
+        padding: var(--xpl-space-32);
+        color: var(--xpl-text-default);
+    }
+    .side-nav-demo-main h1 { margin: 0; }
+    .side-nav-demo-legend {
+        margin-top: var(--xpl-space-24);
+        padding: var(--xpl-space-16);
+        border-radius: var(--xpl-border-radius-default);
+        background: var(--xpl-background-surface-transparent-5);
+        font-size: var(--xpl-font-size-callout);
+        line-height: 1.8;
+    }
+    .side-nav-demo-legend code {
+        background: var(--xpl-background-surface-transparent-10);
+        padding: var(--xpl-space-2) var(--xpl-space-6);
+        border-radius: var(--xpl-border-radius-small);
+        font-size: var(--xpl-font-size-caption);
+    }
+</style>
+<div class="side-nav-demo-wrapper">
+    <xpl-side-nav label="${escapeHtmlAttribute(navLabel)}">
+        <div slot="section">${itemsHtml}
+        </div>
+        <div slot="nav-footer">${footerHtml}
+        </div>
+    </xpl-side-nav>
+
+    <div class="side-nav-demo-main">
+        <h1>Side Navigation Demo</h1>
+        <p>Data-driven navigation: edit the <code>navConfig</code> object in Controls (same shape you would build from router metadata — <code>navLabel</code>, <code>items[]</code>, <code>footerItems[]</code>) and map it to markup with <code>renderNavItem</code>-style helpers in your app.</p>
+        <div class="side-nav-demo-legend">
+            <strong><code>NavDemoConfig</code></strong><br/>
+            <code>{ navLabel, items: NavItem[], footerItems: NavItem[] }</code>
+        </div>
+        <div class="side-nav-demo-legend">
+            <strong><code>NavItem</code></strong><br/>
+            <code>{ label, icon?, selected?, disabled?, hidden?, hasChildren?, expanded?, link?, href?, children? }</code>
+        </div>
+        <div class="side-nav-demo-legend">
+            <strong>Slots:</strong><br/>
+            <code>slot="section"</code> — main navigation items<br/>
+            <code>slot="nav-footer"</code> — footer items
+        </div>
+    </div>
+</div>`;
+};
+SideNavigation.args = {
+    navConfig: Object.assign({}, defaultNavConfig),
+};
+SideNavigation.argTypes = {
+    navConfig: {
+        control: 'object',
+        description: 'Full sidebar config (router-style): `navLabel`, `items[]`, `footerItems[]`. Arrays map to `xpl-side-nav-item` markup.',
+    },
+};
+SideNavigation.parameters = {
+    layout: 'fullscreen',
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=33873-23128&m=dev',
+    },
+    docs: {
+        description: {
+            story: 'Full navigation demo: typed `navConfig` object control maps array data to `xpl-side-nav` / `xpl-side-nav-item` markup — same pattern as mapping router config to nav in production.',
+        },
+    },
+    'web-component': {
+        render: SideNavigationWebComponent(SideNavigation.args.navConfig),
+    },
+    html: {
+        render: renderHtmlSideNav(SideNavigation.args.navConfig),
+    },
+};
+export const ItemPlayground = {
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Display label for the navigation item',
+        },
+        icon: {
+            control: 'text',
+            description: 'Icon name (leaf/footer rows only; ignored when hasChildren — expandable rows use chevron only)',
+        },
+        selected: {
+            control: 'boolean',
+            description: 'Whether the item is in selected state',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the item is disabled',
+        },
+        hidden: {
+            control: 'boolean',
+            description: 'Whether the item is hidden',
+        },
+        expanded: {
+            control: 'boolean',
+            description: 'Whether expandable children are visible (requires hasChildren)',
+        },
+        hasChildren: {
+            control: 'boolean',
+            description: 'Whether the item can contain nested children',
+        },
+        link: {
+            control: 'boolean',
+            description: 'Whether the item is a link (slot-only mode)',
+        },
+        childLabel1: {
+            control: 'text',
+            description: 'Label for first child item (when hasChildren is true)',
+        },
+        childLabel2: {
+            control: 'text',
+            description: 'Label for second child item (when hasChildren is true)',
+        },
+    },
+    args: {
+        label: 'Playground Item',
+        icon: 'house-4',
+        selected: false,
+        disabled: false,
+        hidden: false,
+        expanded: false,
+        hasChildren: false,
+        link: false,
+        childLabel1: 'Child Item A',
+        childLabel2: 'Child Item B',
+    },
+    render: ({ label, icon, selected, disabled, hidden, expanded, hasChildren, link, childLabel1, childLabel2, }) => {
+        const attrs = [
+            label ? `label="${label}"` : '',
+            icon && !hasChildren ? `icon="${icon}"` : '',
+            selected ? 'selected' : '',
+            disabled ? 'disabled' : '',
+            hidden ? 'hidden' : '',
+            expanded ? 'expanded' : '',
+            hasChildren ? 'has-children' : '',
+            link ? 'link' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        let content = '';
+        if (link) {
+            content = `
+        <a href="#${(label === null || label === void 0 ? void 0 : label.toLowerCase().replace(/\s+/g, '-')) || 'item'}">
+            ${icon ? `<xpl-icon icon="${icon}" size="16"></xpl-icon>` : ''}
+            ${label}
+        </a>`;
+        }
+        else if (hasChildren) {
+            content = `
+        <xpl-side-nav-item label="${childLabel1}" ></xpl-side-nav-item>
+        <xpl-side-nav-item label="${childLabel2}" ></xpl-side-nav-item>`;
+        }
+        return `
+<style>
+    .item-playground-wrapper {
+        width: 280px;
+        padding: var(--xpl-space-16);
+        border: var(--xpl-border-small) solid var(--xpl-border-default);
+        background-color: var(--xpl-background-surface-subtlest);
+        border-radius: var(--xpl-border-radius-default);
+    }
+    .item-playground-note {
+        font-size: var(--xpl-font-size-caption);
+        color: var(--xpl-text-subdued);
+        margin-top: var(--xpl-space-12);
+        line-height: 1.5;
+    }
+</style>
+<div class="xpl-side-nav item-playground-wrapper">
+    <xpl-side-nav-item ${attrs}>${content}
+    </xpl-side-nav-item>
+</div>
+<p class="item-playground-note">
+    Interactive playground for <code>xpl-side-nav-item</code>. Toggle props in the Controls panel to see state changes in real-time.
+</p>`;
+    },
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                story: 'Interactive playground for testing all `xpl-side-nav-item` props individually. Toggle boolean props, change text values, and observe the component behavior.',
+            },
+        },
+    },
+};
+const ItemPlaygroundWebComponent = (args) => {
+    var _a;
+    const attrs = [
+        args.label ? `label="${args.label}"` : '',
+        args.icon && !args.hasChildren ? `icon="${args.icon}"` : '',
+        args.selected ? 'selected' : '',
+        args.disabled ? 'disabled' : '',
+        args.hidden ? 'hidden' : '',
+        args.expanded ? 'expanded' : '',
+        args.hasChildren ? 'has-children' : '',
+        args.link ? 'link' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    let content = '';
+    if (args.link) {
+        content = `
+        <a href="#${((_a = args.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().replace(/\s+/g, '-')) || 'item'}">
+            ${args.icon ? `<xpl-icon icon="${args.icon}" size="16"></xpl-icon>` : ''}
+            ${args.label}
+        </a>`;
+    }
+    else if (args.hasChildren) {
+        content = `
+        <xpl-side-nav-item label="${args.childLabel1}"></xpl-side-nav-item>
+        <xpl-side-nav-item label="${args.childLabel2}"></xpl-side-nav-item>`;
+    }
+    return `
+<style>
+    .item-playground-wrapper {
+        width: 280px;
+        padding: var(--xpl-space-16);
+        border: var(--xpl-border-small) solid var(--xpl-border-default);
+        background-color: var(--xpl-background-surface-subtlest);
+        border-radius: var(--xpl-border-radius-default);
+    }
+</style>
+<div class="xpl-side-nav item-playground-wrapper">
+    <xpl-side-nav-item ${attrs}>${content}
+    </xpl-side-nav-item>
+</div>`;
+};
+const renderHtmlItemPlayground = (args) => {
+    const { label = 'Item', selected = false, disabled = false, hasChildren = false, expanded = false, link = false, childLabel1 = 'Child A', childLabel2 = 'Child B', } = args;
+    const linkClass = [
+        'xpl-side-nav-item__link',
+        selected ? 'selected' : '',
+        expanded ? 'expanded' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    if (link) {
+        return `<div class="xpl-side-nav-item">
+  <a href="#item" class="${linkClass}"${selected ? ' aria-current="page"' : ''}${disabled ? ' aria-disabled="true" tabindex="-1"' : ''}>
+    <span class="xpl-side-nav-item__icon"><!-- icon --></span>
+    <span class="xpl-side-nav-item__label">${label}</span>
+  </a>
+</div>`;
+    }
+    const childrenContent = hasChildren
+        ? `
+  <div class="xpl-side-nav-item__children ${expanded ? 'expanded' : ''}">
+    <div class="xpl-side-nav-item__children-inner">
+      <div class="xpl-side-nav-item">
+        <button type="button" class="xpl-side-nav-item__link">
+          <span class="xpl-side-nav-item__icon"><!-- icon --></span>
+          <span class="xpl-side-nav-item__label">${childLabel1}</span>
+        </button>
+      </div>
+      <div class="xpl-side-nav-item">
+        <button type="button" class="xpl-side-nav-item__link">
+          <span class="xpl-side-nav-item__icon"><!-- icon --></span>
+          <span class="xpl-side-nav-item__label">${childLabel2}</span>
+        </button>
+      </div>
+    </div>
+  </div>`
+        : '';
+    return `<div class="xpl-side-nav-item">
+  <button type="button" class="${linkClass}"${selected ? ' aria-current="page"' : ''}${hasChildren ? ` aria-expanded="${expanded ? 'true' : 'false'}"` : ''}${disabled ? ' disabled' : ''}>
+    ${hasChildren ? '<span class="xpl-side-nav-item__arrow"><!-- chevron --></span>' : '<span class="xpl-side-nav-item__icon"><!-- icon --></span>'}
+    <span class="xpl-side-nav-item__label">${label}</span>
+  </button>${childrenContent}
+</div>`;
+};
+ItemPlayground.parameters = Object.assign(Object.assign({}, ItemPlayground.parameters), { 'web-component': {
+        render: ItemPlaygroundWebComponent(ItemPlayground.args),
+    }, html: {
+        render: renderHtmlItemPlayground(ItemPlayground.args),
+    } });
+export const FooterSlot = {
+    argTypes: {
+        footerItems: {
+            control: 'object',
+            description: 'Navigation items for the footer slot',
+        },
+    },
+    args: {
+        footerItems: [
+            { label: 'Settings', icon: 'gear' },
+            { label: 'Help', icon: 'headset' },
+            { label: 'Logout', icon: 'open-rect-arrow-out', disabled: false },
+        ],
+    },
+    render: ({ footerItems }) => {
+        const footerHtml = footerItems.map(renderNavItem).join('');
+        return `
+<style>
+    .footer-demo-wrapper {
+        width: 280px;
+        padding: var(--xpl-space-16);
+        border: var(--xpl-border-small) solid var(--xpl-border-default);
+        background-color: var(--xpl-background-surface-subtlest);
+        border-radius: var(--xpl-border-radius-default);
+    }
+    .footer-demo-caption {
+        font-size: var(--xpl-font-size-caption);
+        color: var(--xpl-text-subdued);
+        margin-bottom: var(--xpl-space-8);
+    }
+</style>
+<div class="footer-demo-caption">Nav Footer Slot</div>
+<xpl-side-nav class="footer-demo-wrapper">
+    <div slot="section">
+        <xpl-side-nav-item label="Dashboard" icon="house-4" selected></xpl-side-nav-item>
+    </div>
+    <div slot="nav-footer">${footerHtml}
+    </div>
+</xpl-side-nav>`;
+    },
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web',
+        },
+    },
+};
+const FooterSlotWebComponent = (args) => {
+    const footerHtml = args.footerItems.map(renderNavItem).join('');
+    return `
+<style>
+    .footer-demo-wrapper {
+        width: 280px;
+        padding: var(--xpl-space-16);
+        border: var(--xpl-border-small) solid var(--xpl-border-default);
+        background-color: var(--xpl-background-surface-subtlest);
+        border-radius: var(--xpl-border-radius-default);
+    }
+    .footer-demo-caption {
+        font-size: var(--xpl-font-size-caption);
+        color: var(--xpl-text-subdued);
+        margin-bottom: var(--xpl-space-8);
+    }
+</style>
+<div class="footer-demo-caption">Nav Footer Slot</div>
+<xpl-side-nav class="footer-demo-wrapper">
+    <div slot="section">
+        <xpl-side-nav-item label="Dashboard" icon="house-4" selected></xpl-side-nav-item>
+    </div>
+    <div slot="nav-footer">${footerHtml}</div>
+</xpl-side-nav>`;
+};
+const FooterSlotHtml = (args) => {
+    const footerHtml = args.footerItems.map((item) => renderHtmlNavItem(item, 4)).join('\n');
+    return `<div class="xpl-side-nav">
+  <div class="xpl-side-nav__wrapper">
+    <nav class="xpl-side-nav__content">
+      <div class="xpl-side-nav__section">
+        <div class="xpl-side-nav-item">
+          <button type="button" class="xpl-side-nav-item__link selected" aria-current="page">
+            <span class="xpl-side-nav-item__icon"><!-- icon --></span>
+            <span class="xpl-side-nav-item__label">Dashboard</span>
+          </button>
+        </div>
+      </div>
+      <div class="xpl-side-nav__footer">
+${footerHtml}
+      </div>
+    </nav>
+  </div>
+</div>`;
+};
+FooterSlot.parameters = Object.assign(Object.assign({}, FooterSlot.parameters), { 'web-component': {
+        render: FooterSlotWebComponent(FooterSlot.args),
+    }, html: {
+        render: FooterSlotHtml(FooterSlot.args),
+    } });