@xplortech/apollo-core 2.6.0 → 2.7.0

package/dist/collection/components/xpl-tabs/segment-control.stories.js

@@ -0,0 +1,31 @@
+import { renderTabsStoryMarkup, segmentControlDefaultArgs, segmentControlStoryArgTypes, tabsPlainDomSegmentStoryHtml, } from "./tabs.shared";
+export default {
+    title: 'Components/Segment Control',
+    component: 'xpl-tabs',
+    parameters: {
+        actions: {
+            handles: ['tabChange'],
+        },
+        docs: {
+            description: {
+                component: '**Segment Control** is `xpl-tabs` with `type="segment"`. For underline tabs see **Components/Tabs**.',
+            },
+        },
+    },
+    argTypes: segmentControlStoryArgTypes,
+};
+export const SegmentControl = (args, context) => renderTabsStoryMarkup(args, context !== null && context !== void 0 ? context : {});
+SegmentControl.args = segmentControlDefaultArgs;
+SegmentControl.parameters = {
+    layout: 'padded',
+    'web-component': {
+        render: renderTabsStoryMarkup(segmentControlDefaultArgs),
+    },
+    html: {
+        render: tabsPlainDomSegmentStoryHtml,
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6405-96230',
+    },
+};

package/dist/collection/components/xpl-tabs/tabs.shared.js

@@ -0,0 +1,156 @@
+export function escapeHtmlAttr(value) {
+    return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+export function clampTabCount(n) {
+    if (Number.isNaN(n) || n < 1) {
+        return 1;
+    }
+    return Math.min(200, Math.floor(n));
+}
+export function coerceTabsStoryValue(args) {
+    var _a;
+    const n = clampTabCount(args.tabCount);
+    const targets = Array.from({ length: n }, (_, i) => `tab${i}`);
+    const valueTrim = args.value.trim();
+    if (!valueTrim) {
+        return '';
+    }
+    if (targets.includes(valueTrim)) {
+        return valueTrim;
+    }
+    return (_a = targets[0]) !== null && _a !== void 0 ? _a : '';
+}
+export function buildTabsMarkup(args) {
+    const n = clampTabCount(args.tabCount);
+    const targets = Array.from({ length: n }, (_, i) => `tab${i}`);
+    const hostAttrs = [];
+    if (args.type === 'segment') {
+        hostAttrs.push('type="segment"');
+    }
+    if (args.disabled) {
+        hostAttrs.push('disabled');
+    }
+    if (args.fullWidth) {
+        hostAttrs.push('full-width');
+    }
+    const valueTrim = args.value.trim();
+    if (valueTrim && targets.includes(valueTrim)) {
+        hostAttrs.push(`value="${escapeHtmlAttr(valueTrim)}"`);
+    }
+    const open = hostAttrs.length ? `<xpl-tabs ${hostAttrs.join(' ')}>` : '<xpl-tabs>';
+    const lines = [open];
+    const firstTabParts = ['slot="heading"', 'target="tab0"'];
+    if (args.tabDisabled) {
+        firstTabParts.push('disabled');
+    }
+    if (args.type === 'segment') {
+        const icon = args.icon.trim();
+        if (icon) {
+            firstTabParts.push(`icon="${escapeHtmlAttr(icon)}"`);
+        }
+        if (args.iconPosition !== 'start') {
+            firstTabParts.push(`icon-position="${args.iconPosition}"`);
+        }
+    }
+    const firstHeading = args.type === 'tabs' ? 'Tab' : 'Segment';
+    lines.push(`    <xpl-tab ${firstTabParts.join(' ')}>${firstHeading} 1</xpl-tab>`);
+    for (let i = 1; i < n; i += 1) {
+        lines.push(`    <xpl-tab slot="heading" target="tab${i}">${args.type === 'tabs' ? 'Tab' : 'Segment'} ${i + 1}</xpl-tab>`);
+    }
+    for (let i = 0; i < n; i += 1) {
+        lines.push(`    <xpl-tab-panel slot="panel" target="tab${i}">Content for ${args.type === 'tabs' ? 'tab' : 'segment'} ${i + 1}</xpl-tab-panel>`);
+    }
+    lines.push('</xpl-tabs>');
+    return lines.join('\n');
+}
+export function renderTabsStoryMarkup(args, context = {}) {
+    var _a;
+    const value = coerceTabsStoryValue(args);
+    if (value !== args.value) {
+        (_a = context.updateArgs) === null || _a === void 0 ? void 0 : _a.call(context, { value });
+    }
+    return buildTabsMarkup(Object.assign(Object.assign({}, args), { value }));
+}
+export const tabsPlainDomUnderlineStoryHtml = `<---- Non-interactive plain DOM (tabs.css BEM). Not the <xpl-tabs> API; use the Web Component tab for that. Ids mirror the scoped pattern (data-tabs-instance-id + target). ---->
+<div class="xpl-tabs" data-tabs-instance-id="xpl-tg-1">
+    <xpl-select class-names="xpl-tabs__mobile-select" selected-values="tab0"></xpl-select>
+    <nav class="xpl-tabs__headings" role="tablist" aria-orientation="horizontal">
+        <div class="xpl-tabs__active-bar"></div>
+        <div class="xpl-tab xpl-tab--selected">
+            <button class="xpl-tab__button" type="button" role="tab" id="xpl-tg-1-tab-tab0" aria-controls="xpl-tg-1-panel-tab0" aria-selected="true">Tab 1</button>
+        </div>
+        <div class="xpl-tab">
+            <button class="xpl-tab__button" type="button" role="tab" id="xpl-tg-1-tab-tab1" aria-controls="xpl-tg-1-panel-tab1" aria-selected="false">Tab 2</button>
+        </div>
+    </nav>
+    <div class="xpl-tabs__panels">
+        <div class="xpl-tab-panel xpl-tab-panel--selected" role="tabpanel" id="xpl-tg-1-panel-tab0" aria-labelledby="xpl-tg-1-tab-tab0">Content for tab 1</div>
+        <div class="xpl-tab-panel" role="tabpanel" id="xpl-tg-1-panel-tab1" aria-labelledby="xpl-tg-1-tab-tab1">Content for tab 2</div>
+    </div>
+</div>`;
+export const tabsPlainDomSegmentStoryHtml = `<---- Segment (type='segment'): Stencil renders xpl-tab.xpl-tab--segment > xpl-button; xpl-tab assigns id, role, and aria-* on the inner native <button>. Plain buttons below only illustrate tablist ↔ tabpanel id wiring (not .xpl-tab__button). ---->
+<div class="xpl-tabs xpl-tabs--segment" data-tabs-instance-id="xpl-tg-2">
+    <xpl-select class-names="xpl-tabs__mobile-select" selected-values="tab0"></xpl-select>
+    <nav class="xpl-tabs__headings" role="tablist" aria-orientation="horizontal">
+        <div class="xpl-tab xpl-tab--segment xpl-tab--selected">
+            <button type="button" role="tab" id="xpl-tg-2-tab-tab0" aria-controls="xpl-tg-2-panel-tab0" aria-selected="true">Segment 1</button>
+        </div>
+        <div class="xpl-tab xpl-tab--segment">
+            <button type="button" role="tab" id="xpl-tg-2-tab-tab1" aria-controls="xpl-tg-2-panel-tab1" aria-selected="false">Segment 2</button>
+        </div>
+    </nav>
+    <div class="xpl-tabs__panels">
+        <div class="xpl-tab-panel xpl-tab-panel--selected" role="tabpanel" id="xpl-tg-2-panel-tab0" aria-labelledby="xpl-tg-2-tab-tab0">Content for segment 1</div>
+        <div class="xpl-tab-panel" role="tabpanel" id="xpl-tg-2-panel-tab1" aria-labelledby="xpl-tg-2-tab-tab1">Content for segment 2</div>
+    </div>
+</div>`;
+export const tabsStoryBaseArgTypes = {
+    type: {
+        options: ['tabs', 'segment'],
+        control: { type: 'select' },
+        description: '`xpl-tabs` — underline (`tabs`) or pills (`segment`).',
+    },
+    disabled: {
+        control: { type: 'boolean' },
+        description: '`xpl-tabs` — disables the group.',
+    },
+    fullWidth: {
+        control: { type: 'boolean' },
+        description: '`xpl-tabs` — full width.',
+    },
+    value: {
+        control: { type: 'text' },
+        description: '`xpl-tabs` — selected `target` (e.g. `tab0`). Must match an existing tab for the current **Tab count**; otherwise it resets to `tab0`. Leave empty for the first tab.',
+    },
+    tabCount: {
+        control: { type: 'number', min: 1, max: 200, step: 1 },
+        description: 'How many tab/panel pairs to show (`tab0` …).',
+    },
+    tabDisabled: {
+        control: { type: 'boolean' },
+        description: 'First `xpl-tab` only — disabled.',
+    },
+    icon: {
+        control: { type: 'text' },
+        description: 'First `xpl-tab` only — icon (segment). Empty = none.',
+    },
+    iconPosition: {
+        options: ['start', 'end'],
+        control: { type: 'radio' },
+        description: 'First `xpl-tab` only — icon position.',
+    },
+};
+const SEGMENT_CATEGORY_XPL_TABS = '01 — xpl-tabs';
+const SEGMENT_CATEGORY_FIRST_TAB = '02 — xpl-tab controls (first tab only for simplicity)';
+export const segmentControlStoryArgTypes = Object.assign(Object.assign({}, tabsStoryBaseArgTypes), { type: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.type), { table: { disable: true } }), disabled: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.disabled), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), fullWidth: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.fullWidth), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), value: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.value), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), tabCount: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.tabCount), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), tabDisabled: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.tabDisabled), { table: { category: SEGMENT_CATEGORY_FIRST_TAB } }), icon: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.icon), { table: { category: SEGMENT_CATEGORY_FIRST_TAB } }), iconPosition: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.iconPosition), { table: { category: SEGMENT_CATEGORY_FIRST_TAB } }) });
+export const tabsUnderlineDefaultArgs = {
+    type: 'tabs',
+    disabled: false,
+    fullWidth: false,
+    value: 'tab0',
+    tabCount: 2,
+    tabDisabled: false,
+    icon: '',
+    iconPosition: 'start',
+};
+export const segmentControlDefaultArgs = Object.assign(Object.assign({}, tabsUnderlineDefaultArgs), { type: 'segment', icon: 'house-4' });

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

@@ -1,78 +1,28 @@
+import { renderTabsStoryMarkup, tabsPlainDomUnderlineStoryHtml, tabsStoryBaseArgTypes, tabsUnderlineDefaultArgs, } from "./tabs.shared";
 export default {
     title: 'Components/Tabs',
+    component: 'xpl-tabs',
     parameters: {
         actions: {
             handles: ['tabChange'],
         },
-    },
-    argTypes: {
-        tabsLength: {
-            control: {
-                type: 'number',
-            },
-        },
-        fullWidth: {
-            control: {
-                type: 'boolean',
+        docs: {
+            description: {
+                component: 'Underline tabs use `xpl-tabs` with `type="tabs"` (default). **Segment Control** is the same component with `type="segment"` — see **Components/Segment Control** in the sidebar.',
             },
         },
     },
+    argTypes: Object.assign(Object.assign({}, tabsStoryBaseArgTypes), { type: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.type), { table: { disable: true } }), icon: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.icon), { table: { disable: true } }), iconPosition: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.iconPosition), { table: { disable: true } }) }),
 };
-const renderHeadingAndPanel = (tabsLength) => Array.from({ length: tabsLength }, (_, index) => `
-        <xpl-tab target="tab${index}" slot="heading">Tab ${index + 1}</xpl-tab>
-        <xpl-tab-panel target="tab${index}" slot="panel">Tab ${index + 1} content</xpl-tab-panel>
-    `).join('');
-export const Tabs = ({ tabsLength, fullWidth }) => `
-    <xpl-tabs value="tab${tabsLength - 1}" full-width="${fullWidth}">
-        ${renderHeadingAndPanel(tabsLength)}
-    </xpl-tabs>
-`;
-Tabs.args = {
-    tabsLength: 2,
-    fullWidth: false,
-};
+export const Tabs = (args, context) => renderTabsStoryMarkup(args, context !== null && context !== void 0 ? context : {});
+Tabs.args = tabsUnderlineDefaultArgs;
 Tabs.parameters = {
     layout: 'padded',
     'web-component': {
-        render: (({ tabsLength, fullWidth }) => [
-            `<xpl-tabs value="tab2" full-width="${fullWidth}">
-                ${renderHeadingAndPanel(tabsLength)}
-            </xpl-tabs>`,
-        ])(Tabs.args),
+        render: renderTabsStoryMarkup(tabsUnderlineDefaultArgs),
     },
     html: {
-        render: (({ fullWidth }) => [
-            `<div class="xpl-tabs ${fullWidth ? 'xpl-tabs--full-width' : ''}">
-                <xpl-select classnames="xpl-tabs__mobile-select" selectedvalues="tab0"></xpl-select>
-                <div class="xpl-tabs__headings" role="tablist">
-                    <div
-                    class="xpl-tabs__active-bar"
-                    style="transform: translateX(77.5156px); width: 47.75px"
-                    ></div>
-                    <div class="xpl-tab">
-                    <a class="xpl-tab__button" role="tab" aria-controls="tab0">Tab 1</a>
-                    </div>
-                    <div class="xpl-tab">
-                    <a class="xpl-tab__button" role="tab" aria-controls="tab1">Tab 2</a>
-                    </div>
-                </div>
-
-                <div class="xpl-tabs__panels">
-                    <div class="xpl-tab-panel">
-                    <div class="xpl-text-title-4">Tab 1 content</div>
-                    <p class="xpl-text-body">
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
-                    </p>
-                    </div>
-                    <div class="xpl-tab-panel">
-                    <div class="xpl-text-title-4">Tab 2 content</div>
-                    <p class="xpl-text-body">
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
-                    </p>
-                    </div>
-                </div>
-            </div>`,
-        ])(Tabs.args),
+        render: tabsPlainDomUnderlineStoryHtml,
     },
     design: {
         type: 'figma',